사용자 경험 이전에 기본부터
『버려지는 디자인 통과되는 디자인』요약 정리 - 색상1
들어가는 말.
공부하다보니 점점 UI에도 관심이 생겨 디자인 공부를 하고 있다. 아티클을 읽고 클론 디자인을 하면서 조금씩 감을 익혀가고 있지만 역시 기초가 부족해서 '이게 보기에 더 좋은데, 왜 좋지?'가 설명이 안됐다. 그래서 허겁지겁 구입한 『버려지는 디자인 통과되는 디자인』. 목차를 훑어보는데 머리가 띵해졌다. UX는 맨 마지막 단계에 배치되어 있었다. 생각해보면 당연한 이야기다. '유저 리서치', '사용자 퍼널', '와이어프레임', '다이아몬드 이론' 기타 등등 UX에 관한 수많은 방법론은 일단 디자인의 기초가 탄탄히 잡힌 상태에서 실행되어야 한다. 페이지마다 그리드도 들쑥날쑥이고 색감은 이상하고 폰트도 뒤죽박죽이라면? 아무리 UX를 적용하려 해도 안 된다.
그래서 이제 한동안 이 책을 붙들고 디자인 공부를 해보려 한다. 정답이 없다는 디자인의 세계에서 그래도 8할은 수긍할만한 프로덕트를 만들기 위해!
Part 1. 컬러 - 이론
Hue
정의: 색상(다른 색과 구별되는 고유한 속성)
- 색에는 온도감이 존재.
-RGB: 빨강 / 초록 / 파랑
- RGB에서 보색이란 섞였을 때 흰색을 만들어내는 색의 관계를 의미한다.(노랑 + 청록 / 노랑 + 진분홍 / 청록 + 진분홍 등)
Value
정의: 명도(색의 밝고 어두움)
설명
- 흰색이 10, 검은색이 0
- 꼭 흰색을 섞어야지만 명도가 높아지는 건 아니다. 색상에도 고유한 명도가 있다(노란색 - 고명도 / 빨간색 - 중명도 / 파란색 - 저명도)
- 가독성은 명도대비를 통해 조절할 수 있다.
Saturation
정의: 채도(색의 강약, 또렷함)
설명
- 원색일수록 채도가 높고, 색이 하나라도 섞이는 순간부터 채도가 낮아진다.
- 흰색 / 검은색 /회색은 명도만 존재하는 무채색.
HEX코드
10진수인 RGB값을 16진수로 변환해 #rrggbb로 표현하는 게 HEX코드. 포토샵에서 스포이드 찍으면 #ffffff처럼 이름이 뜨는데 그게 HEX코드다. #rrggbb에서 rr은 빨강, gg는 초록, bb는 파랑이다. 이를 00부터 ff로 나타내는데, 예를 들면 #ff0000은 빨강 중에서도 가장 큰 수(원색)만 들어가 있고, 나머지 초록과 파랑은 가장 낮은 값인 00으로 세팅되어 있어 이 색은 완전한 빨간 빛만 들어가 있음을 알 수 있다.
웹&앱 디자인을 할 때 고려해야 할 색상 요소
- 주제(상품 / 서비스)가 무엇인가
- 콘셉트가 무엇인가
✍낱선의 코멘트
주제와 콘셉트가 처음엔 비슷하다고 느꼈으나, 취급하는 상품의 종류나 도메인이 같아도 콘셉트의 방향에 따라 색상 표현이 달라진다.
가장 대표적인 예로 코스메틱 브랜드가 있다. 콘셉트하면 주구장창 끌려나오는 에뛰드를 떠올려보면 단연 '분홍색'이 그려진다. 반면, 중후한 느낌의 브랜드들을 떠올려보자. 설화수, 헤라 등을 보면 확실히 상쾌하고 밝은 느낌의 밝은 색조보다는 어두운 색조를 많이 썼다. 흰색이 많이 섞이지 않고, 고유한 색을 강조하는 경우도 많다.
웹 레퍼런스를 보고 싶다면, https://www.gdweb.co.kr/main/ 을 추천한다. 우수한 국내 웹/앱 디자인을 모아놓은 사이트다.
- 아이덴티티의 유무
: 코카콜라의 빨강, 삼성의 파랑, 네이버의 초록 등과 같이 '아이덴티티를 표현하기 위한 메인 컬러'가 있어야 한다. 이 메인 컬러는 사용자가 충분히 인식할 수 있도록 돋보여야 한다.
- 주제의 가치를 높일 수 있는지 여부
: 콜라는 검지만 코카콜라는 빨갛다. 만약 아이덴티티 컬러를 검은색으로 설정했다면? 벌써 칙칙하고 탄산의 에너제틱함 따위는 없다. 따라서 아이덴티티 컬러를 고민할 때는 '상품의 정보'에만 집착하지 말고, 고객이 컬러를 봤을 때 어떤 감정을 느낄지 고려해야 한다.
Part 1. 컬러 - 실전 팁
푸터 영역
푸터는 웹 사이트 하단에 배치해 사이트 정보를 담는 공간이다. 따라서 기업에서 전달하고자 하는 주된 콘텐츠와는 거리가 있어 다소 중요도가 떨어지기 때문에 적당히 '약하게' 표현하는 것이 좋다.
HOW?
- 폰트의 사이즈를 줄이고
- 명도차를 줄이고
- 여백을 통해 여유로운 느낌을 준다.
- [문의하기] 등 텍스트를 입력해야 하는 인풋 박스가 있다면, 배경색과 통일해 라인으로만 표현하는 방식도 좋다.
✍낱선의 코멘트
마지막 [문의하기] 내용은 사실 제공하는 서비스에 따라 달라질 수 있다. 에이전시처럼 한 건의 문의가 수익으로 이어질 가능성이 있는 경우에는 라인 디자인보다는 면 디자인 등을 통해 해당 부분을 강조하는 경우도 있다. 다만, 이런 경우는 푸터 영역에 인풋 박스를 넣기보다 그 위에 '컨택트' 영역을 별도로 디자인하는 경우가 많다.
예시: 투비소프트(https://www.tobesoft.com/main)
톤 온 톤 배색
톤 온 톤 배색은 명도만 조절해 배색하는 걸 말한다. 가끔 특정 색을 더하면서 생기는 색상 차이를 이용하기도 하지만, 명도 조절하는 게 가장 깔끔하다.
ex) 빨강+파랑 = 분홍 / 빨강+노랑 = 주황
똑같이 빨강이 베이스지만 계열이 완전히 다르기 때문에 분홍과 주황이 함께 사용되면 쉽게 어우러지지 않는다. 물론 능력자들은 어울리는 배색을 찾곤 한다.
CTA 버튼
페이지마다 사용자의 행동을 끌어내기 위한 미션이 하나씩은 존재한다. 특히 쇼핑몰처럼 프로세스대로 이어지는 순차적인 작업에서 빠르게 다음 페이지로 이동시키고자 할때 특히 그렇다. 이를 수행하는 게 CTA 버튼이다. 사용자가 '이걸 눌러서 액션을 취해줘!'라고 생각했다면 그걸 강조해보자.
HOW?
- 페이지마다 CTA 버튼은 1개, 많으면 2개 정도로 설정한다.
- 차등을 준다. 만약 [구매하기] 버튼과 [홈] 버튼이 있다면 어떤 것을 컨테인 버튼으로(색으로 칠해진 버튼)하고, 어떤 걸 아웃라인 버튼(라인으로만 그려진 버튼)으로 할 것인가? 당연히 [구매하기]를 컨테인 버튼으로 해야 한다. 구매 페이지에서 [홈] 버튼이란, 결국 뒤로가기나 마찬가지니까.
- 결국 얼마나 차등을 잘 주느냐, 디자인 위계를 잘 세우느냐가 관건.
