Strategy

디자인 시스템 — 여정을 탄탄하게.

디자인 시스템 — 여정을 탄탄하게.

잘 만든 화면 한 장은 한 번의 캠페인을 살리지만, 잘 설계된 디자인 시스템은 10년 가는 운영 자산이 됩니다. 빠르게 만들 수 있는 시대일수록, 그것을 묶는 시스템이 없으면 6개월 뒤 유지보수가 마비됩니다.



디자인 시스템이 정확히 무엇을 의미하나

디자인 시스템은 단순한 컴포넌트 모음이 아닙니다. 디자인 의사결정을 코드와 문서로 한 곳에 모아 두고, 여러 화면·여러 팀이 같은 출처를 참조하도록 만드는 규약입니다. 즉, 화면을 그리는 일이 아니라 화면을 그리는 규칙을 짜는 일입니다.

2013년 Brad Frost가 발표한 Atomic Design이 이 영역에 처음으로 공통 언어를 제공했습니다. 그 이후 IBM Carbon, Shopify Polaris, Material Design, Apple HIG 같은 대규모 시스템이 같은 원칙 위에 만들어졌습니다.

디자인 시스템을 구성하는 3개의 층

잘 운영되는 시스템은 보통 세 개의 층으로 정리됩니다.

  1. 디자인 토큰 — 색상, 타이포그래피, 간격, 그림자 같은 가장 작은 원자 값. 코드의 CSS 변수와 디자인의 스타일 변수가 같은 출처를 공유합니다.
  2. 컴포넌트 — 버튼·인풋·카드처럼 토큰을 조합한 재사용 단위. 모든 화면이 같은 컴포넌트를 호출하면 일관성은 자동으로 유지됩니다.
  3. 패턴·가이드라인 — 컴포넌트를 어떻게 조합하고 어떤 상황에서 쓸지 정한 규약. 이 층이 없으면 컴포넌트는 있어도 매번 다른 결과가 나옵니다.

도입의 효과 — 무엇이 빨라지고 무엇이 줄어드나

디자인 시스템 도입의 효과는 단일 KPI로 환원되지 않지만, 잘 운영된 사례에서는 공통적으로 다음 변화가 관찰됩니다.

  • 신규 화면 제작 시간 단축 — 컴포넌트를 조립하는 작업으로 바뀌면서, 같은 화면을 만드는 데 드는 시간이 큰 폭으로 줄어듭니다.
  • 일관성 유지 비용 감소 — 토큰 하나를 바꾸면 모든 화면에 자동으로 반영됩니다. 캠페인마다 컬러를 재정의하던 작업이 사라집니다.
  • 온보딩 비용 감소 — 새 디자이너·개발자가 코드와 디자인의 출처를 한 곳에서 학습할 수 있습니다.
  • 접근성·반응형 보장 — 컴포넌트 단위에서 한 번 해결한 접근성과 반응형 처리가 모든 화면에 자동 적용됩니다.
핵심: 디자인 시스템의 가치는 시스템을 만들었다는 사실이 아니라, 회사 전체가 같은 출처를 계속 참조하느냐에서 나옵니다. 한 번 만들고 방치한 시스템은 자산이 아니라 부채입니다.

어디서부터 시작해야 하나

처음부터 완벽한 시스템을 만들려고 하면 6개월이 지나도 1개 화면도 못 만듭니다. 다음 순서가 가장 빠릅니다.

  1. 토큰부터 정의 — 가장 자주 쓰이는 컬러 8~12개, 폰트 스케일 5~7개, 간격 6~8개를 먼저 코드와 디자인 양쪽에 변수로 박아 둡니다.
  2. 핵심 컴포넌트 5~7개 — 버튼·인풋·카드·내비·모달 등 모든 페이지에 쓰이는 것부터. 한꺼번에 30개를 만들지 않습니다.
  3. 실제 페이지에서 검증 — 컴포넌트를 만든 뒤 곧바로 실제 화면 1~2개를 컴포넌트로 다시 구축해 봅니다. 부족한 점이 즉시 드러납니다.
  4. 문서화·가이드라인 — 컴포넌트가 안정되면 사용 규약을 문서로 남깁니다. 문서가 없으면 시스템은 사람의 머리 속에만 존재하다 사라집니다.
  5. 거버넌스 — 누가 토큰을 바꿀 수 있는지, 신규 컴포넌트 제안은 어떻게 받는지 절차를 정합니다. 시스템은 살아 있는 자산이라 운영 규약이 필요합니다.

참고 자료

우리는, 시스템을 운영까지 함께 만듭니다

저희가 디자인 시스템 작업에 들어갈 때 가장 자주 듣는 우려는 "만들기는 했는데 아무도 안 써요"입니다. 시스템은 만드는 작업이 아니라 운영하는 작업입니다. 저희는 토큰 정의부터 거버넌스 절차까지 함께 설계하고, 시스템이 클라이언트 팀 내부에서 살아 움직이도록 도와드립니다. 6개월 뒤에 자산으로 남는 시스템을, 처음부터 그렇게 설계합니다.

Go To List