색상은 디자이너의 툴킷에서 가장 강력한 툴 중 하나입니다. 색상은 이목을 집중시키고 분위기를 조성하고 사용자의 감정, 인지 및 행동에 영향을 미칩니다. 웹과 모바일 앱 디자인을 보면 생기 넘치는 색상의 시대를 실감할 수 있습니다. 디자이너는 생동감 있는 색상을 사용해 중요한 요소에 시선을 집중시키고 기억에 남는 디자인을 만듭니다.

이 글에서는 웹 및 모바일 디자인에서 생동감 있는 색상을 사용하는 몇 가지 대표적인 기법을 요약해봅니다.

모노톤

생동감 있는 색상을 사용하는 가장 일반적인 방법 중 하나는 모노톤 색상 팔레트입니다. 모노톤 팔레트란 단일 색상이 여러 개의 색조와 톤으로 구성된 것입니다. 이러한 색상 팔레트는 시각적인 효과를 불러일으킵니다. 시선을 사로잡는 타이포그래피와 모노톤 색상의 배합은 인상 깊은 경험을 만들 수 있습니다.

시드니 스톡홈(Sydney Stockhom)이 단색을 사용하여 매우 간결한 방식으로 기억에 남는 룩을 만든 모습

이미지: 필로우(Pillow)

팁: 모노톤은 모바일 앱에 적합합니다. 한 가지 색상과 흑백 포인트를 이용하면 작은 화면에서 효과적으로 시각적인 흥미를 끌 수 있습니다.

스트릭스(Streaks) 앱에 사용된 색상, 아이콘 및 간결한 서체는 가독성을 높이고 흥미를 유발하는 탁월한 조합을 선보입니다.

듀오톤

이름에서 알 수 있듯이 듀오톤은 두 개의 색상으로 구성됩니다. 듀오톤은 동일한 색상의 두 가지 음영 또는 두 가지 대비 색상이 될 수 있습니다. 인쇄 영역에서 익히 사용되어 온 주요 기법이지만 온라인 영역에서 새롭게 부각되고 있습니다. 스포티파이(Spotify) 덕분에 듀오톤의 인기는 갈수록 높아지고 있습니다.

두 가지 색상의 사진은 스포티파이의 시각적 상징이 됨

감정 표현

듀오톤을 사용하면 모든 이미지에 색상 고유의 감정적인 특성을 부여할 수 있습니다. 다양한 색상은 저마다의 감정을 자아냅니다.

• 차분하면서 튀지 않는 색상의 배합은 진중한 분위기를 만듭니다. 아래 홈마처앤코(Holm Marcher & Co)의 이미지에서는 모든 디테일과 배경 이미지가 비즈니스적인 분위기를 한껏 풍기고 있습니다.

비즈니스적인 분위기를 연출하는 부드러운 듀오톤 효과. 이미지: 홈마처앤코

• 밝은 색상의 배합은 행복한 느낌을 자아냅니다. 대담한 색상 선택에 힘입어 뉴딜디자인(New Deal Design)의 메인 비주얼은 신선한 자극을 줍니다. 친근감을 주며 긍정적인 감정을 불러일으킵니다.

이미지: 뉴딜디자인(New Deal Design)

• 강렬한 이미지 하나가 수천 마디의 말을 대신합니다.

가독성 향상

듀오톤을 사용할 경우 텍스트에 강력한 대비 효과를 줄 수 있습니다. 이미지의 색상 변화가 적절히 조정되어 이미지의 거의 모든 곳에서 텍스트를 단일 색상으로 표시할 수 있습니다.

이미지: 메서드(Method)

이미지: 에볼뤼르(Evoluir)

모바일에서 효과적

또한 듀오톤 효과는 대형 데스크탑 이미지뿐만 아니라 작은 모바일 화면에서도 효과적입니다.

이미지: 오그니엔 디블랴아크(Ognjen Divljak)

팁: 히어로 이미지에 듀오톤을 적용하려면 하나의 선명한 피사체가 있는 단순한 고품질 사진을 선택하십시오. 디테일이 많은 복잡한 사진은 효과적이지 않을 수 있습니다.

그레이디언트

그레이디언트는 고대비 보색을 사용하는 UI 트렌드로 재부상했습니다. 최신 그레이디언트는 여러 색상을 포함할 수 있고, 방사형, 모서리형 또는 수평형으로 생성할 수 있습니다.

UI에서 그레이디언트를 사용하면 다음과 같은 기능을 연출합니다.

모던한 룩 발산

다시 찾아온 그레이디언트의 인기는 플랫 디자인에 새로운 입김을 불어넣고 있습니다. 단색 배합의 그레이디언트를 사용하면 모던한 느낌을 불러일으킬 수 있습니다.

