디자인 표준화를 통해 연간
15800시간을 절약한 토스
토스가 Framer로 툴을 전환함으로써 디자인 프로세스를 혁신한 방법
1,000명이 넘는 직원과 간편한 올인원 금융 플랫폼으로, 토스는 개인 금융에 혁명을 일으켰습니다. 토스 디자인 팀은 최근에 실제 프로덕션에 사용할 수 있는 컴포넌트로 디자인하기 위해 Framer로 디자인 툴을 전환하였습니다. 이 과정에서 워크플로우를 혁신한 것은 물론, 직원들이 프로덕트를 바라보는 관점도 바꾸고, 프로토타이핑 문화도 정착시키고, 인건비도 대폭 절약할 수 있었습니다.
주요 지표:
팀 전체 프로토타입 120% 증가
디자인 툴의 NPS (Net Promoter Score) 지표 상승 (60점 → 85점)
연간 약 15,800 시간 절약
토스 앱네 개의 툴에서 하나로
팀의 워크플로우에 딱 맞는 디자인 툴을 찾는 일은 매우 어렵습니다. 팀원들의 다양한 요구 사항에 대응하다보면, 안타깝게도 프로세스의 각 단계마다 다른 툴을 도입해야 하는 경우가 많습니다. Framer 이전에 토스는 Abstract, Sketch, Zeplin과 Storybook을 사용하였습니다. 여러 도구를 동시에 사용함으로 인해, 토스의 디자이너와 개발자들은 다음과 같은 업무에 많은 시간을 허비하고 있었습니다.
Abstract에서 개발 사양 해독하기
Sketch에서 해당 사양을 바탕으로 Symbol 다시 만들기
Zeplin에 보기 좋게 업로드하기
Storybook에서 실제 작동하는 모습 확인하기
“더 이상 Storybook을 통해 요소들이 어떻게 작동하는지 확인할 필요가 없어졌습니다. Framer를 통해 확인할 수가 있기 때문이죠."
- 강수영, 토스 디자인 플랫폼팀 리더
토스는 Framer로 전환하게 되면서, 툴을 일원화하여 프로세스 전체를 보다 효율적으로 개선할 수 있게 되었습니다. 더 이상 여러 가지 툴을 전환해가며 일을 할 필요도, 같은 컴포넌트를 여러 번 제작할 필요도, 각 툴에 맞추어 컴포넌트를 최적화할 필요도 없어졌기 때문이죠.
달라진 사고방식, 달라진 제품
툴은 곧 팀의 언어이며, 사용하는 사람들의 사고 구조를 바꿀 수 있습니다. 토스에서 Framer를 도입하게 되면서, 구성원들은 자연스럽게 인터랙션을 우선시하게 되었습니다. 디지털 제품은 인간과 상호 작용하며, 맥락과 흐름이있고, 반응하고, 움직이고, 소리내기 때문에, 글자와 그림의 나열로만 제품이 실제로 작동하는 모습을 표현하는데 한계가 존재합니다. 사용자의 문제를 더 집요하게, 더 근본적으로 해결하기 위해서는 디지털 제품의 속성을 200% 활용할 수 있는 툴이 필요합니다.
이전에 토스에서 프로토타이핑 워크플로우를 도입하고자 시도하였을때, 디자인 시안과 프로토타입 작업이 분절되어 있고, 프로토타입 제작에 많은 노력을 기울여야 했기 때문에 전사적으로 호응을 얻는데 어려움을 겪었습니다.
"Framer를 통해 디자인을 하면 이미 텍스트 필드와 버튼과 같은 UI 요소들이 다 동작하는 상태여서, 프로토타이핑을 하지 않으면 손해입니다. 툴 전환 후 프로토타입 제작률이 이전보다 120% 늘었으며, 더 활성화 하기 위해 노력중입니다."
- 강수영, 토스 디자인 플랫폼팀 리더
Framer 도입 후 변화:
사용자 문제 해결을 위한 고품질의 프로토타입 제작
팀 전체의 프로토타입 제작률 향상
솔루션의 빠른 사용성 검증을 통한 제품의 품질 향상
생산성의 진정한 비용
Framer는 토스의 디자이너 뿐만 아니라 개발자의 생산성도 함께 향상했습니다. 디자인 파일을 검사하는 데 시간을 낭비하거나 컴포넌트를 코드로 다시 제작할 필요가 없어졌기 때문입니다.
“저희 계산에 의하면, Framer를 사용함으로써 저희 디자이너와 개발자들이 연간 절약하는 시간은 15,800 시간입니다. 이는 연간 2.6억원의 인건비에 해당하는 금액입니다.”
- 강수영, 토스 디자인 플랫폼팀 리더
이 모든 것은 Framer가 다른 툴에서는 불가능한 기능을 제공하고 있기 때문입니다: 코드로 컴포넌트를 제작하기. 토스의 디자인 시스템, 혹은 TDS는 컴포넌트의 개수가 많지는 않지만, 다양하게 조합이 가능하기 때문에 무수한 가능성을 가지고 있습니다.
예를 들어, 리스트 컴포넌트의 경우 이론적으로 20,000가지 이상의 디자인 조합이 가능합니다. 이러한 특성을 가진 디자인 컴포넌트는 기존의 디자인 툴에서 구현하기 매우 어려웠습니다. 또한, 디자인 툴에서 제대로 동작하지 않으니, 350명이 넘는 개발자에게 어떤 옵션을 구현해야하는 지 설명하는 것도 매우 어려웠습니다.
“리스트 양쪽의 텍스트가 모두 길어질 때 어디가 말줄임 되는지, 줄바꿈이 되는지…이런 정책을 기존에는 개발자들에게 하나씩 알려주어야 했습니다. 하지만 이제는 컴포넌트로 원하는 조합을 표현해주기만 하면 끝입니다.”
- 강수영, 토스 디자인 플랫폼팀 리더
Framer의 코드 컴포넌트 덕분에 개발과 디자인 툴의 스펙이 1:1로 완전 동일해졌고, 제품의 일관성을 유지할 수 있게 되었습니다. 토스의 프로덕트 디자이너들은 TDS 컴포넌트의 스펙을 확인하는 데에 시간을 쓰지 않고, 제품 설계에 집중할 수 있게 되었습니다.
이에 더하여, 토스는 코드 컴포넌트를 통해 애니메이션과 인터랙션도 컴포넌트에 포함시킬 수 있게 되었습니다. 기존의 TDS 컴포넌트는 인터랙션 옵션이 없었기 때문에, 실제로 작동하는 모습을 예상하기 어려웠습니다. 하지만 Framer를 사용하기 시작한 후로, 인터랙션 역시 시스템화 시킬 수 있었고 디자이너들이 이를 활용하여 프로토타이핑하기 쉽도록 최적화시킬 수 있었습니다.
