LLM 활용 프로토타이핑(2) - DESIGN.md를 활용한 디자인 시스템 수립

1. 개요

1-1. 프로젝트 개요

온디바이스 AI 포즈 가이드 서비스 - TryAngle의 AI 기반 사진 분석 결과 및 실시간 AI 데이터 모니터링을 위한 어드민 시스템을 개발 중이다. 서비스 구현 중, 레이아웃과 UX 흐름을 빠르게 검증하기 위해 정적 HTML/CSS 목업으로 프로토타이핑했다. 기획서나 피그마 없이 해당 목업 사이트를 기준으로 개발자-디자이너-기획자가 함께 작업 중이다.

프로토타이핑의 전반적인 과정은 이전글(https://wavicle.tistory.com/42)과 목업 사이트 레포지터리 README(https://try-angle-at.github.io/tryangle_admin_mock/)에 작성해두었다.

 

🔗관련 링크
- 목업 사이트: https://try-angle-at.github.io/tryangle_admin_mock/
- 레포지터리: https://github.com/try-angle-at/tryangle_admin_mock
- TryAngle 메인 레포지터리: https://github.com/try-angle-at

 

1-2. DESIGN.md 란?

DESIGN.md 는 코드 저장소 내에 작성, 텍스트 기반으로 디자인 원칙과 토큰을 정의한 실무형 디자인 가이드 문서이다. 복잡한 디자인 툴 없이도 개발자와 기획자가 동일한 시각적 기준을 공유하게 함으로써 '단일 진실 공급원(SSOT)'의 역할을 수행할 수 있도록 한다.

• DESIGN.md 공식 문서: stitch.withgoogle.com/docs/design-md/overview
• DESIGN.md GitHub 레포지터리: github.com/google-labs-code/design.md
• awesome-design-md GitHub 레포지터리: github.com/VoltAgent/awesome-design-md
• getdesign.md: getdesign.md

 

2. 문제 인식

2-1. 스타일 파편화

(1) 페이지별 스타일 불일치: copilot, gemini 등 여러 에이전트를 사용하여 단기간에 다수의 페이지를 추가하는 과정에서 각 페이지의 스타일 기준이 달라짐.

 

(2) LLM 활용의 한계: “이전 페이지를 참고하여 통일하라”는 프롬프트에 의존했으나, 기준이 되는 페이지에 없는 요소는 모호하게 적용되어 의도와 다른 결과물이 생성됨.

 

(3) 디자인 혼재: 폰트, 컬러, 아이콘 사용 규칙이 문서화되지 않아 상이한 표현방식이 혼재됨.

 

2-2. 리뷰 비용 증가

(1) 반복적인 수정 리소스 투입: 공통 규칙이 있는 경우, 최초부터 통일감 있는 디자인 생성이 용이하지만, 기준점 부재로 인해 UI 통일 작업에 대한 수정 요청을 반복적으로 수행해야함.

 

2-3. 기능적 리스크

(1) UI 수정시 기능적 결함 우려: 상세 뷰어 페이지의 경우 내부 구조가 복잡하게 작성되어있어, AI 에이전트에게 스타일 일괄 수정 요청시 예상치 못한 기능 리스크 발생 가능성이 높음

(2) 확장성 저해: 공통 규칙이 없는 상태에서 페이지가 늘어날 수록 전체 시스템의 불안정성이 심화됨.

 

 

3. DESIGN.md 기반의 디자인 기준 수립하기

Binance 금융 플랫폼의 DESIGN.md를 바탕으로 TryAngle 클라이언트의 분산되어있던 디자인 시스템을 모아 TryAngle의 DESIGN.md로 통합했다.

3-1. design system source

추가적으로 반영한 내용은 아래와 같다.

• 클라이언트의 Pretendard 폰트를 도입하고 어드민에서 데이터 노출을 위해 특수하게 사용중인 Roboto 폰트를 공통 폰트로 삼았다.
• 구두로 전달한 Material 3 Icons를 표준 아이콘으로 지정했다.

 

3-2. DESIGN.md 시각화

공통 디자인 기준은 DESIGN.md, 공통 스타일시트는 assets/admin.css 를 참고

디자인 시스템 상세 기준 바로가기

 

 

4. 적용 결과

4-1. 적용 화면 비교