🖥 UI 디자인 가이드 만들기 #2._Color

Posting : 07.25.2022
Designer : 김세원
#UXUI #디자인가이드 #color

#2. UI 디자인 가이드 만들기_Color 네이밍과 컬러 시스템 정하기

[BX 디자이너과 함께 브랜드 컬러를 재조정 + 브랜드에 걸맞는 컬러 시스템 재조정]

컬러는 제품의 브랜드경험과 일관된 사용성에도 큰 영향을 미치기 때문에 아주 중요한 규칙 요소이다. 컬러 가이드가 정리되지 않은 경우, 디자이너가 많을수록 상황에 따른 컬러 hex값과 투명도가 달라지게 된다. 결국, UI 스타일이 달라지고 사용자의 일관된 경험은 깨질 것이다. 이런 상황에서 개발자는 협업이 어렵다고 느낄 것이고, 유지보수도 결과적으로 어려워진다. 뿐만 아니라 사용자 또한 컬러 인지가 어려워져 사용성이 떨어지게되는 결과를 불러오게 된다.

위와 같은 이유로 디자인 가이드를 작업하면서 두번째로 정리하고자 했던 것이 컬러였다.

서클(프로덕트 서비스) 팀 내에서도 프로덕트의 홈페이지 리뉴얼을 앞두고 있는 상황이라 이왕이면 리뉴얼을 진행하면서 컬러를 함께 잡는 것이 좋겠다고 결론을 내렸다.

01. 브랜드 컬러에 맞는 UI 컬러 재조정

