모니터 없는 서버에서 브라우저를 띄우는 법 — Xvfb와 Playwright의 만남

서버에는 모니터가 없다. 그런데 브라우저는 화면이 있어야 뜬다. 이 모순을 어떻게 해결할까?

CI/CD 파이프라인에서 E2E 테스트를 돌리거나, 서버에서 웹페이지를 크롤링하거나, 주기적으로 대시보드 스크린샷을 찍어야 할 때 — 모니터 없는 환경에서 브라우저를 자동화해야 하는 상황은 의외로 자주 발생한다. 이 글에서는 이 문제를 해결하는 두 기술, Xvfb와 Playwright를 소개한다.

Xvfb — 30년 된 가상 모니터

이름부터 풀어보자

Xvfb는 X Virtual FrameBuffer의 약자다. 하나씩 뜯어보면:

• X — X Window System. 1984년 MIT에서 시작된 Unix/Linux의 그래픽 시스템이다. 우리가 Linux에서 창을 띄우고 마우스를 움직일 수 있는 것은 X Window System 덕분이다.
• Virtual — 실제 하드웨어가 아닌 소프트웨어 구현.
• FrameBuffer — 화면에 표시될 픽셀 데이터를 저장하는 메모리 공간.

합치면, "실제 모니터 대신 메모리에 화면을 그리는 가상 디스플레이 서버"다.

왜 이런 게 필요했을까

X Window System은 독특한 클라이언트-서버 아키텍처를 가지고 있다. 여기서 용어가 직관과 반대인데:

• X 서버 = 화면, 키보드, 마우스를 관리하는 쪽 (사용자의 로컬 머신)
• X 클라이언트 = 실제 애플리케이션 (브라우저, 에디터 등)

X 클라이언트 (브라우저)
    ↕ X11 프로토콜
X 서버 (디스플레이 하드웨어 관리)
    ↕
물리 모니터

이 분리 덕분에, X 서버 구현체만 바꾸면 동일한 애플리케이션을 전혀 다른 환경에서 실행할 수 있다. Xvfb는 물리 모니터 대신 메모리 버퍼를 사용하는 X 서버 구현체다. 1990년대 X.Org / XFree86 커뮤니티에서 만들어져, X11 배포판의 표준 유틸리티로 자리 잡았다.

실전에서는 이렇게 쓴다

# xvfb-run이 가상 디스플레이를 만들고, 그 안에서 명령을 실행한다
xvfb-run --auto-servernum --server-args="-screen 0 1280x900x24" \
    python3 my_browser_script.py

• --auto-servernum — 사용 가능한 디스플레이 번호를 자동 할당
• -screen 0 1280x900x24 — 1280×900 해상도, 24비트 색상의 가상 화면 생성

이 명령이 실행되면, my_browser_script.py 안에서 띄우는 브라우저는 진짜 모니터가 있다고 "착각"하면서 정상 동작한다.

Playwright — 극작가라는 이름의 브라우저 자동화 도구

이름의 뜻

Playwright = 극작가(劇作家). "Play"(연극) + "wright"(만드는 사람). 극작가가 대본을 써서 배우의 동작을 지시하듯, Playwright는 스크립트를 써서 브라우저의 동작을 지시한다는 뜻이다.

참고로 "wright"는 write(쓰다)가 아니다. shipwright(조선공), wheelwright(수레 만드는 사람)처럼 "무언가를 만드는 장인"을 뜻하는 고어(古語)다.

탄생 배경 — Selenium → Puppeteer → Playwright

브라우저 자동화의 역사는 곧 "왜 이전 것으로는 안 됐는가"의 역사다.

Selenium (2004년~)

웹 자동화의 원조. WebDriver 프로토콜을 통해 브라우저를 제어한다. 하지만 브라우저와 HTTP로 통신하는 구조 탓에 본질적으로 느리고, 비동기 웹앱에서 타이밍 문제(flaky test)가 심각했다. 각 브라우저의 드라이버(chromedriver, geckodriver)를 별도로 관리해야 하는 번거로움도 있었다.

Puppeteer (2017년~)

Google Chrome 팀이 만든 도구. Chrome DevTools Protocol(CDP)로 브라우저와 직접 통신하여 Selenium보다 훨씬 빠르고 안정적이었다. 하지만 Chromium 전용이라는 근본적 한계가 있었다. Firefox나 Safari에서 테스트하려면 다른 도구가 필요했다.

Playwright (2020년~)

Puppeteer를 만든 핵심 개발자들(Andrey Lushnikov 등)이 Microsoft로 이직한 후 처음부터 다시 설계한 도구다. Puppeteer의 한계를 직접 경험한 팀이 만들었기에, 그 한계를 정확히 해결한다:

