디자인 시스템이란?
프로덕트 디자인을 하다보면 디자인 시스템이라는 단어를 자주 듣게 된다. 오늘은 디자인 시스템이 뭔지, 왜 필요한지, 그리고 어떠한 컨셉인지 알아보려고 한다.
디자인 시스템이란 뭘까?
디자인 시스템이란 제품에서 일관된 사용자경험을 만들기 위해 팀에서 함께 쓰는 UI/UX 디자인의 원칙과 재료들의 집합이다. 여기에는 여러팀에서 재사용 가능한 디자인 규칙, 컴포넌트, 코드, 가이드 문서까지 다 포함된다. 쉽게 말해, 우리 브랜드와 서비스에 맞는 디자인의 기준과 방법론을 전체 팀원들끼리 하나의 합의하에 정리해둔 것이라고 보면 된다.
디자인 시스팀에는 Atomic Design System이라는 많이 참고되는 유명한 개념이 있다. Brad Frost의 아토믹 디자인 시스템에서 잘 설명되어있는데, 이건 디자인을 아토믹(원자) 단위로 쪼개서 설계하는 방식이다. 버튼, 인풋, 카드 같은 기본 단위부터 시작해서, 이걸 조합해서 더 복잡한 UI를 만든다. 마치 작은 레고블락으로 더 큰 장난감 자동차나 비행기를 만드는걸 생각하면 쉽다. 이런 방법을 쓰면 작은 요소부터 큰 구조까지 체계적으로 관리할 수 있다.
Rohan Kamath의 예시: 왼쪽에서 오른쪽으로 갈수록 개별 객체들이 점진적으로 크게 그룹화 되어진다.구글의 Material Design System도 많이 쓰인다. 구글에서 만든 이 시스템은 색상, 타이포그래피, 그림자, 모션 등 제품 전체에 적용되는 원칙과 컴포넌트를 일관적인 경험안에서 체계적으로 제공한다. 이 시스템 덕분에 구글의 여러 제품과 서비스들은 일관된 사용자경험을 가질 수 있다.
디자인 시스템이 왜 필요할까?
처음에는 디자인 시스템 없이도 빠르게 제품의 UI 디자인과 개발이 가능하다. 하지만 서비스가 점점 커지고, 디자이너와 개발자가 많아지면 디자인과 코드가 점점 불일치하기 시작한다. 불일치하게되면 나중에 문제가 생겼을떄 유지와 보수 비용이 엄청나다.
이때 디자인 시스템이 있으면 모두가 합의하고 있는 같은 기준으로 디자인하고 개발할 수 있어서 문제가 생겼을시 유지 보수의 비용도 적고 팀간의 협업이 훨씬 효율적으로 바뀐다. 개발자들의 몸값이 엄청나므로, 그들의 개발시간을 단축하는건 회사 입장에서 엄청난 오퍼레이션비용을 절감할 수 있는것이다. 추가적으로 합의된 디자인 시스템안에서 UI를 체계적으로 설계하면, 제품의 모든 경험들이 일관성있게 만들어진다.
디자인 시스템의 구조
디자인 시스템은 보통 세 가지 구조로 나눌 수 있다.
1. Foundation (기초 토큰 계층)
여기는 UI의 기본 스타일 요소를 정의하는 부분이다. 예를 들면 색상(Color token), 타이포그래피(Typography token), 스페이싱(Spacing token), 그림자(Shadow token) 등이 있다. 이런 토큰을 브랜드나 제품에 맞게 정리해두면, 팀원 누구나 같은 기준으로 디자인할때 이 토큰들을 사용할 수 있고 일관적인 사용자경험과 제품 개발의 유지보수 및 확장성을 용이하게한다. 특히 모든 토큰들은 시멘틱한 네이밍을 가직욌다. 토큰의 밸류자체를 팀들이 디자인이나 개발할떄 사용하는것이아닌 시멘틱 네이밍 즉 각토큰이 사용될떄 의미가 부여가된 이름으로 사용되어 더욱 빠르게 개발하고 관리할수있게 만들었다.
Inter, 24px, 28px line-height → Headline.large
Claudio Santos의 토큰 예시Color token:
Primary-text = #ffffff
Primary-background = #1373ea
Default-text = #000000
Default-border = #edeae9
Default-background-weak = #ffffff
Typography token:
Headline.large = Inter, 24px, 28px line-height, 400
Body.medium = Inter, 14px, 20px line-height, 400
Label.medium = Inter, 14px, 20px line-height, 500
Spacing token:
Spacing.4 = 4px
Spacing.16 = 16px
Spacing.32 = 32px
Shadow token:
Shadow.large
Shadow.medium
Shadow.small
2. Components (재사용 가능한 UI 단위)
위에 각각의 파운데이션 토큰을 바탕으로 버튼, 인풋필드, 카드, 토스트 같은 컴포넌트를 조립한다. 여기서는 각 컴포넌트가 다양한 상황(기본, 호버, 클릭, 에러, 비활성 등)에 쓸 수 있도록 Variations도 정의한다.
Primary-text + Primary-background + Label.medium + Spacing.4 → PrimaryButton
Button
Primary / Secondary / SubtleIcon
TextInput
With icon / Error / Disabled
Modal
With illustration / Empty state
Card
With icon / With primary button
3. Patterns (사용자 플로우 단위 인터페이스 조합)
여러 개의 컴포넌트를 조합해서 자주 쓰이는 UI 패턴을 만든다. 예를 들면 로그인 폼, 댓글 섹션, 카드 리스트 등이 있다.
Hyperact
Form pattern
Label + Input + Error message
Empty state pattern
Icon + Title + Body + CTA Button
결론
디자인 시스템은 단순히 ‘비주얼 스타일 가이드라인’이 아니라, 팀 전체가 효율적으로 협업하고, 제품의 일관성과 퀄리티를 높여주는 강력한 하나의 질서이다. 초반에는 만들기 번거롭게 느껴질 수 있지만, 한번 제대로 만들어두면 디자인 및 개발의 완성도도 높아지고 일관적인 사용자 경험을 제공하며, 확장 가능한 디자인을 만들면서도 빠른 개발 속도를 유지할 수 있다.
Atomic Design이나 구글의 Material Design처럼 이미 검증된 디자인 시스템을 참고해서, 우리 디자이너분들이 디자인 시스템에 더욱 친숙해지면 좋겠다. https://litt.ly/teamours_design
