피드로 돌아가기
Dev.toFrontend
원문 읽기
AI 기반 Design-to-Code의 아키텍처적 한계와 DESIGN.md 표준을 통한 해결 방안
We're making the Dreamweaver mistake again, on purpose this time
AI 요약
Context
AI를 활용해 디자인 파일을 코드로 즉시 변환하는 워크플로우가 확산되며 디자인 파일이 시스템의 Foundation 역할을 수행하는 구조적 모순 발생. 단순 정적 사이트와 달리 재사용 가능한 Design System 구축 시 디자인 파일의 스냅샷 정보만으로는 상태 관리 및 아키텍처적 결정 사항을 반영하지 못하는 한계 노출.
Technical Solution
- 디자인 파일의 변수명을 코드로 직접 매핑하는 구조를 지양하고 Intent 기반의 추상화 계층 도입
- Raw 디자인 파일 대신 기계 가독성 토큰과 인간 가독성 설명서가 결합된 DESIGN.md 표준 포맷 채택
- AI Agent가 컴포넌트의 외형이 아닌 시스템적 맥락을 파악하도록 구조화된 Design System 컨텍스트 제공
- CI 단계에서 Figma 디자인과 실제 구현 코드를 대조하여 Design-System Drift를 자동으로 탐지하는 검증 루프 구축
- 디자인 파일의 픽셀 정보와 엔지니어링 결정 사항을 분리하여 시스템의 내구성과 재사용성 확보
실천 포인트
1. 디자인 토큰 명명 규칙이 Value 기반(--blue-500)인지 Intent 기반(--color-primary)인지 확인
2. AI 생성 코드 도입 시 기존 컴포넌트 재사용 대신 신규 생성을 반복하는지 벤치마킹
3. DESIGN.md와 같은 구조화된 설계 문서가 AI 코딩 에이전트의 입력값으로 제공되는지 검토
4. CI 파이프라인 내에 디자인-코드 일치성을 검증하는 자동화 도구 도입 고려