2.1 KiB

Raw Blame History

페이지 스크린샷 가이드

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

전제 조건

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

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

실행

비인증 페이지만 (로그인 불필요)

python3 docs/development/screenshot-guide.py

7장 캡처: 홈(비로그인), 로그인, 회원가입, 게시글 목록, 모집 목록, 게임 상세(비로그인), 이용약관

전체 캡처 (로그인 포함 세부 화면)

SCREENSHOT_EMAIL=user@example.com SCREENSHOT_PASSWORD=yourpw \
    python3 docs/development/screenshot-guide.py

추가 7장 캡처:

파일	화면
`08-home-loggedin.png`	홈 (로그인 후 — 내비게이션 변경)
`09-profile.png`	프로필 페이지
`10-posts-form.png`	게시글 작성 폼
`11-recruit-form.png`	모집 작성 폼
`12-game-detail-loggedin.png`	게임 상세 (로그인 후 전체 뷰)
`13-game-review-form.png`	리뷰 작성 폼 (노출 상태)
`14-game-comment-form.png`	댓글 작성 폼 (노출 상태, 섹션 포커스)

캡처 전략

비인증 → 인증 비교: 01·06번(비인증)과 08·12번(인증) 쌍으로 로그인 전후 차이를 비교할 수 있다.

폼 상태 강제 노출: 리뷰/댓글 composer는 서버 API 응답(로그인 상태, 기존 리뷰 여부) 후 JS가 제어한다. 스크립트는 3초 내 자연 노출을 기다리고, 실패하면 removeAttribute('hidden')으로 강제 노출해 캡처한다. 실제 동작과 동일한 HTML 구조를 캡처한다.

출력 위치

/tmp/bibimbap-screenshots/*.png

재부팅 시 삭제됨. 영구 저장 필요 시 OUT_DIR 변수 변경.

주의

헤드리스 모드는 다크 테마 미적용 (시스템 prefers-color-scheme 무시)
Claude Design에 넘길 때 "다크 테마로 리디자인" 프롬프트에 명시
로그인 실패(잘못된 계정 정보) 시 인증 페이지는 건너뛰고 비인증 7장만 저장됨

2.1 KiB Raw Blame History