Magazine

41
UX 디자인을 위한 휴리스틱 평가
42

디자인 시스템에 적용 가능한 시멘틱 컬러를 알아보자

2023.06.29

디자인 시스템에 적용 가능한 시멘틱 컬러를 알아보자


디자이너의 작업환경을 위한 UI 중심의 스타일 가이드에서 UIUX 중심의 디자인 시스템으로 추세가 바뀌어 가고 있습니다. 디자인 시스템을 사용하게 되며 디자이너와 개발자의 사이에서 컴포넌트 기반의 디자인을 하게 되었는데, 이로 인해 기존의 페이지 기반 형식보다 다양한 스크린을 디자인하도록 돕고 유연한 업데이트와 유지 보수를 할 수 있게 만들어 주었습니다.
이러한 흐름으로 진화하게 만든 몇 가지 촉매제를 들어보자면 구글의 머터리얼(Material) 디자인과 애플의 다크 모드 출시 그리고 작업 툴의 진화라고 볼 수 있습니다.

첫째로, 2014년 6월 구글이 머터리얼 디자인 시스템을 공개하면서 많은 회사들이 고유의 디자인 시스템을 구축하고 공유하고 있습니다. 프로덕트 별 디자인 시스템이 만들어지면 공동의 디자인 자산을 확충시키며 일관된 브랜드 정체성과 높은 사용성을 유지할 수 있습니다.
둘째로, 2019년 6월 애플이 WWDC 발표에서 IOS13의 다크 모드에 대해 공식 발표를 하였고 9월에 정식 버전이 론칭되며 기존 컬러 가이드로 대치되지 않는 것에 대해 명확하게 의미를 넣은 시멘틱 컬러로 대치하기 시작하였습니다.
셋째로, 디자인 툴의 진화로 포토샵을 사용하던 환경에서 2010년에 Sketch, 2014년에 Zeplin이 출시되었고 2016년부터 Figma가 도입되어 현재까지 상용화되며 디자이너와 개발자의 시스템 구축을 위한 연결 수단이 되었습니다.



1. 시멘틱 컬러의 정의


‘Sementic’을 영어로 직역하자면 의미론적이라는 뜻으로 시멘틱은 색상이 아닌 사용 방법에 따라 색상 이름을 지정하는 방법을 말합니다. 예를 들어 기존의 Blue500 대신 Primary color와 같은 형식으로 지정합니다.
그렇게 사용되는 목적과 UI에 따라 네이밍하고 적용하는 컬러를 말하며, 컬러의 관리와 유지 보수가 쉬워지며 다크 모드에도 최적화된 컬러로 화면을 구성할 수 있습니다.



2. 컬러 팔레트 선언하기

2-1) Gray Scale Colors

작업을 하기 전 정보의 계층구조를 나타낼 때 사용하며 텍스트, 정보를 나누기 위한 구분선 요소에 사용합니다. Gray 컬러를 Gray50, 100, 200, 300, 400, 500, 600, 700, 800 ,900까지 총 10단계로 나누어 필요에 따라 더 세분화하거나 간소화하여 사용합니다.

Gray Scale 컬러는 가독성을 고려해야 하기 때문에 배경으로 사용될 때의 명암비를 잘 조정해야 하는데 폰트 Regular 18pt 이하는 배경 대비 4.5:1, Regular 18pt, Bold 14pt 이상은 3:1의 대비율을 권장하고 있습니다.
이를 테스트할 때에는 디자이너의 직감도 좋지만 Adobe Color 사이트의 접근성 도구 메뉴를 추천드립니다.


2-2) Brand Colors

Primary Color는 눈에 띄는 버튼, 활성 상태 및 높은 표면의 색조와 같은 UI 전체의 주요 구성 요소에 대한 역할로 사용됩니다.
Secondary Color는 필터, 칩과 같이 UI에서 덜 눈에 띄는 구성 요소에 사용되며 색상 표현의 기회를 확장시킵니다.
Tertiary Color는 Primary와 Secondary의 균형을 맞추거나 요소에 대한 관심을 높이는 데 사용할 수 있어 대비되는 악센트의 역할을 유도하는 데 사용됩니다. 그리고 재량에 따라 사용할 수 있도록 하며 제품에서 더 폭넓은 색상 표현을 지원하기 위한 역할로 작용합니다.


2-3) 색상 구성하기

주요 색상인 Primary Color를 포함한 유채색 또한 10개의 명도 단계를 통해 선언합니다.
각 색상을 그룹화하는 과정은 임의로 진행해도 무방하지만, 되도록 컬러의 특성 위주로 진행하는 것이 이후 활용에서 많이 편리하게 이용할 수 있습니다.



