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

토스의 TDS가 Flat과 Compound 패턴 하이브리드 제공으로 디자인 시스템 우회 사용 문제 해결

2026년 1월 8일12분intermediate

AI 요약

Context

조직 성장에 따라 TDS의 고정된 규약이 제품팀의 다양한 요구를 충족하지 못하면서 Figma 컴포넌트 detach, 패키지 fork 등 시스템 우회 사용이 발생했습니다. 강화된 제약으로 이를 막으려 해도 eslint-disable-next-line 주석처럼 우회 방법은 계속 생겨났습니다.

Technical Solution

Flat 패턴 도입: 단순한 사용 사례를 위해 props 기반으로 모든 변형을 제공하는 Card 컴포넌트 설계
Compound 패턴 도입: 복잡한 사용 사례를 위해 Card.Header, Card.Title, Card.Body 등 하위 컴포넌트를 조합하는 방식 제공
하이브리드 전략 수행: @tds/mobile/flat과 @tds/mobile 두 개의 import 경로로 동일한 primitive 레이어를 기반으로 두 API 제공
내부 구현 통합: CardRoot, CardHeader, CardTitle, CardBody 등 primitive 컴포넌트 레이어로 Flat API와 Compound API 모두 구현해 유지보수 단일화

Key Takeaway

디자인 시스템은 통제 강화가 아니라 우회할 이유를 줄이는 설계가 중요합니다. 제품팀의 예외 상황까지 지원 가능한 구조로 제공하면 시스템 연결성과 일관성을 동시에 유지할 수 있습니다.

실천 포인트

컴포넌트 라이브러리를 운영하는 팀에서 Flat(props 기반)과 Compound(조합 기반) 패턴을 별도의 import 경로로 제공하되, 내부적으로 동일한 primitive 컴포넌트 레이어로 구현하면 유지보수 부담 없이 사용자의 단순함과 유연함 모두를 만족시킬 수 있습니다.

태그

#Architecture #Component API #Design System #React

원문 읽기