Google Material 2.0 번역 #02
Material Studies ~ Basil
안녕하세요. 주니어 디자이너를 위한 커뮤니티, Bigpicture입니다.
첫 번역글에 생각보다 큰 관심을 주셔서 감사한 한 주였습니다. 오늘은 지난 introduction 파트 이후로, 구체적인 적용 사례를 살펴볼 수 있는 Material studies 번역본을 공유합니다. Google Material 1.0 버전과는 다르게, 2.0 버전에서는 Material design이 적용된 서비스 사례를 보여주며 쉽게 이해하도록 도와줍니다. 총 일곱 가지 사례가 있으며 본 글에서는 Basil이라는 서비스 사례를 바탕으로 Material design이 어떻게 적용될 수 있는지 확인하실 수 있습니다.
머티리얼 연구 사례에 대해
머티리얼 연구 사례에서는 머티리얼 테마의 유연성과 독특한 앱을 만들 수 있는 컴포넌트를 보여줍니다.
머티리얼 연구 사례를 바탕으로 머티리얼 테마와 컴포넌트 선택에 참고하세요.
다음의 연구 사례는 서비스별 고유한 속성과 사용 사례로 디자인된 가상의 앱을 참고하여, 실제 디자인 및 제한 사항을 탐구합니다. 다음의 사례를 통해 다양한 디자인 결정이 이루어지는 방법을 확인할 수 있습니다. 또한 커머스, 음악, 생산성, 재무, 주문형 서비스 및 교육을 포함한 다양한 서비스 범주에서 각 연구 사례들의 표현방법을 보여줍니다.
서비스별 페이지에서는 머티리얼 연구 사례의 설계 이면의 근거, 컴포넌트 선택, 각 사례에서의 머티리얼 테마 사용 방법을 보여줍니다.
원칙
표현하는
머티리얼 테마에서 제공하는 기능을 강조하기 위해, 각각의 메터리얼 사례는 다른 브랜드를 표현합니다.
다양한
메터리얼 제작 및 컴포넌트가 가능한 많은 프로덕트의 요구에 충족함을 보여주기 위해, 메터리얼 사례는 다양한 유형의 프로덕트를 보여줍니다.
현실에 근거한
실제 프로덕트를 디자인할 때, 최대한 비슷하게 복제할 수 있도록 메인 유저를 보여주며, 기능적인 유저 플로우를 표시합니다. 또한 실제 환경에서의 제한 사항을 적용된 것을 확인할 수 있습니다.
Basil
Basil은 머티리얼 디자인 컴포넌트 및 테마를 사용하여 만든 흥미롭고 탐색하기 쉬운 브랜드 경험을 만드는 레시피 앱입니다.
Basil에 대하여
Basil은 요리사와 바텐더가 만든 레시피를 쉽게 찾아볼 수 있도록 해주는 서비스입니다. 이 서비스는 ‘접근하기 쉬운’, ‘직접적인’, 그리고 ‘놀라운’이라는 컨셉을 바탕으로 디자인되었습니다.
화려하지만, 기능적 미학을 담은
Basil의 대담한 타이포그래피와 색상은 컨텐츠에 대한 단순한 접근법과 결합되어, 탐색하고 이해하기에 쉬운 앱을 만듭니다.
프로덕트 구조
Basil 앱의 정보 구조(IA)에는 카탈로그 구조가 있습니다. 카탈로그에는 분류된 계층 데이터가 들어있으며, 최상위 수준에는 각각 하위 데이터가 포함될 수 있는 동등한 데이터가 포함됩니다.
4개의 최상위 섹션
Basil은 다음과 같은 4가지 최상위 섹션으로 나뉩니다 : 에피타이저, 주 요리, 디저트, 칵테일
각각의 요리법에는 두 가지 하위 섹션이 포함되어 있습니다 : 재료, 순서
네비게이션에 대한 새로운 접근 방식
보통 카탈로그 구조에 네비게이션 드로워가 사용되는 경우가 많지만, Basil의 인터랙션 모델은 여러 가지 컴포넌트를 사용하여 새롭고, 때로는 놀라운 경험을 만든다는 점에서 차별화됩니다.
태블릿, 모바일 및 데스크톱에 제공된 모습데스크톱과 태블릿 네비게이션
데스크톱 및 태블릿에서 Basil의 주요 섹션은 상단의 고정 탭을 통해 접근할 수 있습니다. 데스크톱에서는 각 섹션을 상하로 스크롤하여 레시피를 찾고, 태블릿에서는 좌우로 스크롤하여 찾습니다.
데스크톱에서 Basil의 주 요리 섹션은 상하로 스크롤됩니다. 50%까지 크기 조정됩니다.
태블릿에서 Basil의 주 요리 섹션은 좌우로 스크롤됩니다. 50%까지 크기 조정됩니다.레시피를 선택하면 Ingredient와 Directions을 전환하기 위해 탭이 사용됩니다. 커스터마이징 된 Stepper 컴포넌트를 사용하여 레시피 순서를 표시합니다.
태블릿에서 Basil의 구체적인 레시피 화면은 tab과 stepper를 사용합니다.모바일 네비게이션
모바일에서 Basil의 메인 섹션에서는 네비게이션 드로워를 보기 위해 아래로 스와이프 해야 합니다.
섹션이 선택된 후에는, 레시피를 찾기 위해 좌우로 스크롤해야 합니다.
레시피가 선택했을 때, 하단 탭은 재료와 순서에 접근하도록 합니다.
하나의 탭이 선택되면, 하단 시트가 나오며 애니메이션을 통해 선택한 콘텐츠로 화면을 채웁니다. 이 시트에서 사용자는 재료와 순서를 전환하거나 아래로 스와이프 하여 화면 밖으로 이동할 수 있습니다.
모바일에서, 아래 시트를 통해 특정한 레시피의 재료와 순서를 찾을 수 있습니다.
레이아웃
그리드 시스템
Basil은 유연한 열과 패딩을 사용하는 반응형의 그리드 시스템을 사용합니다. 따라서 화면의 너비(모바일, 태블릿 또는 데스크톱)에 따라 크기가 조정됩니다.
레이아웃 그리드 : Basil 가운데 정렬 타입
Basil의 헤드라인은 모바일 화면의 너비에 따라 서체의 크기가 반응형으로 변화합니다.
레시피 제목 크기는 화면의 너비를 채우기 위해 동적으로 변화합니다.
계층
Basil은 UI 요소 간의 계층을 표시하기 위해 음영을 사용하지 않습니다. 대신, 컨텐츠는 패럴럭스 모션과 투명도를 사용하여 서로 다른 계층에 배치됩니다.
Basil은 투명도를 사용하여 UI 요소의 레이어를 표시함으로써 계층의 차이를 표현합니다.
약간의 투명한 하단 시트는 화면에서 애니메이션을 통해 사용자는 아래 메인 레시피 화면을 볼 수 있습니다. 이러한 레이어들은 사용자가 새로운 화면으로 이동하지 않고, 보고 있던 컨텐츠 위의 시트와 상호작용함을 보여줍니다.
텍스트가 이미지 위로 스크롤될 때, 이중 톤으로 이미지 처리되어 텍스트를 읽을 수 있도록 합니다.
컬러
컬러 테마
Basil은 과일과 채소의 깊고 풍부한 색에 영감을 받은 색상을 사용합니다.
- Basil의 메인 컬러는 올리브 그린입니다.
- Basil의 서브 컬러는 오렌지입니다.
Basil의 컬러 테마타이포그래피
서체
1. Montserrat
2. Lekton
서체 크기
Basil은 두 가지 서체를 사용합니다 : Montserrat, Lekton.
두 가지 서체는 Basil이라는 특징을 더하면서 어울리는 한 쌍을 이룹니다.
Basil의 타입 스케일Montserrat
Montserrat는 넓은 글자 형태를 가진 산세리프 폰트입니다. Basil은 디스플레이 서체뿐만 아니라 본문, 캡션, 버튼 텍스트용으로 사용됩니다.
Montserrat의 글자 형태
Montserrat와 Roboto 비교Lekton
Lekton은 Olivetti 타자기에 사용된 일부 서체에서 영감을 받았습니다. 글리프들은 ‘trispaced’되어 있는데, 이는 동일한 3개의 모듈식 유닛을 사용하여 제작되었다는 것을 의미합니다. 이 서체는 동일 간격을 가진 글꼴과 유사하게 예측 가능한 정렬 구조를 가지고 있습니다. Lekton은 Basil의 작은 헤드라인과 서브타이틀로 사용됩니다.
Lekton의 글자 형태
Lekton과 Roboto 비교아이콘
Basil의 커스텀 아이콘들은 컨텐츠에 접근 가능하도록 단순하고 기발하게 디자인되었습니다.
1. 일관성을 유지하기 위해, Basil의 모든 아이콘은 동일한 기본 그리드 구조를 공유합니다.
2. Basil의 아이콘 모음
Basil의 아이콘은 메인 컬러(올리브 그린)을 사용합니다. Basil의 서브 컬러(오렌지)는 아이콘에 사용되어 음식 유형에 포함 여부를 나타냅니다. (예: 글루텐 및 계란)
Basil의 서브 컬러는 글루텐과 계란이 없는 레시피를 나타내기 위해 사용됩니다.컴포넌트
리스트
Basil은 리스트 컴포넌트를 사용하여 각 레시피의 성분을 표시합니다. 각 리스트에는 Basil의 타이포그래피와 아이콘이 사용되며, 각 성분과 수량을 연결하는 점선으로 맞춤화되었습니다.
Basil의 맞춤화된 리스트하단 시트
모바일에서는 Basil은 레시피 재료와 순서를 제공하기 위해 확장되는 하단 시트를 사용했습니다.
하단 탭을 누르면 컨텐츠 위에 화면이 올라오며, 이 화면에서 레시피 재료 탭과 순서 탭을 클릭하여 전환할 수 있습니다. 시트의 배경은 생성된 화면 위에 있음을 사용자에게 알리고 사용자는 언제든지 시트를 사라지게 할 수 있습니다.
탭
데스크톱 및 태블릿에서 Basil은 탭을 통해 섹션을 이동합니다. 탭은 화면 중앙과 정렬된 고정 너비 영역에 균등하게 분포됩니다.
Basil은 데스크톱 및 태블릿에서의 탐색을 위해 맞춤화된 탭을 사용합니다.
1. 머티리얼 가이드 기준 탭
2. Basil의 데스크톱 및 태블릿 네비게이션 탭은 맞춤화된 타이포그래피, 컬러, 상태 값을 사용합니다. 선택된 탭의 상태에서는 더 굵은 텍스트를 사용합니다.
모바일에서, 탭은 레시피 재료와 순서 사이를 전환할 수 있게 해 줍니다. 기본적으로 이러한 탭은 레시피 화면 하단에 표시됩니다. 탭을 선택하면 레시피의 재료 탭과 순서 탭이 화면 상단으로 이동합니다.
1. 먼저 레시피의 탭이 화면 하단에 표시됩니다.
2. 이를 누르면 탭이 화면 상단으로 이동하여 사용자가 화면 이동을 할 수 있습니다.
1. 머티리얼 가이드 기준 탭
2. Basil의 레시피 탭은 맞춤화된 타이포그래피와 컬러, 상태 값을 사용합니다. 맞춤화된 선택 값에서는 기존보다 굵어진 텍스트 밑에 선이 추가됩니다.
스테퍼
Basil은 레시피 순서에 선이 없는 스테퍼를 사용하기 때문에 사용자는 원하는 순서대로 다른 단계를 이동할 수 있습니다. 스테퍼는 맞춤화된 상하 간격을 포함하여 Basil의 타이포그래피와 색상표를 사용합니다.
1. Basil은 배율을 활용한 스테퍼를 사용하며, 최대 200%까지 확대됩니다.
2. Basil의 스테퍼는 화면의 오른쪽에 나타납니다.
모션
런치 스크린
Basil의 로고 애니메이션은 앱을 통한 패럴럭스를 사용하였습니다. 하단에 위치한 화살표의 미세한 움직임은 사용자가 스크롤하도록 돕습니다.
네비게이션 트랜지션
Basil은 앱을 탐색할 때 이징, 패럴럭스, 간결한 트랜지션을 사용합니다.
모바일
패럴럭스는 요소 간의 계층을 표시하고 트랜지션 중에 시각적인 흥미를 유도하는 데 사용됩니다.
태블릿과 데스크톱
태블릿과 데스크톱에서, Basil은 단순하고 깔끔한 전환을 위해 간결한 트랜지션을 사용합니다. Z축의 변환은 페이드 애니메이션과 결합하여 간결한 트랜지션을 만듭니다.
스트레치
스테퍼와 같은 컴포넌트는 스트레치 모션을 사용하여 단순하면서도 흥미로운 인터랙션을 표현합니다.
번역자 덧 : Material 사례이지만 커스터마이징 된 컴포넌트가 꽤나 많았다는 점이 흥미로웠습니다. 적정한 선에서 가이드를 지키되, 디자인의 다양성을 추구한다는 것을 느낄 수 있었습니다. 실제로 디자이너가 아닌 분들도 Material design을 참고하여 작업하시는 경우를 많이 보았는데요. 단순히 컴포넌트를 그대로 가져다 쓰는 것이 아니라 어떻게 서비스에 알맞게 활용할 수 있을 것인지를 고민해보는 과정도 필요할 것 같습니다.
여기까지 Material 연구 사례에 대한 소개와 Material design이 적용된 Basil 서비스 사례를 살펴봤습니다. 읽어주셔서 감사합니다! 다음 번역은 여행 서비스 앱인 Crane에 대한 내용입니다. 다음 주에 만나요 :)
번역에 어색한 부분이 있거나 그 외 피드백이 있으신 경우에는 댓글이나 아래 링크에 의견 남겨주세요.
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