기능	Selenium	Puppeteer	Playwright
브라우저 지원	다수 (느리게)	Chromium만	Chromium + Firefox + WebKit
통신 방식	HTTP/WebDriver	CDP	브라우저별 네이티브 프로토콜
Auto-waiting	없음	수동	내장
언어 지원	Java, Python 등	JS/TS만	JS, Python, Java, .NET
브라우저 관리	수동 (driver)	내장	내장

특히 Auto-waiting이 핵심이다. "버튼이 보일 때까지 기다렸다가 클릭"을 Selenium에서는 매번 수동으로 코딩해야 했지만, Playwright는 자동으로 처리한다.

두 기술의 조합 — 왜 필요한가

Playwright 자체에도 headless 모드가 있다. headless=True로 실행하면 화면 없이 브라우저가 돌아간다. 그런데 왜 Xvfb를 함께 쓸까?

headless 모드의 한계

1. Bot 감지: Cloudflare, DataDome 같은 서비스는 navigator.webdriver 프로퍼티, 특정 플러그인 부재 등으로 headless 브라우저를 감지하여 차단한다.
2. 렌더링 차이: headless 모드에서 폰트 렌더링, Canvas, WebGL 등이 다르게 동작하는 경우가 있다.
3. 로그인 세션 유지: 일부 서비스는 headless 브라우저에서 로그인 세션이 제대로 유지되지 않는다.

Xvfb + Playwright(headed) = 최적 조합

방식	로그인 유지	Bot 감지 우회	모니터 불필요
headless=True	△	✗	✓
headless=False (실제 모니터)	✓	✓	✗
headless=False + Xvfb	✓	✓	✓

┌─────────────────────────────┐
│  모니터 없는 서버             │
│                             │
│  xvfb-run                   │
│  ├─ Xvfb (가상 디스플레이)    │
│  │   └─ 1280x900 메모리 화면 │
│  │                          │
│  └─ Playwright (headed)     │
│      └─ Chromium 브라우저    │
│          └─ 웹 페이지 렌더링  │
│                             │
│  브라우저는 진짜 모니터가      │
│  있다고 믿고 정상 동작        │
└─────────────────────────────┘

실제 활용 사례

1. CI/CD E2E 테스트

가장 대표적인 사용처. GitHub Actions, Jenkins 등 CI 서버에는 모니터가 없지만, headed 모드로 정확한 브라우저 테스트가 필요하다.

# GitHub Actions 예시
- name: E2E 테스트 실행
  run: xvfb-run npx playwright test

Playwright 공식 Docker 이미지(mcr.microsoft.com/playwright)에도 Xvfb가 포함되어 있을 정도로, CI 환경에서의 조합은 사실상 표준이다.

2. 웹 크롤링 & 스크래핑

JavaScript로 렌더링되는 SPA(Single Page Application)의 콘텐츠를 수집하거나, 로그인이 필요한 사이트를 자동화할 때 사용한다. headed 모드 + Xvfb 조합은 일반 사용자의 브라우저와 거의 동일한 환경을 제공한다.

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # Xvfb 안에서 실행하면 headless=False여도 모니터 불필요
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://example.com")
    content = page.content()
    browser.close()

3. 스크린샷 & PDF 생성 서비스

서버에서 웹 페이지를 이미지나 PDF로 변환하는 용도. 대시보드 리포트를 정기적으로 캡처해서 Slack으로 보내거나, OG 이미지(소셜 미리보기)를 동적으로 생성할 때 활용된다.

page.screenshot(path="dashboard.png", full_page=True)
page.pdf(path="report.pdf", format="A4")

4. 비주얼 리그레션 테스트

배포 전후의 스크린샷을 픽셀 단위로 비교하여 의도하지 않은 UI 변경을 감지한다. Chromatic, Percy 같은 서비스의 기반 기술이기도 하다. headed 모드가 실제 사용자 화면과 가장 유사한 렌더링을 제공하므로 Xvfb와 함께 사용한다.

한 줄 정리

Xvfb는 1990년대 X Window System의 클라이언트-서버 분리 설계가 낳은 가상 디스플레이 기술이고, Playwright는 2020년에 Puppeteer의 한계를 넘기 위해 탄생한 브라우저 자동화 도구다. 이 둘이 만나면, 모니터 없는 서버에서도 진짜 브라우저처럼 동작하는 자동화 환경이 완성된다. CI/CD 테스트, 웹 크롤링, 스크린샷 생성 — 서버에서 브라우저가 필요한 거의 모든 장면에서 이 조합은 유효하다.

---

이 글은 생성형 AI의 도움을 받아 작성되었습니다. 원본 자료를 기반으로 AI가 초안을 생성하고, 작성자가 검토·편집하였습니다.