2026년 정적 멀티페이지 HTML을 위한 Speculation Rules API: 프리페치, 프리렌더, Safari 가드레일

정적 마케팅 사이트가 순간적으로 느껴지려면 다음 내비게이션이 이미 따뜻해져 있어야 합니다. Speculation Rules API는 HTML 옆에 JSON 정책을 붙여 브라우저가 다음 URL을 프리페치하거나 조건부로 프리렌더하도록 합니다. 클라이언트 라우터 없이도 고전적인 멀티 페이지 애플리케이션의 체감 속도를 끌어올릴 수 있습니다. 2026년의 실무 질문은 이제 가능 여부가 아니라 Content-Security-Policy를 깨지 않고 CDN 비용을 두 배로 만들지 않으며 인증된 대시보드를 유령 실행하지 않으려면 어떻게 설계할지입니다. 이 글은 문서 규칙과 목록 규칙의 차이, 프리페치와 프리렌더의 의사결정 표, crossorigin과 자격 증명 함정, 그리고 Apple Silicon Safari에서 필수인 리허설 절차를 한국어로 정리합니다.

함께 읽으면 좋은 글: 정적 HTML의 SRI·CDN·CSP, 그리고 반응형 이미지와 LCP. 첫 번째는 힌트가 건드리는 출처와 CSP 정합에 직결되고, 두 번째는 차가운 내비에서 거대 히어로 자산을 잘못 워밍업하지 않도록 돕습니다.

추측 규칙 JSON 기초

초기 셸 HTML에 <script type="speculationrules">를 두면 브라우저는 JSON을 빠르게 파싱해 어떤 맥락에서 어떤 URL을 얼마나 적극적으로 워밍업할지 선언합니다. 예전처럼 link rel=prefetch를 템플릿 곳곳에 흩뿌리는 대신 정책이 한곳에 모여 Git diff로 리뷰하기 쉽고 성능 담당과 보안 담당이 같은 파일을 봅니다. 주요 전환 경로가 12개 이하로 정리되는 마케팅 사이트일수록 효과와 운영 부담의 균형이 좋습니다.

각 힌트 대상 URL은 작은 릴리스로 취급하세요. 투기적 페치와 실제 내비게이션의 이중 다운로드를 견디고 분석 비콘이 중복 집계되지 않아야 합니다. 한국 시장에서도 제3자 계측 벤더의 계약 단위가 민감하므로 스프린트 첫날부터 데이터 팀과 정렬하는 것이 안전합니다. JSON 조각은 gzip 후에도 2KB 미만을 목표로 모바일 첫 왕복 예산을 지킵니다. 국제화 시 로케일별로 파일을 나누고 영어 힌트가 한국어 가격으로 가지 않도록 빌드 검증을 걸어야 합니다.

문서 규칙과 목록 규칙

문서 규칙은 현재 URL, 쿼리, 리퍼러 같은 조건으로 힌트를 제한할 때 유용합니다. 캠페인 파라미터로 트래픽을 나누는 경우 목록에 모든 조합을 박아 넣는 것보다 유지보수가 낫습니다. 목록 규칙은 푸터에 반복되는 허브 URL을 열거할 때 적합합니다. 둘 다 쓸 때는 우선순위를 문서화해 모바일에서는 문서 규칙으로 목적지를 줄이고 데스크톱에서만 목록을 약간 넓히는 식의 정책이 충돌을 막습니다.

두 번째 script 블록이 조용히 병렬 힌트를 두 배로 만드는 사고는 코드 리뷰 체크리스트에 중복 항목을 넣으면 예방됩니다. 한국어 번역 워크플로가 JSON 안의 URL을 잘못된 스테이징으로 향하게 하지 않도록 CI에서 존재 확인을 거는 것도 좋습니다.

프리페치 대 프리렌더

프리렌더는 JavaScript를 실행할 수 있으므로 localStorage 쓰기나 OAuth 콜백이 있는 페이지는 프리페치만 유지하는 편이 안전합니다. 아래 표는 첫 주 보수적 출발점입니다.

힌트 유형	CPU	분석 리스크	초기 상한	적합 목표
프리페치 문서 규칙	낮음	낮음	동시 4	가격, 문서 색인, 변경 로그
프리페치 목록 규칙	낮음~중간	중간	페이지당 6 URL	푸터 허브, 로케일 전환
프리렌더	높음	높음	모바일 1, 데스크톱 2	익명 퍼널만

숫자는 출발점입니다. 한국 모바일 망 혼잡 시간대에는 세션당 출구 기가바이트와 LCP 분위수를 함께 봐야 합니다. 출구가 두 자릿수 퍼센트 이상 늘었는데 LCP가 따라오지 않으면 힌트 전략과 실제 클릭 분포가 어긋난 신호입니다.

CSP·자격 증명·crossorigin

