Google Material 2.0 번역 #08
Material studies - Shrine
안녕하세요. 주니어 디자이너를 위한 커뮤니티, Bigpicture입니다.
Google Material 2.0의 구체적인 적용 사례를 살펴볼 수 있는 Material studies 번역본 8탄 Shrine 편을 공유합니다. Google Material 2.0 버전에서는 Material design이 적용된 총 7가지의 서비스 사례를 제공하여 독자가 더 쉽게 이해하도록 도와줍니다. 본 글에서는 Shrine이라는 서비스 사례를 바탕으로 Material design이 어떻게 적용될 수 있는지 확인하실 수 있습니다.
Shrine
Shrine은 다양한 패션과 라이프스타일 제품에 대한 브랜드를 표현하기 위해 머티리얼 디자인 컴포넌트와 Material Theming을 사용하는 리테일 앱입니다.
목차
Shrine에 대하여
프로덕트 구조 (Product architecture)
레이아웃
컬러
타이포그래피 (Typography)
아이콘 (Iconography)
모양
컴포넌트 (Component)
모션 (Motion)
Shrine에 대하여
Shrine 앱은 라이프 스타일과 패션 아이템을 특화한 온라인 시장을 제공합니다. Shrine의 브랜드 미학은 현대적, 우아함, 정교함입니다. Shrine는 다양한 브랜드와 상품의 통일된 컨셉을 제공합니다.
최소한의 미학
Shrine는 미니멀리즘의 미학을 이용해, 콘텐츠와 행동이 사용자 경험의 최전선을 이루도록 합니다. Shrine의 브랜드는 다양한 상품과 브랜드를 위한 발판을 통일하는 중요한 역할을 합니다.
비주얼 테마
앵글컷
앵글 컷은 Shrine 앱에서 시각적으로 볼 수 있는 테마이며, 다양한 구성 요소에 사용됩니다. Shrine 로고 모양을 반영하고 있으며, Shrine 브랜드의 연장선 역할을 합니다.
Shrine 로고와 Shrine UI에 앵글 컷의 예시겹치는 시트
Shrine의 인터랙션 모델의 기본은 세 개의 겹쳐진 시트입니다. 맨 아래 시트는 네비게이션과 브랜딩 요소를 가지고 있고, 가운데 시트는 주요 내용을 가지고 있고, 맨 위 시트는 쇼핑 카트를 가지고 있습니다.
1. 하단 시트 2. 중앙 시트 3. 상단 시트프로덕트 구조
Shrine 앱의 정보 아키텍처는 카탈로그 구조를 가지고 있습니다. 카탈로그는 하위 항목을 포함할 수 있는 상위 수준으로 구성된 분류된 데이터를 포함합니다. Shrine의 최상위 범주는 물건의 종류(신발, 액세서리, 드레스)를 분류할 수 있고, 이를 서로 연관지어 볼 수 있습니다.
카탈로그 구조를 선택하면 사용자는 관심 영역을 탐색하고 항목을 서로 비교하며 세부사항을 볼 수 있습니다.
네비게이션
Shrine은 모바일, 태블릿, 데스크탑 등 다른 타입의 네비게이션을 사용합니다.
모바일은 백드롭 컴포넌트의 하단 레이어 안에 네비게이션 아이템을 둡니다.
태블릿은 네비게이션 탭을 사용합니다.
데스크탑은 표준 네비게이션 드로워를 사용합니다.
비록 다른 네비게이션 패턴을 사용하지만, 그들 사이의 주요한 일관성을 공유합니다.선택 인디케이터 (Selection indicators)
모든 네비게이션 패턴은 동일한 선택된 상태를 공유합니다: 네비게이션 항목을 선택하면 그 뒤에 삼각형 모양이 나타납니다. 이러한 선택 인디케이터는 사용자가 자신이 어느 섹션에 있는지 알 수 있도록 합니다.
Shrine의 선택 인디케이터는 어두운 서체와 삼각형 모양을 사용합니다.쇼핑 카트
쇼핑 카트는 화면 오른쪽 하단에 있는 시트를 통해 접근할 수 있습니다. 카트에서 항목을 추가하거나 제거하면
변경 사항을 반영하도록 시트가 동적으로 업데이트됩니다.
이 시트는 내용을 표시하도록 확장하거나 카트 아이콘을 클릭하여 쇼핑 카트 화면으로 이동할 수 있습니다.
레이아웃
그리드 시스템
Shrine는 반응형 그리드 시스템을 사용하여 패딩과 기둥 크기를 모바일, 태블릿, 데스크톱 사이에서 변경할 수 있습니다.
수평 그리드
Shrine의 모바일과 태블릿 레이아웃 그리드는 가로로 스크롤할 수 있도록 커스터마이징 되었습니다. 기둥, 거터, 여백은 위에서 아래가 아닌, 왼쪽에서 오른쪽으로 펼쳐져 있습니다.
컬러
Shrine의 컬러 테마는 기본색인 Shrine 핑크색의 가볍고 어두운 변형을 이용한 단색이다. Shrine의 1차색(Shrine Pink 100)은 뒷층을 채우고, 2차색(Shrine Pink 50)은 아래 시트를 채웁니다. 주요 콘텐츠는 흰색이며, Dark Shrine Pink 900은 타이포그래피와 아이콘그래픽에 사용됩니다.
Shrine의 컬러 팔레트
1. Shrine Pink 100은 눈에 잘 띄도록 "카트에 추가" 버튼에 사용됩니다.
2. Jague Pink 100은 선택되지 않은 칩의 윤곽을 그리는데 사용되고 900은 선택된 칩에 사용됩니다.
컬러와 이미지
Shrine는 이미지 처리를 사용하여 상태 변화(선택 등) 또는 스크림(scrim)을 나타낸다. 맞춤 이미지 처리는 Shrine 브랜드를 강화하는 한 방법입니다.
이미지 처리는 선택과 같은 상태 변화를 나타내기 위해 사용됩니다.
아래 대화상자에 사용되는 스크림은 Shrine Pink를 사용하도록 맞춤화되었습니다.타이포그래피(Typography)
타입 크기
Shrine의 종류 척도는 앱 콘텐츠에 필요한 타이포그래픽 다양성을 제공합니다. 타입 스케일의 모든 아이템은 Rubik Light, Regular, Medium을 포함한 서체로서 Rubik을 사용합니다.
Shrine의 타입 크기Rubik
Shrine는 서체를 위해 Rubik을 사용합니다. Rubik은 약간 둥근 모서리와 선택할 수 있는 많은 무게를 가진 산세리프 서체입니다. Rubik은 읽기 쉽고 세련되고 현대적인 서체로, 모서리가 둥글며, 따뜻하고 친근하며 재미있는 성격을 지녔기 때문에 Shrine에 잘 어울립니다.
Rubik의 글자형태(letterforms)
Rubik과 Roboto 비교아이콘(Iconography)
Shrine에서는 Material Design의 기본 아이콘 기록 시스템을 사용합니다. 이러한 아이콘은 작은 크기로 읽을 수 있고 선명하도록 구성되어 있습니다.
1. 일관성을 만들기 위해 모든 Shrine의 아이콘은 동일한 기본 격자 구조를 공유합니다.
2. Shrine의 아이콘 모음.
모양
컴포넌트는 크기에 따라 모양으로 그룹화됩니다. 모양 카테고리를 사용하면 한 번에 여러 성분 값을 설정할 수 있습니다. 모양 카테고리는 다음과 같습니다.
Shrine의 모양 카테고리
소형 컴포넌트 / 중형 컴포넌트 / 대형 컴포넌트소형 컴포넌트
중형 컴포넌트
대형 컴포넌트
*하단시트는 왼쪽 상단이나 오른쪽 상단 코너에만 형태를 변형할 수 있습니다.컴포넌트(Component)
버튼
텍스트 버튼
Shrine의 텍스트 버튼은 화면 배경색을 적용하고 높낮이 표현은 없습니다.
Shrine의 강조 표시가 낮은 버튼에는 컨테이너가 없고 높낮이 표현이 없습니다.
포함된 버튼
Shrine의 컨테이너 버튼은 전용 컬러와 타이포그라피를 사용합니다. 다음을 고정하여 수정할 수 있습니다.
곡선의 코너
너비의 연장
Shrine의 컨테이너 버튼은 메인 컬러인 Shrine Pink 100을 사용하며 높낮이 표현을 합니다.
칩 (Chips)
Shrine은 제품 상세페이지에 있는 선택 칩을 사용합니다. 이러한 칩은 항상 둥근 모서리를 가지고 있기 때문에 버튼과 구별됩니다.
Shrine의 맞춤화된 선택 칩
탭 (Tab)
Shrine는 데스크톱 및 태블릿에서 탐색하기 위해 tab을 사용합니다. 그들은 맞춤화된 컬러, 타이포그라피 및 상태를 사용합니다.
활성 탭을 나타내기 위해 맞춤화된 형태가 탭 뒤에 배치됩니다.
1. 맞춤화되지 않은 탭입니다. / 2. Shrine 탭은 맞춤화된 형태, 컬러, 타이포그라피 및 상태를 사용합니다.네비게이션 드로어와 백드롭
Shrine는 모바일에서 맞춤화된 내비게이션 드로어를 사용합니다. 백그라운드 구성 요소의 백 레이어를 눌러 접근할 수 있습니다. Shrine의 내비게이션 드로어는 맞춤화된 타이포그라피, 컬러 및 상태를 사용합니다. 중앙 정렬 유형은 또 다른 맞춤화 기능입니다.
Shrine의 배경은 맞춤형 컬러와 형태를 사용합니다. 백 레이어는 앱의 기본 색상을 사용하며, 프론트 레이어의 왼쪽 상단 모서리에 맞춤화된 각도가 표현됩니다.
이미지 리스트
엮인 이미지 리스트
Shrine는 엮인 이미지 리스트를 사용하여 콘텐츠를 표시합니다. 저장된 이미지 리스트는 (특정 비율에 따라) 서로 다른 크기의 컨테이너를 사용하여 리듬에 맞는 레이아웃을 만들며, 연관 컨텐츠를 간편하게 탐색하는 데 가장 적합합니다.
엮인 이미지 리스트는 각 항목의 강조와 새로움을 높입니다. 또한 사용자가 컨텐츠를 빠르게 스캔하지 못하도록 하기 때문에 Shrine의 컨텐츠에 이상적입니다.
Shrine의 엮인 이미지 리스트시트
Shrine은 쇼핑카트에 쉽게 접근할 수 있도록 확장된 하단 시트를 사용합니다.
모션(Motion)
Shrine의 모션 디자인은 우아하고 즐거운 톤을 만들기 위해 완화, 더 긴 지속 시간, 그리고 충격을 강조하였습니다.
런치 스크린
Shrine의 제품 아이콘 애니메이션은 로고의 기하학적 형태를 가지고 재생됩니다.
움직이는 아이콘
애니메이션 아이콘은 사용자의 여정을 안내하는 동시에 즐거움을 더해줍니다.
네비게이션 트랜지션
Shrine의 네비게이션 전환은 편안하고 우아한 톤을 얻기 위해 easing과 긴 기간을 강조하였습니다. 시간 간격띄우기는 카트 및 체크아웃 버튼과 같은 중요한 요소에 주의를 환기하는 데 사용됩니다. 백 레이어 컨텐츠에 비틀림 페이드가 사용되어 계단식 효과를 생성합니다.
유저 교육
처음으로 카트에 항목을 추가할 때 교육용 애니메이션이 카트에 있는 항목의 위치를 표시합니다.
오늘도 저희의 번역글을 읽어주셔서 감사합니다!
로고의 형태적 요소를 전체적인 UI에 반영한 점이 돋보였던 Shrine의 사례였습니다. 통일된 UI가 주는 브랜딩의 힘을 배울 수 있었네요. Material Studies는 해당 편으로 마무리가 됩니다. 다음 번역은 컴포넌트 하나하나를 분석하는 Material Foundation에 대한 내용입니다. 다음 주에 만나요 :)
번역에 어색한 부분이 있거나 그 외 피드백이 있으신 경우에는 댓글이나 아래 링크에 의견 남겨주세요.
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
