대학 교수자 AI 실습 · 해외 사례 8 — 스캔한 수식 판서를 화면낭독기가 읽는 웹페이지(MathML)로 바꾸기
1
이 장에서 만드는 것
화면낭독기가 "이미지"라고만 읽는 판서 스캔 → 수식을 읽어 주는 웹페이지
가상 예시 열역학 수업에서 이상기체의 단열 과정을 두 단계로 유도한 판서 사진을 LMS에 올렸다고 해 봅시다. 앞을 보기 어려운 학생이 쓰는 화면낭독기(화면의 글을 소리로 읽어 주는 프로그램)는 이 사진을 "이미지"라고만 읽습니다. 이 사진을 AI로 MathML(웹페이지에 수식을 글자처럼 적는 표준 형식) 페이지로 바꾸면, 수식의 분수·첨자 구조가 그대로 전달됩니다.
화면낭독기에 전달되는 수식
AI가 표시한 "잘못 읽었을 수 있는 곳"
7곳 → 교수가 확인
유도 단계 검산 (파이썬)
3/3 맞음
전 — 스캔한 판서 사진

화면낭독기에 전달되는 것
"이미지"
브라우저 접근성 정보를 직접 열어 보니 이 사진은 이름 없는 이미지 1개뿐이었습니다. 수식, 단계, 그래프 어느 것도 전달되지 않습니다.후 — 수식이 살아 있는 웹페이지
화면낭독기에 전달되는 것
수식 7개 · 분수 5 · 아래첨자 13 · 첨자+지수 2 · 제목 3 · 그래프 설명 1
같은 방법으로 열어 본 접근성 정보입니다. 실제 화면낭독기로 들어 본 결과는 아닙니다(5절).AI오토마타가 아래 프롬프트를 Claude에 넣어 받은 실제 결과입니다(2026-10-21, 가상 예시). 왼쪽 판서 사진도 이 글을 위해 손글씨처럼 그려 만든 가상 자료입니다.
AI가 "잘못 읽었을 수 있다"고 표시한 곳 (7곳 중 3곳)
1
γ(감마)가 y나 ν처럼 보입니다.
결과식의 지수와 괄호 안 정의, 네 군데. 손글씨 γ는 아래가 열리면 y와 거의 같습니다. y로 옮기면 비열비가 전혀 다른 변수가 됩니다.
교수 확인 → 감마(비열비). 페이지에는 γ로.
2
지수가 지수인지, 같은 줄 글자인지.
V₁γ−1을 "V₁γ − 1"로 한 줄에 옮기면 결과식이 T₁V₁ = T₂V₂ 꼴이 됩니다. 300 K에서 부피가 두 배일 때 나중 온도가 227.4 K가 아니라 150.0 K로 계산됩니다(파이썬 계산).
교수 확인 → 위첨자(γ − 1제곱). MathML에서 지수 구조로.
3
ln이 In으로 읽힐 수 있습니다.
소문자 l과 대문자 I는 손글씨에서 구별이 어렵습니다. In이면 "자연로그"가 아니라 변수 I와 n의 곱이 됩니다.
교수 확인 → 자연로그 ln. 나머지 4곳(δ, 분모 T, 아래첨자 v·p, 마이너스)은 STEP 2 표.
🖼 그래프 대체텍스트 초안 (AI 작성)
짧은 설명(alt) — p–V 그래프: 같은 점에서 출발한 등온 곡선(점선)과 단열 곡선(실선) 중 단열 곡선이 더 가파르게 내려간다.
긴 설명 — 가로축은 부피 V, 세로축은 압력 p이다. 두 곡선은 왼쪽 위의 같은 점에서 시작해 오른쪽 아래로 내려간다. 점선(등온)보다 실선(단열)이 더 빨리 낮아져, 같은 부피까지 팽창했을 때 단열 과정의 압력이 더 낮다. 눈금과 숫자는 없는 개념 그림이다.
짧은 설명(alt) — p–V 그래프: 같은 점에서 출발한 등온 곡선(점선)과 단열 곡선(실선) 중 단열 곡선이 더 가파르게 내려간다.
긴 설명 — 가로축은 부피 V, 세로축은 압력 p이다. 두 곡선은 왼쪽 위의 같은 점에서 시작해 오른쪽 아래로 내려간다. 점선(등온)보다 실선(단열)이 더 빨리 낮아져, 같은 부피까지 팽창했을 때 단열 과정의 압력이 더 낮다. 눈금과 숫자는 없는 개념 그림이다.
2
이 과제에서 할 일
옮겨 적기 → 교수 확인 → 접근성 페이지 → 검산
3
핵심 원리 한 장
같은 식이라도 "그림"이면 아무것도 전달되지 않습니다
규칙 세 가지
① 옮기기와 고치기를 나눈다 — 먼저 "보이는 그대로" 옮기게 합니다. AI가 판서의 계산을 고쳐 버리면, 원래 판서에 무엇이 쓰여 있었는지 알 수 없게 됩니다.
② 헷갈린 글자는 표시하게 한다 — 수식에서 글자 하나(γ와 y, 지수와 같은 줄)는 식의 뜻을 바꿉니다. 의심 목록은 교수가 한 줄씩 확인합니다.
③ 수식은 그림이 아니라 글자로 — MathML로 넣고, 원래 LaTeX를 함께 붙여 둡니다. 그래프처럼 글자로 바꿀 수 없는 것만 대체텍스트를 씁니다.
① 옮기기와 고치기를 나눈다 — 먼저 "보이는 그대로" 옮기게 합니다. AI가 판서의 계산을 고쳐 버리면, 원래 판서에 무엇이 쓰여 있었는지 알 수 없게 됩니다.
② 헷갈린 글자는 표시하게 한다 — 수식에서 글자 하나(γ와 y, 지수와 같은 줄)는 식의 뜻을 바꿉니다. 의심 목록은 교수가 한 줄씩 확인합니다.
③ 수식은 그림이 아니라 글자로 — MathML로 넣고, 원래 LaTeX를 함께 붙여 둡니다. 그래프처럼 글자로 바꿀 수 없는 것만 대체텍스트를 씁니다.
4
만드는 단계
STEP 카드 → 프롬프트 복사 → 초록 상자로 확인 → 실제로 받은 답
🗂 대화창은 이렇게 씁니다 — STEP 2~4는 한 대화창
STEP 1 · 💬 AI 없음→STEP 2 · 🆕 새 대화창→STEP 3 · ↩️ 이어서→STEP 4 · ↩️ 이어서→STEP 5 · 💬 LMS
🟢 이렇게 나오면 성공
한 장에 유도 하나
지수·첨자가 눈으로 구별됨 (사람도 못 읽으면 AI도 못 읽습니다)
한 장에 유도 하나
지수·첨자가 눈으로 구별됨 (사람도 못 읽으면 AI도 못 읽습니다)
🟢 이렇게 나오면 성공
계산을 고치지 않고 그대로 옮김
γ가 나오는 곳에 [?] 표시가 있음
그래프(p–V)를 언급함
계산을 고치지 않고 그대로 옮김
γ가 나오는 곳에 [?] 표시가 있음
그래프(p–V)를 언급함
📝 실제로 받은 답 (Claude · 2026-10-21 · 가상 판서 사진)
(가) 줄별 LaTeX
(다) 그림 오른쪽에 p(세로)–V(가로) 축 그래프. 왼쪽 위 같은 점에서 출발한 두 곡선이 있고, 점선에 "등온", 그 아래 실선에 "단열"이라고 적혀 있음.
여기서 볼 것 — 판서를 그린 것이 같은 작업의 Claude라 정답을 알고 읽었다는 한계가 있습니다(5절). 그래도 "어디가 헷갈릴 수 있는지"의 목록은 실제 손글씨에서 그대로 쓸 수 있습니다.
1 단열 과정 (\delta[?] Q = 0), 이상기체 n mol
2 ① n C_v \, dT = -p \, dV , p = nRT/V
3 \Rightarrow C_v \frac{dT}{T[?]} = -R \frac{dV}{V}
4 ② 적분: C_v \ln[?] \frac{T_2}{T_1} = -R \ln \frac{V_2}{V_1}
5 \Rightarrow T_1 V_1^{\gamma[?]-1} = T_2 V_2^{\gamma[?]-1}
6 (\gamma[?] = C_p / C_v ,\ C_p - C_v = R)(나) 잘못 읽었을 수 있는 곳| 줄 | 읽은 것 | 다른 후보 | 후보가 맞다면 |
|---|---|---|---|
| 5 · 6 | γ (감마) | y, ν(뉴), v | 비열비가 다른 변수가 됨. v로 읽으면 Cv의 v와 섞임 |
| 5 | V₁γ−1 (지수) | V₁γ − 1 (같은 줄) | 결과식 뜻이 완전히 달라짐(T₁V₁ = T₂V₂ 꼴) |
| 4 | ln | In | 자연로그가 아니라 변수 I와 n의 곱 |
| 3 | 분모 T | 7, 1 | 분수의 분모가 숫자가 됨 |
| 1 | δQ | 6Q | "열의 작은 양"이 6 곱하기 Q로 바뀜 |
| 2 · 6 | Cv, Cp (아래첨자) | Cv, Cp (같은 크기), ρ | 정적·정압 비열 구별이 사라짐 |
| 2 · 3 · 4 | − (마이너스) | - (하이픈) 또는 빠짐 | 부호가 바뀌면 온도가 오르는 식이 됨 |
여기서 볼 것 — 판서를 그린 것이 같은 작업의 Claude라 정답을 알고 읽었다는 한계가 있습니다(5절). 그래도 "어디가 헷갈릴 수 있는지"의 목록은 실제 손글씨에서 그대로 쓸 수 있습니다.
🟢 이렇게 나오면 성공
브라우저에서 수식이 분수·첨자 모양으로 보임
수식을 마우스로 끌면 글자처럼 선택됨
결과식의 지수가 γ − 1 (위첨자)
브라우저에서 수식이 분수·첨자 모양으로 보임
수식을 마우스로 끌면 글자처럼 선택됨
결과식의 지수가 γ − 1 (위첨자)
📝 실제로 받은 답 (Claude · 2026-10-21, 요약)
결과 — HTML 한 덩어리(5.8 KB). 수식 7개, 각 수식 아래 말로 읽기, 제목 h2 1개·h3 2개, 그래프 SVG 1개. 1절 오른쪽 화면이 이 HTML을 그대로 넣은 것입니다.
결과식(5줄)의 실제 코드
그래프 대체텍스트 — 1절 파란 상자의 짧은 설명·긴 설명 그대로.
결과식(5줄)의 실제 코드
<math display="block" alttext="T_1 V_1^{\gamma-1} = T_2 V_2^{\gamma-1}">
<semantics>
<mrow>
<msub>
<mi>T</mi>
<mn>1</mn>
</msub>
<msubsup>
<mi>V</mi>
<mn>1</mn>
<mrow>
<mi>γ</mi>
<mo>−</mo>
<mn>1</mn>
</mrow>
</msubsup>
<mo>=</mo>
<msub>
<mi>T</mi>
<mn>2</mn>
</msub>
<msubsup>
<mi>V</mi>
<mn>2</mn>
<mrow>
<mi>γ</mi>
<mo>−</mo>
<mn>1</mn>
</mrow>
</msubsup>
</mrow>
<annotation encoding="application/x-tex">T_1 V_1^{\gamma-1} = T_2 V_2^{\gamma-1}</annotation>
</semantics>
</math>읽는 법 — <msubsup>이 "V, 아래첨자 1, 위첨자 γ−1"을 한 덩어리로 묶습니다. 화면낭독기는 이 구조를 따라 읽습니다. alttext와 annotation에는 원래 LaTeX가 들어 있어, 수식을 고칠 때 이것을 복사해 쓰면 됩니다.그래프 대체텍스트 — 1절 파란 상자의 짧은 설명·긴 설명 그대로.
🟢 이렇게 나오면 성공
대조표에 "다름"이 없음
R = C_v(γ − 1)을 써서 ②에서 결과식으로 넘어감
지수를 잃으면 나중 온도가 달라짐을 숫자로 보여 줌
대조표에 "다름"이 없음
R = C_v(γ − 1)을 써서 ②에서 결과식으로 넘어감
지수를 잃으면 나중 온도가 달라짐을 숫자로 보여 줌
📝 실제로 받은 답과 파이썬 검산 (2026-10-21)
여기서 볼 것 — 검산은 유도 단계가 맞는지를 보는 것이지, 사진에서 글자를 맞게 읽었는지를 보장하지 않습니다. 글자는 STEP 2의 의심 표로 교수가 확인합니다.
| 확인 | AI 답 (요약) | 파이썬(sympy) |
|---|---|---|
| LaTeX ↔ MathML | 7줄 모두 같은 식 | — (사람이 눈으로 대조) |
| ① → 미분식 | p = nRT/V를 넣고 nT로 나눔 | ✅ 일치 |
| 미분식 → ② 적분식 | T₁→T₂, V₁→V₂로 적분 | ✅ 일치 |
| ② → 결과식 | R = Cv(γ − 1)로 바꿔 로그를 묶음 | ✅ 같은 식 |
| 결과식 → pVγ = 일정 | (질문 밖) 상태방정식을 넣으면 판서 장의 식과 같음 | ✅ 같은 식 |
| 지수를 잃었을 때 | T₂ = 227.4 K → 150.0 K로 틀어짐 | ✅ 같은 숫자 |
🟢 이렇게 나오면 성공
저장 후 다시 열어도 <math> 태그가 남아 있음
접근성 검사기 경고가 없거나, 있으면 이유를 확인
화면낭독기가 "이미지"가 아니라 수식을 읽음 (한국어 음성으로 수식을 어떻게 읽는지는 프로그램마다 다름)
저장 후 다시 열어도 <math> 태그가 남아 있음
접근성 검사기 경고가 없거나, 있으면 이유를 확인
화면낭독기가 "이미지"가 아니라 수식을 읽음 (한국어 음성으로 수식을 어떻게 읽는지는 프로그램마다 다름)
5
실제로 해 본 결과와 고칠 점
Claude(2026-10-21)가 가상 판서 사진에 프롬프트 ①②③을 실행하고, 결과를 파이썬과 브라우저로 확인한 결과
판정 표시 ✅ 됨 · ⚠️ 확인 필요 · ❌ 안 됨 · ⬜ 해 보지 않음
1절의 전·후 화면이 바로 이 과정의 결과입니다. AI오토마타 작업 공간에서 Claude가 손글씨처럼 보이는 판서 사진을 만들고, 같은 작업 안에서 그 사진을 읽어 옮기고 페이지를 만들었습니다. 그래서 사진을 처음 보는 AI보다 유리했습니다. 접근성은 헤드리스 크롬(화면 없이 돌아가는 크롬)의 접근성 정보로 확인했습니다.
| 확인한 것 | 실제로 확인한 내용 | 판정 |
|---|---|---|
| 사진만 올린 상태 | 브라우저 접근성 정보에 이름 없는 이미지 1개만 있음 | ❌ |
| ① 옮겨 적기·의심 표 | 6줄 옮김, 의심 7곳 표시. 단, 사진을 만든 AI가 읽은 것이라 처음 보는 손글씨에서의 정확도는 아님 | ⚠️ |
| ② MathML 페이지 | 수식 7개가 MathML로, 접근성 정보에 분수 5 · 아래첨자 13 · 첨자+지수 2 구조가 그대로 나타남 | ✅ |
| alttext · LaTeX 주석 | 7개 모두 들어 있음. 다만 크롬은 alttext를 수식의 이름으로 쓰지 않음(구조로 읽음) | ✅ |
| ③ 유도 단계 검산 | sympy로 ①→미분식→②→결과식, pVγ = 일정까지 모두 같은 식 | ✅ |
| 그래프 대체텍스트 | 짧은 설명·긴 설명 작성, SVG 제목·설명으로 연결. 수업 의도에 맞는지는 교수 판단 | ⚠️ |
| 실제 화면낭독기 | NVDA·JAWS·VoiceOver로 들어 보지 않음. 한국어 음성으로 수식을 어떻게 읽는지 모름 | ⬜ |
| LMS 붙여넣기·접근성 검사기 | Canvas, 국내 대학 LMS 어디에도 붙여 보지 않음. 편집기가 MathML을 지울 수 있음 | ⬜ |
| 다른 AI · 실제 판서 | ChatGPT·Gemini 등이나 실제 교수 손글씨로는 해 보지 않음 | ⬜ |
| 글 화면 | 760px·390px 폭에서 가로 넘침 없음(헤드리스 크롬, 컴퓨터에서 흉내 낸 폭) | ✅ |
✍️ 사람이 고칠 점
• 의심 표는 모두 교수가 확인 — 특히 γ·지수·부호. 검산이 맞아도 사진과 다른 식일 수 있습니다.
• 학생 한 명과 함께 들어 보기 — 화면낭독기를 쓰는 학생이나 장애학생지원센터에 실제로 들어 봐 달라고 부탁하는 것이 가장 확실합니다.
• "말로 읽기" 줄은 선택 — 화면낭독기가 수식을 잘 읽으면 같은 내용을 두 번 듣게 됩니다. 들어 본 뒤 남길지 정합니다.
• LMS가 MathML을 지우면 — LMS 자체 수식 편집기(LaTeX 입력)를 쓰거나, 교수학습지원센터에 지원 방법을 묻습니다.
• 의심 표는 모두 교수가 확인 — 특히 γ·지수·부호. 검산이 맞아도 사진과 다른 식일 수 있습니다.
• 학생 한 명과 함께 들어 보기 — 화면낭독기를 쓰는 학생이나 장애학생지원센터에 실제로 들어 봐 달라고 부탁하는 것이 가장 확실합니다.
• "말로 읽기" 줄은 선택 — 화면낭독기가 수식을 잘 읽으면 같은 내용을 두 번 듣게 됩니다. 들어 본 뒤 남길지 정합니다.
• LMS가 MathML을 지우면 — LMS 자체 수식 편집기(LaTeX 입력)를 쓰거나, 교수학습지원센터에 지원 방법을 묻습니다.
6
점검표 · 한 장 요약
수식 페이지를 학생에게 열기 전에
| 확인할 것 | 어떻게 확인하나 |
|---|---|
| 글자 | 의심 표의 γ·지수·첨자·ln·부호를 원래 판서와 대조 |
| 단계 | 앞 줄에서 다음 줄로 가는 계산을 따라가 봄(또는 AI 검산 + 내가 다시) |
| 수식이 글자인가 | 마우스로 끌어 선택되는지, 이미지 수식이 남아 있지 않은지 |
| LMS 저장 후 | 다시 열었을 때 <math>가 남아 있는지 |
| 그림 | 대체텍스트가 "무엇이 보이는지"가 아니라 "수업에서 왜 보여 주는지"를 담았는지 |
| 화면낭독기 | 수식을 "이미지"가 아니라 수식으로 읽는지 직접 들어 보기 |
7
주의
꼭 필요한 것만
- 개인정보: 판서 사진에 학생 얼굴·이름·출석부가 찍혔으면 잘라 내고 넣습니다. 대학이 허용한 AI 계정인지, 입력 내용이 학습에 쓰이는 설정인지 확인하세요.
- AI 결과는 초안입니다: 글자 하나가 식의 뜻을 바꿉니다. 의심 표와 검산을 거치지 않은 페이지는 올리지 않습니다.
- 학내 지원과 함께: 접근성 요구가 있는 학생의 자료는 장애학생지원센터의 안내와 학내 규정을 먼저 따릅니다.
- LMS마다 다릅니다: MathML·LaTeX 지원 방식이 LMS와 편집기마다 다릅니다.
- 저작권: 가상 판서 사진·프롬프트·결과 페이지는 AI오토마타가 이 글을 위해 만들었습니다.
- AI 결과는 초안입니다: 글자 하나가 식의 뜻을 바꿉니다. 의심 표와 검산을 거치지 않은 페이지는 올리지 않습니다.
- 학내 지원과 함께: 접근성 요구가 있는 학생의 자료는 장애학생지원센터의 안내와 학내 규정을 먼저 따릅니다.
- LMS마다 다릅니다: MathML·LaTeX 지원 방식이 LMS와 편집기마다 다릅니다.
- 저작권: 가상 판서 사진·프롬프트·결과 페이지는 AI오토마타가 이 글을 위해 만들었습니다.
8
참고 자료
링크만 모았습니다
함께 보면 좋은 글
- 열역학 식이 한 줄씩 써지는 판서 — pVγ=일정 유도 애니메이션과 Manim 제작법 — 이 글의 결과식에서 이어지는 판서 장.
- 대학교수 AI 실습 16 — 설문 평균, AI에게 맡기기 전에 빈칸·단위·이상값부터 확인하기 — AI 결과를 원자료와 대조하는 같은 습관.
확인일 2026-10-21 · 자료 ID AA-FACULTY-OVERSEAS-08 · 이 글의 판서 사진과 결과 페이지는 가상 예시입니다.
댓글
댓글 쓰기