프론트엔드
사용자 모르게 리멤버 UI icon 개선하기
두줄요약
리브랜딩 후 사용자에게 오류처럼 보이던 UI icon을 폰트 기반 디자인과 명확한 가이드로 개선했습니다. 그 결과 VOC가 감소하고 아이콘 제작 리소스도 크게 줄었습니다.
문제 상황
- 리브랜딩 이후 적용된 Filled 중심 UI icon에서 Outline과 혼재 시 밸런스 불일치 발생
- -3° 기울임과 모서리 깎임이 사용자에게 오류나 찌그러짐으로 인지되며 VOC 증가
- 복잡한 제작 절차로 새 아이콘 생성과 적용에 많은 리소스 소요
원인 분석
- 아이콘 스타일이 폰트와 충분히 조화되지 않아 시각적 일관성 부족
- 기울임과 모서리 처리 같은 브랜드 표현 요소가 사용성 측면에서 오해 유발
- Figma, Illustrator, SVG, 디자인 시스템 등록을 거치는 다단계 작업 흐름
해결 방법
- 서비스에 적용된 Pretendard 폰트의 시각적 특징을 기준으로 아이콘 재설계
- 32px 그리드, 4px 패딩, 45° 각도, stroke 두께 등 명확한 가이드 문서화
- 템플릿 파일 제공으로 Figma 안에서 빠르게 제작 가능한 프로세스 정비
적용해볼 점
- UI 요소의 브랜드성보다 사용성 저해 여부를 우선 점검
- 폰트와 아이콘의 시각적 균형을 함께 설계
- 가이드와 템플릿으로 제작 비용을 줄이고 일관성을 확보