Google Material 2.0 번역 #05
Material Studies ~ Owl
안녕하세요. 주니어 디자이너를 위한 커뮤니티, Bigpicture입니다.
이번 글에서는 구글 머티리얼 2.0의 연구사례인 교육용 앱 'Owl'을 다루고 있습니다. 본 글에서는 'Owl'이라는 서비스 사례를 바탕으로 Material design이 어떻게 적용될 수 있는지 확인하실 수 있습니다.
Owl
Owl은 Material Design 구성 요소와 Material Theming을 사용하여 활기차고 동기 부여가 뛰어난 브랜드 경험을 만드는 교육용 앱입니다.
Owl에 대하여
Owl은 디자인, 예술, 건축, 패션에 관한 새로운 기술을 연구하고 배우려는 사람들을 위한 코스를 제공하는 교육용 앱입니다. Owl 브랜드는 '에너지, 대담함, 재미'라는 브랜드 속성을 표현하기 위해 대담한 색, 형태, 활자를 사용합니다.
대담한 미학 (Bold aesthetic)
Owl의 디자인은 탐험과 성장을 표현하는 대담한 미학을 사용하여, 새로운 기술을 배우는 것에 대한 열정과 흥분을 반영합니다. UI에는 채워지지 않은 도형이 포함되어 있어, 사용자가 새로운 콘텐츠와 코스를 채우도록 초대합니다. 카피라이팅은 초대적이고, 할 수 있는 어조로 말합니다.
프로덕트 구조
Owl는 3가지 섹션으로 나뉘며, 각 섹션에는 자체 색상 테마와 상호 작용 모델이 있습니다.
1. 맞춤 설정 (노란색)
2. 찾아보기 (파란색)
3. 학습 (마젠타)
50%로 축소허브 및 스포크 구조
앱의 정보 아키텍처는 허브 및 스포크 구조를 사용합니다.
찾아보기 섹션은 교육용 클래스의 형태로, 사용자가 다양한 "스포크" 또는 하위 노드를 사용할 수 있는 "허브" 역할을 합니다. 클래스를 선택하고 사용자가 학습 섹션에 들어가면, 해당 클래스가 "허브"가 되고 각 섹션은 "스포크"가 됩니다.
이 구조는 앱의 찾아보기 및 학습 섹션에 적용되며, 개인화 섹션은 온보드 섹션에 적용됩니다.
모바일 Owl의 개인화 섹션섹션 1 : 개인화
'개인화' 섹션은 관심 영역을 선택하는 데 전념합니다. 노란색 테마가 특징입니다. 이 섹션은 주문형 칩이 선택 가능한 코스 과목을 나타내는 온 보딩의 한 형태입니다. 이 섹션은 맞춤형 칩이 선택 가능한 코스 과목을 나타내는 온보딩의 한 형태입니다.
항해
오른쪽 하단 모서리의 파란색 부동 작동 버튼을 눌러 탐색할 수 있습니다. 설정 아이콘을 통해 설정에 접근할 수 있습니다.
하단 탐색 메뉴를 사용하여 모바일의 내 코스 페이지를 방문하십시오.섹션 2 : 찾아보기
'찾아보기' 섹션은 사용자의 관심 분야에 대한 "허브"입니다. 파란색 테마가 특징입니다.
항해
이 섹션에는 3 가지 최상위 탐색 대상이 포함되어 있습니다.
내 코스
추천
탐색
모바일에서는 Owl가 하단 탐색 바를 사용하여 이 섹션에 접근합니다.
모바일의 경우 하단 탐색 메뉴를 사용하여 추천 페이지를 방문하십시오.
모바일의 경우 아래쪽 탐색 메뉴를 사용하여 검색 페이지에 접근하십시오.태블릿과 데스크톱에서 레일 내비게이션은 세 가지 대상에 대한 액세스를 제공합니다.
Owl의 데스크톱 탐색
모바일의 코스 방문 페이지섹션 3 : 학습
이 섹션은 코스 내용의 "허브"입니다. 각 강좌에는 튜토리얼 비디오가 포함된 개요 화면이 있습니다.
항해
코스의 튜토리얼 비디오에 접근하려면, 화면 오른쪽 하단에 있는 곡선 모양을 누릅니다. 찾아보기 섹션으로 다시 돌아가려면 화면 왼쪽 상단에 있는 '뒤로 가기 화살표'를 누릅니다.
시트를 탭하면, 전체 화면으로 확장되어 튜토리얼 비디오 목록을 표시합니다.
튜토리얼 비디오를 탭하면 가로 모드에서 전체 화면으로 재생하거나 세로 모드에서 단계별로 볼 수 있습니다.가로 방향의 데스크톱과 태블릿에서는 코스 개요 콘텐츠와 동영상을 모두 볼 수 있는 충분한 화면 공간이 있습니다.
50% 축소더 작은 데스크톱 보기 및 세로 방향의 태블릿에서는 기본적으로 비디오가 숨겨져 있지만, 사이드 시트에 액세스 하여 비디오를 표시할 수 있습니다.
50% 축소레이아웃
그리드 시스템
Owl은 화면 너비 (예 : 모바일, 태블릿 또는 데스크톱)에 따라 크기를 조정할 수 있는 유연한 열과 패딩을 포함하는 반응형 그리드 시스템을 사용합니다.
컬러
Owl는 세 가지 기본 색상이 있습니다. 각 색상은 각 섹션에 대해 고유한 시각적 테마를 만드는 데 사용됩니다.
테마 1
'개인화' 섹션의 경우 노란색이 기본 색상이고, 파란색은 보조 색상입니다.
테마 2
'찾아보기' 섹션의 경우 파란색이 기본 색상이고, 노란색은 보조 색상입니다.
테마 3
'배우기' 섹션의 경우 분홍색이 기본 색상입니다.
타이포그래피
서체 크기
Owl의 서체 크기는 앱 콘텐츠에 필요한 타이포그래피의 다양성을 제공합니다. 서체 크기의 모든 항목은 Rubik을 서체로 사용하고, Regular, Medium, Bold를 사용하여 다양한 가중치를 사용할 수 있습니다.
'Owl’의 서체 크기루빅
Owl은 Rubik 서체를 사용합니다. 루빅은 약간 둥근 모서리가 있는 산 세리프(sans serif)이며, 다양한 패밀리 글꼴을 가지고 있습니다.
'Rubik' 문자
'루빅'과 '로보토' 비교아이콘
Owl의 아이콘은 구부러진 모양과 브랜드 서체 Rubik의 스타일을 반영합니다.
1. 일관성을 유지하기 위해 Owl의 모든 아이콘은 동일한 기본 격자 구조를 공유합니다. 2. Owl의 아이콘 모음.컴포넌트
칩(Chips)
Owl은 맞춤형 선택 칩을 사용하여, 사용자가 자신의 브라우징 경험을 개인화 할 수 있도록 합니다.
목록 및 구분선목록 및 구분선
Owl은 다양한 방식으로 목록 구성 요소를 사용합니다.
이 목록은 사용자 정의 인쇄, 색상, 아이콘그래피 및 이미지와 함께 결과를 보여줍니다. 분할선을 삽입하면 항목이 구분됩니다.
비디오 재생을 위한 이미지 및 액션이 포함된 목록이 목록에는 사용자 지정 이미지, 다양한 인쇄 스타일 및 튜토리얼 비디오를 재생하는 작업이 포함되어 있습니다. 목록 항목은 삽입된 구분 기호로 구분됩니다.
목록의 항목에는 이미지, 인라인 작업 및 다양한 폭이 있습니다.각 목록 항목의 너비는 각 목록 항목 사이에 충분한 패딩과 함께 복사 길이로 결정됩니다. 각 항목에는 인라인 작업, 여러 이미지 유형 및 인쇄 스타일이 포함됩니다.
카드
Owl의 특별 코스는 카드 컬렉션을 통해 제공됩니다. 그들은 맞춤 형태, 색상, 타이포그래피, 그리고 아이콘을 가지고 있고, 중심 정렬된 콘텐츠를 가지고 있습니다. 카드 사이에 패딩이 거의 없으며 컬렉션은 석조 패턴을 사용합니다(카드의 높이가 다른 경우).
Owl의 맞춤형 카드 모음, 50%까지 축소시트(Sheets)
Owl은 시트를 사용하여 코스 튜토리얼 비디오를 보여줍니다. 바탕 화면과 태블릿에서 이러한 비디오는 학습 섹션의 기본 색인 분홍색으로 사용자 지정된 사이드 시트에서 찾을 수 있습니다.
50% 축소
모바일에서 Owl은 시트를 사용하여 코스 튜토리얼 비디오를 표시합니다. 오른쪽 하단에 최소화된 시트를 누르면 시트가 전체 화면으로 확장됩니다.
하단 탐색
Owl의 하단 탐색 구성 요소는 사용자 지정 색상, 타이포그래피 및 아이콘으로 구성됩니다.
Owl 의 하단 탐색모션
실행화면(Launch screen)
Owl의 출시 화면은 캐릭터 애니메이션을 통해 재미난 품질을 제공합니다.
애니메이션 아이콘(Animated icons)
Owl의 아이콘 애니메이션은 로고와 로드 상태 애니메이션에서 영감을 받습니다.
1. 아이콘 애니메이션
2. 로고 애니메이션
3. 로딩 애니메이션
내비게이션 전환
최상위 전환(Top-level transitions)
상위-하위 전환(Parent-child transitions)
시트 전환(Sheets transitions)
진동
칩을 선택하고 스크롤하면 진동 효과가 나타나며, 변덕스럽고 장난기 많은 분위기를 연출합니다.
로딩(Loading)
로딩은 애니메이션 된 패턴 영상 처리를 사용하여 표현됩니다. 점무늬는 로고와 아이콘과 같은 원형 브랜드 요소의 모양을 반영합니다.
번역자 덧 : 이전의 연구사례들과 마찬가지로, Owl 또한 그들만의 브랜드 특징을 잘 드러내는 새로운 머티리얼 컴포넌트를 곳곳에서 찾아볼 수 있었습니다. 본 사례는 디자인, 예술, 건축, 패션에 관한 교육용 서비스이기 때문에, 대담한 컬러 사용과 타이포그래피, 캐릭터, 애니메이션 요소 등이 흥미로웠습니다.
여기까지 Material 연구 사례에 대한 소개와 Material design이 적용된 Owl 서비스 사례를 살펴봤습니다. 읽어주셔서 감사합니다! 다음 번역은 개인 금융 앱인 Rally 에 대한 내용입니다. 다음 주에 만나요 :)
번역에 어색한 부분이 있거나 그 외 피드백이 있으신 경우에는 댓글이나 아래 링크에 의견 남겨주세요.
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
