디자인 시스템

디자인 시스템은 디자인 원칙, 규격, 재사용 가능한 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 리서치: 경쟁사 비주얼 전략 분석으로 서비스에 맞는 디자인 방향성 도출
  • 스터디 기반 제작: 16명 → 7명으로 줄여 정보 대칭과 참여 밀도를 높이고, 점심시간 활용으로 업무 방해 최소화
  • 채택률 측정: 파일 접근 지표(21% → 57%)와 프로젝트 사용 비율(약 83%)로 성과 정량화

관련 개념

스캐폴드 디자인 시스템의 컴포넌트 설계에서는 일관된 구조 기준을 세우는 것이 핵심이다. pxd는 프로젝트마다 컴포넌트 구조와 용어가 달라 신규 인원 적응에 시간이 걸리는 문제를 해결하기 위해 세 가지 조건을 정했다: 컴포넌트 구조가 명확하고 체계적일 것, 의사소통 효율을 높일 것, 누구나 쉽게 사용하고 유연하게 변형 가능할 것. 같은 역할의 컴포넌트(예: Input)도 프로젝트마다 상태 옵션 이름이 달랐던 문제를 통일된 프로퍼티 체계로 해결했다.

스케일 컬러(Scale color) 시스템은 원시값(#FF0000, rgb)과 시맨틱 컬러(text-primary) 사이의 중간 토큰 층이다. 'blue-100', 'gray-900'처럼 일정 단계로 나눈 컬러 팔레트 자체를 말한다. 스캐폴드는 이 단계에서 HSL 컬러 모델의 한계—동일 Lightness에서도 Hue에 따라 인지 밝기가 달라지는 문제—를 해결하기 위해 구글 머티리얼 유(Material You)의 HCT(Hue·Chroma·Tone) 컬러 모델을 도입했다. HCT는 색조나 채도에 관계없이 균일한 대비값을 제공하여, 브랜드 컬러가 달라져도 유연하게 대응 가능한 팔레트를 만들 수 있다. 가장 큰 실용적 장점은 WCAG 접근성 대비를 톤값만으로 계산할 수 있다는 점: 전경색과 배경색의 Tone 차이가 40 이상이면 WCAG Large Text(3:1), 50 이상이면 Normal Text(4.5:1) 기준을 통과한다. 스캐폴드는 라이트/다크 모드를 단일 스케일로 대응해 토큰 수를 절약했으며, Solid 컬러(5 유채색+1 무채색, 16단계)와 Alpha 컬러(5 유채색 6단계, 무채색 16단계)로 팔레트를 구성했다.

타이포그래피 시스템(텍스트 스타일)에서는 확장성 있는 이름 규칙이 중요하다. Body 1, Body 2처럼 크기 순 내림차순으로 이름을 지으면 새로운 크기가 추가될 때마다 전체 이름을 바꿔야 하는 문제가 발생한다. 스캐폴드에서는 숫자 기반 상대적 명칭으로 이름을 재정의해 확장성 문제를 해결했다. 또한 아티클/문서용 행간(160%)과 UI 요소용 행간(130%)을 분리해 상황에 맞게 적용하는 dual 행간 체계를 도입했다.

기본 시각 요소 설계(컬러·타이포그래피·그리드·레이아웃·아이코노그래피)에서 실무에서 자주 간과하는 포인트들이 있다. 컬러 측면에서는 라이트 모드 기준의 브랜드 컬러가 다크 모드에서 명도 대비 부족 또는 과도한 강조로 나타날 수 있어, 다크 모드용 별도 브랜드 컬러를 정의해야 한다. 프라이머리 컬러와 스테이터스 컬러(경고/정상 상태)가 유사한 계열(레드, 블루)일 때는 서로 방해하지 않도록 세심한 구분이 필요하다.

8편에서는 특수 컴포넌트 — 특수한 목적을 고려한 표현 — 를 다룬다. 차량이나 IoT 기기를 조작하는 기능처럼 일반적인 Material Design 컴포넌트와 구별되는 독특한 표현이 필요한 경우다. 네 가지 패턴이 제시된다: ① 실물과 닮은 컴포넌트 (Moorgen 블라인드 슬라이더, Nest 온도 조절 휠 등) — 오프라인 경험을 연상시켜 직관적 인지를 도움, ② 허들이 있는 컴포넌트 (iPhone 전원 종료 스와이프, DJI Fly 이륙 롱프레스) — 실수·오작동을 방지, ③ 피드백을 제공하는 컴포넌트 (Mercedes Me 원격 시동의 Progress indicator, Google Home On/Off 상태 변화) — 조작에 대한 신뢰감을 줌, ④ 기존 형태를 계승하는 컴포넌트 (Shazam 원형 버튼, Soundcloud 파형) — 브랜드 아이덴티티를 각인. 특수 컴포넌트는 일반 컴포넌트와 시각적으로 구별되어야 하지만, 동시에 일관된 디자인 룰(상태 표현, 어포던스)을 따라야 한다.

출처

최종 업데이트: 2026-04-07 | 출처 15개