[HOW TO UI·UX]디자인 시스템의 시멘틱 컬러를 아시나요?
시멘틱 컬러의 정의부터 시멘틱 컬러 선언 방법까지
UI·UX 디자인이 궁금하다고요? 🤔 <디지털 인사이트>가 국내외 디자인 기업과 전문가들이 발행하는 자체 콘텐츠 가운데 실무 디자인에 도움이 될 좋은 글을 추려 읽기 좋게 정리했습니다. 원문을 참고하면 더 자세한 내용을 알 수 있어요.
최근 디자이너의 작업환경을 위한 UI 중심의 스타일 가이드에서 UX 중심의 ‘디자인 시스템’으로 추세가 바뀌어 가고 있습니다. 디자인 시스템은 디자인 요소들의 일관성을 유지하고, 사용자 경험을 개선하기 위해 사용되는 디자인 방법론입니다.
이런 디자인 시스템 전환 추세의 일등공신들은 ‘구글’과 ‘애플’ 그리고 디자인 툴의 진화인데요. 디자인 시스템을 통해 컴포턴트 기반의 디자인을 하게 된 디자이너와 개발자는 기존의 페이지 기반 형식보다 다양한 스크린을 디자인하고, 더욱 유연하게 업데이트와 유지보수를 할 수 있게 됐습니다.
한편 이렇게 디자인 시스템이 주목받게 되면서 ‘시멘틱 컬러(Sementic Color)’가 함께 주목을 받고 있는데요. 과연 시멘틱 컬러는 무엇이기에 이렇게 디자이너들의 주목을 받고 있는 것일까요?
이번 글에서는 디자인 전문기업 이모션글로벌이 이야기하는 시멘틱 컬러에 대해 알아봅니다.
1. 시멘틱 컬러란? 🤔
‘시멘틱(Sementic)’을 영어로 직역하자면 ‘의미론적’이라는 뜻입니다. 영어 단어 특성상 처음 듣는 사람들은 특정 색상의 명칭이라 오해하기 쉽지만, 시멘틱 컬러는 특정한 색상을 지칭하는 말이 아니라 ‘사용 목적이나 UI에 따라 색상 이름을 부여하는 방식’을 말합니다.
예를 들어 ‘Blue500’ 같은 색상 명칭 대신 ‘Primary color’ ‘SecondaryColor’ ‘Tertiary Color’ 같은 형식으로 색상에 특별한 이름을 지정하는 겁니다. 그리고 이렇게 시멘틱 컬러를 사용하면 색상의 관리와 유지 보수가 쉬워지며, 다크 모드에도 더욱 손쉽게 최적화된 컬러로 화면을 구성할 수 있습니다.
- ‘주색(Primary Color)’은 눈에 띄는 버튼, 활성 상태 및 높은 표면의 색조와 같은 UI 전체의 주요 구성 요소에 대한 역할로 사용할 색상을 지정합니다.
- ‘보조색(Secondary Color)’는 필터, 칩과 같이 UI 디자인에서 덜 눈에 띄는 구성 요소에 사용되는 색상이며, 색상 표현의 기회를 확장시키는 색상입니다.
- Tertiary Color는 주로 주색과 보조색의 균형을 맞추거나 요소에 대한 관심을 높이는 데 사용할 수 있어 대비되는 악센트의 역할을 유도하는 데 사용됩니다. 그리고 재량에 따라 제품에서 더 폭넓은 색상 표현을 지원하기 위한 역할로 작용합니다.
🖌이모션이 알려주는 주색 만들기
1. 주색으로 사용하기 원하는 색상을 지정합니다.
2. 색상 옵션 값의 HSL(Hue, Saturation, Lightness)을 선택합니다.
3. L 값을 변경합니다. 이때 밝기 차이가 10인 명도 값을 만들고자 한다면, +10, -10을 가감해 줍니다.
4. 같은 방식으로 총 10개의 색상 명도 값을 만듭니다.
🖌이모션이 알려주는 보조색 만들기
1. 주색 만들기와 마찬가지로 H 값에 +30, -30을 가감합니다. 맥시멈 색상이 360이기 때문에 범위 내에서 선택해야 합니다.
2. 앞서 추출한 보조 색상 또한 L 값을 변경해 컬러의 단계를 만들면 됩니다.
2. 컬러 팔레트 선언
본격적으로 시멘트 컬러를 선언하기 전에 ‘컬러 팔레트 선언’을 진행할 필요가 있습니다. 컬러 팔레트 선언은 시멘틱 컬러와 비슷하게 웹사이트나 디자인 프로젝트에 사용할 색상들을 정의하고 네이밍하는 과정입니다.
마치 화가가 그림을 그릴 때 사용할 물감을 미리 준비하는 것과 같은데요. 보통 어디서나 무난하게 이용 가능한 무채색 톤 색상인 ‘그레이 스케일 컬러’는 10, 20, 30, … 100 총 10단계에 걸쳐 선언하고, 필요에 따라 더 세분화하거나 간소화해 사용합니다.
각 색상을 그룹화하는 과정은 임의로 진행해도 무방하지만, 되도록 컬러의 특성 위주로 진행하는 것이 이후 활용에서 많이 편리하게 이용할 수 있습니다.
참고로 그레이 스케일 컬러는 가독성을 고려해야 하기 때문에 배경으로 사용될 때의 명암비를 잘 조정해야 하는데 폰트의 크기가 Regular 18pt 이하 일 때는 배경 대비 4.5:1의 대비율을, Regular 18pt 또는 Bold 14pt 이상일 경우 3:1의 대비율을 권장합니다. 또한 대비율을 테스트할 때에는 디자이너의 직감도 좋지만 어도비 컬러 사이트의 접근성 도구 메뉴를 추천합니다.
3. 시멘틱 컬러 선언
컬러 팔레트 선언이 끝났으면, 이제 시멘틱 컬러를 선언할 때입니다. 시멘틱 컬러 선언에서 유의할 점은 시멘틱 컬러를 선언할 때에는 기본 팔레트를 기반으로 합니다. 또한 컬러 팔레트 내의 색상명이 아닌 UI 요소 및 사용 목적에 따라 의미를 부여해야 합니다.
명명법의 원칙은 없지만 프로덕트 별 사용자 데이터 테스트에 따라 가장 효율적이라고 판단되는 방식의 명명법을 따르면 됩니다. 아래는 대표적인 명명법과 몇 가지 예입니다.
3-1. 디자인 토큰을 활용해 명칭을 부여하기
디자인 토큰은 웹사이트나 디자인 프로젝트의 색상과 타이포그래피, 간격, 크기 등 기본 단위의 디자인 속성을 재사용할 수 있는 변수로 정리해 사용하는 방식입니다. 디자인 토큰을 사용하면 수작업을 줄이고 쉽게 수정이 가능해 작업의 효율성이 높아집니다..
예를 들자면 위 자료에서 “purple-500″은 이 색상을 어디에 어떻게 적용해야 하는지에 대한 설명이 없습니다. 그러나 “color-action”은 어디에 어떻게 적용해야 하는지 알려줍니다. (텍스트 링크 및 버튼과 같은 상호 작용 요소). 이런 경우 버튼 컴포넌트가 사용됩니다.
디자인 토큰 요소를 통해 시멘틱 컬러 명칭을 정하고자 할 때, 단계별 명명법에 따라 나올 수 있는 효율적 범위가 달라질 수 있습니다. 그러므로 초기에 컬러 사용 범위를 정하거나 작업 환경 내부에서 A/B 테스트를 통해 무엇이 더 효율적인지에 따라 컬러명을 정의하면 제품 및 서비스 유지 환경을 개선할 수 있습니다.
📖대표적인 디자인 토큰 요소
- 값(Value): 색상 값, 절대 및 상대 길이 단위, 백분율, 숫자 등과 같은 코드의 기본 값(Value)의 특징을 활용해 명명하는 방식입니다.
- ‘글로벌 토큰(Base Variables Tokens)’: 글로벌 토큰은 콘텍스트에 구애받지 않는 이름으로 표현되는 디자인 언어의 기본 값입니다. 색상 팔레트, 애니메이션, 타이포그래피 및 치수 값은 모두 글로벌 토큰으로 기록됩니다. 이들은 직접 사용할 수 있으며 다른 모든 토큰 유형에 의해 상속됩니다.
- ‘별칭 토큰(Common Tokens)’: 별칭 토큰은 특정 콘텍스트 또는 추상화와 관련이 있습니다. 별칭은 토큰의 의도된 목적을 전달하는 데 도움이 되며 단일 의도를 가진 값이 여러 위치에 나타날 때 효과적입니다.
- ‘구성 요소별 토큰(Component Tokens)’: 구성 요소별 토큰은 구성 요소와 관련된 모든 값을 철저하게 표현한 것입니다. 별칭 토큰에서 상속되는 경우가 많지만 엔지니어링 팀이 구성 요소 개발에 토큰을 적용할 때 가능한 한 구체적으로 지정할 수 있는 방식으로 이름이 지정됩니다.
3-2. 디자인 툴 및 코드를 활용해 명칭을 부여하기
UI·UX 디자인 툴인 ‘피그마’를 사용하는 경우 디자이너가 직관적으로 사용할 수 있도록 토큰을 구성할 수도 있습니다. 또한 별도 코드 설계를 통해 쉽게 토큰을 지정하거나 검토할 수도 있습니다.
4. 다크모드 만들기
라이트 모드와 다크 모드를 만들 때 1개의 색상을 기준으로 반전하면 좋겠지만, 실무에서는 적절하지 않은 색상이 나오는 법입니다. 따라서 다크 모드의 컬러는 따로 지정을 해줘야 합니다. 일반적으로 다크 모드의 배경은 컬러 대비가 크기 때문에 낮은 채도의 색상을 사용합니다. 아래 예시 이미지에서 볼 수 있듯이 색상의 조정은 반드시 필요한 과정입니다.
스타일의 설명 부분에 각 시맨틱 색상이 참조하는 기본 팔레트 색상을 표시하고 색상에 대한 피그마의 접근 방식을 더욱 강화할 수 있습니다. 아래 예에서 라이트 모드와 다크 모드를 Primary Action 가리키는 걸 예시로 볼 수 있습니다.
이 설명은 우리가 작성한 사용자 지정 플러그인을 통해 시맨틱 색상을 기본 팔레트 색상에 연결하는 것입니다. 기본 팔레트 색상을 변경할 때마다 플러그인이 시맨틱 색상을 자동으로 업데이트하므로 수동으로 아무것도 할 필요가 없어 편리합니다.
5. 시멘틱 컬러 사용 사례
쏘카
시멘틱 컬러는 컬러 팔레트의 개념인 베이직 컬러를 가져와서 사용합니다. 디자인뿐만 아니라 코드상에서도 시멘틱 컬러에 베이직 컬러를 매핑해서 개발하였습니다. 즉, 아래와 같이 베이직 컬러를 특정 hex 코드로 명명하고, 시멘틱 컬러에 베이직 컬러를 다시 가져다 입히는 방식입니다.
지마켓
Semantic Color는 UI요소들의 기능 또는 정보 유형에 따라 의미를 강조해 전달하는 등의 목적으로 보조적으로 사용하는 컬러입니다. 사용되는 목적과 UI에 적용되는 상황에 따라 일관된 색상 사용은 인지 부하를 낮게 유지하고 통합된 사용자 경험을 제공합니다. UI에 적용되는 상황에 맞는 의미를 담은 명칭으로 관리하며, 여러 상황에 대해서는 컬러 팔레트와 함께 사용합니다.
이마트 24 – 이모션글로벌 사례
이모션에서 진행한 이마트24 구축 프로젝트 당시 시멘틱 컬러 시스템을 도입해 사용하였습니다. 각 프로젝트의 효율에 맞는 컬러 시스템 정의로 별칭 토큰까지 나타냈습니다.
👉 원문 링크: 디자인 시스템에 적용 가능한 시멘틱 컬러를 알아보자