프리페치도 Content-Security-Policy를 따릅니다. connect-src에 동적 모듈 JSON 호스트가 빠지면 힌트는 실패합니다. 힌트 대상이 닿는 출처를 script-src와 img-src에도 반영하고 SRI나 nonce 전략과 모순이 없는지 확인하세요. 금융권 프로젝트에서는 변경 이력에 CSP diff를 함께 남기는 것이 감사 대응에 유리합니다.

SameSite=Lax 세션과 프리렌더를 함께 쓰면 유령 세션처럼 보이는 불일치가 생길 수 있습니다. 공개 페이지는 익명 제약을 명시하고 인증 앱은 별 도메인으로 나누는 편이 좋습니다. crossorigin 기본값이 캐시 키에 영향을 주므로 CDN 자산과 맞추지 않으면 힌트가 적중했는데도 재다운로드가 늘 수 있습니다.

지켜야 할 지표

켜진 후 7일 동안 최소한 다음을 추적하세요. 천 세션당 출구 GB, 힌트 적중 경로의 LCP 중앙값, 송신 페이지의 INP, 예기치 않은 프리페치로 증가한 다운스트림 API 오류율. 건강한 롤아웃에서는 출구가 3~8% 정도 오르고 LCP가 150~400ms 개선되는 패턴이 흔합니다. RUM에서는 추측 힌트 적중 여부를 불리언 차원으로 분리해 행운적인 프리페치와 차가운 내비를 섞지 마세요.

한국 조직에서는 분기 계획에 실험실 수치가 박제되기 쉬워 분리 없이는 프리렌더를 과대평가한 로드맵이 만들어지고 Safari 검증에서 한꺼번에 무너집니다. 여름철 야외에서 단말 열 관리도 잊기 쉬우니 짧게라도 에너지 로그를 챙기세요.

Safari와 WebKit 검증

Chromium이 앞서도 Safari는 디자이너와 법무 검토에서 WebKit이 필수인 이해관계자가 많습니다. 힌트가 무시될 수 있다는 전제로 HTML은 정확하고 분석은 결손에 강해야 하며 CSP는 엄격하게 유지하세요. 새로운 조건자를 시험하려면 안정판 Safari와 고정 WebKit Technology Preview를 Apple Silicon Mac mini에서 돌리십시오. 스케줄러와 캐시 분할은 Linux CI 헤드리스 Chromium과 같지 않습니다.

포인터 밀집 상호작용 뒤 첫 내비게이션을 녹화하면 Safari가 호버 연동 힌트 확장을 어떻게 접는지 볼 수 있습니다. Windows 노트북만 쓰는 팀일수록 격차가 큽니다. 며칠 클라우드 Mac을 빌려 재현 환경을 맞추는 비용은 잘못된 프리렌더를 본에 올린 뒤 되돌리는 비용보다 작은 경우가 많습니다.

정적 MPA 패턴

손으로 만든 정적 출력은 공통 레이아웃에 단일 JSON 조각을 두고 빌드 시 로케일이나 캠페인 슬러그를 주입합니다. hreflang과 모순되는 힌트는 검색 엔진과 브라우저 모두에 해가 됩니다. CDN 장애 시 힌트만 끌 수 있는 플래그가 있으면 사고 대응이 빨라집니다. 대규모 세일 전에 출구 상한과 힌트 대상을 체크리스트로 재확인하세요.

FAQ

추측 규칙이 link rel=preload를 대체하나요?

아니요. preload는 현재 페이지의 중요 서브리소스, 추측 규칙은 미래 내비입니다.

인증된 대시보드에 프리렌더는 안전한가요?

일반적으로 아닙니다. 부작용 없는 익명 셸로 제한하세요.

2026년 Safari는?

계속 변합니다. 지속 테스트와 폴백 설계가 필요합니다.

동시 프리페치 초기값은?

2~4개로 시작하고 주간 리뷰로 조정하세요.

추측 규칙은 결국 운영 문제이며 진짜 Safari와 충분한 통합 메모리 없이는 개발자 도구와 녹화와 프로필을 동시에 올린 검증이 흔들립니다. MacHTML 클라우드 Mac mini를 하루 약 16.9달러에 빌려 잘못된 프리렌더 정책을 본에 올린 뒤 몇 주간 계측을 되감는 비용보다 저렴하게 끝나는 경우가 많습니다. Apple Silicon은 장시간 프리페치에도 조용하고 이해관계자 실제 기기와 같은 TCC와 네트워크 스택을 밟을 수 있습니다.

탄력 임대 기간이라 추측 규칙 스프린트 주에만 켜고 지표가 평탄해지면 끌 수 있습니다. CAPEX로 방치 금속을 사는 것보다 Linux 컨테이너가 거짓말하지 않는 실기 검증에 돈을 쓰는 편이 리스크 조정 후 수익이 큰 경우가 대부분입니다.