Playwright HTML → 이미지 파이프라인
AI 이미지 생성(텍스트 렌더링 약점)의 대안으로, HTML+CSS로 도안을 만들고 Playwright 헤드리스 브라우저로 PNG를 캡처하는 자동화 파이프라인. 텍스트가 포함된 정보 카드·썸네일 대량 생산에 적합하다.
설명
AI 이미지 생성 도구(Midjourney, DALL-E 등)는 텍스트 렌더링이 약하다 — “뽀짝이의 OpenClaw 수업 #5”가 “뽀작이의 OpneClow 수읍 #5”로 출력된다. 예술 작품이 아닌 정보를 담은 카드(정확한 텍스트·일관된 색상·픽셀 단위 레이아웃)가 필요한 경우 HTML+CSS가 훨씬 우수하다.
HTML은 텍스트를 완벽하게 렌더링하고, CSS는 레이아웃을 픽셀 단위로 제어한다. 브라우저가 HTML을 렌더링한 화면을 playwright가 캡처하면 PNG가 생성된다.
5단계 파이프라인
1. HTML 파일 작성 (도안)
↓
2. Playwright 헤드리스 브라우저 실행
↓
3. HTML 파일 로드 + waitForLoadState('networkidle') 대기
↓
4. .card 요소 element screenshot
↓
5. PNG 파일 출력
스케일링 특성: HTML 1개 → PNG 1개, HTML 100개 → PNG 100개. 1장 캡처에 1~2초이므로 20장 = 30초. 갯수에 비례해서 시간이 선형으로 늘지 않는다(병렬 처리 가능).
템플릿 + 데이터 대량 생산 패턴
데이터 소스(Airtable 등)
↓
템플릿 HTML 1개 × N개 데이터 → N개 HTML 자동 생성
↓
Playwright가 N개 순서대로 캡처
↓
PNG N개 출력
실전 결과: 썸네일 18개 생성 — 포토샵으로 1장씩: 4시간 30분 → Playwright 일괄: 2분.
Retina 2x 캡처
최신 맥북·아이폰은 Retina 디스플레이(2x). 960px 이미지를 1920px 공간에 늘려 표시하므로 흐릿해 보인다. deviceScaleFactor: 2 한 줄로 해결한다.
const context = await browser.newContext({
viewport: { width: 960, height: 540 },
deviceScaleFactor: 2 // viewport 960×540, 실제 캡처 1920×1080
});같은 HTML인데 2배 선명한 이미지가 출력된다.
headless 브라우저 3가지 함정
함정 1: 하단 여백
page.screenshot({ fullPage: true }) → viewport 전체 높이만큼 빈 공간 포함.
해결: .card 클래스 요소만 선택해 element screenshot.
const card = await page.$('.card');
await card.screenshot({ path: 'output.png' });함정 2: backdrop-filter 블랙 렌더링
backdrop-filter: blur(10px) → Chromium headless 모드에서 투명 배경 블러가 까만색으로 렌더링됨 (알려진 제한).
해결: backdrop-filter 대신 반투명 배경색으로 대체.
/* 변경 전 */
backdrop-filter: blur(10px);
/* 변경 후 */
background: rgba(255, 251, 245, 0.85);함정 3: 폰트 로딩 타이밍
CDN 폰트(Pretendard 등)가 로드되기 전 캡처하면 시스템 기본 폰트로 찍힘.
해결: waitForLoadState('networkidle') 로 모든 리소스 로딩 대기.
await page.goto(`file://${htmlPath}`);
await page.waitForLoadState('networkidle'); // 폰트 포함 모든 리소스 대기
const card = await page.$('.card');
await card.screenshot({ path: 'output.png' });OpenClaw browser 도구와의 관계
OpenClaw의 browser 내장 도구가 내부적으로 Playwright를 사용한다. 도구 사용 방식에 따라 두 가지 선택:
| 접근 | 사용 시점 | 특성 |
|---|---|---|
browser 도구 | 단건 확인·인터랙티브 | OpenClaw가 관리, 2가지 프로필 |
capture-cards.ts 스크립트 | 이미지 카드 대량 생산 | 직접 Playwright 호출, 배치 처리 |
automation-layer-framework의 관점에서 보면, browser 도구는 GUI 자동화(3계층)를 고수준으로 추상화한 구현체다. headless 브라우저를 사용하므로 단일 스레드 제약이 완화되지만, 복수 세션이 동시에 같은 화면 요소를 건드리면 충돌 가능성은 남는다.
디자인 시스템 문서화의 중요성
대량 생산에서 진짜 병목은 캡처 속도가 아니라 일관성 유지다. subagent-orchestration의 맥락의 격차 문제: 서브에이전트는 디자인 경험이 없어 자기 감각으로 색상을 선택한다.
해결책: design-system.md 작성 후 task에 명시.
"references/design-system.md 반드시 Read 후 작업.
배경색: #FFFBF5 (베이지 톤, 다른 색 절대 금지)"
문서화된 디자인 시스템이 있으면 서브에이전트도 동일한 톤을 유지할 수 있다. 13편의 수업, 130장 넘는 이미지가 같은 톤을 유지하는 이유다.
실전 적용
관련 개념
- automation-layer-framework — GUI 자동화 3계층; browser 도구 = Playwright 기반 GUI 자동화 구현체
- subagent-orchestration — 디자인 시스템 문서화 → 맥락의 격차 해결; task 작성 가이드
- agent-skill-design —
capture-cards.ts= 재사용 가능 스킬 스크립트 패턴