brunch

라이킷 518 댓글 10

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 정윤선 Jan 28. 2017

UI 디자인에서의 컬러

(실용적인) 컬러 프레임워크

(출처 :[Color in UI Design: A (Practical) Framework – Erik D. Kennedy – Medium]의 기사를 번역 및 가공한 콘텐츠입니다.)

저는 UI 디자인에 대해서 어느 정도 잘한다는 자부심을 가지고 있었기 때문에 많은 기사와 책이 왜 컬러 팔레트나 컬러 스와치를 다루는지 이해할 수 없었습니다.

저의 경험상, "서로 구분된 색상의 집합(컬러 팔레트, 컬러 스와치)“를 사용하는 것은 멋진 디자인을 만드는 데 별로 도움이 되지 못했습니다.

그런 컬러 팔레트들은 디자이너스러워 보일지 몰라도 다양한 상황을 반영하고, 아름다워 보이는 UI 디자인을 만들 때는 쓸모가 없습니다.

그렇다면, 우리는 견고한 UI를 구축해주는 컬러들을 어떻게 얻을 수 있을까요?

그 물음에 대한 답은 컬러의 변형입니다.

컬러의 변형이란 하나의 메인(베이스) 컬러를 통해 아이덴티티는 그대로 구축하면서 상황에 따라 컬러를 살짝씩 변형하는 것(베리에이션)을 말합니다. 이는 완성된 팔레트에서 특정 색을 뽑아 쓰는 것과는 차이가 있습니다.

저는 이 기사에서 컬러 베리에이션을 위한 프레임 워크를 제공하려 합니다.

이 프레임워크는

1. 기본 UI에서 다양한 목적을 위해 메인 컬러를 조금씩 수정할 수 있습니다 (이것은 매우 중요합니다)

2. 색상을 어떻게 변경하는 것이 좋을지 고민하는 데 도움을 줍니다.

3. 수치를 통해 주관적인 성질을 가진 색상을 더 정확하게 이해할 수 있습니다.

어두움 & 밝음 베리에이션

멋진 인터페이스에서 눈에 띄는 부분 중 하나는 특정 메인 색상을 이용해 빛의 정도(어둡거나 밝게)를 변형하는 경우가 많다는 것입니다.

검색 창이 반투명한 검은색 오버레이라고 생각하지 않았나요?

그렇지 않습니다.

해당 색상은 파란색에 겹쳐진 검은색의 불투명도를 가진 검색 막대가 아니라, 메인 컬러를 어둡게 변형한 색상입니다.

아름다운 UI를 가진 서핑 예보 앱 인 Swell Grid도 살펴보겠습니다.

수많은 파란 계통의 색상이 사용되었지만 사실상이 페이지의 모든 것은 메인 컬러 파란색의 변형입니다.

다른 간단한 예를 살펴보겠습니다.

컴포넌트의 상태변화 또한 메인 컬러의 밝고 어두운 변형입니다.

이것은 “서로 다른 3가지 파란색 팔레트"로 묘사되지 않습니다.

정확한 표현은 하나의 파란색에 의한 여러 베리에이션입니다.

그렇다면, 우리는 어떻게 해야 좋은 색상 베리에이션을 얻을 수 있을까요?

메인 컬러를 어떻게 변형하는 것이 좋을까요?

이 대답을 하기 위해서 우리는 색이 작동하는 원리부터 이해해야 합니다.

그에 앞서 먼저 2가지 원칙을 설명하겠습니다.

1. 우리는 현실세계에서의 단서들을 레퍼런스로 삼을 것입니다. 우리의 인터페이스가 '가짜'라고 하더라도 유저들은 현실세계에서 수십 년을 보아온 빛과 색이 상호작용하는 방식에 익숙하기 때문에 현실세계에서 색상이 표현되는 원리를 그대로 옮길 것입니다.

2. 우리는 HSB 컬러 시스템을 사용할 것입니다. HSB컬러 시스템은 넓은 용도(스케치와 포토샵)에서 가장 직관적인 색상 시스템입니다. (이 기사에서는 색상(H), 명도(B), 채도(S)에 대한 기본적인 이해가 있다고 가정합니다)

현실세계에서의 색상 베리에이션

자, 이제 주위를 둘러봅시다. 여러 가지 다양한 색상의 변형이 눈에 들어올 것입니다.

