실무에서 쓸 수 있는 색상 변형방법 (번역본)
UI 디자이너를 위한 실무꿀팁 - 색상변형 방법
이 게시물은 Medium, Erik D, Kannedy라는 해외 디자이너의 'Color in UI Design: A (Practical) Framework' 라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있으며, 피드백을 주시면 최대한반영하도록 하겠습니다.
https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e
실무에서 쓸 수 있는 색상 변형방법 (Color in UI Design: A Practical Framework)
저는 UI 디자인을 독학해오면서 수많은 기사와 책들이 색깔 이론과 팔레트에 대해 이야기해오는걸 봐왔습니다. 그러나 제 경험상 그런 기사와 책들이 말하는 - 팔레트 관련 자료(split complementary palette) 는 디자인에 있어서 별 도움이 되지 않았습니다. 사실상 쓸모가 없었죠.
색 이론에 관련된 자료가 UI 디자인에 별 도움이 되지 않는다면, 대체 어떤 것들이 도움이 될 수 있을까요? 제 생각은 이렇습니다. 색상을 선택할때 색상이론을 통해 선택하는 것이 아니라, 색을 섞어서 여러 색상을 만들어내는 방식입니다. 색상 인터페이스 디자인의 기본적인 전술중 하나는 하나의 기본색을 기반으로 여러 많은 변형색을 만들어낼 수 있다는 것입니다.
이 부분이 좀 이해가 가지 않을 수 있겠지만, 일단 좀 끝까지 이야기를 들어보세요. 저는 UI 디자인의 색상을 조절할 수 있는 프레임워크에 대해 이야기할 생각이니까요.
이 프레임워크는 다음과 같은 장점이 있습니다.
- 하나의 테마 색상을 기본적으로 UI의 모든 용도에 맞게 수정할 수 있습니다.
- 어떤 색상적 변화가 디자인적으로 더 좋아보일 수 있을지 예측할 수 있습니다.
- 색상을 더 자연스럽게 (less Subjective) 보일수있게 만들어줍니다.
어두운 변형색상과 밝은 변형색상들 (Darker & Lighter Variations)
많은 훌륭하게 보이는 인터페이스에서 제가 발견한 건, 대부분의 시각물들이 특정한 테마 색상을 기반으로, 더 어둡거나 더 밝은 색을 사용하고 있다는 겁니다. 서로 완전히 다른 색상이 아니라 한가지 색상에 기반을 두었다는 거죠.
색상적으로 보면, 검색바가 반투명한 검은 색 오버레이라고 생각하는건 아니겠죠? 정확히는 파란 색에 어두운 색상을 섞으면 검색 창의 어두운 색이 됩니다.자, 이제 아름다운 서핑 예측 앱인 스웰 그리드 (Swell grid) 라는 앱을 예로 들어볼까요?
짠. 여기 여러가지 변형 색상들이 보이죠. 몇개 정도나 될까요? 사이트에서 직접 갯수를 세어 보세요. 사실상 이 페이지의 거의 모든 것은 기본적인 파란 색의 변형입니다.
여기 또다른 사례가 있습니다.
UI 요소의 상태값도 색상의 변형으로 나타낼 수 있습니다. 이건 세가지 파랑을 사용하는 한가지 사례에 불과합니다. 최선의 선택이라고까지는 말하기 힘들겠죠. 하지만 이 사례는 은 우리가 어떻게 색상을 변형시켜야하고, 어떻게해야 실제 상황에 응용할 수 있는지에 대한 질문을 던져줍니다.
자, 이제 실무에서 응용이 가능하도록 위한 두가지 원칙을 이야기해보겠습니다.
1. 우리는 실제 세상에서 흔하게 볼 수 있는 사례에서 단서를 찾아볼 겁니다.
비록 우리의 인터페이스가 "가짜"라고 할지라도, 우리는 여전히 현실 세계의 내용을 모방하기 마련입니다. 왜냐하면 수십년 동안 현실 세계에서 사물을 보면서 살아왔으니까요. 그러니 빛과 색상이 동일한 방식으로 적용되기를 기대하기 마련입니다. (익숙함 속에 일종의 기본적인 기대치 / 자연스러움에 대한 감각이 생겨났다고 보면 될듯 합니다.) 이 내용이 이해가 가지 않는다면 다음 문서를 한번 확인해보시고, 이 글을 다시 읽어보세요.
7 Rules for Creating Gorgeous UI
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
2. HSB컬러 시스템을 사용해서 이야기를 해볼 겁니다.
HSB 컬러 시스템은 광범위한 용도로 쓰이는 직관적인 컬러 시스템입니다. 색깔, 채도, 밝기가 무엇인지 모르겠으면 아래의 자료를 확인한 후 다시 이 문서를 읽어보세요
The HSB Color System: A Practitioner's Primer
https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html
실제 세상의 색상 변형 (Real-World Color Variations)
주변을 한번 둘려보세요. 여러분의 방을 둘러볼 때, 분명 24개 이상의 변형색상 패턴들을 확인하게 될겁니다. 그게 다 개별적인 색상이라고 생각했을때, 그런 다양한 색상을 만들어내는 이유는 무엇일까요? 바로 그림자에 있습니다.
아래 그림에서의 그림자를 기본 색상의 어두운 변형으로생각해보세요.
Photo by David Blaikie자, 이제 실제로 어떻게 해당 색상을 찾아낼 수 있는지. 색상 피커를 통해 확인해보고, 주황색 벽에 그림자가 생겨날 때. 어떤 일이 일어나는지 확인해봅시다. 위에서 말씀드렸듯이 우리는 이 문제를 HSB로 해석할 겁니다.
참고 : 모니터 이미지 색 프로필을 사용하면 이러한 측정 값이 달라질 수있으니 주의하세요.
명도가 내려갔네요. 뭐 그건 당연한 얘기겠죠. 그러나 이 하나의 사례만을 갖고 일반화를 하기보다는 다른 사례를 한번 더 확인해봅시다.
Photo by Matthias Uhlig쿠바에서의 멋진 한 장면이군요. 그림자가 이 경우에도 동일하게 동작하나 한번 봅시다.
자, 이제 좀더 명확한 결론을 내릴 수 있겠군요. 어떤 패턴적 변화가 진행되었는지 보이시나요? 그림자가 생길때는 단순히 밝기 (Brightness) 가 내려가는것 뿐만 아니라 채도 (Saturation)가 올라가는 것을 알 수 있습니다. 우린 이 사실을 두가지 사례로 확인해봤고, 제가 아는한 그건 여러분이 실무에 그대로 적용할 수 있는 확실한 색상 선택법 중 하나입니다.
색조의 경우는(Hue) 좀 더 어렵습니다. 밝은 하늘색 (coral)의 그림자와 청록색에 가까운 그림자가 서로 연결됐습니다. (미묘하게 색조가 변화하게된 점에 대해 이야기하고있네요.) 이 부분에 대해서도 충분히 설명을 드릴 수 있곘지만, 당장 그렇게 중요한건 아니니. 색조에 대해서는 좀 더 나중에 이야기하도록 하죠.
색상을 선택하는 규칙 (The Rules)
위에서 이야기했던 내용들을 좀 더 풀어말해봅시다.
어두운 색상 변형 = 채도 높아짐 + 명도 낮아짐
색조는 360도중에 1도만 움직였습니다. 이건 아마도 반올림에서 비롯된 에러같네요
채도가 올라가면서 명도가 떨어졌습니다.이건 단순히 기본 색상에 어두운 색만 얹었다고는 말하긴 어렵겠죠. 채도가 오히려 상승했으니까요. 그 이유는 HSB 색상 시스템에서는 검정색을 추가하는 것이 밝기를 줄이는 것과 같기 때문입니다. 그렇기 때문에 우리는 명도를 줄임과 동시에 채도를 추가해줘야한다는 것이죠.
왜 실제 세계에서는 어두운 색이 더 높은 채도와 관련이 있을까요? 사실 이건 잘 모르겠어요. 하지만 대충 예상해보면 - 빛의 강도가 색의 강도(채도)를 능가하면 색상강도 (채도)를 대체해버리기 때문이 아닌가 싶어요. 이와같은 이유 때문에 채도가 오히려 떨어질 수도 있고 반대로 강해질 수도 있을겁니다. (빛에도 색상과 채도가 있기 때문에 사실상 거의 맞는 표현입니다.)
자, 어두운 색상변형에 대해 알아봤으니 이번엔 밝은 색상 변형에 대해 이야기해보죠. 어두운 색상변형에서는 명도가 상승하는 만큼 채도가 상승했습니다. 그럼 반대로 채도를 낮추고 밝기를 높이는 것을 계속한다면, 어떤 결과가 나올까요?
밝은 색상 변형 = 낮은 채도+ 높은 밝기
결국 하얀색이 되어버리네요.
밝게만든다는걸 단순히 - 하얀색을 섞으면 되지않냐고 생각할수도 있습니다. 이 상황에서 색상을 변경하는 두가지 방법에 대해 얘기해보면 좋을 것 같군요.
1. UI 요소의 투명도를 줄인다 (흰색 배경에 있는 경우).
2. UI 요소 위에 하얀색 레이어를 올린다.
(사실 정확히는 색상이 밝아질 때 채도도 함께 증가하는 경우가 많습니다. 색조 Hue도 함께 변화하기도하고요. 이건 빛 자체에 색상을 강화하거나, 후퇴시킬 수 있는 자체 색상이 있기 때문입니다. 하지만 이 문서의 필자는 이 부분에 대해 논하지는 않고있네요.)
핵심요약 (The Most Important Thing)
이 기사에서 가장 중요한 내용은 다음과 같습니다.
명도를 낮추고, 채도를 높이면 더 어두운 색상을 만들 수 있습니다. 그리고 밝기를 높이고 채도를 낮추면 색 변화가 밝아집니다. 이 간단한 방식으로도 여러분은 단 하나의 여러 변형을 만들 수 있을 겁니다.사실상 수많은 UI 요소들에 대한 여러 색상 변형이나, UI 요소 상태변형은 결국 단순한 색상 바꾸기에 지나지않는다는걸 기억하세요.
위의 이미지는 제가 쓰고있는 하베스트 (Harvest)라는 시간표 앱입니다. 머리 글 상태를 보세요. 호버 상태는 더 밝죠? 선택한 상태는더 어둡습니다. 또다른 예로 녹색의 신규입력 버튼을 보세요
미세하지만 호버 상태가 더 어두운 색상 변형이 들어가있습니다. 더 높은 채도값과, 더 낮은 명도값이죠. 이 간단한 방식을 계속 반복해서 쓰는겁니다.
엄밀하게 말하면, 모든 디자인 사례에서 이런 방식을 따르는 건 아닙니다. 위에서 보았던 헤더의'선택됨' 상태는 더 낮은 명도임에도 불구하고 채도가 별로 변하질 않았습니다.호버 상태에서는 채도가 낮아졌지만 명도는 변하지 않았죠. 하지만 우리는 실제 세상에서 색이 어떻게 작용하는지 살펴봤고, 이해했죠. 그리고 왜 이런 색상 사용이 좋아보이는지에 대해서도 충분히 이론적인 이해를 마쳤다고 봅니다.
그럼 색조(HUE)는 어떻게 변형해야할까요? (What About Hue? )
자 이제는 색조에 대해 이야기해보도록 하겠습니다. 사실상 색조 변형은 위에서 보았던 명도와 채도의 변형 이후에 따라오는, 부차적인 내용이기는 합니다. 게다가 대부분의 경우 UI 요소의 색상을 정할때, 자주 넘어가게되는 부분중에 하나죠. 하지만 실제세상에서는 색상이 변화할때 색조도 약간씩 변화합니다. 그 이유에 대해 이야기해보죠.
실제 색상에는 고유한 자체 밝기 (색상 고유 밝기)라는 개념이 있습니다. 이걸 자체발광도 (Luminosity) 라고 부릅니다.
수치적으로 봤을때, 이 파란 색과 노란 색 모두 100%의 HSB 명도를 유지하고있습니다. 하지만 어떤게 더 밝아보이나요? 네 맞습니다. 노란색이 더 밝아보이죠. 색상의 명도와 채도가 일정하다고 했을 때, 색조의 차이만으로도 사람이 느끼는 색상의 밝기 차이가 발생합니다.- 우리가 인지하는 밝기범위 외에 색상 고유의 밝기가 있기 때문이죠.
위 그림은 HSB 색상 시스템을 30°간격으로 나타낸 방식입니다. 채도와 명도 모두 100%로 최대 밝기 상태죠.
이 그림은 동일한 '색조'를 복사해서, 색상자체 발광 혼합모드 (Luminosity blend mode)로 적용했을 때 나온 결과를 곁에 붙여본 것입니다. 수치상으로는 HSB 채도와 명도 모두 100%임에도 불구하고, 해당 색상이 가지는 자체색상명도는 회색의 숫자들처럼 차이가 난다는 이야기죠.
위의 색상 자체발광도의 숫자를 그래프상으로 표기하면 다음과 같습니다. 여기에서 패턴을 확인해보면 우리가 위에서 이야기했던 - 그림자에 대해서 좀 더 이해가 쉬워집니다. - 어떤 때는 채도가 내려가고, 어떤 때는 오히려 올라가는 이유를 알 수 있죠.
먼저 이 그래프를 조금 정리해보면, 가장 밝은 색상3개와 가장 어두운 색상 3개를 뽑아볼 수 있습니다. 가장 낮은 점수는 빨강, 초록, 파랑이고, 가장 높은 점수는 밝은 하늘색, 핑크색, 노란색입니다. 여기서 RGB나 CMY가 생각나시긴 하겠지만, 여기선 헷갈릴수 있으니 넘어가도록 하죠. 우리가 가장 중요하게 봐야하는건 색조 자체의 변화와, 색상 자체발광도에 대한 내용입니다.
채도와 명도를 무시한다고 했을 때, 색조를 빨간 색(0°), 녹색(120°)또는 파란 색(240°)으로 이동하면 광도 또는 색상이 감소합니다.반대로 노란 색(60°), 밝은 하늘색(180°)또는 자홍(300°)으로 색상을 바꾸면 색이 밝아지는걸 알 수 있죠.
결국 우리가 밝은 색상을 사용할 때, 주의해야할 내용은 - 색상이 밝아지고, 낮아지고에 대한 패턴을 그대로 따라가는 겁니다. 어두운 색 변화를 원하는 경우 색을 빨간 색(0°), 녹색(120°)또는 파란 색(240°)중 가장 가까운 쪽으로 이동하면 됩니다. 반대로 더 밝은 색의 경우는 그 반대로 노란 색(60°), 밝은 하늘색(180°)또는 자홍(300°)중 가까운 쪽으로 이동하면 되겠죠. 물론 명도는 낮추고, 채도는 올리면서요.
Photo by David Blaikie
위 사진의 색조가 주황에서, 빨간색이 되어가는 이유도 이런 방식으로 이해할 수 있습니다. 그림자 색상은 빨간색 (0°) 쪽으로 이동하고 있었습니다. 빨간색은 해당 주황색( 21°)에서 가장 가까운 색상입니다.
Photo by Matthias Uhlig
동일하게 보면 하늘 색 벽의 그림자도 마찬가지입니다. 밝은 하늘색이 파란 색(240°)로, 194°에 가장 가까운 최소 지점을 향해 이동하고 있었던 거죠.
(HSB 색상체게에서는 - 빛을 받아 밝아지는 경우 가장 가까운 밝은 색 쪽으로 이동하게된다는 얘깁니다. 이해는 가는데 직관성이 좀 떨어지는 예시네요)
실무에서의 색상 선택법 (The Way of Color)
색상을 사용할때, 그 색의 변형에 대해서 고민하고있다면. 지금 상황에서 더 밝은 색상 변형이 필요한지. 아니면 어두운 색상 변형이 필요한지를 정하세요. 원하는 색상을 만드는 방법은 이미 알려드린 것처럼, 다음과 같습니다.
1. 어두운 변형색상 만들기
- 명도를 줄입니다.
- 채도를 늘립니다.
- 색조는 자체 색상밝기 (Luminosity)가 낮은 색상 쪽 (HSB 기준 : 빨간색, 녹색, 파란색) 쪽으로 이동하는 경우가 많습니다.
2. 밝은 변형색상 만들기
- 명도를 늘립니다.
- 채도를 감소시킵니다.
- 색조는 자체 색상밝기 (Luminosity)가 높은 색상 쪽 (HSB 기준 : 노란색, 밝은 하늘색, 자홍색) 쪽으로 이동하는 경우가 많습니다.
이런 방법을 사용 하면 한가지 색상만 선택해도 어둡거나 밝은 변형색을 선택해 UI 요소에 바로 적용할 수 있습니다.
한가지 색상을 기반으로 여러 변형 색상을 사용한 인터페이스 시안
여전히 더 설명해야할 것들이 많겠지만, 왠만큼 이야기를 한 것 같군요. 아마 더 이야기해본다면 다음과 같은 질문들을 해볼 수 있을겁니다.
- 데이터 시각화와 그라디언트에서 색조가 중요해지는 이유는 뭘까요?
- 스케치 사용시 어두운 변형 색상들을 만드는 방법이 있나요?
- 색상을 만들 때 채도와 명도 중 뭘 더 많이 수정해야하나요?
- 내가 고른 색상들에 어울리는 - 색조 있는회색은 어떻게 찾나요?
- 어떻게하면 연관되지않은 비인접색상 (색상표 기준 전혀 상관없는 위치의 색들)을 자연스럽게 함께 사용할 수 있을까요?
- 색상들끼리 서로 충돌이 일어날 때 어떻게 수정해야할까요?
- RGB와 CMY 색상들이 HSB의 자체발광색 그래프에서 오히려 어두운 색상계에 속하는 이유는 뭔가요?
여러 질문들이 있겠지만 이 부분은 일단 넘어가도록 하겠습니다.
이후 해당 저자는 자신이 만든 유료 디자인 강의영상에 대한 내용을 홍보합니다. 내용 이해에 도움이 되는 내용은 아니므로 번역본에서는 제외하였습니만, 일단 강의 사이트에 대한 링크는 남겨놓도록 하겠습니다.
https://learnui.design/?utm_source=medium&utm_medium=content&utm_campaign=color-practical-framework
이 내용은 UI 디자인 연구소 - 단톡방 내부공유를 위해 제작된 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
