처음 › 3부 테마별 실습
테마 6 · 공통 13분바이브 코딩 — 업무 도구·행사 홈페이지
코드를 몰라도 '주문서'만으로 업무 도구나 행사 홈페이지를 만들고, 넷리파이로 진짜 주소까지 만듭니다. 연수 중에는 ② 업무 도구(★ 하나)를 함께 만들고, 홈페이지와 넷리파이는 연수 뒤에 해 봅니다.
GeminiClaudeChatGPT넷리파이
1
주문서 공식과 만드는 곳
1분무료
| 주문서 다섯 줄 | 예 |
|---|---|
| ① 무엇을 만드나 | 연수 운영 체크리스트 웹 도구 |
| ② 누가 언제 쓰나 | 연수 담당자가 준비부터 사후까지 |
| ③ 화면에 무엇이 | 3단계 목록 · 진행률 막대 · 10분 타이머 |
| ④ 규칙·계산 | 체크하면 진행률이 오르고, 새로고침해도 남게 |
| ⑤ 조건 | 인터넷 없이 열리는 HTML 한 파일, 개인정보 저장 안 함, 큰 글씨 |
| 만드는 곳 | 만들기 | 주소 만들기 |
|---|---|---|
| Gemini 캔버스 추천 | 입력창 [캔버스] → 주문서 → 오른쪽 미리 보기 | 공유 및 내보내기 › 공유 › 링크 복사 (Gemini 안에서 열림, 18세 미만은 못 봄) |
| Claude | 주문서 → 오른쪽에 바로 완성, 디자인이 깔끔 (무료 한도 작음) | 무료는 링크 공유 안 됨 → 내려받아 넷리파이 |
| ChatGPT | 주문서 → 답 속 코드 칸의 [Preview] | 코드 [복사] → 메모장 → index.html → 넷리파이 |
고치기 요령한 번에 하나만 · 보이는 대로 말하기("버튼을 눌러도 아무 일이 없어") · 오류 문구는 그대로 붙여 넣기 · 망가지면 "바로 전 버전으로 돌려 줘"
2
업무 도구 — 하나 골라 만들기
12분무료Gemini공통 · ★ 하나
- 1아래 7가지 중 하나를 고릅니다. 처음이면 ★ 하나부터.
- 2Gemini 입력창에서 캔버스를 고르고 지시문을 붙여 넣습니다.
- 3오른쪽 미리 보기에서 직접 눌러 보고, '고쳐 보기'를 한 번 해 봅니다.
- 4[완성 예시 열기]로 강사가 같은 지시로 만든 결과와 비교합니다.
★ · 8분
1. 연수 운영 체크리스트
지시문
연수 운영 체크리스트 웹 도구를 만들어 줘. 연수 전·당일·후 3단계로 나누고, 체크할 때마다 진행률 막대가 올라가게 해 줘. 10분 타이머 버튼도 넣어 줘. 항목을 추가·삭제할 수 있고, 새로고침해도 체크가 남게 해 줘. 인터넷 없이 열리는 HTML 한 파일로.
고쳐 보기: “우리 교육청 색(남색)으로 바꾸고 글씨를 크게 해 줘”
★ · 8분
2. 공문서 바로 쓰기 OX 퀴즈
지시문
공문서 맞춤법·표기 OX 퀴즈 10문항을 웹 도구로 만들어 줘. 답을 누르면 맞았는지와 해설이 나오고, 마지막에 점수와 '다시 풀기' 버튼이 보이게 해 줘. 문항은 행정업무 규정과 표준어 규정에 맞는 것만. 인터넷 없이 열리는 HTML 한 파일로.
고쳐 보기: “문항마다 근거 규정을 한 줄씩 달아 줘 — 그리고 근거를 직접 확인하기”
★ · 6분
3. 발표 순서·모둠 추첨기
지시문
발표 순서·모둠 추첨기를 웹 도구로 만들어 줘. 한 줄에 하나씩 이름을 붙여 넣으면 ① 한 명 뽑기(두근두근 돌아가는 효과) ② 전체 순서 정하기 ③ 모둠 수를 정해 고르게 나누기가 되게 해 줘. 뽑힌 사람은 다시 안 뽑히게 고를 수 있게. 인터넷 없이 열리는 HTML 한 파일로.
고쳐 보기: “뽑힐 때 축하 효과와 효과음을 넣어 줘”
★★ · 10분
4. 회의·발표 타이머
지시문
회의·발표 타이머를 웹 도구로 만들어 줘. '이름, 분'을 한 줄씩 넣으면 순서대로 시간을 재고, 화면 가득 큰 숫자로 보여 줘. 1분 남으면 주황, 시간이 넘으면 빨강으로 바뀌고 넘은 시간도 보여 줘. 다음 사람 버튼, 전체 화면 버튼도. 인터넷 없이 열리는 HTML 한 파일로.
고쳐 보기: “끝나기 30초 전에 짧은 알림음이 나오게 해 줘”
★★ · 12분
5. 공문 날짜·요일 검사기
지시문
공문 날짜·요일 검사기를 웹 도구로 만들어 줘. 본문을 붙여 넣으면 '2026. 11. 18.(목)', '11. 7.(금)', '2026.11.18', '11월 18일(수)' 같은 날짜를 모두 찾아서, 실제 요일과 맞는지 표로 보여 주고 본문에도 색으로 표시해 줘. 연도가 없으면 기준 연도로 계산하고, 공문서 표기 '2026. 11. 18.(수)'로 고친 모양도 보여 줘. 인터넷 없이 열리는 HTML 한 파일로.
고쳐 보기: “테마 2의 가상 공문을 넣었을 때 틀린 요일 2개를 모두 잡는지 확인하기”
★★★ · 15분
6. 강사수당 계산기
지시문
강사수당 계산기를 웹 도구로 만들어 줘. 최초 1시간 단가와 초과 1시간당 단가를 바꿀 수 있게 하고, 강사마다 시간을 넣으면 지급액·소득세·지방소득세·실지급액을 표로 계산해 줘. 세금은 기타소득(필요경비 60%), 소득세 20%, 지방소득세는 소득세의 10%, 10원 미만 버림, 기타소득금액 5만 원 이하는 0원. 합계 줄과 '엑셀용으로 복사' 버튼도. 인터넷 없이 열리는 HTML 한 파일로.
고쳐 보기: “테마 2에서 지침 원문으로 확인한 단가를 기본값으로 — 결과는 손으로 한 번 검산”
★★ · 10분
7. AI 활용 5단계 자가진단
지시문
AI 활용 5단계 자가진단을 웹 도구로 만들어 줘. 단계는 Lv1 물어보기, Lv2 맡기기, Lv3 길들이기, Lv4 도구 만들기, Lv5 자동 실행. 단계마다 '해 본 적 있다' 체크 문항 2개씩, 결과 보기를 누르면 내 단계를 계단 그림으로 보여 주고 다음 단계에서 해 볼 일 3가지를 추천해 줘. 인터넷 없이 열리는 HTML 한 파일로.
고쳐 보기: “우리 부서 연수에 맞게 문항을 바꿔 줘”
강사수당 계산기를 쓸 때
기타소득(필요경비 60%) 기준 예시입니다. 소득 구분(사업소득 3.3% 등)은 원천징수 담당과 확인합니다.
3
행사 홈페이지 만들기
7분무료Gemini연수 뒤
- 1Gemini 입력창에서 캔버스를 고르고 주문서를 붙여 넣습니다.
- 홈페이지 주문서
'2026 하반기 학교 인성교육 담당자 협의회' 안내 홈페이지를 만들어 줘. - 누가 보나: 초등학교 인성교육 담당 선생님(휴대폰으로 많이 봄) - 들어갈 내용: 맨 위 큰 제목과 한 줄 소개, 행사 개요(일시·장소·대상), 진행 순서 표, 2026 성과 숫자 4개, 신청·제출 기한 표, 자주 묻는 질문 3개(누르면 펼쳐짐) - 모양: 차분한 초록과 따뜻한 주황, 큰 글씨, 휴대폰에서도 보기 좋게, 위쪽에 메뉴(누르면 해당 칸으로 이동) - 조건: 인터넷 없이 열리는 HTML 한 파일(index.html), 개인정보·연락처는 넣지 않음 - 내용은 아래 원고를 그대로 써 줘.
- 2이어서 원고를 붙여 넣습니다.
원고 — 교정한 공문 (테마 2 가상 공문의 오류 12개를 고친 모습)
원고제목 2026 하반기 학교 인성교육 담당자 협의회 개최 안내 1. 관련: 2026 인천 인성교육 시행계획(초등교육과-○○○○, 2026. ○. ○.) 2. 2026 하반기 학교 인성교육 담당자 협의회를 아래와 같이 개최하오니, 담당 선생님께서는 참석해 주시기 바랍니다. 가. 일시: 2026. 11. 18.(수) 14:00~16:30 나. 장소: 인천광역시교육청 대회의실 다. 대상: 초등학교 인성교육 담당교사(각 교 1명) 라. 내용: 2026 인성교육 추진 성과 공유, 2027 시행계획 의견 수렴, 우수사례 발표(3교) 마. 참석 신청: 2026. 11. 13.(금)까지 업무포털 설문으로 신청 3. 출장 처리는 소속 학교에서 해 주시기 바랍니다. 4. 협의회 당일 주차 공간이 협소하니 대중교통을 이용해 주시면 감사하겠습니다. 5. 우수사례 발표교는 발표 자료를 2026. 11. 6.(금)까지 제출해 주시기 바랍니다. 6. 문의: 초등교육과 인성교육 담당
- 3오른쪽 미리 보기를 보며 한 가지씩 고칩니다.맨 위 배경을 부드러운 무늬로 · 진행 순서 표를 타임라인 모양으로 · 휴대폰에서 메뉴를 가로로 밀어 보게
4
넷리파이에 올려 진짜 주소 만들기
3분무료넷리파이연수 뒤 · 강사 1분 시연
무료 계정이 필요합니다. 연수 중에는 강사가 먼저 보여 드리고, 각자는 이 순서대로 해 보세요. 이 연수 사이트도 같은 방법으로 올렸습니다.
- 1결과를 index.html로 저장합니다.다운로드, 또는 코드 복사 → 메모장 → 다른 이름으로 저장 (이름 index.html · 형식 '모든 파일' · 인코딩 UTF-8)
- 2새 폴더에 index.html을 넣습니다. 그림을 쓰면 같이 넣습니다.
- 3app.netlify.com/drop에 폴더를 통째로 끌어 놓습니다. → ○○○.netlify.app 주소가 바로 생깁니다.
- 41시간 안에 가입·로그인해 내 계정으로 가져옵니다(claim).로그인 없이 올리면 임시 비밀번호가 걸리고 1시간 뒤 지워집니다.
- 5새 계정은 비공개로 시작합니다. Project configuration › General › Visitor access에서 공개로 바꾸고, 주소 이름은 Project Overview › Customize에서 정합니다.
공개 주소는 누구나 봅니다기관 행사의 공식 안내는 공문·누리집으로 하고, 이 주소는 보조로만 씁니다. 개인정보·연락처·내부 자료는 넣지 않습니다. 무료 요금제는 한 달 300크레딧(올리기 1번에 15크레딧, 약 20번)이고, 다 쓰면 내 사이트가 모두 멈춥니다. 기관 공식 홍보에 쓰기 전에는 소속 기관의 지침을 확인하세요.
강사 시연 C · 유료 — 다른 에이전트와 자동 배포
- Claude Code에게 "이 폴더를 넷리파이에 올려 줘" — 폴더 만들기부터 배포까지 대신 합니다.
- 다른 유료 에이전트: Claude Cowork(데스크톱 폴더 작업), ChatGPT 에이전트(웹 조사·입력), Gemini 딥리서치, 영상·음악 생성