[UX] 구글 머티리얼 디자인 – 2.3.머티리얼 시스템 – 머티리얼 스터디(Google material studies) 사례: 바질(Basil)

구글 머티리얼 스터디(Google material studies)는 구글에서 제안하는 머티리얼 디자인(Material design)의 우수사례(Best practice)를 소개하는 콘텐츠로 구성됩니다. 그 중에서도 바질(Basil)이라는 음식 레시피(Recipe) 소개 애플리케이션을 먼저 살펴보겠습니다.

출처: 원문보기

머티리얼 스터디(Material studies)에서 소개하고 있는 애플리케이션 유형은 다음과 같습니다. 각 유형별 사례는 각자의 조직에서 필요한 사례를 다양하게 참고할 수 있도록 했고, 이러한 목적에서 서로 다른 서비스를 소개하고 있는 것이 특징입니다.

1. 사례 유형

1.1. Basil

Basil은 음식 레시피(Recipe) 소개 앱으로써 쉐프들이나 바텐터들이 소개되는 레시피를 포함하는 애플리케이션입니다. Basil에서 볼드체(Bold) 문자와 글자 색상을 컨셉으로한 UI는 콘텐츠에 단순하게 접근할 수 있게 하고, 탐색을 용이하게 합니다.

1.2. Crane

Crane은 여행앱으로 개인화된 사용자 경험을 제공합니다. 사용자가 입력하는 입력 값에 따라 여행, 숙박, 식당 등의 정보를 찾고 예약할 수 있는 기능을 제공합니다. Crane은 예약을 대행하는 측면에서 다양한 기능을 제공하면서도 사용자들이 서비스를 탐색하는데 필요한 기타 정보도 함께 제공하고 있습니다. 시각적이고, 세부적인 모션(Motion) 표현들은 사용자들이 맞춤형 서비스에 대한 경험을 하기에 충분합니다.

1.3. Fornightly

Fortnightly는 콘텐츠 경험에 더욱 초점이 맞춰진 뉴스앱입니다. 다양한 주제의 뉴스를 포함하는 Fortnightly는 개별 뉴스와 사진을 통한 콘텐츠 구성에 특화되어 있습니다. Fortnightly의 로고, 타이포 시스템, 컬러 조합은 그들의 콘텐츠를 더욱 부각시키는 표현 요소들로 볼 수 있습니다.

1.4. Owl

Owl은 교육용 앱입니다. 생동감이 넘치고, 동기부여를 유발하는 감성을 갖고 있습니다. Owl은 디자인, 예술, 건축, 패션 분야에서 새로운 스킬을 배우고자 하는 사람들에게 필요한 학습과정을 소개합니다.

1.5. Rally

Rally는 개인용 금융앱입니다. Rally는 화려한 데이터 표현에 특화된 사용자 경험을 제공합니다. Rally는 사용자들의 소비 습관을 기록하고, 개인들의 재정 상태에 따라 경고 및 추천 등의 서비스를 제공합니다. Rally는 굉장히 많은 양의 정보를 출력하기 위한 디자인에 특화되어 있습니다.

1.6. Reply

Reply는 이메일 앱입니다. 사용자들이 상호 소통하는 측면의 경험을 제공하기 위한 디자인으로 구성되어 있습니다. Rally는 개인, 그룹간의 커뮤니케이션을 명료하게 구성하여 가독성있고, 직관적인 디자인을 제공합니다.

1.7. Shrine

Shrine은 패션, 라이프스타일과 관련된 아이템을 다루는 쇼핑앱입니다. 추천상품을 라벨로 표현한 온라인 쇼핑 서비스로 특화되어 있으며, 고급스럽고, 현대적인 디자인을 추구합니다. 다양한 브랜드와과 제품을 통일성 있는 디자인으로 제공하는 것에 초점을 맞추고 있습니다.

2. 세부 구성 – Basil

위의 여러 사례 중 오늘 소개할 사례는 Basil입니다.

참고로 특별한 이유로 해당 사례를 선택한 것은 아닙니다. 본 포스팅의 목표는 위에서 나열한 각 사례들이 어떤 방식으로 분석되었고, 어떤 세부 구성에 따라 설명이 되고 있는지를 대략적으로 이해하는 것에 있습니다.

