66 lines
1.8 KiB
Markdown
66 lines
1.8 KiB
Markdown
# 페이지 스크린샷 가이드
|
|
|
|
앱 실행 중 각 페이지를 파일로 저장하는 방법. Claude Design 등 외부 도구에 전달할 때 사용.
|
|
|
|
## 전제 조건
|
|
|
|
- 앱 실행 중 (`docker compose up`)
|
|
- Python 3 + playwright 설치됨
|
|
|
|
```bash
|
|
pip3 install playwright
|
|
# 브라우저 다운로드 불필요 — 로컬 Chrome 사용
|
|
```
|
|
|
|
## 스크립트
|
|
|
|
```python
|
|
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()
|
|
```
|
|
|
|
## 실행
|
|
|
|
```bash
|
|
python3 docs/development/screenshot-guide.py
|
|
# 결과: /tmp/bibimbap-screenshots/*.png
|
|
```
|
|
|
|
## 주의
|
|
|
|
- 헤드리스 모드는 다크 테마 미적용 (시스템 prefers-color-scheme 무시)
|
|
- 로그인 필요 페이지는 세션 없이 리다이렉트됨
|
|
- `/tmp/bibimbap-screenshots/` 는 재부팅 시 삭제 — 영구 저장 필요하면 경로 변경
|
|
- Claude Design에 넘길 때 "다크 테마로 리디자인" 프롬프트에 명시
|