Gemini 학습지 수정하는 법 — 메모장·뷰어·Gemini 상황별 완벽 정리

Gemini로 만든 HTML 학습지, 수정이 필요할 때 상황별로 방법이 다릅니다. 단어 하나 바꿀 때는 메모장, 보면서 수정할 때는 HTML 뷰어, 전면 수정할 때는 Gemini에게 맡기면 됩니다.
Gemini 학습지 수정하는 법 3가지 — 메모장 HTML뷰어 Gemini 상황별 안내
📋 이 글 핵심 3줄
  • 단어 하나 바꿀 때는 메모장 Ctrl+F로 30초 안에 끝납니다
  • 결과 보면서 수정할 때는 HTML 뷰어에 붙여넣으면 됩니다
  • 문제 유형 교체·추가는 Gemini에게 코드째로 맡기는 게 가장 빠릅니다
🤖 AI 수업자료 제작기 시리즈
코딩 지식 0%인 사회 교사가 AI 8종으로 수업자료 만드는 전 과정 기록
시리즈 전체 보기 →

수정 방법은 상황에 따라 다릅니다

Gemini가 만들어준 HTML 학습지를 그대로 쓸 수 없는 경우가 생깁니다. 학교 이름을 넣어야 하거나, 서술형 칸이 너무 좁거나 질문이 잘못 되었을 때, 혹은 문제를 완전 통째로 바꿔야 할 때입니다.

수정 방법은 세 가지입니다. 얼마나 수정해야되느냐에 따라 사용해야하는 도구가 달라집니다. 간단한 걸 Gemini에 맡길 필요 없고, 복잡한 걸 메모장으로 건드리면 코드가 망가지기 쉽습니다.

상황 수정 규모 도구
단어·날짜·학교명 교체 작다 메모장 Ctrl+F
줄바꿈·칸 크기·문제 순서 중간 HTML 뷰어
문제 교체·추가·유형 변경 크다 Gemini

방법 1 — 단어 하나 바꿀 때 : 메모장 Ctrl+F

학교 이름, 날짜, 오타 수정처럼 텍스트만 바꾸면 되는 경우입니다. HTML 파일을 메모장으로 열고 Ctrl+F를 누르면 찾기·바꾸기 창이 나타납니다.

HTML 학습지 파일을 메모장으로 열었을 때 코드 화면
▲ .HTML 파일을 메모장으로 열면 이런 화면이 나타납니다. 겁먹지 않아도 됩니다.

Ctrl+F를 누르면 찾기 창이 열립니다. '찾을 내용'에 바꾸고 싶은 텍스트를, '바꿀 내용'에 새 텍스트를 입력하고 '모두 바꾸기'를 누르면 됩니다. 일부라면 일부만 그냥 그대로 작성하고 저장하면 됩니다.

윈도우 10부터인가 html로 바꾸고 난 후에도 오른쪽 마우스 누르면 메모장으로 수정하는 버튼이 있어서 그 버튼 누르고 이렇게 수정하시면 됩니다.

메모장에서 Ctrl+F로 학교명 찾아 바꾸기 화면
▲ Ctrl+F → 찾기·바꾸기 → 모두 바꾸기. 30초면 끝납니다.
⚠️ 주의<> 사이의 코드는 건드리지 않습니다. 텍스트만 수정합니다.

방법 2 — 결과 보면서 수정할 때 : HTML 뷰어

줄바꿈을 추가하거나, 서술형 칸 크기를 키우거나, 문제 순서를 바꾸는 경우입니다. 메모장에서 수정하면 결과를 바로 확인할 수 없어서 저장하고 브라우저로 열어서하는 것을 추천드립니다.

HTML 뷰어를 쓰면 왼쪽에서 코드를 고치는 즉시 오른쪽에 결과가 나타납니다. https://html.onlineviewer.net/에 접속해서 코드 전체를 붙여넣으면 됩니다.

HTML 뷰어에서 코드 수정과 미리보기 실시간 확인 화면
▲ 왼쪽에서 코드를 수정하면 오른쪽 미리보기에 바로 반영됩니다.

수정이 끝나면 왼쪽 코드 전체를 다시 복사해서 메모장에 붙여넣고 저장합니다. 브라우저에서 열어 Ctrl+P로 PDF를 저장하는 과정은 A-03과 동일합니다. 이때 편한건 옆에 preview(full screen)으로 하면 웹으로 바로 열려서 여기서 PDF로 프린트 해서 하시면 됩니다!

