brunch

매거진 UX 디자인의 모든 것

라이킷 192 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

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

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

UX 디자인 배우기 #102

Today UX 아티클

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

Vibrant Colors For Apps and Sites

Color is one of the most powerful tools in the designer’s toolkit. Color can draw attention, set a mood, influence users’ emotions, perceptions and actions. When it comes to web & mobile app design, this is definitely the time of vibrant colors. Designers use vibrant colors to make people

babich.biz

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

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

모노톤(Monotone)

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

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

팁

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

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

듀오톤(Duotone)

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

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

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

Credits: Ognjen Divljak

팁

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

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

사진의 무드를 반영하는 컬러를 선택합니다. 각 컬러는 서로 다른 감정을 불러일으킨다는 점을 염두에 두세요.

웹사이트를 디자인할 때 이미지에 듀오톤 효과를 주고 싶다면, 기존 이미지를 변형하지 않고도 할 수 있습니다. Colofilter.css를 활용하면 CSS 코드를 통해 이 효과를 구현할 수 있습니다.

오버레이(Overlay)

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