PPTX 생성 스킬

HTML 프레젠테이션을 PPTX로 변환하거나, PptxGenJS를 직접 활용하여 PowerPoint 파일을 생성합니다.

필수 요구사항

Pretendard 폰트

모든 PPTX 파일은 반드시 Pretendard 폰트를 사용해야 합니다.

시스템에 Pretendard가 없는 경우:

• https://github.com/orioncactus/pretendard 에서 다운로드

• 시스템에 폰트 설치

의존성

npm install pptxgenjs sharp

워크플로우

옵션 1: PptxGenJS 직접 사용 (권장)

PptxGenJS를 사용하여 프로그래매틱하게 PPTX를 생성합니다.

기본 구조

const PptxGenJS = require('pptxgenjs');

// 프레젠테이션 생성 const pptx = new PptxGenJS();

// 메타데이터 설정 pptx.author = 'Fit Checker'; pptx.title = '적합성 분석 리포트'; pptx.subject = '[회사명] x [지원자명]';

// 레이아웃 설정 (16:9) pptx.defineLayout({ name: 'CUSTOM', width: 13.33, height: 7.5 }); pptx.layout = 'CUSTOM';

슬라이드 1: 타이틀 & 매치율

const slide1 = pptx.addSlide();

// 배경색 slide1.background = { color: 'F9FAFB' };

// 타이틀 slide1.addText('[회사명] x [지원자명]', { x: 0.5, y: 0.5, w: '90%', h: 1, fontSize: 40, fontFace: 'Pretendard', bold: true, color: '111827', align: 'center', });

// 서브타이틀 slide1.addText('적합성 분석 리포트', { x: 0.5, y: 1.3, w: '90%', h: 0.5, fontSize: 24, fontFace: 'Pretendard', color: '6B7280', align: 'center', });

// 매치율 원형 (도넛 차트) slide1.addChart( pptx.ChartType.doughnut, [ { name: 'Match', labels: ['매치', '나머지'], values: [78, 22], // 매치율에 따라 조정 }, ], { x: 4.5, y: 2, w: 4, h: 4, chartColors: ['10B981', 'E5E7EB'], showLegend: false, showTitle: false, holeSize: 70, } );

// 매치율 텍스트 (차트 중앙) slide1.addText('78%', { x: 5.5, y: 3.5, w: 2, h: 1, fontSize: 48, fontFace: 'Pretendard', bold: true, color: '10B981', align: 'center', });

슬라이드 2: 잘 맞는 점

const slide2 = pptx.addSlide();

slide2.addText('✅ 잘 맞는 점', { x: 0.5, y: 0.3, w: '90%', fontSize: 32, fontFace: 'Pretendard', bold: true, color: '111827', });

// 테이블 데이터 const tableData = [ [ { text: '항목', options: { bold: true, fill: '2563EB', color: 'FFFFFF' } }, { text: '회사 요구사항', options: { bold: true, fill: '2563EB', color: 'FFFFFF' }, }, { text: '지원자 보유 역량', options: { bold: true, fill: '2563EB', color: 'FFFFFF' }, }, { text: '적합도', options: { bold: true, fill: '2563EB', color: 'FFFFFF' }, }, ], [ { text: '기술 스택' }, { text: 'React, TypeScript' }, { text: 'Next.js, React, TypeScript' }, { text: '✅ 완벽 일치', options: { color: '10B981' } }, ], // 추가 행... ];

slide2.addTable(tableData, { x: 0.5, y: 1, w: 12, fontFace: 'Pretendard', fontSize: 14, border: { type: 'solid', pt: 1, color: 'E5E7EB' }, align: 'left', valign: 'middle', });

슬라이드 3: 맞지 않는 점

const slide3 = pptx.addSlide();

slide3.addText('⚠️ 맞지 않는 점', { x: 0.5, y: 0.3, w: '90%', fontSize: 32, fontFace: 'Pretendard', bold: true, color: '111827', });

