Google Material 2.0 번역 #04
Material studies ~ Fortnightly
안녕하세요. 주니어 디자이너를 위한 커뮤니티, Bigpicture입니다.
어느덧 네 번째 구글 머티리얼 번역글을 작성하게 되었습니다. 이번 글에서는 구글 머티리얼 2.0의 세 번째 연구사례인 뉴스 앱 'Fortnightly'를 다루고 있습니다. 이번 사례를 통해 구글 머티리얼 가이드가 뉴스 앱에 어떻게 적용되는지 확인하실 수 있습니다.
Fortnightly
Fortnightly는 머티리얼 디자인 컴포넌트와 머티리얼 테마를 사용하여 브랜드, 콘텐츠 중심의 경험을 만드는 뉴스 앱입니다.
Fortnightly에 대하여
Fortnightly는 다양한 주제에 대한 뉴스를 다루는 앱입니다. 이 앱은 콘텐츠, 특히 기사 카피와 사진에 초점이 맞춰져 있습니다.
Fortnightly의 브랜드는 사용자 경험을 중심에 두기 때문에 다양한 콘텐츠를 제공하도록 설계되었습니다. 브랜딩은 Fortnightly 로고, 타이포그래피 및 앱의 색상(보라색이나 그레이스케일)을 통해 표현됩니다. 색상이나 타이포그래피를 통해 브랜드를 강조합니다.
콘텐츠 중심적인
Fortnightly에서는 그레이스케일 팔레트를 사용하여 사진이 눈에 띄도록 합니다. 또한 타이포그래피 스케일을 사용하여 헤드라인을 굵게 하고, 쉽게 읽을 수 있도록 함으로써 콘텐츠에 집중할 수 있도록 돕습니다.
이 앱의 레이아웃 그리드는 신문에서 영감을 받았습니다. 이는 서비스에 전통적이며 직관적인 구조를 제공하는 동시에, 고밀도 콘텐츠를 제공합니다.
프로덕트 구조
Fortnightly의 정보 구조는 카탈로그(catalog) 방식으로 구성됩니다. 카탈로그에는 하위 정보를 포함할 수 있는 요소와 최상위 수준으로 분류된 계층 정보가 포함되어 있습니다.
Fortnightly의 내용은 신문 1면, 세계, 미국, 정치, 사업 분야와 같은 주요 섹션 및 하위 섹션으로 구분됩니다.
사용자는 카탈로그 구조를 통해 관심 영역을 신속하게 탐색할 수 있습니다. 네비게이션 드로어는 카탈로그 구조를 탐색하는 데 이상적이며, Fortnightly가 이 구성 요소를 사용하는 이유이기도 합니다.
네비게이션 드로어
Fortnightly는 태블릿과 데스크탑의 표준 네비게이션 드로어와 모달 네비게이션 드로어를 사용합니다. 네비게이션 드로어를 여는 데 사용할 수 있는 방법은 상단 앱 표시줄에 있는 탐색 아이콘입니다.
네비게이션 섹션
네비게이션 섹션에는 텍스트만 포함됩니다. 하위 섹션에는 열 수 있음을 나타내는 화살표가 있습니다.
브랜딩 모먼트
네비게이션 드로어 안에 로고를 넣음으로써, Fortnightly는 브랜딩 모먼트로 네비게이션 드로어를 사용합니다.
내비게이션 드로어는 모바일, 태블릿 및 데스크톱에 사용됩니다.상단 앱 바 및 칩
Fortnightly의 상단 앱 바에는 네비게이션 아이콘, 로고, 검색 기능 및 칩이 포함되어 있습니다. 칩은 트렌딩 해시태그를 보여줍니다.
칩을 탭하면, 해시태그 관련 기사가 페이지에 가득 차게 됩니다. 이렇게 하면 서로 다른 섹션에 있는 문서를 공유 제목이나 테마 주위를 함께 그룹화할 수 있습니다.
Fortnightly의 상단 앱 바와 칩짧은 상단 앱 바
스크롤할 때 상단 앱 바는 접혀 들어가기 때문에 짧은 상단 앱 바가 됩니다. 이로 인해 콘텐츠를 볼 수 있는 공간이 더 많이 제공됩니다.
짧은 상단 앱 바에는 네비게이션 드로어를 여는 탐색 아이콘과 Fortnightly 로고가 있습니다.
Fortnightly의 짧은 상단 앱 바검색
Fortnightly는 독자들이 원하는 콘텐츠를 빠르게 얻을 수 있는 강력한 검색 기능을 가지고 있습니다. 검색 아이콘을 누르면 검색 입력 필드 및 추세 해시 태그와 함께 전체 화면 다이얼로그(dialog)가 나타납니다. 검색어를 입력하면 결과가 전체 화면 다이얼로그(dialog)에 표시됩니다.
검색 결과를 선택하거나 다이얼로그 닫기 버튼을 선택하면 다이얼로그가 닫힙니다.
검색중인 화면레이아웃
그리드 시스템
Fortnightly는 랜딩페이지 등과 같은 곳에서 다양한 정보를 결합합니다. 각각의 아티클과 같은 곳에서는 콘텐츠를 위한 공통적인 여백이 있습니다. 모든 페이지는 같은 반응형 그리드를 사용하며, 콘텐츠가 특정 크기에 도달한 후에는 그에 해당하는 화면으로 돌아가도록 합니다.
레이어의 상승 (Elevation)
Fortnightly는 레이어의 상승을 나타내기 위해 그림자를 사용합니다.
그림자는 특정한 순간을 위해 조금씩 사용됩니다. 예를 들어, 상위 앱 막대의 상승은 페이지가 스크롤될 때까지 표현되지 않으며, 짧은 맨 위 앱 막대로 변환됩니다. 아티클에 호버(hover)하거나 탭하는 경우, 미묘하게 그림자 처리를 하여 아티클이 위로 올라가는 모습을 보여줍니다. 네비게이션 드로어는 항상 그림자를 사용하여 드로어가 시작되거나 끝나는 위치를 사용자가 혼돈하지 않도록 합니다.
1. 그림자 처리된 선택 아티클
2. 그림자 처리된 짧은 상단 앱 바
3. 그림자 처리된 네비게이션 드로어
컬러
컬러 테마
주요 컬러
Fortnightly의 주요 컬러는 white입니다. 흑백 컬러 팔레트를 사용하여 사진이 눈에 띄도록 하며, 카피는 산만함 없이 쉽게 읽을 수 있습니다.
서브 컬러
Fortnightly의 서브 컬러는 보라색입니다. 서브컬러가 사용될 때는 서브컬러가 큰 영향을 미치도록 하기 위해 조금씩 사용됩니다.
컬러 테마컬러와 이미지
이미지 처리는 브랜드 기회를 제공하는 세밀한 방법입니다.
1. 데스크탑에서 아티클이 호버(hover)되었을 때, 해당 이미지에 서브컬러가 반투명으로 채워지면서 공유 기능이 나타납니다.
2. 아티클이 클릭된 상태에서는 해당 사진에 서브컬러가 반투명으로 채워지는 방식으로 표현됩니다.
스크림 컬러
네비게이션 드로어와 하단 화면이 나타나면, Fortnightly는 나머지 앱 콘텐츠 앞에 흰색 스크림 컬러를 표시합니다. 스크림 컬러는 불투명하기 때문에 사용자에게 사용 가능한 부분과 그렇지 않은 부분을 구분할 수 있습니다.
화이트 스크림 컬러가 들어간 네비게이션 드로어타이포그래피
타입 페이스
Fortnightly는 Libre Franklin과 Merriweather 폰트를 사용합니다.
1. Libre Franklin
2. Merriweather
타입 크기
Fortnightly의 타입 크기는 Merriweather와 Libre Franklin이라는 두 가지 서체를 사용하여 타이포그래피의 다양성을 제공합니다. Merriweather는 디스플레이 서체 및 본문 카피 서체로 사용되며, 사용자가 주로 읽게 되는 메인 서체입니다. Libre Franklin은 콘텐츠를 스캔하고 검색하는 것이 주가 되는 화면에 사용됩니다.
Fortnightly의 타입 크기Merriweather
Merriweather는 화면에서 읽기 좋은 모양으로 설계되었습니다. 큰 X축의 높이, 약간 축약된 문자의 형태, 가벼운 대각선 강세, 견고한 세리프 등을 가지고 있습니다.
Merriweather의 글자 모양
Merriweather와 Roboto의 비교Libre Franklin
이 산세리프 서체는 Franklin Gothic 양식의 해석과 확장입니다. 비록 Franklin Gothic이 원래 디스플레이 모양으로 사용되기 위해 잘렸지만, 작은 크기로 사용될 때도 읽을 수 있습니다. 또한 다양한 가중치가 있기 때문에 타이포그래피 구조를 쉽게 만들 수 있습니다.
Libre Franklin의 글자 모양
Franklin Gothic와 Roboto의 비교아이콘
Fortnightly는 커스터마이징되지 않고, 구별되는 특징이나 장식도 없는, 인지 가능하면서도 기능적인 아이콘을 사용합니다. 아이콘에 브랜딩이나 독특한 스타일을 부여하지 않음으로써, 어떤 톤이나 콘텐츠와도 결합할 수 있으며, 각 콘텐츠의 스타일과 충돌하지 않습니다.
1. 일관성을 위해 Fortnightly의 모든 아이콘은 동일한 기본 그리드 구조를 공유합니다.
2. Fortnightly 아이콘 모음
컴포넌트
다이얼로그(Dialogs)
특정 콘텐츠를 호버(hover)하거나 탭하면 추가 정보를 제공하는 다이얼로그(dialog)가 열립니다. Fortnightly는 기사에 언급된 사람들에 대해 더 많은 것을 알릴 수 있도록 하기 위해 신상 정보를 제공합니다.
Fortnightly는 흰색 스크림 컬러를 사용하여 콘텐츠가 화면에 있는 동안 모든 앱 기능이 비활성화되었음을 나타냅니다. 데스크탑에서 다이얼로그와 스크림 컬러는 사용자가 이름에 호버하기 전까지 남아있으며, 태블릿에서는 사용자가 다이얼로그 밖으로 탭 할 때까지 유지됩니다.
사용자가 특정 이름을 호버하거나 탭할 때 추가 신상 정보를 볼 수 있습니다.
데스크탑과 태블릿에서는 다이얼로그가 사용되는 반면, 모바일에서는 시트가 더 적합합니다.텍스트 필드 (Text fields)
검색이 화면의 주요 액션인 경우, Fortnightly는 검색 텍스트 필드에 강조 표시를 하기 위해 크기를 조정합니다.
텍스트 필드
커스터마이징 없이 채워진 텍스트 필드
텍스트 필드는 Fortnightly의 레이아웃에서 쉽게 확인할 수 있습니다. 텍스트 필드에 채워진 회색 컬러가 제거되고 스트로크(stroke)만이 주요하게 사용됩니다.칩(chips)
Fortnightly는 테마 기반의 검색 경험을 위해 맞춤형 선택 칩을 사용합니다.
Fortnightly의 커스터마이징된 선택 칩
커스터마이징하지 않은 기본 선택 칩
Fortnightly는 기본 선택 칩 모양, 스트로크, 타이포그래피 및 색상을 매일 조정하여 맞춤형 필터 칩을 만듭니다.리스트(Lists)
Fortnightly는 검색 결과를 위해 커스터마이징 된 리스트를 사용합니다. 커스터마이징 된 리스트는 일정한 여백과 함께 각 리스트 항목에 포함된 다양한 정보(예: 섹션, 날짜, 기사 제목, 간단한 설명 및 사진)를 제공합니다. 여백 공간을 통해 사용자는 가장 유용한 정보를 결과를 빠르게 스캔할 수 있습니다.
태블릿의 검색 결과 리스트스테퍼(Steppers)
Fortnightly는 구독 과정에서 라인 스테퍼를 사용합니다. 각 스텝(step)은 상하의 포커스 영역을 형성하는 확장형 드로어 역할을 합니다. Fortnightly의 메인 컬러는 활동적인 스텝을 강조하여 보여줍니다.
Fortnightly의 라인 스테퍼모션(Motion)
프로덕트 아이콘(Product icon)
Fortnightly의 로고 애니메이션은 글자 모양의 캘리그래피적(calligraphic) 성격을 반영합니다.
네비게이션 트렌지션(Navigation transitions)
Fortnightly는 간단한 그림자 및 압축된 트렌지션을 통해 브랜딩에 대한 기존의 접근 방식을 보완합니다. 간단한 전환 스타일은 밀집된 콘텐츠의 균형을 유지하는 데 도움됩니다.
로딩(Loading)
Fortnightly는 플레이스 홀더(placeholder) 요소에 대한 세밀한 스테거(Stagger) 애니메이션을 사용하여 콘텐츠에 영향을 주지 않고 로딩을 표시합니다.
번역자 덧 : 구글 머티리얼 2.0의 연구사례는 다양한 주제의 서비스를 다룬다는 점에서 흥미로웠습니다. 서비스가 어떠한 성격을 가지냐에 따라 컴포넌트의 사용이 차별화되는데요. 특히 본 사례는 뉴스 앱이기 때문에 정확한 정보를 직관적으로 전달하는 것에 초점을 맞춰 레이아웃을 구성했다는 것을 느낄 수 있었습니다. 그 외 컴포넌트도 군더더기 없이 깔끔합니다.
여기까지 Material 연구 사례에 대한 소개와 Material design이 적용된 Fortnightly 서비스 사례를 살펴봤습니다. 읽어주셔서 감사합니다! 다음 번역은 교육 앱인 Owl에 대한 내용입니다. 다음 주에 만나요 :)
번역에 어색한 부분이 있거나 그 외 피드백이 있으신 경우에는 댓글이나 아래 링크에 의견 남겨주세요.
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
