DESIGN.md와 Google Stitch를 조합하면 AI가 생성하는 화면의 편차를 크게 줄일 수 있습니다. “더 좋은 생성 툴로 바꾸면 결과도 좋아질 거야”——그렇게 생각해서 여러 번 툴을 갈아탄 경험이 있지 않나요? 결과의 흔들림을 줄이는 건 툴 성능보다, 에이전트가 반복해서 읽을 수 있는 설계 계약과 검수 루프입니다. 이 글에서는 AI가 만든 화면이 왜 비슷해지는지 정리하고, DESIGN.md라는 설계 계약 파일과 Google Stitch를 조합한 실무 플로를 소개합니다.
왜 AI가 만드는 UI는 비슷한 화면으로 수렴하는가
AI에게 “모던하고 세련된 랜딩페이지”를 지시하면, 거의 같은 결과가 나옵니다. 둥근 카드, 파란색 계열 액센트, 균등한 스페이싱, 익숙한 폰트 계층——어떤 툴을 써도 마찬가지입니다.
생성 모델은 훈련 데이터에서 자주 등장한 조합을 우선합니다. 안전한 색상, 무난한 간격, 익숙한 컴포넌트 구조로 수렴하기 쉽습니다.
여기서 놓치기 쉬운 포인트가 있습니다. 생성 속도가 빨라지는 건 품질을 올리는 게 아니라, 검수 없이 평균값을 채택하는 횟수를 늘립니다. 즉, 툴의 출력 속도가 올라갈수록 검수 기준이 없으면 품질은 오히려 떨어지기 쉽습니다. 생성 속도와 디자인 품질은 비례하지 않습니다.
왜 생성 UI는 평균값으로 수렴하는가
입력이 애매하다
“모던한 LP” 같은 지시는
수많은 해석으로 갈린다
모델이 빈도 높은 조합을 우선
안전한 색·균등한 간격·
익숙한 카드 구조로 수렴
검수 없이 채택
생성이 빠를수록
평균값을 그대로 쓰기 쉽다
왜 설계 계약은 생성 툴보다 오래 남는가——4가지 메커니즘
툴을 바꿔도 결과가 안정되지 않는 이유를 이해하려면, 설계 계약(spec)과 생성 툴(generation)의 성질 차이를 봐야 합니다.
1. 생성은 출발점만 준다
Google Stitch든 v0든 Lovable이든, 방향 탐색에는 뛰어납니다. 하지만 브랜드 제약이나 제품 맥락을 다음 세션까지 기억해 주지는 않습니다. 세션을 닫는 순간, 맥락은 리셋됩니다.
2. spec은 결과의 흔들림 폭을 물리적으로 좁힌다
DESIGN.md에 색·타이포·스페이싱·금지 패턴을 적어 두면, 에이전트의 출력이 같은 방향으로 수렴합니다. “좋은 결과를 내는” 게 아니라 “나쁜 방향으로 흔들리는 폭을 줄이는” 작용입니다. 품질의 바닥이 올라간다고 생각하면 이해하기 쉽습니다.
3. review가 없으면 평균 회귀는 멈추지 않는다
검수 기준 없이 생성만 반복하면, 어떤 툴이든 결과는 통계적 평균으로 돌아갑니다. “이번에는 왠지 괜찮아 보여”로 넘기면, 횟수를 거듭할수록 브랜드 개성은 희석됩니다. review loop는 평균 회귀를 멈추는 유일한 장치입니다.
4. 기록이 다음 작업의 비용을 줄인다
“이 색 조합은 브랜드에 안 맞았다”, “이 스페이싱에서 가독성이 떨어졌다”——이런 실패와 성공을 기록해 두면, 다음 프로젝트에서는 spec을 처음부터 다시 만들지 않아도 됩니다. 루프가 돌수록 작업이 가벼워집니다.
정리하면, 결과 품질은 툴의 순간 출력이 아니라 spec → generate → review → remember 루프가 닫혀 있느냐로 결정됩니다. 경험 있는 디자이너나 프론트엔드 개발자에게 이건 직관에 반할 수 있습니다. 좋은 툴을 고르는 데 시간을 쓰기 쉽지만, 실제로 재현성을 결정하는 건 툴 바깥의 구조입니다.
DESIGN.md란 무엇인가——설계 계약 문서
DESIGN.md는 프론트엔드 스타일을 장황하게 설명하는 메모가 아닙니다. 에이전트가 반복해서 읽을 수 있는 설계 계약 문서입니다.
| 항목 | 역할 | 왜 필요한가 |
|---|---|---|
| 브랜드 톤 | 차가운/따뜻한 등 정서 방향 | 애매한 지시의 해석 폭을 좁힌다 |
| 타이포 규칙 | 폰트 조합, 크기 대비 | 시각적 계층의 일관성 유지 |
| 색상 규칙 | 액센트 색, 중성색, 금지색 | 브랜드 색을 유지한다 |
| 금지 패턴 | “이건 하지 마” 목록 | 평균 회귀를 막는 가장 효과적인 항목 |
| 검수 기준 | 합격/불합격 판정 조건 | review를 “감”에서 탈출시킨다 |
GitHub의 awesome-design-md 리포지토리는 공개 10일 만에 35,000 스타를 넘었습니다. 이 속도 자체가 “AI가 읽는 디자인 시스템”에 대한 수요의 크기를 보여줍니다.
Google Stitch는 이 스택의 어디에 위치하는가
Google Stitch는 Google Labs가 공개한 무료 UI 생성 도구입니다. 2026년 3월 업데이트로 보이스 캔버스와 멀티스크린 생성이 추가됐습니다.
이 기능들은 편리하지만, Stitch의 역할은 4층 스택 중 ‘Generation Layer’입니다. 방향 탐색을 위한 도구이지, 브랜드 일관성을 보장하는 것은 아닙니다. Stitch와 DESIGN.md는 대립하는 게 아니라, 서로 다른 층의 일을 하고 있습니다.
매주 월요일, AI 트렌드 뉴스레터 발행 중
회원 등록하면 매주 월요일 ‘AI·바이브코딩 최신 정보’를 보내드립니다.
배너 광고 없는 깨끗한 AI 전문 미디어입니다.
실무 플로——spec → generate → review → remember
4층 운영 스택——층마다 ‘무엇이 남는가’가 다르다
DESIGN.md를 쓰고 나서 결과가 달라진 장면
Before: 같은 생성 툴을 쓰고 있었지만, DESIGN.md도 검수 기준도 없는 상태였다. 화면마다 폰트 크기, 색 사용법, 카드 간격이 제각각이고, 리뷰할 때마다 “뭔가 다르다”, “이전 화면이랑 분위기가 안 맞는다”는 지적이 반복됐다. 생성이 빠른 만큼, 되돌리는 비용이 오히려 불어나고 있었다.
개입: DESIGN.md를 만들어 색(쓰는 색 3개·금지 색 2개), 타이포(폰트 2종·크기 비율), 스페이싱(섹션 간 48px·요소 간 16px), 금지 패턴(균등 카드 배치·의미 없는 그래디언트)을 고정했다. 생성 후에는 5축 리뷰로 검수하고, 효과 있던 규칙을 DESIGN.md에 추기하는 루프를 돌렸다.
After: 생성 결과의 방향이 안정됐고, “뭔가 다르다”는 지적이 크게 줄었다. 툴을 다른 것으로 바꿨을 때도 DESIGN.md가 남아 있어서 첫 생성부터 거의 맞았다. 리뷰 횟수가 절반 이하로 줄었다.
다만, 이 관찰은 블로그·위키 운영 워크플로에서의 사례입니다. 대규모 프로덕트 팀에서의 검증은 앞으로의 과제입니다.
이 방법이 맞는 팀·아직 이른 팀
맞는 팀
- 디자이너 없이 소수 인원으로 프론트엔드를 돌리는 팀
- 스타일 방향은 정했는데 생성 결과에 편차가 나는 팀
- design-to-code 워크플로를 이제 막 정비하려는 팀
아직 이른 팀
- 브랜드 시스템 자체가 아직 정해지지 않은 팀
- 고유한 비주얼 언어를 탐색 중이라 계약 문서로 만들기엔 시기상조인 팀
반론과 한계
“생성 툴 자체가 진화하면 설계 계약 없이도 충분한 품질이 나오지 않을까?”라는 반론은 타당합니다.
하지만 팀 단위 재현성과 브랜드 일관성은 spec과 review loop 없이 오래 유지하기 어려운 게 현실입니다. 개인이 1회성 화면을 만드는 거라면 툴만으로도 충분할 수 있습니다. 다만 팀이 지속적으로 UI를 만드는 환경에서는, 툴이 바뀌어도 남는 설계 계약이 결과의 안정성을 지탱합니다.
자주 묻는 질문
Q: DESIGN.md는 뭐부터 쓰면 되나요?
A: awesome-design-md 리포지토리에서 자기 프로젝트와 비슷한 템플릿을 복사해서, 색·폰트·금지 패턴을 자기 용도에 맞게 고치면 됩니다.
Q: Google Stitch는 무료인가요?
A: 네, 현재 완전 무료입니다. Google Labs 실험 도구로 stitch.withgoogle.com에서 바로 쓸 수 있습니다.
Q: DESIGN.md 없이 AI 디자인을 할 수 있나요?
A: 할 수 있습니다. 다만 설계 계약 없이 생성 툴만 쓰면 세션마다 결과 방향이 흔들리기 쉽습니다.
Q: Figma와 뭐가 다른가요?
A: Figma는 디자이너가 GUI로 화면을 만드는 도구, Stitch는 AI가 자연어에서 디자인을 생성하는 도구입니다. 대립하는 게 아니라 병행할 수 있습니다.
Q: 프론트엔드 외에도 적용 가능한가요?
A: 설계 의도를 텍스트로 고정하고 생성→검수→기록 루프를 돌리는 프레임워크는 콘텐츠 설계 등 다른 분야에도 응용할 수 있습니다.
회원 등록(무료)으로 매주 월요일 뉴스레터 받기 → 등록하기
저자: VibeCoding Tailor (shuntailor.net 운영. 바이브코딩과 AI 도구 활용 정보를 일본어·한국어로 발신 중. Lovable 공식 앰버서더.)
소스 목록
- Google — Stitch 공식 사이트
- Google Blog — Design UI using AI with Stitch from Google Labs
- Google Developers Blog — From idea to app: Introducing Stitch
- GitHub — VoltAgent/awesome-design-md (MIT License, 35,000+ stars)