Claude Code로 교육자료 제작하기 🎯
프로젝트: 교육 자료 제작 기간: 2시간 도구: Claude Code (Sonnet 4.5)
📌 프로젝트 배경
지방정부에서 진행하는 해외 연수 프로그램에 참여하는 학생들 대상으로 교육 자료를 제작해야 했습니다.
정책 소개 프레젠테이션
아이스브레이킹용 빙고 게임판
조별 활동 가이드 대시보드
방문 장소 정보 대시보드
문제점: 자료가 많고 복잡하며, 인터랙티브한 웹 기반 자료가 필요했지만 시간이 부족했습니다.
🎯 Claude Code를 선택한 이유
마크다운 → PPTX 자동 변환: 기존 문서를 빠르게 프레젠테이션으로 변환
Python 스크립트 작성: 템플릿 디자인을 자동으로 적용하는 스크립트
HTML/CSS/JS 개발: 인터랙티브 웹 대시보드를 한 번에 생성
반복 수정 용이: 디자인 피드백을 즉시 반영
💡 작업 과정
1단계: PowerPoint 프레젠테이션 제작
요구사항: 화성시 2026년 정책에 대한 프레젠테이션
작업 1: 마크다운 → PPTX 변환
Claude Code의 ppt-auto-generator 스킬을 사용하여 마크다운을 PPTX로 자동 변환:
20개 슬라이드 자동 생성
각 슬라이드에 발표자 노트 포함
제목, 본문, 리스트 자동 구조화
작업 2: 템플릿 디자인 자동 적용
PDF 템플릿을 보고 Python 스크립트를 작성하여 디자인 자동 적용:
# apply_template_design.py
COLORS = {
'orange': RGBColor(255, 87, 34), # #FF5722 브랜드 컬러
'dark_gray': RGBColor(51, 51, 51),
'light_gray': RGBColor(243, 243, 243),
'white': RGBColor(255, 255, 255)
}
def apply_template_design(input_file, output_file):
# 헤더 추가 (날짜, 장소, 기관명)
add_header_footer(slide)
# 오렌지 포인트 닷
add_orange_dot(slide)
# 슬라이드 번호
add_slide_number(slide, idx)
# 제목 언더라인
add_orange_underline(slide, title_shape)
결과:
✅ 20개 슬라이드 자동 생성
✅ 일관된 브랜드 디자인 적용
✅ 수작업 대비 90% 시간 절약
==> PPT 변환을 위해 이틀정도 시도를 했으나 마음에 들지 않아서 결국 포기 ㅠㅠ
2단계: 빙고 게임판 제작
요구사항: A4 크기 출력용 빙고 게임판 (아이스브레이킹 활동)
📄 입력: 아으스브레이킹_빙고게임_질문지.md
🎯 목표: A4 출력 최적화 HTML 파일
특징:
4×4 빙고판 (16개 질문)
질문 종류: 연수내용에 기반한 질문 추출 (난이도와 의도 명확히 표시)
A4 용지에 정확히 맞는 레이아웃
인쇄 버튼 포함
<style>
@page {
size: A4 portrait;
margin: 10mm;
}
.bingo-grid {
width: 100%;
border-collapse: collapse;
}
.bingo-grid td {
height: 62mm; /* A4 높이를 4등분 */
vertical-align: top;
}
</style>
결과:
✅ 정확한 A4 크기 레이아웃
✅ 인쇄 최적화 (페이지 넘김 없음)
✅ 학생들의 네트워킹 촉진 도구
3단계: 조별 활동 대시보드
요구사항: 4개 조(5명씩)의 활동 가이드를 인터랙티브하게 제공
📄 입력: 1~4조 사전자료 마크다운 파일 (4개)
🎯 목표: 탭 방식의 인터랙티브 웹 대시보드
초기 버전의 문제점:
💜 보라색, 핑크색 그라데이션 사용
📏 글씨가 너무 작음
피드백 반영:
"글씨 크게 키워주고, 색상은 회색과 흰색 배경에 주황색 강조색만 사용해줘"
개선된 디자인:
body {
background: #f5f5f5; /* 밝은 회색 */
font-size: 17px; /* 기존 14px → 17px */
}
.header {
background: white;
border-bottom: 4px solid #FF5722; /* 오렌지 */
font-size: 36px; /* 기존 28px → 36px */
}
.mission-box {
background: #fafafa; /* 그라데이션 제거 */
border: 3px solid #FF5722;
font-size: 20px;
}
주요 기능:
4개 조 탭 전환
각 조별 주제, 미션, 방문장소, 핵심개념
체크리스트 (localStorage 저장)
진행률 표시
결과:
✅ 강의 화면에서 잘 보이는 큰 글씨
✅ 통일된 디자인 언어 (회색/흰색/오렌지)
✅ 학생들이 준비 상황을 체크
4단계: 방문장소 대시보드 (최종 버전)
요구사항:
일정별/주제별 두 가지 뷰
각 장소의 상세 정보
강의용으로 시각적 효과 극대화
초기 요구사항:
"일정별로는 타임라인, 주제별로는 4개 주제 카드 → 장소 클릭 → 상세 정보 펼침"
최종 구조 (3단계 네비게이션):
📅 일정별 보기
└─ 2~5일차 타임라인 (간단히 장소명+시간만)
🎯 주제별 보기
├─ 1단계: 4개 주제 카드 (2×2 그리드)
│ ├─ 1조: 스마트시티 & 도시계획
│ ├─ 2조: 교육 & 글로벌인재
│ ├─ 3조: 기술혁신 & 스타트업
│ └─ 4조: 미래제조업 & 인프라
│
├─ 2단계: 주제 상세 (주제 클릭)
│ └─ 해당 주제의 방문 장소 카드 나열
│
└─ 3단계: 장소 상세 (장소 클릭)
├─ 항상 보이는 정보:
│ ├─ 📌 소개 및 특징 + 🌐 웹사이트 링크
│ ├─ 🎯 방문 목적
│ └─ 📋 프로그램 주요내용
│
└─ 클릭해서 펼치는 정보:
├─ 👀 방문 시 주목할 점 (Collapsible)
└─ ✅ 사전조사 체크리스트 (Collapsible)
주요 기능:
3단계 네비게이션
showThemeList() // 주제 목록으로 showThemeDetail(id) // 특정 주제 상세로 togglePlaceContent() // 장소 카드 펼침/접힘 toggleCollapsible() // 하위 섹션 펼침/접힘시각적 효과
주제 카드: 큰 숫자, 호버 시 떠오르는 효과
장소 카드: 클릭 시 아코디언 펼침
Collapsible 헤더: 클릭 시 오렌지 배경으로 변환
부드러운 애니메이션 (fadeIn, slideDown)
웹사이트 링크
<a href="https://www.ntu.edu.sg" target="_blank" class="website-link"> 🌐 NTU 공식 웹사이트 </a>
결과:
✅ 7개 방문장소 완벽 정리
✅ 강의용 프레젠테이션에 최적화
✅ 학생들 스스로 탐색 가능
✅ 체크리스트로 준비 상황 관리
총 제작 시간: 약 2시간 수작업 예상 시간: 2일 이상
이라고 정리해 주었으나 2~3일은 족히 걸림 ;;
🎓 배운 점과 팁
1. 반복 피드백의 힘
초기 버전에서 색상과 글씨 크기 문제가 있었지만, 즉각적인 피드백과 수정으로:
교훈: Claude Code는 디자인 수정도 빠르게 반영 가능
2. 인터랙티브 자료의 가치 (슬라이드 자동완성에 실패해 대시보드 작업, 오히려 좋아)
정적인 PPT, PDF가 아닌 HTML 대시보드로 만들어:
✅ 체크리스트로 준비 상황 확인
✅ 클릭으로 필요한 정보만 선택적으로 보기
✅ localStorage로 진행 상황 저장
3. 자동화의 중요성
Python 스크립트로 PPTX 템플릿 자동 적용 어렵다.
풀어야할 숙제를 받았음
🎯 결론
Claude Code를 활용하여 2시간 만에 고등학생 대상 싱가포르 탐방 교육 자료를 완성하기 위한 2일이였던것 같습니다. 다음번 교육자료에는 보다 더 쉽게 가능할 예정
핵심 성과:
⚡ 제작 속도: 2일 → 2시간 (90% 단축) 희망사항
🎨 일관된 디자인: 회색/흰색/오렌지 브랜딩
📱 인터랙티브: 체크리스트, 탭, 아코디언
🎓 교육 효과: 강의용 대형 글씨, 계층적 정보 구조
가장 만족스러웠던 점: 단순히 "자료 제작"을 넘어, 학생들이 스스로 탐색하고 준비 상황을 체크할 수 있는 살아있는 교육 도구를 만들었다는 것입니다.
교육 자료 제작에 시간을 많이 쓰시는 선생님, 강사님들께 Claude Code를 강력히 추천합니다! 🚀
