디자인 시스템 다시 생각해보기
Summary
울타리가 아닌 가드레일로, 토스가 디자인 시스템을 다시 정의하는 법
경직된 규칙 대신 유연한 확장을 선택한 TDS의 하이브리드 컴포넌트 API 설계 전략
토스 디자인 시스템(TDS)팀이 겪은 '시스템 이탈' 문제를 해결하기 위해 디자인 시스템을 하나의 제품으로 바라본 혁신적인 관점 전환을 다룹니다. 단순함을 위한 Flat 패턴과 유연함을 위한 Compound 패턴의 장점을 결합하여, 메이커들이 자유롭게 UI를 구성하면서도 시스템의 일관성을 유지할 수 있는 구체적인 설계 방법론을 제시합니다.
- 01시스템의 제약이 새로운 마찰의 원인이 되는 '디자인 시스템의 역설' 분석
- 02사용자가 컴포넌트를 Detach/Fork하게 만드는 근본적인 원인 파악
- 03Flat 패턴과 Compound 패턴의 기술적 장단점 및 트레이드오프 비교
- 04유지보수 효율을 높이는 내부 Primitive 레이어 재사용 전략
- 05통제가 아닌 유연한 확장을 통해 수요자의 문제를 해결하는 설계 철학
RECOMMENDATION
디자인 시스템 도입 후 확장성 문제나 컴포넌트 파편화로 고민 중인 프론트엔드 엔지니어와 UI/UX 디자이너에게 강력 추천합니다. 특히 대규모 조직에서 팀 간 협업 효율을 극대화하고 싶은 시니어 개발자에게 실무적인 인사이트를 제공합니다.
The Problem
디자인 시스템이 조직의 성장과 제품의 다양성을 따라가지 못하고 경직되면서, 제품 팀이 시스템을 우회하여 컴포넌트를 분리(detach)하거나 코드를 수정(fork)함으로써 일관성이 깨지는 문제가 발생한다.
The Solution
디자인 시스템을 하나의 '제품'으로 간주하고, 사용하기 편리한 Flat 패턴과 유연한 확장이 가능한 Compound 패턴을 동시에 제공하는 하이브리드 API 전략을 도입하여 사용자 니즈를 충족시킨다.
The Result
제품 팀이 시스템을 우회할 이유를 줄여 일관성을 유지했으며, 내부적으로는 동일한 Primitive 레이어를 재사용함으로써 디자인 시스템 팀의 유지보수 부담을 줄이고 사용자 경험을 최적화했다.
Trade-off
두 가지 형태의 API를 제공하기 위한 설계 및 관리 비용이 발생하며, Compound 패턴의 경우 사용자가 컴포넌트 구조를 학습해야 하고 구현 코드량이 늘어나는 부담이 있다.
Key Concepts
More from 토스
View all posts from 토스
누군가는 토스를 테스트하는 동안, 우리는 테스트하는 법을 만듭니다.
QA EngineeringTest AutomationAI in Testing2주 전
es-toolkit: How a Small Internal Library Became a Global Project
JavaScriptTypeScriptTree-shaking2주 전6. 도구를 넘어, 기준과 책임으로
Technical WritingAI AutomationKnowledge Governance2주 전5. Technical Writer, 사라질 결심
LLMGitHub ActionsGenerative AI2주 전es-toolkit, 사내 작은 라이브러리가 전세계적인 라이브러리가 되기까지
JavaScriptTypeScriptTree-shaking3주 전
