피드로 돌아가기
Stop Picking Dashboard Icons by Keyword
Dev.toDev.to
Frontend

Keyword 기반 선택 탈피를 통한 SaaS Dashboard 시각적 언어 체계 구축

Stop Picking Dashboard Icons by Keyword

Svg/icons2026년 6월 17일11beginner

Context

단순 키워드 검색 기반의 Icon 선택으로 인한 의미 중복 및 시각적 노이즈 발생. 동일한 메타포가 다수의 기능을 대변함에 따라 사용자의 인지 부하가 증가하고 Interface 스캔 속도가 저하되는 한계 노출.

Technical Solution

  • Keyword 매칭 방식에서 Role-based Classification 설계 방식으로 전환
  • Navigation, Status, Action, Object, Empty state 등 5가지 Role 정의를 통한 의미론적 분리
  • 16px 이하의 고밀도 Table 환경에서도 식별 가능한 시각적 명확성 검증 프로세스 도입
  • 기능 명칭의 모호함을 Icon 검색 단계에서 발견하고 이를 인터페이스 언어 정제 과정으로 활용하는 피드백 루프 구축
  • 단순 장식적 요소가 아닌 Product Language의 일부로서 Icon의 역할 정의 및 시각적 어휘집(Visual Vocabulary) 구성

- Icon 선택 전 '이 아이콘이 화면 내에서 수행하는 역할(Role)은 무엇인가'를 먼저 정의 - 인접한 메뉴나 기능 간에 시각적 대비(Contrast)가 확보되었는지 검토 - 16px 등 실제 렌더링 사이즈에서 가독성 및 식별력 테스트 수행 - 동일한 Icon이 제품 내에서 두 가지 이상의 서로 다른 의미로 사용되는지 전수 조사

원문 읽기