앱 위젯 디자인 가이드라인

앱 위젯 (경우에 따라 '위젯'이라고도 함)은 Android 1.5에서 도입되어 Android 3.0 및 3.1에서 크게 개선된 기능입니다. 위젯은 애플리케이션의 정보를 시의적절하게 표시하거나 관련성 있는 정보를 한눈에 확인할 수 있도록 사용자의 홈 화면에 표시할 수 있습니다. 표준 Android 시스템 이미지에는 아날로그 시계, 음악, 기타 애플리케이션용 위젯을 비롯한 여러 위젯이 포함되어 있습니다.

Android 4.0의 앱 위젯 예.

그림 1. Android 4.0의 앱 위젯 예

이 문서에서는 다른 위젯 및 Android 홈 화면의 다른 요소(예: 런처 아이콘 및 바로가기)와 그래픽에 맞도록 위젯을 디자인하는 방법을 설명합니다. 또한 위젯 아트워크의 일부 표준과 위젯 그래픽 도움말 및 유용한 정보도 설명합니다.

위젯 개발에 관한 자세한 내용은 개발자 가이드앱 위젯 섹션을 참고하세요.

표준 위젯 분석

일반적인 Android 앱 위젯에는 경계 상자, 프레임, 위젯의 그래픽 컨트롤 및 기타 요소, 이렇게 세 가지 기본 구성요소가 있습니다. 앱 위젯에는 Android에 있는 뷰 위젯의 하위 집합이 포함될 수 있습니다. 지원되는 컨트롤에는 텍스트 라벨, 버튼, 이미지가 포함됩니다. 사용 가능한 뷰의 전체 목록은 개발자 가이드앱 위젯 레이아웃 만들기 섹션을 참고하세요. 잘 디자인된 위젯은 경계 상자 가장자리와 프레임 사이에 여백을 두고 프레임 안쪽 가장자리와 위젯 컨트롤 사이에 패딩을 둡니다.

일반적으로 위젯의 경계 상자와 프레임 및 제어 사이에는 여백과 패딩이 있습니다.

그림 2. 일반적으로 위젯에는 경계 상자와 프레임 사이에 여백이 있고 프레임과 위젯 컨트롤 사이에 패딩이 있습니다.

참고: Android 4.0부터는 위젯 프레임과 앱 위젯의 경계 상자 사이에 사용자 홈 화면의 다른 위젯 및 아이콘과 더 잘 정렬되도록 자동으로 여백이 앱 위젯에 부여됩니다. 이 권장 동작을 활용하려면 애플리케이션의 targetSdkVersion을 14 이상으로 설정하세요.

홈 화면의 다른 위젯과 시각적으로 맞도록 디자인된 위젯은 정렬을 위해 홈 화면의 다른 요소에서 신호를 얻습니다. 또한 표준 음영 효과도 사용합니다. 이러한 모든 세부정보는 이 페이지에 설명되어 있습니다.

위젯 크기 결정

각 위젯은 기본적으로 사용해야 하는 최소 공간을 나타내는 minWidthminHeight를 정의해야 합니다. 사용자가 홈 화면에 위젯을 추가하면 일반적으로 개발자가 지정한 최소 너비 및 높이보다 더 많은 공간을 차지합니다. Android 홈 화면은 사용자에게 위젯과 아이콘을 배치할 수 있는 사용 가능한 공간 그리드를 제공합니다. 이 그리드는 기기에 따라 다를 수 있습니다. 예를 들어 많은 핸드셋에서 4x4 그리드를 제공하고 태블릿은 더 큰 8x7 그리드를 제공할 수 있습니다. 위젯이 추가되면 minWidthminHeight 제약 조건을 충족하는 데 필요한 가로 및 세로 셀을 차지하도록 위젯이 늘어납니다. 아래 위젯 레이아웃 및 배경 그래픽 디자인에서 설명했듯이, 앱 위젯에 나인 패치 배경과 유연한 레이아웃을 사용하면 위젯이 기기의 홈 화면 그리드에 맞게 적절하게 조정되고 사용 가능하고 보기 좋게 유지됩니다.

