2026 원격 Mac 프론트 출시 검수:
Intersection Observer·지연 스켈레톤 — Safari vs Chromium 대조표·3단계 체크리스트
대상: 무한 스크롤·지연 리스트·스켈레톤 우선 UI 팀. Chromium 전용 CI는 WebKit 스크롤 루트에서 교차 기하 차이를 놓칩니다. 프론트·Web 테스트 플레이북으로 API 대조·Demo·Safari 임계값·실행 검사를 묶었습니다. Playwright WebKit, Web Inspector FAQ, CSP nonce 체크리스트와 병행하세요.
01 검수에서 지연 스켈레톤이 깨지는 지점
IntersectionObserver는 근뷰 작업의 관문이나 엔진마다 미세 차이로 스켈레톤 고착·스왑 직후 CLS가 출하됩니다.
- 스크롤 루트:
overflow패널에root: null이면 교차가 빗나갑니다. rootMargin: 복원 스크롤·고무줄에서 체감이 엔진별로 다릅니다.- CLS: 높이 미예약 스왑은 콜백 후에도 바이탈 실패를 만듭니다.
옵저버는 API 계약으로 다루고, Chromium만 스테이징하면 Safari 고객 기하와 다른 검증입니다.
02 Intersection Observer API 차이 대조표
원격 Mac에서 Safari·Chromium 베이스라인으로 아래를 대조하세요. 불일치 시 계측 로그를 우선합니다.
| 주제 | Chromium | Safari WebKit |
|---|---|---|
암시적 루트 (root: null) |
문서 스크롤에 단순. 뷰포트 기준. | 스펙 정합. 중첩 스크롤은 별도 시나리오. |
사용자 지정 root |
DevTools에서 클리핑·오버레이 확인이 수월. | API 동일. 포커스 스크롤 시나리오 확인. |
rootMargin |
줌·DPR에 따라 체감 프리페치가 달라짐. | 모바일 Safari를 맞출 때 시각 뷰포트와 정책을 동기화. |
threshold·isIntersecting |
Performance 패널과 로깅이 익숙. | 서브픽셀·변환 노드에서 비율이 Chromium과 어긋날 수 있음. |
| 첫 콜백 타이밍 | 타깃이 이미 보이면 즉시 호출되는 경우가 많음. | 폰트·레이아웃 전 구독 시 들쭉날쭉. |
스켈레톤 + loading="lazy" |
이중 게이트 시 중복 페치 위험. | 네트워크·DOM 스왑의 단일 소유자를 정하세요. |
03 최소 재현 Demo 단계
HTTPS 정적 Demo로 Safari·Chromium이 같은 아티팩트를 엽니다.
- 높은
overflow-y: auto패널에 행 스무 줄을 둡니다. root를 그 패널로 두고rootMargin: "0px 0px 200px 0px",threshold: [0, 0.01, 0.25]로 관찰합니다.- 마지막 행에 대해
isIntersecting,intersectionRatio,rootBounds와boundingClientRect를 로그합니다. - 스켈레톤을 실제 높이로 바꾸고 Web Inspector에서 레이아웃 시프트를 기록합니다.
- 맨 위·bfcache·강새로고침 후
root: null로 중첩 가설을 검증합니다.
04 배포 전 3단계 체크리스트
- 계약 고정: root, margin, threshold, 네이티브 lazy 사용 여부, Safari·Chromium 빌드 문자열을 티켓에 적습니다.
- 양 엔진 재현: 항목당 페치 한 번, 스크롤 후에도 스켈레톤이 남지 않습니다.
- WebKit 증빙: 짧은 Safari 녹화·로그를 첨부하고, 스왑 후 CLS가 예산을 넘으면 게이트 실패로 처리합니다.
- 콜백 시점에 타깃 크기가 0이 아닌지 확인한다.
- 성공 후
unobserve또는disconnect로 누수를 막는다. prefers-reduced-motion·데이터 세이버에서도 스켈레톤이 종료 상태로 간다.- 스테이징 CSP가 프로덕션과 같아 Safari가 지연 자산을 막지 않는다.
- CPU·네트워크를 한 번 제한해 본다(경합 시에만 고착되는 버그가 잦음).
05 Safari 원격 디버깅·수용 임계값
Web Inspector로 네비 직후 레이아웃을 보고 티켓에 숫자 임계값을 적습니다.
- 첫 스켈레톤: 폰트 미차단 시 라우트 커밋 후 1프레임 이내 목표.
- 스왑: 빠른 망에서 교차 후 300ms 이내(예외 없을 때).
- CLS:
min-height등으로 예약, 반복 스크롤에 고착 없음. root를 먼저 의심.
Apple Silicon 원격 Mac이 타이밍 검증에 적합합니다. 홈·도움말·구매·예약은 로그인 없이 가능합니다.
원격 Mac에서 Safari·Chromium 탭을 나란히 두고 배포마다 재현을 돌리면 엔드포인트별 이슈를 로그로 분리하기 쉽습니다.
06 FAQ
Safari에서만 스켈레톤이 안 사라져요.
root 오설정, 영역 0, 숨겨진 조상, 레이아웃 전 구독이 흔한 원인입니다. 동일 빌드에서 Chromium과 사각형을 비교하세요.
네이티브 loading="lazy"면 IO를 빼도 되나요?
미디어에는 유효하지만 임의 스켈레톤·페치 게이트는 대체하지 못합니다. 둘 다 쓰면 이중 트리거를 피하세요.
Playwright WebKit으로 충분한가요?
봇은 회귀에 강하고, 실제 Safari는 스크롤러·변형·비디오 레이어 서명에 남기는 편이 안전합니다.