이제부터 TDS를 만들어보겠습니다

우당탕탕 TDS 제작기 - 1

안녕하세요, MBTI는 T지만 검정치마 감성을 사랑하는 디자이너, 검정바지입니다.

오늘은 프로젝트 스쿼드에서 진행한, TDS(Toss Design System) 구축기를 소개할게요.

당연히 학고인 저희 작업은 official이 아니고, 토이프로젝트 정도로 귀엽게 봐주시면 감사드리겠습니다..

(문제가 된다면 cmd+shift+delete 하고 반성문 제출하겠습니다..)

---

Background

누구나 알고 있지만, 아무도 보지 못한 토스의 디자인 시스템이 궁금하다..!

디자인 시스템에 관심이 있다면 한 번쯤은 봤을 썸네일.

프로젝트의 시작은 매우 단순합니다. 디자이너, 혹은 IT 종사자라면 누구나 들어본 토스의 디자인 시스템, 저 역시 많은 세미나와 강연에서 TDS의 존재와 효용에 대해 이야기를 들었지만, 어떤 식으로 TDS가 구성되어 있는지 무척 궁금했었습니다.

개인적으로 디자인 시스템을 구축하거나 레퍼런스를 찾을 때도, “토스는 어떻게 했을까?”, “TDS의 계층과 정합성은 얼마나 아름다울까” 항상 궁금했었지만, 토스에 들어가지 않는 이상 확인하기 어려울 것이라고 판단해서, 직접 만들어보고 확인해 보자!라고 생각했습니다.

그렇게 24년 1월, 생각이 길지 않은 3명의 삽질이 시작되었습니다!

---

그래서 어떻게 만들 건데요?

일반적인 디자인시스템의 구축 플로우와 정 반대로, 토스의 현재 화면부터 역으로 컴포넌트를 수집하고,

해당 컴포넌트에서 원자단위의 규칙을 찾는 방식으로 프로세스를 계획했고, 이를 도식화하면 다음과 같습니다.

프로세스 도식화

프로세스 예시

---

그래서 어떻게 되었나요?

현재 총 66개의 화면 카피 완료

캡쳐 아니고 진짜 그렸습니다..

특히,, ‘하단 탭의 ‘전체’에 들어가는 일러스트 아이콘 155개를 직접 그리면서 역시 저는 디자이너가 적성에 맞지 않다는 생각을 잠깐 했습니다.. 후.. 진짜 토스 디자이너분들.. 존경합니다.

디자이너 인생 최대 위기

현재 foundation variable 정리 중..

---

어떤 어려움이 있었나요?

창은님이 진행해 주신 효율성 실험 미리 보기

처음에는 자신 있게 제가 프로젝트를 리드했지만, 회사 일과 다른 프로젝트를 동시에 병행하다 보니, 지속적으로 병목이 생기는 문제가 발생했어요.

강제성을 부여하기도 했고, 당근과 채찍등 다양한 시도가 있었지만, 진행 속도가 도저히 개선되지 않았고 결국 리드를 위임하기로 결정했습니다.

리드 역할을 해주신 창은 님께서 팀원들이 지속적으로 프로젝트에 참여할 수 있도록, 팀원들을 상대로 생산성 관점에서 많은 실험을 진행해 주셨고,

결과적으로, 단 한 번도 멈추지 않고 매주 함께 모여 프로젝트를 진행할 수 있었습니다!

---

앞으로 어떻게 하실 거예요?

현재 1차 ui 카피 (66개) 이후, 화면에서 반복적으로 쓰이는 패턴들을 찾아서 리스트업을 완료한 상황입니다.

이제 color와 font, spacing 등의 원자 단위 토큰을 정의하고 있고, 이를 바탕으로 리스트업 컴포넌트를 제작할 예정인데요,

과연 실제 tds와 얼마나 비슷하게 따라 했을지 벌써 걱정되네요..

토스 다니시는 분이 계시면 힌트 좀 비밀댓글로 부탁드립니다.