[UI/UX] 3. UI 파헤치기 -Button2
구글의 Material Design과 예시로 공부하는 UI
*About this article
-Design system to study with Google's Material Guide_#2
-The color of the non-original text is gray.
*이 글에 관한 설명
- 구글의 머터리얼 가이드로 알아보는 UI Component에 관한 글입니다.
- 구글 가이드라인 원문이 아닌 덧붙이는 글은 회색으로 표기하였습니다.
이전에는 머터리얼 가이드의 버튼 Part에 대해 설명했다. 버튼이란 무엇인지부터 시작했는데 이어서 버튼 Part에 대해 풀어서 정리해보는 시간 가져보기로!
<바로 이전 글 읽고 이어서 공부하기>
https://brunch.co.kr/@okay1028/2
2. Anatomy
버튼에는 필수 요소 1개와 선택 요소 4개가 포함됩니다.
- 각 버튼에는 필수로 들어가야하는 요소와 필수가 아닌 요소(옵션 요소)들이 구분되어 있습니다.
2.1 Text label
3. Hierarchy and placement(계층 구조 및 배치)
버튼의 강조 수준은 모양, 서체 및 배치를 결정하는 데 도움이 됩니다.3.1 A single, prominent button
여러 버튼 유형을 사용해서 강조 수준을 표현할 수 있습니다.
레이아웃에는 계층 구조에서 중요도가 적은 버튼들과는 확연히 구분되는 눈에 띄는 버튼이 포함되어야 합니다. 이 high-emphasis 버튼은 가장 주목도가 높습니다.
3.2 Other buttons
앱에서는 두 개 이상의 버튼을 표시할 수 있으므로 high-emphasis 버튼은 덜 중요한 작업을 수행하는 medium- and low-emphasis 버튼들과 함께 사용될 수 있습니다.
여러 버튼을 사용할 때, 버튼의 활성 상태가 다른 버튼의 비활성화된 상태화 비슷하지는 않은지 확인해야 합니다.
3.3 Placement(버튼의 배치)
1) 최고의 강조를 위한 확장 플로팅 액션 버튼(Floating action button)
2) 높은 강조를 위한 컨테이너 버튼(Contained button)
3) 낮은 강조를 위한 텍스트 버튼(Text button)
- 마켓 컬리를 예로 들면 프로모션 상품의 홍보를 위한 플로팅 버튼이 가장 눈에 띄는 형태이다. 그림자 효과를 줘서 레이어 최상단에 위치한 것처럼 표현해주었다.
- 필터창을 보면 가장 우선인 기능을 컨테이너 버튼에 담고, 가장 중요도가 떨어지는 기능을 텍스트 버튼으로 연하게 담았다.
3.4 버튼 배치 사용 예시
- 이 부분은 구글에서 권고하는 내용으로 실제 App 화면에서도 이 같은 규칙을 잘 지키는 회사가 많다.
4. Behavior
4.1 Scaling and adaptation(확장 및 적응)
화면 장치의 레이아웃을 확장할 때 버튼은 다양한 상황과 사용자 요구에 맞게 시각적 표시, 정렬 및 배열을 조정할 수 있습니다.
4.2 Container properties(컨테이너 속성)
버튼은 일반적으로 카드나 대화 상자와 같은 컨테이너에 배치됩니다. 부모 컨테이너가 다양한 화면 크기에 맞게 크기가 조정되면 컨테이너 내 버튼의 크기, 위치 및 정렬도 변경될 수 있습니다. 버튼은 부모 컨테이너의 크기에 따라 왼쪽, 오른쪽 또는 중앙에 정렬될 수 있습니다. 버튼의 위치와 크기는 컨테이너와 관련되어 조정됩니다.
4.3 Arrangement
텍스트 및 아이콘, 버튼과 같은 요소들의 위치 및 정렬이 컨테이너와 관련되어 정의됩니다.
예를 들어 버튼 너비가 조정될 때, 버튼 내의 아이콘과 텍스트 라벨은 서로 고정되어 중앙에 유지됩니다.
Card와 같은 상위 Container가 더 큰 화면에 맞게 크기가 조정됨에 따라 버튼의 크기와 배치는 변경될 수 있습니다.
[참고자료]
1) 마켓컬리 앱 화면 참고
2) Google Material Design
https://m2.material.io/components/buttons#usage
