기타
선을 지우고 명료함을 채우다 - 뱅샐 아이콘 개편기 1편
두줄요약
모바일 UI에서 아웃라인 아이콘이 만드는 노이즈와 규칙 불일치를 분석했습니다. 실제 화면 A/B 비교를 바탕으로 700여 개 아이콘을 면 중심으로 개편했습니다.
문제 상황
- 16×16·24×24 모바일 화면에서 두꺼운 외곽선과 내부선이 겹치며 발생한 시각적 노이즈
- 작은 오브젝트의 선 생략 예외 증가로 인한 아이콘 세트 규칙과 통일성 약화
- 아이콘이 데이터·텍스트보다 앞서며 정보 위계를 방해하는 UI
해결 방법
- 실제 홈 탭과 건강 탭에 아웃라인 유무의 두 시안을 적용한 A/B 비교
- 700여 개 아이콘에서 외곽선과 내부선을 제거하고 면의 비율·실루엣 중심으로 재구성
- 독창적 그래픽 스타일보다 사용자 탐색과 데이터 가독성을 우선하는 방향 설정
성능/운영 포인트
- 작은 크기에서도 또렷한 실루엣으로 직관성 향상
- 선 적용 여부의 예외 케이스 제거를 통한 제작 규칙 일관성 확보
- 아이콘 노이즈 감소에 따른 UI 피로도 완화와 데이터·텍스트 집중 환경 조성
적용해볼 점
- 아이콘 단독 시안이 아닌 실제 정보 밀도의 프로덕트 화면에서 스타일 검증
- 브랜드 정체성을 장식 요소보다 형태의 비율과 조형 완성도로 재정의
