안녕하세요. 뱅크샐러드 브랜드 디자이너 홍승재예요.

초행길을 걸을 때, 우리는 생각보다 글자를 많이 읽지 않는다는 사실, 알고 계셨나요?

저 멀리 보이는 지하철 표지판, 초록색으로 그려진 비상구, 화장실을 알리는 작은 그림처럼 단순한 기호들에 의지해 발걸음을 옮기죠. 낯선 곳에서도 우리가 헤매지 않을 수 있는 건, 둥글게 꺾인 화살표 하나가 백 마디 말보다 길을 더 잘 알려주기 때문이에요.

스마트폰 속 앱도 하나의 거대한 도시와 같아요. 그 안에서 사용자가 원하는 목적지까지 무사히 닿도록 돕는 표지판이 바로 ‘아이콘’ 이죠. 뱅크샐러드 앱을 열면, 빼곡한 숫자들 사이에서 시선을 안내하는 수많은 아이콘을 볼 수 있어요.

그런데 이번에, 저희는 700개가 넘는 이 아이콘들을 처음부터 다시 그렸어요. 너무 익숙해서 의심조차 하지 않았던 형태 하나가 생각보다 많은 문제들을 안고 있었거든요. 바로 아이콘의 형태를 감싸고, 때로는 요소 사이사이를 어지럽게 가로지르던 외곽선(Outline) 이었어요.

앞으로 세 편의 글에 걸쳐, 그 당연했던 선들이 어떤 불편함을 만들고 있었는지, 그리고 이를 해결하기 위해 아이콘을 전면 개편하고, 시스템을 새로 세우기까지 어떤 고민을 거쳤는지 나눠보려 해요.

첫 번째 이야기는 ‘우리는 왜 익숙한 스타일을 버려야 했을까’ 라는 질문에서 시작할게요.

---

아웃라인이 만든 뜻밖의 문제들

기존 뱅크샐러드 아이콘의 가장 큰 시각적 특징은 외곽을 감싸는 두꺼운 아웃라인(Outline) 이었어요. 하나씩 떼어놓고 보면 일러스트 성격이 강해 꽤 귀엽고 독특한 인상을 주기도 하고, 아이콘에 들어가는 요소들을 구분해주는 역할을 하기도 했죠.

하지만 이 아웃라인은 아이콘의 겉 테두리에만 머물지 않았어요. 형태 안쪽까지 깊숙이 들어와 요소 사이사이를 가로지르며 영역을 나누고 있었거든요. 이 아이콘들이 실제 프로덕트 환경에 올라가자, 여러가지 아쉬운 점들이 수면 위로 떠오르기 시작했어요.

• 작은 화면에서의 뭉개짐: 모바일 앱에서는 16x16, 24x24 등 아주 작은 사이즈로 아이콘이 보여요. 좁은 면적 안에서 덩어리를 감싸는 외곽선은 물론, 요소 사이를 가로지르는 내부선까지 복잡하게 얽히다 보니 여백이 사라지고 강한 시각적 노이즈가 생겼죠.
• 모호해진 규칙과 통일성: 아이콘 내부에 들어가는 작은 오브젝트(동전 안의 숫자, 스마트폰 화면 등)에는 물리적으로 선을 넣을 공간이 부족했어요. 그러다 보니 작은 요소에는 임의로 선을 생략하는 경우가 잦아졌고요. 시간이 지날수록 어디에는 선을 넣고 어디에서는 빼야 하는지 기준이 모호해졌고, 하나의 아이콘 세트 안에서 통일성이 조금씩 어긋나기 시작했어요.

브랜드 정체성과 사용성 사이에서

이 문제를 풀기 위해 BX팀은 “아이콘 전체에서 아웃라인을 완전히 빼고, 형태의 명료함을 높이자” 는 결론에 다다랐어요.

하지만 브랜드 디자이너로서 고유한 시각적 자산을 포기하는 건 결코 쉬운 결정이 아니었어요. 팀 안에서도 자연스레 우려의 목소리가 나왔어요.

오랜 시간 뱅크샐러드의 그래픽 문법으로 자리 잡은 아웃라인을 덜어내는 건, 자칫 브랜드의 정체성을 잃는 리스크처럼 느껴졌거든요. 시각적인 독창성과 프로덕트의 사용성 사이에서 깊은 고민에 빠졌어요.

---

