DLWorker UI/UXPattern 06
2026.10.12.3 · proposed
06

PATTERN · OVERLAY & VIEWER

항상 닫을 수 있는 Overlay

모바일 top bar보다 높은 계층, sticky header/footer, 단일 내부 scroll과 focus 복귀를 보장합니다.

proposedContract v12026.10.12.3

01 · PURPOSE

무엇을 해결하는가

모바일 top bar보다 높은 계층, sticky header/footer, 단일 내부 scroll과 focus 복귀를 보장합니다.

02 · USE WHEN

사용 조건

설정 상세나 문서·이미지 viewer처럼 현재 맥락 위에 집중 화면이 필요할 때 사용합니다.

  • close action은 safe-area 안에 고정
  • 본문만 내부 scroll
  • 데스크톱은 side panel을 우선하고 modal은 집중 작업에 제한

03 · STATUS

표준 상태와 버전

표준
proposed
도입 버전
2026.10.12.3
배포
source-only

04 · LIVE EXAMPLE

실행 예제

SETTINGS DETAIL커넥터 인스턴스
safe-area ready

헤더와 닫기 버튼은 항상 접근할 수 있고 본문만 스크롤합니다.

Illustrative — 실제 Worker runtime 데이터가 아닙니다.

05 · RESPONSIVE

Desktop · Tablet · Mobile

Desktop

정보 밀도와 보조 설명을 유지합니다.

Tablet

열을 축소하고 조작 순서를 보존합니다.

Mobile

320px에서 page overflow 없이 단일 열로 전환합니다.

06 · STATES

상태 변형

closedopeningopenloadingerrorclosing

07 · STRESS

콘텐츠 스트레스

  • iPhone notch
  • 100vh보다 긴 본문
  • 긴 제목과 footer action 3개

08 · ACCESSIBILITY

키보드와 보조기술

  • role=dialog와 aria-modal 제공
  • focus trap과 Escape close
  • 닫을 때 trigger로 focus 복귀

09 · DO / DON'T

선택 기준

Do
  • header와 close를 항상 노출
  • scroll ownership을 하나로 유지
Don't
  • global top bar 아래에 overlay 배치
  • body와 modal을 동시에 scroll

10 · CODE

구현 예제

<section role="dialog" aria-modal="true"><header><h2>Settings Detail</h2><button aria-label="닫기">×</button></header><div class="dialog-body">…</div></section>

11 · VALIDATION

검증 체크리스트

  1. safe-area
  2. Escape close
  3. focus trap
  4. focus return
  5. internal scroll

12 · ADOPTION

Worker 채택 상태

채택
not-started
소유
Worker 개발세션
실행 증거
없음