- ` | 글머리 기호 목록 |
| `
- 타겟 오디언스 재정의
- 채널 믹스 최적화
- 콘텐츠 전략 수립
` (배경/테두리) | 도형 |
### 4. 지원되는 CSS 속성
```css
/* 텍스트 스타일 */
font-family: 'Pretendard', sans-serif;
font-size: 24pt;
font-weight: bold; /* bold 지원 */
font-style: italic; /* italic 지원 */
text-decoration: underline;
text-transform: uppercase;
color: #1a365d;
text-align: center;
/* 레이아웃 */
position: absolute;
left: 100px;
top: 50px;
width: 400px;
height: auto;
/* 도형 (div만 지원) */
background-color: #f7fafc;
border: 2px solid #e2e8f0;
border-radius: 10px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
```
### 5. 주의사항
**금지되는 패턴:**
- CSS 그라디언트 (`linear-gradient`, `radial-gradient`) - 이미지로 대체
- 텍스트 요소(`` 등)에 `background`, `border`, `box-shadow`
- `
`, `
` 등)에 `background`, `border`, `box-shadow`
- `` 내 직접 텍스트 (반드시 ``, `
` 등으로 감싸야 함)
- 수동 글머리 기호 (`•`, `-`, `*` 등) - ``, `` 사용
**인라인 요소 제한:**
- ``, ``, ``, ``, ``, ``에 margin 사용 불가
## 마케팅 슬라이드 템플릿
### 표지 슬라이드
```html
브랜드 캠페인 제안서
2024년 1분기 마케팅 전략
2024.01
```
### 섹션 구분 슬라이드
```html
01
브랜드 분석
```
### 2분할 콘텐츠 슬라이드
```html
핵심 전략
```
### 데이터 시각화 슬라이드
```html
캠페인 성과
45%
전환율
128K
도달 수
+23%
성장률
```
## 스크립트 사용법
### html2pptx.js
```javascript
const pptxgen = require('pptxgenjs');
const html2pptx = require('./scripts/html2pptx');
async function createPresentation() {
const pptx = new pptxgen();
pptx.layout = 'LAYOUT_16x9';
// HTML 슬라이드 변환
const { slide, placeholders } = await html2pptx('slide1.html', pptx);
// placeholder 영역에 차트 추가
if (placeholders.length > 0) {
slide.addChart(pptx.charts.LINE, chartData, placeholders[0]);
}
await pptx.writeFile('output.pptx');
}
```
### 차트/테이블 추가 (PptxGenJS)
```javascript
// 차트 추가
slide.addChart(pptx.charts.BAR, [
{ name: 'Q1', labels: ['Jan', 'Feb', 'Mar'], values: [10, 20, 30] },
{ name: 'Q2', labels: ['Jan', 'Feb', 'Mar'], values: [15, 25, 35] }
], {
x: placeholders[0].x,
y: placeholders[0].y,
w: placeholders[0].w,
h: placeholders[0].h,
showTitle: false,
chartColors: ['#1a365d', '#ed8936']
});
// 테이블 추가
slide.addTable([
['항목', 'Q1', 'Q2', 'Q3'],
['매출', '100M', '120M', '150M'],
['비용', '80M', '90M', '100M']
], {
x: 0.5,
y: 2,
w: 9,
colW: [2, 2.3, 2.3, 2.3],
color: '2d3748',
border: { type: 'solid', color: 'e2e8f0' },
fontFace: 'Pretendard'
});
```
## 검증
### 변환 전 체크리스트
- [ ] body 크기가 슬라이드 레이아웃과 일치
- [ ] 모든 텍스트가 ``, `
`-``, ``, `` 내에 있음
- [ ] ``에 직접 텍스트 없음
- [ ] CSS 그라디언트 사용 안함
- [ ] 텍스트 요소에 background/border 사용 안함
- [ ] 하단 여백 0.5인치 이상 확보
### 에러 대응
| 에러 메시지 | 원인 | 해결 |
|------------|------|------|
| "HTML content overflows body" | 콘텐츠가 body 크기 초과 | 요소 위치/크기 조정 |
| "CSS gradients are not supported" | 그라디언트 사용 | PNG 이미지로 대체 |
| "contains unwrapped text" | div 내 직접 텍스트 | p/h 태그로 감싸기 |
## 파일 저장 위치
```
{project}/
├── reports/presentations/ # 최종 PPTX
│ └── campaign-proposal-20240115.pptx
├── assets/pptx-resources/ # 슬라이드 리소스
│ ├── html/ # HTML 슬라이드 소스
│ ├── images/ # 삽입 이미지
│ └── templates/ # 템플릿
└── tmp/pptx-work/ # 작업 파일
```
## 참고
- [PptxGenJS Documentation](https://gitbrent.github.io/PptxGenJS/)
- 스크립트 위치: `plugins/common/skills/pptx/scripts/html2pptx.js`
`, `
` 등으로 감싸야 함)
- 수동 글머리 기호 (`•`, `-`, `*` 등) - ``, `` 사용
**인라인 요소 제한:**
- ``, ``, ``, ``, ``, ``에 margin 사용 불가
## 마케팅 슬라이드 템플릿
### 표지 슬라이드
```html
브랜드 캠페인 제안서
2024년 1분기 마케팅 전략
2024.01
```
### 섹션 구분 슬라이드
```html
01
브랜드 분석
```
### 2분할 콘텐츠 슬라이드
```html
핵심 전략
```
### 데이터 시각화 슬라이드
```html
캠페인 성과
45%
전환율
128K
도달 수
+23%
성장률
```
## 스크립트 사용법
### html2pptx.js
```javascript
const pptxgen = require('pptxgenjs');
const html2pptx = require('./scripts/html2pptx');
async function createPresentation() {
const pptx = new pptxgen();
pptx.layout = 'LAYOUT_16x9';
// HTML 슬라이드 변환
const { slide, placeholders } = await html2pptx('slide1.html', pptx);
// placeholder 영역에 차트 추가
if (placeholders.length > 0) {
slide.addChart(pptx.charts.LINE, chartData, placeholders[0]);
}
await pptx.writeFile('output.pptx');
}
```
### 차트/테이블 추가 (PptxGenJS)
```javascript
// 차트 추가
slide.addChart(pptx.charts.BAR, [
{ name: 'Q1', labels: ['Jan', 'Feb', 'Mar'], values: [10, 20, 30] },
{ name: 'Q2', labels: ['Jan', 'Feb', 'Mar'], values: [15, 25, 35] }
], {
x: placeholders[0].x,
y: placeholders[0].y,
w: placeholders[0].w,
h: placeholders[0].h,
showTitle: false,
chartColors: ['#1a365d', '#ed8936']
});
// 테이블 추가
slide.addTable([
['항목', 'Q1', 'Q2', 'Q3'],
['매출', '100M', '120M', '150M'],
['비용', '80M', '90M', '100M']
], {
x: 0.5,
y: 2,
w: 9,
colW: [2, 2.3, 2.3, 2.3],
color: '2d3748',
border: { type: 'solid', color: 'e2e8f0' },
fontFace: 'Pretendard'
});
```
## 검증
### 변환 전 체크리스트
- [ ] body 크기가 슬라이드 레이아웃과 일치
- [ ] 모든 텍스트가 ``, `
`-``, ``, `` 내에 있음
- [ ] ``에 직접 텍스트 없음
- [ ] CSS 그라디언트 사용 안함
- [ ] 텍스트 요소에 background/border 사용 안함
- [ ] 하단 여백 0.5인치 이상 확보
### 에러 대응
| 에러 메시지 | 원인 | 해결 |
|------------|------|------|
| "HTML content overflows body" | 콘텐츠가 body 크기 초과 | 요소 위치/크기 조정 |
| "CSS gradients are not supported" | 그라디언트 사용 | PNG 이미지로 대체 |
| "contains unwrapped text" | div 내 직접 텍스트 | p/h 태그로 감싸기 |
## 파일 저장 위치
```
{project}/
├── reports/presentations/ # 최종 PPTX
│ └── campaign-proposal-20240115.pptx
├── assets/pptx-resources/ # 슬라이드 리소스
│ ├── html/ # HTML 슬라이드 소스
│ ├── images/ # 삽입 이미지
│ └── templates/ # 템플릿
└── tmp/pptx-work/ # 작업 파일
```
## 참고
- [PptxGenJS Documentation](https://gitbrent.github.io/PptxGenJS/)
- 스크립트 위치: `plugins/common/skills/pptx/scripts/html2pptx.js`
- ` 사용
**인라인 요소 제한:**
- ``, ``, ``, ``, ``, ``에 margin 사용 불가
## 마케팅 슬라이드 템플릿
### 표지 슬라이드
```html
브랜드 캠페인 제안서
2024년 1분기 마케팅 전략
2024.01
``` ### 섹션 구분 슬라이드 ```html01
브랜드 분석
``` ### 2분할 콘텐츠 슬라이드 ```html핵심 전략
캠페인 성과
45%
전환율
128K
도달 수
+23%
성장률
``` ## 스크립트 사용법 ### html2pptx.js ```javascript const pptxgen = require('pptxgenjs'); const html2pptx = require('./scripts/html2pptx'); async function createPresentation() { const pptx = new pptxgen(); pptx.layout = 'LAYOUT_16x9'; // HTML 슬라이드 변환 const { slide, placeholders } = await html2pptx('slide1.html', pptx); // placeholder 영역에 차트 추가 if (placeholders.length > 0) { slide.addChart(pptx.charts.LINE, chartData, placeholders[0]); } await pptx.writeFile('output.pptx'); } ``` ### 차트/테이블 추가 (PptxGenJS) ```javascript // 차트 추가 slide.addChart(pptx.charts.BAR, [ { name: 'Q1', labels: ['Jan', 'Feb', 'Mar'], values: [10, 20, 30] }, { name: 'Q2', labels: ['Jan', 'Feb', 'Mar'], values: [15, 25, 35] } ], { x: placeholders[0].x, y: placeholders[0].y, w: placeholders[0].w, h: placeholders[0].h, showTitle: false, chartColors: ['#1a365d', '#ed8936'] }); // 테이블 추가 slide.addTable([ ['항목', 'Q1', 'Q2', 'Q3'], ['매출', '100M', '120M', '150M'], ['비용', '80M', '90M', '100M'] ], { x: 0.5, y: 2, w: 9, colW: [2, 2.3, 2.3, 2.3], color: '2d3748', border: { type: 'solid', color: 'e2e8f0' }, fontFace: 'Pretendard' }); ``` ## 검증 ### 변환 전 체크리스트 - [ ] body 크기가 슬라이드 레이아웃과 일치 - [ ] 모든 텍스트가 ``, `
`-``, ``, `` 내에 있음
- [ ] ``에 직접 텍스트 없음
- [ ] CSS 그라디언트 사용 안함
- [ ] 텍스트 요소에 background/border 사용 안함
- [ ] 하단 여백 0.5인치 이상 확보
### 에러 대응
| 에러 메시지 | 원인 | 해결 |
|------------|------|------|
| "HTML content overflows body" | 콘텐츠가 body 크기 초과 | 요소 위치/크기 조정 |
| "CSS gradients are not supported" | 그라디언트 사용 | PNG 이미지로 대체 |
| "contains unwrapped text" | div 내 직접 텍스트 | p/h 태그로 감싸기 |
## 파일 저장 위치
```
{project}/
├── reports/presentations/ # 최종 PPTX
│ └── campaign-proposal-20240115.pptx
├── assets/pptx-resources/ # 슬라이드 리소스
│ ├── html/ # HTML 슬라이드 소스
│ ├── images/ # 삽입 이미지
│ └── templates/ # 템플릿
└── tmp/pptx-work/ # 작업 파일
```
## 참고
- [PptxGenJS Documentation](https://gitbrent.github.io/PptxGenJS/)
- 스크립트 위치: `plugins/common/skills/pptx/scripts/html2pptx.js`
- `, `
- ` 내에 있음
- [ ] `
`에 직접 텍스트 없음
- [ ] CSS 그라디언트 사용 안함
- [ ] 텍스트 요소에 background/border 사용 안함
- [ ] 하단 여백 0.5인치 이상 확보
### 에러 대응
| 에러 메시지 | 원인 | 해결 |
|------------|------|------|
| "HTML content overflows body" | 콘텐츠가 body 크기 초과 | 요소 위치/크기 조정 |
| "CSS gradients are not supported" | 그라디언트 사용 | PNG 이미지로 대체 |
| "contains unwrapped text" | div 내 직접 텍스트 | p/h 태그로 감싸기 |
## 파일 저장 위치
```
{project}/
├── reports/presentations/ # 최종 PPTX
│ └── campaign-proposal-20240115.pptx
├── assets/pptx-resources/ # 슬라이드 리소스
│ ├── html/ # HTML 슬라이드 소스
│ ├── images/ # 삽입 이미지
│ └── templates/ # 템플릿
└── tmp/pptx-work/ # 작업 파일
```
## 참고
- [PptxGenJS Documentation](https://gitbrent.github.io/PptxGenJS/)
- 스크립트 위치: `plugins/common/skills/pptx/scripts/html2pptx.js`