AidenAI
← 가이드 목록

html-ppt-skill — 스킬 하나로 만드는 발표자료

▶ 원본 영상 보러가기
목차

애니메이션 효과는 말 한마디로, 테마는 실시간으로 갈아입히고, 발표자 모드를 켜면 발표 대본까지 화면에 띄워주는 발표자료 — 디자인 감각이 없어도 스킬 하나로 만드는 방법을 설치부터 사용법까지 정리한 가이드입니다. 영상에서 사용한 설치 명령어, 요청 프롬프트, 단축키를 전부 담았습니다.

📺 영상 채널: Aiden의 친절한 AI (https://www.youtube.com/@Aiden_channel)

이 가이드로 하는 것

  1. html-ppt-skill가 어떤 방식으로 발표자료를 만드는지 이해한다
  2. 한국어 최적화 버전을 명령어 한 줄로 설치한다
  3. 블로그 글 하나로 차트·애니메이션·발표 대본이 포함된 발표자료를 만든다
  4. 단축키로 테마 변경, 전체 보기, 발표자 모드를 다룬다
  5. 같은 내용으로 인스타그램 카드뉴스까지 뽑아낸다

준비물

  • Node.js (설치 명령어 npx 실행에 필요 — 없다면 아래 ‘부록: Node.js 설치’ 참고)
  • Claude Code (영상에서는 클로드 데스크탑 앱의 코드 탭으로 진행)

시작 전에 ① — 이 스킬은 어떻게 다른가

html-ppt-skill은 lewislulu(루이스룰루)라는 분이 오픈소스로 공개한 스킬입니다.

AI 에이전트에게 발표자료를 부탁하면 보통 빈 화면에서 슬라이드 구조와 디자인을 매번 새로 지어냅니다. 그래서 만들 때마다 톤이 달라지고 레이아웃도 들쭉날쭉하죠. html-ppt-skill의 접근은 다릅니다.

⭐ 검증된 테마 36개와 레이아웃 31개를 미리 깔아두고, AI가 새로 디자인하는 대신 골라서 조립하게 만듭니다. 항상 백지가 아니라 검증된 부품을 복사해서 시작하니까, 몇 번을 만들어도 레이아웃이 무너지지 않습니다.

그리고 이 발표자료의 정체는 사실 웹페이지입니다.

  • 모든 기능이 순수 HTML/CSS/JS — 우리가 매일 보는 웹페이지를 만드는 재료들 — 로 만들어졌고,
  • “빌드가 필요 없다” = 조립이 필요 없는 완제품. 결과물이 그냥 파일 하나라서, 더블클릭하면 브라우저에서 바로 열립니다. 파워포인트 같은 프로그램 없이 브라우저만 있으면 어떤 컴퓨터에서든 돌아갑니다.

시작 전에 ② — 부품함에 뭐가 들어있나

구성 개수 무엇인가
테마 36개 완성된 슬라이드에 그때그때 갈아입혀 볼 수 있는 ‘옷’ — 디자인 세트
풀덱 템플릿 15개 여러 장이 통째로 완성돼 있는 발표자료 세트. 제품 발표용, 기술 공유용, 주간 보고용, 투자 피칭용, 강의 자료용, 인스타 카드뉴스 형태까지. 이 중 8개는 실제 발표자료에서 추출한, 실전 검증을 거친 뼈대
레이아웃 31개 슬라이드 한 장 한 장의 ‘부품’. 표지, 목차, 글머리표, 비교, 타임라인, 로드맵, 팀 소개, 감사 인사 — 발표자료에 들어가는 페이지 유형이 전부 미리 제작됨
애니메이션 47개 CSS 애니메이션 27가지(글자·이미지의 등장 방식 — 스르륵, 밀려 들어오기, 차례로 나타나기) + 캔버스 효과 20가지(화면 전체 특수효과 — 폭죽, 매트릭스 코드, 은하수, 살아 움직이는 지식 그래프)

⭐ 레이아웃 중 특히 좋은 건 차트 전용 레이아웃 — 막대·선·파이·레이더 차트가 따로 준비돼 있습니다. 발표자료에서 제일 귀찮은 게 수치를 그래프로 만드는 일인데, 자료에 숫자가 들어있으면 AI가 이 부품을 꺼내 그래프까지 알아서 그려줍니다.

💡 이 숫자들, 하나도 외울 필요 없습니다. 우리가 공부할 카탈로그가 아니라 AI가 쓰는 부품함이에요. 우리는 “차분한 보고서 느낌으로 해줘”, “표지에 어울리는 애니메이션 넣어줘”라고 말만 하면, 어떤 부품을 쓸지는 AI가 알아서 고릅니다.

시작 전에 ③ — 한국어 최적화 버전

이 스킬은 중국 개발자분이 만든 것이라, 원본을 그대로 설치하면 한글이 어색하게 표시되는 문제가 있습니다. 원본에 한글 폰트가 등록돼 있지 않아 생기는 문제인데요.

그래서 이 채널에서 한국어 최적화 버전을 준비했습니다.

  • 36개 테마 전부에 한글 폰트 적용
  • “피피티”, “발표자료”, “카드뉴스” 같은 한국어 요청에도 스킬이 잘 발동되도록 한국어 트리거 키워드 추가
  • 원본의 모든 기능은 그대로, 한글 사용에 불편한 부분만 손본 버전

이 가이드의 설치는 한국어 최적화 버전 기준으로 진행합니다.

STEP 1. 설치

터미널에서 이 한 줄만 입력하면 됩니다.

npx skills add https://github.com/aiden-44/html-ppt-skill

💡 command not found가 나온다면 Node.js가 설치되지 않은 것입니다 — 아래 ’부록: Node.js 설치’를 먼저 진행한 뒤 다시 입력하세요.

이어지는 설치 옵션은 이렇게 선택합니다.

단계 선택
어느 AI 도구에 설치할지 스페이스바로 Claude Code 체크 → 엔터
설치 범위 기본값 Project에서 아래 방향키로 Global로 변경 → 엔터 (어느 폴더에서든 스킬을 쓸 수 있게)
다음 화면 권장값이 이미 선택돼 있으니 그대로 엔터
설치 확인 Yes 선택 → 설치 완료

⚠️ 첫 단계에서 스페이스바로 체크하지 않고 엔터만 치면 설치가 안 됩니다. 꼭 스페이스바로 체크한 뒤 넘어가세요.

STEP 2. 발표자료 만들기

클로드 데스크탑 앱 → 코드 탭으로 이동해 요청합니다. 영상에서 사용한 프롬프트입니다 (URL만 바꿔 쓰세요).

https://www.anthropic.com/news/claude-opus-5
이 블로그 내용으로 10장 내외의 한국어 발표자료 만들어줘.
수치가 나오는 부분은 차트나 그래프로 시각화해주고,
텍스트는 너무 많이 들어가지 않게 해줘.
표지에는 주제와 어울리는 애니메이션 효과를 넣어주고, 발표 대본도 작성해줘.

몇 분 기다리면 index.html 파일과 발표 대본이 만들어집니다. 더블클릭해 브라우저에서 열어보세요.

💡 영상에서는 블로그 글 하나로 시연했지만, 이미 정리해둔 원고·문서·회의록·강의 자료·논문을 첨부해서 요청하면 훨씬 디테일한 발표자료를 만들 수 있습니다.

STEP 3. 단축키로 다루기

완성된 발표자료(브라우저)에서 쓰는 단축키입니다.

슬라이드 이동

키 기능
← → Space PgUp PgDn 슬라이드 앞뒤로 넘기기
Home / End 첫 슬라이드 / 마지막 슬라이드로 바로 이동

화면과 모드

키 기능
F 전체 화면
S 발표자 모드 ⭐ — 현재 슬라이드 + 다음 슬라이드 + 타이머 + 작성된 대본을 별도 창에
R 타이머 리셋 (발표자 모드 창에서) — 발표 연습할 때 유용
N 퀵 노트 서랍 — 화면 하단에 메모 공간 열기
O 전체 보기 — 전체 슬라이드가 격자로 한눈에 펼쳐짐
T 테마 변경 — 다른 테마로 갈아입히며 실시간 비교 (발표자 모드 창에도 동기화)
A 데모 애니메이션 — 현재 슬라이드에 애니메이션 효과를 하나씩 돌려가며 미리보기

URL 팁

주소 뒤에 붙이기 기능
#3 (슬라이드 번호) 해당 슬라이드로 바로 열리는 링크 — 특정 장을 공유할 때
?preview=3 미리보기 전용 모드 — 그 슬라이드 한 장만, 조작 UI 없이 표시

💡 발표 자리에서는 F로 전체 화면을 만들고 S로 발표자 모드 창을 띄운 뒤, 청중용 화면과 발표자 화면을 나눠 쓰면 됩니다. T로 바꾼 테마가 발표자 모드 창에도 함께 반영되니, 리허설 때 미리 테마를 정해두세요.

STEP 4. 카드뉴스 만들기

풀덱에 있던 카드뉴스 형태도 요청 한 번으로 만들 수 있습니다. 영상에서 사용한 프롬프트입니다.

방금 만든 발표자료 내용을 기반으로, 인스타그램에 올릴 카드뉴스 만들어줘.
3:4 세로 비율로 6~8장, 한 장에 핵심 메시지 하나씩만 담아줘.

잠시 기다리면 카드뉴스 형태의 슬라이드가 만들어지고, png 폴더에 각 슬라이드가 이미지 파일로 저장됩니다 — 인스타그램 같은 SNS에 바로 업로드할 수 있는 상태로요.

어디에 쓰고, 어디엔 안 맞나 ⭐

이 발표자료의 정체는 웹페이지라는 점에서 갈립니다.

상황 판정
회사에 pptx 파일 자체를 제출해야 하는 상황 ❌ 이 스킬은 답이 아닙니다 — 결과물을 파워포인트로 변환해주는 기능이 없습니다
팀 공유, 세미나, 강의, 스터디처럼 화면을 띄워놓고 발표하는 자리 ⭕ 파일 하나 보내거나 링크로 여는 거라 준비할 게 없음
이미지로 뽑아 쓰는 SNS 콘텐츠 ⭕ png 저장까지 자동
발표 대본까지 필요한 실전 발표 ⭕ 발표자 모드 + 대본 + 타이머

⚠️ 발표 전 체크: 파일은 오프라인에서도 열리지만 폰트는 인터넷에서 불러오는 구조입니다. 인터넷 연결이 불안하면 글꼴이 바뀌어 모양이 달라질 수 있으니, 발표 직전에 인터넷이 되는 상태로 미리 한 번 열어두세요.

정리

구분 내용
스킬 html-ppt-skill (lewislulu, 오픈소스) + 한국어 최적화 버전
방식 백지 디자인이 아니라 검증된 부품(테마 36 · 풀덱 15 · 레이아웃 31 · 애니메이션 47) 조립
결과물 HTML 파일 하나 — 브라우저만 있으면 어디서든 열림, pptx 변환은 불가
핵심 기능 차트 자동 생성, 테마 실시간 변경(t), 발표자 모드(s), 카드뉴스 png 출력

부록 — Node.js 설치

설치 명령어(npx)를 쓰려면 Node.js가 필요합니다. 없다면:

  1. https://nodejs.org 접속 → LTS 버전 다운로드 버튼 클릭 (내 OS에 맞는 설치 파일이 자동으로 제공됩니다)
  2. 내려받은 설치 파일 실행 → 기본 옵션 그대로 다음·다음으로 설치
  3. 설치가 끝나면 터미널을 새로 열고 아래 명령어로 확인:
node -v

버전 번호(예: v22.x.x)가 나오면 준비 완료입니다. 이제 STEP 1의 설치 명령어를 입력하세요.

💡 설치했는데도 command not found가 나온다면, 열려 있던 터미널을 닫고 새로 여는 것부터 해보세요. 설치 전에 열어둔 터미널은 새 명령어를 인식하지 못합니다.

참고 링크

Aiden의 친절한 AI

다른 가이드

어사이드(Aside) 브라우저 — 브라우저 업무를 AI에게 맡기기

클로드 코드 — 같은 요금제로 더 많이 쓰는 법

헤르메스 봇 모드 — 내 컴퓨터에 AI 팀 만들기

AidenAI 회원이 되어주세요

새 가이드와 강의 소식을 가장 먼저 받아보실 수 있습니다.