모든 디지털 서비스 메이커의 유일한 병목이 ‘상상력’이 되게 하려 합니다.
토스 디자인플랫폼 팀
2017년 말, 토스는 TDS(Toss Design System)라는 디자인 시스템을 만들었습니다. 토스에서 자주 사용되는 UI 구성 요소(Components)를 재활용 가능하고 조립 가능한 형태로 공통화하여 라이브러리로 만든 것이죠. 토스의 디자이너와 개발자는 동일한 UI 구성 요소를 사용하여 소통했고, 그 결과 토스의 제품 개발 속도는 몇 배로 빨라지게 되었고 일관되고 좋은 경험을 사용자에게 줄 수 있었어요.
토스에는 이런 TDS를 비롯해서, 토스 전체 제품팀이 더 효율적으로 일하고 높은 퀄리티의 제품을 쉽게 만들 수 있는 도구와 워크플로우를 전담하는 팀이 있습니다. 바로 저희, 디자인플랫폼 팀이에요.
2020년 하반기, 디자인플랫폼 팀은 디자인에서 개발로 이어지는 제품 개발과정에서 큰 비효율을 발견하였습니다. 아무리 빠르고 효율적으로 움직이는 조직이라도, UI 디자인과 UI 개발이라는 같은 일을 두 번 하고 있다는 것이죠.
프론트엔드/클라이언트 개발자는 매일 수많은 UI를 개발합니다. TDS는 디자이너와 개발자의 작업 시간을 많이 줄여주었지만, 디자이너가 배치한 TDS를 개발자가 코드로 다시 배치해야하는 일은 여전히 존재합니다. 왜 우리는 같은 일을 두 번 반복하고 있는 걸까요?
이 문제를 해결하기 위해 디자인플랫폼 팀은 제품 개발 과정에서 UI 디자인과 UI 개발이라는 두 단계를 압축시켜 가장 단순한 형태의 제품 개발 워크플로우를 만들었습니다. 바로, 디자인을 하자마자 그 결과물이 바로 사용 가능한 코드로 변경되는 것이죠.
페이지 단위 코드 제너레이터
디자인플랫폼 팀이 프레이머를 도입하며 변화시킨 디지털 서비스 디자인의 방식
디자인 시스템을 기반으로 UI 디자인과 UI 개발 과정을 한 단계로 압축시킨 이야기
이 작업의 핵심 변화는, 디자인을 코드 기반으로 바꾼 것입니다. 디자이너가 그리는 화면이 단순히 그래픽이 아니라 실제 코드를 기반으로 하여 작동되는 UI 로 바꾸었죠. 이를 통해 UI 디자인의 결과물은 그 즉시 개발에서 사용할 수 있는 UI 코드가 되었고, 디자인과 개발의 과정은 획기적으로 단축되었습니다.