구글, 애플에 있는 UX 엔지니어가 토스에 있는 이유

안녕하세요. 저는 토스 디자인플랫폼 팀에서 프론트엔드 개발자로 일하는 이병철입니다. 오늘은 디자인플랫폼 팀에 속한 개발자가 어떤 일을 하는지 소개해 드리려 합니다. 

토스에는 UX 엔지니어가 있다?

먼저 디자인플랫폼팀(이하 디플팀)이라는 이름이 생소하실 수도 있을 것 같아요. 디플팀은 제품 메이커가 결과물의 퀄리티와 임팩트를 높일 수 있도록 적절한 기술과 효율적인 워크플로우를 지원하는, 디자인 옵스(Design Operations)를 담당하는 팀이에요.

저는 이 팀에서 개발자로 일하고 있고요. 그래픽, 인터랙션, 애니메이션, 사운드, 햅틱, 글쓰기 등 사용자 경험에 영향을 미치는 모든 영역에서 기술적 한계를 돌파해, 메이커가 꿈꾸는 최고의 결과물을 제품에 적용할 수 있도록 만들고 있습니다. 국내에는 아직 잘 소개되지 않았지만, UX Engineer(UX 엔지니어) 포지션에 가까워요. 

프론트엔드 개발자가 시스템을 만드는 과정

제가 하는 일은 세 단계로 구분할 수 있어요. 

1단계. 연구하기 

토스 제품에 들어가는 비주얼이나 인터랙션 요소를 고차원으로 끌어올리기 위해 연구하고 있어요. 날아다니는 비행기가 있는 3D 애니메이션을 예로 들어볼게요. 지금까지 토스에서는 C4D를 이용해 렌더링한 영상 파일을 제품에 넣고 있었어요. 그러다 보니 비행기 색이나 비행기가 날아가는 방향을 바꾸려면 영상 파일을 다시 만들어 넣어야 했죠. 그런데 3D 그래픽 기술을 이용해 실시간으로 렌더링할 수 있다면 어떻게 될까요? 사용자가 화이트모드인지 다크모드인지에 따라 비행기의 색을 바꿀 수도 있고, 사용자가 보는 방향으로 날아가게도 할 수 있을 거예요.

이처럼 기술을 이용해 디자이너가 당면한 문제를 해결하도록 연구하는 것이 제 첫 번째 역할이에요. 토스 제품에 새로운 비주얼과 인터랙션을 적용할 수 있도록 기술적 한계를 걷어내는 거죠. 그 과정에서 메이커들이 더 폭넓게 상상할 수 있도록 최신 기술 트렌드를 분석하고, 기술적인 인사이트를 제공하는 테크 에반젤리스트(Tech Evangelist) 역할도 겸하고 있어요. 

최근에 새로운 비주얼과 인터랙션을 제품이 시도해볼 기회가 있었는데요. 오랫동안 방치되어 있던 ‘상품권 구매’ 서비스에 3D 애니메이션을 넣고, 수량을 조정할 때마다 햅틱 반응을 느끼거나 소리를 들을 수 있게 했어요. 사용자 경험을 개선한 것일 뿐, 기능이 바뀐 것은 아니라 지표 상승을 기대하지는 않았는데요. 새 디자인을 적용한 후에 상품권 구매와 관련된 지표가 유의미하게 개선되었음을 확인할 수 있었어요. 비주얼과 인터랙션을 바꾸는 것만으로도 지표를 올릴 수 있다는 걸 알았던 계기였죠.

2단계. 도구화하기 

디자이너와 연구해서 새로운 기술을 구현할 수 있게 됐는데, 실제 업무에서 쓰이지 않는다면 아무런 소용이 없겠죠. 그래서 새로운 기술을 개발자들도 쉽게 사용할 수 있도록 도구화하는 작업도 하고 있어요. 

그동안 토스는 Tap&Scroll로 구성된 정적인 UI를 많이 사용했는데요. 최근 들어 동적인 UI도 만들어보자는 의견이 나오면서 스크롤 애니메이션을 여러 제품에 적용해보려는 중이에요. 지금은 ‘자동차 보험료 조회’라는 서비스에서 스크롤 애니메이션을 만나볼 수 있는데요. 이걸 구현하고, 개발자들이 쉽게 사용할 수 있도록 스크롤 애니메이션 프레임워크를 만드는 게 2단계에 해당하는 일이었어요. 

3단계. 워크플로우 개선하기

마지막으로 도구화된 고수준의 비주얼과 인터랙션을 모두가 더 쉽게 발견하고, 자연스럽게 제품에 녹일 수 있도록 워크플로우를 개선하고 있어요.

토스에서는 TDS(Toss Design System)라는 디자인 시스템을 구축하여 제품 디자인과 개발에 활용하고 있는데요. 일반적인 디자인 프로세스로는 TDS가 가진 업무 효율성을 80%도 발휘할 수 없다고 생각했어요. 최근에 이를 1000%로 끌어올리기 위한 가능성을 발견했고, 개발자들이 디자이너의 의도를 왜곡하지 않고 화면을 구현할 수 있도록 도와주는 혁신적인 업무 프로세스를 설계하고 연구하는 데에 집중하고 있어요.