Primary Color 만들기
1. Primary Color를 지정합니다.
2. 컬러 옵션 값의 HSL(Hue, Saturation, Lightness)을 선택합니다.



디자인 시스템에 적용 가능한 시멘틱 컬러


3. L 값을 변경합니다. 이때 밝기 차이가 10인 명도 값을 만들고자 한다면, +10, -10을 가감해 줍니다.
4. 그렇게 총 10개의 명도 값을 만들면 됩니다.



디자인 시스템에 적용 가능한 시멘틱 컬러


Secondary(Tertiary) Color 만들기
1. 위와 마찬가지로 H 값에 +30, -30을 가감합니다. 맥시멈 컬러가 360이기 때문에 범위 내에서 선택해야 합니다.



디자인 시스템에 적용 가능한 시멘틱 컬러


2. 1에서 추출한 보조 컬러 또한 L 값을 변경하여 컬러의 단계를 만들면 됩니다.
또는 컬러 팔레트를 명도별로 선언할 시에 활용 가능한 사이트를 소개합니다.



3. 시멘틱 컬러 선언하기


시멘틱 컬러를 선언할 때에는 기본 팔레트를 기반으로 합니다.
컬러 팔레트 내의 색상명이 아닌 UI 요소 및 상태의 의미를 부여하는 방식으로 나타냅니다.
아래를 통해 명명법과 몇 가지 예를 참조할 수 있습니다.
“Element.State”



디자인 시스템에 적용 가능한 시멘틱 컬러


기본 팔레트의 색상을 여러 시멘틱 색상으로 사용할 수 있습니다. 명명법의 원칙은 없지만 프로덕트 별 사용자 데이터 테스트에 따라 가장 효율적이라고 판단되는 방식의 명명법을 따르시면 됩니다.



디자인 토큰 활용하기

디자인 시스템의 강점은 옵션(예: purple-40 혹은 color-warning)을 콘텍스트(배경 또는 타이포그래피)에 맞게 적용하는 방법과 시기를 아는 것에 있습니다. 이것은 디자인 결정 혹은 시스템 디자인에서 디자인 토큰으로 알려진 옵션을 기반으로 합니다.



디자인 시스템에 적용 가능한 시멘틱 컬러


"purple-500"은 이 색상을 어디에 어떻게 적용해야 하는지에 대한 설명이 없습니다. 그러나 "color-action"은 어디에 어떻게 적용해야 하는지 알려줍니다. (텍스트 링크 및 버튼과 같은 상호 작용 요소). 이러한 경우 버튼 컴포넌트가 사용됩니다.


1. Values
색상 값, 절대 및 상대 길이 단위, 백분율, 숫자 등과 같은 코드의 기본 값(밸류)입니다.

2. Base Variables (글로벌 토큰)
글로벌 토큰은 컨텍스트에 구애받지 않는 이름으로 표현되는 디자인 언어의 기본 값입니다. 색상 팔레트, 애니메이션, 타이포그래피 및 치수 값은 모두 글로벌 토큰으로 기록됩니다. 이들은 직접 사용할 수 있으며 다른 모든 토큰 유형에 의해 상속됩니다.

3. Common *Tokens* (별칭 토큰)
별칭 토큰은 특정 컨텍스트 또는 추상화와 관련이 있습니다. 별칭은 토큰의 의도된 목적을 전달하는 데 도움이 되며 단일 의도를 가진 값이 여러 위치에 나타날 때 효과적입니다.

4. Component *Tokens* (구성 요소별 토큰)
구성 요소별 토큰은 구성 요소와 관련된 모든 값을 철저하게 표현한 것입니다. 별칭 토큰에서 상속되는 경우가 많지만 엔지니어링 팀이 구성 요소 개발에 토큰을 적용할 때 가능한 한 구체적으로 지정할 수 있는 방식으로 이름이 지정됩니다.

디자인 및 코드
Figma를 사용하는 경우 디자이너가 직관적으로 사용할 수 있도록 토큰을 구성할 수도 있습니다. 또한 설계를 쉽게 지정/검토할 수 있습니다.



디자인 시스템에 적용 가능한 시멘틱 컬러


4. 다크모드 만들기

라이트 모드와 다크 모드를 하나의 컬러를 기준으로 반전하면 좋겠지만, 실제 대응해 보면 맞지 않는 컬러들이 나오게 됩니다. 따라서 다크 모드의 컬러는 따로 지정을 해주어야 합니다. 다크 배경은 컬러 대비가 크기 때문에 채도 낮은 컬러를 사용합니다. 아래 예시 이미지에서 알 수 있듯이 컬러의 조정은 반드시 필요한 과정입니다.



