Post

AI가 만든 디자인이 구린 이유, 바이브코딩 6가지 규칙 요약

· ai
#vibe-coding #ai-design #claude-code #coolors #stitch #shadcn-ui

AI가 만든 디자인이 구린 이유, 바이브코딩 6가지 규칙 요약

이번 영상은 “AI로 기능은 잘 만들었는데 화면이 어색해 보이는 이유”를 짚고, 바로 적용 가능한 디자인 규칙 6가지를 제시합니다. 핵심은 감각이 아니라 일관된 규칙과 도구 순서입니다.

영상 핵심 한 줄 요약

바이브코딩 디자인 품질은 재능보다 컬러 규칙 + 프롬프트 방식 + 도구 선택을 얼마나 일관되게 지키는지에서 갈립니다.

타임라인 요약

00:00-00:50 왜 AI 결과물이 티가 나는가

  • 기능은 잘 돌아가도 버튼 크기, 여백, 색 조합이 제각각이라 “AI가 만든 느낌”이 난다고 설명합니다.
  • 해결책은 디자인 감각이 아니라 지켜야 할 운영 규칙이라고 강조합니다.

00:50-02:18 규칙 1~2: 컬러는 직접 고르지 말고, 2색만 써라

  • Coolors(영상 발음상 “클러즈”)로 팔레트를 뽑고, 거기서 HEX 코드 그대로 사용합니다.
  • 팔레트에서 많은 색을 쓰지 말고 메인 1색 + 서브 1색만 고정하라고 권장합니다.
  • 나머지는 흰색/검정/회색 계열로 정리해 화면 일관성을 확보합니다.

02:18-02:53 규칙 3: 화면 초안은 Stitch로 뽑아라

  • AI UI 생성 도구 Stitch로 레이아웃을 빠르게 만든 뒤 시작하는 흐름을 제안합니다.
  • 단순 “파란색” 같은 지시 대신 HEX 코드를 직접 넣어야 결과가 덜 흔들린다고 말합니다.

02:53-03:42 규칙 4: MCP로 디자인하지 마라

  • Claude Code 같은 코딩 도구에서 MCP로 디자인 툴을 과하게 연결하면 토큰이 급격히 늘고, 맥락 손실로 일관성이 깨지기 쉽다고 설명합니다.
  • 수정이 반복될수록 버튼/간격/컬러가 페이지마다 흔들리는 패턴을 경고합니다.

03:42-04:21 규칙 5: MCP 대신 Skills를 써라

  • 디자인 가이드라인을 문서형 Skills로 넣어두면, 코드 생성 시 규칙을 반복 참조할 수 있어 일관성이 좋아진다고 안내합니다.
  • API 호출 기반보다 토큰 부담이 적고 유지가 쉬운 방식으로 소개합니다.

04:21-04:40 규칙 6: 레퍼런스 묘사는 영문 프롬프트로

  • 레퍼런스 사이트 스타일 설명은 한국어보다 영문 프롬프트가 더 안정적이었다는 실전 팁을 공유합니다.
  • 영상에서는 Claude로 영문 프롬프트를 먼저 정리해 넣는 방식을 권장합니다.

04:40-05:30 보너스: MUI vs shadcn/ui

  • 바이브코딩 기준으로는 MUI보다 shadcn/ui가 커스터마이징과 AI 수정 흐름에 더 잘 맞는다고 설명합니다.
  • 소스가 프로젝트 내부에 있어 AI가 직접 수정하기 쉬운 점을 장점으로 듭니다.

05:30-06:54 실전 순서와 흔한 실수

  • 권장 순서: 팔레트 선택 -> 2색 고정 -> shadcn/ui 세팅 -> Stitch로 초안 -> Skills로 규칙 고정.
  • 흔한 실수는 “기능 먼저, 디자인 나중” 접근이며, 처음부터 컬러/컴포넌트 기준을 고정해야 재작업 비용이 줄어든다고 정리합니다.

바로 적용할 체크리스트

  • Coolors에서 팔레트 1개 선택 후 HEX 코드 고정
  • 메인/서브 2색만 사용하고 나머지는 무채색으로 통일
  • 화면 초안은 Stitch로 먼저 생성
  • 스타일 레퍼런스는 영문 프롬프트로 작성
  • MCP 디자인 자동화 남용을 줄이고 Skills 문서로 규칙 고정
  • Next.js 바이브코딩이면 shadcn/ui 우선 검토

참고

댓글