📺 메이커 에반 · 2026-05-06

AI로 만든 제품이 안 팔리는 이유

디자인 시스템이 AI 시대의 마지막 해자(Moat)인 이유

🕐 10분 영상 · AI · 디자인시스템 · Vibe Coding
▶ 영상 바로가기
왜 AI 제품은 "AI 슬롭"이 될까?
AI 슬롭(AI Slop)이란? AI가 만든 결과물에서 나는 특유의 "어디서 본 듯한, 대충 그럴싸한" 느낌.
원인: AI는 학습 데이터의 평균을 출력하기 때문 — 누구나 평균 수준의 결과물을 쉽게 만드는 시대.

❌ 디자인 시스템 없이

  • 버튼마다 다른 색, 폰트마다 다른 굵기
  • 어수선하고 싸구려처럼 보이는 UI
  • AI에게 맡길수록 통일감이 없어짐
  • "AI 슬롭" 느낌 — 사용자가 0.5초만에 감지

✅ 디자인 시스템과 함께

  • 색상·폰트·간격이 일관되게 유지
  • AI가 100개를 만들어도 같은 느낌
  • Design.md로 가이드라인 자동 전달
  • 소수 팀이 대기업 품질 결과물 가능
비디자이너를 위한 필수 도구 3종 ▶ 5:00
🎨

원티드 몽타주

한국어 최적화 디자인 시스템. 상업적 무료, 피그마·Design.md 익스포트 가능

🖼️

쿨리콘즈(Coolicons)

한 사람이 만든 통일된 아이콘 셋. 라인·듀오톤·컬러 3스타일, 굵기 3단계

✍️

프리텐다드(Pretendard)

자간 -0.02em, 행간 1.5~1.6 설정 필수. 네이버·토스가 쓰는 수치

Design.md — AI에게 건네는 디자인 매뉴얼 ▶ 2:30

Google Labs가 제안한 포맷. 마크다운 파일 하나에 모든 디자인 규칙을 담아 AI에게 함께 전달.

# design.md 구조
--- # YAML: 기계 읽기용 값
primary-color: #2d9162
font: Pretendard
base-spacing: 8px
font-size-body: 16px
letter-spacing: -0.02em
line-height: 1.5
---

## 선택 이유 (AI가 판단에 활용)
primary는 신뢰감을 위한 녹색 계열...
역설적 진리: AI가 디자인을 더 많이 만들수록, 디자인 시스템은 더 중요해진다.
가이드라인 없는 AI = 매뉴얼 없는 신입 직원 → 매번 다른 결과
디자인 시스템 구축 5단계 ▶ 12:00
  1. 기본값 설정: 색 5~6개, 폰트 크기 6단계, 간격 8단계 — 단순하게 SML 메뉴판처럼
  2. Design.md 작성: YAML로 값 정의 + 아래에 선택 이유 한 줄씩 서술
  3. 컴포넌트 가져오기: 원티드 몽타주 버튼·폼·카드 → 색만 본인 브랜드로 교체
  4. 아이콘 수집: 쿨리콘즈에서 자주 쓸 아이콘 30개만 → 전용 폴더 관리
  5. AI 작업마다 Design.md 전달: "이 파일 먼저 읽고 시작해" + 결과 검증
디자인 DNA 빠르게 추출하는 법
마음에 드는 사이트 찾기
(토스, Linear, Vercel…)
→
AI에게 클론 제작 요청
(30분이면 완성)
→
Design.md로 추출 요청
"디자인 규칙 정리해줘"
→
본인 브랜드로 색·폰트 교체
핵심 메시지
"코드는 흔해졌지만 시스템은 흔해지지 않았다. 디자인 시스템이 AI 시대의 마지막 해자(Moat)다."

디자이너의 새 역할: 픽셀 그리는 사람 → 시스템을 설계하고 결과물 품질을 판단하는 지휘자