그림자

그림자는 기본 색상의 어두운 변형이라고 생각할 수 있습니다.

Photo by David Blaikie

이제 우리는 스케치를 켜고 컬러 피커를 통해 오렌지색 벽 위에 남겨진 그림자가 어떤 색인지 알아봅시다.

아까 언급한 원칙처럼 했듯이, 우리는 이것을 HSB로 파악할 것입니다.

명도(B, 밝기)가 분명히 내려갔습니다.

그러나 성급하게 일반화하기 전에 다른 예제를 살펴보겠습니다.

Photo by Matthias Uhlig

쿠바의 청록색 벽 그림자도 위의 그림자와 동일한 결과가 나올까요?

자, 이제 그림자들이 가지고 있는 색의 변화 패턴을 비교할 수 있습니다.

그림자가 있으면 벽의 명도(B, 밝기)가 떨어지고 채도(S)가 올라갑니다.

우리는 두 가지 경우에서 이것을 보았고, 지금까지 우리가 살면서 본 수많은 그림자들도 가지고 있었던 규칙입니다.

이제 색상(H)을 살펴보겠습니다.

색상(H)은 오렌지색 벽의 그림자에서는 내려갔고, 청록색 벽의 그림자에서는 올라갔습니다.

이에 대한 설명이 있지만 중요성은 채도(S)와 명도(B, 밝기)보다 조금 더 낮습니다.

우선 채도(S)와 명도(B, 밝기) 이야기를 먼저 하고 나중에 색상(H)으로 돌아가겠습니다.

규칙

위에서 말한 개념을 조금 더 풀어 봅시다.

어두운 색상 베리에이션 = 높은 채도(S) + 낮은 명도(B, 밝기)

아까 언급했던 페이스북 검색바 예제로 돌아가 보면 이 식에 대해서 명확하게 이해할 수 있습니다.

색상(H)은 1 ° 에서 360 °로 움직이며 실제로는 반올림 오류입니다.

명도(B, 밝기)가 내려감에 따라 채도(S)도 올라갔습니다.

검색 막대가 검은색의 불투명도가 아닌 이유는 HSB에서 검은색을 추가하는 것이 채도(S)는 올리지 않고 명도(B, 밝기)만 줄이는 것이기 때문입니다.

위의 페이스북 검색바 예제는 채도(S)를 추가하는 동시에 명도(B, 밝기)를 줄였습니다. 하지만 검은색은 우리의 색상에 채도(S)를 추가하지 않고 명도(B, 밝기)만 줄어들게 합니다.

따라서 저 어두운 파란색은 단순히 검은색을 덮어 씌운 게 아니라는 것을 알 수 있습니다.

실제 세계에서 어둡게 보이는 색상들이 채도(S)가 높은 이유는 무엇일까요?

그것은 밝은 색에서는 빛의 강렬함(=밝기, B)이 색상의 강렬함(=채도, S)을 앞지르기 때문에 색상이 빛에 씻겨 나가기 때문입니다.

이 논리에 따르면 명도(B, 밝기)가 내려감에 따라 채도(S)가 올라가는 현상을 이해할 수 있습니다.

밝은 색상 베리에이션 = 낮은 채도(S) + 높은 명도(B, 밝기)

위 상황을 종합해 봤을 때 우리는 ‘어두운 색상의 베리에이션’의 반대가 ‘밝은 색상의 베리에이션’이라는 것을 상상할 수 있습니다.

여기서 우리는 한 걸음 더 나아갈 수 있습니다. 채도(S)를 더 낮추고 명도(B, 밝기)를 더 높이면 어디에서 끝날까요?

하얀색을 얻을 수 있습니다.

흰색을 추가하면 더 밝은 변형을 만들 수 있습니다.

색상에 흰색을 추가하는 두 가지 아주 간단한 방법이 있습니다.

1. 해당 요소의 불투명도 줄이기 (흰색 배경인 경우)

2. 해당 요소 위에 반투명 흰색 레이어 추가

가장 중요한 것

이 기사에서 단 한 가지만 기억해야 한다면, 이걸 기억해야 합니다.

1. 어두운 색상은 명도(B, 밝기)를 낮추고 채도(S)를 높여서 만들어집니다.

