문화

토스팀 개발자 & 디자이너 협업은 어떤 모습일까?

협업

최고의 사용자경험(UX)을 위한 디자이너와 개발자의 긴밀한 협업

 

토스팀은 서비스를 만드는 데 있어 사용자 경험(UX)을 최우선으로 두고 있습니다.

 

스타트업 업무 환경의 특성 상 한정된 시간과 리소스 안에서 최고 수준의 사용자 경험을 만들기 위해서는 효율적인 협업이 무엇보다 중요합니다. 이번 글에서는 총 네 분의 토스팀 디자이너와 개발자를 모시고, 토스팀의 디자이너와 개발자가 어떻게 긴밀히 협업하고 있는지에 대해서 소개해 드릴게요. 토스팀에서 자동차 관련 금융 서비스를 만들고 있는 디자이너 효영님 & 서버개발자 신 님, 그리고 보험 서비스를 함께 만든 경험이 있는 디자이너 소현님 & UI 개발자 홍기님이 그 주인공입니다. 

 

토스가 지향하는 사용자 경험에 대한 자세한 내용은 토스는 왜 단순함에 집착할까? 를 참고해 주세요!

협업

디자이너와 개발자는 어떻게 협업하며 제품을 만들고 있나요?

효영: 토스팀은 제품을 구심점으로 한 목적조직 형태인데요. 이런 특징 때문에 제품을 만드는 개발자와 디자이너가 항상 가깝게 앉아 일하며, 빠른 의사결정을 바탕으로 협업을 합니다.

 

신: 흔히 개발자는 개발자끼리, 디자이너는 디자이너끼리 기능별로 묶여 일하잖아요? 토스팀은 제품 단위로 개발자와 디자이너가 함께 일하다 보니 좀 더 친밀한 분위기에서 제품에 대해 의견을 나눌 수 있어요. 그래서 개발자가 디자이너에게 새로운 기능을 제안하거나, 기술적으로 실현하기 어려운 부분을 미리 얘기하는 것도 수월한데요. 덕분에 토스팀에서는 불필요한 업무를 위해 시간을 소모하는 경우가 없어요.

 

홍기: 예전 직장 경험을 돌이켜보면 디자인 팀에서 전달된 디자인 내용을 개발자가 그대로 구현하는 식으로 업무하는 경우가 있었는데요. 신님이 말씀하신 것처럼 토스팀에서는 개발자와 디자이너가 긴밀하게 소통하며 함께 제품을 만들어나가기 때문에 어떤 맥락에서 특정 화면이 나오게 되었는지 사용자 경험(UX)에 대한 배경을 함께 이해하고 있습니다. 그렇기에 개발자는 단순히 화면을 구현하는 역할에 국한되지 않고, 메이커로서 제품에 애정을 갖고 디자이너와 함께 만들어나갈 수 있습니다.

 

중고차 시세

△ 토스팀에서는 개발자와 디자이너가 긴밀하게 소통하며 함께 제품을 만들고 있다

 

소현: 여러 개발자와 함께 일하고 있지만, 특히 프론트엔드를 담당하는 UI 개발자분들과 제품 배포 전까지 긴밀하게 협업하고 있는데요. 아무래도 개발자분이 옆에서 바로바로 디자인을 구현해 보여주다 보니 ‘더 좋은 방향이 없을까?’에 대한 고민을 더 해볼 수 있는 것 같습니다. 또한, 제품을 기반으로 커뮤니케이션 하다보니 상호 신뢰도 더 깊게 쌓이는 것 같아요. 디자인과 개발의 영역을 나누기보다는 “제품”에 가장 좋을 것을 최우선으로 의사결정 해내 가고 있습니다.

 

효영: 맞아요. 예를 들면 “자동차 시세 조회” 서비스를 만들 때 개인적으로 스켈레톤 UI와 같이 느리다고 느껴지는 화면 대신에, 좀 더 빠르게 데이터를 가져올 수 있는 화면에 대해 고민했었거든요. 그 당시 기술적으로 가능한 부분을 신 님에게 여쭤봤었는데 캐시 값을 어떻게 빠르게 가져올 수 있는지에 대한 좋은 아이디어를 주셔서 원하는 화면을 더 빠르게 만들어 배포할 수 있었어요.

 

소현: 저는 로딩 시간이 길어지는 상황에 대한 솔루션을 고민하고 있을 때 홍기 님이 먼저 ‘정적으로 하면 너무 정체된 느낌이 드니, 스켈레톤 UI 애니메이션 효과를 넣어보자’고 제안해 주셨는데요. 화면을 같이 보면서 애니메이션 명도 변화를 바로 테스트하고, 그 자리에서 픽스했던 경험이 기억에 남습니다.

 

