디자이너의 한마디

“브랜드 컬러를 #0066FF에서 #00B900으로 변경하기로 했어요.”

디자이너의 이 한마디에 개발팀 전체가 얼어붙었습니다. 서비스 전체에 흩어져 있는 수백 개의 버튼, 링크, 아이콘들의 색상을 일일이 찾아서 수정해야 한다는 의미였으니까요. 더 큰 문제는 각 개발자마다 미묘하게 다른 색상 값을 사용하고 있었다는 것입니다.

#0066FF
#0065FF
#0067FE
rgb(0, 102, 255)

같은 “파란색”이지만, 누군가는 헥스 코드로, 누군가는 RGB로, 그리고 미묘하게 다른 값들로 구현해두었습니다. 이것이 바로 체계적인 디자인 시스템 없이 서비스를 만들어갈 때 직면하게 되는 현실입니다.

디자인 시스템, 왜 필요한가?

동일한 도메인 서비스에서 일관된 디자인을 유지하면서도 다양한 사용성을 확보하기 위해서는 체계적인 접근이 필요합니다. 이러한 고민의 결과물이 바로 UIKit과 같은 공통 디자인 라이브러리입니다.

성공적인 디자인 시스템은 세 가지 핵심 원칙을 반드시 고려해야 합니다: 일관성, 확장성, 접근성

1. 일관성: 사용자는 혼란스러워합니다

사용자가 A 페이지에서 파란색 버튼을 클릭했을 때 저장이 되었다면, B 페이지에서도 파란색 버튼을 클릭하면 저장이 될 것이라고 기대합니다. 하지만 어떤 페이지에서는 호버 시 버튼이 살짝 밝아지고, 어떤 페이지에서는 아무 반응이 없다면? 사용자는 이 서비스가 제대로 작동하는지 의심하게 됩니다.

Material Design 3의 해법

Google의 Material Design 3는 이 문제를 명확한 수치로 해결했습니다:

• Hover: 배경에 +8% 투명도 레이어 추가
• Focus: +10% 투명도
• Press: +10% 투명도
• Drag: +16% 투명도

이런 명확한 기준이 있다면, 새로운 버튼을 만들 때마다 “호버 효과를 어떻게 할까?” 고민할 필요가 없습니다. 정해진 규칙을 따르면 되니까요. 이것이 바로 디자인 시스템이 제공하는 일관성입니다.

2. 확장성: 같은 시스템, 다른 브랜드

우리 회사가 여러 브랜드를 운영한다고 가정해봅시다. 메인 서비스는 파란색을 사용하지만, B2B 서비스는 초록색, 프리미엄 서비스는 검은색을 사용합니다.

만약 각 서비스마다 디자인 시스템을 처음부터 다시 만들어야 한다면? 엄청난 비효율입니다. 색상만 다를 뿐, 버튼의 크기, 모서리 둥글기, 그림자 스타일은 모두 동일한데 말이죠.

이때 필요한 것이 확장 가능한 디자인 시스템입니다. 핵심 구조는 유지하면서 브랜드별 특성만 변경할 수 있어야 합니다.

3. 접근성: 모두를 위한 디자인

잘못된 사례: 아름답지만 읽을 수 없는

형광 핑크, 밝은 노랑, 파스텔 블루로 된 예쁜 배지들. 하지만 이 디자인을 흑백으로 변환하면 충격적인 사실이 드러납니다.

텍스트와 배경의 구분이 거의 사라집니다. 특히 노란색 배지는 흑백으로 보면 글자가 거의 보이지 않습니다.

이것이 의미하는 바는 명확합니다. 색각 이상이 있는 사용자나 저시력 사용자에게 이 디자인은 사용할 수 없다는 것입니다.

올바른 사례: Dell Design System

Dell Design System의 배지를 살펴봅시다.

흑백으로 변환해도 모든 텍스트가 명확하게 읽힙니다. 색상에 의존하지 않고도 정보를 전달할 수 있도록 설계되었기 때문입니다.

Material Design 3도 강조합니다:

“색상을 부적절하게 조합하면 시각적 접근성에 필요한 대비가 깨질 수 있습니다.”

