가장 간단한 디자인 시스템을 만드는 방법 - 컬러 시스템을 정의해보자

혹시 이런 경험 있으신가요?

• UI/UX 디자이너가 만든 디자인 시스템을 봤는데 너무 복잡해서 “이거 다 알아야 하나…?” 싶었던 경험
• 개발 막바지에 디자이너가 급히 정리한 디자인 가이드를 받아서, 유지보수하면서 곤란했던 경험

그렇다면 잘 오셨습니다! 오늘은 개발자와 디자이너가 가장 기본적으로 합의할 수 있는 디자인 시스템을 어떻게 정의할 수 있는지 알려드리려고 합니다.

디자인 시스템은 무엇인가요?

디자인 시스템은 결국 서비스 전반에 쓰이는 디자인 규칙의 집합입니다.

버튼 색, 텍스트 크기, 여백 규칙 같은 작은 단위부터 화면 단위까지, 일관된 규칙을 잡아놓은 것이죠.

• 개발자 입장에서는 UI 컴포넌트를 만들 때 반복적으로 쓸 수 있는 기준
• 디자이너 입장에서는 브랜드 톤앤매너를 유지할 수 있는 약속

이라고 생각하면 이해가 쉽습니다.

디자인 시스템은 만들고 있는 서비스의 컴포넌트에 들어가는 기본적인 요소를 말합니다. 만들어 둔 디자인 시스템을 기반으로 컴포넌트와 화면 내에 있는 다양한 요소들의 컬러, 텍스트 스타일, 여백 등이 정해집니다. 디자인 시스템을 기반으로 사용자들은 브랜드의 일관성을 느끼기도 합니다.

Foundation이란?

디자인 시스템을 이야기할 때 가장 먼저 나오는 개념이 Foundation입니다.

Foundation은 말 그대로 기초값 모음으로, 여기서 정의된 값들이 이후 Semantic 단계(의미를 부여하는 단계)로 확장됩니다.

보통 Foundation에는 다음이 포함됩니다:

1. Color
2. Text (타이포그래피)
3. Spacing (gap/padding/margin)
4. Border
5. Background

이 5가지 값들은 화면 내의 디자인을 구현함에도, 디자인을 만들어나감에도 필수적인 요소입니다. 그렇기에 프로젝트 시작 전에 미리 정의해두고 사용하면 좋습니다. 오늘은 그 중에서도 특히 컬러와 텍스트에 대해서 정의하는 방법을 알려드리려고 합니다.

아마도 디자이너와의 협업을 시작하는 경우, 이 많은 컬러들을 다 등록하고 쓰라는건가? 싶은 마음이 드실 때가 있었을 텐데요. 물론 팀 내의 규칙이 정해져 있기에 이를 반영한 디자인 시스템이지만, 이 과정에서의 의사소통의 리소스를 줄이기 위해서라도 가볍게 개념을 훑어 보아도 좋을 것 같습니다. 특히 이 글 내에서는 color와 관련된 디자인 시스템에 대해서 다뤄보도록 하겠습니다.

컬러의 종류

컬러에는 5가지의 종류가 있습니다.

1. Primary Color : 브랜드의 메인 컬러로, 주로 핵심 버튼의 컬러가 되거나 앱 디자인의 메인 컬러가 됩니다.
2. Secondary Color : 브랜드에서 사용하는 보조색으로 주로 핵심 버튼보다 위계가 낮은 행동을 유도합니다.
3. Tertiary (Assistive) Color : Secondary보다 낮은 행동을 유도하는 보조 컬러입니다.
4. Status Color : 상태를 나타내는 컬러입니다. 주로 에러 메시지나 성공 메시지를 나타냅니다.
5. Neutral Color : 중립적인 색상의 모음으로, 텍스트 컬러/아이콘 컬러/오퍼시티 등으로 활용할 때 사용합니다. 최근에는 주로 푸른 계열의 뉴트럴톤을 선호합니다.

