읽을거리 · AI 디자인
AI에게 우리 디자인 규칙을 건네는 파일 한 장, DESIGN.md
AI가 시안을 만들고 코드를 짜는 일이 늘수록, 규칙을 어디에 적어 두느냐가 중요해진다. 구글이 공개한 DESIGN.md 형식으로 이 사이트의 규칙을 직접 옮겨 적고 검사기를 돌려 봤다. 걸린 것까지 그대로 옮긴다.
이번 주 디자인 쪽 소식 두 개가 묘하게 같은 방향을 가리켰다.
어제 쇼피파이가 내놓은 캔버스는 가게의 디자인 시스템을 AI 비서 옆에 함께 펼쳐 놓는다. 그 하루 전 피그마는 모션 기능을 고치면서, 이징과 길이 같은 움직임 값을 '애니메이션 스타일'로 저장해 라이브러리에 올리게 했다. 둘 다 결국 규칙을 한곳에 모아 두는 일이다. 사람과 AI가 같은 규칙을 꺼내 쓸 수 있게.
규칙을 모아 두는 방법 중에 요즘 자주 보이는 게 있다. DESIGN.md라는 파일 한 장이다.
먼저 밝혀 둘 것. 나는 이 사이트를 클로드 코드로 만들고 있고, 아래 실험도 그 안에서 했다. 검사기는 구글이 공개한 공식 도구(0.4.0)를 그대로 썼다.
DESIGN.md가 뭔가
구글 랩스가 AI 디자인 툴 스티치(Stitch) 안에서 쓰던 형식이다. 4월 21일에 형식을 공개해서, 지금은 어떤 AI 도구든 읽을 수 있다. 라이선스는 Apache 2.0이고, 아직 알파 단계다.
생김새는 단순하다. 마크다운 파일 하나에 두 층이 있다.
위쪽 --- 사이에는 토큰을 적는다. 색, 글자, 둥근 정도, 간격, 컴포넌트를 정확한 값으로. 아래쪽에는 그 값을 왜 쓰는지 글로 적는다. 구글 설명을 빌리면, 토큰은 AI에게 정확한 값을 주고 글은 그 값을 어떻게 써야 하는지 알려 준다.
이 두 번째 층이 핵심이다. #6B6B6B라는 값만 주면 AI는 그 회색을 아무 데나 쓴다. "설명 글에만 쓴다"는 한 줄이 붙어야 제목에 그 색을 쓰지 않는다.
무엇을 적나
아래쪽 글은 정해진 순서가 있다. 빼도 되지만, 쓰는 칸은 이 순서를 지켜야 한다.
| 순서 | 칸 | 무엇을 적나 |
|---|---|---|
| 1 | Overview | 브랜드의 성격과 전체 분위기. 한두 문장 |
| 2 | Colors | 색마다 이름, 값, 어디에 쓰는지 |
| 3 | Typography | 글자 크기 단계와 쓰임 |
| 4 | Layout | 간격과 격자 |
| 5 | Elevation & Depth | 그림자와 겹침 |
| 6 | Shapes | 모서리 둥근 정도 |
| 7 | Components | 버튼, 입력칸 같은 부품의 조합 |
| 8 | Do's and Don'ts | 하지 말아야 할 것 |
출처: google-labs-code/design.md 규격 문서.
브랜드 가이드 PDF를 만들어 본 사람이라면 낯설지 않은 목차다. 다른 점은 받는 쪽이 AI라서, 애매한 형용사보다 값과 조건이 더 잘 먹힌다는 것. "세련된 느낌"보다 "강조는 색 대신 굵기로"가 낫다.
이 사이트로 직접 해 봤다
말로만 하면 감이 안 와서, 이 사이트의 규칙을 DESIGN.md로 옮겨 적었다. 이 사이트는 흑백만 쓴다. 회색 몇 가지, 글꼴 하나, 둥근 모서리 몇 단계가 전부다. 그리고 구글이 함께 내놓은 검사기 lint를 돌렸다.
결과는 경고 네 개. 그중 둘이 볼 만했다.
첫째, 회색 하나가 기준에 못 미쳤다. 사이트 주소와 태그를 쓰는 연한 회색 #A3A3A3이 흰 바탕에서 대비 2.52 : 1이 나왔다. 본문 글자의 웹 접근성 기준(WCAG AA)은 4.5 : 1이다. 만들 때는 "덜 중요한 글자니까 연하게"라고 생각했는데, 검사기는 숫자로 잘랐다.
후보로 #767676을 넣고 비교 명령 diff를 돌리니, 바뀐 토큰 하나와 줄어든 경고 하나를 정확히 짚어 냈다. 대비는 4.54 : 1로 겨우 통과다. 실제로 바꿀지는 화면에서 다시 보고 정하려 한다.
덧붙임. 글을 올린 날 사이트 전체를 다시 점검하고 #767676으로 바꿨다. 어두운 화면의 같은 자리 회색(#5E5E5E, 2.96 : 1)도 걸려서 #868686으로 올렸다. 로고의 점처럼 글자가 아닌 장식에만 예전 회색을 남겼다.
둘째, '주 색'이 없다는 경고. 검사기는 primary라는 색이 없으면 이렇게 알려 준다. "AI가 주요 색을 알아서 만들어 낼 수 있다." 흑백 사이트라 일부러 주 색을 두지 않았는데, 그 빈자리를 AI는 '아직 안 정한 것'으로 읽는다는 뜻이다. 그러니 "강조 색은 없다. 만들지 않는다"를 Do's and Don'ts에 적어 두어야 한다. 없는 것도 적어야 지켜진다.
나머지 두 경고는 정의만 하고 어느 컴포넌트에도 쓰지 않은 색이 있다는 것이었다. 정리할 거리를 찾아 준 셈이다.
이미 있는 도구들과의 관계
DESIGN.md가 피그마 변수나 토큰 파일을 대신하는 건 아니다. 검사기의 export 명령으로 같은 토큰을 테일윈드 설정, CSS 변수, W3C 디자인 토큰 형식(DTCG)으로 내보낼 수 있다. 값은 한곳에 두고 여러 곳으로 흘려보내는 그림이다.
차이는 받는 쪽에 있다. 토큰 파일은 사람이 만든 코드가 읽고, DESIGN.md는 AI가 읽는다. 클로드 코드나 커서 같은 코딩 에이전트에게 프로젝트 폴더에 이 파일을 두라고 하면, 화면을 만들기 전에 먼저 읽는다.
한 가지 주의할 점. 인기를 타면서 'DESIGN.md 모음'을 내건 사이트들이 생겼는데, 구글 공식 규격과 형식이 다른 것들이 섞여 있다는 지적이 나왔다. 남이 만든 파일을 가져다 쓸 거라면 lint부터 한 번 돌려 보는 게 좋다.
그래서 지금은
처음부터 여덟 칸을 다 채울 필요는 없다. 이 정도로 시작하면 된다.
- 색 다섯 개 이내. 이름과 값, 그리고 어디에 쓰는지 한 줄씩.
- 글자 크기 세 단계. 제목, 본문, 작은 글자.
- 하지 말 것 세 줄. AI가 자주 엇나가는 방향을 적는다. 그라데이션을 쓰지 않는다거나, 그림자를 넣지 않는다거나.
그리고 npx @google/design.md lint DESIGN.md 한 줄을 돌려 보자. 내 경우처럼 오래 써 온 색 하나가 기준에 걸릴 수도 있다. AI에게 규칙을 넘기기 전에 규칙부터 점검하는 셈이다.
AI에게 원하는 스타일을 말로 전하는 법은 디자인 스타일을 말로 설명하는 법에 따로 정리했다. 색 대비를 확인하는 도구는 컬러에 모아 두었다.
출처: 구글 블로그 'Stitch's DESIGN.md format is now open-source', google-labs-code/design.md, the-decoder, Figma 릴리스 노트, note.com 공식 규격 비교 글.