대화 상자 및 팝업

2025-08-22

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

대화

대화 상자의 예

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

플라이아웃

플라이아웃의 예

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

대화 상자와 달리 플라이아웃 바깥쪽을 탭하거나 클릭하거나, 이스케이프 키 또는 뒤로 단추를 누르거나, 앱 창의 크기를 조정하거나, 디바이스의 방향을 변경하여 플라이아웃을 빠르게 해제할 수 있습니다.

이것이 올바른 컨트롤인가요?

대화 상자 및 플라이아웃은 사용자가 중요한 정보를 인지하도록 보장하지만, 사용자 경험을 방해하기도 합니다. 대화 상자는 모달(차단)이므로 사용자가 대화와 상호 작용할 때까지 다른 작업을 수행하지 못하도록 차단합니다. 플라이아웃은 덜 충격적인 경험을 제공하지만, 너무 많은 플라이아웃을 표시하면 집중을 방해할 수 있습니다.

대화 상자 또는 플라이아웃을 사용하려는 것으로 확인되면 사용할 대화 상자를 선택해야 합니다.

대화 상자는 상호작용을 차단하지만 플라이아웃은 그렇지 않기 때문에, 사용자가 특정 정보에 집중하거나 질문에 대답하도록 하려면 대화 상자를 사용하는 것이 좋습니다. 반면 플라이아웃은 무언가에 주의를 환기할 때 사용할 수 있지만 사용자가 무시하려는 경우에는 괜찮습니다.

대화 상자를 사용하여...

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

플라이아웃 사용...

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

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

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

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