AI에게 디자인을 맡기기 전
DESIGN.md부터 써야 하는 이유
AI 디자인 도구가 좋아질수록 결과물의 차이는 “어떤 모델을 썼나”보다 “얼마나 정확한 디자인 레시피를 줬나”에서 갈린다. AI에게 자유를 많이 주는 것이 아니라, 선택지를 줄이고 기준을 명확히 주는 것이 실무 품질의 핵심이다.
최근 AI 디자인 도구는 텍스트 몇 줄만으로 앱 화면, 랜딩페이지, 대시보드, 컴포넌트 시안을 빠르게 만든다. 문제는 속도가 아니다. “그럴듯한 화면”은 빨리 나오지만 브랜드 톤, 여백, 색상, 타이포그래피, 버튼 규칙, 모바일 대응, 접근성 기준이 매번 흔들린다. 그래서 실무에서는 프롬프트보다 먼저 디자인 기준 문서가 필요하다. 그 역할을 하는 파일이 DESIGN.md다.
먼저 결론
- AI 디자인의 품질은 프롬프트 문장보다 디자인 제약조건의 밀도에서 나온다. 색상, 폰트, 그리드, 컴포넌트, 금지 요소를 적어야 결과물이 반복 가능해진다.
- DESIGN.md는 개발자의 README처럼, AI와 사람이 같은 디자인 규칙을 공유하기 위한 기준 문서다.
- Refero 같은 레퍼런스 탐색 도구는 “좋아 보이는 화면”을 찾는 데 유용하지만, 그대로 베끼는 도구가 아니라 패턴과 구조를 추출하는 도구로 써야 한다.
- Google Stitch 같은 AI UI 제작 도구는 빠른 시안 생성에 강하다. 다만 레시피 없이 쓰면 브랜드 없는 예쁜 샘플 화면이 나오기 쉽다.
- 실무 적용 순서는 레퍼런스 수집 → 디자인 원칙 정의 → DESIGN.md 작성 → AI 시안 생성 → 점검 체크리스트 반복이다.
1. 왜 “AI에게 자유를 주지 말라”는 말이 중요한가
사람 디자이너에게 “깔끔하고 고급스럽게 만들어줘”라고만 말하면 결과 해석이 다양해진다. AI도 마찬가지다. 깔끔함, 고급스러움, 전문성, 스타트업 느낌, 금융 리서치 느낌은 모두 모호한 단어다. AI는 모호한 단어를 평균적인 웹디자인 패턴으로 채운다. 그래서 결과물은 그럴듯하지만 어디선가 본 듯하고, 브랜드 맥락은 약하며, 세부 UI는 흔들린다.
좋은 AI 디자인 지시는 자유도를 넓히는 문장이 아니라 자유도를 줄이는 문서다. 예를 들어 “차분한 금융 리서치 톤”이라고 쓰는 것보다 “warm ivory 배경, deep navy 제목, muted gold 포인트, 1120px 그리드, 카드 radius 18px, 버튼은 pill 형태, 네온·글로시·카툰 금지”라고 쓰는 편이 훨씬 낫다.
2. DESIGN.md는 무엇인가
DESIGN.md는 프로젝트의 디자인 운영 규칙을 마크다운으로 정리한 파일이다. 개발 프로젝트에 README.md가 있듯, AI 디자인 워크플로에는 DESIGN.md가 필요하다. 이 파일에는 브랜드 성격, 색상 토큰, 폰트, 그리드, 컴포넌트 규칙, 여백, 금지 패턴, 모바일 기준, 접근성 기준, 예시 화면의 해석 방식이 들어간다.
핵심은 한 번의 프롬프트를 잘 쓰는 것이 아니라, 여러 화면과 여러 작업자 사이에서 같은 판단 기준이 반복되게 만드는 것이다. DESIGN.md가 있으면 AI에게 “이번 화면도 이 규칙을 따르라”고 지시할 수 있고, 결과물 점검도 감각이 아니라 기준으로 할 수 있다.
3. Refero는 베끼는 도구가 아니라 패턴 추출 도구다
Refero는 UI/UX 디자인 레퍼런스를 찾는 데 유용한 서비스다. 하지만 레퍼런스 탐색에서 흔한 실수는 예쁜 화면을 그대로 따라 하려는 것이다. 실무에서는 특정 화면의 색이나 배치보다 “왜 그렇게 구성했는가”를 추출해야 한다.
| 볼 것 | 나쁜 사용 | 좋은 사용 |
|---|---|---|
| 레이아웃 | 비슷하게 베낀다 | 정보 우선순위, 카드 밀도, CTA 위치를 추출한다 |
| 색상 | 색을 그대로 가져온다 | 명도 대비, 강조색 사용 비율, 배경 톤을 분석한다 |
| 컴포넌트 | 버튼 모양만 따라 한다 | 상태값, hover, disabled, spacing 규칙을 정의한다 |
| 모바일 | 데스크톱만 본다 | 카드가 언제 1열로 바뀌는지, 표가 어떻게 접히는지 본다 |
레퍼런스는 복사 대상이 아니라 의사결정 재료다. Refero에서 5~10개 화면을 모았다면 AI에게 “이런 느낌”이라고 던지기보다, 공통 패턴을 문장으로 정리해 DESIGN.md에 넣어야 한다.
4. Google Stitch 같은 AI UI 도구는 언제 강한가
Google Stitch는 AI 기반으로 UI를 빠르게 생성하는 디자인 도구 흐름을 대표한다. 이런 도구의 장점은 초기 시안 속도다. 앱 화면, 웹 페이지, 대시보드, 랜딩페이지의 시안을 빠르게 만들고, 개발자가 구현할 구조를 상상하기 쉽게 만든다.
그러나 AI UI 도구는 “첫 화면 생성”에 강하고 “제품 맥락 유지”에는 별도 기준이 필요하다. 같은 서비스 안에서 버튼 높이, 카드 그림자, 제목 위계, 표 스타일, 여백이 매번 바뀌면 사용자는 어색함을 느낀다. 따라서 Stitch 같은 도구를 쓸 때도 DESIGN.md를 같이 넣어야 한다. 도구가 화면을 만들고, DESIGN.md가 일관성을 잡는다.
AI UI 도구를 바로 쓰기보다 먼저 “이 프로젝트에서 절대 바뀌면 안 되는 것”을 정해야 한다. 예: 브랜드 컬러, 본문 폭, 카드 스타일, CTA 위치, 모바일 1열 전환 기준, 표의 반응형 처리.
5. DESIGN.md에 반드시 넣을 항목
좋은 DESIGN.md는 길다고 좋은 문서가 아니다. AI가 오해하지 않도록 짧고 구체적이어야 한다. 특히 금지 규칙은 중요하다. AI는 “멋지게”라는 말에 반응해 과한 그라디언트, 네온, 유리 효과, 의미 없는 아이콘, 화려한 그림자를 붙이기 쉽다.
브랜드와 독자
누구에게 보이는 화면인지, 사용자가 어떤 판단을 빨리 해야 하는지 정의한다. 금융·업무 도구라면 신뢰와 가독성이 장식보다 우선이다.
토큰과 컴포넌트
색상, 폰트, 버튼, 카드, 표, 입력창, 알림, 배지, 탭의 기본 규칙을 정한다. 가능한 한 수치로 쓴다.
금지 요소와 점검
피해야 할 스타일과 실패 기준을 적는다. 모바일에서 글자가 깨지거나 표가 눌리면 재작업 대상으로 본다.
6. 바로 복사해 쓸 수 있는 DESIGN.md 템플릿
아래 템플릿은 AI에게 디자인 레시피를 제공할 때 바로 쓸 수 있는 최소형 구조다. 프로젝트에 맞춰 색상과 컴포넌트 규칙만 바꿔도 결과물의 일관성이 크게 좋아진다.
DESIGN.md 최소 템플릿
7. AI에게 전달하는 작업 순서
DESIGN.md를 만들었다면 다음은 AI에게 순서를 지키게 하는 것이다. 한 번에 “페이지 만들어줘”라고 하면 AI는 내용, 구조, 디자인, 코드, 모바일 대응을 동시에 추측한다. 실무에서는 단계를 나눠야 한다.
| 단계 | AI에게 시킬 일 | 사람이 확인할 일 |
|---|---|---|
| 1. 구조 | 페이지 섹션과 정보 우선순위 작성 | 사용자 행동 흐름이 맞는지 확인 |
| 2. 디자인 | DESIGN.md 기준으로 레이아웃 시안 생성 | 브랜드 톤과 컴포넌트 일관성 확인 |
| 3. 코드 | HTML/CSS 또는 컴포넌트 코드 생성 | 반응형, 접근성, 상태값 확인 |
| 4. 점검 | 체크리스트 기반 문제점 나열 | 실제 모바일 화면과 사용성 확인 |
| 5. 반복 | 수정 지시를 작은 단위로 반영 | 새 수정이 기존 규칙을 깨지 않는지 확인 |
AI 디자인 워크플로의 핵심은 “생성”이 아니라 “기준을 고정한 반복”이다. 기준 없이 반복하면 매번 다른 예쁜 화면이 나오고, 기준을 고정하면 점점 제품다운 화면이 된다.
8. 실무에서 가장 자주 망가지는 지점
첫째, 레퍼런스를 너무 많이 넣는 것이다. 참고 화면이 20개를 넘으면 AI는 공통 기준을 잡기보다 평균값을 낸다. 둘째, 추상어가 많고 수치가 부족한 것이다. “넓은 여백”보다 “섹션 상하 44px, 카드 gap 12px”이 더 낫다. 셋째, 모바일 기준이 없는 것이다. 데스크톱에서는 좋아 보여도 모바일에서 표가 찌그러지면 실무 품질은 낮다.
AI 디자인 결과물을 바로 배포하면 안 된다. 특히 한국어 텍스트, 버튼 문구, 표, 모바일 줄바꿈, 접근성 대비, 링크 색상, hover/disabled 상태는 사람이 직접 확인해야 한다.
9. 결론: AI 디자인의 병목은 도구가 아니라 기준이다
AI 디자인 도구는 앞으로 더 빨라질 것이다. 그러나 속도가 빨라질수록 기준 없는 결과물도 더 많이 쌓인다. 제품과 브랜드를 만드는 조직이라면 “어떤 AI 도구를 쓸까”와 함께 “AI에게 어떤 디자인 기준을 줄까”를 먼저 정해야 한다.
DESIGN.md는 AI에게 감각을 설명하는 문서가 아니라, 감각을 반복 가능한 규칙으로 바꾸는 문서다. Refero는 좋은 레퍼런스를 찾고, Google Stitch 같은 도구는 빠르게 시안을 만들며, DESIGN.md는 그 결과물을 제품다운 일관성으로 묶는다. 결국 좋은 AI 디자인 워크플로는 자유로운 생성이 아니라 명확한 레시피, 작은 반복, 냉정한 점검에서 나온다.
출처와 참고 링크
본 글은 공개 영상 제목과 관련 도구·디자인 시스템 자료를 바탕으로 AI 디자인 워크플로를 실무형으로 정리한 일반 정보입니다. 특정 도구 사용을 강제하거나 품질을 보장하지 않으며, 실제 배포 전에는 브랜드 규정, 접근성, 모바일 화면, 저작권·레퍼런스 사용 범위를 별도로 확인해야 합니다.