𝗩𝟭.𝟬에서 𝗩𝟮.𝟬으로: 𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 파이프라인의 재구상
최근 제 오픈 소스 프로젝트인 vibe-coding-universal에서 작은 오타를 수정했습니다. 레이블을 v2.0(구버전)에서 v1.0(구버전)으로 변경했습니다.
이 작은 변화가 큰 문제를 드러냈습니다. 저조차 제 버전의 이름을 모르고 있었던 것입니다. 제가 혼란스럽다면, 사용자들도 길을 잃을 것입니다.
첫 번째 버전은 단순했습니다. AI가 요구 사항을 이해할 수 있도록 7개의 질문을 사용했습니다. Claude Code나 Cursor와 같은 도구를 위한 하나의 가이드 파일을 생성했습니다. 작동은 했지만, 몇 가지 결함이 있었습니다:
- AI가 색상, 글꼴, 간격을 추측해야 했습니다.
- 디자인과 작업이 하나의 파일에 모두 들어 있었습니다.
- AI가 실제 디자인 시스템 대신 자신의 기억력에 의존했습니다.
버전 2.0은 단순한 업데이트가 아닙니다. 새로운 작업 방식입니다.
V1.0 vs V2.0:
V1.0:
- 요구 사항 질문 7단계.
- 디자인 규칙 없음.
- 단일 가이드 파일.
- 외부 참조 없음.
V2.0:
- 요구 사항 7단계 + 디자인 선호도 7단계.
- 색상, 글꼴, 레이아웃 규칙이 포함된 완전한 DESIGN_SPEC.md.
- 완전한 Build Spec 패키지 (PRD, 디자인, 아키텍처, 작업).
- Stripe, Linear, Apple과 같은 71개의 브랜드 디자인 시스템에 대한 접근 권한.
- AI가 사용할 수 있는 정밀한 CSS 토큰.
대부분의 사람들은 AI 프롬프트를 잘못 작성합니다. "어떤 디자인 스타일을 좋아하세요?"라고 묻는데, 이는 너무 광범위합니다.
V2.0은 대신 객관식을 사용합니다. 각 단계에서는 4~6개의 선택지가 있는 질문 하나를 던집니다.
- 1단계: 프로젝트 유형 (SaaS, 대시보드, AI 도구 등).
- 2단계: 시각적 참조 (Stripe, Apple, Vercel 등).
- 3단계: 색상 분위기 (차가운 느낌, 따뜻한 느낌, 중립적).
7단계를 거친 후, 시스템은 71개의 브랜드 시스템에서 디자인 토큰을 가져옵니다. 그리고 CSS 변수 목록을 출력합니다. 이를 통해 AI에게 정확한 지침을 제공합니다.
버전 오류가 발생한 이유는 V1.0과 V2.0 사이의 격차가 너무 컸기 때문입니다. 저는 두 버전 모두를 "현재" 버전으로 보고 있었습니다.
프로젝트가 대대적인 변화를 겪는다면, 명확한 버전 레이블을 사용하세요. 사용자들은 당신의 구조를 파악하기 위해 5분이나 쓰지 않습니다. 그들에게 주어진 시간은 단 10초뿐입니다.
다음 업데이트를 하기 전에 스스로에게 물어보세요:
새로운 사용자가 이 비교 내용을 3초 안에 이해할 수 있는가?
만약 대답이 "아니오"라면, 코드를 수정하기 전에 텍스트부터 수정하세요.
Optional learning community: https://t.me/GyaanSetuAi