2026년 정적 HTML에서 HTML inert로 모달 포커스 제어: Safari WebKit 검증과 클라우드 Mac mini

랜딩 페이지와 문서 허브는 2026년에도 정적 HTML이 유리합니다. CDN 캐시가 단순하고 빌드 파이프라인도 가볍죠. 하지만 모달을 열어도 Tab으로 푸터 링크에 들어가거나 VoiceOver가 배경 제목을 읽는 문제는 반복됩니다. inert 불리언 속성은 하위 트리 전체를 비대화형으로 만들어 포인터 적중과 포커스 이동을 동시에 막습니다. 링크마다 tabindex="-1"을 수동으로 붙이는 것보다 유지보수가 쉽습니다.

이 글은 Popover API 패턴, @layer 캐스케이드 전략, MPA View Transitions와 연결해 읽으면 레이어·모션·포커스가 한 줄로 정렬됩니다. Safari WebKit 검증 절차와 MacHTML 공개 가격 기준 하루 약 16.9달러의 클라우드 Mac mini 활용법도 정리합니다.

inert의 의미와 범위

HTML 표준에서 inert는 요소와 자손을 사용자 입력에서 분리합니다. 화면에는 남으므로 단순 숨김과 다릅니다. 정적 사이트에서는 헤더·본문·푸터를 #page-shell로 감싸고 모달만 형제로 두는 패턴이 안전합니다. 열 때 shell.inert = true, 닫을 때 false로 돌리는 작은 상태기계를 바닐라 JS로 두면 프레임워크 없이도 실패 지점이 줄어듭니다.

disabled가 폼 컨트롤에만 적용되는 것과 달리 inert는 임의 마크업에 쓸 수 있습니다. Astro·Eleventy 출력에도 그대로 실을 수 있습니다. URL 해시나 history.pushState와 결합해 공유 가능한 모달 상태를 만들 때도, 기본 HTML은 비활성으로 두고 향상만 켜는 식으로 점진 개선이 가능합니다.

aria-hidden과 네이티브 dialog의 차이

aria-hidden="true"는 보조 트리에서 제외할 뿐 클릭이나 포커스를 자동으로 막지 않습니다. z-index 실수로 “안 보이는데 눌리는” 현상이 남을 수 있습니다. inert는 히트 테스트와 포커스 순회를 함께 제어해 모달 기대에 가깝습니다. dialog.showModal()은 상위 레이어와 포커스 트랩을 제공하지만 스타일 자유도 때문에 inert를 병행하는 팀도 많습니다.

제3자 iframe(채팅, 지도, 광고)은 조상의 inert가 항상 관통하지 않을 수 있습니다. 계약으로 tabindex와 가시성 훅을 요구하고, 동의 전에는 초점 가능 요소를 만들지 않도록 하세요. RFC 맨 앞에 한 단락만 적어도 이후 재작업을 수 시간 줄일 수 있습니다.

Safari·VoiceOver·레티나 스케일

2026년 WebKit은 inert를 널리 구현했지만 VoiceOver는 inert 경계와 aria-modal을 겹치면 중복 안내를 할 수 있습니다. 첫 패스에서 불필요한 역할을 제거하세요. backdrop-filter를 형제에 두면 2x 레티나에서 히트 테스트가 흔들리는 사례가 보고됩니다. 시뮬레이터만으로는 부족하고 실기기가 필요합니다. Safari Technology Preview는 안정판보다 앞서므로 두 결과를 모두 남기세요.

모달 직후 주요 버튼의 첫 pointerdown은 콜드 캐시에서도 120ms 이내가 이상적입니다. 초과하면 투명 오버레이가 이벤트를 가로채는 경우가 많습니다. LCP·CLS와 같은 대시보드에 올리면 비개발 이해관계자에게도 설명이 쉽습니다. 야간 WebKit 스모크를 돌릴 때 Apple Silicon Mac mini는 유휴 전력이 대략 12W 전후로 조용해 사무실에 두기 좋습니다.

서랍·임베드·z-index 예산

쿠키 바, 히어로 동영상, 챗 버블이 공존하면 z-index 표를 만드세요. 예: 본문 0–99, 고정 내비 100–199, 모달 1000+ 등 구간을 정하고 거대한 정수를 금지합니다. 법적 배너만 조작 가능하게 하려면 본문에 inert를 걸고 동의 버튼만 밖으로 빼는 패턴이 흔합니다.

