Lottie 애니메이션으로 설계하는 고객중심 금융경험의 미래, 뱅크샐러드

뱅크샐러드는 마이데이터를 기반으로 가계부, 금융(대출·카드·앱테크), 건강(보험·유전자 검사)을 아우르는 서비스를 제공하는 핀테크 기업입니다. 현재는 축적된 데이터를 바탕으로 금융 AI 에이전트 사업으로의 확장을 가속화하고 있으며, 이 과정에서 유저가 복잡한 금융 생활을 더욱 직관적이고 즐겁게 경험할 수 있도록 서비스 전반의 인터랙션 품질을 높이는 데 집중하고 있습니다.

 “사용자 경험의 품질은 디테일의 총 합이다.”
Banksalad CDO 홍성준

뱅크샐러드 디자인팀은 유저의 모든 접점에서 흥미롭고 유익한 경험을 제공하기 위해 Lottie 애니메이션을 다각도로 활용하고 있습니다. 홈 화면의 로고 모션이나 하단 네비게이션 아이콘에 생동감을 불어넣어 인터랙션의 재미를 더하는 것은 물론, 각 도메인의 핵심 메시지를 더욱 임팩트 있게 전달하고 있습니다. 특히 데이터 로딩과 같은 대기 상황에서도 유저가 지루함을 느끼지 않도록 정교한 모션을 설계하여 서비스의 완성도를 높였습니다.

뱅크샐러드가 추구하는 브랜딩의 핵심은 “정직하게” “세심하게” 그리고 “유쾌하게” 입니다. 정확한 정보를 단지 심미적인 그래픽으로 표현함에 머물지 않고, 애니메이션을 통해 생동감을 부여함으로써 전달하고자 하는 메시지를 유저의 기억 속에 더욱 깊이 각인시키고 있습니다.

[하이브리드 Lottie 구성을 통한 시각적 한계 극복]

Lottie는 벡터 기반의 특성상 해상도 저하 없이 고품질 모션 그래픽을 구현할 수 있다는 장점이 있습니다. 하지만 제작 과정에서 그림자와 같이 부드럽게 퍼지는 블러(Blur) 효과나 Glow 효과등을 표현해야 할 때는 벡터 방식만으로는 구현에 한계가 따르기도 합니다.

우리는 이러한 기술적 제약을 해결하기 위해, 특정 시각 요소들을 이미지(PNG 등)로 개별 렌더링하여 JSON 파일에 포함시키는 하이브리드 대응 방식을 활용하고 있습니다. 특히 그림자처럼 디테일한 표현이 필요한 요소는 컴포지션 해상도를 통상 2배 이상 확보하여 이미지의 선명도를 유지합니다. 이후 해당 이미지 에셋을 나머지 벡터 그래픽들과 결합하여 모션을 구성함으로써, 리소스 최적화와 시각적 완성도 사이의 균형을 맞춘 Lottie 에셋을 제작하고 있습니다.

이러한 방식은 JSON 파일의 용량이 소폭 증가하더라도, Lottie 기본 엔진만으로는 구현하기 어려운 풍부한 비주얼 효과를 앱 내에 온전히 재현할 수 있게 해줍니다. 결과적으로 영상 매체에서나 가능했던 다채로운 연출을 인터랙티브한 환경에서도 동일하게 구현할 수 있게 되었으며, 이는 서비스의 표현 범위를 확장함과 동시에 앱 성능을 고려한 유연한 모션 디자인 솔루션으로 작용하고 있습니다.

My AI Agent, 토핑 플러스

‘토핑플러스'는 고객이 가장 혜택을 많이 받을 시점에 정확한 솔루션을 자동으로 제안하고, 복잡한 실행 업무까지 대신하는 뱅크샐러드의 AI 에이전트 서비스 입니다. 본 서비스의 정체성을 시각화하기 위해 상황에 따라 유연하게 변화하는 3D 키 비주얼을 제작하였으며, 이를 PNG 시퀀스로 렌더링하고 Lottie에 이식 했습니다.

