Ch.2 JavaScript 라이브러리 15선
jsPDF — 브라우저에서 PDF 생성
핵심 내용
브라우저 안의 프린터, jsPDF. 버튼 하나로 PDF를 뚝딱 만들어 바로 다운로드하세요.
jsPDF = 자바스크립트로 PDF 파일을 생성하는 라이브러리. 서버 없이 브라우저에서 바로 견적서, 수료증, 영수증을 PDF로 만들어 다운로드할 수 있습니다.
백엔드 서버가 없어도 됩니다. 사용자가 입력한 내용을 즉석에서 PDF로 변환해서 내려받게 할 수 있어요.
거래처에 보낼 견적서를 웹에서 바로 PDF로 뽑고 싶을 때, 수강생에게 수료증을 즉시 발급하고 싶을 때.
수동 방식: 워드에서 양식 채우고 → PDF로 내보내고 → 이메일에 첨부. 100명이면 100번 반복.
jsPDF 코드: 이름만 입력하면 PDF가 자동 생성. 100명이든 1000명이든 버튼 한 번이면 끝.
CDN 한 줄이면 설치 끝. 코드 4줄로 첫 PDF를 만들어봅시다.
<script src="https://cdn.jsdelivr.net/npm/jspdf"></script>const doc = new jspdf.jsPDF();
doc.setFontSize(22);
doc.text("안녕하세요, jsPDF!", 20, 30);
doc.setFontSize(14);
doc.text("이 PDF는 브라우저에서 만들어졌습니다.", 20, 50);
doc.save("hello.pdf");doc.text(텍스트, x좌표, y좌표)로 원하는 위치에 글을 씁니다. doc.save()를 호출하면 PDF 파일이 바로 다운로드됩니다.
AI에게 PDF 생성기를 요청할 때, 문서 구조 + 입력 필드 + 레이아웃을 구체적으로 알려주세요.
좋은 프롬프트 예시: "jsPDF로 견적서 PDF 생성 웹앱을 만들어줘. 회사명과 고객명 입력 폼, 품목·수량·단가 테이블, 합계와 부가세 자동 계산, PDF 다운로드 버튼을 포함해줘."
프롬프트 변형: "위 견적서에 회사 로고 이미지를 왼쪽 상단에 추가하고, 하단에 '유효기간 30일'이라는 문구와 도장 이미지를 넣어줘. 테이블 헤더는 파란 배경으로 해줘."
const doc = new jspdf.jsPDF();
// 제목
doc.setFontSize(20);
doc.text("견 적 서", 105, 20, { align: "center" });
// 회사 정보
doc.setFontSize(11);
doc.text("발행처: 바이브코딩 주식회사", 20, 40);
doc.text("고객명: 홍길동 님", 20, 48);
doc.text("날 짜: 2026-03-14", 20, 56);
// 테이블 헤더
doc.setFillColor(41, 128, 185);
doc.setTextColor(255);
doc.rect(20, 70, 170, 10, "F");
doc.text("품목", 25, 77);
doc.text("수량", 90, 77);
doc.text("단가", 120, 77);
doc.text("금액", 160, 77);
// 테이블 데이터
doc.setTextColor(0);
const items = [
["웹사이트 제작", "1", "2,000,000", "2,000,000"],
["유지보수 (월)", "3", "300,000", "900,000"],
];
let y = 87;
items.forEach(row => {
doc.text(row[0], 25, y);
doc.text(row[1], 95, y);
doc.text(row[2], 118, y);
doc.text(row[3], 155, y);
y += 10;
});
// 합계
doc.setFontSize(13);
doc.text("합계: 2,900,000원", 140, y + 15);
doc.text("부가세(10%): 290,000원", 140, y + 25);
doc.text("총액: 3,190,000원", 140, y + 35);
doc.save("estimate.pdf");수료증 PDF 생성기를 만들어봅시다. 이름을 입력하면 예쁜 수료증이 PDF로 다운로드됩니다.
<!DOCTYPE html>
<html><head><title>수료증 생성기</title></head>
<body style="font-family: sans-serif; text-align: center; padding: 40px;">
<h2>수료증 PDF 생성기</h2>
<input id="nameInput" placeholder="이름을 입력하세요"
style="padding: 10px; font-size: 16px; width: 250px;" />
<br><br>
<button onclick="generateCert()"
style="padding: 12px 30px; font-size: 16px; cursor: pointer;">
PDF 다운로드
</button>
<script src="https://cdn.jsdelivr.net/npm/jspdf"></script>
<script>
function generateCert() {
const name = document.getElementById('nameInput').value;
if (!name) { alert('이름을 입력하세요'); return; }
const doc = new jspdf.jsPDF('landscape');
// 테두리
doc.setDrawColor(41, 128, 185);
doc.setLineWidth(3);
doc.rect(15, 15, 267, 180);
doc.setLineWidth(1);
doc.rect(20, 20, 257, 170);
// 제목
doc.setFontSize(36);
doc.setTextColor(41, 128, 185);
doc.text("CERTIFICATE", 148.5, 55, { align: "center" });
doc.setFontSize(14);
doc.setTextColor(100);
doc.text("수 료 증", 148.5, 68, { align: "center" });
// 이름
doc.setFontSize(28);
doc.setTextColor(0);
doc.text(name, 148.5, 100, { align: "center" });
// 밑줄
doc.setDrawColor(200);
doc.line(80, 105, 217, 105);
// 본문
doc.setFontSize(12);
doc.setTextColor(80);
doc.text(
"위 사람은 바이브코딩 입문 과정을 성실히 수료하였기에",
148.5, 125, { align: "center" }
);
doc.text(
"이 증서를 수여합니다.",
148.5, 135, { align: "center" }
);
// 날짜
const today = new Date().toLocaleDateString('ko-KR');
doc.setFontSize(11);
doc.text(today, 148.5, 160, { align: "center" });
doc.text("바이브코딩 아카데미", 148.5, 175, { align: "center" });
doc.save("certificate.pdf");
}
</script>
</body></html>이 파일을 cert.html로 저장하고 브라우저에서 열어보세요. 이름을 입력하고 버튼을 누르면 테두리와 디자인이 적용된 수료증 PDF가 바로 다운로드됩니다.
핵심 용어
견적서/청구서
품목·수량·단가를 입력하면 합계 포함 PDF 자동 생성
수료증/인증서
이름·날짜만 넣으면 디자인된 수료증 PDF 발급
영수증
결제 완료 후 거래 내역을 PDF로 즉시 다운로드
리포트
대시보드 데이터를 정리해서 PDF 보고서로 내보내기
핵심 정리
- 1jsPDF는 CDN 한 줄로 설치하고, new jsPDF()로 문서를 만든다
- 2text(), rect(), line() 등으로 텍스트·도형·선을 원하는 위치에 배치한다
- 3save()를 호출하면 완성된 PDF가 브라우저에서 바로 다운로드된다
- 4프롬프트에 문서 종류, 입력 필드, 레이아웃 구조를 명시하면 AI가 완성 코드를 준다
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작