06 · Developer Guide · 레시피
PDF → 이미지 자체호스팅PDF to Image Pipeline
외부 사이트의 PDF/이미지를 자체 호스팅으로 옮기는 4단계 — 다운로드 → 변환 → 압축 → 데이터 모듈.
언제 쓰는가
- 운영 사이트(pcltv.org)의 PDF·이미지 게시물을 시안 사이트 안에서 렌더링
- 외부 핫링크 깨짐 방지 + 사이트 안에서 라이트박스 동작이 필요한 경우
- 차후 자체 CMS로 이관할 때 자산이 한 곳에 정리되어 있어야 하는 경우
① 외부 자산 일괄 다운로드
bash
# pcltv.org 게시판에서 PDF 또는 이미지 일괄 다운로드
# 예: 함즐함울 7개 호 PDF 병렬
cat > /tmp/urls.txt <<'EOF'
515|https://www.pcltv.org/UserData/.../함즐함울515호.pdf
514|https://www.pcltv.org/UserData/.../함즐함울514호.pdf
EOF
while IFS='|' read -r no url; do
(
curl -sL -A "Mozilla/5.0" -o "$no.pdf" "$url"
) &
done < /tmp/urls.txt
wait② PDF → JPEG 페이지별 변환 (pdftoppm)
pdftoppm은 poppler-utils 패키지에 들어있습니다. macOS는 brew install poppler, Ubuntu는 apt-get install poppler-utils.
bash
# pdftoppm로 PDF → JPEG 페이지별 변환
# poppler-utils 필요 (brew install poppler)
pdftoppm -jpeg -r 150 \
516.pdf \
public/hamjul/516/p \
-jpegopt quality=80
# 결과: public/hamjul/516/p-01.jpg, p-02.jpg, ...
# -r 150 : 150dpi. 화면 표시 기준 80~150이 적정
# quality 60~80이 용량·품질 균형③ sips 일괄 압축 (macOS)
Vercel 배포 한도(약 100MB) 안전화. sips -Z 1400로 긴 쪽 1400px 리사이즈 + quality 55. 가독성에 거의 영향 없으면서 용량은 절반 이하.
bash
# sips (macOS 내장)로 일괄 압축 — Vercel 배포 한도 안전화
# 해상도 리사이즈 + jpeg quality 함께
find public/hamjul -name "*.jpg" -print0 | xargs -0 -n 1 -P 8 -I {} sh -c '
sips -Z 1400 -s formatOptions 55 -s format jpeg "$1" --out "$1.tmp.jpg" \
>/dev/null 2>&1 && mv "$1.tmp.jpg" "$1"
' _ {}
# -Z 1400 : 긴 쪽 1400px로 리사이즈 (원본 비율 유지)
# formatOptions 55 : jpeg quality 0~100 중 55 (시각 차이 거의 없음)④ 데이터 모듈에 경로 등록
자체호스팅된 자산은 lib/preview/*.ts 데이터 모듈에 경로 배열로 등록합니다. 컴포넌트는 이 모듈만 import하면 됩니다.
ts
// lib/preview/hamjul.ts — 자체호스팅 자산을 데이터 모듈에 등록
export type HamjulIssue = {
no: number;
date: string;
pageCount: number;
pages: string[]; // /hamjul/{no}/p-NN.jpg
cover: string; // = pages[0]
archiveHref: string;
};
const pagesFor = (no: number, count: number) =>
Array.from({ length: count }, (_, i) =>
`/hamjul/${no}/p-${String(i + 1).padStart(2, "0")}.jpg`,
);
export const HAMJUL_ISSUES: HamjulIssue[] = [
{
no: 516,
date: "2026.05.03",
pageCount: 12,
pages: pagesFor(516, 12),
cover: "/hamjul/516/p-01.jpg",
archiveHref: "https://www.pcltv.org/Board/Detail/1091/183050",
},
// ...
];public/ 디렉터리 구조
text
public/
├── brand/ # 로고·CI 자산
├── hero/ # 홈 히어로 슬라이드 이미지
├── jubo/ # 주보 N면 이미지 (자체호스팅)
│ └── 2026-05-10/
│ ├── p1.jpg ~ p4.jpg
├── hamjul/ # 함즐함울 호별 이미지
│ └── 516/
│ └── p-01.jpg ~ p-12.jpg
├── qt/ # 큐티 일별 이미지
│ └── 182643/
│ └── 01.jpg, 02.jpg
└── news/ # 새소식 게시물 갤러리
└── 182961/
└── 01.jpg ~ NN.jpg