프론트엔드
VODA 디자인 시스템 1
두줄요약
VODA의 일관된 서비스 경험을 위해 디자인 시스템 구축 기준을 정리했습니다. 타이포그래피와 그리드·간격 규칙을 중심으로 설계 방식을 소개합니다.
문제 상황
- 여러 직군이 참여하는 VODA 프로젝트에서 브랜드 해석과 화면 설계의 불일치 가능성
- 폰트·간격·색상·UI 요소의 개별 적용으로 인한 디자인 시간과 소통 비용 증가
선택 이유
- 공통 타이포그래피·그리드·간격·색상·UI 구성요소의 체계화
- 담당자 변경이나 디자인팀 확장 상황에서도 서비스 일관성 유지
구조와 흐름
- 웹 환경에 맞춘 px 단위와 웹 폰트 중심의 타이포그래피 기준
- Noto Sans KR·Robot, 본문 14px, Header 4종·Text 5종의 정보 위계
- 최소 화면 1280px 지원, 12 컬럼 그리드와 4의 배수 기반 6단계 간격 체계
주의할 점
- 행간은 텍스트 양과 폰트 크기를 고려해 폰트 크기의 1.7~1.75배 범위 검토
- 그리드는 UI 배치 기준으로 활용하되 상황에 따른 유연한 적용
- 정의한 타이포그래피의 Asset 등록과 재사용
