software

CSS를 고치기 위해 맥을 사는 것을 멈추세요

발행: (2025년 12월 16일 오전 03:28 GMT+9)
7 min read
원문: Dev.to

Source: Dev.to

Safari를 Windows & Linux에서 디버깅하는 “해커” 방식

솔직히 말하자면: Safari는 새로운 Internet Explorer 입니다.

웹 개발자는 주로 Chromium(Chrome, Edge, Brave)과 Gecko(Firefox)를 사용합니다. 레이아웃은 Windows나 Linux에서 완벽하게 보이지만, 티켓이 들어오면:

  • “iPhone에서 메뉴가 깨져요.”
  • “MacBook에서 이미지가 눌려요.”

Mac을 가지고 있지 않다면 보통 선택지는 비싸거나 고통스러운 방법뿐입니다:

  • Mac을 구매 – flex-gap 문제를 확인하러 1,000달러 이상을 쓰기.
  • 클라우드 테스트(BrowserStack, LambdaTest) – 훌륭한 도구지만 비용이 많이 들고 가끔 지연이 있음.
  • VM / Hackintosh – 법적 회색 지대, 불안정한 설정, 끝없는 골칫거리.

네 번째 방법

오픈소스 세계에 숨겨진 보석이 있습니다. WebKit(Safari 엔진)을 Windows와 Linux에서 네이티브로 실행할 수 있게 해줍니다. 무료이고 빠르며 Node.js와도 함께 사용할 수 있습니다.

바로 Playwright WebKit 입니다.

WebKit이란? (왜 이렇게 동작하는가)

Safari는 마법이 아니라 WebKit이라는 렌더링 엔진 위에 만든 브라우저 UI입니다.

브라우저엔진
Chrome / Edge / BraveBlink
FirefoxGecko
SafariWebKit

Apple이 WebKit을 개발하지만 WebKit 자체는 오픈소스입니다. Apple이 2012년에 Safari for Windows를 중단했지만, Playwright 팀(Microsoft)은 Windows와 Linux용 WebKit을 컴파일했습니다.

이를 통해 얻는 이점:

  • 동일한 CSS 렌더링 규칙
  • 동일한 JavaScript quirks
  • 동일한 레이아웃 버그

전체 Safari.app은 아니지만 레이아웃, CSS, JS 디버깅에 있어 ≈ 99.9 % 정확도를 가집니다. 여기서 깨지면 iPhone에서도 깨집니다. 끝.

설정: 2분 만에 Safari 환경 만들기

필요한 것은 Node.js뿐입니다.

사전 준비

  • Node.js (Windows, Linux, 혹은 WSL)
  • 터미널 (PowerShell, CMD, Bash)

1단계: Playwright 브라우저 설치 (중요)

npx playwright install

이 명령은 Chromium, Firefox, WebKit 바이너리를 OS에 맞게 다운로드합니다. 한 번만 실행하면 됩니다; 그렇지 않으면 codegen이 실패하거나 브라우저를 반복 다운로드합니다.

2단계: WebKit 즉시 실행

npx playwright codegen https://your-website.com --browser webkit

localhost에서도 동작합니다:

npx playwright codegen http://localhost:3000 --browser webkit

Playwright가 수행할 일:

  • WebKit 실행
  • 브라우저 창 열기
  • DevTools 자동 연결

…이제 Windows/Linux에서 Safari를 디버깅할 수 있습니다.

현재 보고 있는 화면

창은 최소화된 형태이며 주소 표시줄, 북마크, Apple UI가 없습니다. 하지만 실제 WebKit이 사이트를 렌더링하고 있습니다. 이 엔진은 다음에서도 사용됩니다:

  • macOS Safari
  • iOS Safari
  • Apple 기기 내 앱 브라우저

Safari 베테랑처럼 디버그하기

DevTools 열기

우클릭 → Inspect Element. DevTools는 WebKit Inspector이며 Chrome DevTools와 차이가 있으니 참고하세요.

먼저 확인할 항목

  • Elements – CSS 차이, flexbox 동작, 누락된 gap
  • Console – Safari 전용 JS 오류(예: optional chaining, 날짜 파싱)
  • Network – CORS, 헤더, mixed‑content 문제

흔히 마주치는 Safari 버그

  • flexbox에서 gap이 이상하게 동작
  • 모바일에서 100vh와 동적 뷰포트 높이
  • flex/grid 컨테이너 안 이미지가 늘어남
  • position: sticky 불일치

날짜 파싱 quirks

new Date('2023-05-01 12:00:00') // ❌ WebKit에서 실패할 수 있음
new Date('2023-05-01T12:00:00Z') // ✅ 안전

방법 2: 스크립트로 Safari 디버그 (파워‑유저 모드)

Safari를 자주 디버그한다면 재사용 가능한 스크립트를 만들어 보세요.

debug-safari.js

// debug-safari.js
const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });

  const context = await browser.newContext({
    viewport: { width: 390, height: 844 }, // iPhone 12–14 크기
    deviceScaleFactor: 3,
    userAgent:
      'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) ' +
      'AppleWebKit/605.1.15 (KHTML, like Gecko) ' +
      'Version/15.0 Mobile/15E148 Safari/604.1'
  });

  const page = await context.newPage();
  await page.goto('http://localhost:3000');
})();

다음 명령으로 실행합니다:

node debug-safari.js

결과: Windows에서 iPhone‑같은 Safari 시뮬레이터가 지속적으로 실행됩니다.

제한 사항 (트레이드‑오프)

해커용 솔루션이므로 강력하지만 마법은 아닙니다.

테스트할 수 없는 것들

  • 비디오·오디오 코덱 – H.264 / AAC 미지원(라이선스 제한)
  • Apple 시스템 폰트 – San Francisco는 직접 설치하지 않으면 포함되지 않음
  • Apple 전용 통합 – Apple Pay, iCloud, Keychain, OS‑레벨 API

CSS, 레이아웃, JS 버그에 대해서는 전혀 문제가 되지 않습니다.

언제 실제 Mac을 사용해야 할까?

  • 출시 전 최종 QA
  • 미디어 재생 디버깅
  • 네이티브 Safari 확장 프로그램

일상적인 개발에는 Playwright WebKit이 충분합니다.

마무리 생각

코드를 배포하고 Safari가 잘 동작하길 기대하지 마세요. Playwright WebKit을 사용하면:

  • 무료 Safari 수준 렌더링
  • 즉시 디버깅
  • Mac 불필요
  • 구독료 없음

모두 터미널 안에서 해결됩니다. 한 번 써보면 CSS 버그 때문에 Mac을 사는 일을 다시는 정당화하지 않을 겁니다.

행복한 디버깅 되세요. 🚀

Back to Blog

관련 글

더 보기 »