대화 상자 및 플라이아웃

대화 상자 및 플라이아웃은 사용자의 알림, 승인 또는 추가 정보가 필요한 작업이 발생할 때 나타나는 일시적인 UI 요소입니다.

대화 상자

대화 상자는 상황에 맞는 앱 정보를 제공하는 모달 UI 오버레이입니다. 대화 상자는 명시적으로 닫힐 때까지 앱 창과의 상호 작용을 차단합니다. 종종 사용자의 작업을 요청하기도 합니다.

플라이아웃

플라이아웃은 사용자가 수행하는 작업과 관련된 UI를 표시하는 간단한 상황별 팝업입니다. 이 기능은 배치 및 크기 조정 논리를 포함하며, 보조 컨트롤을 표시하거나 항목에 대한 세부 정보를 표시하는 데 사용할 수 있습니다.

대화 상자와 달리 플라이아웃 외부를 탭 또는 클릭하거나, Esc 키 또는 뒤로 단추를 누르거나, 앱 창 크기를 조정하거나, 디바이스 방향을 변경하면 플라이아웃을 빠르게 닫을 수 있습니다.

올바른 컨트롤인가요?

대화 상자와 플라이아웃을 통해 사용자는 중요한 정보를 알 수 있지만 사용자 환경을 중단하기도 합니다. 대화 상자는 모달(차단)이므로 대화 상자와 상호 작용할 때까지 다른 작업을 수행하지 못하도록 사용자를 차단합니다. 플라이아웃은 덜 거슬리는 환경을 제공하지만 너무 많은 플라이아웃을 표시하면 주의가 산만해질 수 있습니다.

대화 상자나 플라이아웃을 사용하기로 결정한 후에는 사용할 항목을 선택해야 합니다.

대화 상자가 상호 작용을 차단하고 플라이아웃은 차단하지 않는다는 점을 감안할 때, 사용자가 특정 정보에 집중하거나 질문에 답하기 위한 모든 것을 삭제하기를 원하는 상황을 위해 대화 상자가 예약되어야 합니다. 반면에 플라이아웃은 어떤 것에 주의를 환기시키고 싶을 때 사용할 수 있지만 사용자가 이를 무시하려고 해도 괜찮습니다.

대화 상자의 용도

• 계속하기 전에 사용자가 반드시 읽고 확인해야 하는 중요한 정보를 표현합니다. 예를 들면 다음과 같습니다.
  • 사용자의 보안이 침해될 수 있는 경우
  • 사용자가 귀중한 자산을 영구적으로 변경하려고 하는 경우
  • 사용자가 귀중한 자산을 삭제하려고 할 때
  • 앱 내 구매를 확인하려면
• 연결 오류 등 전체 앱 컨텍스트에 적용되는 오류 메시지입니다.
• 질문: 앱이 사용자를 대신하여 선택할 수 없는 경우와 같이 앱이 사용자에게 차단 질문을 해야 하는 경우입니다. 차단 질문은 무시하거나 연기할 수 없으며 사용자에게 잘 정의된 선택 사항을 제공해야 합니다.

플라이아웃의 용도

• 작업을 완료하기 전에 필요한 추가 정보를 수집합니다.
• 특정 시간에만 관련된 정보 표시 예를 들어, 사진 갤러리 앱에서 사용자가 이미지 썸네일을 클릭하면 플라이아웃을 사용하여 이미지의 큰 버전을 표시할 수 있습니다.
• 페이지 항목에 대한 세부 정보나 자세한 설명 등 추가 정보를 표시합니다.

대화 상자 및 플라이아웃을 사용하지 않도록 방지하는 방법

공유하려는 정보가 사용자를 차단할 만큼 중요한 정보인지 고려합니다. 또한 정보를 얼마나 자주 표시해야 하는지 고려합니다. 몇 분마다 대화 상자나 알림을 표시하는 경우 대신 기본 UI에서 이 정보를 위한 공간을 할당할 수 있습니다. 예를 들어, 채팅 클라이언트에서는 친구가 로그인할 때마다 플라이아웃을 표시하는 대신 현재 온라인 상태인 친구 목록을 표시하고 이들이 로그온할 때 친구를 강조 표시할 수 있습니다.

대화 상자는 파일 삭제와 같은 작업을 실행하기 전에 확인하는 데 자주 사용됩니다. 사용자가 특정 작업을 자주 수행할 것으로 예상되는 경우 사용자에게 매번 작업을 확인하도록 강요하는 대신 사용자가 실수한 작업을 실행 취소할 수 있는 방법을 제공하는 것이 좋습니다.

예

• 중요 API: ContentDialog 클래스, Flyout 클래스

• WinUI 3 갤러리 앱이 설치되어 있는 경우 여기를 클릭하여 앱을 열고 ContentDialog 또는 Flyout이 작동하는 모습을 확인합니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

대화 상자를 만드는 방법

대화 상자 문서를 참조하세요.

플라이아웃을 만드는 방법

플라이아웃 문서를 참조하세요.