brunch

You can make anything
by writing

C.S.Lewis

by 인사라 Nov 12. 2024

UXUI 디자인 시스템 파운데이션 토큰 네이밍까지

일관성 있는 경험 디자인

디자인 시스템과 파운데이션은 UX/UI 디자인에서 매우 중요한 개념이다. 두 용어는 종종 혼용되지만, 실제로는 목적과 사용 방식에서 차이가 있다. 이 두 개념을 상세히 설명하고, 웹 디자인에서 컬러 팔레트, 텍스트 색상, 웹 접근성을 어떻게 고려할지 이야기한다.

Design System

디자인 시스템

디자인 시스템은 UI 디자인의 일관성을 유지하고, 다양한 제품과 플랫폼에서 효율적인 작업을 할 수 있도록 돕는 종합적인 규칙과 자원의 집합이다. 한마디로, 디자인 시스템은 어떤 요소들이 어떻게 조화를 이루며 디자인을 구성할 것인가?"에 대한 답을 제시한다.

어떤 요소들이 어떻게 조화를 이루며 디자인을 구성할 것인가?

디자인 시스템은 다음과 같은 주요 요소로 구성된다. 회사마다 다르며 추가되거나 없는 항목도 있다.

컴포넌트 라이브러리: 버튼, 폼, 입력 필드 등 UI 요소들의 조합

스타일 가이드: 색상, 타이포그래피, 간격, 그리드 등 시각적 규칙

코드 규약: 프론트엔드 개발자들이 지켜야 할 규칙

프로세스 문서화: 디자인 시스템 활용 가이드라인

디자인 패턴: 사용자 상호작용에 따른 반응 패턴

구글의 Material Design은 가장 잘 알려진 디자인 시스템 중 하나로, 버튼, 카드, 네비게이션 바 같은 UI 요소들의 스타일링 및 배치를 규정한다. 백문이 불여일견으로 참고하기 좋은 세계적인 기업들의 디자인시스템리스트를 공유한다.

Gmarket Design (한국 지마켓 맞다. 한국어 문서라 보기가 편하다)

SalesForce Lightning Design System

Foundation

파운데이션

파운데이션은 디자인 시스템의 하위 개념으로, 기초적인 요소를 정의하는 프레임워크다. 이는 디자인 시스템의 토대가 된다.

파운데이션은 대개 다음과 같은 구성 요소를 포함한다.

그리드 시스템: 웹 페이지나 앱 화면에서 요소들이 어떻게 배치될지에 대한 기준

타이포그래피: 글꼴, 글자 크기, 줄 간격 등을 포함한 텍스트 스타일의 규칙

컬러 시스템: 색상 팔레트와 색상 사용 규칙

간격 시스템: 요소 간의 여백, 패딩 등을 정의한 규칙

디자인 파운데이션은 주로 기술적이고 기본적인 디자인 규칙을 정의하며, 이를 바탕으로 디자인 시스템이 확장되고 적용된다. 일관성 있는 디자인을 구현하게 하는 토대이다.

지마켓 파운데이션 캡처

참고로, Twitter Bootstrap 이라는 프레임워크는 파운데이션 디자인이 개발(CSS, HTML)로 어떻게 구현되는지 나타내어 주어 개발 협업 시에 활용하기 좋다.

디자인 시스템 VS 파운데이션 차이

디자인 시스템은 포괄적이고 완성된 규칙과 자원의 집합으로, 제품 디자인 관리와 확장을 위한 가이드라인도 포함하는 반면, 파운데이션은 기본적인 구성 요소와 규칙을 정의하여 디자인 시스템 구축의 기초가 된다.

Color

컬러 팔레트

컬러 팔레트는 디자인에서 사용되는 색상의 집합이다. 좋은 컬러 팔레트는 디자인의 일관성을 유지하고, 사용자에게 시각적 인식을 잘 전달할 수 있게 도와준다. 컬러 팔레트를 정할 때는 다음 사항을 고려해야 한다.

브랜드 아이덴티티: 색상은 브랜드의 성격과 관련이 있어야 한다.
예를 들어, 신뢰를 중요시하는 금융 회사는 푸른색 계열 사용

