앱 위젯 개요

위젯은 홈 화면 맞춤설정의 필수적인 측면입니다. 사용자의 홈 화면에서 바로 액세스할 수 있는 앱의 가장 중요한 데이터와 기능을 '한눈에' 보여주는 뷰라고 생각하면 됩니다. 사용자는 홈 화면 패널 간에 위젯을 이동할 수 있으며 지원되는 경우 위젯의 크기를 조절하여 위젯의 정보 양을 원하는 대로 조정할 수 있습니다.

이 문서에서는 개발자가 만들 수 있는 다양한 유형의 위젯과 따라야 할 디자인 원칙을 소개합니다. Remove View API 및 XML 레이아웃을 사용하여 앱 위젯을 빌드하려면 간단한 위젯 만들기를 참고하세요. Kotlin과 Compose 스타일 API를 사용하여 위젯을 빌드하려면 Jetpack Glance를 참고하세요.

위젯 유형

위젯을 계획할 때 어떤 종류의 위젯을 빌드할지 생각해 봅니다. 위젯은 일반적으로 다음 카테고리 중 하나에 속합니다.

정보 위젯

도쿄가 대체로 흐리고 14도이며, 오후 4시부터 오후 7시까지의 예상 온도를 표시하는 날씨 위젯의 예
그림 1. 날씨 앱의 정보 위젯

정보 위젯은 일반적으로 중요한 정보 요소를 표시하고 시간 경과에 따른 정보 변경을 추적합니다. 정보 위젯의 예로는 날씨 위젯, 시계 위젯, 스포츠 점수 추적 위젯이 있습니다. 일반적으로 정보 위젯을 탭하면 연결된 앱이 실행되고 위젯 정보의 세부정보 뷰가 열립니다.

컬렉션 위젯

컬렉션 위젯은 갤러리 앱의 사진 컬렉션, 뉴스 앱의 기사 컬렉션, 커뮤니케이션 앱의 이메일 또는 메시지 컬렉션과 같이 동일한 유형의 여러 요소를 표시하는 데 특화되어 있습니다. 컬렉션 위젯은 세로로 스크롤할 수 있습니다.

컬렉션 위젯은 일반적으로 다음 사용 사례에 중점을 둡니다.

  • 컬렉션 탐색
  • 컬렉션의 요소를 연결된 앱의 세부정보 뷰로 엽니다.
  • Android 12(API 수준 31)에서 복합 버튼을 지원하는 등 요소와 상호작용(예: 완료 표시)

관리 위젯

'침실', '주방', '거실'이라는 전환 스위치를 표시하고 처음 두 개의 전환 스위치가 꺼져 있는 '조명 목록'이라는 앱의 위젯
그림 4. 컨트롤 위젯의 예

컨트롤 위젯의 기본 목적은 사용자가 앱을 열지 않고도 홈 화면에서 기능을 트리거할 수 있도록 자주 사용하는 기능을 표시하는 것입니다. 앱의 리모컨으로 생각할 수 있습니다. 컨트롤 위젯의 예로는 사용자가 집 안의 조명을 켜거나 끌 수 있는 홈 컨트롤 위젯이 있습니다.

제어 위젯과 상호작용하면 앱에서 연결된 세부정보 뷰가 열릴 수 있습니다. 이는 검색 위젯의 경우와 같이 제어 위젯의 함수가 데이터를 출력하는지 여부에 따라 다릅니다.

하이브리드 위젯

'싫어요', '뒤로', 재생/일시중지, 앞으로, '좋아요' 버튼을 표시하는 일반적인 음악 앱 아티스트와 트랙은 각각 '아티스트'와 '예시 음악'으로 나열됩니다.
그림 5. 음악 앱 위젯의 예

일부 위젯은 이전 섹션의 유형 중 하나(정보, 컬렉션 또는 제어)를 나타내지만 대다수 위젯은 다양한 유형의 요소를 결합하는 하이브리드입니다. 예를 들어 음악 플레이어 위젯은 주로 컨트롤 위젯이지만 정보 위젯처럼 현재 재생 중인 트랙도 사용자에게 표시합니다.

위젯을 계획할 때 기본 유형 중 하나를 중심으로 디자인하고 필요에 따라 다른 유형의 요소를 추가합니다.

Google 어시스턴트와 위젯 통합

