도구를 열고, 바탕화면에 폴더 하나 만들기
5분쓰시는 도구를 열고, 오늘 만든 파일이 모일 폴더를 하나 만들어보겠습니다!
폴더부터 만드는 까닭
만든 파일을 나중에 끌어다 올려야 해서, 처음부터 한곳에 모아 둡니다.
저는 새 앱을 만들 때마다 폴더부터 하나 만듭니다. Claude 앱과 ChatGPT 앱의 코딩 도우미는 그 폴더 안에서 파일을 만들고 고치기 때문에, 폴더가 곧 작업대가 됩니다. 폴더 없이 시작하면 파일이 어디에 생겼는지 찾느라 시간을 씁니다.
웹 채팅(ChatGPT·Claude·Gemini·SenGPT)은 파일을 내 컴퓨터에 직접 만들지 못해서, 받은 코드를 폴더에 저장하는 일은 선생님이 합니다. 그래서 웹 채팅으로 하시는 분도 폴더는 똑같이 만들어 둡니다.
도구별 순서
- 바탕화면에 수업도구 폴더 만들기바탕화면 빈 곳 오른쪽 클릭 → [새로 만들기] → [폴더] → 이름 수업도구
- ChatGPTChatGPT 앱을 열고 Codex로 바꾸기왼쪽 위 [ChatGPT ▾] → [Codex]
- ChatGPT수업도구 폴더를 작업 폴더로 연결하기[새 작업] → 프로젝트를 묻으면 [폴더 추가] → 바탕화면 → 수업도구
- ClaudeClaude 앱을 열고 Code 탭으로 가기위쪽 가운데 [Code] 탭
- Claude수업도구 폴더 고르기[Local] → [Select folder](폴더 선택) → 바탕화면 → 수업도구
- Claude모델을 Sonnet으로 두기보내기 버튼 옆 모델 이름을 눌러 Sonnet. 사용량을 아낍니다
- ChatGPT 웹ChatGPT를 열고 새 채팅 시작하기chatgpt.com 로그인 → [새 채팅]. 무료 계정도 됩니다
- Claude 웹Claude를 열고 새 채팅 시작하기claude.ai 로그인 → [새 채팅]. 무료 계정도 됩니다
- Gemini 웹Gemini를 열고 새 채팅 시작하기gemini.google.com 접속 → 구글 계정 로그인 → [새 채팅]. 무료 계정도 됩니다
- SenGPTSenGPT 열기senedu.kr 로그인 → [도구모음] → [SenGPT]. 새 창이 안 뜨면 주소창 오른쪽에서 팝업 허용
- 입력칸이 보이면 준비 끝앱이 업데이트되면 버튼 이름이 조금 다를 수 있습니다
막혔을 때
학교 노트북에 앱이 설치되지 않습니다. 관리자 권한이 막혀 있는 노트북입니다. 오늘은 웹 채팅(ChatGPT·Claude·Gemini·SenGPT)으로 하시고, 만든 코드는 3단계의 코드 도우미로 저장하면 같은 결과가 나옵니다.
Code 탭을 누르니 요금제를 올리라고 나옵니다. Claude 무료 계정은 Code 탭이 잠겨 있습니다. 오늘은 위에서 「Claude 웹」(claude.ai)을 고르셔도 같은 결과물을 만드실 수 있습니다.
SenGPT 새 창이 뜨지 않습니다(SenGPT를 고르신 분). 팝업이 막힌 상태입니다. 주소창 오른쪽 끝의 팝업 차단 표시를 눌러 senedu.kr을 허용하고 다시 누릅니다.
부탁문은 AI와 같이 씁니다
10분만들고 싶은 도구를 한두 줄로 적고, 빈칸을 채워 부탁문을 완성해보겠습니다!
예전엔 주문 잘 쓰는 법을 배웠습니다
요즘은 하고 싶은 것을 말하고, 모르는 것은 AI가 먼저 묻게 합니다.
몇 해 전만 해도 AI에게 원하는 결과를 얻으려면 역할을 정해 주고 형식을 못 박는 요령, 이른바 프롬프트 엔지니어링을 따로 배웠습니다. 지금 모델들은 사람 말을 훨씬 잘 알아들어서, 저는 요령보다 어떤 수업 장면에서 무엇을 하는 도구인지 정확히 말하는 데 시간을 씁니다. 그리고 부탁문 끝에 "만들기 전에 궁금한 것을 먼저 물어봐 줘"를 꼭 붙입니다.
그래도 AI가 잘 놓치는 것이 있습니다. 가상 실험실이라면 숫자에 단위를 안 붙이거나, 식으로 계산하지 않고 그럴듯하게 그리거나, 슬라이더 끝에서 화면이 깨집니다. 퀴즈라면 정답이 틀려 있거나, 문제가 코드 곳곳에 흩어져 나중에 고치기 어렵습니다. 이야기·방탈출이라면 단서와 정답이 어긋나 다음 방이 열리지 않기도 합니다. 그래서 아래 빌더는 고르신 도구 종류에 맞는 규칙을 저절로 붙입니다.
빌더칸을 채우면 부탁문이 완성됩니다
완성된 부탁문을 복사해 도구에 붙여넣습니다.
학습지를 칠판에 띄우는 강의 화면을 만들고 싶으시면 칠판 강의 화면 매뉴얼에 방법과 부탁문을 따로 정리해 두었습니다.
규칙은 제가 여러 도구를 만들면서 자주 고쳤던 것들을 모은 것입니다. 나중에 바꿀 값을 코드 맨 위에 모아 달라는 줄은 특히 쓸모가 있습니다. 문제나 명단을 바꿀 때 AI 없이 메모장으로도 고칠 수 있기 때문입니다. 이 규칙을 붙여도 빠지는 것이 생기기 때문에 4단계의 30초 점검을 따로 둡니다.
AI가 되물으면 짧게 답합니다
잘 모르겠는 질문에는 "네가 정해 줘"라고 답해도 괜찮습니다.
되묻는 질문은 대개 문제를 몇 개 넣을지, 어떤 값을 바꿀 수 있게 할지, 점수나 그래프를 넣을지 같은 것들입니다. 저는 수업에서 꼭 필요한 것만 답하고 나머지는 AI에게 맡깁니다.
막혔을 때
부탁문이 너무 길어 보입니다. 길어도 괜찮습니다. 짧고 막연한 부탁이 오히려 엉뚱한 결과를 만듭니다.
AI가 묻지 않고 바로 만들기 시작했습니다. 그대로 두셔도 괜찮습니다. 결과를 보고 4단계와 5단계에서 고칩니다.
무엇을 만들지 정하지 못하겠습니다. 이번 주 수업에서 가장 번거로웠던 순간 하나를 적습니다. 칠판에 그림으로 설명하기 답답했던 장면이면 가상 실험실, 매번 종이로 하던 확인 문제면 퀴즈, 모둠 활동 시간을 재느라 바빴다면 타이머가 됩니다. 연수 허브의 전시실에서 제가 만든 것들을 둘러보셔도 좋습니다.
보내고, 기다리고, 열어 보기
15분부탁문을 보내 index.html을 받고, 브라우저에서 움직이는지 확인해보겠습니다!
도구별 순서
- 앱입력칸에 부탁문을 붙여넣고 보내기Ctrl+V → 보내기(↑) 버튼
- 앱되묻는 질문에 답하기짧게. 모르겠으면 "네가 정해 줘"
- 앱파일을 만들어도 되냐고 물으면 위치를 보고 허용하기수업도구 폴더 안이면 [허용]. 다른 곳이면 멈추고 손 들기
- 앱다 됐다고 하면 index.html 열기수업도구 폴더에서 index.html 더블클릭
- 웹 채팅부탁문을 붙여넣고 보내기Ctrl+V → 보내기
- 웹 채팅질문에 답하고 코드가 끝까지 나올 때까지 기다리기마지막 줄이 </html> 이면 끝까지 나온 것
- 웹 채팅답을 통째로 복사해 아래 코드 도우미에 붙여넣기복사 버튼 → 코드 도우미 칸 클릭 → Ctrl+V → [미리보기]. 복사 요령은 바로 아래
- 웹 채팅수업도구 폴더에 index.html로 저장하고 열기[index.html로 저장] → 수업도구 폴더 → 저장한 파일 더블클릭
웹 채팅도구마다 코드를 복사하는 자리가 다릅니다
답 전체를 통째로 복사해도 되고, 코드가 따로 나오면 그 상자의 복사 버튼을 눌러도 됩니다.
- ChatGPT코드는 채팅 안의 코드 상자로 나오거나, 내려받는 파일 카드로 나옵니다. 코드 상자면 오른쪽 위의 복사 버튼을, 파일 카드면 눌러서 내려받습니다.
- Claude답에 나온 파일 카드를 누르면 오른쪽 창이 열립니다. 눈 모양으로 움직이는지 먼저 보고, [복사]로 코드를 복사하거나 [다운로드]로 파일을 받습니다.
- Gemini보내기 전에 입력칸 왼쪽 +에서 Canvas를 켭니다. 캔버스의 [미리보기]로 확인하고 [다운로드]로 파일을 받습니다. 코드를 붙여넣으려면 [코드]에서 전체를 선택해 복사합니다.
- SenGPT답 아래의 복사 버튼을 누릅니다.
파일로 내려받았다면 코드 도우미는 건너뛰고, 받은 파일의 이름을 index.html로 바꿔 수업도구 폴더에 넣습니다. 사진은 2026년 9월 30일 화면입니다.
화면 이름과 버튼 자리는 앱이 업데이트될 때마다 조금씩 바뀝니다. 복사 버튼이 잘 안 보이면 답을 마우스로 끝까지 끌어 선택한 뒤 Ctrl+C로 복사해도 됩니다. 무료 계정은 한 번에 쓸 수 있는 양과 하루 사용량이 작아서, 긴 코드가 중간에 끊기거나 오늘 한도에 도달했다는 안내가 나올 수 있습니다. 그때는 4·5단계의 고치기를 한 번에 하나씩만 부탁합니다.
웹 채팅코드 도우미
설명이 섞인 답을 통째로 붙여넣어도 코드만 골라 미리 보여 주고, 파일로 저장합니다.
채팅 답을 메모장에 붙여 저장하면 파일이 .txt로 저장되거나 설명 문장이 섞여 들어가 열리지 않는 일이 자주 생깁니다. 그래서 코드 부분만 골라 바로 .html로 저장하는 도우미를 이 페이지에 넣었습니다. 붙여넣은 내용은 선생님 컴퓨터 안에서만 처리되고 어디로도 보내지 않습니다.
처음 결과는 70%면 충분합니다
어설퍼도 움직이기만 하면 다음 단계로 넘어갑니다.
저는 한 번에 완성본이 나온 적이 거의 없습니다. 초안은 금방 나오지만 시간은 대부분 고치는 데 들어갑니다. 그래서 첫 화면이 조금 어설퍼도 움직이기만 하면 4단계로 넘어갑니다. 처음부터 완벽하게 만들려고 붙잡고 있으면 60분 안에 보관함까지 가지 못합니다.
막혔을 때
한참 기다려도 반응이 없습니다. 화면 아래에 허용을 묻는 창이 떠 있는지 봅니다. 멈춘 것처럼 보이면 대개 선생님 대답을 기다리는 중입니다.
웹 채팅에서 코드가 중간에 끊겼습니다. 무료 계정에서 자주 있는 일입니다. "처음부터 끝까지 다시, 설명은 빼고 코드만 써 줘"라고 보냅니다. 그래도 끊기면 기능을 하나 줄여 달라고 합니다.
index.html이 어디 있는지 모르겠습니다. 도구에게 "방금 만든 파일 위치를 알려 줘"라고 물으면 경로를 알려 줍니다.
파일을 열었더니 하얀 화면만 나옵니다. 도구에게 "하얀 화면만 나와. 원인을 찾아서 고쳐 줘"라고 보냅니다. 웹 채팅 갈래라면 코드 도우미의 미리보기에서 먼저 확인합니다.
학생에게 주기 전 30초 점검
5분끝까지 밀고 눌러 보고, 숫자와 정답을 보고, AI에게 틀린 곳을 물어보겠습니다!
눈으로 네 가지
- 끝까지 밀고, 빠르게 여러 번 눌러 보기슬라이더는 양 끝과 0까지, 버튼은 연달아, 빈칸은 비운 채로. 화면이 깨지거나 NaN이 뜨면 적어 두기
- 숫자마다 단위, 용어는 교과서대로인지 보기과학은 압력 kPa·온도 ℃·부피 mL처럼, 다른 교과는 용어·연도·맞춤법까지
- 정답과 계산이 맞는지 보기퀴즈라면 정답을 하나씩, 방탈출이라면 단서와 정답이 이어지는지, 그래프라면 모양까지. 보일 법칙이면 직선이 아니라 반비례 곡선
- 학생이 이 화면만 보고 잘못 배울 곳 찾기예: 온도를 올렸더니 입자 크기가 커진다 · 사건 순서가 뒤바뀐 연표
AI에게 한 번 더 묻기
코드는 아직 바꾸지 말고 목록만 받습니다. 고치는 것은 5단계에서 하나씩 합니다.
AI가 만든 도구는 그럴듯하게 움직이지만, 시뮬레이션이라면 식으로 계산하지 않고 모양만 흉내 낸 경우가 있고, 퀴즈라면 정답이 틀린 채로 들어 있는 경우가 있습니다. 기본값 근처에서는 맞아 보이다가 끝까지 밀거나 하나씩 풀어 보면 드러납니다.
저는 이 점검을 수업에도 씁니다. 기체 단원에서 일부러 틀리게 만든 시뮬레이션 세 개를 학생들에게 주고 틀린 곳을 찾게 했는데, 숨겨 둔 결함이 모두 열한 개였습니다. 학생들은 찾은 결함을 AI에게 말로 고치게 하는 데까지 해 봤습니다.
말로 고치기, 한 번에 하나씩
15분고칠 곳 하나를 집어 말하고, 새로고침해서 확인하는 것을 두세 번 반복해보겠습니다!
고칠 곳은 하나만 집어서
부탁 끝에 "나머지는 그대로 둬"를 붙입니다.
좀 더 보기 좋게 해 줘.
온도 슬라이더만 화면 오른쪽으로 옮겨 줘. 나머지는 그대로 둬.
잘 되던 곳까지 새로 짜여서, 처음부터 다시 확인해야 합니다.
바뀐 곳이 하나라서, 확인도 그곳만 하면 됩니다.
"좀 더 보기 좋게"처럼 넓게 부탁하면 AI가 잘 되던 부분까지 새로 짜는 일이 생깁니다. 저는 고칠 곳 하나를 이름으로 부르고 끝에 "나머지는 그대로 둬"를 붙입니다. 고친 뒤에는 새로고침으로 확인하고 다음 것으로 넘어갑니다.
카드자주 쓰는 고치기 부탁
필요한 카드를 복사해 붙여넣습니다.
웹 채팅웹 채팅 갈래에서는 카드 뒤에 "고친 코드 전체를 다시 보여 줘"를 붙이고, 받은 답을 코드 도우미로 다시 저장합니다.
디자인옷은 서랍에서 골라 입힙니다
색·글꼴·모양을 적은 설계서를 골라 AI에게 맡기면, 기능은 그대로 두고 디자인만 바뀝니다.
"예쁘게 해 줘"라고 하면 AI가 매번 다른 옷을 입힙니다. 그래서 저는 설계서 한 장을 골라 두고 "이 설계서대로 디자인만 바꿔 줘"라고 합니다. 서랍에는 설계서 74개와 쓰시는 도구에 맞는 부탁문 빌더가 들어 있습니다.
토큰과 긴 대화
AI가 읽고 쓰는 양만큼 요금제 한도가 줄어듭니다. 대화가 길어지면 AI가 앞부분을 스스로 요약해서 이어 갑니다.
요약에서 빠진 약속도 파일에 있으면 다시 지켜집니다.
토큰은 AI가 글을 읽고 쓰는 단위입니다. 요금제의 사용 한도는 메시지 개수보다 이 토큰을 얼마나 썼는지에 따라 줄어듭니다. "파일 전체를 다시 써 줘"는 파일 한 장을 통째로 다시 쓰는 일이라 가장 많이 씁니다. Claude 앱과 Codex는 고칠 부분만 바꾸니 훨씬 덜 쓰고, 웹 채팅처럼 고칠 때마다 코드 전체를 다시 받는 방식은 한 번에 파일 한 장만큼 씁니다.
대화가 길어지면 AI가 앞부분을 스스로 요약해서 이어 갑니다. 다만 요약하면서 자잘한 약속이 빠질 수 있어서, 저는 꼭 지킬 규칙을 파일에 적어 두고 "이 규칙을 읽고 시작해 줘"라고 합니다. Claude 앱이나 Codex처럼 폴더에서 일하는 도구는 만든 파일이 그대로 남아 있어서, 새 대화를 열어도 "이 폴더의 index.html을 이어서 고쳐 줘" 한 줄이면 이어집니다. 처음부터 다시 올려야 하는 것은 코드가 채팅창 안에만 있는 웹 채팅 쪽입니다.
막혔을 때
고쳐 달라고 했더니 다른 부분까지 바뀌었습니다. "방금 고치기 전으로 되돌려 줘"라고 한 뒤, 고칠 곳 하나만 다시 부탁합니다.
새로고침해도 바뀐 것이 보이지 않습니다. 웹 채팅 갈래라면 새 코드를 코드 도우미로 다시 저장했는지 봅니다. 앱 갈래라면 AI가 다른 파일을 고쳤을 수 있으니 "어느 파일을 고쳤는지 알려 줘"라고 묻습니다.
사용량이 다 떨어졌다고 나옵니다. 몇 시간 단위로 다시 채워집니다. 같은 부탁을 여러 번 되풀이하는 것이 가장 많이 쓰니, 부탁을 하나로 모아 짧게 보냅니다.
GiteacherHub에 올려 서로 열어 보기
10분만든 index.html을 보관함에 올리고, 다른 모듈에서 만드신 선생님들의 앱도 열어보겠습니다!
올리는 순서
PIN은 앞 화면에 있습니다. GitHub 계정이 없어도 올라갑니다.
- 회차를 고르고 앞 화면의 PIN 넣기[올리기 열기] → 회차 → PIN → [확인]
- index.html을 끌어다 놓고 미리보기로 한 번 더 확인하기수업도구 폴더의 index.html → 점선 칸으로 끌기
- 제목·학교급·과목·목적 고르기제목은 파일 안의 제목이 먼저 채워집니다
- 대표 화면 붙여넣기 (선택)앱 화면에서 Win+Shift+S로 캡처 → 대표 화면 칸 클릭 → Ctrl+V
- 고치기 비밀번호를 정하고 개인정보 없음에 체크한 뒤 올리기비밀번호는 나중에 파일을 바꾸거나 내릴 때 씁니다
보관함은 배포를 하지 않아도 서로 만든 것을 바로 열어 볼 수 있게 만든 곳입니다. 올린 앱은 바로 목록에 올라옵니다. 올리기 전에 학생 이름이나 사진이 들어 있지 않은지 한 번 더 봐주시길 바랍니다~! 혹시 보이면 제가 바로 내립니다. 앱마다 의견을 남길 수 있어서, 다른 선생님이 어떻게 고쳐 쓰셨는지도 모입니다.
막혔을 때
PIN이 맞지 않다고 나옵니다. 앞 화면의 숫자를 다시 봅니다. 회차가 닫혀 있으면 저에게 말씀해 주세요.
파일이 2MB보다 크다고 나옵니다. 사진을 파일 안에 넣은 경우입니다. 도구에게 "넣은 이미지를 작게 줄여 줘"라고 부탁하고 다시 올립니다.