사용성: 색상 간의 대비가 충분히 있어야 시각적 접근이 용이.
특히 UXUI 에서 텍스트와 배경의 대비가 중요함

정서적 반응: 색상은 사용자의 감정을 자극한다.
예를 들어, 빨간색은 긴장감을 나타내어 경고, 알림 표시에 사용

구글은 머터리얼 가이드에서 기능적 역할에 중점을 두어 색상을 Primary, Secondary, Tertiary로 나누는데 이때 Primary는 텍스트, 오브젝트 색상을 말하고, On Primary는 배경색을 말한다.

Text

텍스트 색깔은?

텍스트 색깔은 가독성과 읽기 편의성을 고려하여 선택해야 하는데, 일반적으로 배경과 텍스트의 대비가 명확해야 읽기가 편하면서 피로도를 주지 않을 정도로 너무 화려하거나 강한 색을 피하는 것이 좋다.

어도비 디자인시스템 캡쳐

짙은 회색을 많이 사용하는데, 어도비 디자인시스템에 따르면 아래와 같다

Disabled test 비활성 글자: gray 500

Subdued text 보조 글자: gray 700

Body text 본문 글자: gray 800

Heading text 헤딩(타이틀) 글자: gray 900

여기서 Gray 50~900가 의미하는 것은, 디자인 시스템에서 색상의 명도 단계를 체계적으로 정의한 색상 스케일이다. 이 스케일은 특정 색상의 밝기에서 어둡기까지의 다양한 변형을 제공하며, 텍스트, 배경, 테두리 등 여러 디자인 요소에 적합한 색상을 선택할 수 있도록 돕는다.

WCAG

웹 접근성을 고려한 색상

웹 접근성에서 중요한 것은 시각적 접근성을 보장하는 것이다. WCAG(Web Content Accessibility Guidelines)에서는 텍스트와 배경 간의 대비 비율을 4.5:1 이상으로 유지할 것을 권장하는데, 보통 3:1을 넘는 것을 목표로 디자인을 하고, 색약 색맹 등 약자를 위한 디자인으로는 7:1의 고대비가 권장된다.

일반적으로 디자인할때 사용성 측면을 위하여 웹 접근성을 따르는 것이 좋다. 명암비 계산 해주는 사이트가 많은데 위 사이트는 여기에서 확인할 수 있다.

Semantic

시멘틱 컬러

시멘틱 컬러는 색상이 의미를 전달하는 데 사용되는 방식이다. 컬러팔레트에서 지정한 색이 어떻게 활용되는지 의미를 포함하는 것으로 분류하는 것을 말한다. 예를 들어, 빨간색은 경고나 오류 메시지를, 녹색은 성공, 알림 메시지를 나타내는 경우가 많은데 이를 그 의미에 분류한 것을 시멘틱 컬러라고 한다.

디자인에서 색상은 단순히 미적인 요소뿐만 아니라 사용자가 즉시 이해할 수 있는 정보를 전달하는 역할을 하는데, 이를 강조하는 것이다. 시멘틱 컬러는 색상이 그 자체로 특정한 의미를 내포하고 있어, 사용자가 직관적으로 상황을 파악할 수 있게 돕는다.

라인 디자인 시스템 캡처

Ant 디자인 시스템에서는 시멘틱 컬러 외에 Funtional Color를 확인할 수 있는데, Functional Colors와 Semantic Colors는 실제로 유사한 개념이다. 아주 미세한 차이가 있는데 살짝만 언급하고 넘어간다.

Functional Colors: 이 색상은 UI 디자인에서 사용자의 상호작용을 유도하는 역할. 색상 자체가 상태나 상호작용을 강조
예를 들어, 버튼, 체크박스, 링크 등의 상태를 나타내는 색상. 기능적 목적을 가진 색상으로, "활성화된 버튼"은 일반적으로 파란색으로, "비활성화된 버튼"은 회색으로 표시되는 방식

Semantic Colors: 특정한 의미나 상태를 전달하는 역할을.
예를 들어, 빨간색은 오류나 경고를 나타내고, 초록색은 성공이나 완료를 의미. 상황에 대한 직관적인 메시지 전달을 목적으로 사용

Ant 디자인 시스템 캡처

