소개
강의자료를 PowerPoint 대신 HTML로 제작했습니다. 브라우저에서 F11 풀스크린으로 바로 강의할 수 있고, 인터랙티브 요소(자가진단, 레이더 차트, 입력 캔버스)를 넣을 수 있어서 선택한 방식이었습니다.
그런데 강의 후 자료를 공유할 때 문제가 생겼습니다. HTML 폴더 전체를 압축해서 보내면 받는 쪽에서 열기가 번거롭고, 많은 분들이 "PPT 파일로 받고 싶다"고 하셨거든요.
그래서 "HTML 슬라이드를 그대로 스크린샷 찍어서 PPT로 만들 수 없을까?" 를 시도했습니다. Claude에게 방법을 물어보고, 실제 코드 작성부터 실행까지 함께 진행했습니다.
- 슬라이드 수: 37장
- 슬라이드 크기: 1280×720px (16:9)
- 목표 출력: 강의 발표자료.pptx
진행 방법
사용 도구
- Claude (Claude Code) — 전체 코드 설계 및 실행
- Python 3.11
- [Playwright](https://playwright.dev/python/) — headless 브라우저로 HTML 슬라이드 스크린샷
- [python-pptx](https://python-pptx.readthedocs.io/) — 스크린샷 이미지를 PPT 슬라이드로 조립
- uv — Python 패키지 관리
Claude Code 채팅창에 아래처럼 요청했습니다.
이미지로 추출해서 ppt로 만들고 싶어. 현재 버전으로 만들어줘. 파일명은 "강의 발표자료.pptx"별도의 복잡한 프롬프트 없이 한 줄로 요청했고, Claude가 환경 탐색(Python 경로 확인, 패키지 설치 방법)부터 코드 작성, 실행까지 알아서 처리했습니다.
결과와 배운 점
결과물
- 37장짜리 .pptx 파일 생성 완료 (약 5.1MB)
- 각 슬라이드가 2560×1440 해상도 PNG로 캡처되어 PPT에 삽입됨
- 폰트(Pretendard CDN), 레이아웃, 색상이 HTML 화면 그대로 재현됨
꿀팁
- device_scale_factor=2 설정이 핵심입니다. 기본값(1)으로 하면 1280×720으로 캡처되어 PPT에서 흐릿하게 보입니다. 2배로 설정하면 2560×1440으로 캡처되어 선명합니다.
### 시행착오
Python 환경 문제가 제일 오래 걸렸습니다.
저는 uv로 Python을 관리하고 있었는데, pip install을 직접 실행하면 "externally-managed-environment" 오류가 났습니다. Claude가 여러 방법을 시도하다가 결국 uv venv로 독립 가상환경을 만들고 uv pip install --python <venv경로>로 설치하는 방식으로 해결했습니다.
playwright install chromium 명령어도 가상환경 안의 Python으로 실행해야 브라우저가 제대로 연결됩니다.
경로에 한글이 있어도 문제없었습니다.
파일경로에 한글·특수문자가 있어도, pathlib.Path.as_uri()를 쓰면 URL 인코딩을 자동으로 처리해줘서 Playwright가 정상 접근했습니다.
### 앞으로의 계획
이미지로 캡쳐하는 것 말고 ppt로 수정가능하게 추출하는 방법을 고민해보려고 합니다.
도움 받은 글 (옵션)
지피터스 오프라인에서 스터디장님들께 여쭤봤던 내용으로 진행했습니다.
이런 작업이 많아질텐데 좀 더 고도화가 필요할 것 같습니다.
