brunch

You can make anything
by writing

C.S.Lewis

by 김준범 Feb 07. 2017

[번역] 모바일 앱 디자인에서 색상의 중요성

이 글은 Smashing Magazine에 Nick Babich가 기고한 The Underestimated Power Of Color In Mobile App Design을 번역한 글입니다. 단색, 유사색, 보색 대비와 같은 기본적인 색상조합에 대한 이야기와 대비의 개념에 대한 내용이 정리되어 있습니다. 디자이너가 입장에서는 다소 기본적인 내용일 수 있을 것 같은데요, 기본적인 이론들을 모두 알고는 있지만 앱디자인을 할 때 의식적으로 생각을 하지는 못하는 것 같습니다. 색상 조합이나 대비 등은 몸에 베어있는 지식들이라 무의식적으로 그렇게 하고 있으면서도 왜 그렇게 했는지 본인도 잘 설명을 하지 못하기도 하죠. 아래 글을 읽어보시면 기본 이론도 정리가 되고, 본인의 디자인에 대해서도 색상에 대해 놓친 부분이 없는지 한번 돌아볼 수 있는 기회가 될 것 같습니다.

The Underestimated Power Of Color In Mobile App Design

색상은 앱 디자인에 있어서 기능성 다음으로 중요한 요소이다. HCI는 GUI와 상호작용하는데 주요 기반을 두고 있고, 색상은 이 인터렉션에서 매우 중요한 역할을 한다. 색상은 앱의 콘텐츠를 보고 해석하고, 올바른 요소와 인터렉션 하고, 동작을 이해할 수 있도록 해준다. 모든 앱은 컬러스킴을 가지고 있고, 주요 부분에 메인 색상을 적용하고 있다.

새로운 앱을 디자인할 때, 적용 가능한 색상 조합은 무한하기 때문에 잘 동작하는 컬러스킴이 무엇일지 결정하기가 쉽지 않다. 이 아티클에서는, 앱에 적용되는 컬러를 선정하는데 가장 중요한 사항들을 살펴볼 것이다. 그리고 전통적인 컬러스킴 패턴(monochrome:단색, analogous:유사색, complementary:보색) 및 어떤 패턴에도 포함되지 않는 사용자 조합을 모두 포함하여 알아볼 것이다. 또한 사용성에 도움을 주는 색상과 대비를 어떻게 고르는 지도 알아볼 것이다. 당신만의 컬러 사용에 대한 스킬을 연마하고 싶다면, Adobe XD를 사용해 보길 바란다.

How To Select An Effective Color Scheme (효과적인 컬러 스킴을 고르는 방법)

아래의 색상환에서 어떻게 아래에서 2-3가지 색상을 고를까?

12색상환은 컬러스킴을 정의하는데 필요한 중요한 도구이다

초보자는 표준 컬러스킴을 이용하여 새로운 컬러스킴을 쉽게 만들 수 있다.

MONOCHROMATIC(단색)

Monochromatic 스킴은 색상들을 동일한 기본 색으로부터 만들기 때문에 가장 만들기 간단한 컬러스킴이다. Monochromatic 색상은 서로 잘 어울리며, 안정감을 주는 효과가 있다.

Monochromatic 색상은 한가지 색에서 tint, shade, tone을 달리하여 구성된다.

Monochromatic 스킴은 눈에 아주 편한 느낌을 주며, 특히 blue나 green 색상이 가장 편한 느낌을 준다.

Image credit: Adobe Color CC.

ANALOGOUS(유사색)

유사색 컬러스킴은 서로 이질적이지 않은 유사한 색상으로부터 만든다. 한 가지 색상이 대표색으로 사용되면서 다른 색들이 컬러스킴을 풍부하게 만들어 준다.

Analogous 컬러스킴은 12색상환에서 인접한 세가지 색상으로 구성된다.

이 컬러스킴이 비교적 만들기가 쉽지만, 색이 진해 지거나 옅어질 때 어떤 방향으로 변화를 줄 것인지를 잘 선택해야 한다. 예를 들면, 제스처 기반 to-do 앱인 Clear 앱은 시각적으로 현재 task 셋에서 중요한 task들을 시각적으로 나타내고 있다.

Image credit: Adobe Color CC.

Clear의 기본 컬러스킴은 뜨거운 부분을 강한 red로 표현하는 열지도를 연상시킨다.

반면 Calm이라는 명상 앱은, 사용자에게 편안하고 평화로운 느낌을 주기 위해 blue와 green의 유사색을 사용한다.

Image credit: Adobe Color CC.

Calm은 전체적인 분위기를 위해 유사색을 사용한다.

COMPLEMETARY (보색)

보색은 서로 반대가 되는 색이다.

보색은 색상환에서 서로 반대 위치에 있는 색상이다.

보색들은 서로 강하게 대비를 이루며, 보는 사람의 주의를 끌기 위해 사용된다. 보색을 사용할 때는, 강한 대비를 위해 눈에 띄는 색상과 그 색상에 대비를 이루는 색상을 사용하는 것이 좋다. 예를 들면, 사람의 눈이 green으로 가득 찬 사물을 볼 때, 약간의 red는 아주 눈에 잘 띄어 보인다.

보색을 사용하는 것은 무언가를 돋보이게 하기 위해 보색을 사용한다.

CUSTOM COLOR SCHEME

자신만의 컬러스킴을 만드는 것은 생각보다 어렵지 않다. 쉬운 방법 중 하나는, 무채색으로 이루어진 팔레트에 밝은 엑센트 색상을 추가하는 것이다. 시각적으로 도드라져 보이게 할 수 있는 방법이다.

