프론트엔드
VODA 디자인 시스템 2
두줄요약
VODA 디자인 시스템의 브랜드·시스템 컬러와 데이터 시각화용 팔레트 구성 기준을 소개했습니다.\n재사용 가능한 UI 컴포넌트와 팀 공통 규칙으로 일관성과 협업 효율을 높이는 방법을 설명합니다.
구조와 흐름
- 브랜드 아이덴티티와 유연한 활용을 위한 명암 10단계 컬러 체계
- 정보 계층·텍스트·구분선용 Gray Scale, 브랜드용 Primary·Secondary, 상태 전달용 System Colors 구분
- 데이터 시각화용 팔레트와 Heatmap 그라데이션 컬러 추가 구성
선택 이유
- 유사 서비스 및 기존 AIVORY와 구분되는 독자적 Primary Color 선정
- Primary Color와의 조화 및 그래프 요소 식별을 고려한 오렌지·올리브 그린 Secondary Colors 선정
- Danger·Warning·Success·Info 상태의 직관적 전달을 위한 Red·Yellow·Green·Blue 계열 적용
주의할 점
- 과도한 컬러 사용에 따른 브랜드 아이덴티티 및 사용자 경험 일관성 약화
- 시스템 상태 컬러 단독 사용 대신 아이콘·텍스트 병행
- 디자인 시스템의 절대적 가이드화보다 프로젝트 상황에 따른 수정과 유연한 적용
적용해볼 점
- 서비스 전반에 두 번 이상 등장하는 요소의 UI 컴포넌트 등록과 재사용
- 컴포넌트를 단순 리소스가 아닌 팀원 간 사용 규칙과 약속으로 문서화
- 4의 배수 및 Keyline 기반 아이콘 제작으로 크기와 비율의 일관성 확보
