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

김지혜 · 토스코어 Interaction Designer
2023년 5월 4일

토스 Interaction Designer는 어떤 일을 하나요?

다른 회사의 Interaction Designer와 어떻게 다른지, 토스 팀만의 강점이 궁금해요.

토스 제품의 인터랙션을 담당하고 있어요.

사용자들이 앱을 더 편리하게 사용할 수 있도록 화면을 개선하는 일을 해요. 전반적으로 인터랙션의 퀄리티가 높아질 수 있도록 시스템을 만드는 일도 하고요.

저희 팀의 강점은 인터랙션 디자이너가 직접 제품의 문제를 찾아 개선할 수 있다는 점이에요. 보통 회사에서는 인터랙션 디자이너가 프로젝트 후반에 참여해서 모션 작업을 주로 맡게 되는데요. 저희는 플로우 단위로 제품을 개선할 수 있다 보니 역할 성장의 기회가 많다고 생각해요. 그리고 팀 내에 개발자들이 소속되어있어서 디자이너가 연구한 인터랙션을 바로 구현까지 해볼 수 있죠.

Interaction Designer의 업무 범위는 어떻게 정하게 됐나요?

잘 정착되지 않은 직군이다보니 다른 직군처럼 ‘일반적으로 해야 하는 일’이 없잖아요. 어떤 일을 어디까지 해야 하는지도 새로 정해야 했을 것 같아요. 팀에서 무슨 업무를 할지 어떻게 정하셨어요?

Interaction Designer직군이 토스 앱을 만드는 여러 직군과 접점이 많다 보니 업무 범위를 구분 짓기까지 오랜 시간이 걸렸던 것 같아요. 저는 이 부분을 스스로 정의하기 위해서 2가지 시도했었는데요.

인터랙션으로 사용성 문제를 해결하는 사례를 만들었어요.

먼저, 토스 앱에서 인터랙션으로 해결해보면 좋을 화면들을 찾아 개선했어요. 그리고 AB 테스트를 통해 실제로 지표의 변화를 만들어내는지 검증했고, 수많은 실패와 성공 사례를 쌓았어요.

그 사례로 대출 가심사의 로딩 화면을 개선했던 프로젝트를 설명해 드리면 좋을 것 같은데요. 기존에는 2~30초의 심사 시간 동안 실제 정보와 상관없는 이미지가 반복되어 나오는 화면이었어요. ‘로딩 화면에서 실제 정보를 보여줘서 이탈을 줄이면, 더 많은 사용자가 대출 실행을 하게 될 것이다’라는 가설을 세웠고 실시간으로 심사 완료된 정보가 화면에 보이도록 개선했어요. 이러한 인터랙션의 개선을 통해, 이탈률을 소폭 개선하는 효과를 만들었죠.

대출 가심사를 받을 때 로딩 화면 - 기존안(왼)과 개선안(오)

심미성이 중요한 화면을 만들었어요.

그다음으로, 유저에게 즐거움을 줘야 할 때, 시각적인 완성도를 높여야 할 때 인터랙션 디자인이 필요하다는 것에 대해서는 팀원들의 공감대가 있었어요. 그래서 자연스럽게 심미적인 가치를 높여줘야 하는 업무는 제가 맡아서 진행하게 되었어요.

예를 들어, 추석 편지를 보내는 이벤트에서 편지를 보냈다는 심상을 강조하기 위해 편지가 날아가는 모션을 추가했어요. 장애인의 날 이벤트에서는 모바일에서 점자를 눌러보는 경험을 극대화하기 위해 사용자가 클릭하면 모션으로 피드백을 주고, 화면이 밝아지는 시각 효과 등을 주었죠. 이런 부분을 언급하는 사용자도 점점 생기고 있는 걸 보면 이런 영역들이 인터랙션의 중요한 가치 중 하나라고 느껴져요.

추석 편지 이벤트, 크리스마스 이벤트, 장애인의날 이벤트 중 일부
장애인의날 이벤트를 경험하신 사용자 분들의 소중한 의견

첫 3개월 동안 가장 힘들었던 점은 무엇이었나요?

처음 생긴 직군으로서, 참고할만한 레퍼런스도 없고 함께 일할 팀원도 없어서 힘들었던 점들이 있을 것 같아요.

방금 말했던 것처럼 저의 업무 범위를 정하는 것이 가장 힘들었어요.

처음엔 그래픽 디자이너, 리서치, 라이터처럼 요청 채널을 만들었는데요. 당시에는 나를 찾아오신 분들이니 무조건 최선을 다해보자! 는 태도로 디자이너분들이 요청하신 업무를 했어요.

