안드로이드 가이드 라인 4

3. 카드 컬렉션 Card Collection
카드 컬렉션은 카드가 여러 개인 경우에 하나 이상의 컬렉션으로 그룹화하는 것을 말한다. 카드 컬렉션은 핀터레스트 Pinterest에서와 같이 크기가 균일하지 않은 카드들이 정보의 양에 따라 빈자리를 채우며 배치되는 특징이 있다. 각 카드의 넓이는 화면이 가로 방향인지 세로방향인지에 따라 두 개 또는 세 개가 같은 넓이에 일정한 간격으로 배치되며, 세로 방향의 길이는 콘텐츠의 양에 따라 유동적이다. 타임라인이 표시되지는 않지만 검색하면 정확도나 시간 등의 필터링 옵션에 의해 자동으로 정렬된다. 카드에는 대개 비디오, 그래픽 이미지 등의 시각적 요소가 포함되며, 텍스트는 이미지 하단에 배치되는 경우가 많다. 하지만 이미지 자체에 그래픽 요소의 일부로 헤드라인을 구성하는 때도 있다. 이미지 내부에 텍스트를 배치하지 않는 경우, 하위 헤드라인이나 요약 텍스트를 함께 배치해 콘텐츠에 대한 보충 설명을 제공하는 것이 바람직하다. 카드 컬렉션을 빠르게 훑어볼 수 있게 하려면 일관된 패턴으로 배치해야 한다. 여러 주제 및 기능을 표시하기 위해 대시보드 스타일의 카드 컬렉션을 사용할 수도 있다. 각 카드의 개성, 스타일, 독창성 등을 강조하기 위해 비대칭 그리드가 있는 카드 컬렉션을 사용할 수도 있다. 카드 레이아웃은 카드에 포함되는 콘텐츠의 종류와 크기에 따라 다르게 설계할 수 있으므로 가이드라인을 꼭 지켜야 하는 것은 아니다. 

 

---

컨트롤

1. 진행률 표시 Progress Indicator
모바일을 사용할 때 사용자가 상황을 인식할 수 있게 하려면 현재 진행 상황을 정확하게 표시해야 한다. 진행률 표시는 앱 로드, 파이 제출, 업데이트, 저장 등과 같은 프로세스의 상태를 알리는 역할을 하며, 사용자가 현재 화면을 벗어날 수 있는지도 알려준다. 머티리얼 디자인에서 진행률을 표시하는 형태에는 선형과 원형이 있다.

- 선형 진행률 표시
처음부터 끝까지 진행되는 지표가 명확한 경우에는 0~100%까지 차례대로 증가하는 형태로 나타내고, 불확정 지표인 경우에는 고정 트랙을 따라 이동을 반복하는 형태로 나타낸다. 화면을 로드하는 동안 불확정 진행으로 시작해 로딩이 완료되기 전에 확정 진행으로 변경된다.

-원형 진행률 표시 
원형의 순환 진행 지표는 불확정 프로세스와 확정 프로세스를 모두 지원한다. 확정 프로세스인 경우, 0~360 원형으로 이동하면서 투명한 바닥 영역을 원형 트랙으로 채운다. 불확정 원형 표시는 계속해서 원의 일부를 보여주며 회전한다. 
반응 시간이 길 때는 애니메이션 로딩을 사용하더라도 좀 더 명확한 수치로 표현하는 것이 좋다. 로딩 시간이 길어지면 정지 상태나 에러 상태로 보일 수도 있기 때문이다. 시간, 단계, 현재 진행 상황, 수행 정도, 남은 상태 등을 보여주면 사용자에게 안정감을 줄 수 있다. 백분율 수치를 사용하는 것보다는 단계의 수를 나타내는 것이 좋고, 기다리는 시간이 지루하지 않도록 다양한 아이디어로 애니메이션을 만드는 것도 권장할 만하다.

2. 체크 박스 Check Box와 라디오 버튼 Radio Button
체크 박스는 설정 사항을 즉시 반영하지 않고 사용자가 최종적으로 확인 버튼을 터치한 후에 반영한다. 확인 버튼을 터치해야 최종적으로 설정이 변경되기 때문에 사용자는 자신이 제대로 선택했는지 한 번 더 점검해 오류를 줄일 수 있다.
체크 박스와 라디오 버튼은 다중 선택 여부에 따라 사용법이 달라진다. 체크 박스는 항목을 여러 개 선택할 수 있지만 라디오 버튼은 한 개만 선택할 수 있다. 라디오 버튼에서는 선택된 항목을 제외한 나머지 항목이 비활성화되는데, 이렇게 하면 사용자가 옵션을 잘못 선택하는 오류를 줄일 수 있다.
라디오 버튼은 세로 리스트를 사용하며 선택 항목 중 하나는 기본값으로 선택되어 있어야 한다. 항목 순서에 규칙을 부여할 수 있다면 하는 것이 좋고, 항목이 많을 때 라디오 버튼보다 드롭다운 메뉴를 사용하는 것이 좋다. 예를 들어 생년월일은 각각 하나의 항목에 표시하면 되는데 12월과 31일을 모두 라디오 버튼 항목으로 만들면 보기에도 좋지 않고 공간도 많이 차지하므로 드롭다운 메뉴를 사용한다. 
체크 박스와 라디오 버튼은 모두 세로 방향으로 나열하고 가로 방향으로는 나열하지 않는다. 레이블의 문구로는 긍정명제를 사용해야 혼선을 일으키지 않는다. 또한 체크 박스 또는 라디오 버튼을 선택했을 때 무슨 일이 일어나는지 명확히 알 수 있도록 동적인 문구를 사용한다. 체크 박스와 라디오 버튼은 몹시 작으므로 컨트롤 자체 영역 이외에 뒤에 따라오는 문구 또는 문구가 있는 행을 탭 해도 옵션이 검사되도록 한다. 

3. 스위치 Switch
스위치는 토글 Toggle 형태의 컨트롤로 두 개의 상호배타적인 기능을 켜고 끌 때 사용한다. 보통 테이블의 행에서 단일 설정 옵션의 상태를 전환할 때 사용한다. 스위치가 제어하는 옵션과 상태는 해당 인라인 레이블에서 명확하게 표시하고, 앱의 스타일과 일치하는 색상을 적용한다. 토글의 위치도 시각적으로 명확하게 보이도록 한다. 
사용자는 스위치를 켰을 때 형광등 불이 바로 켜지는 것처럼 설정이 즉시 반영될 것으로 기대한다. 반응이 늦거나 추가 액션을 요구하면 뭔가 잘못되었다고 생각한다. 따라서 스위치에는 확인 버튼을 별도로 배치하지 말아야 한다. 설정을 변경한 다음 설정에 따르는 추가 확인 필요한 경우에는 체크 박스를 사용하는 것이 좋다. 

체크 박스와 라디오 버튼, 스위치

 

2023.04.14 - [UXUI 디자인] - 안드로이드 가이드 라인 3

안드로이드 가이드 라인 3