둘의 차이점은 색상이 무엇을 전달하는지에 대한 맥락있다. Functional Colors는 UI 요소가 어떻게 작동하는지를 표시하는 반면, Semantic Colors는 그 색상 자체가 상황이나 상태를 전달하는 데 초점을 맞춘다. 하지만, 두 색상은 때때로 동일한 역할을 할 수 있으며, 일부 디자인에서는 Functional Colors가 Semantic한 목적을 겸하기도 한다. 예를 들어, 경고 메시지를 빨간색으로 표시하는 경우, 이 색상은 동시에 기능적(사용자에게 경고를 알리는)이고 시멘틱(오류를 나타내는) 역할이 된다.

Naming

네이밍 컨벤션

네이밍 컨벤션은 소프트웨어 개발이나 디자인 시스템에서 색상, 변수, 파일 등의 이름을 규칙에 맞게 정해 일관성 있게 사용하고, 유지 보수나 협업을 원활하게 하기 위한 규칙을 말한다. 디자이너끼리 약속한 규칙이 아니라 개발자와도 소통할 훨씬 중요한 것이다. 디자인 시스템에서 사용하는 클래스나 변수 이름을 어떻게 정의할 것인지에 대한 규칙을 정해서 명확한 네이밍 컨벤션은 코드의 가독성을 높이고, 팀원 간의 협업을 원활하게 한다. 시멘틱 컬러에서 다뤘던 라인 디자인 시스템의 시멘틱 컬러에서는 네이밍 규칙까지 명시하는데 구체적으로 살펴보면 아래와 같다.

라인 시멘틱 컬러 네이밍 컨벤션

Numeral System 숫자 시스템

동일 카테고리 내에서 색상 값을 분류할 때 Numeral System 규칙을 따른다. 색상의 사용 빈도에 따라 우선순위를 정하며, 너무 많은 우선순위를 설정하지 않도록 한다. 최대 다섯 번째까지 사용을 권장한다.

Primary: 가장 자주 사용하는 색상

Secondary: 두 번째로 자주 사용하는 색상

Tertiary: 세 번째로 자주 사용하는 색상

Quaternary: 네 번째

Quinary: 다섯 번째, 기타 색상

Assistive 보조 색상

다른 색상 모드에서 이미 정의된 시멘틱 컬러를 동일 모드에서 사용해야 할 때, 해당 색상 앞에 "Alt" 또는 "Sub"를 붙여서 구분한다.

primaryTextAlt: Light 모드에서 기본 텍스트 색상(PrimaryText)을 Dark 모드에서 사용하려면 "Alt"를 추가하여 primaryTextAlt로 표시

secondaryTextSub: 기본 SecondaryText 색상을 보조 색상으로 사용할 경우 "Sub" 접두사를 사용하여 secondaryTextSub라고 명명

Characteristic 특성

색상이 특정 의미를 전달하거나 특수한 용도를 가질 때, 색상의 앞에 그 의미나 용도를 추가하여 구체화한다.

errorText: 오류 메시지에 사용되는 색상

successText: 성공 메시지에 사용되는 색상

warningText: 경고 메시지에 사용되는 색상 여기서

Category 범주화

색상이 사용되는 구체적인 카테고리를 기준으로 분류하며, 각 카테고리의 이름을 명확하게 정리하여 색상 사용을 체계적으로 관리한다. 예를 들어, 텍스트에 사용되는 색상, 배경에 사용되는 색상 등이 있다.

primaryText: 기본 텍스트 색상

secondaryBackground: 두 번째 배경 색상

accentColor: 강조 색상

라인 색상 네이밍 컨벤션을 살펴봤으나 꽤나 복잡하다고 느낄 수 있다. 하지만 네이밍 컨벤션은 명확한 규칙이 있다면 그 규칙에 따라서 퍼즐맞추듯이 만들기만 하면 되기 때문에 이 규칙을 개발자를 포함한 팀과 구체적으로 설정하여 커뮤니케이션 협업을 더 잘하는 것이 중요하다. 네이밍 컨벤션은 디자인 시스템의 유지보수와 색상 관리에 있어 효율성을 높이고, 다양한 디바이스나 테마에서 색상이 일관되게 적용될 수 있도록 도와주는 수단으로 활용하는 것이 좋다.

디자인 토큰