셀의 너비와 높이, 위젯에 적용되는 자동 여백의 양은 기기마다 다를 수 있지만, 아래 표를 사용하여 원하는 그리드 셀 수를 고려하여 위젯의 최소 크기를 대략적으로 추정할 수 있습니다.

셀 개수
(열 또는 행)
사용 가능한 크기 (dp)
(minWidth 또는 minHeight)
1 40dp
2 110dp
3 180dp
4 250dp
n 70 × n − 30

좋은 기본 상태에서 위젯을 렌더링하는 최소 크기를 지정하여 minWidthminHeight은 신중하게 사용하는 것이 좋습니다. minWidthminHeight를 제공하는 방법의 예로, 현재 재생 중인 노래의 아티스트와 제목 (세로로 쌓임), 재생 버튼, 다음 버튼을 표시하는 음악 플레이어 위젯이 있다고 가정해 보겠습니다.

음악 플레이어 위젯의 예

그림 3. 음악 플레이어 위젯의 예.

최소 높이는 아티스트와 제목의 TextView 두 개 높이와 텍스트 여백 일부여야 합니다. 최소 너비는 재생다음 버튼의 사용 가능한 최소 너비와 최소 텍스트 너비 (예: 10자의 너비), 가로 텍스트 여백을 더한 값입니다.

최소 너비 및 높이 계산에 사용할 크기 및 여백 예

그림 4. minWidth/minHeight 계산을 위한 크기 및 여백의 예 여기서는 텍스트 라벨의 최소 너비로 144dp를 선택했습니다.

계산의 예는 다음과 같습니다.

  • minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
  • minHeight = 48dp + (2 × 4dp) = 56dp

위젯 배경 나인 패치에 고유한 콘텐츠 패딩이 있는 경우 이에 따라 minWidthminHeight에 추가해야 합니다.

크기 조정 위젯

위젯은 Android 3.1부터 가로 또는 세로로 크기를 조절할 수 있습니다. 즉, minWidthminHeight가 실질적으로 위젯의 기본 크기가 됩니다. minResizeWidthminResizeHeight를 사용하여 최소 위젯 크기를 지정할 수 있습니다. 이 값은 위젯을 읽을 수 없거나 사용할 수 없는 크기를 지정해야 합니다.

이는 일반적으로 ListView 또는 GridView를 기반으로 하는 위젯과 같은 컬렉션 위젯의 기본 기능입니다.

앱 위젯에 여백 추가

앞서 언급했듯이 Android 4.0은 targetSdkVersion을 14 이상으로 지정하는 애플리케이션의 경우 홈 화면의 위젯 각 가장자리에 작은 표준 여백을 자동으로 추가합니다. 이렇게 하면 홈 화면의 시각적으로 균형을 맞출 수 있으므로 Android 4.0에서는 앱 위젯의 배경 모양 외부에 추가 여백을 추가하지 않는 것이 좋습니다.

이전 플랫폼 버전에 맞춤 여백이 적용되고 Android 4.0 이상에서 추가 여백이 없는 단일 레이아웃을 쉽게 작성할 수 있습니다. 레이아웃 XML을 사용하여 이 작업을 실행하는 방법에 관한 자세한 내용은 개발자 가이드앱 위젯에 여백 추가를 참고하세요.

위젯 레이아웃 및 배경 그래픽 디자인

대부분의 위젯에는 단색 배경 직사각형 또는 둥근 직사각형 도형이 있습니다. 9개의 패치를 사용하여 각 화면 밀도에 하나씩 이 도형을 정의하는 것이 좋습니다 (자세한 내용은 여러 화면 지원 참고). 9-패치는 draw9patch 도구를 사용하거나 간단히 Adobe® Photoshop과 같은 그래픽 편집 프로그램을 사용하여 만들 수 있습니다. 이렇게 하면 위젯 배경 도형이 사용 가능한 전체 공간을 차지할 수 있습니다. 나인 패치는 전면에 여백을 두고 투명한 픽셀이 없어야 하며 미묘한 그림자 또는 기타 미묘한 효과를 위한 테두리 픽셀을 몇 개 남겨두어야 합니다.

