문서

디자인 시스템 다시 생각해보기

김민수 토스 · 토스 기술 블로그

AI 핵심 요약

토스 TDS는 제품팀이 컴포넌트를 detach하거나 패키지를 fork하는 현상을 시스템 위반이 아니라, 디자인 시스템이 수요를 충분히 해결하지 못한다는 신호로 바라봤습니다. 통제와 금지를 강화하기보다 우회할 이유를 줄이기 위해 컴포넌트 API를 재검토했고, Flat 패턴의 간결함과 Compound 패턴의 확장성을 각각의 장단점과 함께 비교했습니다. 이에 단순하고 자주 쓰는 경우에는 Flat API를, 복잡하거나 커스텀이 필요한 경우에는 Compound API를 제공하는 하이브리드 전략을 택했습니다. 두 API는 공통 primitive를 재사용해 구현을 공유하며, 디자인 시스템은 팀을 제한하기보다 예외 상황까지 지원해야 한다는 점을 강조합니다.

시스템을 우회하는 팀을 탓하기보다, 우회가 필요한 이유를 찾아 API와 제공 범위를 개선하세요.
Flat API는 흔한 사용 사례를 간결하게 만들지만, 예외가 늘면 props가 비대해질 수 있습니다.
Compound API는 조합을 통한 확장성이 높지만, 사용자가 구조와 조합 규칙을 익혀야 합니다.
단순한 사례에는 Flat, 복잡하거나 변형이 잦은 사례에는 Compound를 제공하는 하이브리드 전략을 고려하세요.
두 API의 내부 구현이 같은 primitive를 재사용하면 외부 선택지를 늘리면서 유지보수 부담을 줄일 수 있습니다.

소개

"어떻게 하면 더 많은 팀이 우리 시스템을 잘 사용하게 할 수 있을까?" TDS가 이 질문에 답하기 위해 고민했던 과정을 공유합니다.

비슷한 학습 자료

컨퍼런스 SLASH

토스ㅣSLASH 21 - TDS로 UI 쌓기 : 그 많던 코드는 누가 다 치웠을까?

컨퍼런스 SLASH

TDS(Toss Design System)로 구성되어 있는 토스의 제품들. 복잡한 화면도 단숨에 개발할 수 있도록 큰 힘이 되어주는 TDS를 개발자들이 사용하고, 확장하는 과정을 공유합니다. 박민수 / 토스 Android Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH

모바일 앱 개발 UI/UX

문서 한주연

2. Beyond Our Expertise

문서 한주연

This is the story of how we turned Technical Writers’ challenges and expertise into a product called "todoc", and how the process helped us take that expertise even further.