반응형 스크린샷을 한 줄로 — html-screenshot Claude Code 스킬 공개
목차
한 줄 요약 · 로컬 HTML을 PC와 모바일 뷰포트로 동시에 렌더링해 좌우 합성 단일 이미지로 내보내는 Claude Code 스킬을 공개합니다. PR · 블로그 · 포트폴리오용 반응형 스크린샷을 명령 한 줄로 해결합니다.
반응형 디자인을 만들면서 항상 마주치는 불편함이 있습니다. DevTools로 모바일 뷰를 확인하고, 다시 PC 뷰로 돌아가서 캡처하고, 두 파일을 포토샵에서 나란히 붙여 넣는 작업 말이죠. 하나의 화면을 보여주기 위해 세 개의 도구를 오가야 한다는 건 분명 낭비입니다. 그래서 html-screenshot이라는 Claude Code 스킬을 직접 만들었습니다. HTML 경로만 넘기면 PC와 모바일을 동시에 렌더링하고, 높이를 맞춰 한 장의 합성 이미지로 떨어뜨려 줍니다.
왜 만들었나
반응형 스크린샷을 블로그 본문이나 GitHub PR 설명에 첨부할 때, 디바이스별 개별 파일을 나열하면 가독성이 떨어집니다. 보는 사람은 두 이미지를 머릿속에서 결합해야 하고, 썸네일 영역에서는 어느 것이 모바일이고 어느 것이 데스크탑인지도 불분명합니다. 반면 한 장의 합성 이미지는 동일한 캔버스 위에 양쪽 뷰포트가 정렬된 상태로 올라가므로 한눈에 비교가 됩니다.
┌──────────────────────────┐ ┌──────┐
│ │ │ │
│ PC │ │ Mob │ ← 단일 PNG/JPEG
│ (1920×1080) │ │ ile │ 여백 있는 캔버스, 그라디언트 배경
│ │ │ │ 높이 자동 정규화
└──────────────────────────┘ └──────┘주요 기능
- ⚡ 명령 한 줄 → 이미지 한 장 · PC와 모바일을 좌우 합성 (원하면 태블릿 패널 추가)
- 🎨 배경 프리셋 14종 ·
slate,sunset,ocean,midnight,aurora등. 단색/그라디언트 커스텀 지원 - 📐 패널 높이 자동 정규화 · PC와 모바일이 깔끔하게 정렬됩니다. 업스케일은 하지 않습니다
- 🌐 로컬 HTTP 서버 자동 기동 · 상대경로
CSS/JS/img/fetch가 정상 작동,file://이슈 없음 - 📂 폴더 일괄 처리 ·
.html재귀 탐색, 출력은 원본 트리 구조 유지 - 🔄 풀페이지 또는 뷰포트 ·
--full-page플래그로 스크롤 전체 캡처 - 🧩 개별 디바이스 파일 ·
--separate는 원본 픽셀 해상도를 그대로 보존
빠른 시작
설치는 단순합니다. Playwright(Chromium)와 Pillow만 있으면 됩니다.
pip install playwright pillow
python -m playwright install chromium
# ~/.claude/skills/html-screenshot/ 에 배치하거나 git submodule로 연결배치 후 Claude Code에서 아래처럼 호출합니다.
# 단일 파일 → 원본 옆에 ./index.png
/html-screenshot ./index.html
# 폴더 → ./site/screenshots/{tree}/{stem}.png
/html-screenshot ./site/ --full-page --tablet
# 프리셋 배경 + PC 해상도 커스텀
/html-screenshot ./page.html --bg sunset --pc-size 1440x900플래그 한눈에 보기
핵심 플래그만 간추렸습니다. 전체 목록은 README에 정리되어 있습니다.
| 플래그 | 기본값 | 설명 |
|---|---|---|
| — | (필수) HTML 파일 또는 디렉토리 |
--full-page | off | 뷰포트 대신 전체 스크롤 영역 캡처 |
--separate | off | 합성 대신 디바이스별 개별 파일 저장 |
--pc-size | 1920x1080 | PC 뷰포트 크기 |
--mobile-size | 375x812 | Mobile 뷰포트 크기 (iPhone X 클래스) |
--tablet | off | PC와 Mobile 사이에 태블릿 패널 추가 |
--bg | slate | 프리셋명 · 단색 · 그라디언트 |
--gap | 60 | 합성 시 패널 간격 (px) |
--padding | 80 | 캔버스 외곽 여백 (px) |
--format | png | png 또는 jpeg |
배경 프리셋 시연
--bg는 세 가지 형태를 모두 지원합니다. 프리셋명, CSS 단색, 그라디언트 문자열입니다.--bg sunset # 프리셋
--bg "#1e293b" # 단색
--bg "#667eea,#764ba2" # 그라디언트 (대각선)
--bg "#0f172a,#1e293b,vertical" # 그라디언트 (세로)출력 규칙
입력이 파일이냐 폴더냐, 그리고
--separate 여부에 따라 출력 경로가 달라집니다.| 입력 | 기본 (합성) | --separate |
|---|---|---|
./foo.html | ./foo.png | ./foo-pc.png, ./foo-mobile.png |
./site/ | ./site/screenshots/{tree}/{stem}.png | ./site/screenshots/{tree}/{stem}-{device}.png |
합성 모드에서는 패널들을 가장 작은 패널 높이에 맞춰 다운스케일합니다. 업스케일은 하지 않으므로 화질 손상이 없으며, 배치 순서는 PC → Tablet → Mobile 순으로 좌에서 우로 정렬됩니다.
실전 팁
- 긴 랜딩 페이지는
--full-page를 권장합니다. 접힌 부분 없이 전체가 담깁니다. - 시연용 이미지로는
--bg dark --padding 40조합이 시각적으로 가장 깔끔합니다. --separate는 추가 합성용 raw 프레임을 원본 해상도로 뽑고 싶을 때 유용합니다.- 로컬 HTTP 서버는 랜덤 포트로 시작해 캡처 후 자동 종료됩니다. 프로세스 잔존 걱정은 없습니다.
로드맵과 기여
현재 아이디어 목록은 다음과 같습니다. PR 환영합니다.
- 디바이스 크롬 (PC 브라우저 프레임, 모바일 베젤)
- 패널 드롭 섀도우
- WebP 출력
- 스크롤 애니메이션 GIF / MP4
이 스킬이 여러분의 반응형 스크린샷 워크플로우의 시간을 아껴줬다면, GitHub 저장소에 ⭐ 한 번 부탁드립니다. 라이선스는 MIT입니다.
참조 링크
- GitHub · bluei98/claudecode-skill-html-screenshot스킬 저장소 · README 전체, 소스, 이슈
- README.ko.md한국어 상세 문서
조회 통계 (최근 30일)
PV 11UV 11