시안 테스트가 알려준 것

“정말 아웃라인을 지우는 게 맞을까?” 이 질문에 답하기 위해 가장 직관적인 방법을 택했어요. 아이콘만 따로 떼어놓고 보는 대신, 실제 앱 화면에 두 가지 버전을 얹어 나란히 비교해 보는 A/B 시안 테스트 였죠. 자산 내역이 빼곡하게 모여 있는 ‘홈 탭’과 복잡한 정보가 많은 ‘건강 탭’을 기준으로 화면을 구성했어요.

결과는 꽤 명확했어요.

아이콘을 대지 위에 단독으로 둘 때와 실제 앱 화면에 올렸을 때의 느낌이 확연히 달랐거든요. 하나만 떼어놓고 보면 아웃라인이 주는 그래픽적인 특징이 도드라졌지만, 작은 모바일 화면에 아이콘 10개, 20개가 나란히 놓이는 실제 UI에서는 그 특징이 오히려 단점이 됐어요.

좁은 간격 안에서 두꺼운 외곽선들이 겹치며 화면이 복잡해지고, 정작 사용자가 가장 먼저 읽어야 할 본질적인 데이터(금액, 건강 수치)로 향해야 할 시선을 아이콘이 빼앗고 있었어요.

반면 선을 지운 버전은 데이터 옆에서 묵묵히 조연 역할을 해냈어요. 화면의 정보 위계를 해치지 않으면서도, 사용자가 메뉴를 탐색할 때 헷갈리지 않도록 정확한 이정표가 되어주었고요.

아이콘의 존재 이유는 결국

이 테스트를 기점으로 논의는 아주 명쾌하게 정리됐어요. 아이콘의 존재 이유는 결국 사용자라는 것이요.

아이콘은 갤러리에 걸어두는 작품이 아니라, 사용자가 원하는 기능과 정보를 빠르고 정확하게 찾도록 돕는 표지판이에요. 아무리 독창적인 스타일이라도 사용자가 형태를 알아보고 데이터를 읽는 데 방해가 된다면, 프로덕트 디자인으로서는 아쉬울 수밖에 없죠. 그래서 브랜드의 시각적 특징을 고집하기보다, 사용자에게 실질적인 이득이 되는 명료함(Clarity) 을 최우선 가치로 삼기로 했어요.

---

익숙함을 덜어내고 얻은 것들

방향이 정해진 뒤에는 700개가 넘는 아이콘에서 일괄적으로 선을 지우고, 순수하게 면의 비율에 집중하는 작업이 이어졌어요. 익숙했던 선을 지우고 형태를 가다듬자 기대 이상의 결과가 나타났죠.

우선 직관성이 눈에 띄게 높아졌어요. 복잡한 선이 사라지니 아주 작은 크기에서도 실루엣이 또렷하게 읽혔거든요.

아이콘을 제작할 때 요소마다 선을 넣을지 말지를 두고 생기던 예외 케이스가 사라지면서 시각적인 통일성도 단단해졌어요. 무엇보다 아이콘의 노이즈가 줄자 UI 전반의 피로도가 낮아졌고, 사용자가 데이터와 텍스트에 더 편안하게 집중할 수 있는 환경이 만들어졌죠.

그렇다면 아웃라인이라는 그래픽 장치를 덜어냈을 때, 우려했던 대로 뱅크샐러드만의 독창성마저 사라졌을까요?

결과는 오히려 반대였어요. 스타일을 보여주기 위해 얹었던 선을 거두어내자, 오히려 아이콘 고유의 비율과 실루엣, 그리고 조형적인 완성도에 온전히 집중할 수 있었거든요. 선이라는 장치에 기대지 않고 형태의 본질을 정교하게 다듬어 나가는 과정에서, 아이러니하게도 뱅크샐러드만의 인상과 감각을 담은 더 명확하고 완성도 높은 아이콘 세트가 만들어지기 시작했어요.

---

마치며

하지만 이건 시작일 뿐이었어요. 선을 지운 자리를 무엇으로 채울지, 700개가 넘는 아이콘을 어떤 기준으로 다시 하나로 묶을지, 더 큰 숙제가 남아있었거든요.

다음 2편에서는 선을 지운 자리에 어떻게 새로운 컬러 시스템을 입히고 조형 규칙을 세워 나갔는지, 그 과정을 자세히 이야기해 볼게요.