프론트엔드
사용자를 위한 아이콘이란 무엇일까? - 뱅샐 아이콘 개편기 3편
두줄요약
아이콘의 직관성을 디자인 리뷰로 보완하고, AI·MCP로 피그마 검색 메타데이터를 자동화했습니다. 일괄 배포 후 모니터링과 핫픽스로 700여 개 아이콘 전환 리스크를 관리했습니다.
문제 상황
- 700여 개 아이콘의 조형 규칙 적용 이후에도 모바일 환경에서의 즉각적 인지와 피그마 검색 편의성, 앱 배포 검증 과제
- 영문 파일명 기반 에셋 관리로 인한 동료 디자이너의 아이콘 탐색 비용
해결 방법
- 디자인 리뷰를 통한 휠체어 아이콘의 정면형에서 측면형 전환과 인지 방해 요소 보정
- MCP로 피그마와 AI를 연결해 아이콘 이미지·이름 기반 한글 연관 검색어 생성
- Sheet Sync로 검색어 시트 데이터를 아이콘 프레임에 일괄 동기화
성능/운영 포인트
- 기존 파일명 유지 후 700개 아이콘 일괄 덮어쓰기 배포
- 배포 직후 주요 화면 라이브 모니터링과 우선순위 기반 핫픽스 진행
- 완벽한 사전 검수보다 리스크를 작게 나눈 신속한 전환 전략
적용해볼 점
- 아이콘의 상징성보다 작은 화면에서의 즉각적 식별성과 인지적 편안함 우선
- 디자인 자산 메타데이터 생성·동기화 자동화로 내부 작업 경험 개선