참고: 활동의 컨트롤과 마찬가지로 상태 목록 드로어블을 사용하여 대화형 컨트롤에 시각적으로 포커스가 맞춰진 상태와 눌린 상태가 명확하게 구분되도록 해야 합니다.

9-패치 테두리 픽셀

그림 5. 늘릴 수 있는 영역과 콘텐츠 패딩을 나타내는 9-패치 테두리 픽셀.

StackView를 사용하는 것과 같은 일부 앱 위젯은 배경이 투명합니다. 이 경우 StackView의 각 개별 항목은 여백을 위한 테두리 투명 픽셀이 거의 또는 전혀 없는 더 넓은 가장자리를 사용하는 나인 패치 배경을 사용해야 합니다.

위젯의 콘텐츠에는 RelativeLayout, LinearLayout 또는 FrameLayout과 같은 유연한 레이아웃을 사용해야 합니다. 활동 레이아웃을 다양한 실제 화면 크기에 맞게 조정해야 하는 것처럼 위젯 레이아웃도 다양한 홈 화면 그리드 셀 크기에 맞게 조정되어야 합니다.

다음은 텍스트 정보를 표시하는 음악 위젯과 두 개의 버튼이 사용할 수 있는 레이아웃의 예입니다. 이 예는 OS 버전에 따라 앞서 설명한 여백 추가를 기반으로 합니다. 위젯에 여백을 추가하는 가장 강력하고 탄력적인 방법은 위젯 프레임과 콘텐츠를 패딩 처리된 FrameLayout에 래핑하는 것입니다.

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/my_widget_background">

    <TextView
      android:id="@+id/song_info"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1" />

    <Button
      android:id="@+id/play_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />

    <Button
      android:id="@+id/skip_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />
  </LinearLayout>
</FrameLayout>

이제 이전 섹션의 음악 위젯 예를 살펴보면 다음과 같이 유연한 레이아웃 속성을 사용할 수 있습니다.

음악 위젯 예에서 발췌한 유연한 레이아웃 및 속성

그림 6. 유연한 레이아웃 및 속성 발췌 내용.

사용자가 홈 화면에 위젯을 추가하면 각 그리드 셀의 크기가 80dp × 100dp이고 모든 크기에 8dp의 여백이 자동으로 적용되는 Android 4.0 기기의 예에서는 위젯이 다음과 같이 늘어납니다.

시스템에서 자동으로 추가한 8dp의 여백이 있는 예제 80dp x 100dp 그리드에 위치한 음악 위젯

그림 7. 시스템에서 자동으로 추가한 8dp의 여백이 있는 예시 80dp x 100dp 그리드 위에 있는 음악 위젯

App Widget Templates Pack 사용

새 위젯 디자인을 시작하거나 기존 위젯을 업데이트할 때 먼저 아래의 위젯 디자인 템플릿을 살펴보는 것이 좋습니다. 아래의 다운로드 가능한 패키지에는 나인 패치 배경 그래픽, XML, 여러 화면 밀도, OS 버전 위젯 스타일 및 위젯 색상을 위한 소스 Adobe® Photoshop 파일이 포함되어 있습니다. 템플릿 패키지에는 전체 위젯 또는 위젯의 일부 (예: 버튼)를 대화형으로 만드는 데 유용한 그래픽도 포함되어 있습니다.

위젯 템플릿 발췌 내용

그림 8. 앱 위젯 템플릿 팩에서 발췌한 내용(중간 밀도, 어둡게, Android 4.0/이전 스타일, 기본/포커스/눌림 상태)

아래 링크를 사용하여 최신 App Widget Templates Pack 보관 파일을 다운로드할 수 있습니다.

Android 4.0용 App Widget Templates Pack 다운로드 »