UXUI 디자인에 활용할 2017년 팬톤 올해의 컬러 PART 1

이제까지의 올해의 컬러를 모아봤습니다. 특히 2016년에는 두 개의 컬러가 함께 소개되면서 파스텔톤의 조화를 선보였죠. 그렇다면 2017년, 올해의 컬러는 과연 무엇일까요? 바로 ‘그리너리’입니다!

팬톤은 공식 홈페이지를 통해 “‘그리너리’는 새로운 시작을 상징하며, 싱그러운 풀잎을 닮은 이 컬러가 전 세계에 새로운 활력을 불어넣을 것”이라고 말했습니다. 또 “‘그리너리’에는 자연을 아끼고 사랑하자는 메시지도 담겨있다”라며 “자연 보호를 넘어 인간과 자연이 공존할 수 있는 효과적인 방법을 모색하는 한 해가 될 것”이라고 밝혔습니다.

팬톤은 ‘그리너리’와 더불어 패션에 유행이 될 총 10개의 색상을 ‘2017년 봄 컬러’로 소개했습니다. 패션에 적용될 것을 예견한 색상이지만 디자인 전 분야에 영향을 미칠 것으로 예상하여, 해당 색상들이 모바일 앱과 웹 디자인에 어떻게 활용되는 지를 추가적으로 살펴보도록 하겠습니다. 그럼 이번 파트에서는 그중 5가지 색상을 먼저 살펴보도록 할까요?

첫 번째는 2017 올해의 컬러로 선정된 ‘그리너리’입니다. 당신의 멋진 야외 활동과 패션 포인트가 되어줄 색상으로 싱그러운 자연과 아보카도를 연상시키는 색상입니다. 주방에서는 한층 더 건강해진 분위기로 만족감을 줄 이 색상은 분주하고 스트레스가 많은 현대인의 일상에 건강한 생활 방식을 생각하게 하는 컬러입니다. 올리브그린 계열의 보석들이 이용된 주얼리들로 당신의 패션을 한층 더 돋보이게 해줄 것이 확실합니다.

다음은 몇 년 전 ‘Whatsapp’의 모바일앱 디자인인데요. 이처럼 녹색 계열의 색상을 진회색이나 흰색 같은 무채색과 함께 활용함으로써 보다 세련된 UI 디자인을 만들 수 있습니다. 녹색이 가지는 기본적인 상징성 덕에 사람들에게 긍정적인 메시지를 주는 효과를 낼 수 있다는 것을 기억하세요. 단, 무분별한 사용은 금물입니다. 녹색 계열의 색상은 남발해서 사용하거나 채도가 낮아질 경우, 여러분의 UI 디자인이 유치해 보이거나 완성도가 떨어져 보일 수 있다는 점 유의하시길 바랍니다.

다음은 봄날의 꽃 같은 분홍 컬러 ‘패일 도그우드’입니다. 색상 특유의 부드러움으로 마음에 평화를 주는 순수한 컬러인데요. 대담한 색상과도 쉽게 짝을 이룰 수 있는 조용하고 평화로운 핑크 색조입니다. 보다 진한 버건디 색상의 구두와도 완벽한 조화를 이룹니다. 핑크 골드를 활용한 주얼리와 패션으로 2017년 봄을 더욱 화사하게 만들어보는 것은 어떨까요?

‘패일 도그우드’를 웹의 UI 디자인에 활용하실 때에는 다음과 같이 비슷한 파스텔 톤의 색조와 함께 사용하고, 보다 어둡고 짙은 톤의 색상을 배경 삼아 부드럽고 화사한 느낌을 주실 수 있습니다. 특히 뷰티 쪽 기업의 웹이라면 유입된 사용자들의 시선을 사로잡는 UI 디자인이 될 것입니다.

이번에는 어디서든 주목받을 수 있는 화려하고 매혹적인 컬러, ‘핑크 야로우’입니다. 새로운 시작을 여는 시점에 활발함을 가져다주는 정열적인 컬러입니다. 앞서 소개해 드린 ‘패일 도그우드’보다 강렬하게 존재감을 뽐내고 싶은 당신에게 딱 맞는 컬러입니다. 자줏빛을 띠는 루비나 가넷을 활용한 주얼리로 포인트를 주셔도 좋고 텀블러나 파우치 등으로 다신의 패션을 완성해보는 것도 좋을 것입니다.

Dribbble 앱 UI 디자인과 카타르항공의 앱 UI 디자인입니다. 톤에 약간의 차이는 있지만 ‘핑크 야로우’를 베이스로 활용한 사례입니다. 보실 수 있듯이 ‘핑크 야로우’를 활용하면 강렬한 인상을 주거나 톡톡 튀는 창의성을 펼치고 영감을 주는 효과를 얻을 수 있을 것입니다.

다음 컬러인 ‘케일’은 에메랄드 색조보다 조금 더 차가운 톤으로, 비옥한 녹색을 부각하기 위해 조금 더 노란색을 더한 컬러입니다. 우리나라에서는 흔히 카키색이라고 하는 색상을 떠올리시면 될 거예요. 녹황색 채소 케일에서 따온 이름이라 익숙한 이름이지요? 싱그러운 자연을 대변하는 ‘그리너리’와는 또 다른 매력의 색상으로 우거진 녹음을 연상케 하는 색이랍니다.

‘케일’은 위처럼 배경으로 사용하면 좋은 컬러입니다. 좌측 이미지처럼 음영으로 로모 효과를 주어 배경에 사용함으로써 강조가 되어야 할 콘텐츠를 두드러지게 보여줄 수 있고 우측처럼 녹색 계열을 풍성하게 활용할 때 배경으로 활용함으로써 무게감을 줄 수 있습니다. 위에서 소개했던 ‘Whatsapp’도 최근, 페이지마다 상단의 내비게이션 바에 ‘케일’을 사용하면서 색감이 조금 더 진중해졌지요.

이번 파트에서 마지막으로 소개해드릴 색상은 바로 ‘헤이즐넛’입니다! 오늘 소개해 드린 색상 중 어느 쪽으로도 치우치지 않은 컬러지요. 부드럽고 자극적이지 않은 이 컬러는 따뜻한 대지의 토양을 연상시키는 색으로 계절에 무관하게 적용할 수 있는 컬러입니다. 이 특별한 색조는 다른 어떤 색조와도 아름답게 어울립니다.

살짝 분홍빛이 섞였지만 다른 색조와의 조화를 보여주기 위해 가져온 비슷한 톤의 이미지입니다. 위에서 보실 수 있듯이 ‘헤이즐넛’은 ‘케일’과도 ‘핑크 야로우’와도 조화를 이루며 다양한 색상과 함께 있을 때 더욱 빛을 발하는 컬러입니다.

UX/UI 디자인에서도 마찬가지죠. 홀로 쓰일 때보다는 다양한 컬러와 함께 쓸 때 더 효과적입니다. 진한 갈색과 흰색이 적절히 섞인 가구나 검은색과 같은 어두운색 제품을 판매하는 기업이라면 ‘헤이즐넛’을 배경 색으로 적극 활용해보는 것은 어떨까요?

---

UX/UI 디자인, 온라인으로 배우러 가기 (강의 둘러보기)