프로덕트 디자인 가이드 제작 - 01. 컬러 가이드
스트릿 출신의 프로덕트 디자이너가 가치 있는 제품을 만들려는 노력의 기록
웹/앱 디자인 작업 시 디자인 가이드가 없을 때 일어날 수 있는 상황은 아래와 같다.
혼자 디자인했는데도 여러 명이 디자인한 것 같다.
여러 명이 디자인한 경우 여러 명이 했다는 티가 난다.
무분별한 색상, 타이포, 쉐이프의 사용으로 인해 통일감을 느끼기 어렵다.
추가 디자인 진행 시 제작 시간 소요가 크다.
퍼블리셔, 개발자의 일도 늘어난다.
기타 등등 제보받습니다.
열심히 할수록 왜 늪에 빠지는 것 같지...이렇게 가이드가 없는 채로 디자인을 진행하다 보면 위처럼 정말 많은 문제들이 생긴다.
문제는 이 문제가 문제인지 모른 채고 어영부영 그럭저럭 진행이 된다는 것에 있다.
그럭저럭 진행이 되면 문제가 없다고 생각할 수 있지만 그렇지 않다.
위의 문제들은 결국 디자이너의 시간과 에너지를 필요로 하며 이는 디자이너가 더 생산적이고 창의적인 일을 하는 걸 방해한다. 디자이너 입장에서도 그렇고 회사 입장에서도 좋은 리소스 투여는 아니다.
그렇기에 디자인 가이드는 매우 중요하며 아무리 작은 프로젝트라 해도 만드는 것이 좋다.
그렇다면 디자인 가이드에 정답은 있을까?
완벽한 정답은 없다.
다만 디자인 가이드 역시 '가이드'가 있다.
대표적으로 '구글 머터리얼 디자인 가이드(Material Design)'와 'IOS가이드(Human Interface Guidelines)'가 있는데, 말 그대로 가이드일 뿐 절댓값은 아니기에 무조건적으로 지키려 하지 않아도 괜찮다.
(하지만 네이티브 앱 디자인일 경우 지키는 것이 좋은 가이드가 있다. 이건 다른 글에서 다루겠다.)
구글 머터리얼 디자인 가이드(Material Design) 바로가기 >
IOS가이드(Human Interface Guidelines) 바로가기 >
중요한 것은 '우리 서비스의 디자인 가이드가 어디에, 왜, 언제 필요한지'에 대한 고민 하는 것이다.
그리고 그 고민에 대한 답을 내면 그게 '우리 서비스 디자인 가이드'가 된다.
디자인 가이드는 프로젝트의 규모가 커야만 가치가 있는 것은 아니다.
세상에는 규모가 큰 프로젝트만 있는 것은 아니다.
규모가 작은 회사도 있고 회사 규모가 크다한들 그 안에서 진행되는 프로젝트는 작다거나 또는 사수가 없어 혼자 고군분투한다거나 등등.. '세상을 바꿀만한 대단한 일은 아니지만 세상을 채우는 보통의 디자인 작업'을 하는 사람들이 더 많다.
나 역시 보통의 UI/UX 디자이너이기에 '거창하지는 않지만 꼭 필요한 가이드'를 만드는 일이 더 많다.
나와 같이 보통의 디자이너가 '거창하지는 않지만 꼭 필요한 가이드'를 만들 때 무엇을, 어떻게, 어떤 순서로 진행해야 하는지에 대해 내 경험을 공유하고자 한다.
컬러를 정할 때
알면 도움되는 것
1) 명도, 채도에 대해서
명도 : 색상의 밝음과 어두움의 정도를 말한다.
밝음에 가까울수록 고명도, 어두움에 가까울수록 저명도라고 한다.
'명도를 올려'라는 뜻은 밝음(흰색)을 더하라는 뜻이고 '명도를 낮춰'라는 뜻은 어두움(검은색)을 더하라는 뜻이다.
채도 : 빛의 선명도를 말한다.
다른 색상과 색이 섞이지 않을수록 선명해지며 이를 고채도라 하고 색이 섞일수록 선명도가 낮아지며 이를 저채도라고 한다. 채도가 높은 경우 '진하다, 선명하다, 쨍하다'라고 표현하고 채도가 낮은 경우 '탁하다, 흐리다' 고 표현한다.
실무팁
톤 : '서로 같은 톤을 쓴다'는 말이 있는데 이는 색상은 달라져도 이 명도와 채도를 맞추는 것을 의미한다.
이렇게 유사색이든 보색이든 톤을 같게 쓴다면 색상이 서로 따로 노는 걸 막을 수 있다.
톤은 더 이상 애매모호한 단어가 아니다.2) 색의 의미에 대해서
색은 자연에서 왔다. 자연이 가지는 색상에는 이유가 있고 우리는 그 이유를 본능적으로 느끼며 살아간다.
색상마다 의미는 다르며 그 의미는 만국 공통이다.
서비스의 성격과 색의 의미를 무조건 맞출 필요는 없지만 색의 의미를 알고 선택하는 것은 중요하다.
마켓 컬리는 <음식 = 식욕 = 주황색>의 공식을 깨고 보라색을 브랜드 색상으로 선정했다.
이건 익숙함을 벗어나 새로움에 도전하겠다는 의도된 색상 선정이다. 이렇게 의도된 색상 선정 역시 색이 가지는 기본적 의미를 알고 있어야 가능한 선택이다.
3) 배색 비율에 대해서
같은 색상으로 디자인을 해도 배색 비율을 어떻게 하느냐에 따라 느낌과 서비스 경험이 달라진다.
그러니 색상을 정할 때 색상만 정하지 말고 배색 비율도 같이 정해놓고 디자인에 들어가는 것이 좋다.
같은 색상조합이지만 배색 비율에 결과가 따라 달라진다.서비스 디자인 시
어떤 컬러 정의가 필요한가?
주요 색상 - Primary color
보조 색상 - Secondary color
강조 색상 - Accent color
상호작용 색상 - Interaction color (성공, 실패, 에러, 취소, 삭제, 액션 등 사용자와 상호작용하는데 쓰이는 색상)
무채색 색상 - Gray color
그 외.. 서비스 특성이나 협업 방식, 관계에 따라 다른 어떤 정의가 필요하다면 추가하면 된다.
컬러 가이드 제작 시
어떤 순서로 진행할까?
1) 주요 색상 (Primary color)를 정한다.
브랜드의 주요 색상으로 가장 많이, 자주 쓰여야 하는 색상이다.
브랜드를 대표하는 색이니만큼 사용자의 시선이 많이 머무르는 곳에 쓰이게끔 한다.
주요 색상 (Primary Color)을 정한 뒤 적용한 모습실무팁
실무를 진행하다 보면 약간의 딜레마가 생기는 경우가 있는데, 주요 색상이 너무 강한 색상일 때이다. 특히 주요 색상이 채도가 높은 색일 때는 약간의 다른 공식이 필요하다.
눈을 찌르는 느낌이 들 정도로 채도가 높은 색상일수록 한 화면에서 색상의 면적을 넓게 잡기 어렵다. 사용자의 피로도가 높아지기 때문이다.
이럴 경우에는 '프라이머리 컬러는 가장 많이 쓰여야 한다'보다 '사용자의 시선이 많이 머무르는 곳에 쓰이게끔 한다'에 집중하는 것이 좋다. (고민해결!)
2) 보조 색상 (Secondary color) 및 강조 색상(Accent color)을 정한다.
보조 색상은 주요 색상을 더 확실히 전달할 수 있게 보조해주는 색상이다.
주요 색상을 기준으로 봤을 때, 주요 색상과 조화를 잘 이루는 색을 써야 하며 그 방법에는 유사색을 쓰는 방법과 보색을 쓰는 방법이 있다.
유사색 : 색상환에서 주요색 바로 옆에 있는 색들
보색 : 색상환에서 주요색 맞은편에 있는 색상
주요 색상과 보조 색상을 함께 쓸 때 주의할 사항은 주요색상이 보조색상보다 사용 비율이 높아야 한다는 것이다. 그래야 사용자가 '내가 이 페이지에서 가장 중요하게 받아들여야 하는 정보가 무엇인지' 자연스럽게 알 수 있다.
주요색상과 보조색상의 비율은 8:2나 7:3의 비율이 좋다.
물론 절대적인 규칙은 아니기에 상황에 따라 비율은 조절되어도 괜찮다. 중요한 것은 사용자가 자연스러운 서비스 경험을 하게 돕는 것이다.
주요 색상과 보조 색상의 배색 비율에 따른 차이실무팁
보조 색상으로 유사색을 써야 하는 상황과 보색을 써야 하는 써야 하는 상황은 다르다.
[유사색을 쓰면]
비슷하면서 다양한 색상으로 인해 화면이 부드럽고 풍부해진다.
하지만 강조되는 색상이 없어 사용자가 꼭 필요한 경험을 하게 도와주는 힘이 약해질 수 있다.
이런 경우에는 보조색 이외의 강조 색상(악센트 컬러)을 하나 더 잡아주어 전달력이 높아야 하는 곳에 쓰면 좋다.
또한 <주요색 + 유사색> 전략은 한 페이지에 보여줘야 하는 기능이나 콘텐츠가 많은 경우 쓰는 것이 좋고 커머스에서는 쓰지 않는 것이 좋다.
커머스 화면에는 각종 상품의 썸네일들이 엄청 화려하게 배치된다.
오만가지 색상이 상품 썸네일을 통해 랜덤으로 쓰이기 때문에 커머스 디자인 시에는 서비스 색상은 단조로운 것이 좋다.
[보색을 쓰면]
보조색을 강조색(악센트 컬러)으로 쓸 수 있어 디자인 시 주요색을 주로 쓰게 된다.
그로 인해 화면이 깔끔해지며 사용자를 헷갈리게 할 확률이 줄어든다.
하지만 색상 사용 범위가 좁아 화면이 단조로워질 수 있다. 이런 경우에는 명도와 채도가 높은 색 사용을 통해 눈에 잘 띄도록 하여 사용자에게 확실한 사용자 경험 가이드를 제공해 주는 것이 좋다.
<주요색 + 보색> 전략은 한 페이지에 다양한 기능이나 콘텐츠를 보여줘야 하는 경우에는 화면이 지루해질 수 있으므로 쓰지 않는 것이 좋다.
3. 기본 색상(Default color)을 기준으로 밝고 어두운 색상(Light and dark variants color)을 정한다.
1번과 2번의 단계를 거치면서 주요 색상과 보조색 상의 기본 색상이 정해졌다.
그럼 이제 기본 색상을 기준으로 밝음과 어두움에 따른 변형 색을 정한다.
이걸 'Light and dark variants' 한다고 한다. (하지만 실제로는 "밝고 어두운 것도 만들어놔~"라고 한다. 그렇게 고급 어휘를 쓰지 않는다.)
기본 색상을 기준으로 밝음과 어두움이 여러 단계로 생길 텐데 단계가 많을 경우 숫자를 붙이고 단계가 적을 경우 Light와 Dark를 붙인다. 물론 정답은 아니므로 더 좋은 네이밍 방식이 있다면 그렇게 해도 된다.
밝고 어두움의 단계가 적어 light와 dark를 붙였다.4) 상황에 따라 쓸 상호작용 색상 (Interaction color)을 정한다.
사용자가 앱을 쓰다 보면 다양한 상호작용의 피드백을 필요로 할 때가 많다.
'내가 이 행위를 했을 때 이게 성공인 건지, 실패인 건지, 또는 뒤로 돌아가야 하는지 등' 나의 행동에 대한 피드백을 원한다. 피드백을 명확히 잘해줄수록 사용자들은 서비스에 대한 부정적 경험을 할 확률이 줄어든다.
실무팁
상호작용에 따른 피드백은 사용자게에 혼란을 주지 않는 것이 최우선이어야 한다.
그렇기에 주로 세계적으로 쓰이는 공통 색상을 쓰는 것이 좋다.
[액션] 파란색 또는 주요색 : 만국 공통이긴 하나 주요색을 쓰는 곳도 많다.
[성공] 초록색 또는 주요색 : 만국 공통이긴 하나 역시 주요색을 쓰는 곳도 많다.
[에러] 빨간색 : 만국 공통. 이건 지키는 것이 좋다.
[경고] 노란색 : 만국 공통. 이 또한 지키는 것이 좋다.
[취소] 회색 : 만국 공통. 이 또한 지키는 것을 추천한다.
[삭제] 회색, 빨간색, 검은색 : 이 또한 지키는 것을 추천한다.
[뒤로 가기] 검은색 바탕에 흰색, 흰색 바탕에 검은색, 회색 또는 파란색(아이폰)이 쓰이기도 한다.
주로 '뒤로 가기'는 색상에서 오는 경험도 크지만 '왼쪽 상단'라는 위치에서 오는 경험이 크기에 위치를 고정한 뒤 색상은 흰 바탕에 선 회색, 검은 바탕에서는 흰색을 쓰는 것이 가장 무난하다.
간혹 연속적인 선택을 해야 하는 설계에서는 하단 왼쪽에 위치하기도 한다. 그때도 색상을 쓰는 방법은 같다.
[중요 이슈 안내] 빨간 계통 색상, 또는 주요색을 쓴다.
상호작용컬러는 권장하는 답이 있는 셈이다5) 무채색상 (Gray color)을 정한다.
black에서부터 white까지 이루어지는 gray 색상을 정한다.
단계에 따라 뒤에 숫자를 붙여 구분한다. 숫자는 10 단위로 해도 되고 100 단위로 해도 된다.
여기선 10단위를 붙였다.6) UI에서 추가로 필요한 요소들의 색상을 정한다. (선택사항)
UI를 구성하는 다양한 요소에 추가적으로 쓰이는 색을 정한다. 주로 다음의 UI를 구성할 때 적합하다.
+ backgrounds color (배경색)
+ typography color (글자색)
+ iconography (아이콘 색)
+ 그 외 각 서비스에서 필요한 요소들
필수는 아니지만 프로젝트 단위가 커질수록, 디자인 페이지가 많아질수록, 협업하는 사람이 많아질수록 정해두는 것이 좋다.
서비스의 컬러 가이드를 만든다는 것은 시각적으로 가장 강력한 힘을 다듬는다는 뜻이다.
꼭 필요한 작업이며 그 가치를 가볍게 다루어서는 안된다.
다양한 방면으로 고민하고 적용하는 시간과 에너지도 필요하다.
처음부터 빡세게 가이드를 잡아놓고 디자인에 들어갈 필요는 없지만 러프하게라도 잡고 시작하는 것을 추천한다. 그 과정에서 나의 경험이 도움이 되길 바라본다.
모든 '세상을 구하는 거창한 서비스를 만드는 것은 아니지만 세상을 채우는 서비스를 만드는 보통의 디자이너'들을 위하여.
저와 다른 견해나 의견, 피드백 모두 환영입니다. 특히 제가 틀린 부분이 있다면 알려주세요.
