룰 간 충돌 분석

[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

[2-6] 공통 UI 컴포넌트 생성

해결된 질문

작성

공통 컴포넌트 부분의 프롬프트를 실행하던 중에 궁금한 점이 있어요.

아래와 같이 실행을 했는데,

1) input 버튼을 만들기 위해 파일 실행 - commons/components/input/prompts/prompt.101.ui.txt

2) 아래와 같은 답변이 나옴 (Claude-4.5-sonnet thinking model 사용):

🤔 룰 간 충돌 분석

prompt.101.ui.txt: variant 시스템 구현 요구

03-ui.mdc: 피그마 디자인 그대로만 구현하라고 요구

피그마 실제: 단일 Input만 존재

그리고 저 또한, AI가 돌린 코드를 분석하고 룰 재검토 및 실행을 몇 번 반복하는 과정에서 실질적으로 문제가 있을 수 있다고 보였어요.

1) Case 1

처음에 Button 컴포넌트를 위해서 프롬프트를 실행했을 때는 prompt.101.ui.txt의

"다음 조건을 모두 만족하는 완전한 variant 시스템을 구현할 것." 이 조건을 만족하기 위해서

노드ID 제공했는데도 불구하고, 계속해서 피그마의 모든 button을 다 찾아서 사이즈를 가져오는 것을 볼 수 있었습니다.

2) Case 2

그 다음에 Input 컴포넌트를 위해서 프롬프트를 실행했을 때는 03-ui.mdc 의 "피그마 링크가 제공되면, 모든 사이즈는 제공된 피그마와 동일하게 처리할 것" 이라는 룰을 검토하는 과정에서 문제가 있었습니다.

이 조건 때문에 반응형 웹은 고려하지 못하고 width를 진짜 있는 그대로 갖고 와서 상수로 넣어버리고, 유연성이 전혀 없게 만들었습니다.

몇 번 룰을 재검토하라고 시키고 원하는 코드와 비슷하게 만들긴 했지만, 혹시 이런 경우에 대한 해결 방법이 있을까요?

react next.js cursor 프롬프트엔지니어링 바이브코딩

답변 2

노원두

지식공유자

안녕하세요! 날래날래님!

1. 확실히 claude-sonnet 4.5 thinking이 똑똑하네요!
최대한 많은 인풋, 버튼을 가져와서 공통컴포넌트를 만드는게 원칙적으로 맞습니다!
해당 프로젝트내의 인풋, 버튼은 공통컴포넌트 하나로 사이즈가 유연히 변경될수있도록 말이에요!

=> 보통 실무에서 공통컴포넌트만 사이즈별로 모아놓는 영역을 디자이너님께서 만들어주시기 때문에, 그 안의 모든 버튼들이 담긴 노드를 복사해서 제너레이팅하면 쉽게 해결이 됩니다!

하지만, 현재 우리 수업에서는 공통컴포넌트만 담겨있는 피그마 영역은 따로 존재하지 않아요!
그럼에도 불구하고 claude-sonnet이 똑똑하게 잘 만들어 준 것 같네요!^^

반응형 디자인은 뒤에 수업에서 다루게 되는데요!
복잡도를 낮추기 위해, AI로 1차 스케치하고, 2차 반응형 디자인 덮어씌우기 방식을 진행합니다.

물론, 최초 시작부터 반응형까지 고려하여 설계하시는 것도 가능합니다!
(이 경우에는 와이어프레임부터 반응형 설계가 들어가셔야 합니다.)

하지만, 빠른 병렬처리와 최소한의 설계를 통한 프롬프팅의 복잡도를 낮추는 방법으로, 뒷부분 반응형디자인 파트에서 소개합니다!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 날래날래님.

프롬프트를 통해 AI가 다양한 룰을 기반으로 코드를 생성할 때, 맞지 않는 부분이 발생할 수 있는 상황에 대해 문의하셨군요. 이 과정에서 룰 간 충돌이 발생할 수 있는데요, 다음과 같은 방식으로 문제를 해결할 수 있습니다:

명확한 우선순위 설정: 여러 쉼표가 있는 규칙이 충돌할 경우, 우선순위를 명확하게 설정하는 것이 중요합니다. prompt.101.ui.txt와 03-ui.mdc에서 명확하게 어떤 규칙을 우선시할지를 미리 정해놓는 것 이 좋습니다. 예를 들어, variant 시스템 구현이 우선이라면 명확히 명시하세요.
룰 간의 조건에 대한 명확한 표현: 규칙이 어떠한 상황에서 적용될지를 명확히 기술하면, 여러 경우에서 반응형으로 코딩할 수 있습니다. “피그마 링크가 제공되면…” 부분에 특정 조건을 추가해서 상황에 맞게 룰을 분기하는 것이 필요합니다.
반복적인 룰 검토 및 테스트 방법: AI가 생성한 코드가 원하는 결과를 보이지 않을 경우, 반복적으로 역할(룰)을 검토하고 수정하는 과정을 통해 점진적으로 올바른 결과에 도달할 수 있습니다. 이 경우 코드의 문제점을 명확하게 표현하고, 이를 AI에게 전달하면 잘못된 부분을 분석하고 개선할 수 있습니다.

이와 같은 방법들이 도움이 되리라 생각합니다. 추가적으로 “룰 적용이 계속 안되는것 같아요”를 참고하시면, 룰 설정 및 검토에 대한 다른 사용자의 경험을 확인하실 수 있습니다. 이미지 URL과 원본 URL을 통해 더욱 자세한 이해를 도모하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

룰 간 충돌 분석