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

무엇을 배우나요?

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

제공 문서로 보는 프로젝트

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

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

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

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

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

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

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

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

3. HTML에서 역할을 나누기

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

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

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

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

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

검증과 다음 작업

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

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

출처와 연결 학습

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