2026 프론트엔드 피하기 대조표:
원격 Mac Cypress·WebKit vs Safari
Cypress의 experimental WebKit은 macOS에서 WebKit 엔진 기반 회귀에 유용하지만, 사용자가 쓰는 Safari.app과 동일한 제품이라고 보지 않아야 합니다. 원격 Mac에서 바이너리 캐시·설치 인자를 고정하고, video·스크린샷·병렬 워커·재시도 임계를 명시한 뒤 배포 전 3단계 검수로 갭을 메우는 것이 2026년 프론트 E2E의 실무 해법입니다. 단위·jsdom 한계는 Vitest·jsdom vs WebKit 매트릭스, 전체 피하기 목록은 Node·npm·Safari 피하기 체크리스트와 함께 보세요.
01 Cypress+WebKit 적용 시나리오
cypress.config에서 experimentalWebKitSupport: true를 켠 뒤 macOS 러너에서만 WebKit 스펙을 돌리는 패턴이 일반적입니다. DOM 상호작용·폼·라우팅 회귀, WebKit 전용 CSS 이슈(플렉스·sticky·backdrop 등)를 빠르게 잡기에 적합합니다.
Safari 사용자 비중이 크지만 Linux CI만 있는 팀은 WebKit E2E를 “1차 Apple 스택 검증”으로 두고, 결제·HLS·ITP·푸시 권한은 Safari.app 쪽 시나리오로 분리하는 것이 안전합니다. Playwright 중심 팀은 Playwright·원격 Mac Safari 호환 가이드와 파이프라인을 맞춰 중복 비용을 줄일 수 있습니다.
02 실제 Safari와의 차이 대조표
아래 표를 릴리스 리뷰에 붙이면 “Cypress가 초록인데 Safari만 빨강” 논쟁을 줄일 수 있습니다.
| 항목 | Cypress experimental WebKit | Safari.app(원격 Mac) | 실무 시사점 |
|---|---|---|---|
| 엔진·빌드 | 테스트용 WebKit 번들(제품 버전과 다를 수 있음) | OS에 묶인 Safari·WebKit | 메이저 OS 업데이트 후 양쪽 재실행 |
| ITP·쿠키·스토리지 | 대부분 유사하나 엣지 케이스 차이 | 실제 ITP·파티셔닝 정책 | 로그인 지속·서드파티는 Safari 수동 스모크 |
| 미디어·코덱 | 기본 재생 경로 검증에 유리 | 저전력 모드·탭 백그라운드 정책 포함 | 자동재생·전체화면은 Safari에서 1회 |
| 확장·프로파일 | 깨끗한 프로필에 가까움 | 사용자 확장·콘텐츠 차단기 | P0는 시크릿 또는 확장 끈 상태 병행 |
| GPU·Metal | 그래픽 경로 유사 | 실기기 전력·드라이버 조합 | WebGPU·무거운 캔버스는 별도 매트릭스 |
03 원격 Mac 브라우저 바이너리 캐시 경로·설치 인자
에이전트가 매번 cold start되면 바이너리 다운로드에 시간이 깨집니다. 경로를 캐시 볼륨에 매핑하세요.
| 대상 | 대표 캐시 경로(macOS) | 설치·검증 인자(예시) |
|---|---|---|
| Cypress 바이너리 | ~/Library/Caches/Cypress |
CYPRESS_CACHE_FOLDER 지정, CI에서 디렉터리 보존, npx cypress verify |
| Playwright WebKit(동일 머신 병행 시) | ~/Library/Caches/ms-playwright |
npx playwright install webkit, PLAYWRIGHT_BROWSERS_PATH |
| npm 전역 캐시 | ~/.npm 또는 설정된 prefix |
Node 메이저·npm ci와 캐시 키 정합 |
① 캐시 경로가 홈이 아닌 공유 볼륨이면 권한·소유자 확인 ② 첫 잡 전 cypress install 또는 문서화된 스크립트로 선납품 ③ 디스크 임계 알림으로 캐시 정리 정책을 분기합니다.
04 video·스크린샷 스위치
원격 Mac 디스크와 업로드 시간을 줄이려면 환경별로 스위치를 나눕니다.
예를 들어 스테이징 야간 잡은 video: true로 전 스펙을 남기고, PR 게이트는 video: false로 두되 실패 건만 재실행 파이프라인에서 영상을 켜는 식으로 분기하면 디스크 폭주를 막으면서도 트리아지 근거는 확보할 수 있습니다. 업로드 대역이 좁은 원격 Mac 에이전트라면 S3·아티팩트 저장소의 수명 정책(예: 7일)을 README에 명시하세요.
- video: 기본은 스테이징·야간 전체 true, PR 빠른 게이트는 false 또는 실패 시만 true(
videoCompression으로 용량 절충). - screenshotOnRunFailure: CI에서는 true 권장. 플래키 분석 시 마지막 프레임과 로그를 함께 보관합니다.
- 스펙 단위:
cy.screenshot()은 시각 회귀 전용 브랜치에서만 켜고, 아티팩트 보존 기간을 정책화합니다.
05 병렬 워커·재시도 임계
Cypress Cloud·스플릿 러너 또는 여러 원격 Mac 슬롯으로 병렬을 올릴 때, 동일 머신에서 WebKit+Chrome을 겹치면 CPU 스로틀링으로 플래키가 늘어납니다.
| 파라미터 | 권장 원칙 | 비고 |
|---|---|---|
retries.runMode |
0~2(네트워크 의존 스펙은 2 상한) | 재시도만으로 가려진 플래키는 이슈화 |
| 동시 브라우저·스펙 수 | vCPU−1 또는 메모리 프로파일 기반 상한 | 영상 녹화 시 디스크 I/O 여유 확보 |
| 임계 알림 | 동일 스펙 주 N회 실패 시 차단 | 대시보드에 브라우저·OS 라벨 필수 |
06 배포 전 3단계 검수
아래 순서를 릴리스 체크리스트에 고정하면 Safari 갭을 구조적으로 줄입니다.
- 1단계 — WebKit 자동화: 대상 브랜치에서 Cypress WebKit 스위트 올그린, 실패 시 video·스크린샷·콘솔 로그를 아티팩트로 첨부.
- 2단계 — Safari.app P0: 동일 빌드를 Safari로 열어 인증·결제·미디어·핵심 퍼널 수동 또는 반자동 확인.
- 3단계 — 파라미터 서명: 이번 릴리스의 retries·워커·캐시 경로·브라우저 버전을 변경 로그에 한 줄로 남기고 승인자 서명.
WebKit은 회귀 속도를, Safari.app은 제품 진실을 담당합니다. 캐시·영상·재시도·워커를 표로 못 박고 3단계 검수로 릴리스를 닫으세요.
Cypress WebKit과 Safari 검수를 같은 맥에서
Apple Silicon 원격 Mac에서 바이너리 캐시를 유지하고 WebKit·Safari 스모크를 연속 실행하세요. 홈·대여·구매, 요금, 도움말을 먼저 열어보실 수 있습니다. 관련 읽을거리: Vitest·WebKit 매트릭스, 프론트 블로그 전체.