AI 에이전트로 학습지 - HTML 슬라이드 제작으로 이어지는 파이프라인 만들기

2026년 9월 30일(수) 20:00~22:30 · 온라인 Zoom

학습지 한 장을, 수업에서 바로 넘겨 볼 수 있는 HTML 슬라이드로

AI에게 “이 학습지로 슬라이드를 만들어 줘”라고만 요청하면 원문이 빠지거나, 자료와 질문의 관계가 끊기거나, 내부 메타 정보가 화면에 노출되기 쉽습니다. 내용이 많아지면 글자가 잘리고, 일반 창과 전체화면에서 배치가 달라지는 문제도 생깁니다.

이번 연수에서는 학습지와 노션 원문을 해석하는 단계부터 브라우저에서 실행되는 반응형 HTML 수업 슬라이드를 만드는 단계까지 연결합니다. 한 번 만든 기준을 다음 자료에도 다시 적용할 수 있는 AI 에이전트 파이프라인을 함께 구성합니다.

이런 분께 추천합니다

• 학습지와 수업 자료를 HTML 슬라이드로 반복 변환하고 싶은 선생님

• 노션에 정리한 자료를 수업용 화면으로 활용하고 싶은 선생님

• 원문 누락과 AI의 임의 해설 추가를 줄이고 싶은 선생님

• 일반 창과 전체화면에서 안정적으로 보이는 슬라이드가 필요한 선생님

• 한 번의 프롬프트가 아니라 재사용 가능한 제작 절차를 만들고 싶은 선생님

연수에서 만드는 전체 흐름

1. 입력 자료를 해석합니다

학습지와 노션 페이지에서 소제목, 설명문, 문항, 인용, 출처, 이미지의 관계를 분리합니다.

2. 의미 구조를 만듭니다

화면 모양을 정하기 전에 내용의 역할과 순서를 구조화합니다. 질문이 어떤 자료를 보며 답해야 하는지도 함께 기록합니다.

3. 수업용 내용으로 편집합니다

설명문은 소제목 단위로 나누어 핵심 항목으로 요약합니다. 사료와 선언문, 법조문처럼 원문 보존이 필요한 자료는 줄이지 않고 그대로 유지합니다.

4. 화면 구성 요소를 정합니다

제목, 설명, 질문, 인용, 이미지, 비교, 흐름, 답안 공간을 재사용 가능한 HTML 구성 요소에 연결합니다.

5. 시각 주제와 레이아웃을 적용합니다

내용 구조와 디자인을 분리하고, 읽기 순서와 교실 가독성을 해치지 않는 글꼴·색·간격·그리드를 적용합니다.

6. 반응형 HTML 슬라이드를 생성합니다

일반 창과 전체화면의 가용 영역에 맞춰 내용과 글자 크기가 조절되는 수업 슬라이드를 만듭니다.

7. 수업용 조작을 연결합니다

이전·다음 이동, 전체화면, 발표자 화면, 프롬프트 복사처럼 실제 수업에서 필요한 기능을 연결합니다.

8. 자동 검증과 육안 검토를 나눕니다

원문 누락, 승인하지 않은 추가 문구, 이미지 누락, 경계 이탈과 고정 크기 잔여물을 코드로 검사합니다. 실제 줄바꿈과 교실 가독성은 브라우저에서 사람이 확인합니다.

실전 시연에서 확인할 내용

• 학습지의 문항·사료·출처·이미지 관계를 보존하는 방법

• 장문 설명을 소제목별 핵심 항목으로 바꾸는 방법

• 원사료는 요약하지 않고 별도 자료 화면에 유지하는 방법

• 비교, 목록, 흐름, 큰 이미지와 설명을 내용에 맞게 배치하는 방법

• 화면에 보여도 되는 텍스트와 내부 메타 정보를 구분하는 방법

• 고정 1920×1080 화면을 벗어나 반응형 슬라이드로 만드는 방법

• 자동 검사와 사용자 화면 QA를 구분하는 방법

연수를 마치면

완성된 슬라이드 한 벌만 얻는 것이 아닙니다. 다음 학습지와 다음 노션 페이지에도 적용할 수 있도록 입력 분석, 내용 편집, 구성 요소 선택, HTML 생성, 검증으로 이어지는 제작 절차를 이해하게 됩니다.

준비 사항

• Zoom과 Chrome 또는 Edge를 사용할 수 있는 컴퓨터가 필요합니다.

• 코드를 직접 작성하지 않아도 전체 흐름을 따라올 수 있습니다.

• 최종 화면은 사용하는 브라우저와 교실 환경에서 직접 확인하는 것을 권장합니다.

진행자

교사의 실제 수업 자료를 기준으로 AI와 노션, 자동화 도구를 연결해 온 1000쌤이 진행합니다.