프롬프트 가이드
바이브코딩 프롬프트를 잘 쓰는 5가지 원칙
같은 AI에게 같은 기능을 요청해도 결과물의 완성도는 프롬프트에 따라 크게 갈립니다. 여러 번 다시 시키는 대신, 처음부터 잘 통하는 프롬프트에는 공통된 구조가 있습니다.
1. 화면을 나열하라
"쇼핑몰 만들어줘"는 실패하는 프롬프트입니다. AI가 어디까지 만들어야 할지 모르기 때문입니다. 대신 "상품 목록 → 상품 상세 → 장바구니 → 결제 → 주문 완료"처럼 만들 화면을 번호로 나열하면, AI는 각 화면을 하나씩 채워 나갑니다. 결과물의 누락이 줄고, 마음에 안 드는 화면만 골라 다시 요청하기도 쉬워집니다.
2. 디자인 토큰을 못 박아라
AI는 지시가 없으면 매번 다른 색과 여백을 씁니다. 화면 세 개를 만들면 세 개의 톤이 나옵니다. primary 색상, 배경색, 라운드 값(8/16/28처럼), 여백 스케일을 프롬프트에 명시하면 화면 간 일관성이 유지됩니다. 이 사이트의 추천 프롬프트가 각 카드마다 실제 팔레트 값을 자동으로 넣어 주는 이유가 이것입니다.
3. 카피의 톤을 지정하라
영문 기반으로 학습한 모델은 한국어 UI 문구를 어색하게 씁니다. "Get Started"를 "시작하기"로 옮기는 정도는 하지만, 서비스 성격에 맞는 말투까지는 잡아 주지 않습니다. 금융이면 간결하고 단정하게, 배달·커뮤니티면 친근하고 짧게처럼 톤을 한 줄 지정하고, 원하는 헤드라인 예시를 하나 보여 주면 결과가 눈에 띄게 좋아집니다.
4. 하지 말아야 할 것을 적어라
좋은 프롬프트에는 금지 사항이 있습니다. "실제 브랜드 로고나 상표를 쓰지 말 것", "이미지는 플레이스홀더로 처리할 것", "외부 라이브러리를 새로 설치하지 말 것" 같은 제약이 없으면, AI는 실행되지 않는 코드나 저작권 문제가 있는 자산을 태연히 끼워 넣습니다. 제약은 결과물을 좁히는 게 아니라 바로 쓸 수 있게 만듭니다.
5. 한 번에 끝내려 하지 마라
완벽한 프롬프트 하나로 완성품이 나오는 경우는 드뭅니다. 뼈대를 먼저 만들고, 화면 하나를 지목해 다듬고, 반응형과 접근성을 따로 요청하는 식으로 나누는 편이 훨씬 빠릅니다. 특히 "이 부분만 고치고 나머지는 건드리지 마"라고 범위를 못 박는 습관이 중요합니다. 그렇지 않으면 잘 나온 화면까지 AI가 다시 써 버립니다.
예시 하나가 설명 열 줄보다 낫다
원하는 결과를 말로만 설명하는 데는 한계가 있습니다. "깔끔하게"라는 말은 사람마다 다르게 해석되지만, 원하는 헤드라인 한 줄이나 참고할 화면 구조를 직접 보여 주면 AI는 그 패턴을 그대로 따릅니다. 카피 톤을 잡을 때는 "예시 헤드라인: 금융을 더 쉽게"처럼 실제 문장을 하나 주고, 레이아웃을 잡을 때는 섹션 순서를 번호로 적어 주세요. 추상적인 형용사를 늘리는 것보다 구체적인 예시 하나를 추가하는 편이 결과를 훨씬 빠르게 수렴시킵니다.
AI가 반복하는 실수를 미리 막는다
AI가 만든 코드에는 반복적으로 나타나는 문제들이 있습니다. 존재하지 않는 이미지 경로를 참조하거나, 설치되지 않은 라이브러리를 불러오거나, 한글에서 깨지는 줄바꿈을 그대로 두는 식입니다. 이런 것들은 매번 발견해서 고치기보다 프롬프트에 미리 금지 조항으로 넣는 편이 빠릅니다. "이미지는 색상 블록 플레이스홀더로", "새 패키지 설치 금지", "한글 줄바꿈은 word-break: keep-all" 세 줄만 넣어도 손볼 곳이 눈에 띄게 줄어듭니다.