디자인 시스템

디자인 시스템은 디자인 원칙, 규격, 재사용 가능한 UI 패턴과 컴포넌트, 코드를 포함하는 종합 세트이다. UI 가이드라인(화면 간 일관성·표준화)과 UX 가이드라인(서비스·브랜드 차원의 일관된 경험)을 모두 포괄한다. 파편화된 조직에서 각 팀이 독립적으로 움직이다 보면 컬러·폰트·컴포넌트가 제품마다 달라지고, 좋은 디자인이 전체로 확장되지 못하는 '디자인 부채'가 쌓인다. 토스의 TDS(Toss Design System) 구축 사례나 스포티파이의 GLUE 팀 사례는 이 문제를 어떻게 해결했는지를 보여준다.

pxd는 여러 프로젝트를 TF 구조로 운영하는 특성상, 프로젝트마다 디자인 시스템 구조와 용어가 달라 신규 인원이 적응하는 데 오랜 시간이 걸리는 문제를 겪었다. 이를 해결하기 위해 스캐폴드 디자인 시스템(Scaffold Design System)을 개발했다. '비계(scaffold)'라는 이름에서 알 수 있듯이 프로젝트마다 그대로 쓰는 규칙이 아니라 각 프로젝트의 디자인 시스템 구축을 돕는 가이드라인이다. 핵심 가치는 '유연함'으로, 운영 도중 대규모 수정이 필요한 상황에도 토큰 값 하나만 바꿔 전체에 반영할 수 있도록 설계되어 있다.

스캐폴드의 시맨틱 컬러 체계는 요소의 종류를 엄격하게 구분하는 방식을 택한다. 구글 머티리얼·IBM 카본·쇼피파이 폴라리스 등 다양한 시스템을 분석한 결과, text-error·border-error처럼 역할별로 세밀하게 정의하는 방식이 접근성 관리와 추후 수정에 가장 유리하다고 판단했다. 토큰은 요소(foreground/border/fill/background), 의도(basic/inverse/chromatic/static), 강조(default/strong/subtle 등), 상태(hovered/pressed 등) 네 가지 차원의 조합으로 이름 붙인다.

디자인 시스템의 포괄 범위에 따라 종류가 구분된다. 가장 광범위한 것은 Android Material Design, iOS Human Interface Guideline, Microsoft Fluent Design처럼 운영 체제 수준의 가이드라인이다. 그 아래 단계는 Shopify Polaris, Salesforce Lightening처럼 특정 소프트웨어 플랫폼을 위한 가이드라인이다. 단일 브랜드의 디자인 가이드는 해당 서비스와 브랜드 정체성을 가장 구체적으로 담는다. Apple HIG는 디바이스별로 문서를 분리하는 방식이고, Material Design은 반응형 컴포넌트로 크로스 플랫폼을 통합 지원하는 방식이라는 차이가 있다.

실무에서 디자인 시스템 구축 프로세스는 목적과 범위 구체화 → AS-IS/TO-BE 분석 → 설계 → 검토의 단계를 거친다. 목적 정의 단계에서는 어떤 문제를 해결하려는지, 누가(디자이너·개발자·기획자·경영진) 어떻게 사용하는지를 먼저 명확히 해야 한다. 첫 구축 시에는 방대한 범위를 한 번에 포괄하기보다 우선순위가 높은 서비스와 기능부터 작게 시작해 시행착오를 거치며 확장하는 것이 안전하다. AS-IS 분석에서는 자사 서비스와 경쟁사의 기능·콘텐츠를 분류하고 패턴을 파악한다.

컴포넌트 설계 시에는 기능적 패턴과 인지적 패턴 두 가지를 고려해야 한다. 기능적 패턴은 컴포넌트의 역할과 위계를 명확히 하는 것으로, 프라이머리 컬러 적용 규칙(중요 기능에만 사용), 기능 요소와 콘텐츠 요소의 컬러 분리, 크기·그림자·대비를 통한 시각적 위계 표현이 핵심이다. 인지적 패턴은 브랜드 에센스를 디자인 요소에 녹여내는 것이다.

GUI 리서치는 디자인 시스템 구축 전 시각적 방향성을 정하는 필수 과정이다. 다양한 서비스들의 비주얼 전략을 분석해 도메인 공통점과 트렌드를 도출한다. 자동차 모바일 앱을 예시로 보면, 컬러와 타이포그래피로 브랜드 아이덴티티를 드러내는 방법, 로고의 형태를 UI 요소에 차용하는 방법, 실제 제품의 질감을 앱 UI에 반영하는 방법 등 다양한 전략이 존재한다. 리서치 결과는 팀원들과 리뷰하며 의견을 나누고, 서비스 속성에 맞는 비주얼 전략으로 수렴시키는 과정이 중요하다.

디자인 시스템은 한 번 구축으로 끝나지 않는다. Shopify·Material Design도 2~3개월 간격으로 지속 업데이트한다. 운영 모델은 세 가지 유형으로 나뉜다. Solitary 모델은 한 팀이 시스템을 운영해 빠르지만 해당 팀의 요구에만 집중될 위험이 있다. Centralized 모델은 전담 중앙팀이 체계적으로 관리하나 현장 요구 파악이 어렵다. Federated 모델은 여러 팀이 참여해 다양한 요구를 수용하기 쉽지만 집중도가 떨어질 수 있다. Salesforce는 Centralized와 Federated를 결합한 Cyclical 모델로 운영한다.

핵심 내용

  • 좋은 디자인 가이드라인의 4가지 조건: 좋은 내용(브랜드 고유 관점), 편리한 탐색, 정체성, 실행 준비(관리 주체·업데이트 프로세스)
  • 토스의 Product Principle 5가지: Casual Concept / 1 thing per page / Minimum Features / Clear CTA / Minimum Input
  • 스캐폴드 디자인 시스템: 다수의 프로덕트를 운영하는 조직을 위한 '기준 디자인 시스템'
  • 시맨틱 컬러: 원시값이 아닌 역할(요소·의도·강조·상태)로 토큰을 정의하여 유연한 수정 가능
  • 스케일 컬러(blue-100 등)와 시맨틱 컬러(text-primary 등)를 구분해 사용
  • 가이드라인 범위: OS 수준(Material/HIG) > 소프트웨어 플랫폼(Polaris/Lightening) > 단일 브랜드
  • 운영 모델 3가지: Solitary(단일팀) / Centralized(전담팀) / Federated(다수 팀 참여)
  • 구축 프로세스: 목적·범위 구체화 → AS-IS/TO-BE 분석 → 작게 시작해 점진적 확장
  • 컴포넌트 설계: 기능적 패턴(위계 명확화) + 인지적 패턴(브랜드 아이덴티티 표현)
  • 프라이머리 컬러는 가장 중요한 기능에만 절제하여 사용해야 위계가 분명해짐
  • GUI 리서치: 경쟁사 비주얼 전략 분석으로 서비스에 맞는 디자인 방향성 도출

관련 개념

출처

최종 업데이트: 2026-04-06 | 출처 9개