[UX] 구글 머티리얼 디자인 – 3.5.머티리얼 기초(Material foundation) – 색상(Color): UI 색상 적용하기(Applying color to UI)
앱의 메인색상과 보조색상 등을 선택하고 나면 해당 색상을 앱 내 UI에 어떻게 적용할지를 결정해야 합니다. 본 포스팅은 색상을 앱 내 각 UI에 어떻게 적용할 수 있는지를 설명할 것입니다.
출처: 원문보기
1. 사용법 (Usage)
해당 가이드라인은 색상 선택 및 적용에 주의해야하는 UI 구성요소(Component)와 개별요소(Element)에 대해서 설명합니다.
1.1. 원칙 (Principles)
- Consistent(일관적인): 색상은 앱(브랜드)에서 표현하고자 하는 것을 UI 전반에서 일관성 있게 적용되어야 합니다. 예를 들어, 당근을 테마로 한 앱이 있다고 했을 때, 당근을 사용하는 텍스트, 아이콘 등은 앱 전반에서 주황색으로 일관되게 표현해야 한다는 것입니다.
- Distinct(구분가능한): 색상은 개별요소들 사이에서 충분한 색상 대비를 통해서 서로 구분되어야 합니다. 예를 들어, 사진위에 글자를 출력한다고 했을 때, 글자의 색상과 배경이 되는 사진의 색상은 충분히 대비되는 색상을 표현해야 한다는 것입니다.
- Intentional(의도적인): 색상의 사용은 의도적이어야 합니다. 예를 들어, 계층 구조를 갖는 UI 요소들은 유사한 색상 등을 사용하여 해당 요소들이 연관관계에 있다는 의도를 나타낼 수 있어야 한다는 것입니다.
2. 상단, 하단 앱 바 (Top and bottom app bars)
상단 앱 바(Top app bar)와 하단 앱 바(Bottom app bar)에 표현되는 색상은 사용자들에게 앱 바 주변에 위치한 개별요소(Element)와 관계를 인지하고 이해할 수 있도록 해야 합니다. 다시 말해, 상단 앱 바와 하단 앱 바는 다른 주변 요소와 색상으로 구분되어야 한다는 뜻입니다.
2.1. 앱 바 정의하기 (Identifying app bars)
물론 여기서 앱 바를 정의한다는 것은 색상을 어떤 방식으로 앱 바에 적용할지에 대한 설명을 의미합니다.
상단 앱 바와 하단 앱 바는 앱의 메인색상(Primary color)를 사용합니다. 시스템 바(System bar)는 메인색상보다 밝거나 어두운 변형색상을 사용하여 앱 바 영역과 구분하도록 합니다.
위 그림에서 메인색상(Primary color)은 보라(Purple 500)이고, 이것이 앱 바에 사용된 색상입니다. 시스템 바에는 어두운 변형색상(Variant)인 보라(Purple 700)이 사용되었습니다.
앱 바(App bar)와 다른 표면 사이의 차이를 강조하기 위해, 앱 바에 인접한 FAB(Floating action button)와 같이 인접한 구성요소(Component)에 보조색상(Secondary color)을 사용하도록 합니다.
위 그림에서 메인색상(Primary color)은 파랑(Blue 700)이 사용되었고, 이 색상이 하단 앱 바에 사용되었습니다. 보조색상(Secondary color)은 오렌지(Orange 500)이 사용되었고, Floating action button(FAB)에 적용된 것을 볼 수 있습니다. 참고로 시스템 바에는 해당 변형색상값을 위 그림에서 표기하고 있지만 메인색상보다 밝은 색상을 적용한 것을 볼 수 있습니다.
위 그림에서 하단 앱 바(Bottom app bar)와 Floating action button(FAB)가 같은 색상이 사용되었습니다. 해당 사례는 권장하고 있지 않지만 부득이하게 위와 같이 적용을 하는 상황이라면 앱 바와 FAB 두 구성요소(Component) 사이에 충분한 식별이 가능하도록 그림자(Shadow)나 기타 대안이 될 수 있는 요소를 사용하라고 강조하고 있습니다.
2.2. 앱 바와 배경을 혼합하여 사용하기 (Blending an app bar with background)
상단 앱 바 또는 하단 앱 바에 적용된 색상과 배경색상이 같을 때, 이 색상들은 함께 혼합하여 앱의 구조보다는 사용자에게 콘텐츠에 집중할 수 있도록 할 수 있습니다.
원칙적으로 앱 바는 콘텐츠 영역과 구조적으로 구분되어야 하지만 콘텐츠에 더 집중하도록 하기 위해서 앱 바와 배경색을 구분하지 않을 수 있다는 것입니다.
위 그림에서 상단 앱 바와 배경색은 메인색상(Fortnightly White, #FFFFFF)이 적용되었습니다. 단, 스크롤이 발생하면 상단 앱 바는 앱 바가 스크롤되는 콘텐츠 영역보다 더 높은 위치에 위치하고 있다는 것을 나타내기 위해 그림자를 표시하기 시작합니다.
미묘한 차이로 볼 수 있지만 많은 앱 들에서 앱 바와 배경색을 같은 색상으로 사용하지만 높이값(Elevation)이 적용하지 않는 사례를 많이 볼 수 있는데, 머티리얼은 이런 사례를 염두에 두고 해당 내용을 가이드하고 있는 것입니다.
위 그림에서 상단 앱 바(App bars)와 하단 내비게이션(Bottom navigation), 배경색이 파랑(Blue 700)으로 사용된 것을 볼 수 있습니다. 이를 통해 UI 개별요소(Elements)들의 구분은 명확하지 못하지만 콘텐츠 영역(Cards가 노출되는 영역)더 매끄럽게(Seamless)게 표현할 수 있습니다. 사용자가 하단 내비게이션(Bottom navigation)에서 선택한 상태를 알 수 있도록 하기 위해서 보조색상인 노랑(Yellow 500)이 사용되었습니다. 하단 내비게이션에 그림자가 적용되어 표면들 사이에서 더 높은 높이값을 갖는다는 것을 나타내고 있습니다.
3. 배경막 (Backdrop)
배경막(Backdrop)은 전면(Front)과 후면(Back)의 레이어를 갖습니다. 유사한 구성요소(Component)로 Bottom sheets이 있지만 이 경우와 달리 후면의 레이어가 Dimming 처리되지 않고 그대로 출력됩니다. 이때 후면 레이어는 메인색상이 사용되고, 전면 레이어는 흰색이 사용되는 것이 일반적입니다.
위 그림에서 배경막의 후면 레이어는 앱의 메인색상(Purple 800)이 적용되었습니다. 후면 레이어의 텍스트 영역에는 메인색상을 밝게 변형한 변형색상(Purple 700)이 적용되었습니다. (이는 From, To에 적용된 색상을 의미합니다.) 보조색상(Red 700)은 전면 레이어에서 항공료를 강조하기 위해서 사용된 것을 볼 수 있습니다.
위 그림에서 배경막의 후면 레이어는 앱의 메인색상(Pink 100)이 적용되었습니다. 앱 바 내에 글자 및 아이콘에는 메인색상을 어둡게 변형한 변형색상(Pink 900)이 적용되었습니다. 추가적으로 보조색상(Pink 50)이 Bottom sheets가 확장된 형태로 적용된 전면 레이어의 아이콘과 버튼 등의 영역에 사용되었습니다.
해당 사례에서 배경막의 전면 레이어와 후면 레이어가 되는 앱 바 영역을 보면 그림자가 전면 레이어에 생긴 것을 볼 수 있습니다. 즉, 전면 레이어의 높이값이 앱 바의 높이값보다 높은 것이 배경막이 적용된 사례의 특징입니다.
참고로 해당 사례는 일반적으로 많이 사용되는 사례는 아닙니다. 남다른 디자인을 위해 참고할만한 디자인이기는 높이값 등에 대한 설계가 잘못될 경우 내비게이션 등 전반적인 앱 구성에 문제를 야기시킬 수 있기 때문에 적용 시 주의해야 하는 사례입니다.
4. 시트와 표면 (Sheet and surfaces)
Bottom sheets, navigation drawer, menus, dialogs, cards와 같은 표면이나 시트의 기본 색상은 흰색입니다. 이러한 구성요소들은 다른 표면들 사이에서 색상 대비를 만들어 내기 위한 색상을 사용합니다. 색상 대비는 표면이 중첩되는 상황에서 높이값 차리를 나타내며, 표면의 경계를 더욱 선명하게 표현하는 방법입니다.
위 그림은 Bottom sheets와 navigation drawer의 기본 색상인 흰색을 메인색상(Primary color)로 변경한 것을 나타냅니다. 1번 항목은 Bottom sheets에 메인색상(Purple 500)을 흰색 대신 사용한 것을 나타내며, 2번 항목은 Navigation drawer에 메인색상(Purple 500)을 흰색 대신 사용한 것을 나타냅니다.
4.1. 모달시트 (Modal sheets)
모달시트(Modal sheets)를 이야기하기에 앞서 모달(Modal)의 의미는 사용자가 특정 과업(Task)을 수행하기 위해 인터렉션하기 위한 장치, 채널 등을 의미합니다. 예를 들어, 리스트를 편집하거나, 삭제하거나, 특정 값을 입력하기 위한 인터페이스 전반을 모달(Modality)라고 합니다. 여기서 설명한 모달시트란 말은 시트(Sheet) 형태로 구현된 인터페이스라고 보면 됩니다. Bottom sheets, navigation drawer는 이러한 모달(Modality)을 표현하기 위한 대표적인 구성요소들입니다.
Navigation drawers, bottom sheets와 같이 화면위에 임시로 나타나는 표면은 색상대비를 사용합니다. 일반적으로 이러한 표면들은 흰색을 사용하지만 앱의 메인색상(Primary color)이나 보조색상(Secondary color)을 사용할 수 있습니다.
위 그림에서 해당 앱은 Bottom navigation drawer에 메인색상(Blue 700)을 사용하였습니다. 메인색상의 어두운 변형색상(Blue 800)이 계정을 변경하기 위한 항목에 적용되었고, 보조색상(Orange 500)이 선택된 리스트(Inbox)의 텍스트를 표현하는데 사용되었습니다.
위 그림에서 해당 앱은 어두운 글자와 내비게이션 표현을 극대화하기 위해 Navigation drawer에 메인색상인 흰색을 사용하였습니다. Navigation drawer가 배경 색상과 같은 색상을 사용함에 따라 Navigation drawer 뒤에 출력되는 콘텐츠를 눈에 덜 띄게 하기 위해 흰색 스크림(Scrim)이 사용되었습니다.
여기서 스크림(Scrim)의 개념은 화면에 출력되는 반투명한 레이어라고 이해하면 됩니다. 이후에 다시 설명하겠지만 사진 위에 글자를 출력하거나 위의 예에서처럼 특정 레이어 뒤에 출력되는 대상을 덜 부각시키기 위해 사용되는 효과 중 하나입니다. 실무에서 이와 관련해 논의를 하다보면 해당 용어를 제대로 알고 사용하는 경우가 많지 않습니다. 업무 과정에서 통일된 용어 사용을 위해서 해당 용어를 잘 기억해 두기 바랍니다.
위 그림에서 해당 앱은 시트 출력을 위해 오른쪽 하단에 아이콘 형태로 배치하였습니다. 메인색상(Pink 500)이 적용되었고, 해당 아이콘을 통해 시트가 확장되는 형태의 동작이 적용되어 있습니다. 사실 해당 사례는 표준화된 규격의 앱에서 자주 사용되는 사례는 아니라는 것을 참고하기 바랍니다.
4.2. 카드 (Cards)
카드(Cards)를 위한 기본 색상은 흰색입니다. 이 색상은 앱에서 표현하고자 하는 브랜드 특성이나 가독성을 위해서 물론 수정할 수 있습니다. 카드에서 표현하는 글자(Text), 아이콘(Icon) 등도 가독성을 위해 별도의 색상 테마(Color theme)를 사용할 수 있습니다.
위 그림에서 카드의 표면은 메인색상(Purple 500)이 사용되었습니다. 앱의 배경색상은 흰색입니다. 보조색상(Teal 200)이 그래프를 표현하기 위한 데이터 시각화에 사용되었습니다.
위 그림에서 카드(Cards)는 카드가 선택되거나 중요한 것을 표현하기 위한 과정에서 메인색상을 사용할 수 있다는 것을 나타내고 있습니다.
위 그림에서 이미지 위에 글자(Text)나 아이콘(Icon)이 출력될 때, 글자나 아이콘은 읽기 어려울 수 있습니다. 가독성(Legibility)을 높이기 위해 글자나 아이콘에 표면을 구분하기 위한 별도의 색상을 사용할 수 있습니다.
위 그림에서 카드는 글자의 가독성을 높이기 위해 색상이 있는 스크림(Scrim)을 사용하였습니다. (이미지 위에 출력된 녹색의 반투명한 레이어가 해당 스크림입니다.)
5. 버튼, 칩, 선택 컨트롤 (Buttons, chips, and selection controls)
버튼, 칩, 선택 컨트롤은 메인색상(Primary color), 보조색상(Secondary color)를 적용하여 강조할 수 있습니다.
참고로 컨트롤(Controls)의 개념은 버튼, 체크박스, 라디오버튼 등과 같이 개별 UI 구성요소(Component)를 지칭하는 다른 용어입니다. 컨트롤은 주로 이전에 웹 UI 개념에서 많이 사용되던 개념입니다.
5.1. 색상 분류 (Color categories)
- 글자(Text), 기본 버튼을 위한 기본색상은 메인색상(Primary color)입니다.
- FAB(Floating action button)을 위한 기본색상은 보조색상(Secondary color)입니다.
- 선택 컨트롤을 위한 기본색상은 보조색상(Secondary color)입니다.
위 그림에서 색상테마는 메인색상(Purple 500)과 메인색의 변형색상(Purple 600)이 사용되었고, 보조색상(Teal 200)이 사용되었습니다. 1번 항목은 하단 앱 바(Bottom app bar)에 메인색상이 사용되었고, FAB(Floating action bar)와 선택 컨트롤에 보조색상(Teal 200)이 사용되었습니다.
여기서 설명하는 선택 컨트롤은 스위치(Switch) 컴포넌트입니다. 스위치(Switch) 외에 라디오 버튼, 체크박스 등도 보조색상이 적용되는 컨트롤들이라고 이해하면 됩니다. 2번 항목은 선택된 리스트 항목들에 적용된 보조색상 사례를 나타냅니다.
5.2. 버튼, 칩, 선택 컨트롤 (Buttons, chips, and selection controls)
버튼, 칩, 선택 컨트롤은 메인색상, 보조색상으로 강조될 수 있습니다.
위 그림에서 앱은 메인색상(Pink 100)이 확장된 FAB(Extended floating action button)과 칩(Chips)에 적용되었습니다. 슬라이더(Slider)에는 메인색상을 어둡게 변형한 변형색상(Pink 900)이 적용되었습니다.
위 그림에서 왼쪽 그림은 선택 컨트롤(Selection controls)은 보조색상이 사용될 수 있다는 것을 보여주고 있습니다. 오른쪽 그림은 사용자에게 주의를 주지시키기 위한 다이얼로그에 앱의 브랜드 색상(메인색상, 보조색상, 변형색상)과 동일한 색상을 적용하지 말 것을 안내하고 있습니다.
이는 사용자를 주의를 환기시키기 위한 목적으로 사용되는 대화상자(Dialogs)는 주변의 다른 UI 구성요소(Components)와는 색상으로 확실한 대비를 이룰 수 있도록 설정해야 된다는 것을 뜻합니다.
5.3. Floating action button (FAB)
FAB(Floating action button)은 화면에서 가장 눈에 띄어야 하는 요소입니다. FAB와 앱 바(App bar)와 같이 주변의 개별요소(Elements)와 색상 대비를 이루기 위한 색상을 사용해야 합니다. 보조색상(Secondary color)은 FAB를 위한 기본색상 입니다. 화면에서 사용하는 색상이 너무 많다고 생각이 들면 FAB는 단색(흰색, 검정색)을 사용하여 주변의 콘텐츠와 색상으로 대비를 이룰 수 있습니다.
위 그림에서 앱의 FAB는 주변에 있는 UI와 색상 대비를 이루기 위해 보조색상이 사용되었습니다.
위 그림에서 앱의 색상 테마는 메인색상인 흰색과 보조색상인 검정색이 모든 버튼, 선택 컨트롤, 아이콘에 사용되었습니다. 흰색과 검정을 이용한 구성요소(Components)는 주변에 있는 강렬하고 다양한 색상을 갖는 주변 콘텐츠로부터 구분될 수 있도록 합니다.
주변에 출력되는 다양한 콘텐츠들의 색상이 강렬하다고 판단이 되면 함께 강렬한 색상을 사용하기 보다는 반대로 흰색이나 검정색을 이용하여 색상 톤을 낮춰서 주변 요소들과 구분할 것을 안내하고 있습니다.
6. 글자, 아이콘 (Typography and iconography)
색상은 글자가 큰지 작은지, 다른 글자들과 상대적으로 중요한지에 따라서 선택적으로 적용할 수 있습니다. 글자에 적용되는 색상은 이미지나 배경위에 출력되면서 읽기 어려운 글자에 대한 가독성을 높일 수 있습니다.
6.1. 글자 계층구조 (Typographic hierarchy)
글자에 적용되는 색상은 글자의 가독성과 중요도를 높이는데 사용할 수 있습니다.
위 그림에서 사용된 색상테마는 메인색상(Purple 500)과 보조색상(Orange 600)입니다. 오렌지 색상은 카드의 헤드라인(“Color theory”, “Palettes”)에 사용되었고, 보라색은 탭(Tabs)과 버튼(Buttons)에 적용되었습니다.
6.2. 헤드라인, 탭 (Headlines and tabs)
탭(Tabs)이나 헤드라인(Headlines)에 사용된 중요한 글자는 메인색상 또는 보조색상을 사용할 수 있습니다.
위 그림에서 앱은 헤드라인에 이목을 집중시키기 위해 앱의 보조색상(Orange 800)이 사용되었습니다.
위 그림에서 앱은 탭(Tabs)의 글자에 선택된 상태를 나타내기 위해 볼드(Bold) 표시와 함께 메인색상(Green 800)을 사용하였습니다.
위의 왼쪽 그림은 짧은 헤드라인 글자는 메인색상 또는 보조색상으로 강조를 위해 적용할 수 있는 사례를 나타냅니다. (“Monuments, Buildings, and Other Structures” 부분) 오른쪽 그림은 하이퍼링크에 적용된 메인색상 또는 보조색상 사례를 나타냅니다. (“Photography” 부분)
위 그림에서 메인색상 또는 보조색상이 밝은 색상인 경우 본문 글자에 적용하지 말 것을 강조하고 있습니다. 당연한 이야기겠지만 본문 영역은 화면에 상당부분 출력됨에 따라 본문 글자가 색상으로 강조되면 화면 다수의 영역이 지나치게 강조된 상태로 보일 수 있기 때문에 이를 금지하고 있는 것입니다.
6.3. 글자 가독성 (Text legibility)
글자가 이미지 위에서 출력될 때, 글자는 종종 가독성 문제가 발생할 수 있습니다. 글자와 이미지 사이에 색상을 포함한 별도의 레이어는 글자의 가독성을 높일 수 있습니다.
위 그림에서 앱은 노란색 스크림(Scrim)을 이미지 위에 사용하여 글자의 가독성을 높이고 있습니다. 그림에서 “BLACK COFFEE”가 출력되는 배경에 노란색 반투명 레이어 영역을 의미합니다.
6.4. 아이콘 (Icons)
아이콘은 앱의 동작을 정의하고, 정보를 제공하는데 도움을 줄 수 있습니다. 아이콘 색상은 주변 요소들과 대비되는 색상을 사용하여 가독성을 높이고, 주변 요소들과 구분될 수 있습니다.
위 그림에서 앱은 아이콘을 표현하는 색상으로 메인색상(Green 800)과 보조색상(Orange 800)을 사용하였습니다. “Glueten-free”와 “Egg free” 앞에 위치한 아이콘에 사용된 색상을 나타냅니다.
위 그림에서 “Shrine” 앱은 메인색상을 어둡게 변형한 변형색상(Pink 900)을 아이콘에 적용하였습니다. “SHIPPING”, “PAYMENT”, “HAVE A PROMO CODE?” 앞에 있는 각 아이콘을 의미합니다.
7. 마무리
개별 UI 요소에 색상을 적용하는 것은 주로 색상 대비(Contrast)를 이용해 주변의 다른 UI와의 구분을 위한 목적으로 사용됩니다. 해당 원칙들은 일부 요소를 제외하고 아주 강력히 권고하진 않습니다. 상대적으로 개별 UI 요소에 대한 색상 적용은 자유도가 있는 편이니 메인색상과 보조색상 등을 다양하게 변형하여 적용할 수 있다는 것을 이해하면 되겠습니다.
다음 내용은 색상으로 계층 구조를 표현하거나 앱의 브랜드와 앱 내에서 특정 의미를 나타내거나 앱의 특정 상태를 나타내기 위한 다양한 색상 응용 사례를 다룰 예정입니다. 그럼 다음 시간에 뵙겠습니다.
안녕하세요. svg만 잠깐 사용했었는데 앱 개발할 때도 다양하게 사용할 수 있군요! 블로그에서 좋은 정보 잘 보고 갑니다. 감사합니다.
답글삭제구글이 앱 개발 뿐만 아니라 근래에 플러터2를 개발언어로 런칭하면서 앱뿐만 아니라 웹도 점점 영역을 넓혀가고 있는게 머티리얼 가이드라인도 방대해지고 디테일해지는 것을 보면서 느끼게 됩니다. 틈틈히 번역을 하고 있는데, 워낙 범위가 방대해서 더 빠르게 진행은 못하고 있지만 종종 들르셔서 피드백 남겨주시면 감사하겠습니다. 방문해주셔서 고맙습니다. ;-)
삭제