일하는 ai

49. 구글이 사양 공개한 design md

12 min read

-

이 영상은 AI한테 색, 폰트, 버튼 둥글기 같은 말을 매번 다시 설명하느라 지치는 사람에게 꽤 실용적인 해답을 줍니다. 메이커 에반이 말하는 답은 design.md예요. 디자인 규칙을 한 장의 마크다운 파일로 고정해 두고, AI가 그 파일을 읽게 만들어 반복 설명을 줄이는 방식입니다.

flowchart LR
A[AI가 화면마다 다른 디자인 생성] --> B[design.md로 규칙 문서화]
B --> C[공식 사양 기준 핵심값 정리]
C --> D[AI 설정 파일에 연결해 일관성 확보]

핵심 요약

  • 같은 프로젝트인데도 화면마다 색, 폰트, 버튼 크기가 달라지는 이유는 AI가 멍청해서가 아니라 사람이 매번 다르게 프롬프팅하기 때문이라고 설명한다
  • design.md는 AI에게 주는 디자인 시방서로 소개되며, 인테리어 공사에서 쓰는 시방서처럼 색상, 폰트, 간격, 둥글기 같은 규칙을 한 곳에 모아 두는 역할을 한다
  • 이 파일은 구글 랩스의 스티치가 내부적으로 쓰던 포맷이 공개된 것이고, 메이커 에반은 W3C 표준 흐름까지 언급하며 새로운 표준 파일이 될 가능성을 높게 본다
  • 다만 알파 단계라 공식 지원이 완전하지 않고, 코드와 자동 동기화도 안 되며, 작은 프로젝트에는 오버스펙일 수 있다는 단점도 같이 짚는다
  • 실전 적용은 시안 먼저 뽑기 → 공식 사양 참고해 핵심만 채우기 → CLAUDE.md 또는 AGENTS.md에 한 줄 추가의 세 단계로 정리된다

왜 지금 중요한가

AI로 프론트엔드나 디자인 시안을 반복 생성하는 팀일수록, 매번 말로 설명하는 방식은 금방 한계가 옵니다. 특히 디자이너와 개발자가 같이 일하거나 브랜드 일관성이 중요한 제품에서는 더 그렇죠. 이 영상은 그 문제를 프롬프트 스킬이 아니라 운영 구조 문제로 보고, 문서 한 장으로 해결하는 실무 루틴을 제안합니다.

주요 내용

같은 말을 천 번 반복하게 되는 이유

메이커 에반은 지난 1년 동안 AI에게 같은 말을 천 번쯤 한 것 같다고 말하면서 시작합니다. 보라색으로 해 줘, 글자 크기 키워 줘, 버튼 둥글기 8픽셀로 같은 요청이 대표적이죠. 그런데 어느 날 이걸 파일 하나로 끝낼 수 있다는 걸 알게 됐고, 그 뒤로 작업 시간이 절반으로 줄었다고 합니다.

여기서 포인트는 AI가 매번 다른 디자인을 만드는 이유입니다. 영상에서는 이걸 AI 탓으로 돌리지 않아요. 사람이 모던하게, 깔끔하게, 예쁘게처럼 애매한 말을 반복하니까 AI도 매번 다른 결과를 낸다는 거죠. 반대로 정확한 지시는 인디고 컬러 #4F46E5, 16픽셀 인터 폰트, 모서리 8픽셀처럼 명시적인 값이라는 점을 강조합니다.

design.md는 디자인 시방서에 가깝다

이 문제를 해결하려고 나온 게 design.md라고 설명합니다. 메이커 에반은 이 파일을 한마디로 AI한테 주는 디자인 시방서라고 부릅니다.

인테리어 비유가 이해를 쉽게 해 줍니다. 도면도 색상표도 없이 거실은 따뜻하게, 부엌은 모던하게라고만 말하면, 작업자마다 다른 색을 칠하게 되죠. 지금 우리가 AI에게 하고 있는 일도 똑같다는 겁니다. 그래서 벽 색, 바닥재, 조명 종류를 시방서에 적듯이, 디자인에서도 색상, 폰트, 간격, 둥글기 규칙을 문서로 고정해야 한다고 말합니다.

파일 구조는 깔끔하고, 사람과 컴퓨터가 같이 읽는다