Google 어시스턴트는 사용자 음성 명령에 대한 응답으로 모든 유형의 위젯을 표시할 수 있습니다. 앱 작업을 처리하도록 위젯을 구성할 수 있으며, 이를 통해 사용자는 Android 및 Android Auto와 같은 어시스턴트 표시 경로에서 빠른 답변과 대화형 앱 환경을 받을 수 있습니다. 어시스턴트용 위젯 처리에 관한 자세한 내용은 Android 위젯과 앱 작업 통합을 참고하세요.

위젯 제한사항

위젯은 '미니 앱'으로 이해할 수 있지만 위젯을 디자인하기 전에 이해해야 할 몇 가지 제한사항이 있습니다.

동작

위젯은 홈 화면에 표시되므로 홈 화면에 설정된 탐색과 공존해야 합니다. 이렇게 하면 전체 화면 앱에 비해 위젯에서 사용할 수 있는 동작 지원이 제한됩니다. 앱에서 사용자가 화면 간에 가로로 이동하도록 허용할 수 있지만 이 동작은 홈 화면 간 이동을 위해 이미 홈 화면에서 실행되고 있습니다.

위젯에 사용할 수 있는 유일한 동작은 터치세로 스와이프입니다.

요소

위젯에 사용할 수 있는 동작의 제한사항으로 인해 제한된 동작을 사용하는 일부 UI 구성 요소는 위젯에 사용할 수 없습니다. 지원되는 기본 요소의 전체 목록과 레이아웃 제한사항에 관한 자세한 내용은 위젯 레이아웃 만들기유연한 위젯 레이아웃 제공을 참고하세요.

디자인 가이드라인

위젯 콘텐츠

위젯은 앱에서 사용할 수 있는 흥미로운 새 콘텐츠를 '광고'하여 사용자를 앱으로 유도하는 좋은 방법입니다.

신문 1면의 티저와 마찬가지로 위젯은 앱 정보를 통합하고 집중하며 앱 내의 더 풍부한 세부정보에 대한 연결을 제공합니다. 위젯은 정보 '간식'이고 앱은 '식사'라고 말할 수 있습니다. 앱은 위젯이 표시하는 것보다 정보 항목에 관한 더 많은 세부정보를 표시해야 합니다.

순수한 정보 콘텐츠 외에도 위젯이 앱에서 자주 사용하는 영역으로 연결되는 탐색 링크를 제공하도록 하는 것이 좋습니다. 이렇게 하면 사용자가 작업을 더 빠르게 완료하고 앱의 기능적 도달범위를 홈 화면으로 확장할 수 있습니다.

위젯의 탐색 링크에 적합한 후보는 다음과 같습니다.

  • 생성 함수: 사용자가 새 문서 또는 새 메시지 만들기와 같이 앱의 새 콘텐츠를 만들 수 있는 함수입니다.

  • 최상위 수준에서 앱 열기: 일반적으로 정보 요소를 탭하면 사용자는 하위 수준의 세부정보 화면으로 이동합니다. 애플리케이션의 최상위 수준에 대한 액세스 권한을 제공하면 탐색의 유연성을 높이고 사용자가 홈 화면에서 앱으로 이동하는 데 사용하는 전용 앱 바로가기를 대체할 수 있습니다. 표시하는 데이터가 모호한 경우 이 기능에 애플리케이션 아이콘을 사용하면 위젯에 명확한 ID를 제공할 수도 있습니다.

위젯 크기 조절

표준 Google 시계 위젯
그림 6. 표준 Google 시계 위젯

크기 조절 가능한 위젯을 길게 터치한 다음 놓으면 위젯의 크기 조절 모드로 전환됩니다. 사용자는 드래그 핸들 또는 위젯 모서리를 사용하여 원하는 크기를 설정할 수 있습니다.

크기를 조절하면 사용자는 홈 화면 배치 그리드의 제약 조건 내에서 위젯의 높이와 너비를 조정할 수 있습니다. 위젯의 크기를 자유롭게 조절하거나 가로 또는 세로 크기 변경을 제한할 수 있습니다. 위젯이 기본적으로 고정 크기인 경우 크기 조절을 지원할 필요가 없습니다.

