연도를 누르면 그래프가 바뀌고, 항목을 선택하면 상세 설명이 열리는 발표 자료가 있다. 장표를 계속 넘기는 대신 한 화면에서 질문에 맞춰 정보를 보여주는 HTML 슬라이드다. 브라우저에서 움직이는 작은 웹페이지를 발표 자료로 쓰는 방식이라고 이해하면 쉽다.
에이커의 영상은 ChatGPT와 Claude로 초안을 만들고, 내용을 수정한 뒤 모션그래픽을 더하는 과정을 보여준다. 따라 할 때 중요한 것은 효과를 많이 넣는 일이 아니다. 자료의 정확성, 편집한 내용의 저장, 실제 발표 환경에서의 실행까지 연결해야 쓸 수 있는 결과물이 된다.
HTML 슬라이드는 언제 유용한가
HTML 슬라이드는 HTML로 내용을 구성하고, CSS로 모양을 정하며, JavaScript로 클릭과 화면 변화를 연결한다. 발표자가 선택한 조건에 따라 차트·문구·이미지를 함께 바꾸거나, 본문 위에 상세 패널을 띄우는 식으로 만들 수 있다.
고객이 관심 있는 사양을 골라 설명해야 하는 미팅, 연도·분야별 실적을 비교하는 보고, 질문에 따라 순서를 바꾸는 교육에서 검토할 만하다. 반면 제출 형식이 PPTX나 PDF로 정해져 있다면 그 요건이 먼저다. HTML 파일을 만들었다고 제출 가능한 PPTX가 함께 생기는 것은 아니다.
영상에 나오는 테슬라 자료는 기능을 설명하는 시연 화면이다. 이 글은 화면 속 재무 수치나 차량 사양을 공식 자료와 대조한 기업 분석이 아니므로, 해당 숫자를 업무 자료에 그대로 옮겨 쓰지 않는 편이 좋다.
시작 전에는 자료·디자인·실행 조건을 나눈다
영상은 원천자료와 디자인 레퍼런스를 폴더에 모은 뒤 AI에 연결한다. 자료를 준비할 때는 역할을 구분하는 것이 좋다.
- 원천자료: 보고서·표·설명 문서 등 실제 내용을 확인할 파일이다. 수치의 연도·단위·출처를 분명하게 둔다.
- 디자인 참고자료: 색상·배치·강조 방식의 기준이다. 참고 화면의 문구나 수치를 사실 자료처럼 사용하지 않도록 구분한다.
- 폰트와 이미지: 사용할 글꼴과 이미지의 이용·배포 조건을 확인한다. 무료 검색 결과라는 이유만으로 모든 용도를 허용한다고 판단하지 않는다.
- 발표 조건: 화면 비율, 인터넷 연결, 청중의 기기, 제출 형식, 공개 가능한 정보의 범위를 미리 정한다.
영상 설명란에는 원본 마스터 프롬프트와 참고 링크가 공개돼 있다. 아래 예시는 그 문구를 그대로 옮긴 것이 아니라, 저장·검수·배포 조건을 보강해 재구성한 요청안이다.
ChatGPT와 Claude의 화면은 같지 않다
영상에서는 ChatGPT Work의 Sites와 Claude의 작업 폴더 연결 방식을 사용한다. 모델 이름과 추론 설정은 영상 당시의 선택이다. 그 조합이 모든 계정에서 제공되거나, 언제나 가장 좋은 결과를 낸다는 뜻은 아니다.
OpenAI의 공식 Sites 안내는 웹의 Work와 데스크톱 앱의 Work 또는 Codex에서 사이트를 만들 수 있다고 설명한다. 따라서 HTML 슬라이드를 만들려면 무조건 데스크톱 앱을 설치해야 한다고 일반화할 필요는 없다. 다만 내 PC의 특정 폴더를 직접 활용하는 방식과, 웹에서 자료를 첨부하는 방식은 구분해야 한다.
Claude도 공식 Cowork 안내에서 작업 환경과 로컬 파일 접근 조건을 나눠 설명한다. 연결한 폴더를 쓴다고 AI 작업 전체가 내 PC 안에서만 처리되는 것은 아니다. 민감한 자료는 사용 중인 서비스·조직의 허용 범위를 먼저 확인하자.
또한 무료로 제공되는 프롬프트와 무료로 실행할 수 있는 서비스는 다른 문제다. 실제 이용 가능 기능과 사용량은 계정의 현재 조건을 확인해야 한다.
1단계: 효과보다 내용 구조를 먼저 만든다
초안에서는 발표 목적과 장표별 메시지를 먼저 정한다. 처음부터 모든 모션과 연동 기능을 한 번에 요구하면 무엇이 잘못됐는지 찾기 어려워진다.
다음은 교육사업 설명회를 예로 든 요청안이다. 특정 기관의 실제 사례나 성과 수치를 전제하지 않는다.
첨부한 원천자료로 교육사업 설명회용 HTML 발표 자료를 구성해 줘.
청중은 처음 내용을 접하는 실무자이며, 7장 안팎으로 정리해 줘.
먼저 각 장의 핵심 메시지와 사용할 근거를 제안한 뒤 구현해 줘.
수치에는 원본의 연도·단위·출처를 붙이고, 없는 값은 만들지 말아 줘.
디자인 참고자료는 색상과 배치의 기준으로만 사용해 줘.
본문을 읽기 쉬운 크기로 배치하고 한글 단어가 과도하게 끊기지 않게 해 줘.
인터랙션을 사용하지 않아도 핵심 내용을 이해할 수 있게 해 줘.
외부 폰트·라이브러리·이미지 의존성과 실행에 필요한 파일을 알려 줘.
초안이 나오면 장표별 메시지가 겹치는지, 한 장에 내용이 몰렸는지, 출처와 단위가 빠졌는지를 본다. 오류가 있는 자료를 화려하게 움직이게 만드는 것보다 이 단계의 수정이 우선이다.
2단계: 화면 편집과 파일 저장을 구분한다
영상은 글자를 직접 클릭해 바꾸는 편집 모드를 시연한다. 이런 기능을 요청하면 문구를 고칠 때마다 대화창에 지시할 필요가 줄어든다.
다만 브라우저에서 글자가 바뀌는 것과 원본 HTML 파일에 저장되는 것은 별개다. MDN의 contenteditable 설명은 요소를 편집할 수 있게 하는 속성을 다룬다. 그 속성을 넣는 것만으로 파일 저장 기능까지 생기는 것은 아니다.
따라서 편집 모드를 요청할 때는 저장 방식도 함께 지정하는 편이 좋다.
문구를 직접 바꿀 수 있는 편집 모드를 추가해 줘.
편집 중인 내용과 배포할 파일을 구분해 줘.
수정이 끝나면 변경 내용을 포함한 최종 HTML을 내보낼 수 있게 해 줘.
내보낸 파일을 새로 열어도 문구가 유지되는지 확인할 절차를 알려 줘.
발표 모드에서는 편집 버튼과 입력 영역을 숨겨 줘.
브라우저의 localStorage에 저장하는 방식도 파일 내보내기와 같지는 않다. MDN은 파일을 직접 여는 file: 환경에서 동작이 브라우저마다 달라질 수 있다고 설명한다. 같은 파일을 다른 PC로 옮겨 열 때도 수정 내용이 남는지 직접 확인해야 한다.
검수는 단순하다. 문구를 고치고, 최종본을 저장하거나 내보낸 뒤, 창을 닫고 그 파일을 다시 연다. 배포할 파일과 참고 이미지·영상이 모두 포함돼 있는지도 함께 본다.
3단계: 연동 효과는 선택·변화·근거를 함께 지정한다
영상의 연동 효과는 연도나 레버를 선택하면 관련 정보가 바뀌는 방식이다. 중요한 것은 레버 자체가 아니라 어떤 선택이 어떤 데이터와 설명을 바꾸는지다.
다음처럼 동작과 검수 조건을 함께 요청할 수 있다.
원천자료에 있는 연도를 선택하면 같은 장의 차트·요약 문구·단위가 함께 바뀌게 해 줘.
선택된 연도를 명확하게 표시하고, 자료가 없는 값은 확인 필요로 표시해 줘.
차트의 축과 비교 기준을 임의로 바꾸지 말아 줘.
마우스뿐 아니라 키보드와 터치로도 선택할 수 있게 해 줘.
모션을 꺼도 데이터와 핵심 설명은 읽을 수 있게 해 줘.
수치를 움직이게 만드는 효과도 검수 대상이다. 애니메이션이 끝난 최종 값이 원천자료와 일치하는지, 작은 차이를 과장하는 축을 쓰지 않았는지 확인하자. Chart.js 같은 차트 도구의 애니메이션 옵션은 표현 방식이지 데이터 정확성을 보증하는 기능이 아니다.
상세 패널도 마찬가지다. 어느 항목을 누르면 무엇이 열리는지, 어떻게 닫는지, 닫은 뒤 원래 맥락으로 돌아오는지를 정한다. 마우스를 대야만 중요한 정보가 나오는 구성은 터치 기기나 발표용 조작 환경에서도 쓸 수 있는지 확인해야 한다.
모션그래픽은 HTML 애니메이션과 영상 파일을 구분한다
영상은 참고 영상을 보여주고 주제와 길이를 지정한 뒤, 만들어진 모션그래픽을 슬라이드에 추가하는 흐름을 소개한다.
여기서 먼저 정할 것은 산출물의 형식이다. 브라우저에서 실행되는 애니메이션 장면인지, 다른 프로그램에서도 재생할 MP4 파일인지 구분해야 한다. 코드가 움직이는 미리보기가 나온 것과 영상 파일이 실제로 만들어진 것은 같지 않다.
아래는 결과 형식까지 명시하는 요청안이다.
발표의 핵심 메시지를 요약하는 짧은 모션 장면을 만들어 줘.
참고 영상에서는 화면 전환과 리듬만 참고하고 고유 이미지·로고·음원을 그대로 복제하지 말아 줘.
결과물이 HTML 애니메이션인지 영상 파일인지 먼저 밝혀 줘.
MP4로 제공한다면 파일과 재생 조건을 함께 알려 줘.
발표 자료의 마지막 장에 넣고 재생·일시정지 버튼을 제공해 줘.
자동재생이 차단되면 눌러서 시작할 수 있게 해 줘.
특히 소리가 있는 미디어는 브라우저의 자동재생 정책에 막힐 수 있다. MDN도 유음 미디어의 자동재생 제한과 사용자 조작에 따른 차이를 설명한다. ‘페이지가 열리면 소리까지 자동으로 나온다’는 전제보다 수동 재생 수단을 함께 두는 편이 안전하다.
폰트가 안 깨지고 오프라인에서도 된다는 말의 조건
HTML은 여러 기기에서 열 수 있지만, 환경 차이가 자동으로 사라지지는 않는다. 웹폰트·외부 이미지·차트 라이브러리를 인터넷에서 불러오면 연결이 끊겼을 때 결과가 달라질 수 있다.
오프라인 사용을 원한다면 필요한 자산을 함께 묶고, 폰트를 포함·배포할 수 있는지 확인해야 한다. 폰트를 불러오지 못했을 때 쓸 대체 글꼴도 정한다. 최종적으로는 실제 발표 PC에서 네트워크를 끊고 열어보는 검수가 필요하다.
로컬 HTML 파일이라는 이유만으로 기밀 자료가 안전하다고 단정해서도 안 된다. 외부 스크립트와 요청이 남아 있는지, 포함된 데이터가 무엇인지 확인해야 한다. 생성 단계의 자료 제공 범위와 완성본을 실행할 때의 통신은 별도로 살펴보자.
공유 링크는 발표 전에 다른 계정으로 열어본다
영상은 파일을 직접 열거나 공유 링크로 접근하는 두 가지 방식을 보여준다. 둘 중 무엇이든 실제 수신자 조건에서 확인해야 한다.
Claude의 현재 공식 안내는 Artifacts의 생성 방식과 공유 유형에 따라 접근 조건을 나눈다. 새 Artifacts와 legacy artifact의 공개 방식이 같지 않으며, 로그인과 조직 설정의 영향도 있다. 모든 공유 링크를 ‘주소만 알면 계정 없이 누구나 열 수 있는 페이지’로 이해하면 안 된다.
발표 전에는 본인이 로그인한 창만 보지 말고, 다른 계정이나 시크릿 창에서 열어보자. 사내 자료라면 공개 링크를 만드는 대신 승인된 전달·저장 방식을 사용해야 한다.
최종 발표 전 확인할 여섯 가지
- 내용: 숫자·연도·단위·출처가 원문과 맞는가.
- 저장: 편집 후 내보낸 최종 파일을 다시 열어도 수정이 남는가.
- 조작: 클릭·키보드·터치에서 주요 기능을 사용할 수 있는가.
- 실행: 실제 발표 PC와 네트워크 조건에서 폰트·차트·영상이 나오는가.
- 공유: 수신자에게 필요한 권한이 있고, 불필요하게 공개된 정보는 없는가.
- 제출: 요구하는 PDF·PPTX가 있다면 해당 형식의 별도 결과물을 검수했는가.
HTML 슬라이드의 장점은 움직임 자체보다 질문에 맞춰 설명의 깊이를 조절할 수 있다는 데 있다. 발표 자료의 본질은 소통이다. 효과를 모두 넣기보다 메시지를 이해시키는 데 필요한 것부터 선택하자.
함께 읽으면 좋은 글
- Claude for PowerPoint 사용법: 회사 템플릿 그대로 AI PPT 만드는 법
- AI 웹디자인 워크플로우: ChatGPT 시안과 Claude Design 활용
- AI 코딩 인지 부채: 결과물보다 먼저 확인할 이해와 검증
참고자료
- 에이커, HTML 슬라이드·모션그래픽 제작 영상과 원본 프롬프트
- OpenAI, ChatGPT Sites 제작·공유 안내
- Anthropic, Cowork 사용 환경과 로컬 파일 접근
- Anthropic, Artifacts 공유·공개 안내
- MDN, 화면 요소 편집을 위한 contenteditable
- MDN, localStorage와 파일 URL의 동작 조건
- MDN, 미디어 자동재생 정책
- Chart.js, 차트 애니메이션 설정
- 눈누, 폰트 탐색과 개별 이용 조건 확인
본문 이미지는 에이커 영상의 설명·시연 장면을 해설 목적으로 인용했다. 영상의 작업 흐름과 공식 문서의 조건, 이 글에서 보강한 실무 요청안을 구분했다. 공식 안내 확인 기준일은 2026년 11월 1일이며, 동일한 슬라이드를 독립 제작해 도구별 성능을 비교한 실험은 아니다.
FAQ
HTML 슬라이드를 만들려면 코딩을 배워야 하나요?
AI에 구성과 동작을 설명해 초안을 요청할 수 있다. 다만 결과물의 데이터·저장·공유·실행 조건을 확인하는 책임까지 없어지지는 않는다. 처음에는 정적 초안을 만든 뒤 한 가지 기능씩 추가하는 편이 검수하기 쉽다.
HTML이면 폰트가 깨지지 않고 인터넷 없이 실행되나요?
자동으로 보장되지 않는다. 외부 폰트·이미지·라이브러리 의존성을 확인하고, 필요한 자산을 포함한 뒤 실제 환경에서 오프라인으로 열어봐야 한다. 폰트의 포함·배포 조건도 확인해야 한다.
화면에서 글자를 고치면 원본 파일에도 저장되나요?
편집 기능의 구현에 따라 다르다. 화면 수정만 되는지, 브라우저에 저장하는지, 변경된 HTML을 내보내는지 구분해야 한다. 저장 후 최종 파일을 다시 여는 방법으로 확인하자.
HTML 슬라이드로 PPT를 완전히 대체할 수 있나요?
상황에 따라 선택해야 한다. 상호작용이 필요한 미팅에는 검토할 만하지만, 기관·고객의 제출 규격이 PPTX나 PDF라면 그 형식을 충족하는 별도 산출물과 검수가 필요하다.