[UX] 구글 머티리얼 디자인 – 3.5.머티리얼 기초(Material foundation) – 색상(Color): 색상 사용법(Color usage)
색상은 계층 구조를 표현, 브랜드를 수립하거나, 특정한 의미를 부여하거나 개별 요소(Element)의 상태를 나타내는데 사용될 수 있습니다.
출처: 원문보기
1. 계층 구조 (Hierarchy)
머티리얼 디자인에서 색상은 화면 상에 특정 개별 요소(Element)에 시선을 집중하게 할 수 있습니다. 개별 요소의 색상 대비가 주변의 요소들에 비해 부각될 때, 해당 개별요소는 도드라지게 표현됩니다. 이를 통해 사용자는 해당 개별 요소가 중요하다는 것을 알게 됩니다.
색상 테마는 무겁거나 가벼운 색상(bold and bright)으로 구성되거나 단색이나 채도가 낮은 색상(monochromatic or muted) 등과 같이 다양하게 구성될 수 있기 때문에 어떤 개별 요소가 더 중요한지를 나타내는 방법은 매우 다양할 수 있습니다.
예를 들어, 검정색 아이콘은 흰색 배경에서 표현될 때 더욱 부각되어 보입니다. 다양한 색상으로 표현된 카드(Cards)는 단색(Monochromatic color)으로 표현된 요소들 주변에서 시선이 더욱 집중되는 효과를 낼 수 있습니다.
설명에서 이야기하는 단색이라는 것은 주로 흰색과 검정으로 색상 테마가 구성되는 것을 의미하며, 채도가 낮은 색상(Muted)은 파스텔 톤과 같이 색상 표현이 약한 색상들을 의미합니다. 채도가 낮은 색상의 반대되는 채도가 높은 색상(Vivid)으로 이해하면 됩니다. (다른 색이 섞이지 않은 원색에 가까운 색을 채도가 높은 색상이라고 이해하면 되겠습니다.)
1.1. 표면 색상 대비 (Surface contrast)
중요한 이벤트에 시선을 집중시키기려면 요소들 사이에 더 강렬한 색상 대비를 사용해야 합니다.
위 그림에서 보라색을 배경색으로 하는 앱에서 흰색 표면은 높은 색상 대비를 갖습니다. 이 여행 앱의 핵심 항목인 리스트 항목(List item) 선택을 사용자에게 강조하고 행위를 유도하는 효과를 색상으로 나타낼 수 있습니다.
1.2. 색상과 모양 (Color and shape)
시각적인 강조는 개별 요소(Element)의 색상과 모양을 동시에 변경하여 표현할 수 있습니다. 이러한 방식으로 강조를 하는 것은 무엇인가 선택이 되었거나 즉각적인 사용자의 관심을 집중시킬 때 사용할 수 있습니다.
위 그림에서 개별 요소인 칩(Chips)는 선택이 됨과 동시에 사각형의 모서리가 둥글게 변형되며, 선택된 상태를 나타내는 아이콘과 함께 별도의 색상 변화를 유도하여 사용자에게 선택된 항목에 대한 이목을 집중시킵니다.
1.3. 색상 제한 (Limiting color)
앱에서 색상 사용을 제한하면, 텍스트, 이미지, 버튼과 같은 개별 요소에 색상을 통한 이목을 더욱 집중시킬 수 있습니다. 왜냐하면 앱에서 표현하는 콘텐츠는 여러 색상으로 표현되고 있고, 검정색 FAB(Floating action button)은 주변의 밝은 색상과 대비를 이루어 그것들을 더욱 시각적으로 부각시킵니다.
위 그림에서 흰색으로 앱 바(App bar)나 배경색을 제한하면 그 외의 카드(Cards)에 출력되는 콘텐츠나 검정색으로 표현된 FAB는 더욱 부각된다는 것을 설명하는 내용입니다.
회색조(Grayscale color) 색상 팔레트는 사진(Photography)과 글자(Text)를 부각 시키기에 최고의 선택이 될 수 있습니다.
사진을 메인 콘텐츠로 하는 앱이라면 이러한 색상 팔레트를 선택하는 것에 대한 신중한 검토가 필요하다는 것을 의미합니다. 실무에서 이러한 앱들은 오히려 사진과 함께 더욱 화려해야 한다는 생각에서 화려한 색상들을 사용하는 것을 흔히 볼 수 있습니다.
이는 화려한 색상이 오히려 메인 콘텐츠가 부각되는 것을 저해하는 효과를 나타낼 수 있기 때문에 잘못된 색상 선택이 될 수 있다는 것을 이야기하고 있는 것입니다.
2. 브랜드 (Brand)
브랜드는 그 자체를 강조하기 위해 색상을 사용할 수 있습니다. 브랜드 색상은 색상이 특정한 행동과 정보와 연관이 있는 특정한 상황에서 사용될 수 있습니다.
브랜드 색상의 적용은 강렬하거나 요란하거나, 미미하거나 복잡하거나, 어떤 형태로든 표현될 수 있습니다. 색상에 대한 브랜드의 특성 접근은 앱에 반영되어야 합니다.
브랜드라는 개념이 다소 생소할 수 있는데, 아래 예시에서 이야기하는 OWL(부엉이)와 BASIL(바질, 허브의 일종) 사례는 이것을 모태로 하는 대상을 브랜드(앱의 이름)으로 사용한 것을 나타냅니다. 브랜드를 표현하기 위한 색상 자체를 부엉이의 경우 노란 눈동자를 상징으로 하여 메인색상을 사용하고 있고, 바질에서도 허브의 색상인 초록색을 메인색상으로 사용한 것을 볼 수 있습니다.
반드시 브랜드를 연상할 수 있는 색상을 앱의 색상 테마로 사용해야 되는 것은 아니지만 이를 잘 활용한다면 브랜드를 무의식적으로 각인시킬 수 있기 때문에 이에 대한 언급을 하고 있는 것입니다.
아주 쉬운 예로 앱의 아이콘(Product icon)에 사용되는 색상은 사용자가 해당 앱의 이름은 기억하지 못해도 색상을 통해 해당 앱을 연상하는데 매우 효과적인 역할을 할 수 있습니다. 카카오톡이라는 이름은 기억하지 못해도 노란색 아이콘을 색상으로 하고 있다는 것은 쉽게 기억할 수 있듯이 말입니다.
2.1. 강렬한 색상의 사용 (Bold use of color)
역동적이고 에너지가 넘치는 브랜드를 표현하고자 한다면 강렬한 색상에 대한 사용을 검토해볼 수 있습니다. 앱은 같은 방법으로 콘텐츠의 가독성과 전반적인 사용성을 유지한 상태에서 강렬한 색상이 반영될 수 있어야 합니다.
위 그림에서 교육용 앱인 OWL은 강렬하고, 채도가 높은 브랜드 색상(Yellow, blue, magenta)을 사용하였습니다. 이를 통해 브랜드가 지향하고자 하는 바를 잘 표현하였습니다.
위 그림에서 요리용 앱인 Basil은 색상과 글자(Typography)를 통해서 가독성과 사용성을 살리면서도 브랜드를 색상으로 잘 표현하고 있습니다.
2.1.1. 초기 화면 (Launch screen)
앱의 시작과 함께 실행되는 초기 화면(Launch screen 또는 Splash)은 강렬한 방식의 색상을 적용해 볼 수 있습니다.
2.1.2. Onboarding
Onboarding이란 특정 개별 요소 위에서 출력되는 별도의 색상 표현을 의미합니다. 대표적으로 리스트의 항목이 선택되면 선택된 상태를 색상으로 표현할 수 있는데, 이를 해당 항목 위에 별도의 색상을 표현함으로써 상태를 나타낼 수 있습니다. 이를 Onboarding이라는 개념으로 표현합니다.
색상은 특정 개별 요소 위에서 콘텐츠와 브랜드를 연결시켜줄 수 있습니다. 즉, Onboarding 상황에서 브랜드 색상을 사용한다는 의미입니다.
위 그림에서 해당 앱의 브랜드 색상은 보라색이고, 각 항목들이 선택됨과 동시에 보라색으로 그 위에 색상을 표현한 것을 볼 수 있습니다.
2.1.3. 새로운 기능 (Feature discovery)
사용자가 앱을 사용하다가 새로운 기능(Feature)에 맞닥뜨리게 될 때, 해당 기능에 색상을 사용하여 사용자의 관심을 집중시킬 수 있습니다.
위 그림에서 검색 기능을 사용자가 처음으로 선택하면 이에 대한 표현을 색상으로 하면서 사용자에게 해당 기능에 대한 안내를 별도로 할 수 있다는 것을 나타내는 것입니다.
흔히 앱에서 어려운 기능을 내제하는 경우 별도의 튜토리얼 페이지를 두는 경우가 많지만 제품에 포함된 매뉴얼을 사용자가 확인하는 비율이 현저히 낮다는 것은 이미 많은 실험에서 증명된 바가 있습니다.
색상을 통해서 새로운 기능에 대해 간단히 안내하는 것만큼 효과적인 방법이 없을지도 모르니 잘 참고하기 바랍니다.
2.2. 미미한 색상의 사용 (Subtle use of color)
특정 앱은 색상을 매우 미미하고, 보수적으로 사용하여 색상 표현을 자제하는 것을 볼 수 있습니다.
브랜드 색상은 색상 사용을 자제하여 세련된 표현을 하거나 특정 콘텐츠를 강조하거나 적절한 콘텐츠를 위해 다양한 방법으로 보수적 표현을 할 수 있습니다. 색상을 보수적으로 사용하더라도 사용자와 상호작용을 하는 영역이나 상태 변화를 위한 색상 표현은 충분히 구분되고, 눈에 띌 수 있어야 합니다.
즉, 색상 표현을 자제하면서 색상을 적용하더라도 사용자가 선택을 하거나 입력을 하는 등의 행위가 필요한 영역이라던지 특정 상태가 변할 수 있는 것에 대한 색상 표현은 충분히 눈에 띌만한 가독성 표현을 색상으로 해야 한다는 뜻입니다.
위 그림에서 왼쪽 이미지는 금융앱의 그래프 내 데이터와 같이 제한된 정보 표현을 위해서 색상을 매우 적게 사용하고 있습니다. 이러한 방법으로 색상을 사용하는 것은 정보를 브랜드 색상을 연상시키기 위한 방법입니다. 이 방법은 색상을 적게 사용하여 해당 색상을 각인시키기에 더 좋은 효과를 가질 수 있는 것입니다.
위 그림에서 오른쪽 이미지는 뉴스앱의 보조색상(보라색)을 제한적으로 사용한 것을 나타냅니다. 마찬가지로 이렇게 함으로써 앱 내에서 색상 사용이 더욱 부각될 수 있습니다. 이런 방식의 표현은 페이지 내에서 콘텐츠 영역이 가장 중요하다는 것을 나타낼 수 있습니다. 여기서의 콘텐츠 영역이란 주로 본문 영역을 의미하며, 글자나 이미지가 출력되는 영역이라고 이해하면 됩니다.
브랜드가 색상으로 표현될 때, Placeholder UI, Progress indicator, state change가 적용되는 과정과 같이 일시적인 상황에서 브랜드 색상 사용할 수 있습니다.
2.2.1. Placeholder UI
Placeholder UI는 화면의 콘텐츠가 로딩되는 동안에 출력됩니다. 브랜드 색상을 포함해 Placeholder UI는 사용자에게 앱이 콘텐츠를 로딩중이라는 것을 안내할 수 있습니다.
아래 이미지 리스트에서 이미지가 로딩되기 전에 그리드 영역을 표현하는 과정에서 기본 이미지를 사용하기도 하지만 그리드 영역에 색상을 출력하는 방식을 사용할 수도 있습니다. 이 경우 일정한 모션을 함께 사용하여 해당 영역이 현재 로딩중이라는 것을 안내할 수 있어야 합니다.
2.2.2. Progress indicators
Progress indicators는 진행 중인 상태를 출력하는 UI로 사용됩니다. 대표적으로 동기화나 파일 등을 다운로드 하는 과정에서 사용되는 UI를 Progress indicators라 합니다.
Progress indicators에 사용되는 색상은 절제되어 사용되지만 앱의 특정 기능과 브랜드를 연결하면서 사용자가 브랜드 색상을 연상하기에 충분히 강력할 수 있습니다.
2.2.3. State changes
상태 변화(State changes)에 사용되는 색상 역시 미미하지만 브랜드 색상을 연상시킬 수 있습니다. 아래 이미지와 같이 리스트의 특정 항목이 선택된 상태 변화를 표현할 때, 브랜드 색상이 사용되는 것을 볼 수 있습니다.
3. 색상이 갖는 의미 (Meaning)
색상은 서로 다른 UI 개별 요소(Element)의 의미를 표현할 수 있습니다. 예를 들어, 날씨 앱은 색상을 통해 현재 날씨 상태를 나타낼 수 있을 것입니다. 또한 내비게이션 앱은 색상으로 교통체증 상황을 표시할 수도 있을 것입니다.
위 그림에서 왼쪽 이미지는 태양이 뜬 맑은 날씨는 주황색을 사용하였고, 구름이 낀 날씨에는 회색, 비가 오는 날씨에는 물과 관련된 파란색을 사용한 것을 볼 수 있습니다.
위 그림에서 오른쪽 이미지는 교통체증 구간과 교통상황이 양호한 구간을 각각 붉은색과 초록색으로 표시하는 것 등이 색상이 갖고 있는 의미를 살리는 것으로 볼 수 있습니다.
3.1. 일관된 색상 사용과 적절한 맥락 (Consistency and context)
색상은 제품 내에서 색상이 사용되는 상황이나 맥락이 달라진다 하더라도 특정한 색상이 늘 같은 의미를 갖도록 일관된 표현을 해야 합니다.
예를 들어, 붉은색을 사용한 앱이 있다고 했을 때, 이 붉은색을 온도를 표현하는데 사용하다가 위험한 상태 등을 표현하는 경고의 의미와 같이 여러가지 다른 의미로 사용하지 않도록 하라는 의미입니다.
색상에 대한 의미는 지역이나 문화적인 특성에 따라서도 달라질 수 있는데, 이러한 것을 함께 고려해야 합니다. 예를 들어, 경고를 나타내는 상황에서 특정 문화권은 이를 붉은색으로 인식하지만 특정 문화권에서는 이를 다르게 해석하기도 합니다.
대표적으로 다른 부분이 주식이나 환율 등의 가치의 변동을 나타낼 때, 서구권에서는 가치가 상승하는 것의 의미로 초록색이 사용되고, 가치가 하락하는 것의 의미로 붉은색을 사용합니다. 하지만 한국은 가치가 상승하는 것을 붉은색으로 표현하고, 가치가 하락하는 것을 파란색으로 표현하는 것이 있을 수 있습니다.
위 그림에서 보라색 배경에 붉은색으로 표현된 날짜 선택은 메인색상을 사용하는 브랜드 색상과의 연관성을 높이기 위한 방식의 색상 표현입니다.
위 그림에서 왼쪽 이미지는 이전에도 설명한 내용이지만 브랜드 색상이 붉은색이라면 경고 상태를 안내하기 위해 같은 색상인 붉은색을 사용하지 말라는 것을 예시로 든 것입니다. 오른쪽 이미지는 이를 표현하기 위한 대체 색상(주황색)을 선택하여 표현한 것을 나타내고 있습니다.
4. 상태를 표현하기 위한 색상 (State)
색상은 앱의 구성요소(Component), 개별요소(Element)를 통해 앱의 상태 관련 정보를 표현할 수 있습니다. 이러한 상태는 다음과 같을 수 있습니다.
- 현재 상태(Current state): 버튼이 활성화된 상태, 비활성화된 상태와 같은 구성요소(Component)와 개별요소(Element)의 현재 상태
- 상태 변화(Changes in state): 앱, 구성요소(Component), 개별요소(Element)의 상태 변화
상태 변화가 있을 때, 색상은 이를 눈에 띌 수 있도록 합니다. 너무 미미한 색상의 변화는 사용자가 이를 눈치채지 못할 수도 있습니다. 상태 변화를 색상으로 표현하는 가장 좋은 방법은 아이콘을 표시하거나 개별요소의 위치를 변경하는 등 하나 이상의 방법과 함께 사용하는 것입니다.
예를 들어, 리스트에서 특정 항목을 Long press and hold 제스쳐로 선택하면 체크 박스가 생기고 항목의 위치가 변경되면서 색상이 적용되는 사례가 여기에 해당된다고 볼 수 있을 것입니다.
4.1. 상호작용 나타내기 (Indicating interaction)
특정한 상호작용을 강조하기 위해 콘텐츠 위에서 강한 색상 대비를 사용하여 사용자가 해당 요소와 상호작용할 수 있는 것과 할 수 없는 것을 구분할 수 있어야 합니다.
위 그림에서 이미지를 사용자가 Long press and hold 제스쳐로 선택할 경우 사진이 선택된 것을 색상으로 표현할 수 있습니다. 이를 통해 사용자는 이미지를 복사할 수 있는 요소라는 것을 인식할 수 있을 것입니다.
4.2. 선택 항목 나타내기 (Indicating selection)
선택된 개별요소(Element)를 강조하기 위해 강한 색상 대비를 개별 요소에 사용할 수 있습니다.
위 그림에서 이메일 리스트 중에 선택된 메일을 모서리 형태의 변화와 함께 색상을 표현한 것을 볼 수 있습니다. 이 사례는 위에서 설명한 하나 이상의 표현 방식을 통해 상태 변화를 표시하는 방법의 좋은 예로 볼 수 있습니다.
5. 마무리
색상이 갖는 의미(Meaning)와 색상을 사용하는 맥락(Context)은 다양할 수 있습니다. 단순히 색상은 구성요소(Component)나 개별요소(Element)를 미적으로 표현하는 것을 넘어서 사용자와의 상호작용을 하기 위한 수단으로 사용될 수 있다는 것을 유념해야 합니다.
이에 대한 이해없이 단순히 미적인 관점에서 색상을 사용하다보면 위의 설명과 같이 의도하지 않게 색상이 사용자에게 잘못된 의미 전달을 할 수도 있을 것입니다.
또한 색상을 통한 표현은 색상 뿐만 아니라 모양 또는 형태(Shape) 변화, 위치 등의 변화를 함께 사용할수록 색상을 통해 사용자에게 전달하고자 하는 효과가 배가됨을 이해하기 바랍니다.
다음 내용은 글자(Text)에 색상을 표현하여 글자의 가독성(Text legibility)을 높이는 방법에 대해서 설명하겠습니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기