영어로 읽기

다음을 통해 공유


위젯 개요

Windows 위젯은 디바이스에 설치된 앱과 연결된 텍스트 및 그래픽을 표시하는 작은 UI 컨테이너입니다. 설치된 위젯은 위젯 보드의 그리드에 표시됩니다. 즉, 사용자가 작업 표시줄에서 위젯 아이콘을 클릭하거나, Windows+W 바로 가기를 사용하거나, 화면 왼쪽 가장자리에서 스와이프할 때 Windows 바탕 화면을 오버레이하는 플라이아웃 평면이라고 말할 수 있습니다. 위젯은 사용자가 사용하는 앱에서 개인 설정 콘텐츠와 바로 가기를 집계하여 사용자가 자신에게 중요한 정보를 파악할 수 있도록 도와줍니다. 빠르게 소모되며, 실행 가능합니다. 위젯은 앱과 웹 사이트를 바꾸기 위한 것이 아니라 사용자가 즉시 읽고 트리거할 수 있는 가장 필요한 정보나 자주 사용하는 기능에 원활하게 액세스할 수 있도록 합니다. 위젯을 설계할 때 소비자에게 제공할 가치를 고려하십시오. 

위젯 보드의 스크린샷. 보드는 상단에 시간이 표시되고 그 뒤에 검색 표시줄이 있는 둥근 사각형입니다. 보드의 나머지 부분은 각각 위젯을 나타내는 둥근 사각형의 그리드입니다. 개별 위젯은 주요 뉴스 기사, 현재 날씨, 현재 교통량 등을 보여 줍니다.

위젯 용어

용어 정의
위젯 호스트 Windows 위젯을 표시하고 관리하는 애플리케이션입니다. 현재 릴리스에서 유일한 위젯 호스트는 Windows 11에 기본 제공된 위젯 보드입니다.
위젯 보드 위젯 보드는 사용자가 작업 표시줄에서 위젯 아이콘을 클릭하거나 Windows+W 바로 가기를 사용하거나 화면 왼쪽 가장자리에서 스와이프할 때 바탕 화면 위에 표시되는 Windows 11 시스템 구성 요소입니다. 위젯 보드는 위젯을 표시하고 보드에서 레이아웃을 관리합니다.
위젯 위젯은 앱의 중요한 콘텐츠 또는 작업을 표시하는 적응형 카드입니다. 사용자는 연결된 앱이나 웹 사이트를 실행할 필요 없이 원하는 정보에 즉시 액세스할 수 있습니다. 위젯 콘텐츠는 하루 종일 동적으로 새로 고쳐져 사용자에게 한 눈에 재미있게 즐길 수 있는 최신의 콘텐츠를 제공합니다. 위젯은 사용자가 더욱 깊이 참여하도록 하기 위해 연결된 앱을 실행할 수 있는 기본 대화형 기능을 제공합니다. 위젯은 앱과 웹 사이트를 바꾸기 위한 용도가 아닙니다.
위젯 공급자 위젯 공급자는 위젯에 표시할 콘텐츠를 제공하는 Windows 앱입니다. 위젯 공급자에는 위젯의 콘텐츠, 레이아웃 및 대화형 요소가 있습니다.

위젯 디자인 지침

위젯의 시각적 환경에는 적응형 카드 JSON 형식을 사용하여 정의된 시각적 요소 및 상호 작용 요소가 포함됩니다. 적응형 카드 디자이너는 적응형 카드 디자인을 위한 실시간 편집기와 지원되는 위젯 크기 및 테마에 대한 템플릿을 제공합니다. 위젯 보드가 모든 위젯에 대해 일관되고 친숙한 환경을 제공하도록 하려면 위젯 디자인이 Windows 위젯 디자인 원칙을 준수하는 것이 중요합니다.

위젯의 시각적 요소에 대한 대략적인 설명은 위젯 상태 및 기본 제공 UI 구성 요소를 참조하세요.

위젯 원칙