기존 프로덕트 서비스에서는 브랜드 컬러(400 — #6FA4FF)를 UI 컬러에서 primary color로 사용하고 있었다. 브랜드 무드와 함께 결을 맞추기 위해서는 white background, CTA 버튼에서 폰트를 white 로 해야하는 상황이었기에 현재의 브랜드 컬러를 UI primary color로 쓰기에는 명도대비가 W3C AA 등급에 살짝 아쉬웠다. 그래서 해당 사항은 BX 디자이너와 상의하여 브랜드 무드에 대한 얼라인을 맞추어 컬러를 재조정하고자 하였다.

BX 디자이너가 만든 BI guide-color variation

브랜드 컬러로 정해진 색상에서 브랜드 디자이너가 color variation 을 진행하면 해당 색상 중에서 UI에 적합한지 확인해보고 다시 상의하여 색을 조정하며 컬러 팔레트를 완성했다.

[UI primary color 결정]

BX 디자이너와 상의한 결과, 편집물이나 인쇄물 등에서 사용할 때 브랜드 컬러를 바꾸기에는 브랜드 이미지와 느낌자체가 변화될 우려가 있었다. 그래서 웹 접근성 기준(AA)에 맞고, 브랜드 컬러와도 색 차이가 많이 나지 않는 컬러를 따로 만들게 되었다. 해당 컬러를 color variation에 넣어 (500 — #5592FC) 으로 진행하기로 결정하고, UI primary 컬러로 정했다.

primary color 와 secondary color, gradient color

접근성 기준은 figma plugin이나 adobe외 다양한 사이트에서 제공하고 있다.

• Adobe color 접근성 도구
• Colorable
• Figma plugin

필자의 컬러 가이드에 명시되어있는 방법

[Primary color 가 꼭 브랜드 컬러여야 하는가?]

브랜드 무드보드만 BX 디자이너와 얼라인되었다면, 그 무드보드에 맞도록 진행하면 된다. 브랜드 경험이 일관되면 된다. 브랜드 컬러가 버튼이나 글자에 쓰이기 어렵다면 그래픽 컬러로 따로 지정하여 배경이나 아이콘을 통해서 충분히 느낌을 낼 수 있다. 이 때, 버튼이나 텍스트의 사용성을 해치지 않도록 충분한 대조가 이뤄질 수 있는 컬러를 따로 만들어 무드보드에 맞도록 컬러 시스템을 구성하면 된다.

물론 이는 주 메인 프로덕트에 달라지기도 하는데, 중요한 것은 주 메인 프로덕트와 주된 브랜드 경험이 주고자 하는 것을 전반적으로 고려하여 컬러를 정하는 것이 좋다.

02. UI color Class Name

Class Name(컬러 토큰)은 디자이너와 개발자들이 컬러를 사용할 때, 서로 소통하기 편하도록 해주며, 시스템을 관리하고 유지보수하기에 용이하기 때문에 개발자들고 함께 상의하여 결정하면 좋다.

자사 컬러 ClassName은 의미론을 채택하였다. blue로 누구나 알기쉬운 워딩을 사용하였고, 그 뒤에는 개발자들과 디자이너들이 해당 컬러의 사용용도를 직관적으로 한눈에 파악하기 쉽도록 사용용도를 ClassName에그대로 적용하였다.

컬러 의미론 적용

03. Layout Color, Status Color

[Layout Color]

Layout Color는 Neutral Color 라고도 한다. UI 컬러 외에 폰트, 선, 면 등 레이아웃에서 쓰이는 컬러이다. Neutral 이라는 의미가 무채색이라는 의미도 있으나 최근에는 다양한 의미로 불려서 의미에 혼동이 올 수도 있다고 생각되어 Layout Color라고 이름을 지정하였다. Layout Color는 UI 컬러에 걸맞게 색상값을 지정하고, 해당 색상값에 맞춰 여러 컴포넌트들의 상태값, 타이포의 IA에 유연하게 적용할 수 있는 variation 컬러를 만든다.

[Class Name]

ClassName(토근값)은 뒤에 숫자를 붙인다. 의미론을 사용하지 않았던 이유는 워낙 다양한 컴포넌트에 사용하기 때문에 숫자만 부여를 하였다. 다만, black에서 폰트와 선에 자주 사용하는 컬러들이 있다면 가이드에 사용용도를 명시해놓는 것이 좋다. disabled, 선, 폰트에 따로 사용하는 color들은 명시를 하여 일관된 Layout Color를 사용할 수 있게 하기 위함이다.

폰트의 경우에 디자이너들이 투명도로 진행하는 경우가 있어 해당 투명도를 해당 컬러의 ClassName 끝부분에 붙여 디자이너들이 사용하기에도 편리할 수 있도록 진행하였다. 이 부분은 팀마다 서로 어떻게 소통하느냐의 문제이기 때문에 논의해서 정하기 나름이다.

[사용용도별로 분리하여 시스템 관리]

Layout Color 에는 그레이계열의 색상이 주로 쓰이는데, 프로덕트의 디자인 상황에 따라서 다른 블랙에 필요한 경우가 존재한다. 필자의 경우, 프로덕트가 홈페이지와 사용자가 작업하는 서비스 디자인 환경이 달라 예외적으로 쓰이게 되는 black color 가 있었다. 예외적으로 쓰이는 컬러들의 경우, 따로 별개의 Class Name 을 부여하여 시스템을 구축하였다.

별개의 black으로 구분하여 Class Name 부여, Layout Color 와 Studio Black color

[Status Color]

Status Color 는 UI Color 와 구분되어 시스템의 상태나 진행에 대한 정보를 사용자에게 알려주는 역할을 한다. Status Color는 모든 사용자의 멘탈모델을 기반으로 하여 색상을 지정하는 것이 좋다.

브랜드 컬러와 겹치지 않도록 설정을 하는 것이 좋고, 명확하게 구분지어서 설정하는 것이 좋다. 브랜드 컬러가 status color 와 겹치는 경우, 해당 브랜드 컬러와 명확히 구분하여 멘탈모델을 해치지 않는 선에서 해당 컬러를 대체할 수 있는 컬러를 찾고, 사용처를 명확히 구분하는 것이 좋다.

status color

04. 인터랙션 하는 컬러 규칙 정하기

사용자가 서비스를 사용하면서 인터랙션할 때, 피드백을 전달하기 위해 컬러가 사용된다. 이 때, 해당 액션과 인터내랙션 컬러의 규칙을 정하면 사용자에게 일관된 경험을 줄 수 있다.

인터랙션 컬러는 버튼이나 아이콘에 주로 활용이 되며, Layout Color 와 Primary color 중에서 사용되기 때문에 semantic color 로 따로 레이블하여 지정할 수도 있다. 필자는 인터랙션 컬러와 사용용도를 Class Name 에 부여하는 것만으로도 프로덕트에서 쓰이기에 충분했기에, 따로 가이드에만 정리를 하였다.

주로 primary color에서 투명도에 대한 기준을 나누어 인터랙션 값에 지정을 하였다.

인터랙션 투명도 규칙

실제 적용한 값

마무리하며

컬러를 정하면서 많은 것들을 공부하고, 좀더 체계적이고 알지 못했던 세세한 부분들까지도 컬러를 지정할 수 있게 된 것 같다. 진행을 하다보니 서비스 전반적으로 고쳐야될 부분들도 보이고, 다시 조정해야될 부분들이 많이 보이게 되었다.

앞으로 개발자와 함께 서비스를 운영하면서 필요한 ClassName 을 사용처에 맞게 잘 구분하고 관리하는 방법에 대해서 더 고도화 해나가지 않을까 생각한다.

다음에는 아이콘 SVG 적용기를 글로 다루고자 한다.

참조링크

다크 모드 적용기(2)

디자인 시스템 구축하기 2부 : 컬러

(번역) 디자인 시스템에서 컬러 정의

Speccing Colors in Design Systems

클레온의 UI 디자인 가이드 관련 글

• 💻 UI 디자인 가이드 만들기 #1._Icon naming
• 🖥 UI 디자인 가이드 만들기 #2._Color
• 🖥 UI 디자인 가이드 만들기 #3._Icon svg화