직접 만지고, 돌리는 토스뱅크카드 인터랙션
토스뱅크카드 만들어 보셨나요?
토스뱅크가 출범한 지도 벌써 1년이 지났는데요. 당시에 카드를 발급받으신 분이라면 이 화면을 경험하셨을 거예요. 이 화면에서 4가지 색상의 카드 중 어떤 색을 고를지 한참을 고민하셨다면 저는 너무 뿌듯할 것 같아요. 카드를 고르는 사용자를 위해, 어떻게 디자인하게 되었는지 비하인드 스토리를 공유해드릴게요.
토스뱅크카드의 중요한 디자인 콘셉트는 앞면과 뒷면의 색상이 다르다는 것인데요. 정적인 이미지로는 앞/뒤 색상이 다른지 알기 어려워요. 잘못했다간 “저는 검정 카드를 선택했는데, 핑크 카드가 왔어요.” 라는 오해가 생길 수도 있죠. 지금까지는 대부분의 제품이 이런 문제를 이미지를 두 장 넣거나, ‘앞뒤가 다릅니다’라고 설명하는 방식으로 풀어왔어요. 조금 더 신경 쓰면 MP4 영상으로 만들거나요.
하지만 저는 모바일 화면에서도 실물 카드를 보는 것과 똑같은 경험을 만들고 싶었어요. 그러려면 사용자가 수동적으로 정보를 수용하는 게 아니라, 능동적으로 경험에 참여하게 만들어야 했어요. 인터랙티브한 경험으로요.
직접 만지고, 돌리고, 뒤집어보면서 내가 쓰게 될 카드를 마치 손에 쥐고 있는 듯한 느낌을 주는 거죠.
인터랙티브한 경험을 만드는 과정
지금도 그렇지만, 당시에도 사용자가 인터랙션할 수 있는 그래픽을 만들 수 있는 디자인 툴이 없었어요. HandOff가 어렵기 때문에 여러 가지 디자인 툴을 써보고 개발자분과 긴밀하게 소통하면서 극복해야 했죠. 동일한 목표를 위해 개발자와 긴밀하게 싱크하는 것이 중요했어요.
예를 들면 Cinema 4D는 영상 제작 툴이라 사용자가 Touch Up 했을 때 애니메이션을 주기 어려워요. 영상처럼 만들 수밖에 없죠. Spline만으로는 플로우를 프로토타입 하긴 어렵고요. 그래서 저는 Spline에 화면 별로 모션을 각각 만들어서 Framer에 임베드하는 방식으로 프로토타입을 만들었어요. 툴에서 표현할 수 없는 것들은 구두로 개발자분께 하나하나 공유해 드렸고요.
사용자가 처음 화면을 만나면, 카드를 한번 빠르게 회전시켜서 앞 뒤 색이 다르다는 걸 보여줬어요. 카드를 잡으면 회전이 멈추고, 손을 놓으면 다시 원래 자리로 돌아가서 자연스럽게 회전할 수 있도록 모션을 튜닝했어요. 하단 버튼은 토스의 브랜드 컬러로 파란색을 쓰고 있었는데, 이게 카드와 함께 있으니 너무 튀는 거예요. 이 화면만큼은 카드 색과 어울리게 만들고 싶었어요. 보고 있는 카드 색상과 버튼 색상이 연동되면 좋겠다고 생각했죠. 사실 이건 아이디어만 갖고 있었고, 실제로 구현하기는 어려울 수 있겠다고 생각했어요. 그래서 색상이 루핑되면서 재생되는 정도로 스펙 아웃하는 것을 염두에 두기도 했고요. 그런데 놀랍게도 개발자분께서 제가 의도한 것들을 전부 구현해주셔서, 정말 기뻤죠.
이런 과정을 거쳐 만든 결과물이 여러분이 만났던 토스뱅크카드 발급 과정이에요. 사용자분들의 반응도 정말 좋았어요.
화면을 캡쳐해서 SNS에 업로드한 사용자들
인터랙티브한 경험을 만들기 어려운 이유
하지만 이렇게 모바일에서 인터랙티브한 경험을 구현한 사례는 찾기가 정말 어려워요. 이렇게 장점이 명확한데 그동안 왜 아무도 하지 않았을까요?
크게 세 가지 이유가 있어요.
- 사용자가 인터랙션할 수 있는 그래픽을 만들 수 있는 디자인 툴이 없어요.
- 처음 시도하는 기술이라면 디자이너와 개발자에게 진입장벽이 있어요.
- 사용자 경험을 디테일하게 챙기는 일들은 빠른 속도로 제품을 만드는 팀에서 해내기 어려워요.
첫 번째 문제를 해결하기 위해서 팀원들이 여러 가지 툴을 찾아보기 시작했어요. 수영님이 Spline이라는 툴을 써보자고 제안해주셨고, 현선님은 C4D와 같은 그래픽 톤을 만들기 위해 텍스쳐와 라이팅을 테스트하셨죠. 저는 Spline을 활용해서 컨셉 디자인을 했어요.
두 번째 문제는 병철님이 Spline을 Framer에서 프로토타입 할 수 있도록 환경을 만들어줬어요. 그리고 Spline, WebGL, Three.js 등을 모바일 제품에 적용했을 때 우려되는 점들을 기술 검토했죠. 그러고 나니 Three.js라는 기술로 해결할 수 있겠다는 결론이 났고 추후 개발자 덕성님이 합류했을 때 작업에 바로 착수할 수 있었어요.
하지만 가장 큰 문제는 세 번째예요. 이렇게 사용자 경험을 Extramile해서 챙기는 일은 빠르게 돌아가는 애자일 조직에서는 공감대를 얻기가 어렵죠. 앞에서 말한 두 가지 문제도 ‘이 프로젝트를 해야 한다’는 전제 없이는 생길 수 없는 문제고요. 하지만 토스에는 디자인 플랫폼이라는, 사용자 경험을 극대화하는 조직이 따로 있어요.
21년 당시 저희 팀은 “Paradigm Shift in Interface Design”이라는 이니셔티브 아래에, 해결하기 어려운 사용성 문제를 디자인﹒개발﹒그래픽﹒인터랙션 등을 융합하여 해결해낸다는 목표가 있었는데요. 팀원들이 같은 페이지 위에서 목표를 공유하고 있다보니, 앞에서 말한 두 가지 문제도 굉장히 빠르게 해결되고, 일이 엄청난 속도로 진행되었어요.
인터랙티브한 경험을 만들고 난 뒤 생긴 일
토스뱅크카드의 발급 과정은 디자인을 포함해서 2주 안에 개발이 끝났어요. 시작하기 전에는 공수가 많이 들어가지 않을까 걱정했는데 실제로 해보니 금방 해낼 수 있었죠. 위에서 말씀드렸던 것처럼, 출시하고 나니 이 화면을 캡처하면서 SNS를 공유하시는 등 바이럴이 좋았어요.
더 뿌듯했던 건, 이 프로젝트 이후 시스템으로 자리잡아 여러 제품에서 활용되고 있다는 점이에요. 틴즈 회원들이 신청하는 유스카드 발급화면이나, 증권의 뱃지 화면 등 토스 앱에 인터랙티브한 그래픽 사례들이 빠르게 만들어졌죠. 토스뱅크카드를 시작으로, ‘인터랙티브한 경험’을 만드는 게 새로운 선택지가 된 거예요.
상상할 수 없는 것을 상상하기 위해서
이렇게 좋은 성과를 내긴 했지만, 사실 저희 인터랙션 팀도 현실에 부딪혀 스펙 아웃을 하는 경우가 대다수예요. 처음엔 비주얼을 멋지게 만들어서 팀원들을 동기부여 하면 된다고 생각했지만, 일의 임팩트와 공수를 고려하다 보면 구현할 수 있는 수준으로 디자인을 수정하는 일을 겪을 수 밖에 없더라고요. 하지만 구현할 수 없더라도, 스펙아웃 될 것을 알면서도 항상 우리의 Moonshot을 그리는 태도가 가장 중요하다고 생각해요. 상상할 수 없는 것을 상상하기 위해서는 말이에요!
사용자의 불편함을 인터랙티브한 인터페이스로 해결할 수 있는 미지의 땅이 아직 많이 있다고 생각해요. 이 프로젝트가 초석이 되어 세상에 이러한 시도가 더 많아지길 기대하고 있답니다. 좋은 영감이 되었길 바라며 글을 마무리할게요!
