brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Jan 31. 2017

앱과 사이트에 쓸 수 있는 강렬하고 선명한컬러

UX 디자인 배우기 #102

전민수 UX 컨설턴트 소개 

안녕하세요. 전민수 UX 컨설턴트입니다. 지난 23년간 수행했던, UX 컨설팅 경험과 강의 이력을 소개합니다. 


전민수 UX 샘의 [인프런] 인터넷 강의 안내입니다 


[클럽하우스] 전민수 UX 샘의 재능 기부 UX 공개 수업 
[UI/UX/리서치/방법론] 우리 모두 함께 공부해요~ 


클럽하우스에서 [전민수 샘의 UX 공개 수업]을 진행하고 있습니다.

매주 수요일/금요일 밤 9시-11시까지 UX/리서치/방법론 등 하루에 하나의 주제를 선정하여 깊이 있는
공개 강의를 하고 있습니다. 바로 이어서, 뒷풀이방(11시-12시)은 [UX A-Z 모든 것] 고민 상담을 하고 있으니, 혹시, 궁금하거나 고민이 있으면, 저한테 무엇이든지 물어보세요~ 가능한 제가 아는 범위에서 최대한 알려 드리겠습니다.

 
여러분 모두 화이팅!!!!!  


그리고, 아래 링크를 클릭하고, 저를 팔로우 해주시면 [공개 강의] 혹은 [비정기 강의] 열릴때마다,
여러분께 알림이 갈거에요~


UI/UX 카페 소개 (카페명: 클럽하우스 UX Book Q&A Club)
국내/해외 UI&UX 10,000개 이상 아티클 공유 및 세부 카테고리 분류

카페는 UX 자료 공유 목적으로 운영되고 있으며, 카페 가입 시 바로 승인됩니다. 




Today UX 아티클


babich.biz에 올라온 Nick Babich의 글 Vibrant Colors For Apps and Sites원저자의 허락을 받아 번역한 글입니다. 


컬러는 디자이너의 도구함에 있는 가장 강력한 도구 중 하나입니다. 컬러는 이목을 끌 수도 있고, 분위기를 만들 수도 있으며, 유저의 감정, 인식, 행동에 영향을 미치기도 합니다. 웹과 모바일 앱 디자인과 관련해서는 확실히 강렬하고 선명한 컬러(vibrant color)가 대세입니다. 디자이너는 강렬하고 선명한 컬러를 사용해서 사람들이 중요한 요소에 집중할 수 있게 만들고 디자인을 기억하기 쉽게 만듭니다.


아래는 여러분의 디자인에 강렬하고 선명한 컬러를 활용할 수 있는 몇 가지 실용적인 테크닉입니다.  


모노톤(Monotone)


선명한 색상을 사용하는 가장 인기 있는 방법 중 하나는 모노톤 컬러 팔레트를 사용하는 것입니다. 모노톤 팔레트에는 하나의 색상에 여러 색조 및 톤이 섞여 들어갑니다. 그런 컬러 팔레트는 시각적으로 자극적이며 더불어 이목을 끕니다. 눈길을 사로잡는 서체, 모노톤 컬러 스킴은 정말로 기억에 남는 경험을 만들 수 있습니다. 


Sydneystockhom은 강렬한 색상을 활용해서 매우 간단한 방식으로 기억에 남는 룩을 만들었습니다.


흑백의 악센트가 들어간 한 가지 색을 사용하면 작은 화면에서도 시각적 이목을 끌 수 있습니다. 



Streaks에서 사용한 컬러, 아이코노그래피, 단일 타입은 서로 조화를 잘 이루어 읽기 쉽고 몰입지 잘 되게 만들어졌습니다.


듀오톤(Duotone)


듀오톤은 이미지에서 중간 톤과 하이라이트를 뽑아서 새롭게 색으로 이미지를 전환하는 방법입니다. 인쇄소에서 한때 사용되던 이 방법은 온라인에서 새롭게 태어났습니다. 듀오톤은 시각적으로 흥미로우면서도 만들기가 상당히 쉽습니다. 어도비 포토샵과 투컬러 그라데이션을 이용해서 쉽게 이 효과를 만들 수 있습니다. 


부드러운 듀오톤 효과는 사무적인 분위기를 만들어냅니다. Credits:Holm Marcher & Co


듀오톤 효과는 큰 데스크탑 이미지뿐만 아니라 작은 모바일 화면에서도 제대로 역할을 할 수 있습니다.


Credits: Ognjen Divljak


전체 화면 용 이미지를 만드는 데 듀오톤을 사용해보세요. 명확한 하나의 대상을 담은 심플한 고화질 사진을 선택하세요. 디테일이 많은 복잡한 사진은 전달하는 바가 명확하지 않을 수도 있습니다.


많은 주의를 기울인 이미지 하나가 수천마디 말보다 낫습니다.Credits: Spotify


사진의 무드를 반영하는 컬러를 선택합니다. 각 컬러는 서로 다른 감정을 불러일으킨다는 점을 염두에 두세요.
웹사이트를 디자인할 때 이미지에 듀오톤 효과를 주고 싶다면, 기존 이미지를 변형하지 않고도 할 수 있습니다. Colofilter.css를 활용하면 CSS 코드를 통해 이  효과를 구현할 수 있습니다.


오버레이(Overlay)


문장이 들어간 디자인을 만드는 데 컬러를 활용하는 한 가지 방법은 컬러 오버레이를 사용하는 것입니다. 이미지 혹은 비디오에 반투명 컬러 박스를 얹으면 됩니다. 머티리얼 디자인과 관련 있는 밝고 채도가 높은 색 중 하나를 이용하면 모더니즘의 감정을 불러일으킬 수 있습니다.



컬러 오버레이는 사진의 효과를 강화해주며 디자이너가 설명의 톤을 수정할 수 있게 해줍니다. Credits: Hype


카드 스타일 요소, 비디오 콘텐츠 혹은 행동 유도 요소 강조에 이미지 오버레이를 사용하는 것도 고려해 보세요. 


호버 애니메이션 효과를 카드 위에 얹을 수도 있습니다. Credits:Column Five


하나의 색상을 오버레이로 활용할 때는, 색상의 채도와 투명도를 생각해봐야 합니다.


색상 조합이 무거울수록 (덜투명하고 채도가 높을수록) 뒤에 있는 이미지보다는 컬러 자체에 집중하게 됩니다. 
가벼운 컬러 조합은 이미지에 더 집중하게 해줍니다.


결론


컬러보다 더 재미있는 디자인 테크닉을 찾기는 어렵습니다. 컬러 효과는 드라마틱할 수도 있고, 인상적일 수도 있으며, 심지어 고요할 수도 있습니다. 컬러 효과를 사용할 때는 반드시 실험을 해 봐야 합니다. 


밝고 강렬한 색상을 좋아하건 미니멀한 흑백을 좋아하건 상관없이 여러분이 반드시 기억해야 할 한 가지는 잘못된 컬러는 없으며, 가장 중요한 것은 그걸 어떻게 사용할 것이냐는 겁니다.



매거진의 이전글 이미지 제공 UX 원칙 5가지

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면