HTML 슬라이드: AI로 만들고 휴대폰으로 발표하기

HTML 슬라이드란?

HTML 슬라이드는 웹페이지로 저장한 프레젠테이션입니다. 독립형 덱은 레이아웃, 이미지, 탐색 기능을 브라우저에서 열리는 파일 하나에 담습니다. AI로 만들면 PowerPoint, Canva, Figma Slides에서 다시 제작하지 않고 발표할 수 있습니다.

폴더, React 프로젝트, 호스팅된 미리보기 링크, PowerPoint 내보내기 대신 .html 파일 하나를 요청하세요. 브라우저가 슬라이드를 표시하고 HTML Slide Presenter가 임시 호스팅, 휴대폰 제어, 노트 불러오기를 추가합니다.

자료로 덱 만들기

청중, 전달할 내용, 발표 시간을 정하고 사용할 사실과 예시를 제공하세요. 5분 발표라면 문제, 유용한 예시, 다음 행동의 세 장으로 시작하세요.

[topic]에 관한 [audience] 대상의 독립형 HTML 슬라이드 덱을 만들어 주세요.
발표 시간: [minutes]분. 아래 자료의 사실만 사용하세요.
명확한16:9 레이아웃, 읽기 쉬운 텍스트, 인라인 CSS/JavaScript, 내장 자료를 사용하세요.
각 슬라이드에 section.slide를 쓰고 한 번에 정확히 하나만 .active 상태로 두세요.
이전/다음 버튼과 ArrowLeft/ArrowRight, Home 탐색을 포함하세요.
각 슬라이드에 script type="application/json" class="slide-notes"를 넣고
title, script(발표 원고), notes(짧은 항목 문자열 배열)를 포함하세요.
노트는 슬라이드에서 숨기고 전체 파일을 2 MB 미만으로 유지하세요.
프레임워크, 외부 글꼴, 원격 이미지, API 호출, 빌드 과정은 사용하지 마세요.
개요가 아닌 완전한 deck.html 파일을 제공하세요.
자료: [내용 붙여넣기]

Claude 또는 ChatGPT별 안내를 따라보세요. HTML Slide Presenter skill은 호환 도구에 쓸 수 있는 시작 파일과 검증 지침을 제공합니다. 일반 채팅에서는 프롬프트를 쓰면 됩니다.

작동하는 작은 예제 사용하기

세 장짜리 예제를 다운로드해 브라우저에서 열고 좌우 화살표 키를 눌러보세요. 각 슬라이드에는 짧은 발표 원고와 보조 항목이 있습니다. 글과 디자인을 바꾸기 전에 사본을 저장하세요.

기존 덱은 내용과 디자인을 유지하면서 빠진 자료를 내장하고 노트를 추가하도록 AI에 요청하세요. 변경 사항을 확인해야 합니다. AI 미리보기에서는 정상이어도 다운로드되지 않은 파일에 의존할 수 있습니다.

업로드 전에 파일 확인하기

• 다운로드한 파일을 로컬에서 열고 모든 슬라이드를 확인하세요. 텍스트, 대비, 이미지, 처음과 마지막 탐색 동작을 점검하세요.
• 네트워크를 끊고 다시 열어보세요. 독립형 덱이라면 핵심 내용이 그대로 표시되어야 합니다.
• 파일은 2 MB 미만으로 유지하세요. 큰 이미지를 압축하거나 장식 이미지를 단순한 도형으로 바꾸세요.
• 사실과 발표자 노트를 직접 확인하세요. 생성된 내용에는 근거 없는 주장이 들어갈 수 있습니다.

발표 방식 선택하기

휴대폰을 쓰려면 HTML Slide Presenter를 열고 파일을 업로드한 뒤 30분, 3시간, 1일 중 하나를 선택하고 봇 확인을 완료하세요. 표시 장치에서 발표 링크를, 휴대폰에서 QR 리모컨을 여세요. 설정 안내를 참고하세요.

무료 범위와 인터넷이 필요한 기능

Tiny Design Shop은 발표 구독, 앱 설치, 계정이 필요 없습니다. AI 도구에는 별도의 이용 조건과 사용량 제한이 있으며 무제한 무료 슬라이드 생성을 보장하지 않습니다.

덱은 임시 세션용으로 업로드됩니다. 휴대폰 리모컨에는 인터넷과 열린 발표 탭이 필요합니다. 로컬 백업을 보관하세요. 백업에는 휴대폰 동기화가 이어지지 않습니다. 행사에서는 컨퍼런스 체크리스트를 사용하세요.