위젯

위젯(widget)은 홈 화면 구성에 있어 핵심적인 관점을 제공합니다. 위젯은 홈 화면에서 바로 쓸 수 있도록 앱에서 가장 중요한 자료와 기능을 한 곳에 모아주는 역할로 생각할 수 있습니다. 사용자는 홈 화면 여기저기 위젯을 이동하여 배치하거나, 위젯이 지원하는 경우 크기를 조절하여 위젯의 정보량을 조절할 수 있습니다.

위젯 종류

위젯을 구상하려면, 우선 어떤 종류의 위젯을 만들 것인지 생각해보세요. 위젯은 일반적으로 아래 목록 중 하나에 속합니다.

정보 위젯

정보 위젯은 사용자에게 중요한 정보를 표시하고 시간에 따른 변화를 추적합니다. 날씨 정보, 시계, 스포츠 경기 득점표 등이 이에 해당합니다. 정보 위젯을 터치하면 보통 그에 대응하는 앱이 위젯보다 더 자세하게 정보를 표시해 줍니다.

 

모음 위젯

모음 위젯은 이름 그대로 특정한 종류의 여러 자료를 한번에 모아 보여주는 기능을 합니다. 가령 갤러리 앱은 그림들을, 뉴스 앱이나 이메일 앱은 글들을 모읍니다. 모음 위젯은 일반적으로 자료를 탐색하거나, 그 자료 중 하나를 선택하여 자세히 보는 두 가지 사용법을 가집니다. 모음 위젯은 세로 방향으로 스크롤할 수 있습니다.

ListView 위젯
GridView 위젯

제어 위젯

제어 위젯의 기본 목적은 자주 사용하는 기능을 보여주어, 앱을 열지 않고 바로 제어할 수 있도록 하는 것입니다. 앱에 대한 리모컨이라고 생각해주세요. 가령, 음악 앱 위젯은 음악 앱 밖에서도 음악을 재생하고 멈추거나 다음 곡으로 넘어가는 기능을 가집니다.

제어 위젯과의 상호작용에서, 위젯 기능이 어떤 자료를 제공한다면 연관 뷰로 진행할 수도 있습니다. 검색 위젯의 경우가 대표적인 예입니다.

 

혼합 위젯

모든 위젯이 위의 세 기능 중 하나를 중심으로 삼긴 하지만, 실제 많은 위젯은 여러 기능을 조합하여 만들어집니다.

위젯 설계를 할 때에는 중심이 되는 기능을 하나 정한 다음 필요한 경우 다른 기능을 추가하세요.

음악 재생기 위젯은 기본적으로 제어 위젯이지만, 현재 재생중인 곡 정보를 함께 제공합니다. 제어 위젯에 정보 위젯을 조합한 것으로 볼 수 있습니다.

위젯의 제약점

위젯을 "미니 앱"으로 생각할 수 있긴 하지만, 위젯에는 명확한 제약점이 존재하며 위젯 디자인 시 이들을 이해하고 있어야 합니다.

제스처

위젯은 홈 화면 내에 상주하기 때문에, 홈 화면 간 이동 등의 조작과 충돌하지 않아야 합니다. 이러한 점으로 인해 위젯 제스처는 일반적인 앱에 비해 제한적입니다. 가령 앱은 뷰 페이저를 통하여 앱 내에서 좌우로 이동할 수 있지만, 이 제스처는 홈 패널 간의 이동에 사용하고 있어서 위젯에서는 사용할 수 없습니다.

위젯에서 가능한 제스처는 다음과 같습니다.

  • 터치
  • 세로로 스와이프

구성 요소

위의 인터랙션 제약으로 인해, 사용 불가능한 제스처를 이용하는 UI 구성 요소들 역시 사용할 수 없습니다. 사용 가능한 구성 요소 및 레이아웃 제한에 대해서는 App Widgets API 가이드(영어)의 "Creating App Widget Layouts" 부분을 참고해주세요.

디자인 가이드라인

위젯 컨텐츠

위젯은 여러분의 앱에 새롭고 흥미로운 정보가 있을 때 이를 사용자에게 "광고"하여 사용자의 주의를 끄는 장치입니다.

위젯은 신문 첫 페이지의 티저와 같이 앱의 정보를 통합하고 집중하여, 더 자세한 정보를 얻을 수 있는 연결을 제공해야 합니다. 비유하자면 앱이 정보의 "식사"라면 위젯은 "간식"입니다. 중요한 것은, 앱이 위젯보다 더 자세한 정보를 제공해야 한다는 것입니다.

위젯 내비게이션

위젯은 정보를 제공하는 기능 외에도, 앱에서 자주 사용하는 기능에 대한 단축 링크 기능을 제공할 수 있다는 것을 고려해야 합니다. 사용자가 작업을 더 빠르게 처리할 수 있고, 홈 화면에서 할 수 있는 기능이 늘어납니다.

