🧩디자인 시스템 컴포넌트 수 최적화 가이드

서비스 규모·화면 수 기반 적정 컴포넌트 수 안내

서비스 규모

전체 화면 수

UI 컴포넌트 재사용률 계산기

화면·컴포넌트 수로 재사용률 계산

📏

UI 스페이싱 시스템 계산기

4pt·8pt 기반 스페이싱 스케일 생성

디자인 시스템 컴포넌트 수는 어떻게 정할까?

컴포넌트가 너무 적으면 화면마다 임시로 만든 예외 스타일이 늘어나고, 너무 많으면 비슷한 컴포넌트가 중복되어 유지보수가 어려워집니다. 이 계산기는 서비스 규모와 화면 수를 입력해 적정 컴포넌트 개수 범위를 추천합니다.

규모별 기준

초기 스타트업은 20~40개, 중형 서비스는 40~80개, 대형 엔터프라이즈는 80~150개를 기본 범위로 잡고, 화면 수가 늘어날수록 필요한 컴포넌트도 함께 늘어나도록 보정합니다.

아토믹 디자인 비율 참고

추천 개수는 버튼·인풋 같은 아톰 40%, 카드·폼 같은 몰큘 35%, 복합 화면 단위인 오가니즘 25% 비율로 나누어 볼 수 있습니다. 새 컴포넌트를 추가하기 전에는 기존 컴포넌트의 변형(variant)으로 대체할 수 있는지부터 검토하는 것이 시스템을 가볍게 유지하는 핵심입니다.

자주 묻는 질문

컴포넌트 수가 너무 많으면 어떤 문제가 있나요?

비슷한 역할의 컴포넌트가 중복되면 유지보수 비용이 커지고 디자인 일관성이 깨지기 쉽습니다. 새 컴포넌트를 추가하기 전에 기존 컴포넌트로 대체할 수 있는지 먼저 검토하세요.

아토믹 디자인의 비중은 어떻게 나누면 좋나요?

일반적으로 버튼·인풋 같은 아톰이 40%, 카드·폼 같은 몰큘이 35%, 복합 화면 단위인 오가니즘이 25% 정도 비중을 차지하는 구성이 균형적입니다.

관련된 도구