수업·연수 슬라이드 만들기

Claude, Claude Code, Codex에서 공통으로 사용하는 스킬이다. 파일 작성과 Python 실행이 가능한 환경에서 동봉된 편집기를 연결한다. 브라우저가 없으면 가능한 정적 검증을 수행하고 화면·인쇄·조작 중 확인하지 못한 항목을 밝힌다. 특정 제품 전용 도구 이름을 가정하지 않는다.

참여자가 무엇을 보고, 생각하고, 해 볼지를 중심으로 발표 흐름을 만든다. 내용에 어울리는 디자인을 새로 구성하고, 완성된 HTML에서도 글·표·이미지·장 순서를 수정할 수 있게 한다.

먼저 정할 것

• 요청에 있는 대상, 목적, 시간, 자료, 원하는 분위기, 발표·배포 용도를 활용한다. 필요한 정보만 묻는다. 사용자가 선택을 맡기면 합리적인 가정을 짧게 알리고 제작한다.
• 각 장의 역할과 한 가지 핵심 메시지를 정한다. 도입 질문, 자료 관찰, 개념 설명, 비교, 실습, 토론, 정리 중 필요한 흐름을 선택한다. 장 수나 차례를 고정하지 않는다.
• 학생 수업은 이해와 연습에, 교사 연수는 현장 적용·사례 판단·성찰에 맞춘다. 참여자가 해야 할 행동과 시간 안내는 실제 수업에 필요한 만큼 넣는다.
• 제공 자료의 사실·수치·출처를 먼저 정리한다. 원문을 임의로 만들어 인용하지 않는다. 표·차트는 장식이 아니라 설명해야 할 관계를 표현한다.

다양한 스타일로 설계

디자인을 선택할 때 시각 방향과 장면 구성을 읽는다. 사용자가 준 참조 이미지나 브랜드가 있으면 그것을 우선한다.

• 목적과 자료가 구성을 정한다. 같은 카드 배열, 같은 제목 위치, 같은 강조 줄을 모든 장에 반복하지 않는다.
• 타이포그래피 중심, 사진 중심, 도식 중심, 기록·문서형, 데이터 중심, 활동 안내형 등에서 내용에 맞게 조합한다. 한 덱 안에서는 색·서체·간격의 기준을 공유하되 장면 구도는 다양하게 쓴다.
• 예시의 주제·색·장 수·레이아웃을 다음 요청의 기본 틀로 복제하지 않는다. 다른 구조가 더 적합하면 새 HTML/CSS를 작성한다.
• 기본 화면 비율은 별도 요구가 없을 때 16:9. 장 수·캔버스 픽셀 수·색 조합은 강제 규격이 아니다. 멀리서 읽을 본문 크기를 확보하고, 긴 원문은 발췌나 자료 분리로 다룬다.
• 내용에 도움이 되는 사진·삽화·도식을 활용한다. 사용자가 제공한 이미지를 우선하며, 검색·생성 도구는 필요하고 사용 가능할 때만 쓴다. 최종 이미지는 HTML에 포함한다.

필요한 구조만 컴포넌트 재료에서 골라 참고한다. 이것은 완성 슬라이드 템플릿이나 닫힌 객체 목록이 아니다.

편집 가능한 결과 만들기

수식·함수 그래프·좌표평면·과학 도식에는 수식과 그래프를 필요할 때 읽는다. 정확한 식과 데이터로 렌더하고 원본을 보존한다. 연결 함수는 수식으로, 연결 통계 그래프는 표의 값으로 수정한다.

수식은 data-math와 data-latex로 표시하면 동봉된 KaTeX 편집창에서 원문과 미리보기를 보며 고칠 수 있다. 문장 안/별도 줄 배치, 자주 쓰는 수식 버튼, 적용·취소와 되돌리기를 연결한다. 함수는 data-function-graph, 데이터 표 그래프는 data-data-chart로 연결한다. 기존 이미지나 임의 SVG를 자동 연결한다고 안내하지 않는다.

• 먼저 완성할 디자인을 HTML/CSS로 작성한다. 편집 연결 방법에 따라 본문에 data-teach-document, 장에 data-slide, 수정할 글·셀에 data-edit, 옮길 영역에 data-piece를 붙인다.
• 문서의 CSS가 화면 크기와 배치를 결정한다. 편집 도구는 레이아웃이나 기본 색을 강제로 주입하지 않는다. 화면 폭에 따른 축소·반응형 배치는 작성한 디자인에 맞게 구현한다.
• 공통 편집기로 선택 영역의 글꼴·정렬·줄 간격, 표·이미지 편집과 크기 조절, KaTeX 수식 편집을 연결한다. 슬라이드 요소는 별도 손잡이로 드래그·크기 조절하고 Escape로 취소할 수 있다. 글을 드래그해 선택하는 동작과 이동 손잡이를 구분한다. HTML 저장, 장 복제·이동·삭제, 발표 보기·장 이동, 인쇄도 제공한다. 특수한 도식 조작은 필요한 컴포넌트에만 구현한다.
• 발표용·배포용을 권한으로 나누지 않는다. 공유하는 HTML도 계속 편집할 수 있다. 진행자 메모 등 별도 자료는 요청 시 독립 문서로 만든다.

python <이 스킬 경로>/scripts/attach_editor.py 초안.html --output 슬라이드.html --kind slides

CDN이나 외부 파일이 없어도 열리게 한다. 기존 슬라이드를 수정할 때는 원래 내용·스타일·동작을 먼저 확인하고 필요한 범위만 바꾼다.

확인하고 전달

• 모든 장을 화면에서 넘겨 보며 잘림·겹침·작은 글씨와 메시지 흐름을 확인한다. 일반적인 화면 크기에서도 내용이 읽혀야 한다.
• 글 수정, 장 복제·이동, 이미지나 표 등 실제 사용한 요소의 편집을 확인한다. HTML 다운로드 후 다시 열어 변경 내용과 편집 기능이 남는지 확인한다.
• PDF가 필요하면 인쇄용 CSS로 전체 장이 출력되는지 확인한다. 발표 중 숨긴 장 때문에 PDF에서 내용이 빠지지 않게 한다. 브라우저 검증은 로컬 HTTP를 사용한다.
• 수정 범위에 맞게 검증한다. HTML만 요청받았는데 PPTX·서비스 배포·거대한 편집기 개발로 범위를 늘리지 않는다.
• HTML 링크와 발표·수정·저장 방법을 짧게 전달한다. 실제 확인한 결과와 미확인 사항을 구분한다.