UX 디자인 배우기 #102
Today UX 아티클
babich.biz에 올라온 Nick Babich의 글 Vibrant Colors For Apps and Sites을 원저자의 허락을 받아 번역한 글입니다.
컬러는 디자이너의 도구함에 있는 가장 강력한 도구 중 하나입니다. 컬러는 이목을 끌 수도 있고, 분위기를 만들 수도 있으며, 유저의 감정, 인식, 행동에 영향을 미치기도 합니다. 웹과 모바일 앱 디자인과 관련해서는 확실히 강렬하고 선명한 컬러(vibrant color)가 대세입니다. 디자이너는 강렬하고 선명한 컬러를 사용해서 사람들이 중요한 요소에 집중할 수 있게 만들고 디자인을 기억하기 쉽게 만듭니다.
아래는 여러분의 디자인에 강렬하고 선명한 컬러를 활용할 수 있는 몇 가지 실용적인 테크닉입니다.
모노톤(Monotone)
선명한 색상을 사용하는 가장 인기 있는 방법 중 하나는 모노톤 컬러 팔레트를 사용하는 것입니다. 모노톤 팔레트에는 하나의 색상에 여러 색조 및 톤이 섞여 들어갑니다. 그런 컬러 팔레트는 시각적으로 자극적이며 더불어 이목을 끕니다. 눈길을 사로잡는 서체, 모노톤 컬러 스킴은 정말로 기억에 남는 경험을 만들 수 있습니다.
흑백의 악센트가 들어간 한 가지 색을 사용하면 작은 화면에서도 시각적 이목을 끌 수 있습니다.
듀오톤(Duotone)
듀오톤은 이미지에서 중간 톤과 하이라이트를 뽑아서 새롭게 색으로 이미지를 전환하는 방법입니다. 인쇄소에서 한때 사용되던 이 방법은 온라인에서 새롭게 태어났습니다. 듀오톤은 시각적으로 흥미로우면서도 만들기가 상당히 쉽습니다. 어도비 포토샵과 투컬러 그라데이션을 이용해서 쉽게 이 효과를 만들 수 있습니다.
듀오톤 효과는 큰 데스크탑 이미지뿐만 아니라 작은 모바일 화면에서도 제대로 역할을 할 수 있습니다.
전체 화면 용 이미지를 만드는 데 듀오톤을 사용해보세요. 명확한 하나의 대상을 담은 심플한 고화질 사진을 선택하세요. 디테일이 많은 복잡한 사진은 전달하는 바가 명확하지 않을 수도 있습니다.
사진의 무드를 반영하는 컬러를 선택합니다. 각 컬러는 서로 다른 감정을 불러일으킨다는 점을 염두에 두세요.
웹사이트를 디자인할 때 이미지에 듀오톤 효과를 주고 싶다면, 기존 이미지를 변형하지 않고도 할 수 있습니다. Colofilter.css를 활용하면 CSS 코드를 통해 이 효과를 구현할 수 있습니다.
오버레이(Overlay)
문장이 들어간 디자인을 만드는 데 컬러를 활용하는 한 가지 방법은 컬러 오버레이를 사용하는 것입니다. 이미지 혹은 비디오에 반투명 컬러 박스를 얹으면 됩니다. 머티리얼 디자인과 관련 있는 밝고 채도가 높은 색 중 하나를 이용하면 모더니즘의 감정을 불러일으킬 수 있습니다.
카드 스타일 요소, 비디오 콘텐츠 혹은 행동 유도 요소 강조에 이미지 오버레이를 사용하는 것도 고려해 보세요.
하나의 색상을 오버레이로 활용할 때는, 색상의 채도와 투명도를 생각해봐야 합니다.
색상 조합이 무거울수록 (덜투명하고 채도가 높을수록) 뒤에 있는 이미지보다는 컬러 자체에 집중하게 됩니다.
가벼운 컬러 조합은 이미지에 더 집중하게 해줍니다.
결론
컬러보다 더 재미있는 디자인 테크닉을 찾기는 어렵습니다. 컬러 효과는 드라마틱할 수도 있고, 인상적일 수도 있으며, 심지어 고요할 수도 있습니다. 컬러 효과를 사용할 때는 반드시 실험을 해 봐야 합니다.
밝고 강렬한 색상을 좋아하건 미니멀한 흑백을 좋아하건 상관없이 여러분이 반드시 기억해야 할 한 가지는 잘못된 컬러는 없으며, 가장 중요한 것은 그걸 어떻게 사용할 것이냐는 겁니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
https://www.inflearn.com/users/196290