이렇게 많은 컬러들은 모두 Semetic(값에 의미를 부여하는 단계)에서 사용합니다. 그리고 이 값들의 기초가 되는 Hex값을 정의하는 것이 Foundation 입니다.

Priamry ~ Tertiary 컬러는 모두 다른 색상이어야 하지만, 꼭 Tertiary 컬러를 활용할 필요는 없습니다. Secodnary 컬러로 커버되지 않는 행동이 있을 경우에만 이 컬러를 활용해서 행동을 유도하면 됩니다. 또한 Secondary 컬러와 Tertiary 컬러가 꼭 색상이 있어야 하는 것은 아닙니다. 이 말은 Neutral 컬러로 정의해도 괜찮다는 의미입니다. 다만 주의 할 점은, 텍스트/아이콘/백그라운드 컬러와 Secondary 컬러가 크게 겹치면 안된다는 것입니다.

컬러 네이밍 규칙

보통 다음과 같이 스케일을 붙여서 정의합니다.

예외적으로 색상 간 간격이 어색하다면 blue-150처럼 중간 단계를 추가할 수도 있습니다.

이렇게 규칙적으로 네이밍해두면, 코드에서도 바로 매핑하기가 수월해집니다.

Color를 정의할 때는 숫자를 붙입니다. 어떤 것은 100-1000까지를 사용하는 경우도 있고, 어떤 것은 10-100을 사용하는 경우도 있습니다. 어떻게 컬러에 숫자를 붙여 정의하는 것은 상관 없지만, 가장 중요한 것은 이 컬러에 일정한 규칙성이 있냐는 것입니다.

만약 아래와 같은 4285f4의 블루 값을 정의하고 싶다면, 반드시 blue 0-1000까지 100단위로 정의하겠다는 규칙이 있어야 합니다. 하지만 이러한 규칙에서도 예외 사항이 있습니다. 만약 100단위로 나눠 넣었을 때, 이 컬러들의 스케일이 자연스럽게 이어지지 않는 경우 해당 스케일 내에서 50에 해당하는 값을 추가해서 보완하겠다는 것 정도는 넣을 수 있습니다.

피그마 플러그인 Foundation 활용

이렇게 만들어지는 컬러 값은 위와 같습니다. 그리고 이 컬러들 중에서 사용하거나 의미를 부여하는 것이 바로 Sementic 단계이고, 이 과정에서 Primary와 Secondary와 같은 이름이 붙습니다. Foundation 단계에서는 위와 같은 사용하기 위한 모든 값을 정의해주시면 좋습니다. 그래야 추후 디자이너들과 논의해 컬러를 브랜드의 컨셉 안에서 수정할 수 있으니까요.

Status 컬러 정의하기

Status 컬러는 많이 필요하지 않습니다. 보통 3단계 정도면 충분합니다.

• Light (배경에 쓰기 좋은 연한 색)
• Base (가장 자주 쓰이는 기본색)
• Dark (텍스트에 쓰기 좋은 진한 색)

왜 이렇게 해야 할까?

개발자가 컴포넌트화하기 쉬워짐

• 버튼 배경 = primary-base
• 에러 문구 = error-dark 이런 식으로 토큰을 불러다 쓰면 됩니다.
  

협업 중 불필요한 커뮤니케이션 감소

• “이건 왜 초록색?” → “success-base라서요”
• “본문 크기 뭐 쓰면 돼요?” → “body-md 쓰세요”

유지보수가 쉬워짐

• 브랜드 색이 바뀌면? Foundation 단계 Hex값만 바꾸면 전체 UI에 반영됩니다.

컬러 시스템을 정의하면, 컬러를 가지고 디자이너와의 의사소통 오류를 일으키는 일이 적을 것입니다. 또한 개발 팀 내에서도 같은 규칙으로 사용할 수 있으며, 이것을 기반으로 더 많은 디자인 시스템을 확장해나갈 수 있겠죠. 많은 분들의 개발에 도움이 되는 지식이었기를 바라며 글을 마칩니다.

감사합니다.