안드로이드 가이드라인(7)_컨트롤

학습목표

안드로이드 컨트롤의 종류(버튼, 토글, 체크박스 등)와 역할을 학습하고, 각 컨트롤을 사용자가 직관적으로 이해하고 조작할 수 있도록 설계하는 방법을 익힌다. 이를 통해 앱과 사용자 간의 원활한 상호작용을 지원하며, 안드로이드 가이드라인에 맞춘 일관성 있고 접근성 높은 UI를 구현할 수 있다.

---

1 진행률 표시

https://m3.material.io/components/progress-indicators/overview

Progress indicators – Material Design 3

모바일을 사용할 때 사용자가 상황을 인식할 수 있게 하려면 
현재 진행 상황을 정확하게 표시해야 한다.

• 진행률 표시Progress Indicator는 앱 로드, 파일 제출·업데이트, 저장 등과 같은 프로세스의 상태를 알리는 역할을 하며, 사용자가 현재 화면을 벗어날 수 있는지 여부도 알려준다.

디자인 기본원칙은

• 정보 제공 : 진행률 지표는 프로세스 상태를 반영하는 방식으로 단순한 애니메이션이 아닙니다.
• 애니메이션 : 진행률 표시기는 애니메이션을 사용하여 주의력을 포착하고 사용자에게 활동 진행 상황을 알립니다.

머티리얼 디자인에서 진행률을 표시하는 형태에는 선형과 원형이 있다.

---

1.1 선형 진행률 표시

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

선형 진행률 위치는

• 각 요소의 프로세스를 나타낼 수 있습니다.
• 예를 들어 :
  • 화면 중앙에 있는 선형 표시기는 모든 화면 콘텐츠를 로드했음을 나타낼 수 있습니다.
  • 카드와 같이 컨테이너에 부착된 선형 표시기는 프로세스가 특정 항목에 적용되고 UI의 나머지 부분과의 상호 작용이 가능하다는 것을 나타낼 수 있습니다.
  • 확장 항목은 확장 가장자리를 따라 선형 표시기를 배치하여 새 콘텐츠가 나타나는 위치에 대한 사용자 주의를 끌 수 있습니다
• 하지만. 진행률 표시기를 앱의 모든 버튼에 불필요하게 적용을 하면 사용자의 작업을 방해할 수 도 있으니 피해야 합니다.

---

1.2 원형 진행률 표시

원형의 순환 진행 지표는 불확정 프로세스와 확정 프로세스를 모두 지원한다.

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

---

7_2체크박스와 라디오 버튼

목록에서 하나이상의 항목을 설정을 할 때 사용하는 요소로

• 목록에서 하나 이상의 옵션을 선택하십시오.
• 하위 선택 항목을 포함하는 목록 표시
• 데스크톱 환경에서 항목 켜기 또는 끄기

체크박스는

설정 사항을 즉시 반영하지 않고 사용자가 최종적으로 확인 버튼을 터치한 후에 반영하기 떄문에 사용자는 자신이 제대로 선택했는지 한번 더 점검해 오류를 줄일 수 있습니다.

Principle

• 사용자에게 익숙한 UI이기에 일반적인 형태로 구현
• Scannable : 체크박스를 선택했다면 한눈에 볼 수 있어야 하며, 선택하지 않은 항목보다 선택한 항목이 시각적으로 더 두드러져야 함.
• 체크박스는 사용 가능한 옵션을 쉽게 비교할 수 있게 디자인

---

선택 컨트롤 요소는 크게 체크박스, 라디오버튼, 스위치가 있는데요.

체크 박스와 라디오 버튼Radio Button은 다중 선택 여부에 따라 사용법이 달라진다.

• 체크 박스는 항목을 여러 개 선택할 수 있지만
• 라디오 버튼은 한 개만 선택할 수 있다.
• 라디오 버튼에서는 선택 된 항목을 제외한 나머지 항목이 비활성

---

라디오 버튼

- 세로 리스트를 사용하며 선택 항목 중 하나는 기본 값으로 선택되어 있어야 한다. 항목 순서에 규칙을 부여할 수 있다면 하는 것이 좋고,

• 항목이 많을 경우에는 라디오 버튼보다 드롭다운 메뉴를 사용하는 것이 좋다.
• 예를 들어 생년월일은 각각 하나의 항목에 체크하면 되는데 12월과 31일을 모두 라디오 버튼 항목으로 만들면 보기에도 좋지 않고 공간도 많이 차지하므로 드롭다운 메뉴를 사용한다.
• 체크 박스와 라디오 버튼은 모두 세로 방향으로 나열하고 가로 방향으로는 나열하지 않는다. 
• 레이블의 문구로는 긍정명제를 사용해야 혼선을 일으키지 않아야 하며,
•  또한 체크 박스 또는 라디오 버튼을 선택했을 때 무슨 일이 일어나는지 명확히 알 수 있도록 동적인 문구를 사용한다.
• 체크 박스와 라디오 버튼은 몹시 작기 때문에 컨트롤 자체 영역 이외에 뒤에 따라오는 문구 또는 문구가 있는 행을 탭해도 옵션이 체크되도록 한다.
• 상태는 해당 인라인 레이블에서 명확하게 표시하고,
• 앱의 스타일과 일치하는 색상을 적용합니다.

---

3. 스위치 

스위치는 단일 항목의 상태를 on / off 합니다.

스위치는 모바일에서 설정을 조정할 때 선호되는 방법입니다.

 

스위치 사용 대상:

• 모바일 및 태블릿에서 단일 항목 켜기/끄기
• 무언가를 즉시 활성화 또는 비활성화때 사용
• 보통 세트의 각 항목을 독립적으로 제어할 수 있는 경우 라디오 버튼 대신 스위치를 사용해야 합니다.
• 토글의 위치도 시각적으로 명확하게 보이도록 한다.
• 사용자는 스위치를 켰을 때 형광등 불이 바로 켜지는 것처럼 설정이 즉시 반영될 것으로 기대한 다. 반응이 늦거나 추가 액션을 요구하면 뭔가 잘못되었다고 생각한다.
• 따라서 스위치에는 확인 버튼을 별도로 배치하지 말아야 한다.
• 설정을 변경한 다음 설정에 따르는 추가 확인이 필요한 경 우에는 체크 박스를 사용하는 것이 좋다.

---