그러다가 이 일을 내가 하는 것이 맞을까? 내가 잘할 수 있는 일일까? 싶은 순간이 있었는데요.

예를 들어 인터랙션 요청 중에 로띠 애니메이션이나 그래픽으로 제작해 해결할 수 있는 경우가 많았어요. 간단한 2D 모션은 제가 만들곤 했지만, 그래픽 자산의 일관성과 퀄리티 측면에서 제가 부분적으로 만드는 것보다 그래픽 디자이너분들에게 요청 드리는 게 좋겠다고 생각하게 됐어요. 이후에 관련 업무가 들어오면 더는 제가 맡지 않게 되었어요.

2021년 당시 만든 로딩 애니메이션
2021년 당시 개편된 홈을 소개하는 화면 경태님과 협업했던 작업

첫 3개월 동안 했던 가장 큰 실수는 무엇이었나요?

물론 그런 일들이 있었기 때문에 지금도 있는 것이겠지만, 돌이켜봤을 때 ‘정말 바보 같았다’는 생각이 드는 일이 있나요? 새롭게 첫 직군을 시작하는 분들께 좋은 조언이 될 수도 있을 것 같아요.

사일로의 상황을 고려하지 않고 작업했던 거예요.

토스 팀은 빠른 속도로 제품을 개선하다 보니 공수를 줄이거나 디자인 스펙을 줄이는 게 필수적인데요. 입사 초반에는 이런 상황을 몰라서 ‘나를 증명해야 해, 최대한 창의적으로 그려보자’라는 생각으로 풀스펙으로 디자인하거나, 지금 구조에서 구현하기 어려운 방식의 디자인을 했어요.

열심히 만든 디자인의 퀄리티를 낮춰야 하는 경우도 있었고, 개발자분들에게 당황스러움을 선사하고는 했어요.

만약 과거로 돌아간다면, 사일로와 실험의 가설에 대해 충분히 협의한 뒤 최소한의 리소스로 디자인을 했을 것 같아요. 그리고 개발자와 사전에 이런 방식의 아이디어를 구현할 수 있는지, 현재의 일정과 상황에서 구현할 수 있는 범위에 대해 여쭤본 뒤 디자인을 했을 것 같아요.

3개월 동안 했던 일 중 가장 비효율적인 일이 있다면 무엇인가요?

첫 직군이다 보니 처음부터 지금처럼 체계가 잘 갖춰져있지는 않았을 것 같거든요. 당연히 처음에는 비효율적으로 일하기도 했을 것 같은데 ‘나 이것까지 해봤다’하는 비효율 사례가 있을까요?

노션에 멋지게 정리하기

인터랙션 디자인의 사례를 모아 쇼케이스를 만들었던 일이 가장 비효율적이었던 것 같아요. Mobbin에서 리서치를 하듯이 토스의 인터랙션 사례들을 모아두면 저를 알리는 데에 도움이 될거라고 생각했어요. 인터랙션 101이라는 이름으로 101개의 사례를 모으는 걸 목표로 노션에 태그도 달면서 열심히 정리했는데요. 6개월 정도 했나…고작 20개밖에 못 채운 걸 알고 현실을 깨닫게 됐어요.

숫자를 다 채우려면 너무 오래 걸리고, 접근성도 떨어지다 보니 저도 잘 안 보게 되더라고요. 노션으로 멋지게 정리하는 것 대신 저의 작업물을 짧게 정리해서 슬랙에 공유하게 되었고 이런 식의 공유가 훨씬 도달이 잘 되는 걸 느꼈어요.

과거에 만들었던 인터랙션 101 노션

처음 입사한 당시의 나에게 해주고 싶은 조언이 있다면요?

불안함을 건강한 동기부여로 받아들이기

처음 입사했을 때 이 직군이 토스 팀에 처음 생겼고, 업계에 많지 않다 보니까 미지의 영역이라고 막연하게만 느꼈어요. 어디까지가 나의 역할인지, 나의 강점은 무엇인지 찾기까지 제법 오랜 시간이 걸렸는데요.

불안함에 힘든 시간도 많았던 것 같은데, 돌아와서 보니 제가 성장할 수 있도록 동기부여가 가득한 환경이었다는 생각이 들더라고요. 토스 제품에 없던 가치를 만들 수 있고 개선할 것들이 너무나 많았으니까요.

그래서 저에게 미지의 영역을 좋은 동기부여로 받아들이고, 도전해보라고 말해주고 싶어요.

댓글 0댓글 관련 문의: toss-tech@toss.im
연관 콘텐츠
㈜비바리퍼블리카 Copyright © Viva Republica, Inc. All Rights Reserved.