보험 조회

△ 스켈레톤 UI 애니메이션 효과가 적용된 토스의 내 보험 조회 서비스

 

서로에 대한 신뢰가 있기에 더 협업이 잘 되는 것 같아요. 그런가요?

신: 토스에는 DRI(Directly Responsible Individual, 최종 의사결정자)라는 개념이 있는데요. 내가 내린 의사 결정에 대해 존중받을 수 있는 한편 그에 따른 막중한 책임감도 함께 느끼다 보니, 무리해서 기술적으로 멋있어 보이는 걸 개발해야 한다는 압박감에서 벗어나게 만드는 것 같아요. 제품 중심으로 사고하고, 유저의 피드백을 바탕으로 제품을 빠르게 변화시켜 나가는 린 스타트업 방식으로 일을 하므로 불필요한 오버 엔지니어링은 하지 않게 됩니다.

 

소현: 이전 회사에서는 팀을 설득하기 위해 프리젠테이션 자료를 만들어 디자인 방향을 공유하고 설득하는 게 중요한 과정이었습니다. 하지만 토스팀에서는 업무에 대한 오너십(ownership)을 존중받기 때문에 그런 일이 거의 없어요. 토스팀에서는 설득을 위해 소요되는 시간과 에너지를 모두 일로 치환시킬 수 있다 보니 빠르게 일을 진척시켜 나갈 수 있는 것 같습니다.

 

홍기: 토스팀의 여러 디자이너분들과 일하며 놀랐던 경험이 많은데요. 프론트엔드 개발에 대한 디자이너분들의 이해도가 상대적으로 높다고 느끼고 있습니다. 제플린 작업을 해주실 때, 컴포넌트 단위로 만들어 공유해주시는 경우가 종종 있어요. 케이스별로 만들고, 정리해주시다 보니 개발자 입장에서는 작업 속도가 더 빨라지는 것 같습니다. 실력 있는 디자이너분들이 많으니 당연히 서로에 대한 신뢰도 높아질 수 밖에 없는 것 같아요.

 

효영: 토스팀 개발자분들도 디자인에 대해 먼저 제안해 주시는 경우가 많아요. 인터랙션이 많이 펼쳐지면 속도가 느려질 수 있어서 디자이너가 사용 여부를 잘 판단해야 하는데요. 코드로 애니메이션을 넣어서 속도나 운영이슈가 없게 개발해주면서도 사용자 경험이나 제품의 완성도를 높여주시기 때문에 합이 잘 맞는 것 같습니다.

 

서로를 칭찬하는 모습이 훈훈하네요. 마지막 질문인데요. 협업 시 필요한 룰이나 원칙이 있을까요?

효영: 작업에 필요한 기본적인 룰에 대해서는 늘 합의하고 시작해요. 최근 토스 디자인 시스템 TDS가 도입되면서 글로벌 영역에 한해서 8포인트 그리드 시스템을 사용하고 있는데요. 컴포넌트 사이 간격이나 글로벌 패딩 값이 애매하게 떨어질 때 8배수에 맞춰서 작업하다 보니 효율성이 올라가는 것 같습니다. 

 

토스 디자인

△ TDS는 토스 프로덕트를 만들 때 사용할 수 있는 디자인 소스 일체를 제공한다

 

룰베이스 상태에서 제품 자체에 집중해 개선하다 보니, 일정에 있어서도 개발자분이 먼저 제안 주셔서 업무 속도감이 나고요. 디자이너의 경우, 특히 신경 쓰는 부문이 line height인데 상호 규칙을 정하고 난 뒤에 작업속도가 굉장히 빨라졌어요.  

 

소현: 함께 일하는 개발자분들에게 감동하는 순간이 있는데요. 예를 들면, 제품에 애니메이션 효과 등을 삽입할 때 기존 디자인을 활용한 아이디어를 개발자분들이 먼저 제안해주시는데요. 디자인을 이해한 상태에서 기술력으로 가능한 부분을 집어주셔서 작업 속도뿐만 아니라 제품 퀄리티까지 빠른 시간에 끌어올린 경험이 있습니다.


 

더 좋은 제품을 만들기 위해 디자이너와 개발자가 한마음, 한뜻으로 협업하는 토스팀. 인터뷰를 통해 이들이 일하는 모습이 그려지시나요? 앞으로 토스팀이 선보일 멋진 서비스에 대해 많은 관심과 기대 부탁드리겠습니다.

 

아시죠? 이렇게 멋진 디자이너, 개발자분들과 동료가 되어 함께 하실 분들을 항상 채용 중이랍니다. 오셔서 함께 해요!

 

 

토스팀과 함께 하고 싶다면?

토스 채용