4편에서 학생용 outputs/fractions-worksheet.md와 교사용 outputs/fractions-answers.md를 검토했다. 이제 풀이 공간과 쪽 나눔을 정할 차례다. 문제와 답을 쓰는 칸을 함께 배치하고, 실제 수업에 나눠 줄 모양으로 옮긴다.
HTML은 제목, 문단, 문제 영역처럼 문서의 구조를 적는 형식이다. 브라우저에서 열어 볼 수 있고, CSS라는 꾸밈 규칙으로 글꼴과 간격을 조절할 수 있다. AI에게 HTML 파일 작성을 맡기고 교사는 브라우저에서 글자 크기와 풀이 공간을 판단한다. 웹사이트를 공개하거나 서버를 운영하는 단계는 필요하지 않다.
이번 작업의 주 결과물은 고칠 수 있는 HTML이고, PDF는 확인한 HTML을 인쇄해 얻는 배포본이다. 내용의 기준인 Markdown 원고도 함께 보관한다. PDF에서 잘린 부분을 발견하면 HTML을 고친 뒤 다시 저장한다.
이번에는 4편에서 승인한 예상 → 그림 탐구 → 조건 바꾸기 → 출제와 개선 → 성찰의 흐름을 종이에 옮긴다. 아래 코드는 실제 실습용 활동지다. 자신의 작업에서도 승인한 내용과 그림의 크기 관계를 그대로 유지한다.
실제로 만든 HTML과 PDF 열어 보기
앞 장의 원고로 학생용·교사용 HTML을 만들고, 네이버에서 받은 나눔고딕을 연결해 Chromium에서 PDF로 출력했다. 아래는 저장된 학생용 PDF의 두 쪽이다. 첫 쪽의 예상과 같은 전체 탐구, 둘째 쪽의 다른 전체 비교와 직접 출제·성찰 공간을 살펴보자.
미리보기 안에서 스크롤하면 마지막 문항까지 볼 수 있습니다. 아래에서 HTML 코드를 펼쳐 보세요.
HTML 코드 펼쳐 보기
<!doctype html><html lang="ko"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>분수 비교 탐구 - 학생용</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body, {throwOnError: true});"></script> <style>@font-face{font-family:Nanum;src:url("assets/fonts/NanumGothic.ttf")}@font-face{font-family:Nanum;src:url("assets/fonts/NanumGothicBold.ttf");font-weight:700}:root{--ink:#222;--accent:#222;--rule:#aaa;--paper:white;--warm:#222}*{box-sizing:border-box}body{margin:0;padding:28px 12px;background:#ededeb;color:var(--ink);font:10.5pt/1.6 Nanum,sans-serif}body.A4 .sheet{width:100%;max-width:210mm;height:auto;overflow:visible;margin:0 auto 24px;padding:15mm;background:white;box-shadow:none;page-break-after:auto}h1,h2,p{margin:0}h1{font:700 21pt/1.3 Nanum,sans-serif;letter-spacing:-.5px;margin:3mm 0 5mm;max-width:155mm}h2{font:700 13pt/1.5 Nanum,sans-serif;margin:0 0 2mm}p{margin-bottom:2mm}h2::first-letter{color:var(--accent)}.eyebrow{font-size:9pt;font-weight:700;letter-spacing:0;color:var(--accent);padding-top:0}.meta{display:flex;justify-content:space-between;font-size:9pt;padding-bottom:4mm;border-bottom:1px solid var(--rule)}.intro{margin:5mm 0;padding:0;border:0;background:white}.intro b{font-size:9pt;color:var(--accent)}.intro p{margin:0}.question{margin:5mm 0;break-inside:avoid}.work{min-height:13mm;margin:1mm 0 3mm;border:0;border-bottom:1px dotted #bbb;border-radius:0;background:white}.bar-label{font-size:9pt;font-weight:700;margin-top:3mm}.equation{margin:4mm 0;padding:3mm 0;border:0;text-align:left;font-size:14pt;font-weight:700}.page-label{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:3mm;margin-bottom:5mm;font-size:9pt;letter-spacing:1px}.footer{display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:2mm;margin-top:5mm;color:var(--accent);font-size:8pt}.choices{padding:3mm 4mm;background:var(--paper);margin:3mm 0}.reflect{border:0;padding-left:0}.new-page>h2{margin-top:4mm}*{print-color-adjust:exact;-webkit-print-color-adjust:exact}@page{size:A4;margin:15mm}@media print{body.A4{width:auto;padding:0;background:white}body.A4 .sheet{width:auto;max-width:none;margin:0;padding:0;box-shadow:none;border:0}.new-page{break-before:page}}@media(max-width:600px){body{padding:8px}body.A4 .sheet{padding:20px}h1{font-size:23px;letter-spacing:-.5px}.meta{flex-wrap:wrap;gap:8px}.work{min-height:60px}} </style></head><body class="A4"> <main class="sheet"><div class="eyebrow">분수 · 탐구 활동</div><h1>분수의 크기와 먹은 양</h1><div class="meta"><span>이름 ____________________</span><span>예상 → 관찰 → 질문 → 나만의 문제</span><span>25–30분</span></div><section class="intro"><b>오늘의 탐구</b><p>그림으로 분수를 비교하고, 비교에 필요한 조건을 찾아 친구에게 설명합니다.</p></section><section class="question"><h2>1. 먼저 예상하기</h2><p>민수는 피자의 \(\frac{3}{4}\), 지우는 \(\frac{5}{8}\)을 먹었습니다. 누가 더 많이 먹었다고 생각하나요? 판단에 필요한 정보도 적어 보세요.</p><div class="work"></div><p class="bar-label">어떤 정보가 더 필요할까? 나의 예상과 이유</p><div class="work"></div></section><section class="question"><h2>2. 같은 크기의 피자라면?</h2><p>두 막대는 같은 크기의 피자 한 판을 나타냅니다. 위에는 \(\frac{3}{4}\), 아래에는 \(\frac{5}{8}\)만큼 색칠하세요.</p><p class="bar-label">A 민수 · 4등분한 피자</p><div style="display:flex;width:100%;height:32px;border:1px solid #234"><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span></div><p class="bar-label">B 지우 · 8등분한 피자</p><div style="display:flex;width:100%;height:32px;border:1px solid #234"><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span></div><p>위 막대의 각 조각을 다시 반으로 나누어 보세요.</p><p class="equation">\(\frac{3}{4}\) = \(\frac{\square}{8}\) \(\frac{3}{4}\) □ \(\frac{5}{8}\)</p><p>그림을 근거로 처음 예상을 고쳐 설명해 보세요.</p><div class="work"></div></section><footer class="footer"><span>같은 전체를 나누어 비교하기</span><span>탐구 기록 01 / 02</span></footer></main><main class="sheet new-page"><div class="page-label"><b>분수 비교</b><span>조건을 바꾸고, 내 문제로 확장하기</span></div><h2>3. 전체의 크기가 달라지면?</h2><p>이번에는 민수의 피자가 더 작습니다. 각 그림의 색칠한 부분이 먹은 양입니다. 두 피자 그림은 같은 축척으로 그렸습니다.</p><div style="max-width:160px"><p>민수: 작은 피자의 \(\frac{3}{4}\)</p><div style="display:flex;width:100%;height:32px;border:1px solid #234"><span style="flex:1;border-right:1px solid #234;print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#b8b8b8"></span><span style="flex:1;border-right:1px solid #234;print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#b8b8b8"></span><span style="flex:1;border-right:1px solid #234;print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#b8b8b8"></span><span style="flex:1;border-right:1px solid #234;background:white"></span></div></div><div style="max-width:320px"><p>지우: 큰 피자의 \(\frac{5}{8}\)</p><div style="display:flex;width:100%;height:32px;border:1px solid #234"><span style="flex:1;border-right:1px solid #234;print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#b8b8b8"></span><span style="flex:1;border-right:1px solid #234;print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#b8b8b8"></span><span style="flex:1;border-right:1px solid #234;print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#b8b8b8"></span><span style="flex:1;border-right:1px solid #234;print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#b8b8b8"></span><span style="flex:1;border-right:1px solid #234;print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#b8b8b8"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span><span style="flex:1;border-right:1px solid #234;background:white"></span></div></div><p>먹은 양이 더 많은 사람: __________</p><p>\(\frac{3}{4}\)과 \(\frac{5}{8}\) 중 큰 분수: __________</p><p>두 답이 다른 이유를 ‘전체의 크기’를 넣어 설명하세요.</p><div class="work"></div><p>그림 없이 분수만 주어졌다면 먹은 양을 비교하려고 무엇을 물어볼까요?</p><div class="work"></div><section class="question"><h2>4. 내가 만드는 비교 문제</h2><p>같은 크기의 전체를 기준으로 분수 두 개를 고르세요. 친구가 그림으로 비교할 문제를 만들고 정답과 이유를 별도 종이에 적으세요.</p><p>내가 고른 분수: ________ 와 ________</p><div class="work" style="min-height:30mm"></div><p>친구가 풀며 궁금했던 점을 적고, 그 의견으로 문제나 설명을 고쳐 보세요.</p><div class="work"></div></section><section class="question"><h2 class="reflect">처음 생각에서 달라진 점</h2><p>처음에는 __________. 그림으로 __________을 확인했다. 이제는 __________라고 설명할 수 있다.</p><div class="work"></div></section><footer class="footer"><span>분수의 크기와 실제 양을 구분해 설명할 수 있나요?</span><span>탐구 기록 02 / 02</span></footer></main></body></html>
미리보기에서 글자 크기, 분수 표시, 풀이 공간을 살펴보자. 바꾸고 싶은 부분은 “본문 글자를 조금 키워 주세요”, “3번 풀이 칸을 두 줄 늘려 주세요”처럼 요청하면 된다.
5. 화면과 인쇄 미리보기를 오가며 고치기
파일을 브라우저로 열어 예상, 같은 전체와 다른 전체의 그림, 직접 출제와 마지막 성찰 칸을 차례로 읽자. 창을 좁혀 휴대전화 폭에서도 문장이 편하게 읽히는지 본다. 이어서 인쇄 미리보기에서 A4 쪽 나눔을 확인한다.
다음 순서로 학생용과 교사용을 각각 확인한다.
수식과 글꼴이 모두 표시될 때까지 기다린다. 원고와 비교해 분자·분모·부등호, 문항 번호와 문장을 확인한다.
Windows에서는 Ctrl+P, macOS에서는 Command+P로 인쇄 창을 연다. A4, 세로, 배율 100%를 기준으로 보고 머리글·바닥글을 끈다. 브라우저에 따라 여백 기본값이 CSS와 다르게 적용되면 사용자 지정 여백을 사방 15mm로 맞춘다. 본문 안쪽 여백을 추가하지 않는다.
첫 쪽부터 끝 쪽까지 넘기며 문제와 풀이 칸이 떨어지는지, 수식의 분모와 오른쪽 끝이 잘리는지, 불필요한 빈 쪽이 생기는지 본다. 그림의 색칠한 부분은 흑백 출력에서도 구분되어야 한다. 특히 3번의 색칠과 두 배 크기 관계가 PDF에도 남는지 확인한다.
인쇄 창을 닫고 AI에게 관찰한 위치와 원하는 변화를 설명한다. 파일을 고친 뒤 브라우저를 새로고침하고 같은 인쇄 설정으로 다시 확인한다.
잘린 부분을 발견하면 다음처럼 위치와 수정 방향을 연결해 요청할 수 있다.
미리보기에서 보인 모습
수정 요청
다시 볼 모습
4번 문제는 1쪽, 풀이 칸은 2쪽
문제와 칸을 같은 영역으로 묶고 함께 다음 쪽으로 이동
2쪽에서 문제를 보며 풀이 가능
긴 수식의 오른쪽이 잘림
수식 전개를 의미 단위로 나누고 인쇄 시 숨김·스크롤 제거
식의 마지막 항과 부등호까지 표시
마지막 친구 설명 칸만 좁아짐
승인한 풀이 공간을 유지하고 앞 영역 간격이나 쪽 나눔 조정
학생이 설명을 쓸 공간 확보
학생용 끝에 해설이 붙음
학생용 파일에서 해설 제거, 교사용 파일에만 보관
학생용 전체 쪽에 연습 정답 없음
“4번 풀이 칸이 다음 쪽으로 넘어갑니다. 본문 11pt와 풀이 칸 높이는 유지하고, 4번부터 다음 쪽에 배치해 주세요”처럼 말하면 된다. 공간 때문에 문항이나 해설 문장을 바꿔야 한다면 Markdown 원고부터 수정하고 내용 검토를 다시 거친 뒤 두 HTML에 반영한다.
6. PDF로 저장하고 확인한 조건을 남기자
배치가 정리되면 인쇄 창의 PDF로 저장 또는 운영체제의 PDF 저장 기능으로 outputs/worksheet.pdf와 outputs/answers.pdf를 각각 저장한다. PDF를 다시 열어 페이지 수와 수식, 풀이 칸을 확인한다. 교사용을 학생용 파일명으로 저장하지 않았는지도 첫 제목과 마지막 쪽을 보고 판단한다. 실제 프린터에 배포할 예정이면 한 부를 시험 인쇄해 글자 크기와 필기 공간을 확인하자. 브라우저와 프린터에 따라 결과가 달라질 수 있다.
확인한 사실은 outputs/print-review.md에 남긴다. 사용한 브라우저, A4·15mm·100% 설정, 학생용과 교사용 PDF의 실제 쪽 수, 고친 쪽 나눔, 수식과 해설 분리 확인 결과를 적는다. 교사가 미리보기에서 본 내용을 AI에게 전달해 기록하게 해도 좋다. 종이 시험 인쇄 여부도 함께 적어 두면 다음 출력 때 참고할 수 있다.
학교에서 HWPX 제출이 필요하면 별도 결과물로 추가한다. 기존 원본을 보존하고 승인된 템플릿에 내용을 넣은 뒤, 한글에서 열어 표·수식·쪽 나눔을 사람이 고친다. 이번 실습에서는 HTML과 그 HTML에서 확인해 저장한 PDF까지 완성한다.
이제 원본 분석에서 원고 검토, HTML 배치, 출력 확인까지 한 번의 작업이 이어졌다. 6편에서는 이번에 실제로 잘 된 요청과 확인 방법을 모아, 다음 자료에서도 다시 쓸 수 있는 스킬로 정리한다.
💬 댓글
이 글에 대한 의견을 남겨주세요