<div id="readability-page-1" class="page"><div>안녕하세요, 토스뱅크 Visual Designer 고명은입니다. 오늘은 키워봐요 적금의 9가지 다람쥐 캐릭터와, 다람쥐가 돋보이는 화면을 만든 과정을 이야기해 보려고 해요.<h2 id="3eaa360d-33e3-80b5-a53d-fdcc49728dbd">매일 찾아와야 자라는 적금</h2><figure id="3eaa360d-33e3-807b-9127-ccb97a6c1d30"><video muted="" loop="" autoplay="" playsinline=""><source src="https://static.toss.im/ipd-tcs/toss_core/live/21b88571-8f63-46cb-9b4c-2dc5a3b53018/1.%E1%84%8F%E1%85%A2%E1%84%85%E1%85%B5%E1%86%A8%E1%84%90%E1%85%A5%E1%84%8B%E1%85%AA_%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%A1.mp4"></video></figure>키워봐요 적금은 캐릭터를 직접 키우면서 저금하는 적금이에요. 키우고 싶은 캐릭터를 정할 수 있고, 저금할 때마다 자라서 만기 때는 최종 형태로 진화하죠.초기 버전은 가입만 하면 그 뒤로는 사용자가 앱에 오지 않아도 자동이체를 통해 캐릭터가 알아서 자랐어요. 시간이 지날수록 리텐션이 떨어졌죠. 매일 들여다볼 이유가 없으니, 가입한 뒤 점점 잊히는 적금이 된 거예요.그래서 새로운 버전에서는 정반대로 설계하고자 했어요. 자동이체 없이 사용자가 직접 저금해야만 캐릭터와 이자가 자라도록요. 이 구조가 효과적이려면 두 가지가 필요했어요. 첫 번째, 캐릭터 자체가 매력적이어서 키우고 싶어야 할 것. 두 번째, 내가 직접 키우고 있다는 감각이 전달될 것. 저는 최종 진화 단계의 다람쥐 9마리와 이 다람쥐들을 키우는 화면을 만드는 일을 담당하게 됐어요.<h2 id="3eaa360d-33e3-8072-89b3-fcb53a84d51c">101명의 연습생에서 9명의 데뷔조까지</h2>짧은 시간 안에 최대한 많은 시안을 만들어보고 좋은 캐릭터를 찾아야 했기 때문에 AI를 적극적으로 활용했어요. 9마리가 저마다 다른 매력을 갖게 하고 싶었어요. 성공한 9인조 아이돌처럼, 누구에게 물어봐도 최애가 갈릴 만큼 멤버의 개성이 뚜렷하면서도 한데 모아놓으면 한 팀처럼 보이길 바랐죠.그런데 이 다람쥐들은 단순히 9가지 캐릭터를 만드는 게 아니었어요. 31일 동안 쌓인 매력·지혜·힘 스탯에 따라 최종 모습이 결정되는 구조였거든요. 그래서 캐릭터를 먼저 그리기보다, 각 스탯이 쌓였을 때 어떤 성격과 매력을 가진 다람쥐가 나와야 할지부터 정했어요. 귀여운 애, 초현실적인 애, 강인한 애처럼 각자 어떤 개성을 가질지 정하고, 그에 맞춰 캐릭터의 콘셉트를 만들어갔어요.<figure id="3eaa360d-33e3-80b5-96ae-dd1a580eac53"><video muted="" loop="" autoplay="" playsinline=""><source src="https://static.toss.im/ipd-tcs/toss_core/live/2d172961-0f03-468c-b74c-d10d893f13d4/2.%E1%84%8F%E1%85%A2%E1%84%85%E1%85%B5%E1%86%A8%E1%84%90%E1%85%A5_%E1%84%8F%E1%85%A5%E1%86%AB%E1%84%89%E1%85%A6%E1%86%B8.mp4"></video></figure>예를 들어 지혜와 힘이 함께 쌓이면 똑똑하면서도 강인한 우주비행사로, 매력만 쌓이면 무대 위의 아이돌로 표현하는 식이었어요. 캐릭터마다 어떤 모습과 이야기를 가질지 정하고 나니, 프롬프트에 담아야 할 요소도 자연스럽게 정해졌어요. 표정과 의상, 소품부터 조명까지 모두 캐릭터의 설정에서 가져왔죠.처음부터 잘 짜인 프롬프트가 있었던 건 아니에요. 노드 기반 AI 이미지 툴에서 여러 번 테스트하면서, 모든 캐릭터에 공통으로 들어가는 고정 문장과 캐릭터마다 바꿔 넣는 빈칸으로 나눈 뼈대를 만들었어요.<figure id="3eaa360d-33e3-8075-80f4-c5f59ed8476b"><img src="https://static.toss.im/ipd-tcs/toss_core/live/1c61cf95-b20c-49fd-ad0a-b8a011decab5/3.%E1%84%82%E1%85%A9%E1%84%83%E1%85%B3.png" alt=""></figure>뼈대가 잡히자 속도가 확 빨라졌어요. 서핑 다람쥐를 아이돌 다람쥐로 바꾸고 싶으면 새 프롬프트를 쓸 필요 없이 빈칸만 갈아 끼우면 됐거든요. 처음에는 백 장을 뽑아야 쓸 만한 하나가 나왔다면, 나중에는 서른 장, 더 나중에는 두세 장만으로도 그럴싸한 다람쥐 연습생을 캐스팅할 수 있었어요.AI가 만들어준 캐릭터는 바로 데뷔시킬 정도로 완성도가 높지는 않았어요.캐릭터를 조금이라도 만져본 분이라면 아실 거예요. 표정의 작은 픽셀 하나, 캐릭터가 입은 옷과 손에 든 아이템 하나가 캐릭터의 인상을 크게 좌우해요.게다가 이 다람쥐들은 손바닥만 한 앱 화면 한가운데에 작게 들어가요. 작게 들어가는 리소스일수록 디테일이 뭉개지기 쉽고, 뭉개진 디테일은 곧 뭉개진 인상이 돼요. 결국 이 작업은 처음부터 끝까지 디테일 싸움이었어요.<figure id="3eaa360d-33e3-800e-81fe-cb1f8dcaf3c9"><img src="https://static.toss.im/ipd-tcs/toss_core/live/e20bfa2b-2277-48f5-812c-6a54b8edb9a5/4.%E1%84%8F%E1%85%A2%E1%84%85%E1%85%B5%E1%86%A8%E1%84%90%E1%85%A5_%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%80%E1%85%AA%E1%84%8C%E1%85%A5%E1%86%BC.webp" alt=""></figure>처음에는 좋은 부분들을 하나씩 얹으며 작업했어요. 질감과 장식, 소품을 겹겹이 쌓을수록 캐릭터는 화려해졌죠. 그런데 실제 앱 화면에 들어가는 크기로 줄여보면 오히려 인상이 흐려지는 경우가 많았어요. 요소들이 서로를 가려서, 뭉개지는 정도가 아니라 하나로 뭉쳐 보였거든요.그래서 어느 순간부터 ‘무엇을 더 넣을지’보다 ‘무엇을 남길지’를 먼저 생각했어요.작은 화면에서도 가장 먼저 보여야 하는 표정과 실루엣은 남기고, 캐릭터의 인상을 흐리는 장식이나 디테일은 덜어냈어요. 많이 넣는 것보다 작은 화면에서도 캐릭터의 매력이 선명하게 보이는 것이 더 중요했으니까요.AI로 수많은 캐릭터를 빠르게 만들어볼 수 있었지만, 그중에서 무엇을 남기고 어떻게 다듬을지는 결국 디자이너가 판단해야 했어요.다람쥐는 31일 동안 여러 단계를 거쳐 자라고, 마지막에야 아홉 가지 모습 중 하나로 진화해요. 최종 진화형은 혼자 존재하는 그림이 아니라, 이전 단계의 다람쥐에서 이어지는 마지막 장면이었던 거예요.<figure id="3eaa360d-33e3-809a-ad85-cd51e177c13b"><video muted="" loop="" autoplay="" playsinline=""><source src="https://static.toss.im/ipd-tcs/toss_core/live/848ba1b7-8933-47e5-a3ca-a5e06afe8f5d/5.%E1%84%80%E1%85%A8%E1%84%89%E1%85%B3%E1%86%BC%E1%84%92%E1%85%A1%E1%86%AB_%E1%84%80%E1%85%A5%E1%86%BA.mp4"></video></figure>여기서 어려웠던 건 ‘내가 키우던 다람쥐’라는 느낌과 ‘드디어 진화했다’는 느낌을 동시에 만드는 것이었어요. 이전 단계와 너무 비슷하면 진화한 느낌이 없고, 너무 다르면 전혀 다른 캐릭터처럼 보이니까요.그래서 몸의 비율과 귀, 꼬리, 일부 이목구비의 모양은 그대로 가져갔어요. 대신 피부색과 옷, 아이템처럼 캐릭터의 성격을 보여주는 요소는 크게 바꿨어요. 익숙한 형태는 이어가면서도, 31일 동안 키운 결과는 확실히 느껴지도록 한 거죠.<figure id="3eaa360d-33e3-8015-ad95-ccf3374c800b"><img src="https://static.toss.im/ipd-tcs/toss_core/live/25fd626f-b930-4105-94fe-40c127ab47d0/6.%E1%84%8E%E1%85%AC%E1%84%8C%E1%85%A9%E1%86%BC%E1%84%8F%E1%85%A2%E1%84%85%E1%85%B5%E1%86%A8%E1%84%90%E1%85%A5.png" alt=""></figure>그렇게 디테일까지 다듬은 아홉 마리를 나란히 놓아봤어요. 한 팀으로 보이면서도 각자의 개성은 분명했어요. 팀에 공유했을 때도 다들 서로 다른 다람쥐를 최애로 꼽았고요.그렇게 9명의 데뷔조가 확정됐어요.<h2 id="3eaa360d-33e3-8029-9303-cb235f4f05cd">캐릭터가 주인공인 무대 만들기</h2>다람쥐가 완성됐다고 끝이 아니었어요. 일반적인 적금 화면에 다람쥐를 올려보니 캐릭터만 스티커처럼 붕 떠 보였어요. 반대로 게임처럼 배경의 밀도를 높이면 캐릭터에 집중하기 어렵고 화면이 오히려 올드해 보였고요.기존의 UI 문법 위에 캐릭터만 얹어서는, 다람쥐가 주인공인 화면을 만들 수 없었어요. 다람쥐는 다람쥐대로, UI는 UI대로 따로 놀았죠.그래서 이 적금만을 위한 작은 디자인 시스템과 UI 프로토타입을 새로 만들었어요. 진행 바와 선택 영역부터 레벨과 스탯을 보여주는 캐릭터 상태창까지, 캐릭터를 중심으로 화면의 구조와 디테일을 다시 잡았어요.<figure id="3eaa360d-33e3-805f-a0e8-d8b32326272d"><video muted="" loop="" autoplay="" playsinline=""><source src="https://static.toss.im/ipd-tcs/toss_core/live/c233b2cd-adcf-439b-b64e-ccfbf114e8e6/7.ui%E1%84%83%E1%85%B5%E1%84%90%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%AF.mp4"></video></figure><ul><li id="3eba360d-33e3-80a3-ae1d-e2ab34313644">모은 돈은 가장 위에, 가장 크게게임처럼 보여도 이건 적금이에요. 그래서 계좌에 모인 금액은 화면 맨 위에 가장 큰 숫자로 뒀어요. 캐릭터를 키우다가도 눈을 들면 내가 모은 돈이 얼마나 되는지 바로 알 수 있게 했어요.</li><li id="3eba360d-33e3-8049-9d0b-d79c21f68c04">그림자로 공간감을 줬어요캐릭터가 허공에 떠 보이지 않도록 발밑에 그림자를 깔았어요. 말풍선에도 은은한 그림자를 넣어 영역을 구분하고, 화면에 깊이감을 더했어요.</li><li id="3eba360d-33e3-8004-8bbf-d9fcd8de27f8">상태창 하나에 필요한 정보를 담았어요레벨과 이름, 세 가지 스탯, 다음 진화까지 남은 날을 하나의 상태창에 묶었어요. 진행 바에는 발자국 아이콘을 넣어 다람쥐가 지금까지 걸어온 길처럼 읽히게 했고요.</li><li id="3eba360d-33e3-8018-a9e2-d8eb866490c8">선택지와 스탯을 같은 언어로 연결했어요설명을 읽지 않아도 ‘이걸 고르면 이 스탯이 오른다’는 걸 알 수 있도록, 선택지 옆의 매력·지혜·힘 아이콘과 상태창의 스탯 아이콘을 같은 모양으로 만들었어요.</li></ul>캐릭터와 말풍선 사이의 간격, 스탯과 진행 바의 정렬도 픽셀 단위로 맞췄어요. 하나만 보면 티가 나지 않지만, 이런 요소가 조금씩 어긋나면 화면 전체가 조립한 것처럼 보이거든요.캐릭터를 UI에 올려놓는 것이 아니라, UI 전체가 캐릭터를 하나의 주인공으로 만들어주는 것. 그게 이 화면을 만들면서 가장 중요하게 생각한 부분이었어요.<h2 id="3eaa360d-33e3-8004-927f-ee1cfaeae0dd">매일 찾아오게 만드는 인터랙션</h2>무대 세팅까지 끝! 다음 단계는 다람쥐와 사용자 사이의 인터랙션을 설계하는 것이었어요.다람쥐와 무대가 아무리 매력적이어도, 오늘 저금한 일이 별다른 경험으로 남지 않으면 금방 지루해질 수 있어요. 키우고 싶은 마음은 31일 뒤의 최종 모습이 아니라, 오늘 한 번의 저금에서도 생겨야 했어요. 그래서 선택지를 고르는 그 한 번의 탭에 화면 전체가 대답하도록 만들었어요.단순히 캐릭터를 잘 만드는 데서 끝내지 않고, 이 캐릭터를 어떻게 보고, 키우고, 다시 만나게 할지까지 고민한 거예요.<figure id="3eaa360d-33e3-80db-a864-f4fc1fe80827"><video muted="" loop="" autoplay="" playsinline=""><source src="https://static.toss.im/ipd-tcs/toss_core/live/66b17616-8d90-4165-af49-a8ff16db471e/8.%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%90%E1%85%A5%E1%84%85%E1%85%A2%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB.mp4"></video></figure>탭하는 순간 저금액과 스탯 숫자가 함께 올라가요. 오늘 넣은 돈이 그대로 다람쥐의 성장으로 이어지는 걸 한눈에 볼 수 있게 했어요.숫자만 변하는 것도 아니에요. 성장 단계마다 여러 가지 캐릭터 모션을 만들어, 저금할 때마다 다람쥐가 다르게 반응하도록 했어요. 내가 한 행동에 캐릭터가 바로 반응하니, 다람쥐와 함께 무언가를 쌓아가는 느낌이 들도록 한 거죠.<figure id="3eaa360d-33e3-8048-8c31-d68918617793"><video muted="" loop="" autoplay="" playsinline=""><source src="https://static.toss.im/ipd-tcs/toss_core/live/7ed1c2d3-88d5-412f-8d95-9d0d3f6031f4/9.%E1%84%8F%E1%85%A2%E1%84%85%E1%85%B5%E1%86%A8%E1%84%90%E1%85%A5_%E1%84%86%E1%85%A9%E1%84%89%E1%85%A7%E1%86%AB_%E1%84%8B%E1%85%A6%E1%84%89%E1%85%A6%E1%86%BA%E1%84%83%E1%85%B3%E1%86%AF.mp4"></video></figure><figure id="3eaa360d-33e3-809d-8981-edea4977c4b5"><video muted="" loop="" autoplay="" playsinline=""><source src="https://static.toss.im/ipd-tcs/toss_core/live/b03c0890-e11e-4a43-a0f8-441ec8b2e321/10._%E1%84%82%E1%85%A2%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B4_%E1%84%80%E1%85%B5%E1%84%83%E1%85%A2.mp4"></video></figure>오늘의 보람만으로 매일 다시 들어올 이유를 만들기는 어려웠어요. 다음 진화까지 얼마나 남았는지도 보여줘야 했어요.그래서 오늘의 대화를 마치면 다람쥐가 걸어가듯 발자국 아이콘이 진행 바를 채워요. 남은 날짜를 단순히 숫자로 보여주는 대신, 다람쥐가 다음 모습에 한 걸음씩 가까워지는 장면으로 표현했어요.오늘 쌓인 저금액과 스탯은 오늘의 보람이 되고, 다음 진화에 가까워진 모습은 내일 다시 들어올 이유가 돼요.매일의 저금이 통장에서 ‘빠져나간 돈’으로만 남는 게 아니라, 다람쥐와 함께 ‘쌓인 뿌듯함’으로 느껴졌으면 했어요.<h2 id="3eaa360d-33e3-8038-b4c5-d7a572cbfaf4">적용해보기</h2>키워봐요 적금을 만들면서 제가 계속 붙들었던 질문들이에요. 캐릭터를 중심으로 서비스를 만들고 있거나, 캐릭터의 매력을 화면과 인터랙션으로 어떻게 보여줄지 고민하고 있다면 이런 질문을 던져보세요.<ul><li id="3eba360d-33e3-80fc-b153-c789b2a552b9">캐릭터의 매력을 화면 전체에서 보여주고 있나요?캐릭터만 바꾸는 게 아니라, 주변의 UI도 캐릭터에 맞게 달라져야 화면 전체가 하나의 경험으로 읽혀요.</li><li id="3eba360d-33e3-8033-91ec-e796ce78f636">작은 화면에서 정말 남아야 할 것은 무엇인가요?좋은 요소를 계속 더하기보다, 작은 화면에서도 캐릭터의 인상을 가장 잘 보여주는 요소를 남기는 게 중요해요.</li><li id="3eba360d-33e3-8005-84f4-ead484d4cfb9">캐릭터와 사용자의 행동이 연결되어 있나요?사용자의 행동에 캐릭터가 바로 반응해야, 캐릭터를 보는 경험이 실제 행동과 자연스럽게 이어져요.</li></ul></div></div>

