AI 에이전트로 학습지 HTML 슬라이드 만들기
학습지는 이미 있는데, 수업 슬라이드는 왜 매번 처음부터 만들고 있나요?
학습지의 내용은 이미 준비되어 있습니다.
그런데 수업용 슬라이드를 만들 때는 문장을 다시 줄이고, 자료를 다시 배치하고, 화면마다 글자 크기를 맞추는 일을 반복합니다.
AI에게 “이 학습지로 슬라이드를 만들어 줘”라고 요청해도 문제는 쉽게 끝나지 않습니다.
- 맘에 들게 나오더라도 내용 구성이 바뀌면 재현하기가 어렵습니다
이번 연수에서는 완성본 한 벌을 얻는 데서 멈추지 않습니다.
학습지를 해석하고, 수업용 내용으로 편집하고, 화면 크기에 맞춰 자동으로 조절되는 HTML 슬라이드로 만들고, 결과를 확인하는 전 과정을 하나의 제작 흐름으로 연결합니다.
📌
9월 23일(수) 20:00~22:30 · 온라인 Zoom
실시간 참여가 어려운 신청자에게는 다시보기를 제공합니다.
Zoom 참여 정보는 신청할 때 입력한 전화번호로 보내드립니다.
슬라이드 제작이 오래 걸리는 이유는 디자인 감각이 부족해서가 아닙니다
복사하고 붙여 넣는 동안 내용의 관계가 사라집니다
학습지에는 제목, 설명, 질문, 사료, 출처, 이미지, 답안 공간이 서로 연결되어 있습니다. 하지만 문장을 화면별로 옮기기 시작하면 무엇을 함께 보여줘야 하는지 놓치기 쉽습니다.
AI가 내용을 이해하기 전에 화면부터 만들기 시작합니다
“예쁘게 만들어 줘”라는 요청만으로는 어떤 문장을 요약해야 하고, 어떤 원문은 그대로 보존해야 하는지 판단할 기준이 없습니다. 결국 보기 좋은 임의의 요약문과 내부 작업용 문구가 섞입니다.
자동 생성이 끝나도 검수 기준이 없습니다
파일이 열리고 화면이 나왔다고 해서 수업에서 사용할 수 있는 것은 아닙니다. 일반 창과 전체화면에서 모두 읽히는지, 원문이 빠지지 않았는지, 이미지와 질문이 같은 맥락을 유지하는지 확인해야 합니다.
💡
문제는 AI의 성능이 아니라, 원문과 완성 화면 사이의 제작 단계가 비어 있기 때문입니다.
한 번의 생성이 아니라, 다음 자료에도 반복할 수 있는 흐름을 만듭니다
1. 원문을 읽고 관계를 분리합니다
소제목, 설명문, 문항, 인용, 출처, 이미지가 어떤 순서와 관계로 연결되는지 먼저 확인합니다.
2. 내용을 수업 화면에 맞게 편집합니다
설명문은 소제목 단위의 핵심 항목으로 줄입니다. 반면 사료, 선언문, 법조문처럼 원문이 중요한 자료는 함부로 요약하지 않습니다.
3. 반복해서 쓸 화면 형식을 정합니다
제목, 질문, 비교, 흐름, 인용, 이미지, 답안 공간을 미리 정한 화면 형식에 연결합니다.
4. 내용 구조와 디자인 방향을 나눕니다
같은 내용을 유지한 채 글꼴, 색, 간격, 화면 배치를 바꿀 수 있도록 설계합니다.
5. 화면 크기에 맞춰 조절되는 HTML 슬라이드를 만듭니다
고정된 1920×1080 화면만 가정하지 않습니다. 일반 창과 전체화면의 가용 영역에 맞춰 글자와 간격이 조절되도록 만듭니다.
6. 코드 검사와 사람의 화면 검토를 나눕니다
원문 누락, 승인하지 않은 추가 문구, 이미지 누락, 경계 이탈은 자동으로 검사합니다. 실제 줄바꿈과 교실 가독성은 브라우저에서 사람이 확인합니다.
PowerPoint를 대체하려는 게 아닙니다. 이번 제작 흐름에 HTML이 맞는 이유입니다
PowerPoint에는 익숙한 수동 편집 환경과 다양한 발표 기능이 있습니다. 이번 강의는 그런 기능이 부족해서 HTML을 선택하는 것이 아닙니다. 핵심은 AI 에이전트가 반복해서 만들고, 고치고, 검사하기 쉬운 제작 형식이라는 점입니다.
1. 디자인 자유도가 높습니다
글자, 색, 간격, 화면 배치를 세밀하게 조절할 수 있습니다. 정해진 도형과 템플릿에 내용을 억지로 맞추기보다, 학습지의 흐름에 맞는 화면을 자유롭게 설계할 수 있습니다.
2. 에이전트가 소스를 직접 읽고 정확히 고칠 수 있습니다
HTML 슬라이드의 설계는 글로 저장됩니다. 에이전트는 전체 화면을 다시 만들지 않고 바꿔야 할 부분을 찾아 정확히 수정하며, 무엇이 달라졌는지도 비교할 수 있습니다. 같은 수정 사항을 여러 슬라이드에 한꺼번에 적용하기도 쉽습니다.
3. 생성과 검증의 반복이 짧습니다
에이전트가 슬라이드를 만들면 브라우저에서 바로 결과를 확인할 수 있습니다. 글자가 잘렸는지, 화면 밖으로 나간 요소가 있는지, 크기를 고정해 둔 부분이 남았는지를 자동으로 찾아 고친 뒤 다시 확인할 수 있습니다.
4. 자주 쓰는 화면 형식과 디자인 규칙을 다음 자료에 재사용할 수 있습니다
질문, 사료, 비교, 흐름, 이미지처럼 자주 쓰는 화면과 글꼴·색·간격 규칙을 따로 정리해 둘 수 있습니다. 다음 학습지에서는 내용만 바꾸면서 이미 승인한 구조와 디자인을 이어서 사용할 수 있습니다.
5. 하나의 소스로 여러 화면에 대응하기 쉽습니다
하나의 HTML 원본으로 일반 창, 전체화면, 교실 프로젝터처럼 크기가 다른 화면에 대응할 수 있습니다. 에이전트는 같은 기준으로 각 화면을 반복해서 확인하고 고칠 수 있습니다.
정리하면, 사람이 완성본을 직접 세밀하게 편집하는 일이 중심이면 PowerPoint가 편합니다. AI 에이전트가 반복 생성·수정·검증하는 시스템을 만드는 일이 중심이면 HTML이 훨씬 다루기 쉽습니다.
코딩 문법을 외우는 강의가 아닙니다. AI 에이전트에게 무엇을 맡기고, 교사는 어떤 기준으로 결정하고 검수해야 하는지를 실제 제작 과정으로 익힙니다.
강의에서는 실제 수업 자료가 슬라이드로 바뀌는 과정을 봅니다
강의에서는 실제 학습지와 노션 원문을 HTML 수업 슬라이드로 바꾸는 전 과정을 보여드립니다. 내용의 관계를 보존하면서, 화면 크기가 달라져도 글자와 간격이 함께 조절되는 결과물입니다.
- 학습지의 소제목·자료·질문 순서를 수업 흐름에 맞게 연결한 화면
- 일반 창과 전체화면에서 화면 크기에 맞춰 글자와 간격이 조절되는 구성
- 자료를 보여주고 질문으로 이어지는 일반적인 수업 흐름
- 이전·다음 이동, 전체화면, 링크 삽입처럼 수업에 필요한 조작 기능
- 고정 크기와 불필요한 정보를 잡아내는 검사 기준
완성된 화면만 보여드리지 않습니다.
내용이 지나치게 길었던 경우, 의미와 관계를 잘못 해석했던 경우, 화면 안쪽 여백이 부족했던 경우를 어떻게 발견하고 수정했는지도 함께 다룹니다.
연수를 마치면 다음 네 가지 기준이 생깁니다
내용을 줄여도 되는 부분과 보존해야 하는 부분을 구분합니다
설명문은 수업 흐름에 맞게 요약하고, 원사료와 출처는 의미가 달라지지 않도록 유지할 수 있습니다.
화면 모양보다 먼저 의미 구조를 설계합니다
비교할 내용, 순서가 중요한 내용, 이미지가 중심인 내용을 서로 다른 구조로 배치할 수 있습니다.
다음 학습지에도 적용할 수 있는 제작 흐름을 만듭니다
매번 처음부터 지시하지 않고, 이미 정한 내용 정리 기준과 화면 형식을 다시 사용할 수 있습니다.
자동 검사를 통과한 것과 실제로 보기 좋은 것을 구분합니다
코드 검사와 사용자 육안 QA의 역할을 나누고, 무엇을 마지막에 직접 확인해야 하는지 알 수 있습니다.
이런 선생님께 추천합니다
- 학습지와 수업 자료를 매번 슬라이드로 다시 정리하고 있는 선생님
- 노션에 모아 둔 자료를 수업 화면으로 연결하고 싶은 선생님
- AI가 만든 슬라이드에서 원문 누락과 임의 요약을 자주 경험한 선생님
- 디자인만 바꾸는 도구보다 재사용 가능한 제작 원리를 배우고 싶은 선생님
- 코드를 직접 많이 쓰지 않더라도 AI 에이전트와 함께 HTML 결과물을 만들고 싶은 선생님
이런 기대와는 맞지 않을 수 있습니다
- 한 번의 클릭으로 모든 자료가 완벽하게 바뀌기를 기대하는 경우
- 원문 확인과 최종 화면 검토를 전부 AI에게 맡기고 싶은 경우
- PowerPoint 기능 자체를 배우고 싶은 경우
2시간 30분 동안 다루는 내용
1. 학습지에서 슬라이드로 이어지는 전체 제작 흐름
- AI 에이전트가 담당하는 일과 교사가 결정하는 일을 나눕니다.
- 입력, 구조화, 생성, 검증의 연결 관계를 살펴봅니다.
2. 원문 분석과 내용 계약
- 문항, 사료, 출처, 이미지의 관계를 보존합니다.
3. 자주 쓰는 화면 형식과 배치
- 제목, 목록, 비교, 흐름, 이미지, 질문, 답안 공간을 구조화합니다.
- 새로운 화면 형식을 바로 추가하지 않고 검토·승인하는 방법을 익힙니다.
4. 디자인 방향과 글자 표현
- 공통 가독성 규칙과 선택 가능한 디자인 주제를 분리합니다.
- 글꼴, 색, 간격, 화면 배치를 일관되게 적용합니다.
.png&w=3840&q=75)