플랫폼 디자이너인 강수영님은 TDS(Toss Design System)를 어떻게 만들었는지, 각 직군에서 어떻게 쓰고 있는지 TDS의 도입으로 얼마나 효율이 높아졌는 지에 대한 이야기를 해주셨다.
TDS라는 틀 안에서 사용자에게 통일된 경험을 주기 위해 플랫폼 디자이너들은 탬플릿을 굉장히 많이 만들어 보고 공통된 심상을 공유했다.
TDS는 다양한 경우에 대응할 수 있도록 상세한 가이드까지 제공한다.
컬러
타이포
버튼
어떤 경우에 쓰는지에 대한 가이드 까지
이렇게 만들어진 TDS는 스케치+앱스트랙트 조합으로 활용되고 있었다. TDS 스케치 파일를 앱스트랙트에서 라이브러리로 지정하고, PD들은 자신의 작업 파일에 TDS를 링크시킨다. 이렇게 하면 업데이트 되는 TDS가 실시간으로 적용되어, ui가 항상 최신 버전으로 유지될 수 있다.
개발자들은?
TDS는 스케치뿐만 아니라 안드로이드, iOS에도 코드로 똑같이 존재한다. 마치 평행우주처럼... TDS 가이드에 따라 리팩토링 된 코드는 컴포넌트 추가를 매우 간편한 방식으로 할 수 있게 되어 있어서 개발 시간과 코드 길이를 혁신적으로 줄였다고 한다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/903fb1e5-bb2c-4f26-9df8-01433b538706/untitled
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d1a7a4fd-fee4-4b22-91ec-01318be6bd59/untitled
또, 컴포넌트 조합이 매우 다양해서 스케치의 nested symbol, override 기능을 적극 활용하고 있다고. 단순 심볼로 만들 때보다 이렇게 활용했을 때 대응할 수 있는 가짓수가 정말 많았다. 예시로 셀의 오른쪽, 왼쪽 영역을 나누고 각 영역에 들어갈 수 있는 심볼을 연결시켜 놓았는데 이렇게 해서 12,528가지의 ui를 커버하고 있다고 했다.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f694996b-bfda-4523-81b9-393991001053/untitled
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/739f5274-7217-4d4d-b987-ea63be7922fa/untitled
합하면 12,528가지의 ui
TDS 존재로 30-40분 걸릴 화면 디자인이 3-4분에 끝나며, 코드 길이는 50%로 줄었다.
절약한 시간을 따지자면 1인당 1시간, 1인당 6개월 동안은 125시간, 토스 메이커가 6개월 동안 절약한 시간을 총 계산하면 1000시간이 아닌 4500시간(=562일)이라고 한다.
디자인 시스템을 구축하는 데에는 분명 많은 시간이 필요하다. 규모가 작은 제품에선 시스템 없이 그때 그때 필요한 디자인과 개발을 하는 것이 빠르겠지만 제품의 규모가 클수록 디자인과 개발의 관리 비용은 점점 늘어난다. 제품 규모가 커지면 디자인 시스템 안에서의 관리 비용이 그렇지 않을 때의 비용을 역전하는 순간이 오고, 토스는 그 순간을 이미 넘었다고 했다.