2026 원격 Mac 프론트 출시 검수:
스크롤바 점유와 scrollbar-gutter — Safari vs Chromium 대조표·점진적 향상 3단계
출시 검수 서명 담당 프론트·QA용. 스크롤바 표시 변화로 뷰포트 너비가 흔들리면 중앙 정렬·헤더가 깨집니다. Linux Chromium만으로는 WebKit 점유를 대체할 수 없습니다. 브라우저 행렬·차이표·구현 단계·롤백·모니터링·FAQ로 게이트를 닫습니다. Playwright 원격 Mac, Vitest·WebKit, ESM 검수.
출시 검수에서 스크롤바 점유가 자주 터지는 이유
1) 오버레이·시스템 설정 차이로 Chromium과 Safari의 루트 가용 너비가 어긋납니다.
2) 모달이 body를 잠그면 스크롤이 꺼졌다 켜지며 가로로 한 번 더 튑니다.
3) both-edges는 시안과 충돌할 수 있어 티켓에 빌드·스크롤바 설정을 필수로 적습니다.
01 브라우저 행렬
동결 전 릴리즈 표에 Safari·Chromium 버전, macOS 스크롤바 표시, 동일 스테이징 URL을 박제하세요. 원격 Mac은 Git SHA 증거에 유리합니다.
| 목표 | 출시 검수에서의 역할 | 남길 증거 |
|---|---|---|
| macOS Safari | 서명 최우선 기준선. | 테마·스크롤바 가시성·DevTools 유무로 내부 너비 캡처. |
| macOS Chromium | Blink 대조로 양쪽 회귀 방지. | Safari와 동일 너비 짝 스샷·빌드. |
| 원격 Mac | 실기 없을 때 고객에 가장 가까운 서명. | 세션·빌드·설정·전후 비교. |
02 차이표
이슈 공통 언어용 표입니다. WebKit은 원격 Mac에서 잠긴 빌드로 확정하세요.
| 주제 | Safari / WebKit | Chromium |
|---|---|---|
scrollbar-gutter: stable |
세로 슬롯을 미리 잡아 가로 점프 완화. 루트 overflow·transform 조합은 재측정. |
비교적 안정. 모달·중첩 스크롤 경로는 동일 재현. |
both-edges |
한쪽 바 가정 시안과 충돌 시 컬럼 급좁아짐. | RTL·세로쓰기는 별도 시나리오. |
| 오버레이 vs 클래식 | 시스템 설정이 슬롯 시점을 바꿈. 티켓에 설정 필수. | Linux CI 기하로 macOS 대체 금지. |
| 미지원 | 구형 WebKit 무시 가능 → overflow 폴백 문서화. | 너비 제로 점프 우선이면 gutter보다 폴백. |
03 구현 단계
점진적 향상 세 단계: 탐지 분기 → 루트 단일 소유 → overflow 폴백. 픽셀 보정 JS는 피합니다.
- @supports 참일 때만
scrollbar-gutter: stable.both-edges는 별도 승인. - 단일 루트. gutter는
html.layout-root, 셸은min-height:100dvh. - 폴백.
@supports not에서overflow-y:scroll로 너비 고정.
CSS 예시:
@supports (scrollbar-gutter: stable) {
html.layout-root {
scrollbar-gutter: stable;
}
}
@supports not (scrollbar-gutter: stable) {
html.layout-root {
overflow-y: scroll;
}
}HTML 뼈대:
<!DOCTYPE html>
<html lang="ko" class="layout-root">
<head>…</head>
<body>
<div id="app" style="min-height:100dvh">…</div>
</body>
</html>수동: 스크롤 유발 후 모달로 body 잠금 토글하며 가로 떨림 확인. 실패 시 엔진·설정·레이어를 티켓에 적고 폴백 선택.
04 롤백과 모니터링
gutter는 토글로 묶어 즉시 overflow 레이어로 내립니다. 모달 경로 CLS·빌드 추이·서드파티 루트 덮어쓰기를 봅니다.
스크롤바 설정, 빌드, 모달 전후 내부 너비, 활성 층 gutter 여부.
시연 스크립트에서 수평 이동 1px 이하·Safari·Chromium 짝 스샷 통과.
05 FAQ
scrollbar-gutter가 overflow-y: scroll을 완전히 대체하나요?
아닙니다. 가로 밀림 완화용이며 중첩·body 잠금·구형 WebKit은 overflow 폴백과 문서화가 필요합니다.
Safari 서명을 원격 Mac 없이 Linux Chromium만으로 해도 되나요?
부족합니다. AppKit·설정이 기하에 영향을 주므로 WebKit 실측이 필요하고 원격 Mac이 현실적입니다.
배포 후 모니터링은 무엇을 보나요?
모달 CLS·빌드 회귀·루트 overflow 덮어쓰기. 악화 시 gutter 끄고 overflow로 롤백합니다.
다음 단계: 실제 WebKit과 Chromium으로 스크롤바 점유 검수 마치기
홈·요금·도움말은 로그인 없이 열람, 구매에서 플랜 선택. Playwright 원격 Mac, 빌드·Safari 검증, 블로그.