방법 3 — 대수술이 필요할 때 : Gemini에게 코드째로 맡기기

문제 유형을 바꾸거나, 문제를 2~3개 추가하거나, 전체 디자인을 바꿔야 할 때입니다. 이 경우는 직접 수정하는 것보다 Gemini에게 코드를 통째로 넘기고 조건을 주는 것이 빠릅니다.

아래 프롬프트를 그대로 쓰면 됩니다. 코드 부분만 실제 파일 내용으로 바꿔서 붙여넣으면 됩니다.

📋 대수술 프롬프트
아래는 내가 만든 학습지 HTML 코드야. [코드 전체 붙여넣기] 아래 조건으로 수정해줘: - 3번 문제를 서술형으로 바꿔줘 (줄 4개짜리 쓰기 칸) - 문제 2개 추가해줘 (같은 단원, 같은 난이도) - 나머지는 그대로 유지해줘 수정된 HTML 코드 전체를 다시 출력해줘.
Gemini에 HTML 코드와 수정 조건을 붙여넣고 수정 결과를 받는 화면
▲ 코드 전체를 붙여넣고 조건을 주면 수정된 HTML 코드 전체가 출력됩니다.

Gemini가 수정된 코드를 출력하면 전체 복사 → 메모장에 붙여넣기 → .HTML로 저장 → 브라우저에서 열기 → PDF 저장 순서로 진행합니다. 사실 여기보다 더 고난이도는 직접 HTML을 수정하는 프로그램을 웹으로 제작하는 방법도 가능합니다. 그건 S2에서 하면 좋을 것같아서 여기는 초보급 난이도니 여기서 마무리 하도록 하겠습니다.

학습지 수정에 쓰이는 HTML 기초 10가지

메모장이나 뷰어에서 수정할 때 반복적으로 마주치는 코드입니다. 외울 필요는 없고, 필요할 때 찾아보는 용도로 사용합니다.

1
줄 바꾸기
<br> 원하는 위치에 넣으면 그 자리에서 줄이 바뀝니다.
2
굵게
<strong>텍스트</strong> 핵심 단어나 키워드를 강조할 때 사용합니다.
3
서술형 칸 높이 조절
min-height: 5em 숫자를 키우면 칸이 넓어집니다. 줄 약 4개 = 5em 기준.
4
글자 크기
font-size: 11px 숫자를 바꾸면 해당 영역 글자 크기가 바뀝니다.
5
위아래 간격
margin-bottom: 12px 문제 사이 간격을 조절합니다. 숫자가 클수록 넓어집니다.
6
밑줄
<u>텍스트</u> 빈칸 대신 밑줄 텍스트를 강조할 때 사용합니다.
7
인쇄 여백
margin: 12mm 10mm 위아래 12mm, 좌우 10mm. 숫자를 바꾸면 여백이 조절됩니다.
8
색상
color: #333333 #333333은 진한 회색. #000000은 검정. #ff0000은 빨강입니다.
9
주석 — 메모 남기기
<!-- 여기는 메모 --> 화면에 표시되지 않습니다. 어디서 뭘 수정했는지 메모할 때 씁니다.
10
인쇄 시 숨기기
@media print 이 안에 있는 코드는 인쇄할 때만 적용됩니다. 화면용·인쇄용 설정을 분리할 수 있습니다.
📋 상황별 수정 방법 정리
1
단어·학교명·날짜 → 메모장으로 열기 → Ctrl+F → 찾아 바꾸기
2
줄바꿈·칸 크기·간격 → htmledit.squarefree.com → 코드 붙여넣기 → 보면서 수정
3
문제 교체·추가·유형 변경 → Gemini에 코드 전체 붙여넣기 → 조건 입력 → 수정 코드 받기
🤖 AI 수업자료 제작기 — 전체 글 모아보기
뤼튼·Claude·ChatGPT·Gemini 등 AI 8종으로 수업자료 만드는 전 과정을 기록한 시리즈
시리즈 허브 바로가기 →
현직 고교 교사가 전하는 통합사회·경제의 정석. 고퀄리티 수업 PPT와 HTML 시뮬레이션 교구, 생생한 여행 기록을 통해 사회를 풀어냅니다.