위젯 외관을 탭할 때 연결해줄 수 있는 후보의 예시는 다음과 같습니다.

  • 생성 기능: 문서나 메시지 등의 새로운 컨텐츠를 만드는 기능입니다.
  • 앱 최상위 화면 열기: 일반적으로 앱의 특정 정보 요소를 탭하면 그에 대응하는 하위 화면이 띄워집니다. 위젯이 앱의 최상위 화면으로 접근할 방법을 제공하면 앱 내의 이동성이 증가하며, 홈 화면에서 위젯이 앱 단축을 대체할 수 있습니다. 위젯 화면에 앱 아이콘을 넣으면 어떤 위젯이 어떤 앱에 대응하는지에 대한 애매함을 없앨 수 있습니다.

위젯 크기 조절

안드로이드 3.1에 위젯 크기를 조절할 수 있는 기능이 추가되었습니다. 사용자는 위젯이 화면을 넘지 않는 선에서 가로 및 세로 길이를 조절할 수 있습니다. 위젯을 만들 때, 위젯 크기를 바꿀 수 있는지 혹은 크기 조절에 제한을 둘 것인지 결정할 수 있습니다. 위젯 크기가 원래부터 고정되어 있다면 크기 조절을 지원할 필요는 없습니다.

사용자에게 크기를 조절할 수 있도록 하면 다음의 장점이 있습니다.

  • 각 위젯이 제공하는 정보량을 직접 설정하는 것이 가능합니다.
  • 홈 패널의 위젯/아이콘 레이아웃을 더 효율적으로 배치할 수 있습니다.
롱 프레스 후 떼는 제스처를 통해 위젯 크기를 조절할 수 있습니다. 손잡이나 모서리를 드래그하여 원하는 크기로 설정합니다.

위젯의 크기 조절을 지원하는 방식은 어떤 종류의 위젯인가에 따라 결정됩니다. 리스트나 그리드 모음 위젯의 경우 단순하게 처리할 수 있는데, 크기를 조절하면 세로 스크롤 영역의 크기가 바뀝니다. 위젯 크기와 관계없이 사용자는 뷰 내의 각 항목을 스크롤할 수 있습니다. 정보 위젯은 스크롤 영역이 없으며 각 컨텐츠가 주어진 크기에 맞게 배치되어 있기 때문에, 조금 더 손이 가는 작업이 필요합니다. 조절되는 크기에 따라 위젯 컨텐츠 및 배치를 동적으로 조절해야 합니다.

이 예제에서는 날씨 위젯의 가로 길이를 4단계로 조절할 수 있으며 크기가 커질수록 더 풍부한 정보를 제공합니다.

각 위젯 크기마다 앱의 어떤 정보가 표시되어야 하는지 정하세요. 크기가 작으면 필수 정보에 집중하고, 공간이 커질수록 더 많은 맥락 정보를 추가하세요.

배치 고려사항

위젯 내부를 배치할 때 여러분이 가진 개발 기기의 그리드 차원값을 기준으로 만들 수 있다면 솔깃할 겁니다. 처음 구성할 때는 이런 방식이 어느정도 도움이 될 수도 있지만, 다음의 내용을 항상 주의해야 합니다.

  • 각 셀의 숫자, 크기나 간격은 기기마다 다를 수 있기 때문에, 위젯에 융통성을 주어 그 값들이 예상하는 것과 다소 차이가 있더라도 잘 동작하도록 해야 합니다.
  • 사실, 사용자가 위젯 크기를 변경할 때 시스템은 위젯이 변경할 수 있는 크기를 dp 값으로 보냅니다. 가장 확실한 결과를 얻으려면 상황에 따라 변할 수 있는 그리드 차원보다는 "단위 크기" 기준으로 변경하도록 계획해야 합니다.

위젯 환경설정

가끔씩은 위젯을 쓰기 전에 설정이 필요한 경우도 있습니다. 이메일 위젯을 예로 들면, 메일함을 보여주기 전에 어떤 메일 계정을 쓸지 선택해야 합니다. 고정 사진 위젯의 경우 갤러리 내 어떤 그림을 쓸지 알려주어야 합니다.

안드로이드 위젯은 홈 패널에 처음 드롭될 때 설정 선택 화면을 띄웁니다. 설정 화면을 가볍게 만들고 설정 대상이 2~3개를 넘지 않도록 하세요. 설정 화면은 전체화면이 아니라 다이얼로그 화면을 사용하여 사용자가 현재 위치를 알 수 있도록 하세요. 여러 다이얼로그가 필요하더라도 그렇게 하는 것이 좋습니다.

한번 설정이 끝난 위젯을 다시 설정해야 할 이유는 별로 없습니다. Once setup, there typically is not a lot of reason to revisit the setup. 따라서 안드로이드에서는 위젯에 "설정" 등의 버튼을 보여주지 않습니다.

구글 Play 위젯을 홈 패널에 추가한 다음, 위젯은 사용자에게 어떤 종류의 미디어를 표시할지 묻습니다.

확인 목록

  • 위젯에서는 휙 넘겨볼 정도의 정보에만 집중하세요. 추가 정보를 표시하는 건 앱의 몫입니다.
  • 목적에 맞는 위젯 종류를 선택하세요.
  • 위젯 크기를 조절할 수 있는 경우, 위젯 컨텐츠가 다양한 크기에서 어떻게 적응해야 하는지 계획을 세우세요.
  • 위젯 레이아웃이 늘어나거나 줄어드는 것에 대비할 수 있도록 하여, 화면 방향이나 기기와 무관하게 동작할 수 있도록 만드세요.