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

앞선 1, 2편에서는 기존 아이콘의 아웃라인을 과감하게 걷어내고, 색채학과 조형 규칙을 세워 뱅크샐러드만의 새로운 시각적 언어를 만드는 과정을 소개했어요.

하지만 700개가 넘는 아이콘을 규칙에 맞춰 그려내는 것만으로 디자인 시스템이 완성되진 않더라고요. 이 방대한 자산이 프로덕트 안에서 제 역할을 다하려면 실제 사용자에게 직관적으로 읽혀야 하고, 동료 디자이너들이 쉽게 찾아 쓸 수 있어야 하며, 개발 환경에도 무사히 얹어져야 했거든요.

이번 글에서는 아이콘을 실제 프로덕트에 안착시키며 무엇을 배웠는지, 그리고 그 배움이 동료와의 협업과 워크플로우 개선으로 어떻게 이어졌는지 이야기해 볼게요.

---

좋은 의도와 직관성 사이에서

13가지 규칙을 700개에 일괄 적용하다 보니, 가끔은 규칙에 갇혀 본질을 놓치는 순간들이 생기곤 했어요. 이때 BX 디자인 팀 동료인 문경님과 하나씩 아이콘을 열어보며 깊이 있게 진행했던 디자인 리뷰는 제가 놓치고 있던 부분들을 차분하게 짚어볼 수 있는 소중한 시간이었어요.

그 과정 속에서 치열하게 고민했던 아이콘 중 하나는 ‘휠체어 아이콘’ 이었어요.

처음에는 휠체어를 탄 사람을 정면으로 그렸어요. 휠체어라는 수단보다는 그곳에 앉은 ‘사람’이 먼저 보이길 바라는, 나름의 포용적 디자인(Inclusive Design) 의도였죠. 하지만 리뷰를 진행하며 아주 본질적인 질문과 마주했어요.

실제로 좁은 모바일 화면에서는 정면 모습만으로 일반 의자에 앉은 사람인지, 휠체어에 앉은 사람인지 단번에 구분하기 어려웠어요. 결국 아이콘에 담고 싶었던 숨은 의미보다, ‘누구나 헷갈리지 않게 돕는다’는 UI의 최우선 목적에 집중해, 형태를 즉각 파악할 수 있는 측면 모습으로 전면 수정했어요.

디자인의 상징성보다 사용자의 ‘인지적 편안함’이 먼저라는 것. 아이콘은 예술 작품이 아니라 직관적인 ‘기호’여야 한다는 것. 프로덕트 디자인의 기준을 다시 한번 확인한 계기였죠.

이 밖에도 기하학적 규칙에 얽매여 본래의 형태가 어색해졌거나, 아주 미세한 디테일이 어긋나 인지를 방해하던 수많은 아이콘이 꼼꼼한 리뷰를 거치며 제자리를 찾았어요. 시스템의 뼈대는 규칙이 만들었지만, 거기에 뱅크샐러드다운 생명력을 불어넣고 마지막 1%의 디테일을 완성한 건 결국 동료와 주고받은 밀도 높은 피드백이었어요.

---

최대 4,900개의 검색어, AI로 단숨에 달아주기

시각적인 퀄리티는 맞췄지만, 또 다른 문제가 기다리고 있었어요. 유관 부서 디자이너들이 피그마(Figma)에서 아이콘을 찾는 데 시간을 너무 많이 쓰고 있었거든요.

현재 아이콘 파일명은 개발 환경과의 호환을 위해 모두 영어로 되어 있어요. 그러다 보니 원하는 아이콘 하나를 찾으려면 거대한 피그마 페이지를 이리저리 줌인하며 헤매야 했죠. 이런 비효율과 불편함을 줄이기 위해, 각 아이콘에 최대 7개씩 한글 연관 검색어(메타데이터) 를 달아주기로 했어요.

하지만 700개가 넘는 아이콘에 많게는 4,900개의 키워드를 일일이 입력하는 건 엄청난 리소스 낭비잖아요? 그래서 AI와 자동화의 힘을 빌리기로 했어요.

1. 먼저 MCP로 피그마와 AI를 연결해, 피그마에 그려진 아이콘 이미지와 이름 정보를 AI가 읽도록 했어요. AI는 아이콘 이미지를 하나하나 분석해 ‘치킨, 닭, 야식, 배달’ 같은 직관적인 한글 키워드들을 순식간에 뽑아주었죠.

2. 이렇게 정리된 시트(Sheet) 데이터를 피그마 플러그인 Sheet Sync 로 아이콘 프레임에 한 번에 동기화했어요.

