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

안녕하세요. 뱅크샐러드 브랜드 디자이너 홍승재예요. 초행길을 걸을 때, 우리는 생각보다 글자를 많이 읽지 않는다는 사실, 알고 계셨나요? 저 멀리 보이는 지하철 표지판, 초록색으로 그려진 비상구, 화장실을 알리는 작은 그림처럼 단순한 기호들에 의지해 발걸음을 옮기죠. 낯선 곳에서도 우리가 헤매지 않을 수 있는 건, 둥글게 꺾인 화살표 하나가 백 마디 말보다 길을 더 잘 알려주기 때문이에요. 스마트폰 속 앱도 하나의 거대한 도시와 같아요. 그 안에서 사용자가 원하는 목적지까지 무사히 닿도록 돕는 표지판이 바로 ‘아이콘’ 이죠. 뱅크샐러드 앱을 열면, 빼곡한 숫자들 사이에서 시선을 안내하는 수많은 아이콘을 볼 수 있어요. 그런데 이번에, 저희는 700개가 넘는 이 아이콘들을 처음부터 다시 그렸어요. 너무 익숙해서 의심조차 하지 않았던 형태 하나가 생각보다 많은 문제들을 안고 있었거든요. 바로 아이콘의 형태를 감싸고, 때로는 요소 사이사이를 어지럽게 가로지르던 외곽선(Outline) 이었어요. 앞으로 세 편의 글에 걸쳐, 그 당연했던 선들이 어떤 불편함을 만들고 있었는지, 그리고 이를 해결하기 위해 아이콘을 전면 개편하고, 시스템을 새로 세우기까지 어떤 고민을 거쳤는지 나눠보려 해요. 첫 번째 이야기는 ‘우리는 왜 익숙한 스타일을 버려야 했을까’ 라는 질문에서 시작할게요. 아웃라인이 만든 뜻밖의 문제들 기존 뱅크샐러드 아이콘의 가장 큰 시각적 특징은 외곽을 감싸는 두꺼운 아웃라인(Outline) 이었어요. 하나씩 떼어놓고 보면 일러스트 성격이 강해 꽤 귀엽고 독특한 인상을 주기도 하고, 아이콘에 들어가는 요소들을 구분해주는 역할을 하기도 했죠. 하지만 이 아웃라인은 아이콘의 겉 테두리에만 머물지 않았어요. 형태 안쪽까지 깊숙이 들어와 요소 사이사이를 가로지르며 영역을 나누고 있었거든요. 이 아이콘들이 실제 프로덕트 환경에 올라가자, 여러가지 아쉬운 점들이 수면 위로 떠오르기 시작했어요. 작은 화면에서의 뭉개짐: 모바일 앱에서는 16x16, 24x24 등 아주 작은 사이즈로 아이콘이 보여요. 좁은 면적 안에서 덩어리를 감싸는 외곽선은 물론, 요소 사이를 가로지르는 내부선까지 복잡하게 얽히다 보니 여백이 사라지고 강한 시각적 노이즈가 생겼죠. 모호해진 규칙과 통일성: 아이콘 내부에 들어가는 작은 오브젝트(동전 안의 숫자, 스마트폰 화면 등)에는 물리적으로 선을 넣을 공간이 부족했어요. 그러다 보니 작은 요소에는 임의로 ...