프론트엔드
700여개의 아이콘을 하나로 묶는 법 - 뱅샐 아이콘 개편기 2편
두줄요약
700여 개 아이콘을 일관되게 관리하기 위한 컬러 팔레트와 13가지 조형 규칙을 정립했습니다. 정수 좌표, 선 두께, 명도 기준으로 화면 가독성과 구현 완성도를 높였습니다.
문제 상황
- 아웃라인 제거 이후 700여 개 아이콘의 일관된 품질과 예외 없는 관리 기준 필요
- 디자이너 개인 감각에 의존한 컬러·형태 결정 방식의 확장성 한계
해결 방법
- UI 시스템 아이콘용 브랜드 컬러와 자연물 묘사용 Illustration Palette 분리
- 형광 그린을 보완한 Basil 도입, Mustard의 명도별 Hue Shifting과 채도 기준 적용
- 형태·부피감·곡률·컬러 수·상태 배지·메타포를 포함한 13가지 조형 규칙 수립
구조와 흐름
- 배지 영역을 컷아웃해 메인 형태와 상태 표시의 충돌 방지
- Good 상태의 반짝임 배지와 Bad 상태의 세로선 3개로 상태 메타포 고정
- 정수 좌표와 최소 선 두께, 외곽 명도 기준으로 화면 렌더링과 가독성 관리
성능/운영 포인트
- 700여 개 Figma 레이어의 소수점 좌표를 정수 픽셀로 정비
- 공통 규칙 기반의 아이콘 자산 관리로 디자인 시스템의 재사용성과 일관성 확보