디자인 시스템에 적용 가능한 시멘틱 컬러


Material design에서 비교한 라이트 모드 VS 다크 모드

스타일의 설명 부분에 각 시맨틱 색상이 참조하는 기본 팔레트 색상을 표시하고 색상에 대한 Figma의 접근 방식을 더욱 강화할 수 있습니다. 아래 예에서 라이트 모드와 다크 모드를 Primary Action 가리키는 것을 예시로 볼 수 있습니다.



디자인 시스템에 적용 가능한 시멘틱 컬러


이 설명은 우리가 작성한 사용자 지정 플러그인을 통해 시맨틱 색상을 기본 팔레트 색상에 연결하는 것입니다. 기본 팔레트 색상을 변경할 때마다 플러그인이 시맨틱 색상을 자동으로 업데이트하므로 수동으로 아무것도 할 필요가 없어 편리합니다.



5. 선진사례

- 쏘카

시멘틱 컬러는 컬러 팔레트의 개념인 베이직 컬러를 가져와서 사용합니다. 디자인뿐만 아니라 코드상에서도 시멘틱 컬러에 베이직 컬러를 매핑해서 개발하였습니다. 즉, 아래와 같이 베이직 컬러를 특정 hex 코드로 명명하고, 시멘틱 컬러에 베이직 컬러를 다시 가져다 입히는 방식입니다.



디자인 시스템에 적용 가능한 시멘틱 컬러


- 지마켓

Semantic Color는 UI요소들의 기능 또는 정보 유형에 따라 의미를 강조하여 전달하는 등의 목적으로 보조적으로 사용하는 컬러입니다. 사용되는 목적과 UI에 적용되는 상황에 따라 일관된 색상 사용은 인지 부하를 낮게 유지하고 통합된 사용자 경험을 제공합니다. UI에 적용되는 상황에 맞는 의미를 담은 명칭으로 관리하며, 여러 상황에 대해서는 컬러 팔레트와 함께 사용합니다.



디자인 시스템에 적용 가능한 시멘틱 컬러


6. 이모션 사례

- 이마트 24


디자인 시스템에 적용 가능한 시멘틱 컬러


이모션에서 진행한 이마트24 구축 프로젝트 당시 시멘틱 컬러 시스템을 도입하여 사용하였습니다.
각 프로젝트의 효율에 맞는 컬러 시스템 정의로 별칭 토큰까지 나타내었습니다.



7. 인사이트 도출 (결론)

베이직 컬러에서 시멘틱 컬러를 사용하는 추세에 있어서 결국 UX의 편의를 위한 이유들로 인해 자연스럽게 컬러 시스템이 발전해 왔습니다. 작업자와 사용자를 위한 구글의 머터리얼 디자인 시스템이 시작을 알렸고 사용자들의 시각적 편의를 위한 애플의 다크 모드의 출시로 인해 큰 발자국을 갔으며 UX 작업자들을 위한 툴의 진화로 컬러 네이밍이 디자인 토큰으로 진화하게 되었습니다. 이처럼 새로운 개념들이 생겨나고 오래된 개념들이 사라지고 하는 일은 결국 인류를 위한 가치를 완성하는 데에 활용될 것입니다.

디자인 토큰이라는 요소를 통해 시멘틱 컬러 명칭을 정하고자 할 때, 단계별 명명법에 따라 나올 수 있는 효율적 범위가 달라질 수 있습니다. 그러므로 초기에 컬러 사용 범위를 정하거나 작업 환경 내부에서 A/B 테스트를 통하여 무엇이 더 효율적인지에 따라 컬러명을 정의하고 보다 더 나은 프로덕트 유지 환경으로 개선할 수 있을 것입니다.

프로덕트의 디자인 시스템을 완성해두면 공동의 디자인 자산을 확충할 수 있어 이해도의 싱크를 맞추는 역할을 합니다. 그리고 일관된 브랜드 정체성을 만들 수 있는데 다양한 채널에 걸쳐 브랜드 아이덴티티를 일관되게 전달하고 높은 수준의 사용성을 유지하려는 목적도 있습니다. 더불어 커뮤니케이션의 기준을 마련해 줄 수 있으므로 여러 부서나 팀 간에 언어와 기준을 공유해 오해를 줄여줍니다. 이처럼 디자인 시스템의 시멘틱 컬러를 적용할 수 있게 되면 업무 프로세스 최적화는 물론 브랜드 정체성을 확립시킨다는 것의 장점이 있습니다.




출처




이모션글로벌 사이트 배너

김남희Leader
CD2e·motion
42
41