좋은 Windows 위젯을 만들려면 위젯을 설계하고 개발할 때 다음 원칙을 고려하세요.

한 눈에 볼 수 있음

사용자는 위젯을 최대한 활용하기 전에 간단히 사용해 볼 수 있습니다. 더 많은 세부 정보나 더 자세한 상호 작용을 원하는 경우에만 클릭하면 됩니다.

신뢰할 수 있음

자주 사용하는 정보를 즉시 표시하여 사용자가 이러한 단계를 반복하는 시간을 절약할 수 있습니다. 앱에 대한 일관된 다시 참여를 유도합니다.

유용함

가장 유용하고 관련성 높은 정보를 향상시킵니다.

개인적

개인 설정 콘텐츠를 제공하며, 고객과의 정서적인 연결이 만들어집니다. 위젯에는 광고가 포함되어서는 안 됩니다. 고객은 위젯 콘텐츠와 레이아웃을 제어할 수 있습니다.

포커스

각 위젯은 일반적으로 하나의 주요 작업 또는 시나리오에 초점을 맞춰야 합니다. 위젯은 앱과 웹 사이트를 바꾸기 위한 것이 아닙니다.

신선함

콘텐츠는 사용 가능한 컨텍스트에 따라 동적으로 새로 고쳐야 합니다. 최신 상태로 적시에 올바른 콘텐츠를 제공합니다.

앱의 위젯 환경 계획

  1. 고객에 대한 이해를 바탕으로 사용자가 앱이나 웹 사이트를 열지 않고도 빠르게 액세스하려고 하는 가장 중요한 콘텐츠나 가장 유용한 작업을 식별합니다. 위젯 원칙 섹션에 열거된 원칙을 고려하고 이를 앱에 적용할 수 있는 방법에 대해 생각해 보세요.
  2. 앱은 여러 개별 위젯을 지원할 수 있습니다. 각 위젯이 특정 목적에 집중하도록 지원할 개별 위젯의 수를 결정하세요.
  3. 각 위젯에 포함할 콘텐츠를 결정합니다. 단일 위젯은 소형, 중형 및 대형 등 세 가지 다른 크기를 지원할 수 있습니다. 각 위젯에 대해 어떤 콘텐츠가 사용자와 비즈니스 요구에 가장 큰 가치를 가져다줄지 생각하세요. 작은 것부터 큰 것까지 각각의 크기에 대해 위젯의 목적은 동일해야 합니다. 하지만 표시되는 정보의 양은 크기가 커질수록 확장되어야 합니다. 위젯 공급자는 위젯 레이아웃을 사용자 지정할 때 사용자에게 유연성을 제공하기 위해 모든 위젯 크기를 조정하는 것이 좋습니다.
  4. 위젯이 지원할 사용자 상호 작용에 대해 생각해 보세요. 사용자는 위젯 제목이나 위젯에 정의한 모든 클릭 대상을 클릭할 수 있습니다. 이러한 상호 작용은 사용자가 앱의 루트에서 탐색할 필요가 없도록 사용자가 관심 있는 항목으로 직접 이동하는 앱 또는 웹 사이트에 대한 딥 링크 바로 가기를 활성화할 수 있습니다. 제공되는 다양한 탐색 모델을 고려합니다.
  5. 앱에서는 위젯의 레이아웃과 데이터를 표시할 위젯 보드로 보내는 백 엔드 기능을 구현하는 위젯 공급자를 구현해야 합니다. 현재 패키지된 Win32 데스크톱 앱 또는 PWA(프로그레시브 웹앱)를 사용하여 위젯 공급자를 구현할 수 있습니다. Win32 위젯 공급자를 만드는 방법에 대한 자세한 내용은 위젯 서비스 공급자를 참조하세요. PWA 위젯 공급자에 대한 자세한 내용은 PWA 기반 위젯 빌드를 참조하세요.

이 섹션의 내용

위젯 상태 및 UI

위젯 디자인 기초

위젯 상호 작용 디자인

적응형 카드 디자이너로 위젯 템플릿 만들기