같은 선상에서 UX writer를 위한 linter 작업도 하고 있어요. UX writer는 디자이너가 만든 시안을 보고 토스다운 문구로 교정하는데요. ‘~했습니다’ 대신 ‘~했어요’를 쓰는 등 자주 사용하는 규칙들이 있다고 들었어요. 이런 반복적인 업무를 엔지니어링으로 줄일 수 있겠다고 생각했고, 시안을 만들면 실시간으로 교정이 필요한 문구에 밑줄을 그어서 대치어를 보여주는 linter를 만들어 보면 좋겠다는 아이디어를 냈죠. 

디자이너와 개발자가 오해없이 소통하는 법

이터레이션(iteration)이 빠른 조직에서는 디자이너가 생각한 대로 결과물이 나오기가 어려워요. 디자이너가 가진 배경지식이나 역량이 개발자가 가진 것과 다르기 때문에, 같은 말을 하더라도 다르게 이해할 수밖에 없거든요. 그러다 보면 미세한 것들, 픽셀이 어긋난다거나 마우스 호버가 작동하지 않는 등의 왜곡이 생기기 마련이죠. 디자인 툴에서는 가능했지만 기술적으로 구현하기 난해한 경우도 있고요. 

이럴 때 시스템이 좋은 역할을 해줄 수 있어요. 디자이너와 기술자 간의 왜곡이 생기는 부분을 줄여줄 수 있거든요. 예를 들어, 약관 동의를 받는 화면을 만든다고 하면 정의해야 할 게 굉장히 많아요. 전체 동의를 누르면 아래 동의 버튼도 모두 체크표시가 되어야 하는지, 선택 약관은 어떻게 보여줘야 하는지, 어디를 눌러야 약관 내용을 확인할 수 있는지… 약관 동의가 필요할 때마다 화면을 새로 디자인하고 개발한다면 시간이 많이 걸릴 뿐만 아니라 화면마다 약관의 UX가 다르게 구현될 가능성도 있겠죠. 하지만 약관 화면에 대한 UI/UX를 시스템화한다면 약관의 의도에 따라 잘 만들어진 몇 가지 템플릿을 제공할 수 있을 테고, 이를 디자인과 개발에 활용한다면 항상 일관되고 질 좋은 결과물을 만들어낼 수 있어요. 같은 디자인 시스템 스펙을 가지고 디자이너와 개발자가 소통하니, 디자이너와 개발자 간의 오해의 여지도 줄어들고요. 

토스에서는 그 시스템이 TDS예요. 개발자와 디자이너가 TDS라는 동일한 언어로 소통하기 때문에, 반복적인 것들을 고민할 필요가 없고요. 그 시간을 아껴 본질적인 문제를 해결하는 데 쓸 수 있어요. 이런 게 시스템을 만드는 매력이 아닐까요? 

그동안 디플팀이 UI적인 요소를 집중적으로 연구하며 디자인 시스템을 만들었다면, 이제는 더 나아가 ‘프로덕트 시스템’을 만들고 싶어요. UI 를 구성하는 일 뿐만 아니라 화면과 화면을 오고가는 일이나 데이터를 UI에 연결하는 일도 반복적인 패턴이 있다는 것을 발견했고, 이것을 시스템화한 GUI 도구를 만들어서 디자이너나 PO가 개발자의 손을 거치지 않고 코드 없이 간단한 서비스를 디자인하고 배포까지 하는 거죠. 기반도 어느 정도 완성되었기 때문에 이제 곧 해볼 수 있을 것 같다는 확신이 들어요. 개발자가 반복적인 업무에서 해방된다면, 더 임팩트가 큰 업무에 집중할 수 있는 환경이 만들어지겠죠?

당신의 흥미는 사치스럽지 않아요 

애니메이션이나 비주얼적인 것들, 프론트엔드 중에서도 사용자의 손에 닿는 마이크로 인터랙션을 개선하는 데 흥미를 느끼고, 1 프레임이라도 더 예쁘게 보이고 싶어서 튜닝해본 경험이 있다면 UX 엔지니어 영역의 일을 추천해요. 저도 그런 타입이거든요. 

사실 저는 해외 취업을 생각하고 있었어요. 외국처럼 UX 엔지니어를 따로 두는 환경이 아니라면, 한국에서는 이 업무를 하기 어렵겠다고 생각했기 때문인데요. 스타트업은 ‘살아남아야 한다’는 생각이 강하기 때문에 사용자 경험을 다듬는 일을 사치스럽다고 여길 가능성이 높아요. 반면, 대기업에서는 연구실에서 오랜 시간을 들여 기술을 개발하더라도 조직의 실행 속도가 느려 실무에 적용하는 데 시간이 오래 걸리거나, 적용했을 때 유저가 어떻게 반응하는지 직접 보기가 힘들 것 같고요. 그런데 우연히 토스와 미팅을 하는 과정에서 UX 엔지니어에 대한 니즈가 있다는 걸 알고 합류하게 됐죠. 

다른 곳에서는 사치라고 여겨지던 일이, 토스에서는 중요한 가치로 인정돼요. 사용자 경험을 개선하는 일에 대한 전폭적인 지지가 있었기에, 새로 연구한 비주얼과 인터랙션을 빠른 속도로 적용해 볼 수 있었죠. 함께 일하는 디자이너 분들이 기술에 대한 이해도가 높고, 새로운 기술을 적용하는데 열려 있는 것도 장점이에요. 덕분에 디자이너들이 상상하는, 가장 좋은 형태의 기술을 자유롭게 시도해볼 수 있어요. 만약 사치스럽다고 여겨져 하고 싶어도 하지 못했던 일이 있다면, 토스에서 저와 함께 시도해보는 것은 어떨까요? 

Edit 송수아 Graphic 이은호