2. 밝은 색상은 명도(B, 밝기)를 높이고 채도(S)를 낮춰서 만들어집니다.

이 간단한 아이디어로 메인 컬러를 가지고 놀라운 베리에이션을 뽑아낼 수 있습니다.

사실 멋져 보이는 컴포넌트들 간의 많은 색상 변화나 컴포넌트의 상태변화들은 단순한 색상 베리에이션 일 뿐입니다.

Harvest는 제가 좋아하는 시간 추적 앱입니다.

헤더를 보면 호버는 상태는 밝고, 액티브 상태는 더 어두운 것을 알 수 있습니다.

이번에는 초록색 버튼을 볼까요?

호버 상태는 더 어두워지며 채도가 높고 명도가 낮습니다.

모든 디자인이 이 규칙을 100 % 따르는 것은 아니지만, 이는 실제 세계에서 색상이 작동하는 방식과 유사하고 자연스럽습니다.

색상(H)이란?

이제 우리는 색상(H)에 대해서 이야기해야 합니다.

위에서도 말했지만, 색상(H)은 채도(S)와 명도(B, 밝기)가 서로 반대 방향으로 움직이는 것에 비해 보조적이므로 색상 조정을 할 때 색을 완전히 무시할 수 있습니다.

여기에 간단한 설명을 하겠습니다.

우선, 각 색상에는 일종의 "인지되는 밝기"가 있습니다. 이를 광도라고 합니다.

이 파란색과 노란색은 모두 HSB 밝기가 100 %로 표시됩니다. 하지만 색상(H)은 서로 다릅니다.

위와 같이 명도(B, 밝기)와 채도(S)의 상수는 같게 만들고 색상(H)만 변경해서 0에서 100 사이의 값으로 측정되는 다양한 명도(B, 밝기) 또는 광도를 얻을 수 있습니다.

이것들은 30° 간격의 색상(H)이며, 모두 100% 채도와 100% 명도입니다.

여기에 색상(H)을 복사해서 그레이 스케일(흑백-색상(H)과 채도(S)를 0으로 바꾸기)로 변환해 보겠습니다.

그 뒤 그 그레이 값의 0~100까지의 광도를 적고 원래의 색상환과 대조해 보았습니다.

그레이 스케일에서 밝은 회색은 높은 광도를 의미하고 어두운 회색은 낮은 광도를 의미합니다.

이를 빛과 색상(H)의 상관관계로 나타내 보겠습니다.

그리고 이 특정한 패턴은 우리의 질문에 답을 해줄 겁니다.

우리가 보았던 위의 사례를 기억해보면 그림자에서 색상(H)은 때로는 아래로 이동하고 때로는 위로 움직였습니다. 왜 그랬을까요?

첫째, 이 그래프에는 3개의 최대 점과 3개의 최소 점이 있습니다.

낮은 점수는 빨간색(R), 녹색(G) 및 파란색(B)입니다. 최고점은 청록색(C), 자홍색(M) 및 노란색(Y)입니다.

이 특별한 색은 우리에게 익숙한 조합으로 바로 RGB와 CMY입니다.

이는 널리 사용되는 컬러 시스템이지만 현재로서는 잠시 이를 잊고 다시 본론으로 돌아가 보겠습니다.

중요한 점은 채도(S)와 명도(B, 밝기)를 계산하지 않고 빨간색 (0°), 녹색 (120°) 또는 파란색 (240°)으로 색상(H)을 이동하면 명도(B, 밝기)가 감소한다는 것입니다.

반대로 색상(H)을 노란색 (60°), 청록색 (180°) 또는 자주색 (300°)으로 이동하면 색상의 명도(B, 밝기)가 증가합니다.

팁은 색상(H)의 움직임을 채도(S)와 명도(B, 밝기)의 움직임과 일치시키는 것입니다.

어두운 색상 변화를 원한다면 빨간색(R,0°), 녹색(G,120°) 및 파란색(B,240°) 중에서 가장 가까운 색상(H)으로 움직이는 것이 좋고, 밝은 색상 변화를 원한다면 그 반대로 청록색(C,180°), 자주색(M,300°) 및 노란색(Y,60°)으로 이동하는 것이 좋습니다. (물론 이것은 명도(B, 밝기)가 낮을 때 채도(S)가 높아지는 상관관계를 가정합니다.)