Velopers
목록 보기
선을 지우고 명료함을 채우다 - 뱅샐 아이콘 개편기 1편
프론트엔드

선을 지우고 명료함을 채우다 - 뱅샐 아이콘 개편기 1편

뱅크샐러드
뱅크샐러드2026년 10월 30일

두줄요약

모바일 UI에서 외곽선 아이콘이 만드는 노이즈와 규칙 불일치를 분석했습니다. 실제 화면 A/B 테스트를 바탕으로 700여 개 아이콘을 면 중심으로 개편했습니다.

문제 상황

  • 16×16·24×24 모바일 화면에서 두꺼운 외곽선과 내부선이 만든 시각적 노이즈
  • 작은 오브젝트의 선 생략 반복으로 흐려진 아이콘 세트의 일관성

선택 이유

  • 실제 홈·건강 탭 A/B 시안 비교에서 아웃라인 버전의 정보 위계 저해 확인
  • 데이터와 텍스트 탐색을 돕는 표지판으로서 아이콘 역할 우선

해결 방법

  • 700여 개 아이콘의 아웃라인 제거와 면 비율·실루엣 중심 재구성
  • 선 적용 여부의 예외 규칙 제거를 통한 제작 기준 단순화

성능/운영 포인트

  • 작은 크기에서도 또렷한 형태와 높아진 직관성
  • UI 피로도 감소와 데이터·텍스트 집중 환경 확보

이 글과 연관된 채용

뱅크샐러드 계열사 채용2건

채용 사이트에서 전체 보기

다음 읽기

#UI/UX 주제를 이어서 읽기

선을 지우고 명료함을 채우다 - 뱅샐 아이콘 개편기 1편

모바일 UI에서 아웃라인 아이콘이 만드는 노이즈와 규칙 불일치를 분석했습니다. 실제 화면 A/B 비교를 바탕으로 700여 개 아이콘을 면 중심으로 개편했습니다.

뱅크샐러드
뱅크샐러드
기타
쿠팡 파트너스

광고

개발자를 위한 서적을 확인해 보세요

이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

#개발서적#프로그래밍

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...