참여 배경
최근 들어 ‘바이브 코딩’ 관련 콘텐츠가 눈에 띄게 늘어나면서, SNS와 세미나를 통해 접할 기회가 많아졌습니다. 저 역시 자연스럽게 관심을 가지게 되었습니다. 최근에는 밋업에서 Gemini Canvas를 활용해 냉장고 재료와 날씨, 취향을 입력하면 레시피를 추천해주는 웹 애플리케이션을 만들어본 경험도 있습니다. 당시 네트워킹을 통해 현업 개발자들이 AI 코딩 에이전트를 적극적으로 활용하는 모습을 보면서, “나도 AI 코딩 에이전트를 더 효율적으로 활용하는 방법을 배워야겠다”라는 생각을 하게 됐습니다. 그러던 중 일할맛 in 판교 8월 바이브 코딩 세미나를 발견했습니다. 세미나에서 AI로 디자인 잘하는 법과 프롬프트 작성 테크닉을 다룬다고 해 망설임 없이 신청했습니다. 무엇보다도, “내가 의도한 프롬프트를 AI가 잘 이해하고 구현해줄 수 있으려면 어떻게 해야 할까?”라는 궁금증을 안고 현장에 참석했습니다.
얻은 인사이트
두 세션을 들으며 공통적으로 느낀 점은, 결국 핵심은 프롬프트를 단순히 “명령”으로 던지는 게 아니라 맥락(Context)을 충분히 담아내는 것이라는 점이었습니다. AI를 주니어 개발자라고 생각하고, 요구사항을 어떻게 설명해야 원하는 결과를 얻을 수 있을지 고민해야 한다는 비유가 특히 기억에 남습니다.
세션 1: 바이브 코딩 시대에 AI로 디자인 “진짜” 잘하는 법
첫 번째 세션의 핵심은 막연한 지시를 피하고, 디자이너가 일하는 과정 자체를 프롬프트에 넣는 것이었습니다.
“너는 10년 차 시니어 디자이너야. 강의 사이트 만들어줘.”처럼 추상적으로 말하면 범용적·평균적인 결과가 나옵니다. 반대로 디자인 프로세스(레퍼런스 → 테마 분석 → 공통 컴포넌트 → 페이지 구현)를 단계별로 명시하면, AI가 맥락을 이해하고 의도에 맞게 움직입니다.
1) 레퍼런스 모으기
원하는 톤&무드를 가진 실사례를 먼저 확보합니다.
- 예시 프롬프트 아래 프롬프트는 세미나를 듣고 제가 생각해 낸 예시일 뿐, 절대적인 정답은 아닙니다.
깔끔하고 모던한 UI를 가진 웹서비스 중 MAU 100만+ 사례 10개를 리스트업하고, 각 URL과 한 줄 요약을 표로 정리해줘.
2) 테마 분석하기
레퍼런스에서 Layout / Color Palette / Graphics / Typography를 기준으로 AI가 디자인 시스템을 분석하도록 합니다. 이때 세미나에서 소개된 TCREI 기법을 활용하면 유용합니다.
TCREI?
Title, Context, Requirement, Example, Instruction의 약자로, 프롬프트를 체계적으로 작성할 수 있는 틀을 제공합니다.
AI에게 분석을 요청할 때도 단순히 "이 사이트 디자인을 분석해줘"라고 하기보다는, TCREI 구조에 맞춰 요구사항을 구체적으로 제시하면 원하는 방향에 더 가깝게 결과를 얻을 수 있습니다.
3) 공통 컴포넌트 제작
디자인 시스템 규칙을 문서화하고, 그 규칙을 지키며 컴포넌트를 생성하게 합니다. (shadcn MCP, Cursor 룰 등 활용 / 경로, 네이밍, 금지사항 명시)
- 예시 규칙(요약)
/components/ui/* 경로에 배치 이모지 사용 금지 필수 컴포넌트: Button, Card, Navbar, Footer 접근성: aria-* 속성 필수 - 예시 프롬프트
위 규칙(CLUADE.md)을 준수해 shadcn 기반 Button, Card를 TS/React로 생성해줘.
4) 페이지 구현
앞서 제작한 공통 컴포넌트와 분석 내용을 바탕으로 AI가 실제 페이지를 구현하도록 지시합니다.
- 예시 프롬프트
/components 폴더에 구현된 공통 컴포넌트를 사용해줘. 새로운 컴포넌트는 만들지 말아줘. 페이지 구현 순서: 히어로 → 강의 목록 → 상세 페이지 - 애니메이션 참고 라이브러리
- unicorn studio
- Framer Motion
- 21st Dev
- GASP
- 테마 참고
- Tweak CN
세션 2: 개발자를 위한 프롬프트 작성 테크닉
두 번째 세션에서도 프롬프트 작성이 가장 중요하다고 강조하셨습니다. 프롬프트를 체계적으로 작성하고, 실행 후 검증하는 프롬프트 특화 프로세스를 소개해 주셨습니다.
프롬프트 특화 프로세스
- 프롬프트 초안 작성
- Requirement (비개발자 시각): 요구사항과 기능 설명
- Implementation Detail (개발자 시각): 구현 방법, 사용할 라이브러리, 데이터베이스 구조 등
- Constraint (MUST NOT): 금지사항이나 제약 조건
- Acceptance Tests: 빌드 및 테스트 기준, 성공 조건
- 자체 점검(프리모템)
- 작성한 프롬프트가 의도대로 작동하지 않을 가능성을 미리 점검하고 수정
- 피어 리뷰
- AI가 생성한 코드를 검토하며 오류나 개선점을 확인
- 실행 + 사후 점검(포스트모템)
- 프롬프트 실행 후 발생한 문제를 기록하고, 추가 요청 프롬프트를 정리
- 초기 프롬프트 회고 및 개선 방안 도출
컨텍스트 오염 방지 방법
프롬프트에 무관하거나 잘못된 정보가 포함되면 결과 품질이 급격히 떨어집니다. 따라서 프롬프트는 단순 지시가 아니라 요구사항·제약·검증까지 포함한 설계 문서처럼 작성해야 AI가 의도대로 동작합니다.
컨텍스트 오염을 방지하는 방법:
- 폴더 구조 규칙 명확히 만들기
- 구체적 지시문 작성
- ex) “비밀번호 찾기 추가” → “비밀번호 찾기 API 추가, AuthController에 method 구현”
- 불필요한 레거시 파일 제거
다녀오고 나서
이번 세미나를 다녀오고 나서, 바이브 코딩에서 가장 중요한 것은 프롬프트라는 생각을 하게 되었습니다. AI가 내가 원하는 방향으로 프로젝트를 제대로 구현하려면, 사람이 설계를 꼼꼼히 하고 각 단계마다 명확하게 지시하는 것이 중요하다는 것을 배웠습니다.
AI로 디자인을 잘 하고 싶다면 실제 디자이너와 개발자가 일하는 순서대로 레퍼런스 모으기 → 테마 분석 → 공통 컴포넌트 제작 → 페이지 구현을 진행하며, 각 단계마다 적절한 프롬프트를 입력하는 방식이 효과적이라는 것도 알게 되었습니다.
세미나에서 얻은 인사이트를 바탕으로, 개선할 부분이 많은 제 개인 프로젝트를 AI를 활용해 개선해보려고 합니다. 개선 과정과 결과는 다음 글에서 자세히 공유하겠습니다.
참고자료