접근성은 선택이 아닌 필수입니다. 전 세계 인구의 약 8%가 색각 이상을 가지고 있다는 사실을 기억해야 합니다.

디자인 토큰: 변수로 관리하는 디자인

이제 본격적으로 해결책을 살펴보겠습니다. 첫 번째는 디자인 토큰(Design Token)입니다.

디자인 토큰은 간단히 말해 디자인 속성을 변수로 만드는 것입니다. 프로그래밍의 변수 개념을 디자인에 도입한 것이죠.

변수 없이 디자인하기

버튼 배경색: #0066FF
링크 색상: #0066FF
아이콘 색상: #0066FF
알림 배경색: #0066FF
...

브랜드 컬러를 바꾸려면? 모든 곳을 찾아서 일일이 수정해야 합니다.

디자인 토큰 사용하기

primary-color = #0066FF

버튼 배경색: primary-color
링크 색상: primary-color
아이콘 색상: primary-color
알림 배경색: primary-color

브랜드 컬러를 바꾸려면? primary-color 하나만 바꾸면 모든 것이 자동으로 변경됩니다.

체계적인 네이밍 전략

IBM은 Object – Base – Modifier 구조를 사용합니다:

• notification - error - background - color
• button - danger - primary
• layer - accent - hover

Salesforce는 Group – Category – Property – Comp – Value 구조를 사용합니다:

• color - text - button - default - hint
• brand - background - dark - transparent

이름만 봐도 “알림의 오류창 배경 색상”이라는 것을 정확히 알 수 있습니다. 이런 명확한 네이밍은 디자이너와 개발자 간의 소통을 매우 원활하게 만듭니다.

Line Design System의 실제 토큰들

Line은 디자인 토큰을 다양한 카테고리로 세분화했습니다:

타이포그래피 토큰

토큰 네이밍은 언어, 타입, 사이즈, 폰트 사이즈, 폰트 굵기로 구성됩니다:

• EN / Title / XXL 38 / Bold

컬러 토큰

• ldsg-color-brand-primary: Line Green
• ldsg-color-brand-secondary: Line Navy
• ldsg-color-brand-onsurface: White

둥글기 토큰

• ldsg-radius-100: 3px
• ldsg-radius-200: 5px
• ldsg-radius-300: 7px
• ldsg-radius-400: 12px
• ldsg-radius-circle: 50% (완전한 원)

토큰의 종류는 눈에 보이는 것만이 아닙니다. z-index(레이어 순서), transition-duration(전환 시간) 같은 눈에 보이지 않는 속성도 토큰으로 관리할 수 있습니다.

아토믹 디자인: 원자에서 페이지까지

디자인 토큰이 “무엇을” 변수로 만들지에 대한 것이라면, 아토믹 디자인(Atomic Design)은 “어떻게” 조합할지에 대한 방법론입니다.

웹 디자이너이자 개발자인 Brad Frost가 제안한 이 방법론은 화학의 원자 개념에서 영감을 받았습니다. 물질이 원자로 구성되듯, UI도 작은 단위에서 큰 단위로 조합된다는 발상입니다.

5단계 계층 구조

1. 원자 (Atoms)

가장 기본적인 HTML 요소들입니다.

예시:

• 버튼
• 입력 필드
• 레이블
• 아이콘
• 타이포그래피

Instagram을 예로 들면, 하트 아이콘 하나, “팔로우” 텍스트 하나, 사용자 프로필 이미지 하나가 모두 원자입니다.

2. 분자 (Molecules)

여러 원자가 결합하여 하나의 기능을 수행합니다.

예시:

• 검색 폼 = 입력 필드 + 검색 버튼
• 프로필 카드 = 프로필 이미지 + 이름 레이블 + 팔로우 버튼

Instagram의 하단 내비게이션 바는 여러 아이콘(원자)이 모여 만들어진 분자입니다.

3. 유기체 (Organisms)

분자들이 모여 인터페이스의 구별되는 섹션을 형성합니다.

예시:

• 헤더 = 로고 + 검색 폼 + 알림 아이콘 + 프로필 메뉴
• 피드 카드 = 프로필 카드 + 이미지 + 좋아요/댓글 액션 바 + 캡션

