UI 디자인 가이드 : 컬러 기본기
디자인을 할 때, 색상을 정하는 일은 생각보다 어렵습니다.
UI에는 수많은 요소들이 있고, 그 모든 것들이 조화를 이뤘을 때 아마도...좋은 디자인이라 할 수 있기 때문이죠. 그 중에서 컬러는 쉬운 것 같아보이지만 어려운 요소입니다. 컬러를 사용하는 것에 대한 아주 기초적인 가이드가 있어 올려봅니다.
All you need to know about colors in UI Design — theory & practice
색상을 사용하여 인터페이스를 디자인하는 방법에 대한 일련의 팁, 이론, 모범 사례 및 예시입니다.
Tyler Lastovich, Unsplash색상(Color)은 많은 생각을 해보게 합니다. 디자인을 할 때 사용할 수 있는 컬러도 정말 많고 다양하구요.
특히 UI의 경우 높은 대비를 사용하고, 더 밝은 색상을 선택하고, 더 많은 관심을 끌기 위해 많은 색의 조합을 사용할 수 있는 기회가 주어집니다.
컬러 시스템은 타이포그래피, 여백 등과 함께 Interface Design의 주요 요소 중 하나입니다.
오늘은 바로 그 컬러(Color)에 대해 이야기하려 합니다.
인터페이스에서 색 조화를 개선할 수 있는 방법에 대해 고민해본 적이 있으실 겁니다.
전 새로운 UI Designer(또는 Visual Designer)를 인터뷰할 때는 항상 그 사람의 감성 색상과 색상을 사용하는 방법에 대한 견해를 알아보려고 합니다. 만약 이 글을 읽는 분이 UI 디자인이 처음이거나 디지털 프로덕트를 만들고자 하시는 분이라면 이 내용이 도움이 될 수도 있을겁니다.
먼저, 색상환(Color Wheel)에 대해 이야기를 시작해볼게요.
색, 대비, 조화에 대해 이야기를 시작하면, 우리 머릿속에는 다음 이미지가 떠오를겁니다.
Color Wheel이것처럼 색상에 대해 알아야 할 가장 중요한 3가지는 Hue, Value 및 Saturation 입니다.
(다 아시겠지만요.)
1. Hue(색조)
먼저 색조(Hue)는 자연 상태의 색상 그대로를 말합니다.
예를 들어 파란색, 녹색-노란색, 노란색, 빨간색 등. 빛과 어둠의 변화 없이요.
이를 이해하는 데 도움이 될 수 있는 또 다른 예는 색상표를 빛과 그림자의 다른 변화없이 색상 환(Color Wheel)에서 볼 수 있는 각 색상으로 정의하는 겁니다.(아래 이미지 참조)
색상 이름이 있는 색상 환(Color Wheel)2. Value(값)
Value는 빛과 어둠의 양을 말하는 값입니다. 네, 명도입니다.
일상 생활에서 예시는 흰색 톤으로 빛에 더 가까운 것과 더 어두운 배경에 있는 다른 것을 보는것처럼요.
산책을 하다보면, 아침과 밤에 색상이 달라지는 것들을 보게 되죠. 예를 들어 가을의 산은 대부분 갈색이지만, 아침에는 밝은 톤(Light), 밤에는 어두운 톤(Darkness)으로 보여집니다.
Alexandre Godreau, Unsplash빛에 가까울수록 밝은 톤(밝음)이 생기고 빛에서 멀어지면 그림자(어둠)가 커집니다.
특히 UI(사용자 인터페이스)에서 Value는 중요한 역할을 합니다. UI 디자인에서는 정돈된 느낌을 주기 위해 제한적인 색상을 사용하게 되는데요. 이 때 Value가 다른 컬러를 통해 다양한 Surface를 표현하는 것이 가능해집니다. 아래는 Google의 Material Design입니다. 같은 색상을 사용하지만 다른 면으로 보이죠.
이처럼 중요한 요소를 식별하기 위해 각기 다른 면(Surface)을 사용할 수 있습니다.
Google의 머티리얼 디자인Value는 각 색상의 빛 또는 어두움의 양. 이걸 조절해서 시각적으로 다른 표면의 느낌을 줄 수 있습니다.
색상 값이 100%이면 흰색이 됩니다. 색상의 값이 0%이면 검정색이 됩니다. 아래 이미지를 참고해주세요. :)
Color Wheel / Value3. Saturation(채도)
채도는 색상의 강약을 말합니다. 우리가 어떤 색을 채우면 더 강렬하고 선명한 색이 됩니다.
채도가 100에 가까워진다는 말은 원색에 가까워진다는 말입니다. 그래서 색상의 채도를 낮추면 흐릿하고 칙칙한 색상으로 보여집니다. 그리고 색상의 채도를 완전히 낮추면 회색이 되어버리구요.
채도는 책이나 포스터와 같은 오프라인 디자인에서는 완전히 사용할 수 없을 수 있습니다. 인쇄를 해야하는 경우에는 채도를 높일 수 있는 범위에 한계가 있기 때문입니다.
반면, 디지털기기에서는 그 제한이 없고 더 많은 가능성이 있죠.
Real Life vs Digital Life
UI에서의 채도에 대해 이야기할 때 짚고 넘어가야 할 중요한 점이 있습니다.
완전한 원색처럼 생생하고 강렬한 색상은 현실세계가 아닌 RGB를 사용하는 디지털 세계에서 가능합니다.
CMYK를 사용하는 현실세계가 아니라요. 그렇기 때문에 우리는 색상을 사용할 때에 책임감을 가지고 사용하는 것이 매우 중요합니다. :)
기억하세요. 강력한 파워에는 책임이 따른답니다 :)
Back to basic
그래서 결국 컬러에 대한 원천적인 고민은 어떻게 조합해야하는가입니다.
이 문제에서 가장 중요한 건 대비와 조화입니다.
아시죠? 대비가 항상 조화를 의미하는 것은 아니라는 ㅓㄹ요.
To have a harmony between colors, is necessary between them exist a amount color from the other.
색상 사이의 조화를 위해서는 서로 다른 색상의 양이 존재해야 합니다.
아래 이미지에 보이는것처럼 반대 색상은 더 대비되어 보이고, 가까운 색상은 대비가 적어보입니다.
이 포지션에 따라 두 색상 사이의 조화는 더 두드러지게 됩니다.
1. The rule of 60 30 10
60 30 10의 법칙
60 30 10. 기억하세요. 이건 색을 쉽게 조합하기 위한 비율이랍니다.
도미넌트(우세한) 색상을 선택하여 공간의 60%에서 사용하고 보조 색상은 30%, 강조 색상은 나머지 10%에서 사용해야 합니다. 네, 딱 3가지 색상만 사용합니다. 간단하죠?
이건 실제로 인테리어 디자인에 많이 사용되는 방법이기도합니다.
인터페이스를 공간이라고 생각하고 컬러계획을 세우는 겁니다.
When we design an interface we need to think that we are designing our living room, and every tone of color, lighting and position must be perfect and have functionality.
인터페이스를 디자인할 때 거실을 디자인하는 것이라고 생각해보세요. 색상의 톤, 조명, 위치가 완벽해야하고 기능적이어야 합니다.
예를 들면 아래 이미지처럼 3가지 색상 사용을 가정해봅니다.
메인,보조, 강조 컬러는 그레이, 블랙, 그린. 포인트 컬러가 그린이고, 가장 강조되어 보이므로 UI 디자인에 적용하면 강조 색상을 CTA(Call To Action)의 색상으로 정의할 수 있습니다.
UIv 색상표, CTA 색상 그린Be inspired by nature
자연에서 영감을 얻다
여러분은 인간의 눈이 천만 가지 이상의 색을 볼 수 있다는 사실을 알고 계신가요?
자연이나 일상속에서 보는 것들에서 조화와 대조를 찾아볼 수 있습니다. 자연, 사물, 동물, 공간. 모든 것에는 색상 팔레트가 있으니, 주의를 기울여서 볼 필요가 있겠네요.
Sven Brandsma, UnsplashShadows are never black, and lights are never white
기억하세요. 그림자는 결코 블랙이 아니며 빛도 완전한 흰색이 아니랍니다.
빛과 그림자를 사용할 때 발생하는 흔한 실수는 그림자에 투명도를 조절한 검정색을 넣고, 빛의 경우 투명도를 조절한 흰색을 사용하는 경우입니다. 하지만, 그림자는 꼭 그렇지 않거든요.
아래 그림처럼 백그라운드의 색상을 머금은 그림자를 사용하는게 더 보기 좋습니다.
카드의 그림자여전히 확신이 서지 않는다면 실제 주변을 한 번 살펴보세요.
그림자는 항상 백그라운드의 색조를 약간 머금고 있을겁니다.
Duy Hoang , UnsplashDarkness is never black.
그림자는 결코 블랙이 아니고 Value 톤으로 음영 처리된 각각의 색조를 의미합니다.
사진에서 보이듯이 라임의 그림자는 거의 블랙처럼 보이는 매우 짙은 녹색이고 우드 도마의 그림자는 거의 검정에 가깝지만 매우 어두운 갈색입니다. 그림자라고해서 결코 완전한 블랙은 아닌거죠.
완전한 검은색은 빛이 전혀 없을 때만 나타난답니다.
그레이스케일을 사용하여 색상의 조화와 대비를 테스트해보세요.
그레이스케일을 사용하여 색조를 제거하고 빛과 그림자만 유지해봅니다.
빛과 그림자는 이미지에 사실감과 깊이감을 줍니다.
Lana Marandina의 삽화 https://dribbble.com/shots/3826770-Missing-Summer이미지에서 그레이스케일만 남게 되면 톤(값) 사이에도 차이가 있음을 알게됩니다.
일부 색상은 더 어둡고 다른 색상은 더 밝구요.
이걸 통해 우리 눈은 그들 사이의 조화와 대조의 느낌을 받게 됩니다.
Grays with color tones
색조를 가진 회색
오늘날 인터페이스는 더 깨끗하고 하얗고 또, 다른 요소인 타이포그래피와 함께합니다.
텍스트에 컬러를 적용했을 때 예시입니다.
왼쪽에 있는 Hello는 검정색인 #000000이고 다른 하나는 매우 진한 푸른빛 #15163D입니다.
언뜻 둘 다 검정처럼 보이겠지만 그렇지 않습니다. 이 점이 왜 그렇게 중요할까요? 아래 이미지를 보세요.
같은 불투명도, 다른 결과두 컬러에 불투명도를 적용해봅니다. 둘 다 불투명도는 같은데 결과가 다르게 보이죠.
하나는 회색이고 다른 하나는 파란색을 띈 회색입니다. 우리가 어떤 색상의 톤으로 텍스트를 사용할 때 우리는 주변 요소와 더 많은 조화를 이룰 더 많은 기회가 있습니다.
색상 사이의 조화를 이루기 위해서는 색상 사이에 서로 다른 색상이 존재해야 한다고 말씀드린 것을 기억하세요.
두 가지 유형의 조합둘 다 검정색으로 보이지만 하나는 노란색에 보색인 보라색 음영을 가진 색입니다. 이렇게 하면 대비와 조화를 모두 얻을 수 있게됩니다.
그렇다면, 블랙 & 그레이를 쓰는게 나쁜건가요?
아뇨. 그렇진 않습니다.
그건 모두 디자인하고자 하는 것에 달려 있습니다. 블랙은 뉴트럴 컬러로 어떤 컬러와도 잘 어울립니다. 그러나 때때로 예와 같이 다른 색조를 추가하면 다른 색상 감각을 얻을 수 있기는 합니다.
예제에 사용된 색상표Exercise your eyes! Find the light!
파블로 스탠리 제작 https://www.pablostanley.com/Just as we go to the gym to exercise our body, we should see inspirations to exercise our eye every day.
몸을 단련하기 위해 짐에 가는 것처럼, 매일 눈 운동을 위한 영감을 받습니다.
우리가 디지털 세계에 있을 때 색상의 가능성은 오프라인보다 많기에 더욱 준비가 필요합니다. 가장 좋은 운동은 매일 영감받는 것입니다.
Hack your own system in such a way that it doesn’t seem like a task, but something natural.
작업이 아닌 자연스러운 방식으로 시스템을 해킹하세요.
이 작업에서 저에게 많은 도움이 되는 것 중 하나는 Instagram입니다. 매일 많은 인터페이스 디자인과 색상을 적용하는 방법을 보는 영감을 주는 페이지를 팔로우하면서요.(원본 필자)
Final Thoughts
삶의 모든 것과 마찬가지로 색상 조합 방법을 아는 것은 결국 끊임없는 연습입니다. 처음에는 어렵고 복잡할테지만 나중에는 얼마나 쉬운지 알게 될 것입니다. 배움을 멈추지 말고 많~이 연습하세요.
도토리 덧,
어도비에서 제공하는 아래 사이트에서 컬러를 추출하거나 배색을 쉽게 할 수 있습니다.
https://color.adobe.com/ko/create/color-wheel
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
