AI에게 “예쁘게 디자인해줘”라고 하면 평범한 결과만 나옵니다

문제는 AI가 아니라, 우리가 무엇을 원하는지 명확히 말하지 않는 것입니다.

TL;DR

• Design Brief가 없으면 AI가 임의로 결정합니다 — 색상, 간격, 폰트 모두 랜덤
• 프롬프트에 수치를 넣으면 품질이 다릅니다 — “크게”가 아니라 “48px, 700 weight”
• 3번 반복이 마법의 숫자입니다 — 구조 → 스타일 → 폴리싱
• 콘텐츠가 먼저, 디자인은 나중입니다 — 빈 상자를 꾸미면 의미 없음

왜 AI 디자인이 평범한가?

“디자이너가 없어서”가 아닙니다. 근원 원인은 디자인 인텐트의 부재입니다. 인간 디자이너도 브리핑 없이는 좋은 결과를 낼 수 없습니다. AI에게 “예쁘게 만들어”라고 말하는 것과 “이 서비스는 신뢰감을 주는 Navy 톤, 정보 위계를 명확히 하는 3단 타이포그래피, 카드보다 리스트 뷰가 적합한 이유는…”라고 말하는 것의 차이입니다.

4가지 근원 원인

Step 1: Design Brief 작성하기

Design Brief는 프로젝트의 색상, 타이포그래피, 간격, 레이아웃 원칙, 레퍼런스를 정의하는 문서입니다. AI 에이전트에게 “우리 프로젝트의 디자인 언어”를 전달하는 핵심 산출물입니다.

필수 항목 체크리스트

• 색상 시스템 — Primary, Accent, Success, Danger, Background, Surface 여섯 가지 역할 정의
• 타이포그래피 계층 — Display → H1 → H2 → Body → Caption, 각각 크기/웨이트/줄간격 수치화
• 간격 시스템 — 기본 단위(4px 또는 8px), 컴포넌트 내부, 섹션 간격 명시
• 레이아웃 원칙 — 모바일 퍼스트, 리스트 뷰 선호 등 3~5개 원칙
• 레퍼런스 2~3개 — 시각적 방향성의 구체적 URL
• 금지 사항 — “그라데이션 금지”, “정의 외 색상 사용 금지” 등 명시적 제약
• 컴포넌트 명세 — 버튼, 카드, 입력 필드의 구조와 수치
• Content Tone — 텍스트 톤앤매너, 에디토리얼 규칙

Brief 구조 예시

brand_personality: "신뢰감 있는 정보 큐레이터, 지적이되 접근 가능한"

visual_direction:
  primary: "Navy (#0f172a) — 권위와 신뢰"
  accent: "Amber (#f59e0b) — AI의 지능적 포인트"
  background: "White + Slate-50 — 깔끔한 정보 배경"

typography_hierarchy:
  h1: "36px/800 — 섹션 헤드라인"
  h2: "24px/700 — 카드 타이틀"
  body: "15px/400 — 본문 (줄간격 1.7)"
  caption: "13px/500 — 메타 정보"

layout_principles:
  spacing: "24px 그리드 기반, 여백은 정보보다 넓게"
  cards: "카드보다 리스트 뷰 선호 (정보 밀도 우선)"
  data_viz: "CSS-only 차트, 복잡한 라이브러리 금지"

reference_sites:
  - "Bloomberg.com (데이터 표현)"
  - "TechCrunch (카드 레이아웃)"
  - "한국경제 (한국어 타이포그래피)"

content_tone: "객관적, 분석적, 'AI가 분석했습니다' 투명성 강조"

Design Brief는 프로젝트 설정 파일이나 docs/design-brief.md로 관리하세요. 모든 에이전트가 참조할 수 있도록 경로를 설정에 포함합니다.

Step 2: 프롬프트에 수치 넣기

Open Design의 start_run에 전달하는 프롬프트가 디자인 품질을 결정합니다. 수치를 명시하면 결과가 극적으로 달라집니다.

Bad vs Good

❌ "project-a 피드 페이지를 디자인해줘. 예쁘고 모던하게."
   → 방향성 없음, 평가 기준 없음, 레퍼런스 없음

✅ "project-a 뉴스 피드 페이지. Bloomberg 스타일의 정보 밀도 높은 리스트 뷰.
   타이포그래피: 24px/700 타이틀, 15px/400 요약 (2줄 클램프).
   카드 구조: 소스 배지(왼쪽) + 타이틀 + AI 요약 배지(amber) + 관련도 바.
   반응형: 데스크톱 3열 그리드, 모바일 싱글 컬럼.
   레퍼런스: techcrunch.com/feed, reuters.com"
   → 구체적 구조, 수치, 레퍼런스, 반응형 명시

프롬프트 구조 템플릿

[CONTEXT]     — 프로젝트명, 한 줄 설명, 기술 스택, 디자인 시스템 요약
[LAYOUT]      — 섹션 구성, 그리드/플렉스 방향, 고정/스크롤 요소
[TYPOGRAPHY]  — 각 레벨별 크기/웨이트, 한국어+영문 폰트
[COMPONENTS]  — 컴포넌트명: 구조 설명 (예: "소스 배지 22px 정사각 + 타이틀 + 요약")
[CONSTRAINTS] — 반응형 브레이크포인트, 외부 의존성 허용/금지, Design Token 외 색상 금지

