Google Material 2.0 번역 #07
Material Studies - Reply
안녕하세요. 주니어 디자이너를 위한 커뮤니티, Bigpicture입니다.
Google Material 2.0의 구체적인 적용 사례를 살펴볼 수 있는 Material studies 번역본 7탄 Reply 편을 공유합니다. Google Material 2.0 버전에서는 Material design이 적용된 총 7가지의 서비스 사례를 제공하여 독자가 더 쉽게 이해하도록 도와줍니다. 본 글에서는 Reply이라는 서비스 사례를 바탕으로 Material design이 어떻게 적용될 수 있는지 확인하실 수 있습니다.
Reply
Reply는 Material Design Components와 Material Theming을 사용하여 브랜드 커뮤니케이션 경험을 만드는 이메일 앱입니다.
목차
Reply에 대하여
프로덕트 구조
레이아웃
타이포그래피(Typography)
아이콘(Iconography)
모양
컴포넌트(Components)
모션(Motion)
Reply에 대하여
Reply는 개인과 집단에서 서로 간 의사소통하는 것을 도와주는 앱입니다. 이 제품은 명료하게 읽기 쉽고 직관적이며 사용이 편리하도록 디자인되었습니다. 또한 Reply 브랜드는 친근감과 능숙함 그리고 약간의 엉성한 특성 또한 지니고 있는 앱입니다.
기능적 미학(Functional aesthetic)
Reply는 의사소통을 강조하고 있습니다. 결과적으로 앱의 디자인을 기능적 특성에 우선순위를 두고, 기능적인 목적이 없는 설계 요소보다 사용 편의성을 우선으로 합니다.
Reply의 브랜딩은 종종 브랜드 로고에서 진입하는 내비게이션 드로어(Navigation drawer)처럼 사용자 동작(action)과 쌍을 이루기도 합니다.
제품 구조 (Product Architecture)
Reply는 전자 메일 응용 프로그램과 유사한 제품 구조를 사용합니다. 즉, 새 메시지 및 보관 메시지를 포함하는 받은 편지함과 해당 메시지와 관련된 작업을 구성하고 수행하는 UI입니다. 메시지는 별표 표시, 전송, 삭제, 스팸으로 표시 또는 사용자가 설정한 사용자 정의 방식으로 구성할 수 있습니다.
사용자의 태스크에 중점을 두기 (A focus on user tasks)
사용자 작업은 주로 콘텐츠 생성 및 소비와 관련되기 때문에 다른 UI 요소에 대한 콘텐츠로 화면이 구성됩니다. Reply는 콘텐츠 탐색의 충분한 공간을 확보하기 위해 데스크탑, 태블릿 및 모바일에서 각기 다른 탐색 패턴을 사용합니다.
Reply는 태블릿(레일), 모바일(하단 앱 바) 및 데스크탑(네비게이션 드로어)에서 서로 다른 탐색 패턴을 사용합니다.
내비게이션 드로어(Navigation drawer)
데스크탑에서는 Reply가 표준 네비게이션 드로어를 사용합니다.
드로어 구성(Drawer organization)
드로어 구성(Drawer destinations)은 아이콘과 텍스트를 사용하여 표현됩니다. 네비게이션 드로어 상단에는 설정, 계정 전환 및 Reply 로고와 쌍을 이루는 캐럿 (또는 화살표)이 있습니다.
드로어 인터렉션(Drawer interactions)
탭 하면, 로고가 서랍처럼 rail 안으로 접힙니다.
Reply의 표준 네비게이션 드로어는 탐색 항목, 계정을 전환한 사람 및 설정에 접근할 수 있도록 해줍니다. Reply 로고를 누르면, 드로어가 Rail 속으로 합쳐집니다.
하단 앱 바(bottom app bar)
모바일에서는 하단의 앱 바(bottom app bar)를 사용하여 탐색을 시작합니다.
하단 앱 바 인터렉션
Reply 로고를 누르면 설정 아이콘과 계정 아바타(계정을 전환할 수 있음)가 있는 하단 네비게이션 드로어를 표시합니다.
Reply 로고를 다시 누르면 네비게이션이 닫히고 하단의 하단 앱 바가 기본(default) 상태로 돌아갑니다.
Reply의 하단 앱 바(bottom app bar)
레일 네비게이션 (Rail navigation)
태블릿에서 Reply는 각 목적지가 아이콘으로 표시되는 Rail navigaiton을 사용합니다.
레일 인터랙션 (Rail interactions)
Reply 로고를 눌러 레일을 표준 탐색함에 열 수 있습니다. 로고 옆에 표시된 화살표는 로고가 대화형임을 보여줍니다.
Rail navigaiton은 매우 적은 공간을 차지하면서 많은 수의 목적지를 표시할 수 있으므로 태블릿에서 사용하기에 이상적입니다. Rail navigaiton이 열리면 사용자 정의 폴더가 표시되어 사용자가 폴더 제목 텍스트를 읽을 수 있습니다.
축소되면 레일에 사용자가 만든 사용자 지정 폴더가 포함되지 않습니다. 이는 사용자 정의 폴더가 모두 동일한 아이콘을 사용하기 때문에 아이콘만으로는 구별할 수 없기 때문입니다.
Reply의 Rail navigaiton은 Reply 로고를 탭 하면 네비게이션 드로어를 나타냅니다.
Layout
그리드 시스템
Reply는 반응형 그리드를 사용하여 패딩 및 열 크기가 모바일, 태블릿 및 데스크탑에서 변경되도록 합니다. 콘텐츠는 메시지가 상호 작용할 때 확장되고 축소되는 열에 배치됩니다.
Reply의 그리드 시스템, 50 %로 축소
높이
Reply는 색상을 사용하여 구성 요소를 구분합니다. 예를 들어, 카드 배경이 회색인 반면 카드는 흰색 표면 색을 가지고 있기 때문에 카드의 컨테이너를 볼 수 있습니다.
고밀도 레이아웃
Reply는 때때로 밀도가 높은 내용을 표시하기 때문에 그림자를 제거하면 시각적 복잡성을 줄일 수 있습니다.
또한 항목을 서로 간에 더 작은 패딩으로 만들 수 있어 더 많은 공간을 확보할 수 있습니다.
Reply의 카드 컨테이너에는 앱의 회색 배경에 눈에 띄는 흰색 표면이 있습니다.
색상
색상 테마
Reply의 색상 테마는 기본 색상(진한 파란색 - 회색)과 보조 색상(주황색)을 사용합니다.
보조 색상은 거의 사용되지 않기 때문에 Reply의 UI는 기본 색상의 베리에이션을 사용합니다. 이 미묘한 색상 테마로 인해 산만함 없이 내용을 쉽게 읽을 수 있으며 사진 아바타를 쉽게 볼 수 있습니다.
Reply의 보조 색상이 사용될 때마다 두드러진 영향을 줍니다.
색상 테마
타이포그래피
서체 크기
Reply는 Work Sans를 Typeface로 사용합니다. 유형 척도의 모든 항목은 Reply의 내용에 필요한 서체의 다양성을 제공합니다.
서체 크기는 Light, Regular, Medium, SemiBold 및 Bold의 6가지 가중치를 사용하여 사용 가능한 다양한 가중치를 사용합니다.
Reply의 서체 크기
Work Sans의 문자 양식
Roboto와 Work Sans 비교
아이콘(Iconography)
Reply의 아이콘은 인식 및 기능에 초점을 맞추면서 브랜드를 표현하는 미묘한 스타일을 가지고 있습니다.
1. 일관성을 유지하기 위해 모든 Reply 아이콘은 동일한 기본 격자 구조를 공유합니다. 2. Reply 아이콘 모음
모양(Shape)
카테고리
구성 요소는 크기에 따라 모양 카테고리로 그룹화됩니다. 모양 범주를 사용하면 여러 구성 요소 값을 한 번에 설정할 수 있습니다. 모양에는 다음이 포함됩니다.
- 작은 컴포넌트
- 중간 컴포넌트
- 큰 컴포넌트
Reply의 모양 범주
(1) 작은 컴포넌트 (2) 중간 컴포넌트 (3) 큰 컴포넌트
작은 컴포넌트
확장된 FAB는 컴포넌트 카테고리에 속합니다. 코너는 50%의 R값(Radius)으로 라운드 됩니다.
중간 컴포넌트
카드는 중간 컴포넌트 카테고리에 속합니다. 코너는 50%의 R값(Radius)으로 라운드 됩니다.
큰 컴포넌트
하단 시트는 큰 컴포넌트 카테고리에 있습니다. 코너는 12dp의 R값(Radius)으로 라운드 됩니다.
* 하단 시트는 상단 왼쪽 및 상단 오른쪽 모서리만 형성할 수 있습니다.
컴포넌트
플로팅 액션 버튼(Floating Action Button)
모바일에서 Reply는 하단 앱 바(bottom app bar)에 커스텀 된 FAB가 알맞게 들어가 있습니다.
Reply의 커스텀 된 FAB는 하단 앱 바(bottom app bar)에 알맞게 들어가 있습니다.
커스텀 되지 않은 FAB
Reply의 FAB은 커스텀 된 색상과 아이콘을 사용합니다.
확장된 FAB
데스크톱 및 태블릿에서 Reply는 네비게이션 드로어와 짝을 이루는 커스텀 된 확장 FAB을 사용합니다.
네비게이션 드로어 내 커스텀 된 확장 FAB하단 앱 바, 하단 시트(Bottom app bar, bottom sheet)
모바일에서는 Reply가 내비게이션 및 중요한 작업을 위해 커스텀 된 하단 앱 바를 사용합니다.
1. 기본(default) 하단 앱 바
2. Reply의 디폴트 하단 앱 바는 커스텀 된 아이콘, 색 및 모양을 사용합니다. Reply의 로고가 컴포넌트에 통합되어 메뉴 아이콘으로 작동합니다. 커스텀 화한 하단 앱 바에는 FAB가 있습니다.
하단 앱 바(bottom app bar)
모바일에서 Reply의 하단 앱 바는 탐색 및 액션을 수행하는 주요 방법입니다.
문맥 액션 바(Contextual action bar)
사용자가 여러 항목을 선택하여 적용하려는 경우, 하단 앱 바는 문맥 액션 바(contextual action bar)로 변환됩니다.
하단 네비게이션 드로어(bottom navigation drawer)
Reply의 로고를 누르면 하단 앱 바에 탐색 항목과 계정 전환 기능이 있는 하단 내비게이션 드로어가 나타납니다.
플로팅 액션 버튼(Floating action button)
FAB가 남아 있지만 하단 앱 바의 스크롤 화면에서 벗어납니다.
카드
Reply는 사각으로 사용자 정의된 카드로 전자 메일을 표시합니다. 색상은 각 카드의 경계를 나타내기 때문에 (높이 표시 없음) 카드 사이의 여백은 매우 작습니다. 이 작은 패딩은 화면에 더 많은 콘텐츠를 넣을 수 있게 합니다.
왼) 카드를 오른쪽으로 스와이프하면 전자 메일을 강조표시하는 동작이 나타납니다.
우) 카드를 왼쪽으로 스와이프하면 전자 메일을 삭제하는 동작이 나타납니다.
Chips
Reply의 엔트리 Chip은 맞춤형 타이포그래피, 색상 및 이미지 크기 조정을 적용합니다.
레이아웃, 타이포그래피 및 색상을 조정하면 Chip 구성 요소가 Reply의 브랜드와 시각적으로 유사해집니다.
기본 입력 Chip
Reply의 엔트리 Chip은 사용자 정의 색상과 타이포그래피를 사용합니다. 아바타 이미지는 더 커지도록 커스터마이징되어 삽입되지 않고 Chip의 모양을 완성합니다.
모션(Motion)
실행 화면
Reply의 로고 애니메이션은 컬링 된 종이에서 영감을 얻은 경로를 추적합니다.
처음 Reply를 시작하면 애니메이션 실행 화면이 표시됩니다.
네비게이션 전환(Navigation transitions)
Reply는 효율성을 높이기 위해 짧은 지속 시간과 표준 완화를 사용합니다.
이러한 네비게이션 전환(Navigation transitions)은 표준 300ms 대신 250ms를 사용합니다.
아이콘& 일러스트레이션(Icons & illustrations)
애니메이션 일러스트레이션은 사용자의 받은 메일함에 있는 모든 항목을 마무리하는 것과 같이 user Journey의 주요 지점에서 연결을 만듭니다.
남은 두 개의 전자 메일이 보관되어 축하 애니메이션이 시작됩니다.
로딩 중 시퀀스를 새로 고침하는 동안 Reply의 로고 애니메이션이 반복됩니다.
읽어주셔서 감사합니다! 다음 번역은 다양한 패션 및 라이프 스타일 아이템에 대한 브랜딩을 볼 수있는 Shrine앱 대한 내용입니다. 다음 주에 만나요 :)
번역에 어색한 부분이 있거나 그 외 피드백이 있으신 경우에는 댓글이나 아래 링크에 의견 남겨주세요.
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