Instagram의 피드 한 개는 사용자 정보, 게시 이미지, 좋아요 버튼, 댓글 버튼, 타임스탬프, 캡션이 모두 결합된 유기체입니다.

4. 템플릿 (Templates)

유기체들이 페이지 레이아웃에 배치됩니다. 아직 실제 콘텐츠는 들어가지 않은 와이어프레임 단계입니다.

• 로그인 페이지 템플릿
• 피드 페이지 템플릿
• 프로필 페이지 템플릿

5. 페이지 (Pages)

템플릿에 실제 데이터가 채워진 최종 결과물입니다. 사용자가 실제로 보게 되는 화면입니다.

디자인 토큰 + 아토믹 디자인 = 완벽한 조합

여기서 중요한 통찰이 있습니다. 디자인 토큰은 아토믹 디자인의 원자보다도 더 근본적인 단계입니다.

디자인 토큰 → 원자 → 분자 → 유기체 → 템플릿 → 페이지

실제 작동 방식

1단계: 디자인 토큰 정의

• primary-color: #00B900
• button-radius: 8px
• button-padding: 16px

2단계: 원자 생성

• 버튼 = primary-color + button-radius + button-padding 사용

3단계: 분자 조합

• 검색 폼 = 입력 필드(원자) + 검색 버튼(원자)

4단계: 유기체 구성

• 헤더 = 로고(원자) + 검색 폼(분자) + 프로필 메뉴(분자)

5단계: 템플릿 배치

• 메인 페이지 = 헤더(유기체) + 피드(유기체) + 사이드바(유기체)

6단계: 페이지 완성

• 실제 데이터를 템플릿에 주입

이렇게 하면 primary-color 하나만 바꿔도 모든 버튼, 검색 폼, 헤더의 색상이 자동으로 변경됩니다. 100개의 버튼 색상을 1초 만에 바꾸는 마법이 가능해지는 것입니다.

실무에서의 적용

다크모드 전환

디자인 토큰의 진가는 다크모드를 구현할 때 드러납니다.

라이트 모드

• background-color: #FFFFFF (흰색)
• text-color: #212529 (검은색)

다크 모드

• background-color: #212529 (검은색)
• text-color: #FFFFFF (흰색)

토큰 값만 교체하면 전체 서비스가 다크모드로 전환됩니다. 개별 컴포넌트를 수정할 필요가 없습니다.

브랜드별 테마

같은 디자인 시스템을 여러 브랜드에 적용할 때도 마찬가지입니다.

메인 브랜드

• primary-color: #0066FF

B2B 브랜드

• primary-color: #00B900

프리미엄 브랜드

• primary-color: #000000

브랜드 컬러만 바꿔도 전혀 다른 느낌의 서비스가 탄생합니다.

에필로그: 디자이너의 또 다른 한마디

6개월 후, 디자이너가 다시 말합니다.

“브랜드 컬러를 다시 #0066FF로 돌리기로 했어요.”

이번에는 아무도 당황하지 않습니다. 디자인 토큰 하나만 바꾸면 되니까요. 심지어 30초도 걸리지 않습니다.

더 놀라운 것은, 이 과정에서 단 하나의 버그도 발생하지 않았다는 것입니다. 일관된 시스템이 일관된 결과를 보장했기 때문입니다.

마치며

디자인 토큰과 아토믹 디자인은 단순히 “깔끔한 코드”를 위한 것이 아닙니다. 이것은:

• 개발자의 시간을 절약합니다
• 디자이너와의 소통을 원활하게 합니다
• 사용자에게 일관된 경험을 제공합니다
• 브랜드의 확장성을 보장합니다
• 접근성을 자연스럽게 달성합니다

처음에는 “이렇게까지 해야 하나?” 싶을 수 있습니다. 하지만 서비스가 성장하고, 페이지가 늘어나고, 팀원이 늘어날수록 이 시스템의 가치는 기하급수적으로 커집니다.

---

참고 자료

• Material Design 3 – Interaction States
• Dell Design System
• Atomic Design by Brad Frost
• Line Design System
• Dribbble – Colorful Tags