이전 포스팅에서도 설명을 했지만 Material studies의 세부 내용에 대한 이해는 머티리얼 디자인(Material design) 전반에 대한 이해를 한 다음에 해도 충분하다고 생각합니다.

2.1. Product architecture

Product architecture에서는 해당 서비스의 메인 메뉴 트리, 메인 UI 컴포넌트 구성, 내비게이션 구조(모바일, 데스크톱), 제스쳐 동작(스크롤, 스와이핑) 등의 설명을 포함합니다.

Four top-level sections

애피타이저, 메인요리, 디저트, 칵테일의 4가지 메인 메뉴로 구성된 Basil 서비스를 설명합니다. 각 메인 메뉴는 2가지 서브 메뉴(재료, 요리법)로 구성되어 있습니다.

A novel approach to navigation

Navigation drawer는 카탈로그 구조를 위해 사용됩니다. Basil의 인터렉션 모델은 몇몇 UI 컴포넌트를 통해 새롭고, 때로는 놀라운 사용자 경험을 제공합니다.

Desktop and tablet navigation

Basil 데스크톱, 태블릿 서비스에서는 상단 탭(tab) UI를 통해서 메인 메뉴를 항상 접근할 수 있습니다. 데스크톱 서비스에서는 각 섹션을 세로 스크롤 동작을 통해서 이동할 수 있고, 태블릿 서비스에서는 가로 스크롤 동작을 통해 레시피를 탐색할 수 있습니다.

레시피가 선택되면 탭 UI는 재료(Ingredients), 요리법(Directions)로 변경(Toggle)됩니다. 요리법은 커스터마이징된 스텝퍼(Stepper) UI 컴포넌트로 구성되어 있습니다.

Mobile navigation

모바일 버전에서 메인 메뉴를 이동하기 위해서는 Swiping down 제스쳐를 통해서 나타나는 Navigation drawer를 통해서 접근할 수 있습니다.

메인 메뉴를 선택하고 나면 가로 스크롤 제스쳐를 통해서 레시피를 탐색할 수 있습니다.

레시피를 선택하면 하단 Bottom sheet 탭(tab) UI에 재료(Ingredients)와 요리법(Directions)이 나타납니다. 각 탭 UI를 선택하여, 재료와 요리법을 변경(Toggle)할 수 있다.

2.2. Layout

Grid system

Basil은 responsive grid system 레이아웃으로 구성되어 있습니다. 타일 레이아웃(Grid layout)에서의 콘텐츠는 center 정렬로 표현됩니다.

헤드라인 텍스트는 화면에 맞게 사이즈가 자동으로 커졌다 작아졌다 조절됩니다.

Elevation

Basil은 Elevation 사용시 그림자 효과를 사용하지 않습니다. 콘텐츠는 서로 다른 모션 효과와 투명도가 적용되어 그림자 효과를 대신합니다.

이미지와 텍스트 사이의 Elevation 처리를 하며 텍스트 가독성을 높이기 위해 듀오톤(Duo-tone) 이미지를 사용하고 있습니다.

2.3. Color

Basil은 과일과 채소로부터 영감을 받은 진한 색상을 대표 테마 색상으로 사용하고 있습니다.

메인 색상(Primary color)는 올리브 그린(Olive green)이고, 보조 색상(Secondary color)는 오렌지(Orange) 색상입니다.

2.4. Typography

Basil은 Montserrat과 Lekton 서체를 사용하여 서비스의 독특함을 더합니다.

Montserrat

Montserrat는 Sans serif 타입의 서체이며, Sans serif 보다는 더 넓은 장평을 갖고 있습니다. Basil의 헤드라인, 캡션(이미지 설명을 위한 텍스트), 버튼 텍스트에서 이 폰트를 사용합니다.

Lekton

Lekton은 Olivetti 작가의 글씨체에서 영감을 얻어서 만들어진 서체입니다. 서체 높이가 높은 세로형서체이며, 일정한 자간을 갖는 Monospace 서체입니다. Basil의 서브 헤드라인(smaller headlines)와 자막(Subtitles)에 사용되고 있습니다.

