JYP Garden

수업 #13 — 하루에 이미지 22장 만든 비결

Properties1
tagssource, agentic-architecture, knowledge

8 min read

수업 #13 — 하루에 이미지 22장 만든 비결

Source: bbojjak-viewer.vercel.app/lessons/lesson-13 Type: article By: 뽀짝이 / 뽀짝이의 서재 (지피터스 AI스터디) Valid as of: 2026-04-28

Key Insight

AI 이미지 생성(텍스트 렌더링 약점) 대신 HTML+CSS로 도안을 만들고 Playwright로 캡처하는 파이프라인. 대량 생산의 진짜 열쇠는 디자인 시스템 문서화이며, 이 문서가 있어야 서브에이전트도 동일한 톤을 유지할 수 있다.

핵심 Takeaway

  • HTML → PNG 파이프라인: AI 이미지 생성은 텍스트 렌더링이 약함 → HTML+CSS로 도안 + Playwright 헤드리스 브라우저로 캡처. 파이프라인 자동화로 18장을 4시간 30분 대신 2분에 처리 (출처: “왜 HTML로 이미지를 만들어요?” 섹션)
  • Playwright = browser 도구의 엔진: OpenClaw browser 도구도 내부적으로 Playwright 사용. browser 도구 2가지 프로필: openclaw(OpenClaw 직접 관리·격리) / chrome(사용자 Chrome 확장 릴레이·로그인 상태 그대로) (출처: “OpenClaw의 browser 도구” 섹션)
  • deviceScaleFactor: 2 = Retina 캡처: viewport 960×540 유지하면서 실제 이미지 1920×1080 출력. 한 줄로 2배 선명한 이미지 획득 (출처: “Retina 2x” 섹션)
  • headless 삽질 3가지: ①하단 여백(.card 요소만 element screenshot으로 해결) ②backdrop-filter 검정 렌더링(rgba 반투명 배경으로 대체) ③폰트 로딩 타이밍(waitForLoadState('networkidle') 대기) (출처: “삽질 로그” 섹션)
  • 디자인 시스템 문서화 = 맥락의 격차 해결책: Lesson 12 서브에이전트 보라색 사고 이후 design-system.md 작성. 색상·크기·레이아웃 규칙이 문서화되어야 서브에이전트도 동일한 톤 유지 가능 (출처: “수업 시리즈 디자인 시스템” 섹션)

상세 요약

HTML → PNG 파이프라인 구조

AI 이미지 생성 도구의 구조적 한계: 텍스트를 정확하게 렌더링하지 못함. “뽀짝이의 OpenClaw 수업 #5”가 “뽀작이의 OpneClow 수읍 #5”로 출력되는 문제.

해결 접근: “웹 페이지를 만들고, 그걸 사진 찍자.”

HTML 도안 작성 (텍스트·레이아웃 완벽 제어)
    ↓
Playwright headless 브라우저에서 렌더링
    ↓
.card 요소만 element screenshot
    ↓
PNG 파일 출력

스케일링: HTML 10개 → PNG 10개. 1장 캡처에 1~2초 → 20장 = 30초. 갯수에 비례해서 시간이 늘어나지 않음.

실전 성과: 18개 썸네일 4시간 30분 → 2분. 수정 시 Airtable 데이터 업데이트 → 스크립트 재실행 = 끝.

OpenClaw browser 도구 2가지 프로필

프로필방식특징
openclawOpenClaw이 직접 띄운 브라우저내 Chrome과 완전 격리. 에이전트 전용.
chrome사용자 Chrome 확장 릴레이기존 로그인 상태 그대로 탭 조종 가능

사용 패턴:

  • 단건 확인 → browser 도구 (한 장)
  • 이미지 카드 7장 대량 생산 → capture-cards.ts 스크립트 (직접 Playwright 호출)

Retina 2x 캡처

const context = await browser.newContext({
  viewport: { width: 960, height: 540 },
  deviceScaleFactor: 2   // 이 한 줄
});
// 결과: 출력 이미지는 1920×1080

Retina 디스플레이(맥북·아이폰)는 화면 밀도가 2x. 960px 이미지를 1920px 공간에 늘려 표시하므로 흐릿함. deviceScaleFactor: 2로 처음부터 2배 크기로 캡처하면 해결.

headless 함정 3가지

함정 1 — 하단 여백: page.screenshot({ fullPage: true }) → viewport 전체 높이만큼 빈 공간 포함. → 해결: .card 요소만 선택해 card.screenshot()

함정 2 — backdrop-filter 검정 렌더링: backdrop-filter: blur(10px) → Chromium headless에서 투명 배경 블러가 까만색으로 렌더링. → 해결: background: rgba(255, 251, 245, 0.85) 로 대체 (블러 포기, 가독성 유지)

함정 3 — 폰트 로딩 타이밍: CDN 폰트(Pretendard)가 로드되기 전 캡처 → 시스템 폰트로 찍힘. → 해결: await page.waitForLoadState('networkidle') 대기 후 캡처

이 3가지를 통합한 스크립트: capture-cards.ts

디자인 시스템 문서화 — 맥락의 격차 해결책

Lesson 12에서 서브에이전트가 “보라색 이미지”를 만든 사고 → 원인: 서브에이전트가 design-system.md를 읽지 않음 (맥락의 격차).

design-system.md 작성:

  • 카드 배경: #FFFBF5 (따뜻한 베이지)
  • 텍스트: #2C2420 (진한 갈색)
  • 3단 레이아웃 금지 (모바일 가독성)
  • 커버 카드: 960×540 / 본문 카드: 960×가변

핵심 원칙: 맥락을 공유하려면 문서화해야 한다. 서브에이전트의 task에 "references/design-system.md 반드시 Read 후 작업" 명시하면 같은 톤 유지 가능.

이는 subagent-orchestration의 task 작성 가이드가 실전에서 구현된 사례다.

연결되는 위키 페이지

그래프 뷰