AI와 디자인의 새로운 언어, DESIGN.md
AI가 우리 삶의 곳곳에 깊이 스며든다. 특히 디지털 콘텐츠 제작 분야에서는 AI의 역할이 더욱 커진다. 디자인 작업에 AI를 활용하는 새로운 방식이 등장했는데, 이것이 바로 DESIGN.md 개념이다.
AI가 이해하는 디자인 언어
우리는 교육 현장에서 다양한 학습 자료를 만든다. 교실 게시물, PPT 자료, 활동지 등 형태는 달라도 일관된 분위기와 디자인을 유지하면 학생들은 안정감을 느끼고 내용에 집중하기 쉽다. 하지만 이런 일관성을 유지하기란 쉬운 일이 아니다. 새로운 자료를 만들 때마다 어떤 색을 쓸지, 어떤 글꼴을 쓸지 고민하기 마련이다.
이러한 고민을 기술적으로 해결하려는 시도가 바로 DESIGN.md이다. 구글 스티치(Google Stitch)가 도입한 이 개념은 AI 에이전트가 사용자 인터페이스(UI)를 일관되게 생성하도록 돕는 단순한 텍스트 파일이다. 기존에는 디자이너가 피그마(Figma) 같은 전문 도구로 디자인 가이드를 만들고, 개발자가 이를 코드로 구현했다. 이 과정에서 디자인과 구현 사이에 미묘한 차이가 생기기 쉽다.
DESIGN.md는 이러한 간극을 없앤다. 별도의 복잡한 도구 없이, 프로젝트 루트 폴더에 마크다운(Markdown) 파일을 하나 넣어둔다. 이 파일에는 디자인의 모든 규칙이 텍스트로 정의된다. 색상 팔레트, 타이포그래피, 버튼 스타일, 레이아웃 원칙 등이 담긴다. AI는 이 DESIGN.md 파일을 읽고, 여기에 명시된 규칙에 따라 UI를 자동 생성한다. 마치 학습자료를 만들 때 ‘우리 학교의 학습 자료는 이런 분위기와 색상, 글꼴을 써야 한다’는 가이드라인을 문서로 만들고, AI가 그 가이드라인에 맞춰 새 자료를 생성하는 모습과 같다.
왜 마크다운 파일인가
AI가 디자인 시스템을 이해하는 데 굳이 마크다운 파일이어야 할까? 그 이유는 거대 언어 모델(LLM)이 텍스트를 가장 잘 이해하기 때문이다. 마크다운은 사람이 읽기 쉽고 구조화된 텍스트 형식이다. LLM은 별도의 파싱이나 복잡한 설정 과정 없이 마크다운 파일을 바로 해석하고 디자인 규칙을 파악한다. 이것은 교육 분야에 시사하는 바가 크다. 교사가 복잡한 프로그래밍 언어나 디자인 툴을 배우지 않고도, 익숙한 텍스트 기반의 지시로 AI에게 원하는 형태의 학습 자료나 웹 페이지를 만들게 할 수 있다는 의미다.
DESIGN.md는 AGENTS.md와 짝을 이룬다. AGENTS.md가 코딩 에이전트에게 프로젝트를 어떻게 만들지 지시한다면, DESIGN.md는 디자인 에이전트에게 프로젝트가 어떤 모습이어야 할지 알려준다. 이 두 파일이 함께 작동하며 AI는 디자인 의도를 정확히 파악하고 일관된 결과물을 만들어낸다.
실제 웹사이트 디자인을 분석하다
GitHub의 awesome-design-md 저장소에는 수많은 실제 웹사이트에서 추출한 DESIGN.md 파일들이 모여 있다. 에어비앤비, 애플, 나이키, 스포티파이, 피그마, 스트라이프 같은 유명 서비스들의 디자인 가이드가 마크다운 파일 형태로 제공된다. 이들은 단순히 예시가 아니다. 각 웹사이트의 고유한 시각적 특징, 컬러 팔레트, 타이포그래피, 컴포넌트 스타일 등이 체계적으로 문서화되어 있다.
예를 들어, 나이키의 DESIGN.md는 ‘모노크롬 UI, 대문자 Futura 글꼴, 전면 이미지 활용’ 같은 특징을 담는다. 스포티파이는 ‘어두운 배경에 생생한 녹색, 굵은 글꼴, 앨범 아트 중심’이라는 설명을 포함한다. 이러한 상세한 지침이 텍스트로 명시되므로 AI는 각 브랜드의 디자인 DNA를 정확히 파악하고, 그에 맞는 새로운 UI를 생성한다.
각 DESIGN.md 파일에는 다음과 같은 핵심 요소들이 정의되어 있다.
- 시각 테마 및 분위기: 전반적인 디자인 철학, 밀도, 사용자 경험.
- 색상 팔레트 및 역할: 색상 코드와 그 기능적 역할.
- 타이포그래피 규칙: 글꼴 종류, 크기, 위계.
- 컴포넌트 스타일: 버튼, 카드, 입력창, 내비게이션 요소의 상태별 스타일.
- 레이아웃 원칙: 간격, 그리드, 여백 활용 방식.
- 깊이 및 입체감: 그림자 시스템, 표면 위계.
- 디자인 금지 사항: 피해야 할 디자인 패턴.
- 반응형 동작: 다양한 기기에서의 동작 방식.
- 에이전트 프롬프트 가이드: AI 에이전트가 활용할 빠른 참조 자료.
이 파일들을 프로젝트에 복사해 넣고 AI 에이전트에게 “이것과 똑같은 페이지를 만들어줘”라고 지시하면, AI는 지침에 따라 픽셀 단위까지 일치하는 UI를 생성한다. 교육 현장으로 치면, 학교가 ‘우리 학교 웹사이트 디자인 가이드’를 만들고 AI에게 ‘이 가이드에 맞춰 우리 학교 급식 메뉴 페이지를 만들어줘’라고 하는 모습과 다르지 않다.
생태학·먹이그물 이론의 시선으로 보면
생태계에는 핵심종(keystone species)이라는 개념이 있다. 그 수가 많지 않아도 생태계 전체의 구조와 기능에 결정적인 영향을 미치는 종이다. DESIGN.md 파일은 디지털 생태계의 핵심종과 같다. 작은 텍스트 파일 하나이지만, 이 파일이 존재함으로써 AI가 생성하는 모든 UI 요소들의 일관성과 통일성이 유지된다. 이 핵심종이 없다면 AI는 각기 다른 모습의 결과물을 내놓아, 마치 먹이그물에서 핵심종이 사라졌을 때 생태계 전체가 혼란에 빠지는 것처럼, 파편화된 디자인 시스템이 된다.
출처
- https://github.com/VoltAgent/awesome-design-md