그레이 스케일에 색상을 추가하는 것은 쉽고 효과적으로 시선을 이끌게 해준다. Image credit: Adobe Color CC.

Dropbox 컬러스킴은 White 캔버스에 cool grey, blue 엑센트 색상을 적용했다.

Image credit: Dropbox

ADOBE COLOR CC

ADOBE COLOR CC를 이용해 컬러스킴을 훨씬 편하게 만들 수 있다. 기존에 Kuler로 많이 알려진 Adobe Color CC는, 컬러 선택을 매우 쉽게 만들어 준다. 간단한 클릭으로 기본 색상으로부터 팔레트의 모든 색상을 각각 편집할 수 있다.

각각의 색상에서 컬러값을 추출할 수 있다.

팔레트를 저장할 수 있고, 라이브러리에 바로 추가할 수도 있다. 그리고 다른 사람들이 만든 훌륭한 컬러스킴들도 사용해볼 수 있다.

Adobe CC를 활용해서 맨바닥에서 시작하지 않길 바란다.

The Impact Of Color Contrast (색상 대비의 효과)

일반적으로, UI에서 색상이 적용된 오브젝트나 영역은 독립적으로 존재하지 않고 다른 색상이 적용된 오브젝트나 영역에 근접하거나 겹쳐서 나타남으로써 대비 효과를 만들어 낸다. 대비는 한 색상이 다른 색상으로부터 분리되어 보이는 정도를 의미한다. 적절히 적용되면 눈의 피로도를 줄여주며, 요소들을 명확히 구분해줌으로써 사용자의 주의를 집중시켜준다.

색상이 서로 쉽게 구분되어 보일 때 대비가 강하다고 말하며, 그렇지 않을 때에는 대비가 약하다고 말한다.

CONTRAST AND TEXT READABILITY (대비와 가독성)

디자인의 사용성에서 색상 대비는 중요한 부분을 차지한다. 대비가 약한 색상들을 사용하면 디자인이 아름답고 조화롭게 보이기 때문에 디자이너는 약한 대비를 선호하기도 한다. 그러나 아름다운 것이 가독성을 위해 항상 좋은 것은 아니다. 텍스트에 색상을 적용할 때, 배경과 대비가 약한 색상을 적용한다면, 읽기가 매우 힘들어질 것이다. 특히 모바일 디바이스는 사용자가 화면 반사를 일으키는 밝은 야외에서 사용하는 경우가 많기 때문에 그러한 경우가 더 많다.

배경색 위에서 읽기 어려운 텍스트

요소들 사이에 충분한 대비를 가지도록 해야 한다. 어려운 일은 아니다. 대비율(Contrast ratio)만 체크하면 된다. 대비율은 한 색상이 다른 색상에 비해 얼마나 다른지를 나타내는 지표이다(보통 1:1 또는 21:1로 표기됨). 두 숫자들의 차이가 클수록, 두 색상의 선명도 차이가 상대적으로 커진다. W3C는 본문과 이미지 텍스트에서 아래의 대비율을 권장한다.

작은 텍스트는 배경 대비 4.5:1의 대비율이 있어야 한다.

큰 텍스트는(bold 14pt / regular 18pt 이상) 배경 대비 3:1의 대비율이 있어야 한다.

이 가이드라인은 시력이 좋지 않거나 색맹인 사용자, 시야가 좋지 않은 상황에서 스크린에서 텍스트를 보고 읽을 수 있도록 해준다.

대비율 지표를 따른 텍스트는 읽기가 쉽다.

당신의 팔레트에서 어느 정도의 대비를 적용해야 할지에 관하여 의미 있는 피드백을 줄 수 있는 유용한 툴들이 많다. WebAIM’s Color Contrast Checker에서 선택한 색상에 대해 색상 대비를 테스트할 수 있다.

CONTRAST AND USER’S ATTENTION (대비와 사용자 주의)

가독성이 좋은 텍스트를 적용하는 것 외에도, 대비는 화면의 특정 요소에 대해 사용자의 주의를 끌게 해줄 수 있다. 일반적으로, 중요한 콘텐츠나 주요 요소를 강조하는데 강한 대비를 사용한다. 사용자가 어떤 것을 보거나 클릭하게 하고 싶다면, 눈에 띄게 만들어라! 예를 들면, call to action 버튼에 대비를 강하게 적용한다면 사용자가 더욱 많이 클릭하게 될 것이다.

대비는 스크린의 다른 영역에 비해 해당 영역을 다르게 보이게 해준다.

Designing For Color Blindness (색맹을 위한 디자인)

당신의 앱이 시각적으로 장애가 있는 사람에게 사용되는 것을 고려해 보있는지? 사람들이 색맹에 관해 이야기할 때, 보통 특정 색상을 인식하는데 문제가 있는 것을 말하곤 한다. Red와 Green이 주로 문제가 있는 색상들이다.

정상 시력에 보이는 색상과 적녹색맹에게 보이는 색상

색맹에도 여러 가지가 있기 때문에(적녹, 흑황, 흑백), 앱의 주요 상태를 보여주는 데 있어 다수의 시각적 단서를 제공하는 것이 중요하다. 시스템의 상태를 보여주기 위해 색상에만 의존 하지 말라. 액션과 콘텐츠를 나타내기 위해 선, 인디케이터, 텍스쳐 또는 텍스트를 같이 사용하라.

또한, Photoshop으로 색맹에게 색상이 어떻게 보이는지 테스트를 할 수 있다. 디자이너는 이 기능으로 여러 종류의 색맹에게 앱의 화면이 어떻게 보일지 확인할 수 있다.