#Design

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

Summary

토스뱅크가 적금 통장에 9마리 다람쥐 아이돌을 데뷔시킨 비결

디자이너가 AI로 시안을 뽑고 픽셀 단위로 벼려낸, 캐릭터 중심의 게이미피케이션 UX 설계기

이 아티클은 토스뱅크의 '키워봐요 적금' 리뉴얼 과정에서 리텐션 하락 문제를 해결하기 위해 캐릭터와 UI 디자인을 혁신한 여정을 다룹니다. 노드 기반 생성형 AI를 활용하여 효율적으로 캐릭터 콘셉트를 다변화한 방법부터, 작은 화면에서 캐릭터의 매력을 극대화하기 위해 디자인을 덜어내고 전용 UI 시스템을 구축한 시각적 엔지니어링 과정을 소개합니다.

01자동이체 기반 성장 구조에서 사용자의 수동 저금을 유도하는 게이미피케이션 모델로의 대전환
02노드 기반 AI 이미지 생성 툴에 뼈대 프롬프트를 설계해 다람쥐 캐릭터 시안 제작 효율을 극대화한 사례
03모바일 작은 화면에서의 가독성을 위해 '더하는 것' 대신 '비우는 것'을 선택한 디자이너의 최적화 디테일
04캐릭터가 화면 위에서 겉돌지 않도록 그림자, 전용 상태창, 직관적 스탯 아이콘을 일치시킨 전용 UI 시스템 설계
05저축하는 순간 반응하는 캐릭터 모션과 성장 궤적을 보여주는 발자국 인터랙션으로 매일 방문할 유도 장치 마련

RECOMMENDATION

금융 및 서비스 앱에 게이미피케이션 요소를 도입하려는 디자이너와 PM, 혹은 생성형 AI를 실무 파이프라인에 통합해 효율을 극대화하려는 비주얼 엔지니어들에게 강력히 추천합니다.

The Problem

키워봐요 적금의 초기 버전은 자동이체로 캐릭터가 알아서 성장하여 사용자가 앱에 매일 방문할 필요가 없었고, 이로 인해 리텐션이 지속적으로 하락하는 문제가 있었습니다.

The Solution

자동이체 없이 사용자가 수동으로 저금해야만 성장하는 구조로 변경하고, 노드 기반 AI 툴로 캐릭터 프롬프트 뼈대를 설계해 9종의 개성 있는 다람쥐 캐릭터를 제작했으며, 캐릭터가 돋보이도록 전용 디자인 시스템과 인터랙션 UI를 재설계했습니다.

The Result

사용자가 매일 저축할 때마다 즉각적인 피드백을 주는 성장 스탯 변화 및 모션 그래픽을 적용해 매일 방문할 유인을 제공했으며, 최종 진화형 캐릭터 9종의 디테일을 모바일에 최적화하여 독창적인 사용자 경험을 구현했습니다. (다만 구체적인 정량적 리텐션 상승 수치는 본문에 명시되지 않았습니다.)

Trade-off

AI를 활용해 초기에 수많은 시안을 빠르게 확보할 수 있었으나 실제 모바일의 작은 화면에서 디테일이 뭉개지는 현상이 발생하여, 디자이너가 수작업으로 많은 시각 요소를 덜어내고 핵심 실루엣만 남겨야 하는 리소스 최적화 단계를 거쳐야 했습니다.