해당 메인 그래픽은 AI의 상태나 맥락에 따라 형태와 색상이 정교하게 변해야 하는 복잡한 구조를 가지고 있었습니다. 이를 Lottie로 컨트롤 함으로써, 개발자가 코드를 통해 애니메이션의 특정 시퀀스 구간을 자유롭게 제어할 수 있는 환경을 구축했습니다. 이는 디자인된 3D 비주얼을 유연하게 다룰 수 있게 하였으며, 결과적으로 상황별 맞춤 연출이나 유저의 실시간 인터랙션에 즉각적으로 대응하는 시스템을 완성할 수 있었습니다.

이러한 시도를 통해 디자인과 개발의 경계를 허무는 기술적 협업을 실현할 수 있었고, 토핑 플러스 AI의 비주얼 또한 인공지능의 지능적인 속성에 걸맞게 상황에 최적화된 스마트한 모션 그래픽으로 구현되었습니다.

지출 의리 게임, 샐러드게임

뱅크샐러드의 지출 의리 게임인 ‘샐러드게임’에 3D 그래픽을 도입할 당시, Lottie는 고품질 비주얼과 성능 사이의 균형을 잡는 데 핵심적인 역할을 수행했습니다. 특히 3D로 제작된 귀여운 캐릭터 애니메이션을 앱에 그대로 구현할 때 발생할 수 있는 리소스 용량 및 기기 퍼포먼스 저하 문제를 해결하는 것이 가장 큰 과제였습니다.

우리는 이를 해결하기 위해 Lottie의 Optimized JSON 포맷을 적극적으로 활용했습니다. 3D 애니메이션을 PNG 이미지 시퀀스로 출력한 뒤, 이를 Lottie 파일에 첨부하여 Optimized Json으로 렌더링하는 방식을 채택했습니다. 그 결과, 3D 그래픽 특유의 고해상도 퀄리티를 온전히 유지하면서도 앱 내에서 매우 부드럽고 가볍게 동작하는 결과물을 완성할 수 있었습니다.

이러한 기술적 최적화 덕분에 유저들은 데이터나 성능에 대한 부담 없이, 3D 캐릭터가 선사하는 높은 몰입감 속에서 더욱 즐겁게 지출 관리 챌린지에 참여할 수 있었습니다.

[디자인과 개발의 간극을 줄이는 효율적인 협업]

저희는 Adobe After Effects에서 정교한 모션을 설계하고, LottieFiles for AE 플러그인을 통해 JSON 파일로 변환하여 실무에 적용하고 있습니다. 이 프로세스의 가장 큰 강점은 After Effects에서 제작한 모션을 즉각적으로 프리뷰할 수 있으며, Android, iOS, Web 등 다양한 플랫폼에서의 구동 환경을 사전에 검증할 수 있다는 점입니다. 이러한 실시간 확인 과정을 통해 최종 리소스 생성 전 발생할 수 있는 잠재적 이슈를 미리 파악하고 수정함으로써, 전체적인 작업 시간과 리소스를 절약하고 있습니다.

또한, Lottie 애니메이션은 벡터(Vector) 기반이기에 해상도와 관계없이 어떠한 디스플레이 환경에서도 일관된 고품질의 시각 경험을 선사합니다. 특히 일반 영상 파일 대비 부드러운 프레임 구현이 가능하여, 유저에게 더욱 깊은 몰입감과 인상적인 브랜드 경험을 제공하고 있습니다.

현재 앱 내부에서는 정적인 로고나 아이콘의 한계를 넘어, Lottie를 활용한 역동적인 반응형 애니메이션을 적극적으로 도입하고 있습니다. 만약 이러한 정교한 모션들을 코드로 일일이 구현했다면 표현의 한계는 물론, 디자이너와 개발자 간의 무수한 커뮤니케이션 비용이 발생했을 것입니다. 하지만 Lottie를 매개체로 디자이너의 의도를 온전히 담은 결과물을 개발단에 즉시 전달할 수 있게 되었고, 결과적으로 작업 효율성과 프로덕트의 완성도를 동시에 높일 수 있었습니다.

