토스 인터랙션 디자이너의 모든 것

많은 사용자들이 홈 화면에 사용하지 않는 계좌를 남겨두고 있어서 하단에 있는 중요한 기능이 노출되지 않는다는 문제의식이 있었어요. 많은 사용자에게 행동을 유도해야했고 앱을 열자마자 무조건 이 기능을 노출해야했죠. 강제적이지 않으면서도 정보를 자연스럽게 전달하기위해 연결성 있게 퍼널을 만들었어요. 결과적으로 30%의 유저가 계좌를 숨기고, 하단 영역을 확인하는 유저의 비중이 약 5~7%p 정도 증가했어요.

사용성 문제 해결 외에, 유저 경험의 디테일을 높이는 작업도 해요

토스의 디자인 시스템 TDS의 인터랙션도 고민해요

버튼 컴포넌트 안에서 로딩중인 상태를 어떻게 보여줄지, 수량 선택하는 컴포넌트에서 더 명확하게 터치 피드백을 줄 수 있는 모션이 무엇인지 등 TDS 컴포넌트의 인터랙션 개선 작업도 해요.

지표로 개선의 효과를 보기 어려운 작업이라, 대신 유저가 피드백을 잘 인지하는지, 모션감을 어떻게 느끼는지 20대~50대 유저 약 300명에게 선호도 UT를 진행해 개선하고 있어요.

제품의 사용성 개선 뿐만 아니라, 시각적인 완성도를 높이는 작업도 진행해요

프로덕트 브랜딩 팀과 함께 장애인의 날 기념, 보안의 날 캠페인 등 시즈널 이벤트의 메세지와 컨셉을 극대화하기 위해 협업하고 있어요

또 디자인 컨퍼런스 <Simplicity 23>의 웹사이트처럼, 토스 제품이 아니지만 인터랙션이 필요한 경우에도 디자인을 진행하고 있어요. 브랜드 디자이너, 그래픽 디자이너 등 다양한 직군과의 협업하며 새로운 시도들을 해볼 수 있는 기회가 많아요.

인터랙션 디자인에 그치지 않고, 인터랙션 시스템까지 만들어요

인터랙션의 시스템화, 인터랙션 컴포넌트

제품 하나 하나 마다 인터랙션 디자이너가 붙지 않고도 인터랙션을 더 많이 전파할 수 있다면 얼마나 좋을까요! 그래서 모든 프로덕트 디자이너분들이 간단한 인터랙션, 모션은 스스로 만들 수 있도록, 인터랙션 컴포넌트 시리즈를 만들었어요.

무언가를 강조할 때, 리스트가 화면 안에 등장하고 사라질 때, 글자에 모션을 넣을 때 등 각 상황에 맞는 다양한 모션을 컴포넌트화 해서 프로덕트 디자이너분들이 Framer에서 쉽게 사용할 수 있게 했어요.

Framer에서 어떤 레이어든 연결하면 미리 만들어진 모션 프리셋들을 클릭 한번에 적용할 수 있어요.

플랫폼 공통 인터랙션 라이브러리, Rally

이렇게 인터랙션을 시스템화 하려는 시도는 디자인으로만 그치지 않아요. Easing 처럼 모션의 작은 단위부터 복잡한 시퀀스까지 같은 스펙으로 구현하고 소통할 수 있는 iOS/Android/Web 공통 인터랙션 개발 라이브러리 ‘Rally’를 저희 팀에서 직접 만들었어요.

토스에선 개발자분들이 전달받은 영상을 눈으로 보고 따라 만들지 않고, 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를 통해 정성적 피드백을 많이 반영하고 있어요.

토스 인터랙션 디자인에 대해 더 궁금하시다면 아래 링크를 확인해주세요

인터랙션, 꼭 넣어야 해요?

빠른 속도를 중요시하는 토스에서 어떻게 팀원들을 인터랙션에 공감하게 하고 슬릭한 제품을 만들어나갈 수 있었는지 소개할게요.

https://toss.tech/article/interaction

심플리시티23 세션 (https://simplicity-23.toss.im/sessions/21)

첫 인터랙션 디자이너가 문제를 해결하는 법

처음 입사했을 때 인터랙션 디자이너의 역할에 대해 막연하게 느꼈을 때가 있었어요. 하지만 제품의 문제를 하나씩 해결하면서 저의 역할을 정의해나갈 수 있었어요. 어떤 시행착오가 있었는지 공유해 드릴게요.

https://toss.tech/article/1st_interaction_designer

직접 만지고, 돌리는 토스뱅크카드 인터랙션

토스뱅크카드의 중요한 디자인 컨셉은 앞면과 뒷면의 색상이 다르다는 것인데요. 지금까지는 이 정보를 표현하기 위해서 이미지를 두 장 쓰거나, 영상을 만들었죠. 하지만 그걸로는 부족했어요. 저는 모바일 화면에서도 실물 카드를 보는 것과 똑같은 경험을 만들고 싶었어요.

https://toss.tech/article/touch-and-turn-tossbankcard

이런 분을 찾고 있어요

꼭 인터랙션 디자이너로 일한 경력이 없으시더라도, 아래에 해당하는 분을 모시고 싶어요.

정적인 화면을 보면 동적으로 만들고 싶어지는 분

정적인 화면을 보고 ‘이렇게 움직인다면?’, ‘저렇게 움직인다면?’ 하는 상상력을 가진 분을 찾고 있어요.

떠오른 아이디어를 Hi-fi 프로토타입으로 만들 수 있는 분

ProtoPie, Principle, Framer, 코딩 등 어떤 프로토타이핑 툴을 사용하셔도 좋아요. 대신 만져보고 사용해볼 수 없는 영상 말고, 제스처에 반응하는 인터랙티브한 프로토타입을 만들 수 있는 분을 찾고 있어요.

토스 인터랙션 디자이너 채용 공고 보기

토스채용

공고 자세히 보기

https://toss.im/career/job-detail?job_id=5899121003

아직도 지원하기 망설여진다면?

토스에선 지원하기 전에 현업과 만나서 이런 저런 궁금한 것들을 편하게 물어보고 얘기할 수 있는 커피챗 제도가 있어요.

토스 채용팀(recruit@toss.im)으로 인터랙션 디자이너와 커피챗 하고 싶다고 연락 주세요!

역삼에 있는 토스 오피스에 오셔서 대면으로 얘기 할 수도 있고, 화상으로도 가능해요.