# HTML 슬라이드와 카드뉴스 만들기

업데이트: 2026-10-19

## 무엇을 배우나요?

하나의 자료를 **발표용 HTML 슬라이드와 배포용 카드뉴스**로 바꾸는 방법을 배웁니다. 문서 내용을 복사해 길게 나누기보다, 한 장에 전달할 메시지와 독자의 행동을 먼저 정합니다.

## 제공 문서로 보는 프로젝트

「프로젝트 현황 · HTMLPPT」는 2026-10-02에 폴더 구성을 보고 정리한 초안입니다. 설명 문서가 없어 목적과 남은 일은 추가 확인이 필요하다고 명시되어 있습니다. 아래 수량은 그 문서의 기록이며 완성도를 새로 검증한 값이 아닙니다.

| 항목 | 기록된 산출물 |
|---|---|
| 시장 분석 보고서 | `market-report/index.html`, 슬라이드 약 18장 |
| 시장 카드뉴스 | `market-cardnews/index.html`과 PNG 12장 |
| 공통 자산 | `base.css`, `fonts.css`, `runtime.js`, 테마 34종, 애니메이션 |
| 진행 시점 | 2026-09-29 시작, 09-30 마지막 수정 기록 |

‘테마 34종’은 이 프로젝트 폴더의 기록이며 모든 HTML 발표 도구의 공통 사양이 아닙니다. HTML 슬라이드와 `.pptx`는 다른 형식이므로 PowerPoint 파일이 필요하면 별도 내보내기와 레이아웃 검증이 필요합니다.

## 1. 같은 내용, 다른 읽기 방식

발표 슬라이드는 발표자의 말과 함께 보므로 핵심 주장과 근거가 중심입니다. 카드뉴스는 단독으로 읽히므로 짧은 맥락과 결론까지 한 장 안에서 이해되어야 합니다.

| 설계 항목 | 발표용 슬라이드 | 배포용 카드뉴스 |
|---|---|---|
| 한 장의 역할 | 발표 메시지와 근거 제시 | 단독으로 이해되는 정보 |
| 문장 | 제목·핵심 수치·짧은 설명 | 독자 맥락·핵심·출처 |
| 구성 | 도입→분석→시사점 | 표지→문제→핵심→마무리 |
| 확인 | 키보드 이동·발표 화면 | 모바일 크기·PNG 잘림 |

시장 자료를 쓰는 경우 기준일과 출처를 먼저 고정합니다. 오래된 수치를 ‘오늘의 시장’으로 다시 게시하지 않고, 과거 자료는 해당 날짜의 분석 사례로 표시합니다.

## 2. 내용을 디자인보다 먼저 구조화하기

```text
첨부한 시장 분석 문서만 근거로 발표 구성안을 만들어줘.
각 장을 제목 / 핵심 주장 1개 / 뒷받침하는 근거 / 출처로 나눠줘.
확인되지 않은 수치나 전망을 추가하지 말고 미확인으로 표시해줘.
이어서 같은 내용을 모바일 카드뉴스 6장 구성으로 줄여줘.
과거 자료의 기준일을 표지와 수치 옆에 표시해줘.
```

처음부터 18장이나 12장을 맞추려고 내용을 늘릴 필요는 없습니다. 주장과 근거가 자연스럽게 이어지는 최소 장수로 초안을 만든 뒤 부족한 설명만 보충합니다.

## 3. HTML에서 역할을 나누기

공통 CSS는 여백·글꼴·카드 크기를, 테마는 색상과 시각적 분위기를, 실행 스크립트는 슬라이드 이동을 담당하도록 나눕니다. 실제 파일 이름과 실행 방법은 프로젝트마다 다르므로 이 사례의 경로를 모든 도구의 필수 구조로 이해하지 않습니다.

표지·주장·비교·결론 레이아웃을 먼저 정하면 새 날짜의 자료로 바꿀 때도 디자인을 처음부터 만들 필요가 없습니다. 다만 숫자·출처·시점·결론은 새 자료에 맞춰 다시 검증해야 합니다.

## 4. 작은 실습: 3장으로 시작하기

1. 원문에서 핵심 주장을 하나 고릅니다.
2. 표지 / 근거 / 의미의 3장으로 구성합니다.
3. 브라우저에서 이전·다음 이동과 글자 잘림을 확인합니다.
4. 같은 내용을 세로형 카드뉴스로 재배치합니다.
5. PNG로 캡처했다면 캡처본에서도 작은 글자와 출처를 확인합니다.

```text
이 3장 구성으로 정적 HTML 발표자료를 만들어줘.
왼쪽·오른쪽 화살표 키로 이동할 수 있게 하고 장 번호를 보여줘.
모션을 줄이도록 설정한 사용자에게는 전환 애니메이션을 줄여줘.
외부 이미지가 없어도 읽을 수 있는 도형과 텍스트 중심으로 구성해줘.
```

## 검증과 다음 작업

프로젝트 문서에서 남은 일은 다음 목표 결정, 다른 날짜 자료로 재제작할지 결정, 테마 고정 여부 결정입니다. 재사용하기 전 **실행·수정·출력 방법을 README에 남기는 것**부터 권합니다.

체크할 항목은 날짜와 출처 일치, 수치 합계, 장 번호, 키보드 이동, 작은 화면에서의 넘침, PNG와 HTML 간 내용 일치입니다. 투자·시장 자료의 과거 사례를 현재의 매매 판단으로 바꾸지 않습니다.

## 출처와 연결 학습

- 제공 문서: 「프로젝트 현황 · HTMLPPT」, 점검일 2026-10-02. 폴더 기반 초안이라는 한계를 유지해 정리했습니다.
- [4일차: 지식관리와 AI 슬라이드](/lessons/day-4/)
- [Claude 모션그래픽 실습](/practice/claude-motion/) — 정적 장면을 시간 축으로 확장합니다.