머티리얼 디자인(Material Design)에 밝고 채도가 높은 색상을 사용하면 모던한 느낌을 줄 수 있습니다. 이미지 출처: 라모션(Ramotion)

콘텐츠 이해력 향상

그레이디언트는 시각적 커뮤니케이션을 향상시킬 수 있습니다. 아래 사이모드(Symodd) 이미지에서 볼 수 있듯이 주황색에서 분홍색으로의 전환은 인터페이스에 깊이와 대비감을 더해주어 이목을 사로잡는 시각 효과를 만듭니다. 밝은 곳에서 어두운 곳으로의 전환은 사람의 시선이 자연스럽게 이동하는 패턴에 따른 것으로, 페이지의 왼쪽 상단에서 오른쪽 하단으로 시선이 옮겨갑니다.

사이모드의 홈 페이지는 배경 전체가 주황색에서 분홍색으로 전환되는 그레이디언트로 되어 있습니다. 은은한 그레이디언트로, 색조 차이가 크지 않아 눈에 피로감을 주지 않습니다.

가상의 3D 효과 생성

플랫 디자인은 세련되고 보기에도 편안하지만 하나의 결점이 있다면 사실적 요소가 없다는 것입니다. 이 결점을 보완하기 위해 디자이너는 그레이디언트를 이용해 배경에 거리감을 주는 요소를 추가합니다. 디자이너가 웹 디자인에 보다 사실적인 3D 요소를 가미하고 있으므로 이 트렌드는 계속 발전할 것으로 보입니다.

이미지: 스위스아미맨(Swiss Army Man)

강조점으로 그레이디언트 사용

그레이디언트는 페이지의 배경으로 자주 사용되지만 사용자의 시선을 사로잡기 위해 세부적인 요소에도 쓰입니다. 보조 이미지 또는 특정 콘텐츠 유형에 대한 내비게이션의 강조 항목으로 그레이디언트 사용을 고려해 보십시오. 그레이디언트 영역이 작을수록 보다 자유롭게 이 기법을 시도해 볼 수 있습니다. 예를 들어 블룸버그(Bloomberg) 사이트처럼 여러 색에 대한 두 가지 색상 조합을 만들어 시각적 흥미를 유발할 수 있습니다.

블룸버그가 “최신 뉴스” 제목에 그레이디언트를 사용한 모습

오버레이

색상 간의 오버레이는 아마도 가장 말이 필요 없는 효과일 것입니다. 이 기법은 최신 디자인에서 가장 유용하면서도 일반적으로 사용되는 효과 중 하나입니다. 오버레이 기법을 디자인에 적용하려면 이미지 또는 비디오를 색이 칠해진 반투명의 상자로 가리기만 하면 됩니다.

트렌디한 룩

머티리얼 디자인에 밝고 채도가 높은 색상을 사용하면 모던한 느낌을 줄 수 있습니다.

색상 오버레이는 사진의 영향력을 강화하여 디자이너가 콘텐츠의 어조와 전달 범위를 조율할 수 있게 해줍니다. 이미지: Hype

가장 강력한 클릭 기표

인터랙티브한 카드 스타일 요소, 비디오 콘텐츠 및 CTA(콜투액션) 버튼에 이미지 오버레이를 사용해 보십시오.

카드에 호버 애니메이션을 적용한 모습. 이미지: 칼럼 파이브(Column Five)

사용자 이목 집중

오버레이 효과는 특정 디자인 요소에 사용자의 주의를 집중시키는 데 효과적입니다. 그러나 오버레이로 단일 색상을 사용할 때 해당 색상의 채도 및 투명도 정도를 고려해야 합니다.

• 장중한 색상의 조합(즉, 투명도가 낮고 채도가 높은 색상)은 색상 자체에 더 집중하게 만듭니다.

스튜디오 업(Sudio Up)은 투명도를 낮추고 채도를 높인 오버레이 색상을 사용하고 있음

• 경쾌한 색상의 배합은 이미지에 더 집중하게 만듭니다.

아웃라인즈(Outlines)가 사용한 색상 오버레이는 이미지에 더 집중하게 함. 이미지: 아웃라인즈(Outlines)

결론

색상만큼 흥미로운 실험을 할 수 있는 디자인 요소는 없습니다. 색상이 주는 효과는 극적이거나 인상적이거나 심지어 고요할 수도 있습니다. 디자이너는 색상 효과를 시도할 때 비로소 진정한 실험을 하게 됩니다. 밝고 대담한 색조를 좋아하거나 미니멀리스틱한 흑백을 선호하든지와 상관없이 한 가지 명심해야 할 것은 잘못된 색상이란 없다는 사실입니다. 중요한 것은 색상을 어떻게 사용하느냐의 문제일 뿐입니다.

원문보기

출처 : 어도비블로그(https://blogs.adobe.com/creativedialogue/ko/design-ko/playing-with-color-vibrant-options-for-apps-and-websites/)