View Transitions로 전환 애니메이션을 쓸 때는 Promise가 끝난 뒤 inert를 해제하세요. 그렇지 않으면 포커스가 페이드 중인 노드에 남아 VoiceOver가 중간 상태를 읽습니다. prefers-reduced-motion: reduce에서는 애니메이션을 사실상 1프레임으로 줄여 포커스 순서 재현성을 우선하세요.

계측·세션 리플레이·회귀 방지

세션 리플레이 SDK가 투명 캡처 레이어를 깔면 배경을 inert로 막아도 이벤트가 새는 경우가 있습니다. 계측 스크립트를 inert 대상 셸 안에 두거나 모달 표시 중 리플레이를 일시 중지하세요. E2E에서는 모달 오픈 상태에서 히어로 CTA 활성화가 0회임을 단언합니다.

개발 중에만 focusin으로 document.activeElement를 로그하고 릴리스에서는 제거하세요. 사고 대응용으로 5분만 다시 켤 수 있는 플래그가 있으면 편합니다. Safari 버전 문자열과 macOS 마이너를 릴리스 노트에 남기면 지원이 티켓을 대조하기 쉽습니다.

결정 매트릭스

시나리오	권장	이유
단일 모달 LP	inert 셸 + dialog 역할	JS가 작고 히트 테스트가 명확
다단계 마법사	네이티브 dialog/popover	상위 레이어·라이트 디스미스
제3자 iframe	계약 + tab 순서	inert는 경계를 넘지 못함
사고 시 전부 닫기	핫키로 inert·hidden 일괄 해제	운영이 자가 복구

최소 바닐라 토글

const shell = document.querySelector('#page-shell');
const dlg = document.querySelector('#modal');
function openModal() {
  shell.inert = true;
  dlg.hidden = false;
  dlg.querySelector('button[data-close], [autofocus]')?.focus();
}
function closeModal() {
  dlg.hidden = true;
  shell.inert = false;
}

출시 전 체크리스트

1. 모달이 열린 상태에서 키보드로 앞뒤 방향 모두 순회해 배경으로 포커스가 빠지지 않는지 확인한다.
2. VoiceOver를 켜고 같은 순회를 해 탈출 횟수 0을 목표로 한다.
3. 뷰포트 320px, 768px, 1280px에서 스크롤 체인과 클릭 관통을 본다.
4. 주 CTA에 임시 pointerdown 카운터를 달고 모달 중 0인지 본다.
5. Safari 안정판과 Chromium 화면 녹화를 첨부해 최소 90일 보관한다.

기업 조달에서는 보조기술 테스트 증적을 요구하는 경우가 늘고 있습니다. 로컬 실기기가 없는 스프린트에서는 클라우드 Mac mini를 며칠 빌려 지연 리스크를 줄이는 편이 낫습니다. 공개 가격의 하루 약 16.9달러를 예산 앵커로 쓰면 승인이 수월합니다.

상태 표에 “inert 중에도 돌아가야 할 SDK(결제 등)”와 “반드시 멈출 임베드(자동재생 미리보기 등)”를 적고 README 상단에 붙이면 온보딩이 15분 안에 끝납니다. 다국어 사이트라도 토글 로직은 공유하고 문구만 현지화하면 이중 유지보수를 피할 수 있습니다.

단축키(Esc 닫기, 모든 오버레이 강제 해제)를 도움말에 적으면 사고 대응이 빨라집니다. 클라우드 mini에 데모 영상을 두면 긴 문서보다 설득력이 큽니다.

FAQ

inert면 배경 텍스트가 안 읽히나요?

자동으로 사라지지 않습니다. 숨기려면 별도 기법이 필요합니다.

애니메이션 프레임마다 inert를 바꿔도 되나요?

레이아웃 스래싱을 유발하므로 열림/닫힘 이벤트에만 쓰세요.

shadow tree는요?

inert 조상 아래 shadow도 비대화형이 됩니다. slot 설계에 주의하세요.

Apple Silicon Mac mini는 WebKit 실동작을 조용히 검증하기 좋습니다. MacHTML 클라우드 노드는 SSH와 선택적 VNC를 제공해 분산 팀이 같은 macOS 프로필을 공유할 수 있습니다. 프로젝트가 끝나면 인스턴스를 중지해 36개월 감가상각 하드웨어 구매보다 현금 흐름을 덜 압박합니다.

모달 접근성은 한 번 통과하면 끝이 아니라, 마케팅 임베드 교체와 Safari 마이너 업데이트마다 포커스 경로가 흔들립니다. 검증을 “빌릴 수 있는 Mac mini” 운영으로 내리면 팀은 하루 약 16.9달러라는 예측 가능한 비용으로 WebKit 품질을 유지하기 쉽습니다.