다크 테마 | Rally(Material Design)
이번 시간에는 Google 매터리얼 디자인 가이드에서 Rally 디자인에 대해 알아보고자 한다. 어떠한 내용을 다루고 개인적으로 알아두고자하는 부분을 정리해보고자 한다. 모든 이미지 자료 출처는 'Google Material Design'이다.
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
Rally
'Rally'는 Material Design Components와 Material Theming을 활용하여 데이터 중심의 심미성으로 브랜드 경험을 만드는 개인 금융 앱입니다.
▪ UI는 데이터 보기, 조사 및 이해에 초점을 맞춰져 있음
▪ 세밀하고 직접적이며 타이포 그래피, 색상 및 모양에 중점을 둠
레일 네비게이션(Rail Navigation)
▪ 화면 공간을 거의 차지하지 않으면서 섹션 사이를 이동할 수 있는 고정적인 영역을 제공
▪ 각각의 고유한 아이콘으로 표시하고 선택된 섹션의 아이콘이 밝아지고 제목이 표시되는 형태
탭(Tab)
▪ 선택되지 않은 탭 아이콘 표시하고 선택하면 아이콘 옆에 섹션 제목 표시
▪ 가능한 적은 공간 차지하면서 네비게이션 기능을 지속적으로 제공
그리드 시스템
▪ 반응형 그리드 시스템을 적용하여 화면 크기에 맞게 유연하게 조정
표고
▪ 색상이나 스크림을 사용하여 UI 요소 간의 표고 차이를 표현 ( 예 : 그래프가 아래 스크롤 목록과 구별되도록 하기 위해 그래프와 목록은 각각 다른 회색 톤 사용)
▪ 대화 상자 팝업시 뒤에 흐릿한 스크림 생성
Rally 컬러 테마
▪ 원색 1개와 추가 색 5개로 구성된 컬러 테마를 채택
▪ 읽기 쉽고 뚜렷한 인포그래픽을 보여주도록 컬러 테마 선택
▪ 세가지 인포그래픽이 같은 화면에 나타나면 각각 테마에서 두가지 색상을 사용
◽ 1번째 인포그래픽 : Primary Green과 Dark Green
◽ 2번째 인포그래픽 : Orange와 Yellow
◽ 3번째 인포그래픽 : Purple과 Blue
◽ Scale Down은 75%로 사용
※ 랠리 색상 테마의 6가지 색상에 대한 확장 팔레트 정보
타이포그래피(Typography)
▪ Eczar and 로보토 응축이라는 두가지 활자 사용
Type Scale
※ 이 글이 도움이 되었다면 "🤍공감" 버튼을 클릭해주세요. 클릭 한번이 글 쓰는데 큰 힘이 됩니다.
