직접 만지고, 돌리는 토스뱅크카드 인터랙션
김지혜 토스 · 토스 기술 블로그
AI 핵심 요약
토스뱅크카드는 앞면과 뒷면의 색이 달라 정적인 이미지나 영상만으로는 특징을 충분히 전달하기 어려웠다. 디자이너는 사용자가 카드를 직접 잡고 돌려보는 경험을 만들기 위해 Spline으로 화면별 모션을 제작해 Framer에 임베드하고, 개발자와 긴밀히 협업해 Three.js 기반 구현을 진행했다. 카드 회전에 맞춰 색상을 보여주고 버튼 색도 카드와 연동한 발급 화면은 디자인을 포함해 2주 안에 개발됐으며, 이후 다른 토스 제품에도 인터랙티브 그래픽이 활용됐다. 이 사례는 도구와 구현의 제약을 협업으로 풀고, 사용성 개선을 위한 과감한 아이디어를 먼저 구체화하는 일이 새로운 인터페이스를 여는 계기가 될 수 있음을 보여준다.
- 정적인 이미지나 영상 대신 사용자가 직접 조작하는 인터랙션으로 제품의 특징을 명확히 전달할 수 있다.
- Spline의 화면별 모션을 Framer에 임베드해 프로토타입을 만들고, 툴로 표현하기 어려운 동작은 개발자와 구체적으로 공유했다.
- 새로운 그래픽 기술을 제품에 적용할 때는 Spline, WebGL, Three.js 등을 검토하고 성능·구현 우려를 미리 확인한다.
- 디자인·개발·그래픽 팀이 목표를 공유하면 구현 난도가 높은 사용자 경험도 빠르게 실험할 수 있다.
- 실현 가능성만 따르기보다 구현하기 어려운 아이디어도 먼저 그려보는 태도가 새로운 인터페이스의 출발점이 될 수 있다.
소개
토스뱅크카드의 중요한 디자인 컨셉은 앞면과 뒷면의 색상이 다르다는 것인데요. 지금까지는 이 정보를 표현하기 위해서 이미지를 두 장 쓰거나, 영상을 만들었죠. 하지만 그걸로는 부족했어요. 저는 모바일 화면에서도 실물 카드를 보는 것과 똑같은 경험을 만들고 싶었어요.
비슷한 학습 자료
문서 류관준
하마터면 못생겨질 뻔했다 - 토스 프론트 2 제작기
문서 김경태 / 김영하
세션을 대표하는 키비주얼 그래픽 | Simplicity 4 제작기 #4
문서 박수현
토스 디자이너가 제품에만 집중할 수 있는 방법
문서 박연주/김지혜
인터랙션, 꼭 넣어야 해요?
문서 심석용
30대 디자이너가 10대 전용 카드를 만든다면?
문서 고현선