아키텍처
제품이 커지면 디자인 시스템 가이드는 어떻게 개선돼야 할까?
두줄요약
디자인 시스템 가이드를 읽는 순서와 구조를 표준화해 이해와 작성 효율을 높인 사례입니다. 접근성과 상세 스펙을 체계화해 신규 합류자도 빠르게 기여할 수 있게 했습니다.
문제 상황
- 300명 이상 개발자·디자이너를 4명의 디자이너가 지원하는 상황에서 디자인 시스템 가이드 제작 효율이 중요해진 상황
- 가이드 작성 규칙 부재로 디자이너마다 형식이 달라졌고, 기존 가이드만으로는 컴포넌트 구조와 스펙을 빠르게 이해하기 어려운 문제
- 접근성 스펙이 여기저기 흩어져 있어 새 컴포넌트 설계 시 참고하기 어려운 문제
구조와 흐름
- 정보를 단순 그룹핑하는 대신 위에서 아래로 읽히는 선형 흐름으로 재배치
- 큰 구조와 상위 옵션을 먼저 보여주고, 이어서 내부 요소와 상세 스펙을 점층적으로 배치
- 접근성 관련 의사결정은 가이드 하단에 모아 재사용성과 참조성을 높임
적용해볼 점
- 토스트, CTA, 리스트 등 복합 컴포넌트에는 공통 체크리스트를 적용해 작성 규칙을 표준화
- 아토믹 컴포넌트는 특성에 맞게 필요한 정보만 남겨 불필요한 항목을 줄임
- 화면을 덮는 컴포넌트에는 position 같은 항목을 추가해 맥락별 스펙을 보완