2.5. Icongraphy

Basil은 일관성 있는 아이콘 디자인을 위해 기본적으로 그리드 구조(Grid structure)를 기반으로 제작되었습니다.

메인 색상과 보조 색상 등이 아이콘 디자인에도 동일하게 사용되었습니다. (아래 그림 항목2의 Gluten free, Dairy free 등의 아이콘 표현에 적용)

2.6. Shape

2.7. Components

Lists

Basil에서는 재료(Ingredients)와 요리법(Recipe)를 각각 리스트 UI(List component)로 표현합니다. 각각의 리스트는 타이포그래피, 아이콘, 커스터마이징된 점선으로 구성됩니다.

Bottom sheet

Basil은 모바일 서비스에서 Bottom sheet UI를 재료와 요리법을 표현하는데 사용합니다.

Bottom sheet의 배경에 투명도를 주어 사용자는 sheet가 이전 화면보다 상단에 출력되어 있음을 인지할 수 있습니다. 사용자는 언제든지 sheet UI 화면을 종료하고 이전 화면으로 돌아갈 수 있습니다.

Tabs

Basil은 데스크톱, 태블릿 서비스에서 Tabs UI를 사용하여 메인 메뉴를 표현합니다. 각각의 Tab은 동일한 너비의 여백을 갖고 있으며, Tab UI는 화면 중앙에 가로 정렬(horizontal align=center)되어 표현됩니다.

Steppers

Basil은 자유롭게 스텝을 이동할 수 있는 스텝퍼(Steppers) UI를 사용하고 있습니다. 사용자는 원하면 언제든지 각 단계를 자유롭게 이동할 수 있습니다. 스텝퍼(Steppers) UI에서 Basil은 자체적인 컬러 스키마와 세로 화면 이동 모션을 적용하고 있습니다.

2.8. Motion

Launch screen

Basil logo 애니메이션은 시차를 두어 동작함으로써 사용자들이 세로로 구성된 콘텐츠 탐색에 대한 힌트를 제공합니다. (애니메이션을 통해 세로로 스크롤을 할 수 있다는 것을 암시적으로 표현하고 있습니다.)

Navigation transitions – Mobile

Basil은 모바일 서비스에서 화면 전환 시, 시차와 Elevation을 통해서 시각적 흥미를 유발합니다.

Navigation transitions – Tablet and desktop

Basil은 데스크톱, 태블릿 서비스에서 간결한 화면 전환을 사용하여 단순하고 갈끔한 화면전환을 유지합니다. 떠오르는 화면 전환 효과와 페이드(fade) 효과 애니메이션은 간결한 화면 전환을 구성하는 요소입니다.

Stretch

스텝퍼(Steppers)에 적용된 Stretch motion은 예상하지 못한 즐거움을 제공합니다.

3. 마무리

위의 설명을 종합해보면 Material studies의 목표는 우리가 UI/UX를 설계하는데, 설계를 이해하기 위한 배경을 설명하는 것에 초점이 맞춰져 있는 것을 알 수 있습니다.

예를 들어, 왜 특정 색상을 사용하는지, 특정 모션의 적용은 사용자에게 서비스 이용에 대한 어떤 힌트를 제공할 수 있는지, Stretch 요소가 주는 감성적인 측면의 즐거움은 무엇인지 등의 설명은 구체적인 설계의 배경을 이해하기에 충분합니다.

UI/UX를 구체적으로 설계하고 개발하기에 앞서 UI/UX를 기획한다는 것은 위의 Material studies에서 구성하고 있는 요소들에 대한 컨셉을 정하고, 이를 설명하는 것에 가까운 업무가 될 수 있을 것입니다.

다시 말해, Material studies는 우수 사례를 참고하기 위한 목적 뿐만 아니라 우리가 UI/UX에 대한 컨셉을 기획하는데, 필요한 문서 요소들을 잘 설명하고 있습니다.

이러한 측면에서 각 업무에 활용을 한다면 UI/UX를 설계하고 기획하는 초기 단계에서 유용하게 활용할 수 있는 가이드 문서가 될 수 있다고 봅니다.

이 블로그 검색

UNCLESOON'S BLOG