Import Maps · type=module · integrity · Safari · Chromium · 원격 Mac · 2026
2026 원격 Mac 프론트 출시 검수:
Import Maps·네이티브 ESM — Safari vs Chromium 대조표·점진적 향상 3단계
2026.04.16
프론트엔드·모듈 시스템
약 8분 읽기
대상: Import Maps·type=module 출하 팀. Chromium만으로는 map 선행·Worker 경계를 놓치기 쉽습니다. 대조표·3단계·integrity·Playwright·Safari로 고정하세요. 연계: 배포·Safari, SW 검수, Playwright·HAR.
01 모듈 출하에서 자주 터지는 지점
importmap 불일치는 Safari에서 bare부터 터집니다. integrity는 본문과 한 글자라도 어긋나면 전부 거절됩니다. 스테이징과 프로덕이 다르면 고객 화면만 깨질 수 있습니다.
폴백은 맵만 끄지 말고 엔트리 script·레거시 번들까지 같이 바꿉니다. Linux Chromium만으로는 WebKit 캐시·서명을 재현하기 어렵습니다.
02 Safari vs Chromium 대조표
두 엔진 모두 맵과 type=module을 지원합니다. 차이는 해석 순서·실패 신호·자동화에 있습니다.
| 주제 | Safari / WebKit | Chromium |
|---|---|---|
| 모듈 해석·맵 | 맵 스크립트는 모듈보다 앞서야 합니다. Worker 맵 공유를 가정하지 마세요. | 유사. DevTools가 누락 specifier를 더 직설적으로 알립니다. |
| integrity | integrity는 본문과 일치해야 합니다. 오래된 캐시는 즉시 실패입니다. |
동일. NetLog로 SRI 분리. |
| 동적 import | 콘솔·MIME·중간 변조를 봅니다. | 확장이 요청을 바꿀 수 있습니다. |
| 폴백 전략 | 맵 제거 후 상대·번들로. 사생활 보호 창은 별도. | 같은 원칙. 시크릿 차이 기록. |
| Playwright·Safari | webkit+원격 Mac Safari.app 보완. |
chromium Trace로 대조 서명. |
원자적 출하
맵·HTML·자산·integrity는 같은 버전으로 묶습니다.
03 점진적 향상 3단계 출하 게이트
- 기선: 맵 없이도 앱이 뜹니다. 상대 경로나 번들로 핵심 화면이 열리고 bare는 향상 경로에만 둡니다.
- 향상: 동일 URL·빌드로 캐시를 비운 뒤 Safari·Chromium 주요 플로우와 Playwright
webkit·chromium을 통과합니다. - 해시·롤백: 맵 버전·해시·CDN 키를 티켓에 남깁니다. 실패 시 레거시 또는 이전 맵으로 되돌리고 콘솔·
trace.zip을 붙입니다.
04 미리보기·Playwright·Safari 검증(실행 가능)
QA와 동일 셸에서 실행하고 비밀은 반드시 가립니다. Content-Type이 text/javascript인지 확인하세요.
- ▸Vite:
npx vite preview --host 0.0.0.0 --port 4173 --strictPort - ▸정적:
npx serve -s dist -l 4173 --cors - ▸Playwright:
npx playwright test --project=webkit --project=chromium·pageerror·trace.zip - ▸Safari: 원격 Mac 네트워크에서
importmap·첫 모듈 확인. - ▸Chromium:
chrome://net-export/선택.
원자 배포가 아니면 폴백이라 부르지 마세요.
05 티켓에 붙일 근거(복붙용)
- 빌드: SHA·맵 JSON 동일 태그.
- 해시: 스테이징·프로덕 본문 각각 검증.
- 캡처: 양쪽 콘솔 무오류 스샷+UTC.
06 FAQ
Worker 안에서 페이지와 같은 bare를 쓸 수 있나요?
등록 방식별로 다름. Worker는 절대 URL 우선.
integrity 오류를 빠르게 쪼개려면?
본문·해시→중간층·캐시·맵 버전 순으로 의심.
원격 Mac은 어디에 두면 좋나요?
WebKit Safari·Chromium·CLI를 한 세션에서 맞추면 배송 없이 닫습니다.