2023.11.29
반가워요! 토스의 인터랙션 디자이너에 대해 궁금해 하시는 것들을 정리해봤어요.
인터랙션 디자이너는 어느 팀 소속인가요?
토스의 인터랙션 디자이너는 UX Platform Tribe의 Interaction Team에 속해있어요.
팀은 인터랙션 디자이너와 iOS, Android, Web 개발자분들로 이루어져있고, 토스 내 다양한 사일로들과 협업하며 일하고 있어요.
인터랙션 디자이너는 어떤 일을 하나요?
토스 제품의 문제를 인터랙션으로 해결해요
어떻게 하면 다른 사람에게 잘못 송금하는 실수를 줄일 수 있을까?
송금팀에서 토스 TOP 10 voc중 하나인 착오 송금 문제를 해결하고 싶어했어요.
바텀싯이나 툴팁으로 받는분 이름을 강조하는 방법 대신, 화면 중앙에서 한번 더 크게 확인시켜주면서도 모션으로 UI 변화를 자연스럽게 이어서 뎁스가 느껴지지 않게 했어요.
개선 전 3개월간 지속 증가해오던 착오송금 관련 voc가, 개선 후 약 25% 줄었어요.
신용점수가 올랐을 때, 자연스럽게 대출 조회를 유도해보자!
신용팀에서 신용점수가 올랐을 때 축하해주고, 동시에 불쾌하지 않게 대출 금리 조회를 유도하고 싶어했어요.
기존 신용홈의 UI를 활용한 모션(v1)을 디자인했고, 몇달 후 신용홈 디자인이 개편됐을 때 그에 맞게 모션(v2)도 개편했어요.
이 인터랙션으로 신용홈에서 대출 조회로 넘어간 유저들의 대출 가심사 완료율(CVR)이 약 21.9% 상승했고, 전체배포 후 신용팀의 월 매출이 큰 폭으로 증가했어요.
유저가 가장 많이 이탈하는 약관 화면, 개선해볼 수 없을까?
카드팀에 카드 신청 시 이탈률이 가장 높은 약관 화면을 개선해보자고 제안했어요.
카드를 우편으로 전달받을때의 경험을 살린 A안과, 필수/선택약관의 화면을 분리한 후 CTA만 눌러서 넘어갈 수 있게 한 B안을 만들어 실험했어요.
기존안 대비 B안이 이탈률(26% → 22%), 카드 신청 성공률(48.65% → 52.05%) 모두 개선되었어요.
실시간으로 조회 결과를 보여주면 이탈률이 줄어들지 않을까?
대출 심사화면은 30초 이상의 심사 시간이 소요되는 퍼널이에요. 기존에는 정적인 화면을 보여줬다면, 실시간으로 정보를 보여주어 진행상황을 보여주는 방식으로 개선하여 이탈률을 개선했어요.
유저들이 사용하지 않는 계좌를 어떻게 자연스럽게 정리해줄까?
많은 사용자들이 홈 화면에 사용하지 않는 계좌를 남겨두고 있어서 하단에 있는 중요한 기능이 노출되지 않는다는 문제의식이 있었어요. 많은 사용자에게 행동을 유도해야했고 앱을 열자마자 무조건 이 기능을 노출해야했죠. 강제적이지 않으면서도 정보를 자연스럽게 전달하기위해 연결성 있게 퍼널을 만들었어요. 결과적으로 30%의 유저가 계좌를 숨기고, 하단 영역을 확인하는 유저의 비중이 약 5~7%p 정도 증가했어요.
사용성 문제 해결 외에, 유저 경험의 디테일을 높이는 작업도 해요
토스의 디자인 시스템 TDS의 인터랙션도 고민해요
버튼 컴포넌트 안에서 로딩중인 상태를 어떻게 보여줄지, 수량 선택하는 컴포넌트에서 더 명확하게 터치 피드백을 줄 수 있는 모션이 무엇인지 등 TDS 컴포넌트의 인터랙션 개선 작업도 해요.
지표로 개선의 효과를 보기 어려운 작업이라, 대신 유저가 피드백을 잘 인지하는지, 모션감을 어떻게 느끼는지 20대~50대 유저 약 300명에게 선호도 UT를 진행해 개선하고 있어요.
제품의 사용성 개선 뿐만 아니라, 시각적인 완성도를 높이는 작업도 진행해요
프로덕트 브랜딩 팀과 함께 장애인의 날 기념, 보안의 날 캠페인 등 시즈널 이벤트의 메세지와 컨셉을 극대화하기 위해 협업하고 있어요
또 디자인 컨퍼런스 <Simplicity 23>의 웹사이트처럼, 토스 제품이 아니지만 인터랙션이 필요한 경우에도 디자인을 진행하고 있어요. 브랜드 디자이너, 그래픽 디자이너 등 다양한 직군과의 협업하며 새로운 시도들을 해볼 수 있는 기회가 많아요.
인터랙션 디자인에 그치지 않고, 인터랙션 시스템까지 만들어요
인터랙션의 시스템화, 인터랙션 컴포넌트
제품 하나 하나 마다 인터랙션 디자이너가 붙지 않고도 인터랙션을 더 많이 전파할 수 있다면 얼마나 좋을까요! 그래서 모든 프로덕트 디자이너분들이 간단한 인터랙션, 모션은 스스로 만들 수 있도록, 인터랙션 컴포넌트 시리즈를 만들었어요.
무언가를 강조할 때, 리스트가 화면 안에 등장하고 사라질 때, 글자에 모션을 넣을 때 등 각 상황에 맞는 다양한 모션을 컴포넌트화 해서 프로덕트 디자이너분들이 Framer에서 쉽게 사용할 수 있게 했어요.
Framer에서 어떤 레이어든 연결하면 미리 만들어진 모션 프리셋들을 클릭 한번에 적용할 수 있어요.
플랫폼 공통 인터랙션 라이브러리, Rally
이렇게 인터랙션을 시스템화 하려는 시도는 디자인으로만 그치지 않아요. Easing 처럼 모션의 작은 단위부터 복잡한 시퀀스까지 같은 스펙으로 구현하고 소통할 수 있는 iOS/Android/Web 공통 인터랙션 개발 라이브러리 ‘Rally’를 저희 팀에서 직접 만들었어요.
.png&blockId=031a6db1-495a-4239-8466-3d001d8dd891)
토스에선 개발자분들이 전달받은 영상을 눈으로 보고 따라 만들지 않고, Framer 인스펙터나 인터랙션 개발 가이드에 나오는 Rally 코드로 개발해요. 3개 플랫폼 구분없이 스펙을 정확하게 전달할 수 있어서 구현 퀄리티도 뛰어나고, 모션 QA를 할 때도 Rally라는 같은 언어로 커뮤니케이션 할 수 있어요.
iOS, Android, Web 3개 플랫폼에서 공통 스펙으로 인터랙션을 개발할 수 있는 랠리
어떤 프로세스로 일하는지 궁금해요
시작하는 단계
PD분이 해결하고 싶은 문제를 들고 찾아오시기도 하고, 저희가 먼저 제안해서 시작하기도 해요.
보통은 각 사일로의 Product Designer가 해결하고 싶은 문제를 들고 저희를 찾아와요. 데이터와 유저보이스를 많이 공유해주시기 때문에 원하는 만큼 히스토리를 파악할 수 있어요. 또는 저희가 인터랙션으로 개선할 수 있을 것 같은 지점을 찾아 먼저 제안드리기도 해요.
TDS 컴포넌트는 PD분들이 ‘이런거 필요해요, 불편해요'라고 요청이 들어오는 것을 우선적으로 개선해요. 혹은 반복적으로 쓰이는 인터랙션 패턴을 수집해서 새로운 컴포넌트로 만들어요.
프로토타이핑 단계
어떤 툴을 써야 한다 정해진 건 없지만, Framer와 ProtoPie를 가장 많이 사용하고 있어요.
몇 가지 아이디어가 나오면 프로토타입으로 만들어보는데, 어떤 툴을 써야 한다 정해진 건 없어요. ProtoPie, Principle, Framer, 웹 코딩(framer-motion, gsap) 등 다양한 툴을 사용할 수 있어요.
간단한 작업은 TDS를 바로 사용할 수 있는 Framer로 많이 하고, 복잡한 작업은 링크 공유가 쉽고 햅틱을 넣을 수 있는 등의 장점 때문에 ProtoPie를 가장 많이 사용해요.
툴은 입사하시면 저희가 자주 사용하는 기능을 알려드리는 온보딩 시간이 있으니 걱정하지 마세요!
개발 단계
토스팀 자체 인터랙션 개발 라이브러리인 ‘Rally’로 개발 가이드를 만들고 소통해요.
토스에선 Interaction Team에서 자체적으로 만든 iOS/Android/Web 공통 인터랙션 개발 라이브러리 ‘Rally’로 모든 인터랙션을 개발하고 있어요.
그래서 개발자에게 프로토타입 영상을 드리면서 따라서 만들어달라고 하지 않고, Rally 스펙으로 개발 가이드를 작성해서 정확하게 개발될 수 있도록 전달해요. 개발자와 디자이너가 ‘Rally’라는 같은 언어를 사용하기 때문에 가이드도 명확하게 작성할 수 있고, 소통의 오류가 매우 적어졌어요.
Rally로 개발 가이드 쓰는 법은 들어오시면 다 알려드려요! 코딩을 전혀 할 줄 모르셔도 금방 배울 수 있어요.
테스트 단계
개발 후 보통은 A/B 테스트를 통해 지표를 보고 전체 적용을 하고, UT도 많이 진행해요.
새롭게 시도하는 디자인인 경우, A/B 테스트를 통해 비즈니스와 관련된 지표를 보고 기존 안보다 떨어지지 않으면 전체 적용을 진행해요. 사용성 개선이 중요한 프로젝트라면 UT나 VOC를 통해 정성적 피드백을 많이 반영하고 있어요.
토스 인터랙션 디자인에 대해 더 궁금하시다면 아래 링크를 확인해주세요
이런 분을 찾고 있어요
꼭 인터랙션 디자이너로 일한 경력이 없으시더라도, 아래에 해당하는 분을 모시고 싶어요.
정적인 화면을 보면 동적으로 만들고 싶어지는 분
정적인 화면을 보고 ‘이렇게 움직인다면?’, ‘저렇게 움직인다면?’ 하는 상상력을 가진 분을 찾고 있어요.
떠오른 아이디어를 Hi-fi 프로토타입으로 만들 수 있는 분
ProtoPie, Principle, Framer, 코딩 등 어떤 프로토타이핑 툴을 사용하셔도 좋아요. 대신 만져보고 사용해볼 수 없는 영상 말고, 제스처에 반응하는 인터랙티브한 프로토타입을 만들 수 있는 분을 찾고 있어요.
현재 열려있는 토스 인터랙션 디자이너 채용 공고
