바이브 코딩(Vibe Coding) 웹사이트 디자인 가이드: AI 느낌 없애기
이 문서는 AI(바이브 코딩)를 활용하여 웹사이트를 제작할 때, 전형적인 'AI가 만든 느낌'을 배제하고 전문적인 디자인 퀄리티를 확보하기 위한 규칙과 작업 순서를 정리한 가이드라인입니다.
1. 핵심 디자인 원칙 (Design Principles)
AI에게 디자인의 모든 것을 맡기지 않고, 인간의 기획력을 더해 퀄리티를 높이는 것이 핵심입니다.
🎨 컬러 전략 (Color Strategy)
AI는 색 조합에 약점이 있습니다. 컬러는 반드시 사용자가 직접 지정해야 합니다.
- 직접 지정: AI에게 "예쁜 색 골라줘"라고 하지 말고, 구체적인 컬러 코드를 지정합니다.
- Coolors 활용: Coolors 등의 사이트에서 전문적인 팔레트를 선정합니다.
- 색상 제한 (2 Color Rule): 5개 색상을 추천받더라도 실제로는 2개만 사용합니다.
- Main Color (Primary): 브랜드 핵심 컬러 1개
- Sub Color (Secondary): 보조 컬러 1개
- Base Colors: 나머지는 무조건 흰색, 검정, 회색(Grayscale)으로 처리합니다.
🛠️ UI 라이브러리 및 도구
- Shadcn/ui 사용: Material UI(MUI)는 전형적인 '구글 느낌'이나 '기본 템플릿' 느낌이 강하므로 지양합니다. 바이브 코딩과 호환성이 좋고 커스터마이징이 용이한 shadcn/ui를 사용합니다.
- Stitch 활용: 레이아웃 및 디자인 생성 시 Stitch를 활용하며, 이때 레퍼런스 묘사는 반드시 영문으로 합니다.
🧠 컨텍스트 관리 (Token & Context)
- MCP 사용 금지 (디자인 단계): 디자인 작업 시 MCP(Model Context Protocol)를 과도하게 사용하면 토큰 제한(Token Limit)에 걸려 디자인 일관성이 무너지고, AI가 앞서 설정한 컨텍스트를 망각합니다.
- Skills 활용: MCP 대신 Skills 기능을 사용하여 '웹 디자인 가이드라인'을 텍스트 기반 규칙으로 등록해 둡니다. 이는 토큰 소모를 줄이고 일관성을 유지하는 데 유리합니다.
2. 작업 프로세스 (Workflow)
반드시 아래 순서를 준수하여 프로젝트를 시작합니다. 기능 구현보다 디자인 세팅이 우선입니다.
Step 1: 컬러 팔레트 선정
- Coolors 접속
- 마음에 드는 팔레트에서 메인 컬러 1개 + 서브 컬러 1개를 선택
- 해당 색상의 Hex Code를 복사해 둡니다
Step 2: 프로젝트 초기 세팅 (Next.js + shadcn/ui)
- Next.js 프로젝트 생성 및
shadcn/ui설치 tailwind.config.js파일에 선정해 둔 컬러 2개를 등록합니다- Primary: 메인 컬러 Hex Code
- Secondary: 서브 컬러 Hex Code
Step 3: 레이아웃 생성 (Stitch)
- Stitch를 실행합니다
- 복사해 둔 Hex Code를 명시적으로 입력합니다
- Claude를 이용해 한국어 요구사항을 영문 프롬프트로 변환합니다
- 구체적인 영문 묘사를 통해 레이아웃을 생성합니다
Prompt Example: "Minimal SaaS dashboard, white background, card-based layout, primary color #3B82F6..."
Step 4: 상세 구현 (Claude Code + Skills)
- Design Guideline Skill을 등록합니다
- MCP 대신 텍스트 기반의 규칙(Skills)을 로드하여 디자인을 적용합니다
3. 잊지 말아야 할 체크리스트 (Critical Checkpoints)
- [ ] 순서 준수: 기능 구현을 먼저 하지 마십시오. 처음부터 컬러 + shadcn 세팅이 완료된 상태에서 시작해야 합니다.
- [ ] 프롬프트 언어: Stitch 및 디자인 묘사 시 프롬프트는 반드시 영문을 사용합니다.
- [ ] 일관성 유지: 디자인 일관성을 위해 MCP 의존도를 낮추고 사전에 정의된 Skills(가이드라인)를 사용하십시오.
출처
본 가이드라인은 다음 영상을 참고하여 작성되었습니다: