구글, 스티치 'DESIGN.md' 규격 오픈소스화: AI가 디자인 규칙 직접 이해한다

DESIGN.md는 코딩 AI 에이전트가 디자인 시스템을 구조적으로 이해할 수 있도록 돕는 오픈 규격입니다. 구글 랩스의 AI UI 디자인 도구인 스티치(Stitch)에 쓰이던 핵심 형식이 깃허브를 통해 오픈소스 초안으로 공개되었습니다.

한마디로 내 브랜드의 디자인 규칙을 단일 파일로 정리해 어떤 AI 에이전트에든 전달하고, 일관된 화면을 만들도록 지시할 수 있는 도구입니다.

무엇을 할 수 있나

AI에게 프런트엔드 코딩을 맡길 때 가장 흔히 겪는 문제는 화면마다 스타일이 제각각으로 튀는 현상입니다. 프롬프트로 기본 색상을 일러줘도 대화가 길어지면 규칙을 잊기 일쑤입니다.

DESIGN.md는 디자인 규칙을 프로젝트 간에 그대로 내보내고 불러올 수 있게 만듭니다. 에이전트가 색상의 정확한 쓰임새를 파악하기 때문에 브랜드 규정에 꼭 맞는 사용자 인터페이스를 생성합니다.

특히 실용적인 부분은 접근성 검증입니다. AI가 선택한 색상 조합을 WCAG 접근성 기준에 맞춰 자동으로 대조하고, 대비 비율이 기준을 통과하는지 직접 확인할 수 있습니다.

어떻게 작동하나

복잡한 독자 기술 대신 친숙한 마크다운과 YAML을 영리하게 결합했습니다. 파일 하나에 기계가 읽는 토큰과 인간이 읽는 디자인 의도가 함께 담깁니다.

파일 상단 YAML 영역에는 색상, 타이포그래피, 둥글기, 여백, 컴포넌트 같은 고정 수칫값이 구조화된 토큰 형태로 들어갑니다.

본문 마크다운 영역에는 전체 스타일 개요부터 색상 적용 의도, 레이아웃 원칙, 주의 사항까지 순서대로 서술됩니다. 특정 강조 색상이 단순 배경용이 아니라 반드시 클릭 유도 버튼에만 쓰여야 한다는 식의 맥락을 에이전트에게 확실히 알려주는 구조입니다.

구글은 즉시 쓸 수 있는 검증 도구도 함께 내놓았습니다. npx 명령어를 통해 파일 문법과 토큰 누락, WCAG 대비 문제를 JSON 형태로 확인하는 린트 기능을 제공하며, 두 버전 간의 디자인 규칙 차이를 감지하는 diff 기능도 지원합니다.

어디서 써볼 수 있나

현재 깃허브의 google-labs-code 조직에 알파 버전 초안 사양이 공개되어 있습니다.

구글 스티치를 사용하는 이용자라면 도구 내에서 직접 DESIGN.md 파일을 생성하고 내보낼 수 있습니다. 다른 개발 환경을 쓰는 엔지니어라면 깃허브 저장소의 사양을 참고해 프로젝트 루트에 파일을 추가하고, 공식 패키지를 통해 유효성을 검사해 볼 수 있습니다.

왜 중요한가

AI 도구로 웹 화면을 자주 구현하는 개발자라면 지금 바로 살펴볼 만합니다. 매번 프롬프트 창에 장황한 스타일 가이드를 붙여넣던 비효율을 없애고, 접근성 기준까지 손쉽게 챙길 수 있습니다.

구글이 이 형식을 스티치 전용 기능으로 묶어두지 않고 오픈소스로 푼 점은 눈여겨볼 만합니다. AI 에이전트와 인간 디자이너 사이의 언어 격차를 메우는 표준 규격으로 자리 잡는다면 프런트엔드 작업 방식 전반에 적잖은 영향을 줄 것으로 보입니다.