사용자가 위젯의 크기를 조절할 수 있도록 하면 다음과 같은 중요한 이점이 있습니다.

  • 사용자가 각 위젯에 표시할 정보의 양을 미세하게 조정할 수 있습니다.
  • 홈 패널의 위젯 및 바로가기 레이아웃에 더 나은 영향을 미칠 수 있습니다.

만들려는 위젯 유형에 따라 위젯의 크기 조절 전략을 계획합니다. 목록 또는 그리드 기반 컬렉션 위젯은 일반적으로 위젯의 크기를 조절하면 세로 스크롤 영역이 확장되거나 축소되므로 간단합니다. 위젯의 크기와 관계없이 사용자는 모든 정보 요소를 스크롤하여 표시할 수 있습니다.

정보 위젯은 스크롤할 수 없고 모든 콘텐츠가 지정된 크기 내에 들어가야 하므로 더 많은 실무형 계획이 필요합니다. 위젯의 콘텐츠와 레이아웃을 사용자가 크기 조절 작업을 통해 정의한 크기로 동적으로 조정해야 합니다.

다음 예에서 사용자는 3단계로 날씨 위젯의 크기를 조절하여 위젯이 커짐에 따라 현재 위치의 날씨에 관한 풍부한 정보를 노출할 수 있습니다.

가장 작은 3x2 그리드 크기의 날씨 위젯 예. 위치 이름 (도쿄), 온도 (14°), 부분적으로 흐린 날씨를 나타내는 기호가 나열된 날씨 위젯
그림 7. 3x2 그리드로 '작은' 크기의 날씨 위젯 예


5x2 '중간' 크기의 날씨 위젯 예(3x2 그리드 크기의 모든 UI, '대부분 흐림' 라벨, 오후 4시~오후 7시 예보 온도)
그림 8. 5x2 그리드 '중간' 크기의 날씨 위젯 예


3x2 및 5x2 그리드 크기의 모든 UI와 화요일부터 금요일까지의 날씨 예보가 포함된 5x4 '큰' 크기의 날씨 위젯 예
그림 9. 5x4 그리드 '대형' 크기의 날씨 위젯 예

위젯 크기별로 표시할 앱 정보의 양을 결정합니다. 크기가 작은 경우 필수 정보에 집중하고 위젯이 가로 및 세로로 커짐에 따라 컨텍스트 정보를 추가합니다.

레이아웃 고려사항

개발하는 기기의 배치 그리드 크기에 따라 위젯을 배치하고 싶을 수 있습니다. 이 값은 초기 근사값으로 유용할 수 있지만 다음 사항에 유의하세요.

  • 가변 그리드 크기 대신 '크기 버킷' 전체에 걸쳐 위젯 크기 조절 전략을 계획하면 가장 신뢰할 수 있는 결과를 얻을 수 있습니다.
  • 셀의 수, 크기, 간격은 기기마다 크게 다를 수 있습니다. 따라서 위젯이 유연하고 예상보다 많은 또는 더 적은 공간을 수용할 수 있는 것이 매우 중요합니다.
  • 사용자가 위젯의 크기를 조절하면 시스템은 위젯이 자체적으로 다시 그릴 수 있는 dp 크기 범위로 응답합니다.
  • Android 12부터 더 세분화된 크기 속성과 더 유연한 레이아웃을 제공할 수 있습니다. 여기에는 다음이 포함됩니다.

사용자의 위젯 구성

위젯이 유용해지기 전에 사용자가 위젯을 설정해야 하는 경우도 있습니다. 받은편지함을 표시하기 전에 사용자가 메일 폴더를 선택해야 하는 이메일 위젯이나 표시할 갤러리의 사진을 할당해야 하는 정적 사진 위젯을 생각해 보세요. Android 위젯은 사용자가 위젯을 홈 화면에 드롭한 직후에 구성 선택사항을 표시합니다.

위젯 디자인 체크리스트

  • 위젯에서 한눈에 파악할 수 있는 정보의 작은 부분에 초점을 맞춥니다. 앱의 정보를 확장합니다.
  • 용도에 적합한 위젯 유형을 선택합니다.
  • 위젯의 콘텐츠가 다양한 크기에 맞게 조정되는 방식을 계획합니다.
  • 레이아웃이 확장되거나 축소될 수 있도록 하여 위젯 레이아웃을 방향 및 기기와 독립적으로 만듭니다.
  • 위젯에 추가 구성이 필요한지 고려합니다.