핵심: “크게”가 아니라 “48px, 700 weight”로, “여백”이 아니라 “섹션 간 24px”로 수치를 쓰세요.

Step 3: 3-Iterate 워크플로우

좋은 디자인은 한 번에 나오지 않습니다. 3단계 반복을 통해 점진적으로 품질을 높입니다.

Iterate 1 — Skeleton (구조와 레이아웃 검증)

와이어프레임 수준의 충실도로 정보 구조를 검증합니다. 섹션 순서, 그리드 배치, 타이포그래피 계층을 확인합니다.

"낮은 충실도의 레이아웃 스켈레톤.
 회색 박스로 이미지 자리 표시. 타이포그래피 계층만 확인. 스타일링 최소화."

리뷰: 정보 계층이 명확한가? 섹션 순서가 올바른가? 모바일/데스크탑 레이아웃이 작동하는가?

Iterate 2 — Styling (Design Token 적용, 실제 콘텐츠)

Design Brief의 색상·타이포·간격을 적용하고, 샘플 콘텐츠를 삽입합니다. 반응형 브레이크포인트와 호버/포커스 인터랙션도 추가합니다.

"Iterate 1 결과를 기반으로 디자인 시스템 적용.
 Design Brief의 색상/타이포/간격 사용. 실제 콘텐츠로 교체."

리뷰: Design Token 외 색상이 사용되었는가? 실제 콘텐츠가 들어갔는가? 레퍼런스와 방향성이 일치하는가?

Iterate 3 — Polishing (엣지 케이스, 접근성, 마이크로 인터랙션)

빈 상태, 에러, 로딩 상태를 추가하고, 색 대비 4.5:1 이상을 확보하며, 마이크로 인터랙션을 완성합니다.

"Iterate 2 결과를 폴리싱.
 빈 상태/에러/로딩 상태 추가. 접근성: ARIA, 4.5:1 대비. 마이크로 인터랙션 추가."

리뷰: 전체 페이지 일관성, 반응형, 접근성 최종 확인.

시간 비교

병렬 실행이 3배 빠르지만, Design Brief가 사전에 완벽하게 정의되어 있어야 합니다.

Step 4: 콘텐츠 먼저 준비하기

디자인은 콘텐츠를 담는 그릇입니다. 콘텐츠 없이 디자인하면 빈 껍데기가 됩니다. AI가 임의 생성한 샘플 텍스트는 실제 서비스와 구조가 달라서, 실제 콘텐츠가 들어갈 때 레이아웃이 깨질 수 있습니다.

Content First 접근법

전통적 순서:  와이어프레임 → 디자인 → 콘텐츠 삽입
올바른 순서:  콘텐츠 기획 → 콘텐츠 기반 디자인 → 콘텐츠 삽입

준비해야 할 3가지

1. 샘플 데이터 — 실제 서비스에 가까운 텍스트 5~10개. 다양한 길이(짧은 제목, 긴 제목, 2줄짜리) 포함
2. 에디토리얼 톤 — 텍스트 톤앤매너 정의. 예: “AI가 분석한 요약입니다 — 투명성 강조”, “신뢰도 78% — 수치 표현 방식 통일”
3. 엣지 케이스 상태 — 빈 상태 메시지, 에러 메시지, 로딩 UI 정의

[
  {
    "title": "차세대 AI 반도체 공개... 엔비디아 독주 깨질까",
    "source": "경제일보",
    "category": "경제",
    "publishedAt": "2시간 전"
  },
  {
    "title": "유럽의회, AI 규제법 최종 승인... 2027년까지 단계적 시행",
    "source": "정치뉴스",
    "category": "정치",
    "publishedAt": "3시간 전"
  }
]

Before & After

Design → 코드 통합 리뷰

AI가 생성한 정적 HTML/CSS를 SPA로 통합할 때, 디자인 충실도 리뷰가 필수입니다. 실전 프로젝트에서는 33개 체크포인트로 Preview(Open Design 결과물)와 구현(SPA)을 비교했습니다.

비교 카테고리

1. 핵심 기능 UI — 메인 리스트, 상세 페이지, 입력 폼, 갤러리
2. 네비게이션 — 하단 탭 바, 상단 헤더, 뒤로가기
3. 공통 컴포넌트 — 카드, 버튼, 모달, 토스트
4. 인터랙션 — 스크롤, 스와이프, 터치 피드백, 트랜지션
5. 반응형 — 모바일/태블릿/데스크탑
6. 엣지 케이스 — 빈 상태, 에러, 로딩, 긴 텍스트, 이미지 없음

상태 분류 기준

실전 결과: 33개 항목 중 22개 일치/개선, 6개 의도적 변경, 5개 누락 후 수정 완료, 0개 미해결이었습니다. 의도적 변경은 반드시 사유를 명확히 문서화합니다.

Design Brief 템플릿

Takeaway

1. Design Brief는 선택이 아니라 필수 — 없으면 AI가 모든 시각적 결정을 임의로 내립니다. 색상, 타이포그래피, 간격, 레이아웃 원칙을 수치화하여 문서화하세요.
2. 프롬프트에 수치를 넣으면 결과가 달라집니다 — “크게”가 아니라 “48px, 700 weight”로, “여백”이 아니라 “섹션 간 24px”로 구체적으로 지시하세요.
3. 3번 반복하세요 — 한 번에 완벽한 결과는 없습니다. Skeleton → Styling → Polishing의 3-Iterate 워크플로우로 점진적으로 품질을 높이세요.