프론트엔드
사용자를 위한 아이콘이란 무엇일까? - 뱅샐 아이콘 개편기 3편
두줄요약
700여 개 아이콘의 직관성을 리뷰하고, AI·MCP로 피그마 검색 메타데이터를 자동화했습니다. 일괄 배포 뒤 모니터링과 핫픽스로 아이콘 시스템 전환 리스크를 관리했습니다.
문제 상황
- 규칙 기반으로 제작한 700여 개 아이콘의 직관성 검증 필요
- 영어 파일명으로 인한 피그마 내 아이콘 탐색 비효율
- 기존 파일명 덮어쓰기 방식에서 신·구 아이콘 버전 식별 곤란
해결 방법
- 휠체어 아이콘을 정면형에서 측면형으로 수정해 작은 모바일 화면의 즉시 인지 강화
- MCP로 피그마 아이콘 이미지·이름을 AI에 전달하고 한글 연관 검색어 생성
- Sheet Sync로 키워드 메타데이터를 아이콘 프레임에 일괄 동기화
성능/운영 포인트
- 아이콘별 최대 7개 검색어, 최대 4,900개 키워드 자동 생성으로 내부 탐색 경험 개선
- 700개 아이콘 일괄 배포 후 주요 화면 실시간 점검과 우선순위 기반 핫픽스 진행
- 완전한 사전 검수보다 리스크를 작게 나눈 모니터링·순차 수정 전략
적용해볼 점
- 아이콘의 상징성보다 사용자 인지와 UI 내 구분 가능성 우선
- 디자인 자산의 검색 메타데이터 자동화와 디자인·개발 조직 간 배포 협업
