2026 원격 Mac 프론트 출시 검수:
Popover API·Invoker — Safari vs Chromium 대조표·점진적 향상 3단계
대상: Popover·Invoker(popovertarget) 출하 팀. Chromium만으로는 탑 레이어·포커스·라이트 디스미스가 Safari와 미세하게 어긋날 수 있습니다. 기능 탐지·대조표·3단계·원격 Mac 실기로 고정하세요. 연계: Import Maps·ESM, View Transitions 폴백, HTTP/3·QUIC, Playwright·trace.
01 Popover·Invoker 기능 탐지
출하 전에 선언형 Invoker(popovertarget·popovertargetaction)와 Popover 속성이 한 세트로 지원되는지 확인합니다. 한쪽만 있으면 버튼은 보이지만 패널이 열리지 않는 무반응 UI가 됩니다. 하이드레이션 전후에 동일 스크립트로 분기하고, 서버 렌더만으로는 invoker 동작을 가정하지 마세요.
탐지는 최소한 'popover' in HTMLElement.prototype와 호스트 요소에 popover ID 연결 가능 여부를 함께 보는 편이 안전합니다. HTMLButtonElement에 popoverTargetElement 등 최신 IDL이 있는지 확인하면 Invoker 경로까지 한 번에 걸러낼 수 있습니다. 토글 이벤트(beforetoggle·toggle)는 스크립트로 열고 닫을 때도 검증에 유리합니다.
function supportsPopoverInvoker() {
const proto = HTMLElement.prototype;
if (!('popover' in proto)) return false;
const btn = document.createElement('button');
return 'popoverTargetElement' in btn || 'popoverTargetAction' in btn;
}
탐지 실패 시에는 invoker 속성을 붙이지 말고, 기선 UI 분기로 즉시 내려갑니다.
02 Safari와 Chromium 차이 대조표
두 엔진 모두 Popover를 탑 레이어에 올립니다. 차이는 포커스 순환·라이트 디스미스·백드롭 같은 세부 상호작용과 개발자 도구 메시지에 많이 드러납니다.
| 주제 | Safari / WebKit | Chromium |
|---|---|---|
| 탑 레이어·스택 | 다른 탑 레이어(예: 전역 대화상자)와의 겹침 순서를 실제 시나리오로 확인합니다. | 유사하나 DevTools 레이어 트리로 시각화가 쉽습니다. |
| 라이트 디스미스 | 바깥 클릭·Esc·포커스 이탈 조합을 UX 문서에 맞게 점검합니다. | 동일 계약을 기대하되 확장·오버레이가 클릭을 가로채면 Safari와 어긋날 수 있습니다. |
| 포커스·접근성 | VoiceOver·키보드만으로 열림·닫힘·복귀가 한 흐름인지 확인합니다. | Tab 순서와 aria-* 보조가 동일한지 대조합니다. |
| ::backdrop·스타일 | 의도한 어둡기·클릭 통과가 맞는지 확인합니다. | 렌더링은 유사, 테마·확장 변수만 분리 기록합니다. |
| 자동화 | 원격 Mac Safari.app로 보완하는 편이 안전합니다. |
chromium 프로젝트·Trace로 상호작용을 고정합니다. |
버전 문자열만 믿지 말고, 동일 빌드·동일 URL에서 양쪽 스크린샷과 짧은 재현 영상을 티켓에 남기세요.
03 점진적 향상 단계와 폴리필 전략 경계
폴리필은 탑 레이어·이벤트 타깃까지 완전 모사하기 어렵고 번들·유지 비용이 큽니다. 미지원 브라우저에는 동일 정보 구조를 <dialog>·접이식 패널·인라인 확장 등으로 맞추고, Popover는 향상 레이어로만 쓰는 경계를 권합니다.
- 1단계 기선: Popover 없이도 작업을 끝낼 수 있습니다. 메뉴·툴팁 성격의 UI는 링크 이동·페이지 내 앵커·단순 토글로도 동일 목표가 달성됩니다.
- 2단계 향상: 탐지 통과 시에만
popover·Invoker를 활성화하고, 동일 URL에서 Safari·Chromium 핵심 플로우를 수동·자동으로 각각 한 번씩 통과시킵니다. - 3단계 증거·경계: 폴리필은 포커스 트랩·닫기 버튼 등 최소 보조만 두고, “완전 동일 UI”를 약속하지 않습니다. 롤백 시에는 invoker 속성 제거·이벤트 위임 해제까지 한 커밋에 묶습니다.
연관 검수로 Service Worker·캐시와 CSP·nonce를 함께 보면, 프리로드·인라인 스크립트와 충돌하는지 빠르게 줄일 수 있습니다.
04 FAQ
Invoker만 쓰고 Popover 속성 없이 출하해도 되나요?
둘 다 지원하는 환경에서만 의미가 있습니다. 한쪽만 있으면 클릭이 무시될 수 있으니 반드시 기능 탐지로 묶으세요.
폴리필로 탑 레이어까지 완전 재현해야 하나요?
권하지 않습니다. 계약은 대체 UI로 맞추고, 폴리필은 보조에 그치는 편이 유지보수에 유리합니다.
원격 Mac에서 무엇을 남기면 출하 승인에 충분한가요?
동일 빌드·UTC 타임스탬프가 찍힌 Safari·Chromium 캡처, Escape·바깥 클릭·포커스 루프 시나리오, 필요 시 Playwright webkit·chromium 산출물이면 대부분의 리뷰를 통과합니다.