오버레이 및 대화상자 시스템

오버레이 및 대화상자 시스템은(는) 무엇을 하나요?

목적

오버레이 및 대화상자 시스템 스킬은 기본 인터페이스 위에 나타나는 임시 콘텐츠 레이어를 관리하는 방법론을 제공합니다. 사용자 작업에 비례하는 중단 수준을 유지하고, 가능한 경우 맥락을 보존하며, 모달, 드로어, 팝오버 사용 시 인터페이스가 접근 가능하고 반응형으로 유지되도록 보장합니다.

사용 사례

• 파괴적 작업에 대한 확인 흐름 설계 (모달)
• 페이지 맥락을 잃지 않고 복잡한 세부 정보를 편집할 수 있는 보조 작업 공간 생성 (드로어)
• 특정 UI 요소에 대한 맥락적 도움말 또는 툴팁 구현 (팝오버)
• 필터 또는 검색을 위한 모바일 전용 탐색 레이어 설계 (드로어)

사용하지 말아야 할 경우

• 기본 탐색: 오버레이를 메인 사이트 구조에 사용하지 마십시오. 대신 site-navigation-system을 사용하십시오.
• 영구 콘텐츠: 정보를 사용자가 항상 볼 필요가 있다면 기본 페이지 레이아웃의 일부여야 하며, 오버레이가 아니어야 합니다.
• 복잡한 다단계 흐름: 작업에 2~3단계 이상이 필요한 경우, 사용자 혼란을 방지하기 위해 모달 대신 전용 페이지를 고려하십시오.
• 토스트/스낵바 알림: 수동적이고 비차단적인 상태 피드백(예: "저장됨", "클립보드에 복사됨")의 경우 toast-and-snackbar-system을 대신 사용하십시오. 해당 시스템은 위치, 쌓기, 지속 시간, 접근성을 깊이 있게 다룹니다.

입력

1. 콘텐츠 양: 표시해야 할 정보의 양
2. 중단 수준: 사용자가 계속 진행하기 전에 이 작업을 반드시 완료해야 하는지, 아니면 선택 사항인지
3. 트리거 맥락: 사용자가 어디에서 왔으며, 어떤 일이 발생할 것으로 기대하는지
4. 플랫폼/뷰포트: 모바일, 데스크톱 또는 반응형 하이브리드인지

출력

1. 패턴 선택: 중단 매트릭스에 기반한 모달, 드로어, 팝오버 간 명확한 선택
2. 구성 요소 명세: 정의된 영역 (헤더, 콘텐츠, 푸터/액션) 및 내부 계층 구조
3. 동작 명세: 배경 동작 규칙, 닫기 트리거, 반응형 적응
4. 접근성 요구사항: 포커스 관리 및 ARIA 역할 정의

워크플로우

1. 중단 수준별 분류

오버레이의 필요한 "중력"을 결정합니다:

• 수준 1 (높음): 모달. 배경을 비활성화합니다. 중요 결정이나 집중 작업에 사용합니다.
• 수준 2 (중간): 드로어. 가장자리에서 슬라이드 인합니다. 부모 맥락을 보는 것이 유리한 복잡한 하위 작업에 사용합니다.
• 수준 3 (낮음): 팝오버. 특정 요소에 고정합니다. 맥락적 설정이나 정보에 사용합니다.

수동적이고 비차단적인 상태 피드백(수준 4)은 toast-and-snackbar-system을 참조하십시오. 여기서는 범위를 벗어납니다.

2. 내부 계층 구조 정의 (구성 요소)

오버레이에 visual-hierarchy-system을 적용합니다:

• 헤더: 명확한 제목과 일관된 "닫기" 메커니즘 (X 버튼)
• 본문: 주요 콘텐츠 영역. 콘텐츠가 긴 경우 스크롤 동작 정의 (고정 헤더/푸터)
• 푸터: 기본 및 보조 작업, 일관되게 정렬 (일반적으로 데스크톱은 오른쪽 정렬, 모바일은 전체 너비)

3. 높이와 배경 설정

• Z-인덱스 전략: 오버레이가 올바른 쌓임 맥락에 위치하도록 합니다. 모달에는 네이티브 <dialog> 요소를 선호합니다. 이 요소는 자체 상위 레이어 쌓기를 관리하고, 스크림을 위한 ::backdrop 의사 요소를 제공하며, Escape 키로 닫기를 기본 지원합니다.
• 배경 (스크림): 모달과 드로어에 사용하여 배경을 어둡게 하고 주의를 집중시킵니다. 배경을 클릭해 오버레이를 닫을지 정의합니다. <dialog>를 사용하면 수동으로 렌더링된 오버레이 <div> 대신 ::backdrop을 통해 스크림 스타일을 지정합니다.
• 배경 비활성화: 오버레이가 열려 있을 때 나머지 페이지는 상호작용이 불가능하고 보조 기술에서 숨겨져야 합니다. <dialog>.showModal()은 이를 자동으로 수행합니다. 사용자 정의(비<dialog>) 오버레이의 경우, aria-hidden만 사용하는 대신 배경 콘텐츠에 inert 속성을 적용합니다.
• 그림자: 깊이를 사용하여 오버레이가 기본 레이어 위에 위치함을 나타냅니다.

