서울시교육청 SEN에듀 계정 하나로, 내 연수·수업 자료를 웹페이지로 만들어 링크로 나눠 주는 방법을 90분 안에 익힙니다. 코딩 지식은 필요 없습니다 — 말로 시키면 됩니다.
연수를 다니는 강사에게 자료의 형태는 곧 무기입니다.
USB도, 파일 전달도, 버전 관리도 없습니다. 어느 연수장에 가든 주소 하나 치면 시작됩니다.
참가자들이 각자 노트북·태블릿·휴대폰으로 같은 자료를 봅니다. QR 하나면 배포 끝.
슬라이드는 닫히면 끝이지만, 페이지는 매뉴얼로 남습니다. 못 따라온 부분은 집에서 링크를 다시 열면 됩니다.
"정말 이 방법으로 그런 걸 만들 수 있나요?" — 아래는 전부 같은 방법(AI에게 말로 시키기)으로 만든 실제 연수 자료입니다.
🖥️디벗 전문가 실습 허브시뮬레이터 4종 + 42개 미션 — 서울시교육청 디벗 테크니션 연수 실습장 🌱Growing Teachers수업·연수 자료 전체 모음 — 오늘 만드는 페이지도 이런 식으로 쌓입니다서울시교육청 선생님이라면 이미 계정이 있습니다. 새로 가입할 것이 없다는 게 오늘의 가장 큰 장점입니다. (경로는 2026. 9. 기준 — 메뉴 이름이 바뀌었으면 '도구모음'에서 비슷한 것을 찾으세요.)
SEN에듀(SEN스쿨) — 평소 쓰시는 서울시교육청 통합 계정으로 로그인합니다.
중간에 '도구모음'을 거쳐야 합니다. 이 단계를 빠뜨리고 헤매는 경우가 가장 많습니다.
주소창 오른쪽에 팝업 차단 아이콘(⧉)이 뜨면 클릭 → 항상 허용을 선택합니다. 연수장에서 전원이 이 단계를 함께 통과하고 시작하는 것이 좋습니다.
"안녕?" 한마디로 응답이 오는지 확인되면 준비 끝입니다.
SenGPT의 에이전트(챗봇 만들기) 기능에 아래 지시문을 붙여 넣으면, 매번 조건을 설명할 필요 없이 "○○ 연수 페이지 만들어 줘" 한마디로 통하는 전용 도우미가 됩니다. 오늘 실습은 에이전트 없이도 충분하니, 익숙해진 뒤에 만들어 보세요.
너는 '연수 페이지 제작 도우미'다. 교사가 말로 요청하면 웹페이지를 만들어 준다. 규칙: 1. 항상 HTML 한 파일로 완성해서 준다. CSS와 자바스크립트도 그 파일 안에 넣는다. 외부 파일·라이브러리·이미지 링크는 쓰지 않는다. 2. 코드는 하나의 코드 블록으로, 처음(<!DOCTYPE html>)부터 끝(</html>)까지 빠짐없이 준다. 3. 휴대폰에서도 잘 보이게 만든다(viewport 설정, 넉넉한 글자 크기와 여백). 4. 글꼴은 시스템 기본을 쓰고, 색은 요청이 없으면 흰 바탕에 파란 포인트로 깔끔하게. 5. 내용을 지어내지 않는다. 사용자가 주지 않은 정보(날짜·이름·장소)는 ○○로 표시하고, 무엇을 채워야 하는지 알려 준다. 6. 수정 요청을 받으면 파일 전체를 처음부터 끝까지 다시 준다. 바뀐 부분만 주지 않는다. 7. 답이 길어서 중간에 끊기면, 사용자가 "이어서"라고 할 때 끊긴 지점부터 이어서 출력한다.
코드를 '쓰는' 게 아니라, AI에게 말로 시키고 결과물을 받아 쓰는 방식입니다. 우리는 기획자가 되고, 타자는 AI가 칩니다.
이 ①→④ 루프를 도는 것이 전부입니다. 한 바퀴에 1~2분, 서너 바퀴면 쓸 만한 페이지가 나옵니다.
항상 "HTML 한 파일로, 처음부터 끝까지"를 요구하세요. 파일이 여러 개로 쪼개지는 순간 초보자는 길을 잃습니다.
"색도 바꾸고 표도 넣고 퀴즈도…"를 한꺼번에 시키면 뒤죽박죽이 됩니다. 한 바퀴에 한 가지만 고치세요.
"이 부분만 바꾸세요"라며 조각 코드를 주면 어디에 끼울지 몰라 막힙니다. "파일 전체를 다시 줘"가 안전합니다.
아래 프롬프트를 복사 → SenGPT에 붙여넣기 전에, ○○ 자리만 내 것으로 바꿔서 보내세요.
연수 안내 웹페이지를 만들어 줘. 조건: - HTML 한 파일로, CSS와 자바스크립트를 파일 안에 포함해서 <!DOCTYPE html>부터 </html>까지 완성본으로 줘 - 외부 이미지나 외부 라이브러리는 쓰지 마 - 휴대폰에서도 잘 보이게 만들어 줘 - 흰 바탕에 파란 포인트 색, 글자는 시원시원하게 들어갈 내용: - 제목: ○○○○ 연수 - 부제: ○○○○○○○○ - 강사: ○○○ (○○학교) - 오늘의 목표 3가지: ①○○ ②○○ ③○○ - 진행 순서 표 (시간 / 내용, 4줄): ○○ - 맨 아래에 "질문은 언제든 환영합니다" 안내 카드
코드 블록 오른쪽 위에 복사 버튼이 있습니다. 없다면 코드 부분을 드래그해서 복사하세요.
이 페이지 어느 화면에서든 항상 떠 있는 보라색 버튼입니다. 설명 문장이 섞여 들어가도 괜찮습니다 — 도우미가 코드 부분만 알아서 골라냅니다.
미리보기는 새 탭에 즉시 열립니다. 마음에 들면 파일 이름을 정하고 저장하세요. 저장된 파일은 더블클릭하면 언제든 다시 열립니다.
SenGPT로 돌아가 "제목을 더 크게 하고, 전체 여백을 시원하게. 파일 전체를 다시 줘" — 새 코드를 받아 2~3번을 반복합니다. 이 루프가 몸에 붙으면 끝난 겁니다.
① 메모장을 열고 코드 붙여넣기 → ② 파일 > 다른 이름으로 저장 → ③ 파일 형식을 "모든 파일"로 바꾸고 이름을 연수.html 처럼 .html로 끝나게 → ④ 인코딩 UTF-8 확인 → 저장 → 더블클릭. (.txt로 저장되는 것이 최다 실패 원인입니다.)
빈손 프롬프트보다 잘 만든 견본을 주고 내용만 갈아 끼우게 하는 편이 훨씬 안정적입니다. 아래 스타터 템플릿을 통째로 복사해 프롬프트와 함께 보내세요.
아래 HTML 템플릿의 디자인과 구조는 그대로 유지하고, 내용만 다음으로 바꿔 줘. 바꾼 결과는 HTML 한 파일 완성본으로, 처음부터 끝까지 전체를 다시 줘. 바꿀 내용: - 연수 제목: ○○○○ - 부제: ○○○○ - 강사: ○○○ (○○학교) / 일시: ○○ - 목표 3가지: ①○○ ②○○ ③○○ - 진행 순서: ○○ (표의 줄 수는 내용에 맞게 조절해도 됨) - 준비물: ○○ - 포인트 색을 ○○색 계열로 --- 아래가 템플릿 --- (여기에 스타터 템플릿 코드를 붙여넣기)
👀 템플릿이 어떻게 생겼는지 먼저 보고 싶다면:
디벗 사용법 안내, 학부모 연수, 신학기 오리엔테이션, 우리 부서 업무 안내… 무엇이든 진짜 쓸 것으로.
내용이 정해져 있을수록 결과가 좋아집니다. 프롬프트에 쓰는 시간이 아깝지 않습니다.
「🛠 고치기 사전」 탭의 카드를 골라 쓰면 됩니다. 한 번에 하나씩!
파일 이름은 영어나 숫자로 짧게(예: training.html) — 다음 탭에서 인터넷에 올릴 때 편합니다.
같은 내용도 어떤 옷을 입히느냐에 따라 완전히 다른 자료가 됩니다. 아래에서 디자인 명세(md)를 골라 복사해, 내용과 함께 SenGPT에 보내세요. 내용은 내가, 디자인은 명세가 책임집니다.
아래 [디자인 명세]를 그대로 따라서 웹페이지를 만들어 줘. 조건: - HTML 한 파일로, CSS 포함해서 <!DOCTYPE html>부터 </html>까지 완성본으로 - 외부 이미지·외부 라이브러리 없이, 휴대폰에서도 잘 보이게 - 디자인 명세와 내 요청이 다르면 디자인 명세를 우선할 것 들어갈 내용: - ○○○○○○ (제목·내용을 여기에 적기) [디자인 명세] (이 아래에, 서랍에서 복사한 명세를 붙여넣기)
발표 자료 · 포트폴리오 · 강사 소개 — 흰 바탕, 넓은 여백, 색은 한 가지만. 가장 실패가 없는 고급스러움.
연수 진행 화면 · 실습 안내 — 둥근 카드 그리드 + 상단 탭. 지금 보고 계신 이 교안이 이 옷입니다.
전자칠판 발표 · 퀴즈쇼 · 행사 화면 — 깜깜한 무대에 큰 글자. 멀리서 보는 화면은 이 옷으로.
가정통신문 · 안내문 · 계획서 — 화면으로도 보고 종이로도 뽑는 것. 잉크 아끼는 공문서 조판.
학생 활동 안내 · 학급 게시판 · 이벤트 — 크림 바탕에 파스텔 카드, 큰 이모지. 다정한 자리용.
관리자 보고 · 운영 계획 · 공식 안내 — 네이비 머리띠, 요약 먼저, 표로 말하기. 신뢰가 필요한 자리용.
수정 요청은 아래 카드를 복사해 그대로 쓰거나 살짝 바꿔 쓰세요. 모든 카드 끝에 "전체를 다시 줘"가 붙어 있는 이유는 「🪄 원리」의 규칙 3번입니다.
제목 글자를 더 크게 하고, 전체 여백을 지금보다 시원하게 바꿔 줘. 파일 전체를 다시 줘.
포인트 색을 파란색 대신 초록색 계열로 통일해 줘. 파일 전체를 다시 줘.
'자주 묻는 질문' 섹션을 진행 순서 아래에 추가해 줘. 질문과 답 3개는 다음과 같아: ①○○ ②○○ ③○○. 파일 전체를 다시 줘.
OX 퀴즈 3문항 섹션을 넣어 줘. 정답을 누르면 초록색으로 '정답!', 오답이면 빨간색으로 표시되게. 문항과 정답: ①○○(O) ②○○(X) ③○○(O). 파일 전체를 다시 줘.
화면 위쪽에 5분 타이머를 넣어 줘. 시작·정지·초기화 버튼이 있고, 끝나면 화면이 잠깐 깜빡이게. 파일 전체를 다시 줘.
휴대폰에서 보면 표가 잘려 보여. 휴대폰 화면에서도 잘리지 않고 보기 좋게 고쳐 줘. 파일 전체를 다시 줘.
내용이 길어졌으니 위쪽에 탭 메뉴를 만들어서 '안내 / 실습 / 마무리' 세 화면으로 나눠 줘. 파일 전체를 다시 줘.
코드가 중간에 끊겼어. 끊긴 지점부터 이어서 출력해 줘.
저장해서 열었더니 (증상: 화면이 하얗게 나와 / 버튼이 안 눌려 / 글자가 깨져 보여). 원인을 찾아 고친 뒤 파일 전체를 다시 줘.
맨 아래에 만든 사람과 날짜가 들어간 작은 안내 줄을 추가하고, 인쇄했을 때도 깔끔하게 나오도록 정리해 줘. 파일 전체를 다시 줘.
GitHub는 전 세계에서 가장 널리 쓰이는 무료 코드 저장소입니다. 여기 올린 HTML은 공짜로, 기한 없이, 인터넷 주소가 됩니다.
이메일 하나면 됩니다(영어 화면이지만 가입 → 이메일 인증까지 3분). 아이디는 주소에 들어가니 깔끔한 영문으로. 연수 전에 미리 가입해 오면 가장 좋습니다.
Repository name에 my-training 처럼 영문 이름 → Public 선택 → Create repository.
만든 .html 파일을 끌어다 놓습니다. 이때 파일 이름을 index.html로 바꿔 올리면 주소가 짧고 깔끔해집니다. 아래 Commit changes 클릭.
Branch를 main, 폴더 / (root)로 놓고 Save.
https://아이디.github.io/my-training/ — 이 주소가 여러분의 연수 자료입니다. 휴대폰으로 직접 열어 확인하세요.
네이버에서 "QR코드 만들기" 검색 → 주소 붙여넣기 → 이미지 저장. 다음 연수 첫 화면에 이 QR 하나면 배포가 끝납니다.
강사용입니다. 시간이 밀리면 ⑤(배포)를 시연 + 대행으로 전환하는 것이 기본 대응입니다.
| 시간 | 내용 |
|---|---|
| 00–10 | 오프닝 — 왜 링크인가실물 증거(디벗 허브)를 직접 열어 보여 주기 · "지금 보는 이 교안도 같은 방법으로 만들었다" |
| 10–20 | 전원 SenGPT 접속senedu.kr 로그인 → 도구모음 → SenGPT · 팝업 차단 해제 · "안녕?" 응답 확인이 관문 — 전원 통과 후 진행 |
| 20–30 | 원리 + 라이브 시연강사가 즉석에서 첫 프롬프트 → 코드 → 🧰 도우미 → 미리보기까지 한 바퀴를 보여 준다(실패해도 고치는 과정 자체가 교육) |
| 30–50 | 실습① 첫 페이지프롬프트 카드 복사 → 각자 첫 페이지 · 옆 사람과 화면 비교 · 한 가지 수정 루프 경험 |
| 50–70 | 실습② 내 자료로스타터 템플릿 + 개조 프롬프트 · 각자 실제로 쓸 연수 주제로 · 고치기 사전·디자인 서랍 활용 |
| 70–85 | 배포GitHub Pages 6걸음 · 막히는 분은 대행 폴백 · 완성 주소를 휴대폰으로 열어 보기 |
| 85–90 | 링크 갤러리 + 마무리완성 링크를 모아 전자칠판에서 함께 열람 · "오늘 만든 주소는 평생 무료로 살아 있습니다" |
SenGPT가 준 답변을 통째로 붙여넣어도 됩니다. 코드 앞뒤의 설명 문장은 자동으로 걸러냅니다.