Google Material 2.0 번역 #06
Material Studies ~ Rally
안녕하세요. 주니어 디자이너를 위한 커뮤니티, Bigpicture입니다.
이번에는 여섯번째 적용 사례를 살펴볼 수 있는 Rally 금융 애플리케이션에 관한 내용을 공유합니다. 핀테크의 기술이 발전하는 가운데, 이러한 Material design이 적용된 애플리케이션 디자인 사례는 참고하면 많은 도움이 될 글입니다.
Rally
Rally는 머티리얼 디자인 컴포넌트와 머티리얼 Theming을 사용하여, 데이터 중심이고 심미적인 브랜드 환경을 구축하는 개인 금융 애플리케이션입니다.
목차
Rally에 대하여
프로덕트 아키텍처
배치
색
타이포그래피(Typography)
아이콘(Iconography)
컴포넌트(Components)
모션(Motion)
Rally에 대하여
Rally는 소비 습관을 추적하고 재무와 관련된 통찰력과 경고를 제공하는 개인 금융 애플리케이션입니다.
Rally는 많은 양의 조밀한 조직된 정보를 관리 가능한 방식으로 표시하도록 설계되었습니다. 사용자는 상호 참조 및 조사 정보를 통해 제공되는 데이터의 패턴을 파악할 수 있습니다.
프리미엄 스타일
어두운 회색 UI는 Rally에게 프리미엄급의 느낌을 주는 동시에 데이터를 나타내는 밝은 액센트 색상이 배경과 뚜렷이 구분되도록 합니다. 데이터와 배경색 간의 높은 대조는 그래프와 차트를 쉽게 읽을 수 있게 합니다.
데이터 기반 미학
Rally의 UI는 데이터 보기, 조사 및 이해에 초점을 맞춥니다. 대시보드에 배포된 인포그래픽을 통해 사용자가 각 거래의 세부 정보와 지출에 대한 요약을 볼 수 있습니다.
UI는 세밀하고 직접적이며 타이포그래피, 색상 및 모양에 중점을 둡니다.
프로덕트 아키텍쳐 (Product Architecture)
Rally의 정보 아키텍처는 계층 구조를 가지고 있어서 사용자들이 다양한 카테고리를 통해 그들의 재정 상태를 볼 수 있도록 합니다. 재무 개요는 이 카테고리의 가장 일반적인 버전을 제공하며, 각각의 거래는 애플리케이션 구조에서 가장 상세한 부분입니다.
콘텐츠는 계정, 예산, 청구서 등 개인 금융과 관련된 섹션으로 나뉩니다. Rally의 홈페이지는 이러한 섹션의 허브로 작동합니다.
Rally는 개인 금융의 여러 분야를 소개하고 설명하는 데 집중하기 때문에, 사용자들이 여러 분야를 쉽게 이동하는 것이 중요합니다. 네비게이션의 고정된 위치 덕분에 사용자는 쉽게 섹션을 전환할 수 있습니다. 데스크톱 및 태블릿에서 Rally는 레일 네비게이션을 사용합니다. 모바일에서는 Rally가 탭을 사용합니다. 이러한 탐색 패턴은 항상 화면에 표시되지만 공간을 거의 차지하지 않기 때문에 이상적입니다.
데스크톱, 태블릿 및 모바일에서 운영
데스크톱에서 Rally의 레일 탐색레일 네비게이션 (Rail Navigation)
데스크톱 및 태블릿에서 Rally는 레일 네비게이션을 사용합니다. 레일 네비게이션은 화면 공간을 거의 차지하지 않으면서 섹션 사이를 이동할 수 있는 고정적인 영역을 제공합니다.
레일 네비게이션에서 각 목적지는 고유한 아이콘으로 표시됩니다. 섹션을 선택하면 아이콘이 밝아지고 섹션 제목이 표시됩니다.
탭
모바일에서 Rally는 사용자 지정 탭을 사용하여 섹션 사이를 이동합니다. 선택되지 않은 탭은 아이콘으로 표시됩니다. 탭을 선택하면 섹션이 표시됩니다.
탭 선택
선택되지 않은 탭은 아이콘으로 표시됩니다. 탭을 선택하면 아이콘 옆에 섹션 제목이 표시됩니다. 탭은 가능한 한 적은 공간을 차지하는 동안 네비게이션 기능을 지속적으로 제공합니다.
모바일에서 Rally 탭 탐색배치
그리드 시스템
Rally는 화면 너비를 수용할 수 있도록 크기를 조정할 수 있는 유연한 열과 패딩을 갖춘 반응형 그리드 시스템을 사용합니다.
높이 (Elevation)
Rally는 색상 또는 스크림을 사용하여 UI 요소 간의 높이 차이를 표현합니다.
다이얼로그가 나타나면, 그 뒤에 흐릿한 스크림은 대화상자의 레이어가 UI의 나머지 부분 위에 있음을 나타냅니다.색
Rally는 여러 개의 섹션이 있는 단일 화면에 여러 개의 인포그래픽을 표시해야 합니다. 이를 위해 Rally는 메인 색상과 5가지 색상의 색상 테마를 채택했습니다. 이 정교한 컬러 테마는 Rally가 읽기 쉽고 뚜렷한 인포그래픽을 제시할 수 있도록 해줍니다.
동일한 화면에 세 가지 인포그래픽이 나타나면 각각 테마의 두 가지 색상을 사용합니다.
1. 첫 번째 인포그래픽 사용: Primary Green 및 Dark Green
2. 두 번째 인포그래픽은 주황색과 노란색을 사용합니다.
3. 세 번째 인포그래픽 사용: 보라색과 파란색.
색 테마
Rally의 색상 테마에는 기본 색 하나와 추가 색 다섯 가지가 있습니다. 또한 10개의 견본으로 구성된 확장 팔레트를 가지고 있습니다.
Rally의 색상 테마에는 기본 색 하나와 추가 색 다섯 가지가 있습니다. 또한 기본 색상(또는 대체 기본 색상)에 대한 스와치(swatch) 및 해당 스와치의 9가지 변형으로 구성된 확장 팔레트가 있습니다.
Rally는 이 확장된 팔레트의 스와치를 사용하여 강력하고 읽기 쉬운 인포그래픽을 제공합니다.
Rally의 색상 테마에서 6가지 색상의 확장 팔레트:
- 원 모양 스왓치는 앱에서 스와치를 사용했음을 나타냅니다.
- "P"가 있는 원 모양의 스와치는 스와치를 기본 색상으로 나타냅니다.
- 문자가 없는 원 모양의 스와치는 스와치를 추가 색상으로 나타냅니다.
타이포그래피 (Typography)
서체
Rally는 Eczar와 Roboto Condensed의 두 가지 서체를 사용합니다.
1. Roboto Condensed 2. Eczar서체 크기
Rally의 서체 크기는 앱 콘텐츠에 필요한 타이포그래픽 다양성을 제공합니다. 대부분의 문구는 Roboto Condensed로 사용되지만, 헤드라인과 숫자만 사용하는 목록에서는 Eczar로 사용됩니다.
Rally의 타입 크기Eczar
Eczar는 다양한 크기로 쉽게 읽을 수 있는 세리프를 사용하기 때문에 본문 및 디스플레이(heading) 크기에 적합합니다.
Eczar는 리스트의 달러 총액의 숫자 뿐만 아니라 인포그래픽의 중앙에 배치된 숫자를 표시할 때 사용합니다.
Eczar의 문자 양식 (letterform)
Eczar와 Roboto 비교Roboto Condensed
Roboto Condensed는 Rally의 본문, 버튼 텍스트, 헤드라인 텍스트에 모두 사용됩니다.
Condensed san serif는 스크린 화면에서 가독성이 높으며, Condensed san serif의 컴팩트한 크기는 Rally의 밀집된 레이아웃에 적합합니다.
Roboto Condensed의 문자양식
Roboto Condensed와 Roboto 비교아이콘 (Iconography)
Rally는 커스터마이징된 아이콘을 사용하여 개요, 계정, 청구서, 예산 및 설정의 네 가지 주요 섹션으로 표시합니다.
이 아이콘들은 Rally의 타이포그래피와 비슷한 라운드된 형태와 각진 코너를 사용합니다.
1. 일관성을 위해 Rally의 모든 아이콘은 동일한 기본 그리드 구조를 사용합니다. 2. Rally의 아이콘 모음입니다.모양
카테고리 (Category)
컴포넌트는 크기에 따라 형태 카테고리로 분류됩니다. 형태 카테고리를 사용하면 한 번에 여러 컴포넌트 값을 설정할 수 있습니다.
형태 카테고리에는 다음이 포함됩니다:
- 소형 컴포넌트
- 중간 컴포넌트
- 대형 컴포넌트
Rally의 형태 카테고리
(1) 소형 컴포넌트, (2) 중형 컴포넌트, (3) 대형 컴포넌트소형 컴포넌트
입력된 텍스트 필드는 작은 모양 카테고리에 포함됩니다. 0dp의 자른 모양이 모서리로 표현됩니다.
중형 컴포넌트
카드 컴포넌트는 중형에 포함됩니다. 모서리는 0dp의 자른 모양으로 표현됩니다.
대형 컴포넌트
데이터 테이블(Data tables)은 대형 컴포넌트에 포함됩니다. 모서리는 0dp의 자른 모양으로 표현됩니다.
컴포넌트
카드 및 리스트
다양한 재정 관련 뷰
Rally는 각 거래의 매크로 뷰와 마이크로 뷰를 제공하여 사용자의 재무를 오버뷰 할 수 있도록 제공합니다. 카드 컴포넌트는 앱의 기본 섹션에서 매크로 뷰에 사용됩니다. 특정 항목별 목록의 경우 Rally는 리스트 컴포넌트를 사용합니다.
이러한 카드 및 리스트 컴포넌트는 Rally의 색 테마와 서체를 사용하도록 커스터마이징되었습니다. 리스트 컴포넌트에서는 메인 색상을 통해 각 선 항목을 해당 그래프와 연결할 수 있습니다.
Rally의 개요 페이지는 카드를 사용하여 "계정"과 "청구서"와 같은 다양한 재정 요약을 제공합니다.
"Accounts"와 같은 카드를 누르면 카드의 요약 정보가 목록에 보다 자세히 표시됩니다.
배너, 다이얼로그 및 스낵바
배너
Rally는 배너를 사용하여 우선순위가 낮은 메시지를 전달합니다. 이러한 배너는 Rally의 색상과 타이포그라피로 사용자 지정되며, 종종 특정 금융 분야와 관련된 아이콘과 쌍을 이룹니다.
스낵바 및 다이얼로그
가시성을 높여야 하는 우선 순위가 높은 메시지는 스낵바 또는 다이얼로그로 전달됩니다. 스낵바와 다이얼로그는 아이콘을 사용하지 않고, Rally의 컬러와 타이포그라피로 커스터마이징됩니다.
태블릿에서는 오른쪽 상단 모서리에 배너가 표시되어 레일 네비게이션 직후에 나타납니다.
모바일에서 배너는 개요 화면의 첫 번째 항목입니다.
대형 데스크톱 화면에서는 배너가 자체 열에 표시되고 보관됩니다.
다이얼로그는 우선순위가 높은 메시지를 전달하는 데 사용됩니다.
스낵바는 높은 우선순위 메시지를 전달하는데 사용됩니다.
레일 네비게이션 (Rail navigation)
데스크톱 및 태블릿에서 Rally는 레일 네비게이션을 사용합니다. 섹션을 선택하면 레일 네비게이션에 텍스트 레이블과 밝은 색이 표시됩니다.
탭
모바일에서 Rally는 탐색을 위해 탭을 사용하며 각 탭은 아이콘으로 표시됩니다. 이러한 탭에는 컨테이너가 없으며 선택했을 때만 텍스트가 표시됩니다.
탭은 스크롤하지 않고 고정된 위치를 차지합니다. 새로운 탭을 누르면, 그들은 수평으로 움직이고 재분배합니다.
탭은 모바일에서 내비게이션에 사용됩니다.
1. 커스터마이징되지 않은 탭입니다. 2. Rally의 탭은 사용자 정의 인쇄, 아이콘, 색상 및 상태를 사용합니다. 선택한 아이콘에만 텍스트가 있습니다.모션(Motion)
Rally는 간단하고 예약된 동작 스타일을 사용하여 UI의 시각적 밀도의 균형을 조정할 수 있습니다.
실행 화면
Rally는 첫 번째 출시 시 세련된 톤을 설정하기 위해 애니메이션 로고를 표시합니다.
네비게이션 트랜지션
Rally는 이동 전환에 표준 완화 및 지속 시간을 사용하여 동작 스타일을 효율적으로 유지합니다.
상위-하위 전환
Peer 전환
시퀀싱(Sequencing)
Stagger는 목록과 같은 새로운 요소를 소개할 때 강조하기 위해 사용됩니다. 이 일시적 효과는 원형 그래프가 UI의 중요한 부분이기 때문에 이를 강조하기 위해 사용됩니다.
오버슈트(Overshoot)
오버슈트는 긴급성을 전달하기 위해 중요한 다이얼로그에 사용됩니다.
번역자 덧 : 이번 사례인 Rally는 데이터를 효율적으로 보여줄 수 있는 화면 설계 예시와 금융 서비스 디자인에 Material design을 적절하게 적용한 사례입니다. 그래픽 스타일, 색상, 배치 등을 통해 사용자가 거부감없이 데이터를 읽을 수 있도록 고려된 점이 좋았습니다.
읽어주셔서 감사합니다! 다음 번역은 여행 서비스 앱인 Reply에 대한 내용입니다. 다음 주에 만나요 :)
번역에 어색한 부분이 있거나 그 외 피드백이 있으신 경우에는 댓글이나 아래 링크에 의견 남겨주세요.
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
