brunch

You can make anything
by writing

- C.S.Lewis -

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

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

UX 디자인 배우기 #102

안녕하세요.  [예민한 UX 디자인/총 25시간 인강]  전민수입니다.  


지난 20년간 UI/UX 강의와 컨설팅을 하면서 수집했던 해외 자료를 저 혼자만 공유하기에 아까워 브런치를 통해 공유하고자 합니다. 많은 관심 바랍니다.




2016년 12월 16일  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 컨설턴트와 함께 UI/UX 공부해요~
클럽하우스에서 월/수 밤 9시에 만나요^^
UX 방법론/프로세스 모든 것 저한테 질의하세요~ 


<오늘 UX Book Club 프로그램 소개합니다>


<클럽하우스 UX Book Q&A Club 네이버 카페입니다.  참고로 국내/해외 UI&UX 아티클 10,000개 수집했습니다>


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

매거진 선택

키워드 선택 0 / 3 0

댓글여부

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

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

카카오계정으로 시작하기
다른 SNS로 가입하셨나요?