디자인 시스템은 만드는 비용보다 유지하는 비용이 큽니다. 그래서 시점이 중요합니다.
도입이 이른 경우
- 화면 수가 30개 미만
- 디자이너가 1명이고 개발자가 2명 이하
- 6개월 안에 방향이 크게 바뀔 가능성이 높음
이 경우엔 시스템 대신 토큰만 정리하는 편이 낫습니다. 색상, 간격, 타이포 스케일 세 가지면 충분합니다.
@theme {
--color-core: #2f6bff;
--spacing-gutter: clamp(1.25rem, 4vw, 4rem);
--text-section: clamp(1.75rem, 3.6vw, 3.25rem);
}
도입이 필요한 신호
- 같은 버튼이 세 가지 버전으로 존재한다
- "이 간격 몇이었죠?"라는 질문이 주 3회 이상 나온다
- 신규 입사자가 첫 화면을 만드는 데 3일 이상 걸린다
컴포넌트보다 규칙이 먼저다
컴포넌트 라이브러리만 있고 사용 규칙이 없으면, 결국 각자 새 변형을 만듭니다. 언제 이걸 쓰지 않아야 하는지까지 문서에 적어야 시스템이 됩니다.
좋은 디자인 시스템 문서에는 "하지 마세요" 예시가 "하세요" 예시만큼 많습니다.
마무리
시스템은 목적이 아니라 속도를 위한 수단입니다. 속도가 느려진다면 잠시 걷어내는 것도 방법입니다.