방치형 게임, 일해라 김뱅샐

뱅크샐러드 새로운 피처, ‘일해라 김뱅샐’은 유저 대신 캐릭터가 돈을 벌어다 주는 방치 성장형 앱테크 서비스 입니다. 캐릭터는 계속해서 일을하며 돈을 벌고 있고 유저는 가끔 들어와서 에너지를 채워주고 승진을 시키며 시급을 높이는 재미를 느끼게 됩니다. (뱅크샐러드 앱 ‘용돈벌기’ 탭에서 찾을 수 있습니다)

UX 설계의 핵심은 직급 상승에 따라 김뱅샐의 머리, 안경, 의상 등 다양한 그래픽 에셋이 정교하게 교체되는 것이었습니다. 캐릭터의 생동감 넘치는 애니메이션을 유지하면서, 동시에 수많은 조합의 에셋을 효율적으로 관리해야 하는 기술적 과제가 있었습니다.

개발팀과의 긴밀한 협업 끝에 우리는 Lottie를 활용한 최적의 솔루션을 찾았습니다. 하나의 로티 파일 안에 에셋이 교체될 레이어를 미리 지정해두고, 서버에서 각 레벨에 맞는 그래픽 에셋을 불러와 실시간으로 치환하는 방식입니다. 디자인영역에서는 디테일한 애니메이션을 담당하고 개발영역에서는 그래픽에셋을 실시간으로 교체하는 시스템을 구축했습니다. 덕분에 하나의 로띠 파일로 레벨업이 될 때마다 바뀌는 그래픽 에셋은 개발에서 불러와 적용하는 효율적인 방식을 만들수 있었고 '디테일한 사용자 경험'과 '운영 효율성'이라는 두 마리 토끼를 모두 잡을 수 있었습니다.

월 평균 매출 1억 원, 하이라이트 배너

뱅크샐러드는 매월 홈 화면의 ‘하이라이트 배너’를 통해 유저에게 핵심적인 금융 혜택을 전달하고 있습니다. 25년 한 해 성과를 데이터로 분석한 결과, 하이라이트 배너는 매월 평균 1억 원에 달하는 매출을 자체적으로 창출하며 강력한 비즈니스 가치를 증명해왔습니다.

이러한 정량적 성과를 거둘 수 있었던 핵심 비결은 바로 Lottie를 활용한 임팩트 있는 모션 디자인에 있었습니다. 우리는 모션을 단지 시각적 장식이 아닌, 메시지 전달력을 극대화하는 강력한 스토리텔링 수단으로 재정의했습니다. Lottie를 본격적으로 도입하며 일어난 프로세스의 변화는 매우 컸습니다. UX 설계가 필요한 다양한 유저의 맥락속에서, 고객이 정보를 스캐닝하는 짧은 시간속에 전하고자 하는 메시지를 효과적으로 전달할 수 있는 핵심적인 요소로 활용되고 있습니다. 이처럼 애니메이션은 뱅크샐러드 프로덕트 경험의 핵심적인 구성 요소로 자리 잡았습니다.

이 모든 과정은 Lottie의 유연한 기술력이 뒷받침되었기에 가능했습니다. 뱅크샐러드는 앞으로도 Lottie와 함께 생동감 넘치는 모션을 구현하며, 마이데이터 금융 경험의 품질을 끊임없이 높여나갈 것입니다.

BX팀의 한마디
“정적인 디자인에 Lottie로 생동감 넘치는 숨결을 불어넣었습니다. 덕분에 뱅크샐러드만의 역동적인 브랜드 가치가 유저의 일상 속에 생생하게 살아 움직이게 되었습니다.”

박문경 / Moonkyung Park - Brand Designer Lead
박병선 / Byeongseon Park - Brand Designer
홍승재 / Seungjae Hong - Brand Designer