2026년에도 PPT를 열고 있다면: Codex로 30분 만에 끝내는 HTML 덱

2026년입니다. 아직 PowerPoint로 발표 자료를 만들고 있다면 툴 스택이 2003년에 멈춰 있는 셈입니다. .pptx 포맷은 2007년에 정해졌고, 협업 모델은 여전히 「파일을 메일로 보낸다」이고, AI 통합이라는 건 리본 메뉴에 버튼 하나 끼워 넣은 수준입니다 — 1990년대에 오프라인 인쇄용 슬라이드를 위해 설계된 물건이 2026년의 워크플로를 억지로 떠받치고 있습니다.

엔지니어들은 진작에 갈아탔습니다. HTML 슬라이드 — 파일 하나, 브라우저에서 바로 열림, git으로 버전 관리, 그림은 AI가 그 자리에서 생성. 이게 비개발 직군까지 퍼지지 않았던 건 걸림돌이 세 개 있었기 때문입니다. 레이아웃 짜는 데 시간이 걸리고, 그림은 직접 그리거나 클립아트를 뒤져야 했고, 이미지 안에 한글을 넣으면 네모로 깨졌습니다.

2026년 들어 이 세 개가 codex + gpt-image-2로 거의 정리됐습니다. 이 글은 개요 하나를 30분 만에 발표 가능한 HTML 덱으로 바꾸는 순서입니다.

알아둘 만한 HTML 슬라이드 스택 4개

「정답」은 없습니다. 본인이 이미 일하는 방식에 맞는 걸 고르면 됩니다.

1. Slidev — Vue 기반. 슬라이드를 Markdown에 쓰고 ---로 페이지를 나눕니다. 코드 하이라이팅, 한 줄씩 reveal, 살아 있는 컴포넌트 삽입까지 기본 지원. HTML / PDF / SPA / PPTX로 내보낼 수 있습니다. 덱에 코드가 들어간다면 이걸 고르세요.

2. reveal.js — 원조. 순수 HTML/CSS/JS 위에 얇은 슬라이드 프레임워크만 얹은 형태. 플러그인 생태계가 제일 넓습니다. 제어권을 최대로 쥐고 싶고 HTML을 직접 쓰는 게 싫지 않다면.

3. Marp — Markdown만 받습니다. JS 프레임워크 없고 테마도 정해진 대로. VS Code 확장에서 실시간 미리보기가 됩니다. 「타이핑하면 덱이 나온다」, 그 이상의 격식이 필요 없다면.

4. html-ppt-skill — 프레임워크가 아니라 Claude/Codex용 에이전트 스킬입니다. 테마 24종과 레이아웃 31종이 이미 들어 있고, 내용에 따라 에이전트가 슬라이드마다 레이아웃을 고릅니다. 레이아웃 선택까지 AI에 맡기고 싶다면.

실전에서는 코드가 들어가는 발표엔 Slidev, 레이아웃 다양성이 더 중요한 업무용 덱엔 html-ppt-skill 조합이 흔합니다.

GPT-Image-2가 바꾼 것

HTML 슬라이드의 진짜 병목은 늘 그림이었습니다. GPT-Image-2(2026-04-21 공개)가 슬라이드와 직결되는 두 가지를 해결했습니다:

1. 다국어 문자를 글자 단위로 정확하게 씁니다 — 한국어, 중국어, 일본어 포함. 막대그래프 라벨에 「매출 비중」이라고 적으면 네모 상자가 아니라 그대로 나옵니다. 지금까지 한글 들어간 도표를 AI로 못 뽑던 이유가 이거였습니다.
2. 에이전트형 레이아웃 추론 — 렌더링 전에 구도를 먼저 계획합니다. 「거의 맞는데 뭔가 아쉬운」 재시도가 줄어듭니다.

Codex는 세션 안에서 gpt-image-2를 바로 호출할 수 있습니다. 그림을 말로 설명하면 이미지가 작업 폴더에 떨어지고, 슬라이드 HTML에서 그 경로를 참조하면 끝입니다.

실전 순서

준비물: Codex CLI 또는 데스크톱 앱, 그리고 Codex를 통한 gpt-image-2 접근 권한(일반 ChatGPT Plus / Pro 요금제, 또는 같은 API를 중계하는 서비스). 개요는 아무 형태나 괜찮습니다 — 불릿, Notion 문서, 회의 녹취록. 처음엔 60분쯤, 한 번 해 보고 나면 30분 선에서 안정됩니다.

