bibimbap/docs/development/screenshot-guide.md

페이지 스크린샷 가이드

앱 실행 중 각 페이지를 파일로 저장하는 방법. Claude Design 등 외부 도구에 전달할 때 사용.

전제 조건

• 앱 실행 중 (docker compose up)
• Python 3 + playwright 설치됨

pip3 install playwright
# 브라우저 다운로드 불필요 — 로컬 Chrome 사용

스크립트

import os
from playwright.sync_api import sync_playwright

CHROME = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
OUT_DIR = "/tmp/bibimbap-screenshots"
BASE_URL = "http://localhost:8080"

pages = [
    ("/", "01-home.png"),
    ("/login", "02-login.png"),
    ("/signup", "03-signup.png"),
    ("/posts", "04-posts-list.png"),
    ("/recruit", "05-recruit-list.png"),
    ("/game/3", "06-game-detail.png"),
    ("/terms", "07-terms.png"),
]

os.makedirs(OUT_DIR, exist_ok=True)

with sync_playwright() as p:
    browser = p.chromium.launch(
        executable_path=CHROME,
        headless=True,
        args=["--no-sandbox"]
    )
    page = browser.new_page(viewport={"width": 1400, "height": 900})

    for path, filename in pages:
        page.goto(f"{BASE_URL}{path}", wait_until="networkidle")
        page.screenshot(path=os.path.join(OUT_DIR, filename), full_page=True)
        print(f"✓ {filename}")

    browser.close()

실행

python3 docs/development/screenshot-guide.py
# 결과: /tmp/bibimbap-screenshots/*.png

주의

• 헤드리스 모드는 다크 테마 미적용 (시스템 prefers-color-scheme 무시)
• 로그인 필요 페이지는 세션 없이 리다이렉트됨
• /tmp/bibimbap-screenshots/ 는 재부팅 시 삭제 — 영구 저장 필요하면 경로 변경
• Claude Design에 넘길 때 "다크 테마로 리디자인" 프롬프트에 명시