토스테크

안녕하세요, 토스뱅크 Visual Designer 고명은입니다. 오늘은 키워봐요 적금의 9가지 다람쥐 캐릭터와, 다람쥐가 돋보이는 화면을 만든 과정을 이야기해 보려고 해요.
매일 찾아와야 자라는 적금
키워봐요 적금은 캐릭터를 직접 키우면서 저금하는 적금이에요. 키우고 싶은 캐릭터를 정할 수 있고, 저금할 때마다 자라서 만기 때는 최종 형태로 진화하죠.
초기 버전은 가입만 하면 그 뒤로는 사용자가 앱에 오지 않아도 자동이체를 통해 캐릭터가 알아서 자랐어요. 시간이 지날수록 리텐션이 떨어졌죠. 매일 들여다볼 이유가 없으니, 가입한 뒤 점점 잊히는 적금이 된 거예요.
그래서 새로운 버전에서는 정반대로 설계하고자 했어요. 자동이체 없이 사용자가 직접 저금해야만 캐릭터와 이자가 자라도록요. 이 구조가 효과적이려면 두 가지가 필요했어요. 첫 번째, 캐릭터 자체가 매력적이어서 키우고 싶어야 할 것. 두 번째, 내가 직접 키우고 있다는 감각이 전달될 것. 저는 최종 진화 단계의 다람쥐 9마리와 이 다람쥐들을 키우는 화면을 만드는 일을 담당하게 됐어요.
101명의 연습생에서 9명의 데뷔조까지
짧은 시간 안에 최대한 많은 시안을 만들어보고 좋은 캐릭터를 찾아야 했기 때문에 AI를 적극적으로 활용했어요. 
9마리가 저마다 다른 매력을 갖게 하고 싶었어요. 성공한 9인조 아이돌처럼, 누구에게 물어봐도 최애가 갈릴 만큼 멤버의 개성이 뚜렷하면서도 한데 모아놓으면 한 팀처럼 보이길 바랐죠.
그런데 이 다람쥐들은 단순히 9가지 캐릭터를 만드는 게 아니었어요. 31일 동안 쌓인 매력·지혜·힘 스탯에 따라 최종 모습이 결정되는 구조였거든요. 그래서 캐릭터를 먼저 그리기보다, 각 스탯이 쌓였을 때 어떤 성격과 매력을 가진 다람쥐가 나와야 할지부터 정했어요. 귀여운 애, 초현실적인 애, 강인한 애처럼 각자 어떤 개성을 가질지 정하고, 그에 맞춰 캐릭터의 콘셉트를 만들어갔어요.
예를 들어 지혜와 힘이 함께 쌓이면 똑똑하면서도 강인한 우주비행사로, 매력만 쌓이면 무대 위의 아이돌로 표현하는 식이었어요. 캐릭터마다 어떤 모습과 이야기를 가질지 정하고 나니, 프롬프트에 담아야 할 요소도 자연스럽게 정해졌어요. 표정과 의상, 소품부터 조명까지 모두 캐릭터의 설정에서 가져왔죠.
처음부터 잘 짜인 프롬프트가 있었던 건 아니에요. 노드 기반 AI 이미지 툴에서 여러 번 테스트하면서, 모든 캐릭터에 공통으로 들어가는 고정 문장과 캐릭터마다 바꿔 넣는 빈칸으로 나눈 뼈대를 만들었어요.
뼈대가 잡히자 속도가 확 빨라졌어요. 서핑 다람쥐를 아이돌 다람쥐로 바꾸고 싶으면 새 프롬프트를 쓸 필요 없이 빈칸만 갈아 끼우면 됐거든요. 처음에는 백 장을 뽑아야 쓸 만한 하나가 나왔다면, 나중에는 서른 장, 더 나중에는 두세 장만으로도 그럴싸한 다람쥐 연습생을 캐스팅할 수 있었어요.
AI가 만들어준 캐릭터는 바로 데뷔시킬 정도로 완성도가 높지는 않았어요.
캐릭터를 조금이라도 만져본 분이라면 아실 거예요. 표정의 작은 픽셀 하나, 캐릭터가 입은 옷과 손에 든 아이템 하나가 캐릭터의 인상을 크게 좌우해요.
게다가 이 다람쥐들은 손바닥만 한 앱 화면 한가운데에 작게 들어가요. 작게 들어가는 리소스일수록 디테일이 뭉개지기 쉽고, 뭉개진 디테일은 곧 뭉개진 인상이 돼요. 결국 이 작업은 처음부터 끝까지 디테일 싸움이었어요.
처음에는 좋은 부분들을 하나씩 얹으며 작업했어요. 질감과 장식, 소품을 겹겹이 쌓을수록 캐릭터는 화려해졌죠. 그런데 실제 앱 화면에 들어가는 크기로 줄여보면 오히려 인상이 흐려지는 경우가 많았어요. 요소들이 서로를 가려서, 뭉개지는 정도가 아니라 하나로 뭉쳐 보였거든요.
그래서 어느 순간부터 ‘무엇을 더 넣을지’보다 ‘무엇을 남길지’를 먼저 생각했어요.
작은 화면에서도 가장 먼저 보여야 하는 표정과 실루엣은 남기고, 캐릭터의 인상을 흐리는 장식이나 디테일은 덜어냈어요. 많이 넣는 것보다 작은 화면에서도 캐릭터의 매력이 선명하게 보이는 것이 더 중요했으니까요.
AI로 수많은 캐릭터를 빠르게 만들어볼 수 있었지만, 그중에서 무엇을 남기고 어떻게 다듬을지는 결국 디자이너가 판단해야 했어요.
다람쥐는 31일 동안 여러 단계를 거쳐 자라고, 마지막에야 아홉 가지 모습 중 하나로 진화해요. 최종 진화형은 혼자 존재하는 그림이 아니라, 이전 단계의 다람쥐에서 이어지는 마지막 장면이었던 거예요.
여기서 어려웠던 건 ‘내가 키우던 다람쥐’라는 느낌과 ‘드디어 진화했다’는 느낌을 동시에 만드는 것이었어요. 이전 단계와 너무 비슷하면 진화한 느낌이 없고, 너무 다르면 전혀 다른 캐릭터처럼 보이니까요.
그래서 몸의 비율과 귀, 꼬리, 일부 이목구비의 모양은 그대로 가져갔어요. 대신 피부색과 옷, 아이템처럼 캐릭터의 성격을 보여주는 요소는 크게 바꿨어요. 익숙한 형태는 이어가면서도, 31일 동안 키운 결과는 확실히 느껴지도록 한 거죠.
그렇게 디테일까지 다듬은 아홉 마리를 나란히 놓아봤어요. 한 팀으로 보이면서도 각자의 개성은 분명했어요. 팀에 공유했을 때도 다들 서로 다른 다람쥐를 최애로 꼽았고요.
그렇게 9명의 데뷔조가 확정됐어요.
캐릭터가 주인공인 무대 만들기
다람쥐가 완성됐다고 끝이 아니었어요. 일반적인 적금 화면에 다람쥐를 올려보니 캐릭터만 스티커처럼 붕 떠 보였어요. 반대로 게임처럼 배경의 밀도를 높이면 캐릭터에 집중하기 어렵고 화면이 오히려 올드해 보였고요.
기존의 UI 문법 위에 캐릭터만 얹어서는, 다람쥐가 주인공인 화면을 만들 수 없었어요. 다람쥐는 다람쥐대로, UI는 UI대로 따로 놀았죠.
그래서 이 적금만을 위한 작은 디자인 시스템과 UI 프로토타입을 새로 만들었어요. 진행 바와 선택 영역부터 레벨과 스탯을 보여주는 캐릭터 상태창까지, 캐릭터를 중심으로 화면의 구조와 디테일을 다시 잡았어요.
모은 돈은 가장 위에, 가장 크게
게임처럼 보여도 이건 적금이에요. 그래서 계좌에 모인 금액은 화면 맨 위에 가장 큰 숫자로 뒀어요. 캐릭터를 키우다가도 눈을 들면 내가 모은 돈이 얼마나 되는지 바로 알 수 있게 했어요.
그림자로 공간감을 줬어요
캐릭터가 허공에 떠 보이지 않도록 발밑에 그림자를 깔았어요. 말풍선에도 은은한 그림자를 넣어 영역을 구분하고, 화면에 깊이감을 더했어요.
상태창 하나에 필요한 정보를 담았어요
레벨과 이름, 세 가지 스탯, 다음 진화까지 남은 날을 하나의 상태창에 묶었어요. 진행 바에는 발자국 아이콘을 넣어 다람쥐가 지금까지 걸어온 길처럼 읽히게 했고요.
선택지와 스탯을 같은 언어로 연결했어요
설명을 읽지 않아도 ‘이걸 고르면 이 스탯이 오른다’는 걸 알 수 있도록, 선택지 옆의 매력·지혜·힘 아이콘과 상태창의 스탯 아이콘을 같은 모양으로 만들었어요.
캐릭터와 말풍선 사이의 간격, 스탯과 진행 바의 정렬도 픽셀 단위로 맞췄어요. 하나만 보면 티가 나지 않지만, 이런 요소가 조금씩 어긋나면 화면 전체가 조립한 것처럼 보이거든요.
캐릭터를 UI에 올려놓는 것이 아니라, UI 전체가 캐릭터를 하나의 주인공으로 만들어주는 것. 그게 이 화면을 만들면서 가장 중요하게 생각한 부분이었어요.
매일 찾아오게 만드는 인터랙션
무대 세팅까지 끝! 다음 단계는 다람쥐와 사용자 사이의 인터랙션을 설계하는 것이었어요.
다람쥐와 무대가 아무리 매력적이어도, 오늘 저금한 일이 별다른 경험으로 남지 않으면 금방 지루해질 수 있어요. 키우고 싶은 마음은 31일 뒤의 최종 모습이 아니라, 오늘 한 번의 저금에서도 생겨야 했어요. 그래서 선택지를 고르는 그 한 번의 탭에 화면 전체가 대답하도록 만들었어요.
단순히 캐릭터를 잘 만드는 데서 끝내지 않고, 이 캐릭터를 어떻게 보고, 키우고, 다시 만나게 할지까지 고민한 거예요.
탭하는 순간 저금액과 스탯 숫자가 함께 올라가요. 오늘 넣은 돈이 그대로 다람쥐의 성장으로 이어지는 걸 한눈에 볼 수 있게 했어요.
숫자만 변하는 것도 아니에요. 성장 단계마다 여러 가지 캐릭터 모션을 만들어, 저금할 때마다 다람쥐가 다르게 반응하도록 했어요. 내가 한 행동에 캐릭터가 바로 반응하니, 다람쥐와 함께 무언가를 쌓아가는 느낌이 들도록 한 거죠.
오늘의 보람만으로 매일 다시 들어올 이유를 만들기는 어려웠어요. 다음 진화까지 얼마나 남았는지도 보여줘야 했어요.
그래서 오늘의 대화를 마치면 다람쥐가 걸어가듯 발자국 아이콘이 진행 바를 채워요. 남은 날짜를 단순히 숫자로 보여주는 대신, 다람쥐가 다음 모습에 한 걸음씩 가까워지는 장면으로 표현했어요.
오늘 쌓인 저금액과 스탯은 오늘의 보람이 되고, 다음 진화에 가까워진 모습은 내일 다시 들어올 이유가 돼요.
매일의 저금이 통장에서 ‘빠져나간 돈’으로만 남는 게 아니라, 다람쥐와 함께 ‘쌓인 뿌듯함’으로 느껴졌으면 했어요.
적용해보기
키워봐요 적금을 만들면서 제가 계속 붙들었던 질문들이에요. 캐릭터를 중심으로 서비스를 만들고 있거나, 캐릭터의 매력을 화면과 인터랙션으로 어떻게 보여줄지 고민하고 있다면 이런 질문을 던져보세요.
캐릭터의 매력을 화면 전체에서 보여주고 있나요?
캐릭터만 바꾸는 게 아니라, 주변의 UI도 캐릭터에 맞게 달라져야 화면 전체가 하나의 경험으로 읽혀요.
작은 화면에서 정말 남아야 할 것은 무엇인가요?
좋은 요소를 계속 더하기보다, 작은 화면에서도 캐릭터의 인상을 가장 잘 보여주는 요소를 남기는 게 중요해요.
캐릭터와 사용자의 행동이 연결되어 있나요?
사용자의 행동에 캐릭터가 바로 반응해야, 캐릭터를 보는 경험이 실제 행동과 자연스럽게 이어져요.

9인조 다람쥐 아이돌을 데뷔시켰습니다

댓글