수학 문제 사진을 한글 파일로 바꾸는 스킬을 만들고, 웹에서 풀고, HTML로 공유하기까지
소개
수학 문제 사진은 손댈 수가 없습니다. 숫자 하나만 바꿔서 다시 내려 해도 처음부터 다시 쳐야 하고,
그래프가 있으면 그것부터 다시 그려야 합니다.
그래서 사진 한 장을 넣으면 편집 가능한 한글 파일(HWPX)로 만들어주는 스킬을 만들 기 시작했습니다.
이 질문을 붙들고 씨름한 결과가 지금의 스킬이고, 다 만든 뒤엔 "쓰려면 매번 터미널을 켜야 한다"는 귀찮음 때문에 웹앱까지 붙이게 됐습니다.
사용한 도구: Claude Code(스킬·웹앱) · Codex CLI(그림 재생성·독립 풀이) ·
진행 방법
1. 제일 애먹은 건 "그림"이었습니다
텍스트만 있는 문제는 수월했는데, 그래프나 도형이 들어가면 얘기가 달라졌습니다.
포물선 꼭짓점이 한 칸씩 밀리고, 표 안 숫자를 다르게 읽고, 점이 채워진 건지 빈 건지를 헷갈렸습니다.
게다가 흐릿한 그림에 AI도 확신이 없으니 계속 되물었습니다.
문제 하나 넣을 때마다 "이 그림 맞나요?"가 몇 번씩 올라왔습니다.
자동화하려고 만든 건데 정작 제가 옆에 붙어 답을 해줘야 했습니다.
한 방에 되는 묘수는 없었습니다. 틀릴 때마다 "이건 왜 틀렸어?"를 하나씩 되짚으며 AI와 티키타카로 원인을 좁혔고, 알아낸 걸 그때그때 스킬에 규칙으로 적어뒀습니다. 결국 두 가지가 핵심이었습니다.
① 그림의 뜻을 문장으로도 적게 했습니다. 원인을 따져보니 그림이 조금만 어긋나도 그걸 보고 푸는 풀이까지 통째로 흔들리는 게 문제였습니다.
❌ "악보 이미지"
✅ "반복되는 음표 그림은 792를 나타낸다"
이 한 줄이 생기니 푸는 근거는 문장이 되고 그림은 문서용 자료가 됐습니다.
그림이 좀 어긋나도 풀이는 흔들리지 않고, 확인이 필요해도 "이 악보가 792 맞나요?" 한 번만 물으면 됩니다. 되묻는 횟수가 확 줄었습니다.
② 다시 그린 그림은 반드시 원본과 대조하게 했습니다. 눈금·각도·표 안 숫자를 하나씩 맞춰보고, 안 맞으면 다시 그리고, 그래도 안 되면 틀린 그림을 슬쩍 쓰지 않고 무엇이 다른지 알려주게 했습니다.
한글 파일에 그림을 넣는 것도 오래 걸렸습니다. 쓰려던 도구들이 하나같이 그림을 못 넣어서, 이미 잘 만들어진 hwpx 파일을 뜯어보며 방법을 찾아야 했습니다. 이 부분은 거의 AI가 파고들었고 저는 "그 방법으로 해보자"를 눌러주는 역할이었습니다.
2. 정답을 믿을 수 있게 — 두 AI에게 따로 풀렸습니다
처음엔 Claude와 Codex에게 각각 풀린 뒤 두 풀이를 합쳐 해설 하나를 내주려 했습니다.
그런데 AI가 말렸습니다.
서로의 답을 보게 하면 안 됩니다. 참고하다가 결국 베끼게 됩니다.
먼저 나온 답을 본 쪽은 다시 풀기보다 "맞다고 확인해주는" 쪽으로 기울어서, 두 답이 같아도 그건 검증이 아니라 한 번 더 동의한 것이라는 얘기였습니다. 맞는 말이라 합치려던 생각을 접고, 서로의 답을 안 보여준 채 각자 끝까지 풀게 했습니다.
그래서 화면엔 풀이가 두 개 남는데, 이게 오히려 나았습니다. 정답 하나를 툭 던지는 것보다 같은 문제를 두 방식으로 푼 걸 나란히 놓고 따져보는 것이 공부에 훨씬 도움이 됐습니다. 답이 갈리면 그때부터가 진짜 공부거리이기도 하고요.
한국어 웹사이트의 스크린샷
대신 두 번 푸니 두 배로 걸렸습니다. 간단한 문제까지 그럴 이유는 없어서 누가 풀지 고를 수 있게 했습니다.
한쪽만 고르면 그 호출을 통째로 건너뛰어 빨라지고, 둘 다 고르면 제일 믿을 만하지만 제일 느립니다.
솔직히 한쪽만 풀려도 여전히 느립니다. 속도는 아직 못 푼 숙제입니다.
한국사이트 스크린샷
3. 웹으로 꺼내니, 앞에 앉아 있지 않아도 됐습니다
터미널을 켜야 하는 사소한 귀찮음이 쌓이면 결국 안 쓰게 됩니다. 그래서 웹 화면을 붙이되 스킬은 다시 만들지 않았습니다. 버튼을 누르면 서버가 제 컴퓨터의 Claude CLI를 불러서 이미 검증된 스킬을 그대로 돌립니다.
// 버튼을 누르면 결국 이게 돕니다 — 스킬 로직은 손대지 않았습니다
const child = spawn("claude", [
"-p", prompt,
"--output-format", "stream-json", // 진행 상황을 실시간으로 화면에 뿌리기
"--permission-mode", "bypassPermissions", // 자동 실행이라 권한 확인에 답할 사람이 없음
"--setting-sources", "project,local", // 이 옵션 하나로 호출 비용이 확 줄었습니다
"--add-dir", 업로드폴더,
], { cwd: 스킬폴더 });예상 못 한 장점도 따라왔습니다.
맥미니에 띄워두고 Tailscale로 접속하니 그 앞에 앉아 있을 필요가 없어졌습니다.
밖에서 폰으로 사진을 던져놓고 나중에 결과만 확인하면 됩니다.
속도를 해결하진 못했지만 기다릴 필요를 없앤 셈입니다.
4. 마지막은 공유 — HTML 한 장
푼 문제는 브라우저에 저장해두고, 목록에서 골라 버튼을 누르면 HTML 파일 한 장이 나옵니다.
링크로 주려 했지만 이 앱은 제 컴퓨터에서만 도는 물건이라 남은 열지 못합니다.
그래서 그림까지 파일 안에 통째로 담았습니다. 파일 하나만 보내면 인터넷 없이도 열립니다.
페이지엔 🙈 정답·해설 가리기(문제만 먼저 보낼 때)와 🖨️ 인쇄·PDF로 저장(학습지처럼 뽑을 때) 버튼을 넣었습니다.
화면에 한국어가 나오는 한국어 이러닝 앱
결과와 배운 점
실제로 걸린 시간 (제 실행 기록 기준)
그림 없는 문제
그림 있는 문제
낙서까지 지운 문제
그림을 다시 그린 경우
1분 18초
2분 55초
4분 7초
4분 47초
1. 한 방에 고쳐지는 문제는 없었습니다. 틀릴 때마다 원인을 되짚고 규칙으로 적어두는 식으로만 나아졌습니다.
스킬은 코드가 아니라 규칙 모음이고, 틀린 만큼 쌓입니다.
2. 정확도를 못 올리면, 틀려도 덜 아픈 구조로 바꾸는 게 빨랐습니다.
그림 인식률을 끝까지 끌어올리는 대신 그림의 뜻을 문장으로 따로 남겨 풀이가 그림에 기대지 않게 한 게
제일 효과가 컸습니다.
3. 시키기 전에 한 번 물어보는 게 나았습니다. 두 풀이를 합치려던 걸 "서로 보면 베낀다"고 말려준 게 이 스킬에서 제일 잘된 부분이 됐습니다.
4. 두 풀이가 같다고 정답은 아닙니다. 사진이 흐리면 두 AI가 똑같이 잘못 읽는 일이 실제로 있었습니다. 그래서 답 대조와 별개로, "옳지 않은 것은?" 같은 문제는 답이 정확히 1개 나와야 한다는 것도 확인하게 했습니다. 2개가 나오면 푸는 게 아니라 읽는 데서 틀린 겁니다.
5. 문 턱을 낮추니 쓰는 횟수가 달라졌습니다. 성능을 올린 게 아니라 터미널을 안 켜도 되게 만든 것뿐인데 훨씬 자주 쓰게 됐습니다.
남은 숙제 · 도움이 필요한 부분
속도 — 한 문제에 1~5분. 한쪽만 풀려도 크게 빨라지진 않았습니다.
수식이 아직 그냥 글자입니다 — 한글 수식 개체로 넣는 건 아직 못 했습니다.
한 번에 한 문제만 — 시험지 한 장을 통째로 넣는 게 다음 목표입니다.
앞으로
시험지 한 장 → 여러 문제 한 번에 / 틀린 문제만 모아 오답노트 HTML로 묶기 / 속도 줄이기
도움 받은 글 (옵션)
k-skill의 hwp / rhwp 계열 스킬 — 한글 파일 다루는 원리를 여기서 배웠습니다.
수학 기출 HWPX 제작 사례들 — 전체 흐름을 잡는 데 참고했습니다.
gpters23.vercel.app — 코덱스입문 웹앱 디자인 톤 참고