디자인 토큰은 이 네이밍 컨벤션을 바탕으로 이해하면 쉽다. 색상, 타이포그래피, 간격 등의 스타일을 변수화한 것인데, 디자인 토큰은 디자인에서 사용된 속성값을 코드화하는 작업으로, 디자인 시스템과 개발을 더 원활하게 연결한다. 구체적으로 색상, 글꼴, 여백 등을 토큰화하여, 개발자는 디자인을 코드로 쉽게 구현할 수 있다. 디자인 토큰은 디자인 시스템과 코드 간의 다리 역할을 하며, 스타일을 재사용 가능하고 일관되게 유지하는 데 도움을 준다.

왜 디자인 토큰을 사용할까?

일관성 유지: 색상, 폰트, 간격 등이 일관되게 사용되어 디자인 시스템을 효율적으로 관리

효율적인 협업: 디자이너와 개발자가 동일한 규칙을 따르기 때문에, 디자인과 개발 간의 소통이 원활

유지보수 용이: 디자인 토큰을 수정하면, 이를 사용하는 모든 코드에서 자동으로 변경 사항이 반영

아래는 색상, 간격, 텍스트 크기 등을 정의한 디자인 토큰의 예시, 디자인 작업에서 설정한 값을 JSON 형식으로 저장한 것이다. 색상과 스페이싱, 텍스트 크기에 대한 디자인 토큰을 위와 같은 예시로 코드와 동일하게 디자인 작업부터 토큰화 하여 디자인토큰이 될 수 있다.

  "colors": {
    "primaryText": "#111111",         // 기본 텍스트 색상 (가장 중요한 텍스트)
    "primaryTextAlt": "#FFFFFF",      // 다크 모드에서 사용하는 기본 텍스트 색상 (보조 색상)
    "errorText": "#D32F2F",           // 오류 상태에서 사용하는 텍스트 색상 (빨간색 계열)
    "successText": "#388E3C",         // 성공 상태에서 사용하는 텍스트 색상 (녹색 계열)
    "secondaryBackground": "#F5F5F5" // 보조 배경 색상 (연한 회색)
  }

  "spacing": {
    "small": "8px",
    "medium": "16px",
    "large": "24px"
  }

    "fontSize": {
      "small": "12px",
      "medium": "16px",
      "large": "24px"
    }

이해를 위해 코드를 가져온 것이니 코드화에 대한 부담이 들었다면 고이 접어두어도 된다. 프로그래밍을 못하는 디자이너라면 코드를 읽고 쓰는것 말고도 디자인 토큰, 네이밍 컨벤션을 기획 단에서 배우고 이해할 수도 있는데, Design Tokens Naming Playbook에서 제공하는 가이드를 참고하면 유익하다. 이 가이드는 디자인 토큰의 네이밍 방식을 where, what, which, how, when의 5가지 질문을 기준으로 나누어 체계적으로 설명하고 네이밍 할 수 있게 놀이북을 제공하여 디자인토큰 네이밍컨벤션 이해를 돕는다.

디자인 토큰 네이밍 플레이북 캡쳐

마치며

디자인 시스템은 디자인에 체계를 더해 사용자 경험을 향상시키기 위한 전략이라고 할 수 있다. 컬러 팔레트와 텍스트 색상, 웹 접근성을 고려하는 것은 사용자가 디자인을 직관적으로 이해하고, 다양한 사용자 환경에서 접근할 수 있도록 돕는다.

앞으로 디자인 시스템을 구축하거나 개선하려는 과정에서, 이러한 기본적인 원칙들을 염두에 두고 일관성 있는 색상과 요소들을 적용하는 것이 사용자의 경험을 더욱 향상시킬 수 있는 열쇠가 될 것이다. 디자인은 단순히 시각적인 요소만이 아니라, 사용자가 직관적으로 이해하고, 쉽고 효율적으로 상호작용할 수 있도록 돕는 중요한 도구임을 잊지 말자.

keyword

인사라 소속 직업 디자이너

변화하는 세상 속, 변하지 않는 가치를 추구하는 디자이너, 강사입니다.

구독자 23

작가의 이전글 애플 UX 라이팅 가이드 넷플릭스 앱스토어 리뷰 수천개를 보고 내린 문제정의 작가의 다음글

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari