JSON으로 옮겼는데, 내일 교재는 어떻게 만드나
한글·워드는 구조가 한눈에 보이고 복사가 쉽습니다. 대신 찾을 수가 없어 JSON으로 옮겼는데, 그러면 당장 내일 나갈 종이는 어떻게 만드나. HTML 템플릿으로 시험지·숙제·해설서를 각각 뽑는 방법과, 한 번 만든 디자인을 계속 쓰는 법.
한글이나 워드가 편한 이유는 분명합니다. 파일을 열면 구조가 눈에 바로 들어오고, 지난 시험지에서 지문 하나를 복사해 오는 것도 몇 초면 됩니다.
지난 글에서는 그럼에도 데이터가 추적되지 않는다는 점 때문에 JSON으로 옮기자고 썼습니다. 반년 뒤에 “그 빈칸 문제 어디 있지”가 되면 파일을 하나씩 열어보는 것 말고 방법이 없기 때문입니다.
그 글을 쓰고 나서 가장 많이 받은 반응이 이거였습니다.
당장 내일 교재를 만들어야 하는데, JSON을 갖고 어떻게 만듭니까.
맞는 지적입니다. JSON은 찾아지고 쌓이지만 그 자체로는 종이가 아닙니다. 학생에게 나눠 줄 수가 없습니다.

문항은 다 정리해 뒀는데 종이로 건너갈 다리가 없는 상태입니다.
그래서 만든 것이 HTML 템플릿입니다. 문항 데이터를 넣으면 시험지·연습문제·숙제·교재·클리닉지·해설서가 각각 A4로 나옵니다.

틀을 한 번 놓아 두면 그다음부터는 데이터가 그 틀을 지나 종이가 됩니다.
진짜 값은 두 번째 교재에서 나옵니다
한 번 뽑는 것만 놓고 보면 한글로 만드는 것과 크게 다르지 않습니다. 차이는 그다음에 생깁니다.
교재를 만들 때 실제로 시간이 나가는 곳은 문항이 아니라 모양을 다시 정하는 일입니다. 지난번에 마음에 들었던 그 모양이 있습니다. 모서리가 둥글었는지 각졌는지, 지문 왼쪽에 선이 있었는지 없었는지, 선지 사이가 얼마나 떴는지. 그걸 다시 만들어내려고 한참을 헤맵니다.
그러다 조금씩 달라집니다. 한 학기 지나고 그동안 나간 인쇄물을 나란히 놓아 보면, 같은 학원에서 나간 건데 서식이 네 종류입니다.
HTML 템플릿은 그 과정을 없앱니다. 한 번 만들어 두면 다음 교재는 그 템플릿에 내용만 새로 부어 넣습니다. 모양을 다시 정하지 않습니다.
HTML로 교재를 만들어 보신 분이라면
이 방식이 특히 잘 맞는 분들이 있습니다. 이미 HTML로 교재를 뽑아 보셨거나, 요즘 AI에게 시켜서 HTML 교재를 만들어 보신 분들입니다.
해 보셨다면 아실 겁니다. 한 번은 잘 나옵니다. 문제는 두 번째입니다. 같은 모양으로 다시 만들려면 지난번 코드를 찾아야 하고, 찾아도 문항을 손으로 갈아 끼워야 하고, 그러다 표가 깨지거나 선지 번호가 밀립니다. 결국 처음부터 다시 시키는 편이 빠릅니다.
문항의 규격과 이름 체계가 먼저 잡혀 있으면 그게 안 일어납니다. 어떤 문항 묶음을 넣든 템플릿이 알아서 자리를 잡습니다. 디자인은 템플릿에 있고, 내용은 데이터에 있습니다.
AI에게 시키실 거라면 더 간단합니다. 규격과 템플릿을 그대로 넘기시면 됩니다. 이름과 구조가 이미 정해져 있으니 매번 “선지는 원문자로 하고 지문은 위에 두고”를 설명하지 않아도 알아서 그 체계로 만듭니다. 지금까지 대화창에서 반복하던 지시가 파일 하나로 바뀝니다.
그래서 무엇이 나오나
문항 데이터는 그대로 두고 무엇을 인쇄할지만 고릅니다.
| 고르는 것 | 나오는 종이 |
|---|---|
| 시험지 | 표지 + 문제면 + 빠른 정답 |
| 연습문제 | 이름·날짜 칸 + 문제면 + 빠른 정답 |
| 숙제 | 이름·날짜 칸 + 문제면 (정답 없음) |
| 교재 | 표지 + 문제면 + 정답 + 해설 |
| 클리닉지 | 위 전부 |
| 해설서 | 표지 + 정답 + 해설 (문제면 없음) |

위 세 장은 같은 문항 스무 개입니다. 문항을 손대지 않고 템플릿만 바꾼 결과입니다.
이번 주에 숙제를 내보내고 채점한 뒤 다음 주에 틀린 것만 모아 클리닉지를 뽑는다고 해보면, 지금은 그때마다 문항을 다시 옮겨 적으실 겁니다. 그 단계가 없어집니다.
해설서만 문제면이 없습니다. 학생이 문제지를 이미 들고 있고 그 책은 답을 맞춰 보는 쪽이라, 문제를 한 번 더 실으면 종이만 두 배가 됩니다.
교사용 사본은 따로 나옵니다
같은 데이터에서 선택지 두 개를 더 켤 수 있습니다.
- 정답 선지에 밑줄
- 빈칸에 정답을 채워서 출력

수업 준비할 때 학생용 옆에 놓고 보는 그 사본입니다. 대개는 따로 하나 더 만들어 두거나 빨간 펜으로 그어 두실 텐데, 그게 같이 나옵니다. 빠른 정답표는 어느 종류에나 붙습니다.
해설도 같은 데이터에서 나옵니다
지문 해석, 풀이, 선지별 분석, 학습 포인트를 넣으면 해설면이 붙습니다. 문항과 해설을 잇는 건 문항 번호가 아니라 문항 자체의 이름이라, 문항 순서를 바꾸거나 몇 개를 빼도 해설이 어긋나지 않습니다.

해설이 없는 문항은 해설면이 안 나올 뿐 오류가 아닙니다. 있는 것만 붙습니다.
기본 템플릿이 있고, 그 위에 세련된 일곱 벌이 있습니다
먼저 아무 꾸밈도 없는 기본이 하나 있습니다. 검정 글씨, 회색 선, 흰 종이뿐입니다. 학원마다 서식이 다른데 예쁜 기본값을 강요하면 결국 다 뜯어고쳐야 하니, 기본은 어떤 복사기에서도 읽히는 상태로만 두었습니다.
그 위에 손봐 둔 템플릿이 일곱 벌 있습니다.

둘은 실제로 학원에 나가던 서식에서 값을 그대로 옮겼고, 다섯은 디자인 사조에서 가져왔습니다. 스위스 스타일, 바우하우스, 에디토리얼, 데 스틸, 테크니컬 블루프린트입니다.
고르는 기준은 하나였습니다. 종이에서 살아남는가. 화면에서 예쁜 서식 중에는 빛과 그림자로 성립하는 게 꽤 많고, 그런 건 학원 복사기를 한 번 지나면 회색 얼룩만 남습니다. 그래서 뺐습니다.
여기에 해설서 전용 둘과 변주 셋을 더해 모두 열두 벌입니다. 그리고 이게 상한은 아닙니다. 템플릿 한 벌은 대개 스무 줄에서 예순 줄 사이고, 색 세 개만 바꿔도 다른 템플릿이 됩니다. 학원 색과 로고에 맞춰 더 세련되게 만들어 두시면, 그 뒤로는 계속 그 모양으로 나옵니다.
표지는 갈아 끼웁니다
템플릿 일곱 벌 모두 표지 배경 그림을 갖고 있습니다. 쓰는 방법은 세 가지입니다.
- 그대로 쓴다
- 학원에서 만든 그림으로 바꾼다
- 그림 없이 단색 표지로 낸다
글자는 그림 위에 얹힙니다. 그래서 학원 이름이나 회차가 바뀌어도 그림을 다시 만들 필요가 없고, 그림에 글자를 그려 넣지 않은 이유가 이것입니다.
표지에는 회차를 가장 크게 넣었습니다. 책장에 스무 권이 꽂혀 있을 때 정말로 구별해야 하는 게 제목이 아니라 회차라서요. 제목은 다 같습니다.
배치는 둘로 드리고, 바꿔 쓰시면 됩니다

기본으로 드리는 배치는 이 둘입니다. 수능형 세트는 좌우 2단이 실물에 가깝고, 지문이 아주 긴 문항은 위아래로 나누는 편이 낫습니다. 템플릿과 따로 놀기 때문에 어느 조합이든 됩니다.
그리고 이 둘에 맞출 필요는 없습니다. 3단으로 바꾸든, 한 면에 한 문항만 크게 넣든, 학원에서 쓰던 배치가 따로 있다면 그대로 옮기시면 됩니다. 한 번 바꿔 두면 그다음 교재부터는 계속 그 배치로 나옵니다. 기본을 그대로 쓰는 것보다 이쪽이 이 방식의 값에 더 가깝습니다.
지문 길이가 제각각이라 한 면에 몇 문항이 들어가는지는 미리 계산할 수 없습니다. 그래서 일단 앉혀 놓고 넘치는지 본 다음, 넘치면 한 단계만 좁히고, 그래도 넘치면 면을 쪼갭니다. 글씨는 더 줄이지 않습니다. A4 한 면에 두 문항인데 지문이 9pt 밑으로 내려가면 고등학생이 읽다 지치기 때문입니다.
지문 10편에 문항 20개짜리 세트를 만들어 템플릿 열두 벌로 전부 뽑아 봤습니다. 잘려 나간 문항은 없었습니다.
지금 해볼 수 있는 것
정리하면 얻는 것이 둘입니다.
한글이나 워드를 하나씩 붙잡고 씨름하지 않아도 여섯 종류가 한 번에 나오는 것이 하나입니다. 마음에 드는 템플릿을 한 번 만들어 두면 다음 교재부터는 그것을 그대로 다시 쓰는 것이 둘입니다. 앞의 것은 이번 주가 편해지는 일이고, 뒤의 것은 다음 학기가 편해지는 일입니다.
다음 시험 하나만 이 순서로 해보세요. 데이터를 먼저 적고, 거기서 시험지를 뽑고, 채점이 끝나면 같은 데이터로 해설서를 뽑는 겁니다. 처음 몇 번은 뽑고 나서 눈으로 한 번 훑어보시길 권합니다.
첫 번은 시간이 더 듭니다. 이건 미리 말씀드립니다. 대신 두 번째 인쇄물부터는 같은 데이터를 다시 쓰기 때문에 만드는 시간이 아니라 고르는 시간만 듭니다.
규격과 HTML 템플릿 둘 다 공개해 뒀습니다. 가져다 고쳐 쓰셔도 됩니다.
- 규격과 검사기 — github.com/Haeminway1/seis
- HTML 템플릿 — github.com/Haeminway1/seis-templates
도입을 같이 검토해 보고 싶으시면 상담 신청으로 남겨 주세요.