// 카드 스타일 박스 slide3.addShape(pptx.ShapeType.rect, { x: 0.5, y: 1, w: 5.5, h: 2.5, fill: 'FEF2F2', line: { color: 'EF4444', pt: 2, dashType: 'solid' }, });

slide3.addText('❌ 경력 요건', { x: 0.7, y: 1.2, w: 5, fontSize: 20, fontFace: 'Pretendard', bold: true, color: 'EF4444', });

slide3.addText('요구: 3년 이상\n보유: 신입', { x: 0.7, y: 1.8, w: 5, fontSize: 16, fontFace: 'Pretendard', color: '111827', });

슬라이드 4: 보완 포인트

const slide4 = pptx.addSlide();

slide4.addText('💡 보완 포인트', { x: 0.5, y: 0.3, w: '90%', fontSize: 32, fontFace: 'Pretendard', bold: true, color: '111827', });

// 우선순위 배지 slide4.addShape(pptx.ShapeType.roundRect, { x: 0.5, y: 1, w: 1.2, h: 0.4, fill: 'FEE2E2', });

slide4.addText('높음', { x: 0.5, y: 1, w: 1.2, h: 0.4, fontSize: 12, fontFace: 'Pretendard', bold: true, color: '991B1B', align: 'center', valign: 'middle', });

// 보완 항목 내용 slide4.addText('[보완 항목명]', { x: 2, y: 1, w: 10, fontSize: 18, fontFace: 'Pretendard', bold: true, color: '111827', });

slide4.addText('📌 근거: [채용 공고에서 발췌한 근거]', { x: 2, y: 1.6, w: 10, fontSize: 14, fontFace: 'Pretendard', color: '6B7280', });

파일 저장

// 파일로 저장 (Node.js) pptx .writeFile({ fileName: 'output/fit-result.pptx' }) .then((fileName) => console.log(Created: ${fileName}));

// 또는 Buffer로 반환 const buffer = await pptx.write({ outputType: 'nodebuffer' });

옵션 2: HTML to PPTX 변환

HTML 파일을 PPTX로 변환해야 하는 경우, html2pptx.md 참조 문서를 확인하세요.

중요 주의사항

1. 색상 코드

PptxGenJS에서 # 없이 사용해야 합니다.

// ✅ 올바름 { color: '10B981'; } { fill: 'F9FAFB'; }

// ❌ 잘못됨 (파일 손상 가능) { color: '#10B981'; } { fill: '#F9FAFB'; }

2. 폰트 지정

모든 텍스트 요소에 Pretendard 폰트를 명시적으로 지정:

{ fontFace: 'Pretendard', // ... }

3. 한글 텍스트

한글 텍스트는 자동으로 처리되지만, 줄바꿈이 필요한 경우 \n 사용:

slide.addText('첫 번째 줄\n두 번째 줄', { ... });

4. 이모지 사용

이모지는 일부 환경에서 표시되지 않을 수 있습니다. 중요한 정보는 이모지 외에 텍스트로도 표현하세요.

출력 파일

결과물은 output/ 디렉토리에 저장:

output/ ├── fit-check-result-YYYY-MM-DD.pptx └── fit-check-result-YYYY-MM-DD.html (백업용)

컬러 팔레트 참조

용도 색상 코드 설명

Primary 2563EB

주요 강조색

Success 10B981

긍정적/완료

Warning F59E0B

주의/선호

Danger EF4444

부정적/필수 미충족

Neutral 6B7280

중립/보조 텍스트

Background F9FAFB

배경색

Text Primary 111827

주요 텍스트

Text Secondary 6B7280

보조 텍스트

Border E5E7EB

테두리/구분선

추가 참조 문서

상세한 기술 정보는 다음 문서를 참조하세요:

• html2pptx.md

• HTML to PPTX 변환 상세 가이드

• ooxml.md

• OOXML 직접 조작 기술 참조