Step 1 — 개요를 Codex에 넘긴다. Codex 세션을 열고:

12분짜리 사내 발표 개요야. 주제는 <주제>. 이걸 Slidev 덱으로 만들어 줘. 개요의 큰 항목 하나당 슬라이드 한 장. 그림이 있으면 좋을 자리는 자리표시자만 남겨 줘 — 그건 2단계에서 채울 거야.

돌아온 걸 한 번 읽습니다. 이 단계에서 볼 건 구조지 마감이 아닙니다 — 슬라이드 순서가 실제로 말할 순서와 같습니까? 아니면 그냥 말하면 됩니다: 「4번 슬라이드를 2번 앞으로 옮겨 줘」.

Step 2 — 같은 세션에서 그림을 뽑는다. 자리표시자마다 한 번씩:

N번 슬라이드에 들어갈 그림을 gpt-image-2로 만들어 줘. <설명>. 색은 크림색과 진한 남색으로. 그림 안에 들어가는 글자는 한국어로.

두 가지는 반드시 못 박아 말해야 합니다. (1) 색 — 기본값은 채도가 높은 쪽으로 흐릅니다. 지정하지 않으면 덱 톤으로 돌아오지 않습니다. (2) 글자 언어 — 말하지 않으면 덱이 온통 한국어여도 그림 속 글자는 영어로 나옵니다. 마음에 안 들면 손으로 고치지 말고 다른 버전을 요청하세요. 한 장에 대략 40~70원이니, 붙잡고 씨름하는 것보다 다시 뽑는 게 쌉니다.

Step 3 — 테마와 내용을 훑는다.

덱을 로컬에서 slidev dev로 띄우고 앞 3장 스크린샷 찍어 줘. 어디가 이상해?

단골 문제들: 제목이 넘침 → 제목을 줄인다. 그림이 슬라이드 밖으로 삐져나감 → 가로세로 비율을 조정한다. 코드가 안 보임 → 폰트를 키우거나 슬라이드를 나눈다.

Step 4 — 발표하고 내보낸다. 발표는 slidev dev(URL 뒤에 ?presenter를 붙이면 발표자 노트와 타이머가 나옵니다). PDF는 slidev export, 정적 SPA 배포는 slidev build. 받는 사람이 PowerPoint만 쓴다면 slidev export --format pptx로 편집 가능한 .pptx가 나옵니다(애니메이션은 날아갑니다).

변형

• 사내 기술 발표 — Slidev에 --listen을 붙이면 휴대폰으로 발표자 노트를 봅니다
• 임원 보고용 덱 — html-ppt-skill에 「executive theme」로 요청하고 마지막엔 PDF로(화면 공유가 안정적입니다)
• 녹화 강의용 덱 — reveal.js + chalkboard 플러그인. 슬라이드 위에 실시간으로 그릴 수 있습니다
• 데이터 시각화가 많은 덱 — Slidev에 Observable plot을 임베드하고, CSV를 Codex에 넘겨 plot spec을 쓰게 합니다

이 방식이 잘 못하는 것

• 무거운 애니메이션 — 클릭해서 하나씩 나타나는 정도는 깔끔합니다. 「왼쪽에서 날아 들어오기」부터는 들이는 품이 아깝습니다
• 여럿이 동시에 편집 — 본질이 git 안의 .md 파일 하나입니다. 팀이 구글 슬라이드에서 같이 커서를 놓고 일하는 문화라면 맞지 않습니다
• 한 번 쓰고 버릴 덱 — Gamma에 불릿 여섯 줄 넣는 게 빠릅니다

그래도 PPT(혹은 한쇼)가 이기는 경우

오해는 마세요. 세 가지 상황에서는 여전히 기존 도구가 답입니다:

1. 관공서·공공기관 제출 — 여기가 한국에서 제일 큽니다. 제출 양식이 아예 한글(.hwp)로 내려오고 한쇼로 받는 곳도 많습니다. HTML 파일은 접수 자체가 안 되고, .pptx로 내보내도 소용없습니다 — 애초에 .pptx를 원하는 게 아니니까요. 이 경우엔 처음부터 한글이나 한쇼로 만드는 게 맞습니다
2. 브랜드팀이 여백을 밀리미터 단위로 보는 자료 — Keynote / Figma로 손수 맞추는 게 그 일에 맞는 도구입니다
3. 받는 사람이 .pptx 더블클릭 말고는 안 하는 경우 — 이건 도구로 풀 문제가 아닙니다

그 밖의 상황이라면 HTML이 이깁니다.