- wkhtmltopdf 공식 사이트에서 프로그램 설치
- 명령어 실행:
-
bash복사편집wkhtmltoimage --width 1920 --height 1080 파일.html 파일.png
- 이렇게 하면 각 HTML이 1920x1080 가로 비율 PNG 이미지로 변환됩니다.
1. wkhtmltoimage 설치 확인
먼저 설치가 제대로 되었는지 확인합니다.
(Windows PowerShell, macOS 터미널, Linux 터미널에서 실행)
bash
복사편집
wkhtmltoimage --version
버전이 표시되면 설치 완료입니다.
2. 사용법 (HTML → PNG 변환)
예를 들어, lesson_screen_1_no_shadow_part1.html 을 1920x1080 PNG로 변환하려면:
bash
복사편집
wkhtmltoimage --width 1920 --height 1080 lesson_screen_1_no_shadow_part1.html lesson_screen_1_no_shadow_part1.png
📌 옵션 설명
- --width 1920 → 가로 크기 (유튜브용 FHD 가로 화면)
- --height 1080 → 세로 크기
- 마지막에 .html → 변환할 HTML 파일
- 마지막 .png → 저장될 이미지 이름
3. 여러 파일 한 번에 변환
ZIP 파일을 풀어서 HTML이 모여 있는 폴더에서 아래 명령 실행:
bash
for %f in (*.html) do wkhtmltoimage --width 1920 --height 1080 "%f" "%~nf.png"
(이건 Windows CMD 명령어입니다.
Mac/Linux는:)
bash
for f in *.html; do wkhtmltoimage --width 1920 --height 1080 "$f" "${f%.html}.png"; done
4. 변환 후
변환이 끝나면 같은 폴더에 PNG 파일들이 생기고, 이걸 유튜브 영상 편집 프로그램에 넣으시면 됩니다.
5. Windows에서 실행하는 방법
- ZIP 파일을 다운로드 받아서, 압축을 풀어주세요.
(예: C:\Users\내이름\Downloads\split_html_all_html 폴더) - 명령 프롬프트 열기
- 윈도우 키 + R → cmd 입력 → Enter
- HTML이 있는 폴더로 이동
예: -
cmd복사편집cd C:\Users\내이름\Downloads\split_html_all_html
- 변환 명령 실행
HTML 하나만 변환:폴더 안 모든 HTML 변환: -
cmd복사편집for %f in (*.html) do wkhtmltoimage --width 1920 --height 1080 "%f" "%~nf.png"
-
cmd복사편집wkhtmltoimage --width 1920 --height 1080 lesson_screen_1_no_shadow_part1.html lesson_screen_1_no_shadow_part1.png
📌 macOS / Linux에서 실행하는 방법
- ZIP 압축 풀기 (예: /Users/내이름/Downloads/split_html_all_html)
- 터미널 열기
- HTML 폴더로 이동:
-
bash복사편집cd /Users/내이름/Downloads/split_html_all_html
- 변환 명령 실행
HTML 하나 변환:전체 변환: -
bash복사편집for f in *.html; do wkhtmltoimage --width 1920 --height 1080 "$f" "${f%.html}.png"; done
-
bash복사편집wkhtmltoimage --width 1920 --height 1080 lesson_screen_1_no_shadow_part1.html lesson_screen_1_no_shadow_part1.png
📌 Windows에서 한 번에 전체 변환하는 .bat 파일
아래 내용을 메모장에 복사해서 html_to_png_converter.bat로 저장하면,
더블클릭 시 자동 변환됩니다.
@echo off REM HTML -> PNG 변환 스크립트 (유튜브 가로 비율)
REM 현재 폴더에 있는 모든 HTML 파일을 1920x1080 PNG로 변환합니다.
echo 변환 시작...
for %%f in (*.html) do ( echo 변환 중: %%f wkhtmltoimage --width 1920 --height 1080 "%%f" "%%~nf.png" )
echo 변환 완료!
pause
📌 사용 방법
- 이 파일을 HTML이 들어있는 폴더에 넣기
- 더블클릭 실행
- 같은 폴더에 PNG 이미지가 생성됩니다.
📌 wkhtmltoimage 설치 경로 확인
1. 설치 경로 확인
보통 Windows에서는 아래 중 한 곳에 설치됩니다:
- C:\Program Files\wkhtmltopdf\bin\wkhtmltoimage.exe
- C:\Program Files (x86)\wkhtmltopdf\bin\wkhtmltoimage.exe
여기서 wkhtmltoimage.exe 파일이 있는지 확인해 주세요.
2. 명령어가 인식되도록 하는 방법
방법 A — bat 파일에서 전체 경로로 실행
아까 만든 .bat 파일에서
bat
복사편집
wkhtmltoimage --width 1920 ...
이 부분을 이렇게 바꿉니다:
bat
복사편집
"C:\Program Files\wkhtmltopdf\bin\wkhtmltoimage.exe" --width 1920 --height 1080 "%%f" "%%~nf.png"
📌 설치 경로가 다르면 실제 경로로 수정해야 합니다.
방법 B — PATH 환경 변수에 추가
- 시작 버튼 → "환경 변수" 검색 → "시스템 환경 변수 편집" 클릭
- "환경 변수(N)..." 버튼 클릭
- "시스템 변수"에서 Path 선택 → "편집"
- C:\Program Files\wkhtmltopdf\bin 경로 추가
- 확인 → 확인
- CMD를 다시 열어서:버전이 나오면 성공.
-
cmd복사편집wkhtmltoimage --version
📌 제 경험상, bat 파일에서 방법 A로 절대 경로를 지정하는 게 가장 빠릅니다
📌 이미지 파일이 깨지거나 화면 전체가 텍스트처럼 깨저나올때
이 경우는 두 가지 원인이 있습니다.
1. wkhtmltoimage가 폰트를 못 불러올 때
- HTML에서 사용하는 글꼴이 시스템에 없거나
- 외부 폰트(URL, 구글폰트 등)가 로컬에서 로드되지 않았을 때
→ 브라우저는 정상 표시하지만 wkhtmltoimage는 기본 폰트(기본적으로 아랍·힌디어 계열)로 대체합니다.
2. HTML 내부 경로가 깨졌을 때
- CSS, 폰트, 이미지가 상대경로인데 wkhtmltoimage 실행 위치에서 못 찾는 경우
- 특히 CSS가 안 불러와지면 레이아웃이 무너지고 폰트도 기본값으로 대체됩니다.
해결 방법
- 폰트 임베드
- HTML 안에 CSS를 <style>로 직접 넣고, 폰트도 Base64 또는 WOFF 형태로 포함
- 외부 리소스 절대경로 변경
- wkhtmltoimage 명령 실행 폴더 기준이 아니라, HTML에서 쓰는 CSS/JS/폰트의 경로를 절대경로로 바꾸기
- --enable-local-file-access 옵션 사용
- 예:
-
cmd복사편집wkhtmltoimage --enable-local-file-access --width 1920 --height 1080 input.html output.png
- 로컬 파일 접근을 허용해야 CSS·폰트를 불러올 수 있습니다.
💡 즉, 지금 보이는 아랍글자 같은 건 내용이 바뀐 게 아니라 폰트·CSS를 못 읽어서 대체 폰트로 찍힌 것입니다.
반응형