왜 내가 만든 디자인은 AI스러울까?
송찬우 12분 분량
Claude Code나 Codex로 랜딩페이지 하나쯤 만들어보신 분들은 아실 겁니다. 처음엔 “이게 된다고?” 싶은데, 몇 번 만들다 보면 이상하게 다 어디서 본 것 같거나, 어느 순간 “Codex틱한데?” 라는 느낌이 들죠.
보라색 그라데이션, 가운데 큼직한 제목, 둥근 카드 세 장, 이모지 아이콘, 그리고 “시작하기” 버튼.
기분 탓이 아닙니다. 작년 8월, 웹사이트에 스타일을 입힐 때 많이 쓰는 도구 Tailwind를 만든 Adam Wathan이 이런 글을 올렸습니다.
“5년 전 Tailwind UI의 모든 버튼을 bg-indigo-500(남보라색)으로 만든 걸 공식적으로 사과드립니다. 그 바람에 지구상의 모든 AI 생성 UI가 남보라색이 됐네요.”
“GPT-5도 ‘보라색 문제’는 못 풀었다”는 글을 인용한 건데, 조회수가 150만을 넘겼습니다. 다들 같은 걸 느끼고 있었던 거죠.
왜 다 비슷해질까
Anthropic이 작년 11월 블로그에 이유를 꽤 솔직하게 적어뒀는데요.
AI는 학습한 데이터에서 가장 흔한 쪽을 골라 답을 만듭니다. 그런데 웹에 제일 많은 디자인은 ‘어디에 둬도 무난하고, 아무도 불편하지 않은’ 디자인이죠. 그래서 방향을 안 주면 AI는 그 한가운데를 고릅니다. Anthropic이 꼽은 결과물이 Inter 글꼴, 흰 바탕 위 보라색 그라데이션, 밋밋한 애니메이션이었습니다.
100명에게 “집을 그려보세요” 하면 대부분 세모 지붕에 네모 창문, 굴뚝 하나를 그립니다. 틀린 그림은 아니죠. 그런데 누구의 집도 아닙니다.
게다가 AI가 만든 보라색 사이트를 다음 AI가 또 학습하니, 이게 돌고 돕니다. 앞의 트윗에 “이게 다들 말하던 특이점이냐”는 농담이 달린 이유죠.
그런데 저는 이유가 하나 더 있다고 봅니다. 우리가 기준을 안 줬습니다.
“깔끔하고 모던하게 만들어줘.” 다들 한 번쯤 써보셨을 주문인데, AI 입장에선 이게 “평균으로 해줘”와 같은 말입니다.
디자이너와 일할 땐 “Linear 느낌 아시죠? 그런 톤으로요” 한마디면 통합니다. 디자이너 머릿속에 이미 그 사이트가 들어 있으니까요. 다만 AI는 최소한의 리소스를 쓰면서 편향되지 않게 디자인을 만들어야 하니, 이런 정보가 없는 거죠.
그렇다고 매번 “링크 색은 #0070f3, 제목 자간은 -0.02em, 모서리는 8px…” 이렇게 수십 줄을 쓸 수도 없고, 스크린샷을 붙여넣고 “이거처럼 해줘” 하면 겉모습만 따라 할 뿐 그 뒤의 규칙까지는 못 가져갑니다.
그래서 나온 게 DESIGN.md
해법은 생각보다 단순합니다. 디자인 설명서를 글자 파일 하나로 써서 프로젝트에 넣어두는 겁니다.
구글의 AI 디자인 도구 Stitch에서 쓰던 방식인데, 구글이 올해 4월 21일 이 형식을 오픈소스로 공개했습니다. 어떤 도구에서든 쓸 수 있게요. AI에게 “이 프로젝트는 어떻게 만드는지”를 알려주는 파일이 AGENTS.md라면, DESIGN.md는 “이 프로젝트는 어떻게 보여야 하는지”를 알려주는 파일입니다.
지난번 OKF 글에서 구글이 “부족한 건 또 하나의 서비스가 아니라 포맷”이라고 했던 게 떠오르더군요. 이것도 설치하는 프로그램이 아니라 그냥 글자 파일입니다.
안에는 두 가지가 들어갑니다.
위쪽엔 값. 대표 색은 뭔지, 제목 글씨는 얼마나 크고 굵은지, 모서리는 얼마나 둥근지.
아래쪽엔 이유. 여기가 핵심인데요. 이 색을 왜 쓰는지, 어디엔 쓰고 어디엔 쓰지 말아야 하는지를 사람 말로 적어둡니다. 모든 상황을 파일에 다 적을 순 없으니, 이유를 알아야 AI가 처음 보는 상황에서도 같은 방향으로 판단할 수 있다는 거죠.
유명 사이트의 설명서를 모아둔 곳, getdesign.md
getdesign.md는 이 설명서를 유명 사이트별로 모아둔 곳입니다. AI 에이전트 개발 도구를 만드는 VoltAgent 팀이 GitHub에 awesome-design-md라는 이름으로 올렸던 모음집을 웹으로 옮긴 건데, 이 저장소의 스타가 오늘 기준 11만 8천 개를 넘었습니다.
Apple, Airbnb, Notion, Linear, Stripe, Tesla, Claude… 70개가 넘는 사이트의 DESIGN.md를 무료로 받을 수 있고, 유료 카탈로그까지 합치면 550개가 넘습니다.
하나 열어보면 이렇게 생겼습니다. Claude 사이트를 분석한 파일인데요.
맨 위에 대표 색 코랄(#cc785c), 배경 크림색(#faf9f5) 같은 값이 쭉 나오고, 미리보기 화면에서는 색마다 이름과 역할이 붙어 있습니다. “이 코랄은 주요 버튼과 강조 카드에만 쓴다”처럼요.
그리고 아래쪽 ‘해야 할 것 / 하지 말아야 할 것’을 읽어보면 좀 재밌는데요.
순백색 배경은 ‘그냥 또 하나의 AI 툴’처럼 읽힌다. 따뜻한 크림색이 차별점이다.
큰 제목에는 Inter를 쓰지 말 것.
AI 회사 사이트를 분석한 설명서에, AI스럽게 안 보이는 법이 적혀 있는 셈입니다.
써보는 법
방법은 두 가지입니다.
첫째, Claude Code나 Cursor처럼 내 컴퓨터의 프로젝트 폴더에서 작업하신다면 명령어 한 줄이면 됩니다. 끝의 이름만 원하는 사이트로 바꾸면 돼요.
npx getdesign@latest add apple실행하면 DESIGN.md 파일이 프로젝트에 들어오고, AI에게 “UI 만들기 전에 DESIGN.md 참고해줘” 하면 끝입니다.
둘째, 명령어가 낯설거나 ChatGPT, Claude, Lovable 같은 채팅창에서 만드신다면 복사해서 붙여넣으시면 됩니다. 디자인 페이지의 미리보기 옆 DESIGN.md 버튼을 누르면 설명서 원문이 나오고, 그 옆 Copy를 누르면 본문이 통째로 복사됩니다.
Apple 기준으로 2만 9천 자쯤 되는 긴 글인데, 이게 그대로 프롬프트가 됩니다. 채팅창에 붙여넣고 그 아래 “이 디자인으로 ○○ 만들어줘” 한 줄만 덧붙이면 돼요.
실제로 해봤습니다. 설치 수 1위인 Apple 걸 복사해서, 가상의 서비스 ‘회의끝’의 랜딩페이지를 맡겨봤어요. 회의 녹음을 올리면 AI가 회의록과 할 일을 정리해주는 서비스라고 설정했습니다.
검은 메뉴 줄과 그 아래 얇은 두 번째 메뉴 줄, 가운데 정렬된 큼직한 제목, 파란 알약 버튼 두 개, 그 아래 노트북 화면까지. 누가 봐도 애플입니다.
스크롤을 내리면 밝은 판과 어두운 판이 번갈아 나오고, 문장 끝에는 작은 각주 번호까지 붙어 있습니다. 설명서 첫머리에 “모든 페이지는 밝은 판과 어두운 판을 번갈아 쌓은 제품 타일이고, 가운데 제목 아래 한 줄 문구와 작은 파란 알약 버튼 두 개”라고 적혀 있는데, 정확히 그렇게 나왔어요. (이게 제일 인상적이었습니다!) 스크린샷을 보고 따라 그린 게 아니라, 설명서를 읽고 판단한 거죠.
DESIGN.md가 없으면 어떨까
그럼 DESIGN.md 없이 만들면 어떻게 나올까요. 같은 ‘회의끝’ 페이지를 같은 내용, 같은 조건으로 네 번 더 맡겨봤습니다. 한 번은 아무것도 없이, 나머지 세 번은 Claude, Linear, WIRED의 DESIGN.md를 하나씩 넣고요. Apple 때처럼 모두 새 대화에서 시켰습니다.
먼저 DESIGN.md 없이 만든 결과입니다.
솔직히 말씀드리면, 생각보다 잘 나왔습니다. 보라색 그라데이션도 없고, 서비스 이름에서 ‘끝’ 도장을 뽑아내는 센스까지 보여줬어요. 요즘 모델이 확실히 좋아지긴 했습니다.
다만 이건 AI가 고른 취향입니다. 제가 고른 게 아니에요. 새 대화에서 다시 시키면 또 다른 취향이 나올 수도 있고요.
이번엔 DESIGN.md를 넣은 결과입니다.
같은 문장, 같은 기능 설명인데 전혀 다른 회사처럼 보입니다.
여기서도 규칙까지 따랐습니다. Claude 설명서에는 “같은 배경을 두 번 연달아 쓰지 말고, 크림 → 크림 카드 → 어두운 제품 화면 → 크림 → 코랄 → 어두운 푸터 순으로 번갈아 쓰라”는 규칙이 있는데, ② 페이지를 끝까지 내려보면 정확히 그 순서입니다.
그런데 앞의 Apple까지 다섯 장을 나란히 놓고 보니, 더 재밌는 게 보였습니다.
옷은 다 다른데, 뼈대가 똑같습니다.
제목 위 작은 라벨, 회의록 카드 모양의 제품 화면, 기능마다 붙은 작은 화면 그림, 두 장짜리 요금제 카드, 마지막에 한 번 더 나오는 가입 버튼. 녹음 카드에 ‘4분 12초’처럼 정리 시간을 초 단위로 붙여둔 것까지 다섯 장이 다 비슷합니다.
Apple처럼 설명서에 배치까지 적혀 있으면 가운데 정렬이나 번갈아 쌓는 판처럼 배치는 확 바뀝니다. 그래도 무엇을 어떤 순서로 보여줄지는 다섯 장이 거의 같았어요. 같은 내용을 줬으니 어느 정도는 당연하지만, 그 부분은 여전히 AI의 ‘평균’에서 나오고 있다는 뜻이겠죠. getdesign.md도 이걸 숨기지 않습니다. DESIGN.md는 “완성된 테마가 아니라 사전”이고, “버튼이 어떻게 생겨야 하는지는 알려주지만, 버튼을 만드는 건 여전히 당신과 에이전트”라고 적어뒀거든요.
DESIGN.md가 바꿔주는 건 옷이지, 뼈대가 아닙니다.
그리고 다섯 장 중 제 눈에 제일 오래 남은 건, 오히려 DESIGN.md 없이 만든 첫 번째 페이지의 ‘끝’ 도장이었습니다. 남의 설명서가 아니라 서비스 이름, 그러니까 내 이야기에서 나온 아이디어죠. 옷은 DESIGN.md로 맞추고, 뼈대와 이야기는 내가 채우는 것. 지금으로선 이게 제일 현실적인 조합 같습니다.
숫자로 봐도 다들 같은 고민 중입니다
getdesign.md가 11주 동안 가입자 6만 4천여 명에게 받은 응답으로 ‘State of DESIGN.md 2026’이라는 보고서를 냈는데요. 83%가 “AI가 만든 화면의 모양을 바꾸고 싶다”고 답했습니다. “지금 사이트를 더 낫게 보이게 하고 싶다” 59.4%, “마음에 드는 디자인처럼 만들고 싶다” 23.6%. 새 사이트가 아니라, 이미 만든 걸 덜 AI스럽게 만들고 싶은 거죠.
보고서의 한 줄이 이걸 잘 요약합니다. “만드는 건 더 이상 문제가 아니다. 보기 좋은 게 문제다.”
응답자 중 한국이 9.8%였다는 것도 눈에 띄었습니다. 나라 하나로 치면 미국(16%), 영국(11%) 다음 세 번째입니다.
다만 짚어둘 게 있습니다
첫째, 공식 디자인 시스템이 아닙니다. 각 회사가 만든 게 아니라 공개된 화면을 분석한 ‘참고용 해석’이고, 사이트에도 그렇게 적혀 있습니다. 로고나 브랜드 이름, 전용 글꼴은 가져다 쓰시면 안 됩니다.
둘째, 남의 디자인을 가져다 써도 되냐는 논쟁도 있습니다. 해외 유튜브에 “다른 사이트의 DESIGN.md를 베끼는 건 도둑질인가?”라는 영상이 올라왔을 정도고요. getdesign.md의 입장은 “Vercel을 베끼자는 게 아니라, 에이전트에게 출발점이 될 언어를 주자는 것”입니다. 출발점으로 쓰시고, 조금씩 내 것으로 바꿔가시는 게 맞습니다.
셋째, 보고서 숫자는 자체 집계입니다. 83%는 애초에 디자인을 바꾸고 싶어서 getdesign.md에 가입한 사람들의 응답입니다. 일반적인 비율로 읽으시면 안 됩니다.
넷째, 무료와 유료가 섞여 있습니다. 70여 개는 무료지만 나머지 카탈로그는 유료로 요청해서 받는 방식이고, 월 99달러 구독이나 내 사이트를 분석해주는 개인용 DESIGN.md(현재 1회 39달러)도 있습니다. 처음엔 무료로도 충분합니다.
그래도 방향은 분명해 보입니다
전에 2주와 2,000달러로 포토샵 대체품을 만든 사례를 다뤘었죠. 만드는 비용은 그만큼 떨어졌는데, 내 취향을 AI에게 전하는 비용은 아직 그대로였습니다.
DESIGN.md는 그 비용을 파일 하나로 줄이려는 시도입니다. getdesign.md의 표현을 빌리면, 디자이너와 몇 년에 걸쳐 쌓던 공통의 레퍼런스를 에이전트와는 2분 만에 맞추자는 거죠.
“깔끔하고 모던하게” 대신 “이 설명서대로”. 다음에 만드시는 페이지부터 한 번 바꿔보세요. 생각보다 차이가 큽니다.
#AI #디자인 #DESIGNmd #getdesign #바이브코딩 #ClaudeCode