대한민국 대표 핀테크 기업 토스가 디자인 업계의 표준인 피그마 대신 프레이머를 주요 디자인 도구로 선택했어요. 이 파격적인 결정으로 디자인-개발 워크플로우가 완전히 바뀌었고, 생산성이 놀랍게 증가했답니다. 왜 토스는 남들과 다른 선택을 했을까요? 그 이유와 성과를 함께 살펴볼게요!
토스의 디자인 도구 진화 과정, 왜 변화가 필요했을까?
프레이머 도입 전, 토스 디자인팀은 어떤 문제를 겪고 있었을까요? 스케치로 디자인하고, 다른 도구로 개발자에게 전달하고, 또 다른 도구로 프로토타입을 만드는 분절된 방식을 사용했어요. 이런 방식은 시간과 자원을 엄청나게 낭비하게 만들었죠.
가장 큰 문제는 디자이너와 개발자 간 소통이 비효율적이었다는 점이에요. 디자이너들은 수많은 색상 명세와 디자인 요소를 관리하는 데 많은 시간을 쏟았고, 이를 다시 개발자에게 일일이 설명해야 했죠. 토스 디자인 플랫폼팀 리더인 강수영은 “여러 가지 회색 색상 명세만 확인하고 소통하는 데도 엄청난 시간이 들었다”고 말했어요.
더 심각한 건, 디자이너들이 만든 것은 사실상 ‘스티커’에 불과했다는 거예요. 실제로 작동하는 요소가 아닌, 단순한 시각적 표현을 만들었고, 이것을 개발자들이 처음부터 다시 구현해야 했죠. 강수영은 “실제 제품에 사용될 컴포넌트로 직접 디자인할 수 있다면 어떨까?”라는 질문이 전환점이 되었다고 해요.
스케치, 리액트, 피그마 등 다양한 기술을 검토한 후, 토스는 2020년 9월에 프레이머로 전환하는 결정적인 선택을 했어요.
기술적 토대: 프레이머가 토스의 아키텍처와 완벽하게 맞아떨어진 이유
토스가 프레이머를 선택한 가장 중요한 이유는 두 플랫폼의 기술적 일치였어요. 토스와 프레이머 모두 리액트 기반으로 구축되어 있어서 기술 생태계가 자연스럽게 조화를 이루었죠. 이런 공통 기반 덕분에 디자인 컴포넌트가 더 원활하게 제품화될 수 있었어요.
피그마가 주로 그래픽 디자인 도구로 기능하는 반면, 프레이머는 리액트, 타입스크립트, JSX 기반의 코드 기반 프로토타입 도구예요. 이런 코드 기반 토대 덕분에 프레이머는 피그마가 할 수 없는 일을 할 수 있어요. 바로 추가 개발 작업 없이도 최종 제품과 똑같이 작동하는 기능적이고 상호작용이 가능한 컴포넌트를 만들 수 있다는 거죠.
이런 기술적 호환성 덕분에 토스는 디자인에서 개발로 이어지는 워크플로우를 더 통합적으로 만들 수 있었어요. 디자인이 개발자에게 전달될 때 흔히 발생하는 번역 오류와 의사소통 오해가 줄어들었죠. 이런 일치성이 너무 중요해서 도구 전환의 주요 이유 중 하나가 되었답니다.
디자인-개발 간극을 메우다
프레이머가 토스에 제공한 가장 중요한 장점은 전통적으로 넓었던 디자인팀과 개발팀 사이의 간극을 좁힐 수 있다는 점이었어요. 프레이머를 사용하면 토스의 디자이너들은 정적인 시각적 표현이 아닌 실제 코드 컴포넌트를 사용해 디자인해요. 텍스트 필드, 버튼 등의 UI 요소가 디자인 단계에서 이미 기능하는 거죠. 사용자 상호작용에 반응하고 프로그래밍된 로직에 따라 동작한답니다.
이 기능 덕분에 개발자가 디자인 명세를 기반으로 컴포넌트를 처음부터 다시 만들 필요가 크게 줄어들었어요. 토스의 사례 연구에 따르면, “프레이머는 개발과 통합된 디자인 도구로, 디자이너가 개발자가 만든 컴포넌트를 사용할 수 있게 해서 개발자가 디자인 파일을 검사하거나 코드로 컴포넌트를 다시 만들 필요가 없어요.”
이 이점을 극대화하기 위해 토스팀은 프론트엔드 개발자와 디자이너의 긴밀한 협업을 통해 ‘토스 특화 프레이머’를 개발했어요. 이 맞춤형 솔루션을 통해 토스 디자인 시스템(TDS)을 프레이머 내에 직접 구현함으로써 디자인 에셋과 제품 코드 간의 완벽한 일관성을 보장했답니다.
맞춤 기능과 워크플로우 혁신으로 생산성 폭발!
토스는 프레이머를 그대로 도입하지 않았어요. 네덜란드에 있는 프레이머 개발팀과 협력해 자사의 특정 요구에 맞는 맞춤형 기능을 만들었죠. 대표적인 예가 디자인에서 개발로의 전환을 자동화하고 최적화하는 ‘맞춤 핸드오프’ 기능이에요.
맞춤 핸드오프 기능은 프레이머의 기본 핸드오프 기능의 한계를 해결하기 위해 개발되었어요. 토스는 디자인 시스템에 정의된 대로 컴포넌트 값을 정확히 표시할 수 있는 솔루션이 필요했죠. 이들의 맞춤 구현은 디자인 시스템에 정의된 언어를 사용해 속성 이름과 값을 표시하고, 개발자가 컴포넌트 내의 개별 요소를 선택할 수 있게 해요.
팀은 생산성을 높이기 위한 몇 가지 혁신적인 기능도 구현했어요. 3,000개 이상의 태그가 지정된 그래픽 에셋을 검색할 수 있는 시스템을 개발해 디자이너가 관련 용어만 입력하면 필요한 요소를 빠르게 찾을 수 있게 했죠. 텍스트 요소에 대한 8,000개 이상의 규칙을 확인할 수 있는 컴포넌트용 실시간 텍스트 유효성 검사도 만들었어요. UX 작성자가 구글 스프레드시트에 규칙을 추가하면 이것이 즉시 디자인 시스템에 반영되어 콘텐츠 지침과 디자인 구현 사이에 원활한 연결이 만들어진답니다.
수치로 증명된 생산성 향상
토스의 프레이머 전환 결과는 인상적이고 수치로 증명 가능해요. 네 가지 별도 도구에서 하나의 통합 플랫폼으로 통합함으로써 디자인 및 개발 프로세스 전반에 걸쳐 상당한 효율성 향상을 달성했답니다.
자체 지표에 따르면, 프레이머 도입으로:
– 연간 생산성이 120% 증가했어요
– 팀 전체에서 총 15,800시간의 작업 시간을 절약했죠
– 프로토타입 제작 속도가 크게 증가했어요
이런 효과는 여러 곳에서 왔어요. 디자이너는 더 이상 같은 디자인 요소를 여러 화면에 반복해서 만들 필요가 없어졌죠. 개발자는 디자인 파일을 검사하거나 코드로 컴포넌트를 다시 만들 필요가 없어 시간을 절약했구요. 개선된 협업으로 소통 오해와 반복 작업이 줄어들었어요.
강수영은 프레이머로 전환한 후 “프로토타입 제작률이 이전보다 120% 증가했다”고 말했어요. 텍스트 필드와 버튼 같은 UI 요소가 디자인 단계에서 이미 작동하기 때문에 “프로토타입을 만들지 않는 것이 오히려 불리해요”라고 덧붙였죠.
기능적 차이: 진짜로 작동하는 인터랙티브 프로토타이핑
프레이머와 피그마의 근본적인 차이점은 프로토타이핑 접근 방식에 있어요. 피그마가 디자인 보여주기에 더 중점을 둔다면, 프레이머는 실제 제품처럼 기능하는 인터랙티브 프로토타입 구현에 중점을 둬요.
프레이머를 사용하면 프로토타입은 최종 제품 경험을 정확하게 나타내는 작동 모델이 돼요. 이 기능 덕분에 전체 개발에 착수하기 전에 더 철저한 사용성 테스트와 검증이 가능해졌죠.
디자인 단계에서 컴포넌트가 동작하는 방식에서 차이가 두드러져요. 프레이머에서는 입력 필드가 실제로 텍스트 입력을 받아들여 내용이 너무 길어질 때 텍스트 잘림이 어떻게 작동하는지 보여줘요. 버튼은 최종 제품에서처럼 나타났다 사라지는 토스트 알림을 트리거하고요. 이런 인터랙티브 요소 덕분에 디자이너는 사용자 경험을 더 정확하게 표현할 수 있답니다.
디자인 시스템의 놀라운 장점
프레이머를 통한 토스 디자인 시스템(TDS) 구현은 특히 혁신적이었어요. 프레이머 내에서 디자인 요소를 프로그래밍함으로써 토스는 일관성을 보장하면서 디자인 프로세스를 극적으로 가속화하는 강력한 디자인 시스템을 만들었답니다.
프레이머에서 만든 컴포넌트는 TDS 명세와 100% 동일해요. 사례 연구에 따르면, “이 컴포넌트들은 TDS 구현에서 만들어졌기 때문에 TDS에 구현된 명세와 100% 동일한 것은 당연해요.”
이런 체계적인 접근 방식 덕분에 토스 사용자는 일관된 제품 인터페이스를 경험하고, 디자이너와 개발자는 표준화된 컴포넌트를 사용할 때 더 높은 생산성의 혜택을 누리게 됐어요. 디자인 시스템은 제품 지침의 살아있는 인터랙티브한 구현이 된 거죠!
결론: 도구 전환을 넘어선 혁신
토스의 프레이머 도입은 단순한 디자인 도구 전환 이상의 의미가 있어요. 이는 제품 개발 철학 전체의 근본적인 변화를 의미하죠. 그들의 표현에 따르면, “도구가 아닌 디자인과 개발 접근 방식의 틀을 바꾼 것”이랍니다.
이 사례는 특히 특정 조직의 요구에 맞게 맞춤화된 적절한 디자인 도구가 효율성, 협업, 제품 품질을 획기적으로 향상시킬 수 있음을 보여줘요. 디자인 도구를 기술 스택 및 워크플로우 요구사항에 맞춤으로써 토스는 측정 가능한 생산성 향상을 달성하면서 디자이너와 개발자를 위한 더 통합되고 협력적인 환경을 만들었답니다.
토스에서의 프레이머 성공은 제품 개발의 더 넓은 트렌드를 강조해요. 바로 전통적으로 분리되었던 분야 간의 마찰을 줄이는 디자인 및 개발 도구의 증가하는 융합이죠. 디자인 도구가 코드를 더 잘 인식하고 개발자가 디자인 자산에 더 쉽게 접근함에 따라 전체 제품 제작 프로세스가 더 효율적이고 효과적으로 변해가고 있어요!
여러분도 토스처럼 디자인과 개발 과정의 혁신을 고민하고 계신가요? 이제는 도구를 바꾸는 것을 넘어 전체 프로세스의 틀을 재고해 볼 때가 아닐까요? 토스의 사례가 여러분에게도 좋은 영감이 되었기를 바랄게요~!