4. 반응형 적응 설계

오버레이는 화면 크기에 따라 변환되어야 합니다:

• 데스크톱 팝오버 -> 모바일 드로어: 작은 맥락 메뉴는 모바일에서 엄지 손가락의 자연스러운 도달 범위를 위해 종종 하단 정렬 드로어가 됩니다.
• 데스크톱 모달 -> 모바일 전체 화면: 큰 모달은 작은 화면에서 공간을 최대화하기 위해 전체 뷰포트를 차지해야 합니다.
• 드로어 동작: 모바일에서 드로어가 뷰포트 너비의 90%를 초과하지 않도록 합니다.

5. 닫기 및 종료 패턴 정의

• 중요하지 않은 오버레이에서 최소 세 가지 종료 방법을 제공합니다: "닫기" 버튼, Escape 키, 배경 클릭
• 중요 (경고) 모달의 경우 명시적인 작업 (예: "취소" 또는 "확인")을 요구합니다.

의사 결정 규칙

• "모달 vs 드로어" 규칙: 사용자가 작업 중에 배경 콘텐츠를 참조해야 한다면 드로어를 사용하십시오. 작업이 "멈추고 수정"하는 순간이라면 모달을 사용하십시오.
• "엄지 손가락" 규칙: 모바일에서는 작업을 엄지 손가락의 자연스러운 도달 범위内에 유지하기 위해 하단 드로어를 우선시하십시오.
• "두 단계" 규칙: 오버레이에 두 개 이상의 내부 "뷰" 또는 단계가 필요한 경우, 자체 페이지에 속할 가능성이 높습니다.
• 배경 로직: "외부 클릭하여 닫기"는 파괴적이지 않은 오버레이에만 허용하십시오. 데이터가 손실될 수 있는 양식에는 절대 허용하지 마십시오.

제약 사항

• 접근성: 키보드로 탐색 가능해야 합니다. 모달은 포커스를 가둬야 합니다 (네이티브 <dialog> 요소는 showModal()로 열릴 때 기본적으로 이 작업을 수행합니다). 배경 콘텐츠는 inert (또는 이에 상응하는 방법)로 만들어 스크린 리더와 키보드 포커스가 벗어날 수 없도록 해야 합니다. 네이티브 요소를 사용하지 않는 경우 role="dialog" 또는 role="alertdialog"와 함께 aria-modal="true" 및 제목을 가리키는 aria-labelledby를 사용하십시오.
• 반응형: 오버레이가 가로 스크롤을 유발해서는 안 됩니다. 내부 콘텐츠는 반응형이어야 합니다.
• 계층 구조: 오버레이의 H1/제목은 컨테이너 내에서 가장 눈에 띄는 요소여야 합니다.

일반적인 실패 패턴

• 오버레이 스프: 여러 모달을 서로 위에 쌓는 경우
• 맥락 손실: 사용자가 작업을 완료하는 데 필요한 정보를 정확히 덮는 모달 사용
• "보이지 않는 닫기": 닫기 버튼을 숨기거나 터치에 너무 작게 만드는 경우 (최소 44x44px)
• 스크롤 충돌: 오버레이가 열려 있는 동안 배경 페이지가 스크롤되도록 허용 (방향 감각 상실 초래)
• 일관성 없는 작업: 서로 다른 오버레이에서 "취소"와 "확인" 버튼 위치를 바꾸는 경우

검증 기준

• 선택된 패턴 (모달/드로어/팝오버)이 작업의 중단 수준과 일치합니다.
• 내부 계층 구조가 명확하며, 별도의 제목과 기본 작업이 있습니다.
• 모바일을 위한 반응형 적응 (예: 팝오버에서 드로어로)이 정의되어 있습니다.
• "외부 클릭하여 닫기" 로직이 데이터 위험도에 적합합니다.
• 포커스 관리 및 키보드 접근성 요구사항이 명시되어 있습니다.
• 높이 (그림자/배경)가 레이어를 기본 페이지와 구분합니다.
• 모달 또는 드로어가 열려 있을 때마다 배경 콘텐츠가 inert (또는 네이티브 <dialog> 요소 사용)로 설정됩니다.