개발 효율을 높이는 AI 전용 디자인 명세서, DESIGN.md
(written by GEMINI)
1. DESIGN.md란 무엇인가?
DESIGN.md는 AI 코딩 도구(예: Claude Code, Cursor 등)가 웹 서비스의 UI를 일관성 있게 구축할 수 있도록 돕는 'AI 전용 디자인 시스템 명세서'입니다. 텍스트 기반의 마크다운 파일로 작성되어 AI가 인간처럼 디자인 가이드를 읽고 이해할 수 있게 설계되었습니다.
2. 핵심 목적
AI와의 소통: 복잡한 디자인 가이드북 대신 AI가 즉시 읽고 적용할 수 있는 단순한 텍스트 포맷을 제공합니다.
디자인 일관성: AI가 코드를 생성할 때 서비스의 색상, 폰트, 간격 등을 임의로 정하지 않고 정의된 규칙을 따르게 합니다.
버전 관리: Git을 통해 디자인 결정 사항을 코드와 함께 관리하고 변경 이력을 추적할 수 있습니다.
3. DESIGN.md에 포함되는 주요 내용
일반적으로 다음과 같은 요소들이 정의됩니다:
Colors (색상): Primary, Secondary, Semantic(성공, 경고, 에러) 색상의 Hex 코드 및 사용처.
Typography (타이포그래피): 폰트 패밀리, 크기, 굵기, 줄 간격 등에 대한 규칙.
Spacing & Grid (간격 및 그리드): 요소 간의 여백(Padding/Margin) 단위와 레이아웃 구조.
Components (컴포넌트): 버튼, 입력창, 카드 등 주요 UI 요소의 스타일(Border-radius, Shadow 등)과 행동 지침.
Tokens (토큰): --color-primary와 같이 코드에서 바로 사용할 수 있는 변수 이름 정의.
4. 사용 방법
파일 작성: 프로젝트 루트 디렉토리에 DESIGN.md 파일을 생성합니다.
가이드 입력: 프로젝트의 디자인 시스템(색상, 컴포넌트 규칙 등)을 마크다운 형식으로 적습니다.
AI에게 지시: "DESIGN.md 파일을 참고해서 새로운 로그인 페이지를 만들어줘"라고 요청하면, AI가 해당 가이드를 준수하여 코드를 생성합니다.
