H✨가
교사를 위한 슬라이드 도구 소개

PPT 말고
HTML 슬라이드

AI에게 말로 시키고, 한글 폰트까지 맞춰 둔 디자인 34종

k-slide.web.app
01 · 왜 HTML일까

링크 하나로 어디서나, 그래도 한계는 있어요

👍좋은 점

링크·파일 하나로 끝설치 없이 폰·태블릿·전자칠판 브라우저에서 그대로 열려요
글씨체가 파일 안에 있어요다른 컴퓨터에 폰트가 없어서 글자가 깨지는 일이 없어요
누르면 반응하는 수업 자료단계 버튼·퀴즈·빈칸 열기를 슬라이드 안에 넣을 수 있어요
AI가 가장 잘 만드는 형식코드라서 "제목 키워줘"처럼 말로 바로 고칠 수 있어요

⚠️아쉬운 점

PPT처럼 끌어서 고치기는 어려워요고칠 때는 AI에게 말로 부탁해요
PPT 파일이 꼭 필요하면 변환이 필요제출용 .pptx는 따로 만들어야 해요
AI가 만든 결과는 눈으로 확인글이 넘치거나 겹치지 않는지 보세요
02 · AI에게 잘 시키는 법

그냥 시키면 비슷비슷, 설계도를 주면 다릅니다

그냥 "슬라이드 만들어줘"

  • 보라색 그라데이션 + 같은 카드 배치
  • 한글 글꼴은 기본 고딕 그대로
  • 만들 때마다 모양이 들쑥날쑥
➜

디자인 명세(design.md)를 함께 주면

  • 색·글씨·배치·장식 규칙대로 만들어요
  • 34가지 개성 중에서 골라 쓸 수 있어요
  • 같은 설계도면 결과도 일정해요
원작에 우리가 더한 것
한글 폰트 짝디자인마다 제목·본문 폰트 지정
고정 무대1920×1080을 어느 화면에든 똑같이
수업용 부품단계 버튼·퀴즈·빈칸 열기
한 파일 지시서채팅 AI에 붙여 넣으면 끝
원작: zarazhangrui/frontend-slides (MIT 라이선스)
03 · 한글 슬라이드의 핵심은 폰트

같은 문장, 폰트만 바꿔 보세요

하루 동안 태양 고도,
그림자 길이, 기온의 관계
프리텐다드 — 어디에나 무난하고 읽기 편해요
364종 무료 한글 폰트(OFL) 중
117종을 골라서
34가지 디자인에 짝지었어요
04 · 직접 만든 갤러리

같은 수업 내용, 느낌은 34가지

누르면 그 디자인 장으로 가요 · 다음 장부터 하나씩 볼게요
block-framePaperlogy · Pretendard
8-bit-orbitMona12 · Orbit
biennale-yellow디필레이아 · Paperlogy
bold-posterKCC무럭무럭 · Cafe24
pin-and-paper운동장 · Pretendard
sakura-chromaCafe24 · Noto Sans
05 · 쓰는 법

세 걸음이면 내 수업 슬라이드

1

마음에 드는 디자인 고르기

갤러리에서 34가지를 훑어보고, 수업과 어울리는 하나를 골라요.

2

받기 .md를 AI에게 주기

ChatGPT·Claude·Gemini 같은 채팅 AI에 붙여 넣고, 수업 내용을 말해 주세요.

3

.html 열어서 발표

AI가 준 .html 파일을 브라우저로 열면 끝. 고칠 곳은 말로 부탁하세요.

코딩형 AI(에이전트)를 쓴다면 받기 .zip — 폰트 파일·예시 덱까지 한 묶음이에요.
06 · 마무리

마지막 퀴즈

한글 슬라이드를 예쁘게 만드는 데 가장 중요한 것은?
지금 바로 써 보세요
k-slide.web.app

디자인 고르기 → 받기 .md → AI에게 붙여 넣기

원작 zarazhangrui/frontend-slides (MIT) 기반
폰트는 OFL 등 무료 한글 폰트 · 라이선스는 받기 .zip의 README에
클릭해보세요!