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

안녕하세요. 뱅크샐러드 브랜드 디자이너 홍승재예요. 앞선 1편에서는 뱅크샐러드 아이콘 2.0 프로젝트의 첫 단추였던 ‘아웃라인 제거’ 에 대해 이야기했어요. 브랜드의 기존 관성을 깨고, 사용자의 직관적인 인지를 위해 선을 지우고 면에 집중하기로 한 과정이었죠. 하지만 합의를 마치고 나니 훨씬 더 큰 산이 기다리고 있었어요. 바로 700개가 넘는 방대한 아이콘을 단 하나의 오차도 없이 일관된 퀄리티로 관리할 ‘디자인 시스템’ 을 세우는 일이었죠. “예쁘고 심플하게 그리자”는 모호한 약속만으로는 또다시 예외 케이스들이 생겨날 게 뻔했거든요. 결국 디자이너 개개인의 감각에 의존하던 영역을, 누구나 따를 수 있는 명확한 수치와 규칙으로 바꿔야 했어요. 이번 글에서는 흩어져 있던 700개가 넘는 아이콘을 하나로 묶어준 컬러 팔레트의 변화, 그리고 13가지 조형 규칙을 세워간 과정을 이야기해 볼게요. 가장 먼저, 그래픽 컬러 팔레트 정비하기 아이콘을 전부 손보는 김에 BX팀에서 쓰는 컬러 팔레트도 함께 도마 위에 올렸어요. 나중에 따로 손보려면 두 배로 어려워질 테니, 지금 한꺼번에 정비하는 게 맞다고 생각했거든요. 이 과정에서 두 가지 고민을 마주했어요. 자연스러운 인지를 돕는 컬러, 바질(Basil)의 탄생 뱅크샐러드가 자산 관리를 넘어 유전자 검사, 건강과 같은 헬스케어 영역으로도 서비스를 넓히면서, 앱 내에 식재료나 식물 등 ‘자연물’을 그릴 일이 훌쩍 많아졌어요. 여기서 고민이 하나 생겼죠. 뱅크샐러드의 메인 그린 컬러는 특유의 아주 쨍한 ‘형광빛’을 띠고 있거든요. “브랜드 정체성을 위해 무조건 이 형광 그린을 고집하는 게 맞을까?” “하지만 형광색 사과나 채소는 사용자에게 이질감을 주지 않을까?” 우리는 ‘아이콘은 사용자를 위한 표지판’ 이라는 1편의 결론을 다시 꺼냈어요. 화살표나 체크 마크 같은 UI 시스템 아이콘에는 브랜드 컬러를 확실히 쓰되, 일러스트 묘사를 위한 확장 팔레트(Illustration Palette)를 따로 두기로 했어요. 그렇게 기존 형광 그린에 옐로우를 아주 미세하게 섞은 ‘바질(Basil)’ 컬러가 탄생했어요. 이 색상 덕분에 금융 앱 특유의 차가운 톤을 덜어내고, 친근하고 따뜻한 라이프스타일 서비스를 아이콘에 훨씬 자연스럽게 담아낼 수 있었어요. 수치가 아닌 눈을 믿다: 머스타드 컬러의 시각 보정 기존에 쓰던 머스타드(Mustard) 계열은 어두운 환경에 놓이거나 명도가 낮아지면 ...