700여개의 아이콘을 하나로 묶는 법 - 뱅샐 아이콘 개편기 2편

30 Oct, 2026

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

앞선 1편에서는 뱅크샐러드 아이콘 2.0 프로젝트의 첫 단추였던 ‘아웃라인 제거’ 에 대해 이야기했어요. 브랜드의 기존 관성을 깨고, 사용자의 직관적인 인지를 위해 선을 지우고 면에 집중하기로 한 과정이었죠.

하지만 합의를 마치고 나니 훨씬 더 큰 산이 기다리고 있었어요. 바로 700개가 넘는 방대한 아이콘을 단 하나의 오차도 없이 일관된 퀄리티로 관리할 ‘디자인 시스템’ 을 세우는 일이었죠.

“예쁘고 심플하게 그리자”는 모호한 약속만으로는 또다시 예외 케이스들이 생겨날 게 뻔했거든요. 결국 디자이너 개개인의 감각에 의존하던 영역을, 누구나 따를 수 있는 명확한 수치와 규칙으로 바꿔야 했어요.

이번 글에서는 흩어져 있던 700개가 넘는 아이콘을 하나로 묶어준 컬러 팔레트의 변화, 그리고 13가지 조형 규칙을 세워간 과정을 이야기해 볼게요.

가장 먼저, 그래픽 컬러 팔레트 정비하기

아이콘을 전부 손보는 김에 BX팀에서 쓰는 컬러 팔레트도 함께 도마 위에 올렸어요. 나중에 따로 손보려면 두 배로 어려워질 테니, 지금 한꺼번에 정비하는 게 맞다고 생각했거든요. 이 과정에서 두 가지 고민을 마주했어요.

자연스러운 인지를 돕는 컬러, 바질(Basil)의 탄생

뱅크샐러드가 자산 관리를 넘어 유전자 검사, 건강과 같은 헬스케어 영역으로도 서비스를 넓히면서, 앱 내에 식재료나 식물 등 ‘자연물’을 그릴 일이 훌쩍 많아졌어요. 여기서 고민이 하나 생겼죠. 뱅크샐러드의 메인 그린 컬러는 특유의 아주 쨍한 ‘형광빛’을 띠고 있거든요.

“브랜드 정체성을 위해 무조건 이 형광 그린을 고집하는 게 맞을까?” “하지만 형광색 사과나 채소는 사용자에게 이질감을 주지 않을까?” 우리는 ‘아이콘은 사용자를 위한 표지판’ 이라는 1편의 결론을 다시 꺼냈어요.

화살표나 체크 마크 같은 UI 시스템 아이콘에는 브랜드 컬러를 확실히 쓰되, 일러스트 묘사를 위한 확장 팔레트(Illustration Palette)를 따로 두기로 했어요. 그렇게 기존 형광 그린에 옐로우를 아주 미세하게 섞은 ‘바질(Basil)’ 컬러가 탄생했어요. 이 색상 덕분에 금융 앱 특유의 차가운 톤을 덜어내고, 친근하고 따뜻한 라이프스타일 서비스를 아이콘에 훨씬 자연스럽게 담아낼 수 있었어요.

수치가 아닌 눈을 믿다: 머스타드 컬러의 시각 보정

기존에 쓰던 머스타드(Mustard) 계열은 어두운 환경에 놓이거나 명도가 낮아지면 색이 칙칙한 ‘진흙색’으로 변해버리는 문제가 있었어요. 노란색은 빛의 밝기 변화에 가장 취약한 색상이거든요. 노란색에 검정을 섞으면 올리브빛으로 탁해지기 때문에, 기계적인 수치에 맞춰 명도만 낮추는 방법으로는 생동감을 유지할 수 없었어요.

그래서 숫자에만 기대지 않고, 사람의 눈에 맞춰 색을 미세하게 조정하는 Hue Shifting(색상 이동) 원리를 썼어요.

사람의 눈은 빛이 어두워지면 색상도 다르게 인식하는 착시를 일으키거든요. 이 착시를 보완하기 위해, 머스타드 색이 어두워질 때 단순히 명도만 낮추는 대신 색상(Hue)을 주황색 쪽으로 살짝 틀어주었어요. 색이 흐리멍덩해지지 않도록 채도도 일정 수준 이상으로 꽉 잡아두었고요.

수학적인 정답 대신 사람의 눈에 맞춘 시각적 정답을 찾아내니, 머스타드 컬러는 어떤 배경에서도 탁해지지 않고 따뜻한 황금빛을 유지하게 되었어요. 여기에 그동안 빠져 있던 로고의 핵심 컬러(Pink, Green, Blue, Sky)까지 팔레트에 넣어서, 프로덕트와 브랜드 간의 연결 고리를 단단하게 묶을 수 있었죠.

700개를 하나로 묶어준 시스템 규칙

컬러를 다듬은 뒤에는, 700개의 아이콘을 마치 한 사람이 그린 것처럼 맞추기 위해 엄격한 가이드라인을 세웠어요. 형태의 단순함을 넘어, 사용자의 직관과 엔지니어링 관점의 완성도까지 고려해 만든 약속들이에요. 여러 규칙 중 대표적인 것들을 소개할게요.

1. 시각적 노이즈를 줄이고 형태 맞추기

형태와 부피감 일치: 원, 사각형 등 각기 다른 도형도 눈으로 봤을 때 같은 덩어리감을 갖도록 시각 보정을 거쳤어요. 특히 방패나 교통수단처럼 뼈대가 같은 상징물들은 제각각이던 디테일을 덜어내고 하나의 외곽 실루엣(프레임)으로 깔끔하게 통합했어요.
묘사 덜어내기: 한 아이콘에 들어가는 컬러 수를 제한하고 둥근 곡률(Radius)을 동일하게 맞춰, 모든 아이콘이 통일되고 깔끔한 인상을 주도록 만들었어요.

2. 누구나 한눈에 이해할 수 있도록

상태 표시 배지와 컷아웃(Cut-out): 아이콘에 상태를 표시하는 배지가 붙을 때 형태가 뭉개지지 않도록, 배지 형태를 따라 메인 아이콘에 일정한 여백을 두고 잘라내는 공통 규칙을 세웠어요.
메타포의 시스템화: 건강 상태가 ‘Good’일 때는 반짝이는 배지를, ‘Bad’일 때는 만화적 효과를 주는 세로 선 3개를 고정으로 썼어요. 따로 배우지 않아도 의미를 바로 알 수 있도록요.

3. 어떤 환경에서도 또렷하게 읽히도록

정수 기반 설계와 선 두께: 디바이스 화면에서 미세하게 깨지는 현상을 막기 위해 모든 도형의 좌표값을 ‘정수’로 떨어지게 맞추고, 아이콘 안에 얇은 선이 들어갈 때는 최소 두께를 보장하도록 규칙을 정했어요.
명도 접근성: 어떤 배경색 위에서도 아이콘이 묻히지 않도록, 아이콘 외곽 부분의 최소·최대 밝기 기준을 꼼꼼하게 마련했어요.