Google Material 2.0 번역 #03
Material Studies ~ Crane
안녕하세요. 주니어 디자이너를 위한 커뮤니티, Bigpicture입니다.
Google Material 2.0의 구체적인 적용 사례를 살펴볼 수 있는 Material studies 번역본 2탄 Crane 편을 공유합니다. Google Material 2.0 버전에서는 Material design이 적용된 총 7가지의 서비스 사례를 제공하여 독자가 더 쉽게 이해하도록 도와줍니다. 본 글에서는 Crane이라는 서비스 사례를 바탕으로 Material design이 어떻게 적용될 수 있는지 확인하실 수 있습니다.
Crane
Crane은 머티리얼 디자인 컴포넌트와 테마를 사용한 사용자 맞춤형 여행 앱입니다.
개요
Crane에 대하여
프로덕트 구조
레이아웃
컬러
타이포그래피
아이콘
컴포넌트
모션
Crane에 대하여
크레인(Crane)은 사용자가 입력한 선호도에 맞는 여행, 숙박, 레스토랑 등을 찾고 예약할 수 있도록 도와주는 여행 앱입니다. Crane 앱은 예약을 할 수 있다는 점에서 기능적이며, 유저가 새로운 경험을 탐구하고 배울 수 있도록 한다는 점에서 유용합니다.
Crane의 브랜드는 세련되고 표현적이며, 시각적 디테일 또는 모션의 디테일을 고려하여 사용자에게 맞춤화된 느낌을 줍니다.
유연한 미학(Flexible aestheic)
Crane 앱은 기능 및 정보를 제공해주는 것뿐만 아니라, 다양한 필터를 제공하여 유저와 관련된 콘텐츠를 지정할 수 있게 해 줍니다.
유저가 이러한 유연성(flexibility)을 쉽게 이해하게 하기 위해, Crane은 주로 백드롭 컴포넌트의 사용에 인터렉션을 집중시켰습니다. 백드롭(backdrop) 뒤에 있는 레이어의 필터나 설정 변경 시, 그에 따라 백드롭 앞에 있는 레이어의 콘텐츠가 바로 업데이트됩니다. 예를 들어, 크레인 앱에서 항공편을 찾고 있는 유저가 목적지와 날짜를 뒷 레이어에 입력했다고 가정해봅시다. 정보를 입력하고 나면 유저의 선호도에 맞는 항공편이 즉시 앞 레이어에 업데이트되어 보이게 됩니다. 이 상호작용은 Crane이 유저의 선호도를 고려한 맞춤형 콘텐츠 제공에 신경을 썼다는 것을 보여줍니다. 볼드하면서 클래식하고, 직접적이면서도 아주 친절하게 옵션을 제공하는 방식으로 말입니다.
프로덕트 구조
크레인 앱의 정보 구조는 플로우 구조(flow structure)를 사용합니다. 플로우 구조(flow structure)는 태스크 기반의 구조로서, 화면에 스크린이 연속적으로 접근할 수 있어야 합니다.
또한 플로우 구조는 필터링된 콘텐츠를 탐색하는 데 관심이 있는 유저에게 특정 선택 항목을 예약할 수 있도록 실행 가능하게 하여 유연성을 제공한다는 측면에서 크레인에 가장 적합한 정보 구조라고 할 수 있습니다.
Crane는 탭과 배경을 사용하여 모바일, 태블릿 그리고 데스크톱의 컨텐츠를 탐색하고 필터링합니다.메인 세션
Crane 앱에는 세 가지 주요 섹션이 있습니다.
- 비행(Fly)
- 수면(Sleep)
- 식사(Eat)
화면 상단의 탭을 사용하여 위의 기본 섹션들로 이동할 수 있습니다. 이러한 탭은 배경 구성요소의 뒤쪽 레이어에 중첩되어 있으며, 여기에는 관련 필터 및 상황별 작업 기능도 포함됩니다.
내용 필터링
유저는 자신의 선호도에 따라 Crane의 콘텐츠를 빠르게 사용자 설정을 할 수 있습니다. 뒷 레이어에는 앞 레이어 콘텐츠에 영향을 줄 수 있는 컨트롤이 포함되어 있으며, 유저가 뒷 레이어에서 콘텐츠를 커스텀하면 그에 따라 변경된 스크린을 앞 레이어에서 볼 수 있습니다.
레이아웃
그리드 시스템
크레인에는 화면 폭(모바일, 태블릿, 데스크탑 등)에 따라 크기를 조정할 수 있는 유연한 열과 패딩이 있는 반응형 그리드 시스템이 사용됩니다. 콘텐츠는 열(column)에 맞추어 쌓이게 되며, 유저 인터렉션에 따라 콘텐츠는 수직적으로 확장되거나 축소됩니다.
탭과 백드롭(모바일)
화면 공간이 제한되어 있기 때문에 각 백드롭 항목은 다른 백드롭 항목 위에 수직으로 쌓이게 됩니다.
탭과 백드롭(태블릿)
태블릿은 모바일보다 화면 공간이 넓어서 백드롭 항목들은 수평적으로 서로 나란히 놓일 수 있습니다.
62.5%까지 크기가 조정됨탭과 백드롭(데스크탑)
데스크탑은 태블릿보다 스크린 공간이 더 넉넉하기 때문에 모든 백드롭 항목들이 수평으로 나란히 놓일 수 있습니다.
50%까지 크기가 조정됨계층(Elevation)
색상 사용
Crane의 UI는 요소 간 계층의 차이를 표현할 때 그림자를 사용하지 않고 컬러를 사용합니다. 예를 들어, 카드는 굳이 그림자를 사용하지 않고도 카드에 배경과 구별되는 색상을 사용함으로써 컨테이너의 경계를 나타낼 수 있습니다.
백드롭 그림자
Crane이 그림자를 사용하여 경계를 표현하는 한 가지 예는 백드롭 컴포넌트의 앞 레이어에서 내용이 스크롤되는 경우입니다. 이 경우 백드롭은 별도의 움직임 없이 기본(default) 상태를 그대로 유지한 채, 앞 레이어 서브헤더(subheader)에 그림자를 생성하여 그 뒤로 분리된 콘텐츠가 스크롤될 수 있도록 합니다.
컬러
컬러 테마
- 메인 컬러: 보라색입니다. 이 색상은 세 가지 변형을 사용하여 서로 다른 UI 요소를 구분합니다.
- 보조 컬러: 빨간색입니다. 선택한 항목을 강조 표시하는 데 사용됩니다.
Crane의 시트 선택 페이지는 유저가 시트를 선택할 순간까지 메인컬러인 보라색만 사용합니다.구별되는 요소와 상태
모든 화면에 보조 컬러를 사용할 필요는 없습니다. 크레인 메인 컬러인 보라색을 베리에이션을 하면 각 요소 간의 차이를 만들 수 있기 때문입니다. Crane의 보조 컬러인 빨간색은 종종 선택된 상태 항목들에 사용되기 때문에, 빨간색의 부재는 선택되지 않은 경우를 보여주는 데 도움이 됩니다.
크레인의 보조 컬러인 빨간색은 확인란, 슬라이더 및 라디오 버튼과 같은 구성요소에 대해 선택된 상태를 나타내기 위해 사용됩니다. 그리고 타이포그래피를 강조하는 데에도 사용될 수 있습니다.
62.5%까지 크기가 조정됨
오류 상태의 대체 색상
Crane의 컬러 테마에서 오류 상태 표현 시 주황색을 대체 컬러로 사용합니다. 빨간색은 Crane의 보조 컬러로 사용되기 때문에 빨간색으로 오류 상태를 표현할 경우 UI에서 충분히 두드러지지 않으며, 오류 상태가 아닌 선택 상태로 잘못 읽힐 수 있기 때문입니다.
타이포그래피
서체 크기
크레인 타입 스케일은 앱 콘텐츠에 필요한 다양한 타이포그래피를 제공합니다. 모든 항목은 Raleway를 서체로 사용하며, Raleway Light, Organic, Medium 및 SemiBold의 다양한 굵기로 사용됩니다.
Crane의 타입 스케일Raleway
Crane는 전체 앱에서 산세리프 타입 페이스 레일웨이(sans-serif typeface Raleway)를 사용합니다.
처음에 Raleway는 제목과 대형 크기 디스플레이 서체로 제작되었지만, 이후 바디텍스트로 적합한 9-weight 제품군으로 확대되었습니다. Crane 앱에서 단일 서체를 사용함으로써 UI가 일관되게 표시되므로(예: 사진 및 작은 시각적 세부 정보) 다른 요소가 눈에 띄게 하였습니다.
Raleways 문자 양식
Raleway와 Roboto 비교아이콘
크레인의 아이콘은 공항이나 기차역과 같은 여행 환경에서 발견되는 디자인을 연상시킵니다.
1. 일관성을 위해 Crane의 모든 아이콘은 동일한 기본 그리드 구조를 공유합니다.
2. 크레인 아이콘 컬렉션
컴포넌트
이미지 리스트
Crane는 유저가 이미지 리스트(태블릿과 데스크탑)을 사용하여 콘텐츠를 탐색할 수 있도록 합니다.
메이슨리 그리드(Masonry grid)
이 이미지 리스트는 원래 이미지 크기를 기준으로 이미지 컨테이너 높이 크기를 동적으로 조정하는 메이슨리 그리드(일명 벽돌쌓기 그리드)를 사용합니다. 메이슨리 그리드 스타일은 가로, 세로 또는 사각형 형식의 사진들이 모두 가능한 한 많은 콘텐츠를 표시할 수 있게 합니다. 또한 이 그리드는 흥미롭고 예측할 수 없는 리듬을 만들어 사용자가 계속해서 콘텐츠를 스크롤하고 탐색하도록 합니다.
이미지 레이블(Image labels)
이미지 리스트는 각 항목에 텍스트 레이블이 함께 표시하도록 커스텀 되었습니다. 커스텀 된 패딩(padding)은 각 항목 위아래로 더 넉넉한 공간을 줌으로써 어떤 텍스트 레이블이 어떤 이미지에 속하는지 혼동되지 않도록 하였습니다.
크레인의 커스텀 된 벽돌쌓기 이미지 리스트(크기가 50%까지 조정됨)
Crane의 커스텀화 된 리스트리스트
모바일에서 Crane는 리스트 컴포넌트를 사용하여 콘텐츠를 구성합니다. 리스트 컴포넌트는 Crane의 타이포그래피와 색상을 포함하도록 커스터마이징 됩니다.
각 리스트 항목에는 사용자(위치 이름, 유형, 거리 및 비용 포함)와 사진과 가장 관련 있는 내용이 포함됩니다.
카드
크레인은 카드를 사용하여 출발 및 도착 시간, 비용, 공항 및 운송 회사 정보와 같은 상세한 검색 결과를 표시합니다.
수직적 카드 컬렉션
크레인의 카드는 수직으로 쌓은 카드 컬렉션에서 나타납니다. 컬러는 채우기 색(filled color)으로 사용된 흰색과 그와 대조되는 밝은 보라색의 배경 컬러를 사용하여 카드 컨테이너를 나타내도록 하였습니다. 또한 크레인의 카드는 그림자를 넣지 않았기 때문에 각각의 카드 사이에 패딩이 거의 없어 유저가 더 쉽게 훑어볼 수 있습니다.
태블릿과 데스크탑에서 카드를 누르면 카드가 확장되어 더 많은 정보가 표시되며, 유저는 항목에 대한 액션을 취할 수 있습니다. 컬렉션에 있는 카드가 확장되는 순간, 확장된 카드에 강조 표시가 되도록 컬렉션의 다른 모든 카드에 80% 불투명도의 흰색 오버레이가 제공됩니다.
텍스트 필드
아웃라인 텍스트 필드
Crane는 브랜드 글꼴 및 색상으로 커스텀 된 아웃라인 텍스트 필드를 사용합니다. 크레인에서 빨간색을 보조 컬러로 사용하기 때문에 오류 상태 시에는 눈에 더 잘 띄게 하기 위해 주황색이 사용됩니다.
Crane의 커스텀화 된 아웃라인 텍스트 필드
왼쪽: 기본 아웃라인 텍스트 필드. 오른쪽: Crane’s 아웃라인 텍스트 필드는 커스텀 된 타이포그래피와 아이콘, 컬러를 사용합니다.입력된 텍스트 필드
Crane는 사용자 환경설정을 입력할 때 채워진 텍스트 필드(Filled text fields)를 사용합니다. 텍스트 필드의 모든 네 라인에 둥근 모서리를 가진 커스텀 된 형태를 지니며, 크레인 로고의 컬러, 타이포그래피, 그리고 아이콘을 사용합니다.
Crane’s 커스텀화 된 텍스트 필드
왼쪽: 기본 채워진 텍스트 필드. 오른쪽: Crane의 채워진 텍스트 필드는 사용자 지정 타이포그래피, 아이콘, 색상 및 모양을 사용합니다선택 컨트롤 및 슬라이더
크레인에서는 다양한 선택 컨트롤을 통해 유저가 검색 결과를 필터링하고 체크아웃 프로세스 중에 선택을 할 수 있게 하였습니다. 이러한 컨트롤에는 확인란, 라디오 버튼, 슬라이더 및 크레인 자체 브랜드 색상으로 사용자 지정된 스위치가 포함됩니다.
1. 크레인 확인란과 슬라이더
2. 크레인의 라디오 버튼
3. 크레인 스위치
탭
탭의 활성 상태를 나타내기 위해 Crane은 선택 영역을 알약 모양으로 하여 시각적 어포던스(visual affordance)를 주었습니다.
크레인 사용자 정의 탭
1. 기본 베이스라인 탭
2. Crane의 탭은 사용자 지정 타이포그래피, 색상 및 상태를 사용합니다. 커스텀화 된 선택 상태는 탭 주위에 알약 모양의 선과 컬러의 변경으로 나타냅니다.
백드롭(Backdrop)
백드롭 컴포넌트는 뒷 레이어의 탐색, 필터 및 상황별 동작과 앞 레이어의 메인 콘텐츠를 포함하여 크레인에 대한 메인 구조를 제공합니다. 그 결과 유저는 더 이상 수동적으로 정보를 검색하는 것이 아니라 좀 더 빠르게 액션을 취할 수 있게 됩니다. 한 화면에서, 쉽고 효율적인 플로우로 말이죠.
뒷 레이어는 흰색을 사용하는 앞 레이어와는 대비가 되는 크레인의 메인 컬러 보라색을 사용하도록 커스터마이징 되었습니다. 앞 레이어는 크레인 로고의 곡선과 비슷한 느낌이 나도록, 레이어 상단 모서리를 둥근 곡선으로 만들어 커스텀화 하였습니다.
스테퍼(Stepper)
스테퍼는 크레인 유저들이 항공편을 예약하고, 숙박하고, 식사 예약을 하는 것을 쉽게 해 줍니다. Crane은 데스크톱과 태블릿에 한 가지 스타일의 스테퍼를 사용하고, 다른 스타일의 스테퍼를 모바일에 사용합니다.
모바일에는 단계가 백드롭의 뒷 레이어에 표시되고, 관련 양식이 앞 레이어에 표시됩니다. 만약 유저가 앞 레이어에서 더 많은 정보를 보고 싶으면, 화면 상단에서 현재 프로세스 상태를 인지 할 수 있게 하는 접힌 상태(collapsed state)의 스테퍼를 활용하면 됩니다.
큰 크기의 태블릿과 데스크탑에서 Crane은 모든 스텝들을 화면 상단 공간에 맞추어 배치할 수 있습니다.
크기가 50%까지 조정됨모션
런치 스크린(Launch screen)
캐릭터 애니메이션, 이징 효과(easing)의 강조, 그리고 스테거(stagger)는 정교하고 프리미엄 느낌의 톤을 만들어냈습니다.
내비게이션 트렌지션
Crane의 내비게이션 트렌지션은 정교한 톤을 추가하기 위해 이징효과(easing)를 강조하고 듀레이션을 더 길게 하였습니다.
부모 자식(Parent child)
피어(Peer)
스테거(Stagger)
스테거는 새로운 리스트나 카드가 화면에 진입될 때 사용됩니다. 캐스케이드 효과(cascade effect)는 그 트렌지션에 세련된 느낌을 더해줍니다.
번역자 덧 : 이전 번역글 사례의 Basil 예시에서는 볼 수 없었던 새로운 머티리얼 컴포넌트가 사용되는 부분이 있어 흥미로웠습니다. Basil의 케이스처럼 Crane 앱 또한 그들의 브랜드만의 특징을 최대한 살릴 수 있는 적절한 머티리얼 컴포넌트를 고민했다는 것을 느낄 수 있었습니다.
여기까지 Material 연구 사례에 대한 소개와 Material design이 적용된 Crane 서비스 사례를 살펴봤습니다. 읽어주셔서 감사합니다! 다음 번역은 뉴스 어플인 Fortnightly에 대한 내용입니다. 다음 주에 만나요 :)
번역에 어색한 부분이 있거나 그 외 피드백이 있으신 경우에는 댓글이나 아래 링크에 의견 남겨주세요.
https://goo.gl/forms/hfSozfcTUBvewMeU2
Brunch | https://www.brunch.co.kr/@bigpic
Facebook | https://www.facebook.com/bigpic.design
Instagram | https://www.instagram.com/bigpic.design