몇 주는 걸렸을 수작업이 자동화 파이프라인 덕분에 짧은 시간 안에 끝났어요. 이제 피그마에서 “치킨”만 검색해도 해당 아이콘이 바로 나와요. 도구를 활용해 사내 구성원들의 작업 환경(Internal UX)을 크게 개선한, 뿌듯한 경험이었죠.

---

완벽함보다 중요한 유연한 배포 전략

마지막 관문은 새로 그린 아이콘을 ‘실제 뱅크샐러드 앱 화면에 띄우는 일’이었어요. 디자이너가 피그마에 그린 그림을, 개발자들이 앱의 설계도(코드)에 넣어 교체하는 과정이 필요하거든요.

이때 BX팀 문경님, 그리고 개발 팀과 논의해 한 가지 전략을 세웠어요. 개발자분들의 수고를 덜기 위해서, 새 아이콘의 파일 이름을 예전 아이콘과 똑같이 맞춰서 그대로 ‘덮어쓰기’를 하기로 했죠.

그런데 여기서 예상치 못한 문제가 생겼어요. 파일 이름이 완전히 똑같다 보니, 개발자 입장에서는 코드상의 파일 이름만 보고 구형(V1)인지 신형(V2)인지 구별할 방법이 없었던 거예요. 그렇다고 700개가 넘는 아이콘이 제대로 들어갔는지 화면을 하나하나 다 확인한 뒤에 앱을 업데이트하려면, 다른 중요한 기능의 개발 일정까지 하염없이 미뤄질 수밖에 없었어요.

그래서 우리는 완벽함에 갇혀 일정을 지연시키는 대신, 조금 더 빠르고 유연한 배포 전략을 택하기로 했어요.

• 일괄 배포로 한 번에 덮어쓰기: 먼저 700개의 아이콘을 프로덕트 환경에 통째로 배포했어요.
• 실시간 라이브 모니터링: 배포 직후, 문경님과 함께 앱 내 주요 화면들을 직접 돌아다니며, 이전 버전 아이콘이 남아있거나 버전이 꼬인 곳을 빠르게 찾아냈어요.
• 순차적 핫픽스(Hotfix) 진행: 찾아낸 문제를 모아 개발 팀과 바로 세션을 열고, 사용자가 가장 많이 보는 중요한 화면부터 차례대로 긴급 수정해 나갔어요.

결과적으로 프로덕트 전체의 그래픽 언어를 가장 빠르고 안전하게 2.0으로 전환할 수 있었어요. 모든 것을 완벽하게 준비해서 한 번에 내보내려는 욕심 대신, 리스크를 작게 쪼개 영리하게 통제한 덕분이었죠.

---

글을 마치며: 예쁜 그림이 아닌, 든든한 표지판이 되기까지

1편부터 3편까지, 아웃라인을 덜어내는 결단에서 시작해 색채학을 고민하고, 700개가 넘는 아이콘을 한 땀 한 땀 그리고, 치열하게 리뷰하고, AI로 효율을 높이고, 유연한 배포 전략을 세우기까지 참 긴 여정을 달려왔어요.

돌아보면 뱅크샐러드의 ‘아이콘 2.0’ 프로젝트는 단순히 예쁜 그래픽을 혼자서 그리는 일이 아니었어요. 픽셀 하나를 두고 토론했던 BX팀, 프로덕트의 사용성을 짚어준 UX 디자이너들, 수많은 에셋을 안전하게 배포해 준 개발 조직까지. 오직 ‘사용자’라는 하나의 목표를 향해 동료들과 긴밀하게 합을 맞췄기에 세상에 나올 수 있던 시스템이었죠.

뱅크샐러드는 본질적으로 ‘데이터를 읽어야 하는’ 서비스잖아요. 자산 내역부터 건강 검진 결과까지, 앱 화면 위에는 늘 수많은 숫자와 정보들이 놓여 있으니까요. 저희는 이 방대한 데이터가 앱을 사용하는 모든 분에게 삶의 도구가 되고, 든든한 힘이 되기를 바랐어요.

아이콘이 화려하게 시선을 빼앗는 대신, 조용하고 정확하게 데이터를 향한 길을 안내하는 표지판으로 한 발짝 물러나야 했던 이유도 바로 여기에 있어요. 아웃라인을 지우고, 색을 다듬고, 수많은 아이콘을 규칙에 맞춰 깎아내던 과정은 결국 ‘데이터가 유저에게 온전히 닿게 만든다’ 는 신념을 끝까지 지켜내기 위한 노력이었죠.

아이콘 스타일 개선을 넘어, 사용자의 인지 경험을 바꾸고 동료들과 일하는 방식을 개선했던 이 여정이 더 나은 시스템을 고민하는 많은 분께 작은 영감이 되었으면 좋겠어요.

긴 이야기 함께 읽어주셔서 고맙습니다.