보이는 자막 기준으로 design.md의 구조도 꽤 구체적으로 설명됩니다. 프로젝트 루트의 README.md 옆에 두는 형제 파일처럼 자리 잡고 있고, 메뉴판 카테고리처럼 구조가 정리돼 있다고 하죠.

카테고리는 여덟 개로 정리돼 있고, 색상, 타이포그래피, 간격, 모서리, 그림자 같은 항목이 들어간다고 말합니다. 위쪽에는 컴퓨터가 읽기 좋은 정해진 값이 들어가고, 아래에는 사람이 읽을 수 있는 설명이 붙습니다. 예를 들면 이 보라색은 우리 브랜드 색상이고 강조하고 싶은 버튼이나 링크에 써 주세요 같은 식이죠. 즉, 한 파일 안에 컴퓨터용 언어와 사람용 언어가 같이 들어가는 구조라는 설명입니다.

단점도 분명하고, 그래서 시작법이 중요하다

메이커 에반은 장점만 얘기하지 않습니다. 보이는 후반부 자막에서는 세 가지 단점을 같이 짚어요. 첫째, 아직 공식 지원이 완전하지 않다는 점. 둘째, 코드와 자동 동기화가 안 돼서 누가 코드 색을 바꾸면 design.md는 예전 상태로 남을 수 있다는 점. 셋째, 혼자 만드는 작은 토이 프로젝트에는 오버스펙일 수 있다는 점입니다.

그래서 어떤 프로젝트에 잘 맞는지도 바로 정리합니다. 디자이너와 개발자가 같이 일하는 SaaS 제품, AI 에이전트로 프론트엔드를 반복 생성하는 환경, 브랜드 일관성이 중요한 회사 프로젝트가 가장 잘 맞는다고 말합니다.

실전 적용법도 단순합니다. 첫 단계는 의외로 design.md 작성이 아니라 디자인 시안부터 뽑는 겁니다. 안티그래비티, 클로드 코드, 슈퍼파워스 같은 도구로 목데이터 디자인을 먼저 만들고, 색과 폰트를 여러 버전으로 비교해 선택하라고 해요. 그다음 공식 사양 페이지를 옆에 띄워 두고 핵심 색상 다섯 개, 폰트 두세 개 정도만 먼저 채우라고 권합니다. 마지막으로 CLAUDE.md나 AGENTS.md 같은 AI 설정 파일에 @design.md 한 줄만 넣으면 AI가 알아서 이 파일을 읽고 규칙을 따르기 시작한다고 설명합니다.

원문 발화 하이라이트

  • [00:07] “그날 이후로 제 작업 시간이 진짜 절반으로 줄었어요.”
  • [02:40] “이 짜증을 해결하려고 하는게 바로 디자인 MD라는 파일이에요.”
  • [02:44] “한마디로 말하면요. AI한테 주는 디자인 시방서예요.”
  • [09:46] “디자인.md 만들기 전에 디자인 시안부터 먼저 뽑으세요.”
  • [11:41] “골뱅이 디자인.md라는 문구를 집어넣어 주시면 됩니다.”
  • [12:32] “디자인 MD는 AI 코딩 시대에 새로운 표준 파일로 자리잡을 가능성이 큽니다.”

바로 실행해 보기

  • 지금 작업 중인 프로젝트가 있다면 먼저 AI에게 말로 설명하지 말고, 색상 다섯 개와 폰트 두세 개만 정한 간단한 디자인 시안부터 뽑아 보세요. 영상에서도 이 단계가 제일 중요하다고 강조합니다
  • 시안이 정해졌다면 공식 사양 페이지를 참고해 design.md 초안을 만들어 보세요. 처음부터 여덟 개 카테고리를 다 채우려 하지 말고, 메인색, 강조색, 글자색, 배경색, 경고색 정도만 먼저 적는 식으로 시작하는 게 좋습니다
  • 클로드 코드나 코덱스 계열 도구를 쓴다면 CLAUDE.md나 AGENTS.md에 @design.md 한 줄을 추가해 보세요. 그 한 줄이 들어가는 순간부터 반복 설명이 얼마나 줄어드는지 바로 체감할 수 있을 겁니다

참고

영상 메타

수집 품질

  • 자막 세그먼트: 433개
  • 자막 문자수: 7856자
  • 챕터 추출: 8개
  • 콘텐츠 생성: Subagent 기반

AI 생성 도구를 활용해 초안을 구성했고, 원영상 발화와 공개 자료를 교차 확인해 정리했습니다.

그래프 뷰

백링크