제품이 커지면 디자인 시스템 가이드는 어떻게 개선돼야 할까?
황희영 토스 · 토스 기술 블로그
AI 핵심 요약
300명이 넘는 개발자와 디자이너가 사용하는 디자인 시스템을 소수의 디자이너가 운영하면서, 제각각인 컴포넌트 가이드 때문에 스펙을 파악하고 구현 방향을 맞추기 어려웠습니다. 이를 해결하기 위해 가이드를 위에서 아래로 읽도록 정리하고, 큰 구조와 타입에서 세부 스펙으로 이어지는 정보 위계를 만들었으며, 모든 옵션을 담은 사례와 일관된 접근성 영역을 추가했습니다. 여러 컴포넌트에 적용할 체크리스트와 재사용 가능한 스펙 표기 형식을 마련하되, 아토믹 컴포넌트나 다이얼로그처럼 특성이 다른 요소에는 필요한 항목을 맞춤 적용했습니다. 그 결과 가이드 제작 속도와 신규 디자이너의 적응이 개선됐고, 가이드가 길어질 때는 목차나 분할 구조가 필요하다는 과제도 확인했습니다.
- 가이드는 정보를 모아두는 데 그치지 않고, 위에서 아래로 읽는 순서가 드러나도록 구성하세요.
- 상위 구조와 타입을 먼저 보여준 뒤 내부 요소와 상태별 상세 스펙을 설명하면 구현자가 단계적으로 이해할 수 있습니다.
- 모든 옵션을 사용한 최악의 사례를 앞에 두면 컴포넌트의 전체 선택지를 빠르게 파악할 수 있습니다.
- 접근성 항목을 가이드의 일관된 위치에 두고 체크리스트로 관리하면 설계 과정에서 관련 조건을 놓치기 어렵습니다.
- 아토믹 컴포넌트처럼 단순한 요소에는 공통 템플릿을 억지로 적용하지 말고, 컴포넌트 특성에 맞춰 정보를 조정하세요.
소개
디자인 시스템을 운영하면서, 컴포넌트의 유려함뿐만 아니라 가이드의 효율적인 제작도 중요하다는 것을 깨달았어요. 이번 아티클에서는 TDS 컴포넌트 가이드를 제작 할 때 어떤 부분들을 고려해서 만들어가고 있는지 소개해드릴게요.
비슷한 학습 자료
문서 김민수
디자인 시스템 다시 생각해보기
문서 정세희
문제의 근원을 해결 하기 위한 다양한 시도
문서 박수현
토스 디자이너가 제품에만 집중할 수 있는 방법
문서 이정현
이런 것도 컴포넌트로 만들어도 될까?
문서 김자유