클로드 코드 HTML 출력, 영어 학원 수업자료 혁신의 새 도구

긱뉴스에 소개된 글 한 편이 AI 활용 방식을 다시 생각하게 만든다. 클로드 코드(Claude Code)에서 출력 형식으로 마크다운 대신 HTML을 쓰면 표, CSS, SVG, script 태그, 자바스크립트 상호작용, 이미지, 캔버스, 절대 위치까지 활용해 사람이 읽고 검토하기 훨씬 좋은 결과물이 나온다는 주장이다. 단순한 기술 팁이 아니다. 수능 영어 지문 구조 시각화, 내신 오답 분석 리포트, 학부모용 학습 현황 안내, 학생 자기주도 복습 페이지까지 — 한국 영어 학원과 교실 현장이 매주 만들어내는 거의 모든 문서 형식이 영향권 안에 들어온다.

마크다운의 한계가 드러나는 자리

원문 필자는 마크다운이 그동안 에이전트와 사람을 잇는 지배적 파일 형식이었다고 설명한다. 가볍고 이식성이 좋고 약간의 서식을 표현하며 직접 편집하기도 쉽다. 그런데 에이전트가 점점 강력해지면서 이 단순함이 오히려 제약으로 작동하기 시작했다. 100줄이 넘는 마크다운 파일은 사실상 읽히지 않는다는 지적도 나온다.

영어 학원 현장에 대입해 보면 이 진단은 더 또렷해진다. 수능 영어 지문 한 편을 분석한다고 가정하자. 주제문 위치, 연결사 흐름, 빈칸 추론 포인트, 어휘 난도, 오답 선지 함정 유형까지 정리하면 마크다운 문서는 금세 길어진다. 학생이 그 텍스트 덩어리를 끝까지 읽을 가능성은 높지 않다. EBS 연계 교재 해설을 학원 내부용으로 재가공할 때도 같은 문제가 반복된다. 줄글이 길어질수록 정작 핵심인 구조 인식은 흐려진다. 마크다운 안에서 ASCII 다이어그램을 그리거나 유니코드 문자로 색상을 흉내 내는 식의 비효율적 표현이 늘어나는 이유다.

HTML이 열어주는 표현의 폭

원문에 따르면 HTML은 제목과 서식 같은 문서 구조뿐 아니라 표를 통한 테이블 데이터, CSS를 통한 디자인 데이터, SVG 일러스트, script 태그를 통한 코드 조각, 자바스크립트와 CSS를 이용한 상호작용까지 담아낼 수 있다. 절대 위치와 캔버스로 공간 데이터를 표현하며 img 태그로 이미지를 넣을 수 있다. 클로드가 읽을 수 있는 정보 집합 대부분이 HTML로 꽤 효율적으로 표현된다는 것이다.

이 표현력은 영어 교과 자료 제작에서 즉시 체감된다. 수능 영어 34번 빈칸 추론 지문 하나를 HTML로 출력하게 하면, 첫 단락은 회색 박스, 주제 문장은 형광 노랑, 반전 연결사는 빨강으로 색을 입히며 옆 단에는 단락별 논리 흐름을 SVG 화살표로 그려낼 수 있다. 내신 서술형 문항 해설이라면 학생 답안 예시 세 가지를 표 한 줄씩에 배치하며 감점 포인트를 셀 색으로 구분하는 식이다. 종이 학습지나 PDF로 인쇄해 배포하던 자료를 같은 노동량으로 한 단계 정교한 결과물로 바꿀 수 있다. 원문이 강조하듯 HTML 문서는 브라우저에서 바로 열리며 S3 같은 곳에 올리면 링크 하나로 학생과 학부모에게 공유된다. 마크다운처럼 첨부 파일을 메신저에 따로 올려야 하는 마찰이 없다.

스펙·계획·탐색 — 커리큘럼 설계의 도구로

원문은 클로드 코드와 HTML을 함께 쓰는 주요 활용 방식 다섯 가지를 제시한다. 그중 하나가 스펙, 계획, 탐색이다. 단일 마크다운 계획 대신 여러 HTML 파일의 묶음으로 작업을 시작하라는 권유다. 여러 방향을 브레인스토밍한 뒤 한 방향을 확장해 목업이나 코드 조각을 만들고, 마지막으로 구현 계획을 작성하는 흐름이다. 원문에 등장하는 예시는 온보딩 화면을 두고 레이아웃·톤·밀도가 다른 6가지 접근을 하나의 HTML 그리드로 만들고 각 선택의 트레이드오프를 표시하는 방식이다.

학원 커리큘럼 설계자 입장에서 이 흐름은 익숙하게 변환된다. 고1 영어 내신 대비 8주 커리큘럼을 짠다고 하자. 어휘 비중을 높인 안, 구문 분석 중심 안, 서술형 대비 강화 안, 듣기 통합 안 — 네 가지 시안을 클로드에게 HTML 그리드로 출력하게 하고 각 안의 주차별 학습 목표와 예상 부담, 학생 유형별 적합도를 한 화면에서 비교한다. 단일 텍스트 기획안을 읽고 머릿속에서 비교하던 작업이 시각적 한 장으로 압축된다. 원문이 지적하듯 계획이 만족스러우면 새 세션을 열어 이 파일들을 그대로 넘겨 구현 단계로 갈 수 있다. 한국 학원에서 흔히 일어나는 기획안과 실행이 따로 노는 문제를 줄여줄 가능성이 있다.

보고서·리서치·학습 — 학부모 리포트의 진화

두 번째 핵심 활용처는 보고서, 리서치, 학습이다. 원문은 클로드 코드가 여러 데이터 소스의 정보를 종합해 읽기 쉬운 보고서로 바꾸는 데 강하다고 말한다. 결과물은 긴 HTML 문서가 될 수도 있으며 인터랙티브 설명서, 슬라이드나 덱 형태가 될 수도 있다. SVG로 다이어그램을 만들게 하면 시각화에 도움이 된다.

학부모 리포트가 가장 직접적인 적용 지점이다. 한 학생의 한 달치 어휘 테스트 점수, 모의고사 영역별 결과, 숙제 제출률, 오답 유형 분포를 클로드에게 HTML 한 페이지로 정리하게 한다. 상단에는 종합 요약, 중단에는 영역별 막대 그래프 SVG, 하단에는 오답 유형 세 가지에 대한 개선 제안을 둔다. 학부모는 링크 하나를 받아 모바일에서 펼쳐본다. 원문이 강조하듯 HTML 문서는 화면 크기에 따라 다르게 읽히도록 모바일 반응형으로 만들 수 있다는 점이 결정적이다. 그동안 카카오톡으로 보내던 줄글 알림장이나 인쇄해 우편으로 보내던 종이 리포트가 한 단계 진화한다. 수능 영어 영역에 한정해도 듣기·어법·빈칸 추론·간접쓰기 같은 문항 유형별 정답률을 한눈에 보여주는 학생용 학습 카드 페이지 제작이 같은 원리로 가능하다.

맞춤형 일회용 편집 인터페이스 — 교사 업무의 재정의

원문이 가장 흥미롭게 다루는 활용 방식은 맞춤형 편집 인터페이스다. 텍스트 박스만으로 원하는 것을 설명하기 어려울 때, 현재 작업 중인 데이터에 맞춘 일회용 HTML 편집기를 만들어 쓰라는 제안이다. 제품이나 재사용 도구가 아니라 특정 데이터 조각 하나를 위해 목적에 맞게 만든 단일 HTML 파일이다. 핵심은 마지막에 copy as JSON이나 copy as prompt 같은 내보내기 버튼을 넣어 UI에서 조작한 결과를 다시 클로드 코드에 붙여넣을 수 있게 하는 것이다.

원문 예시 중 하나는 30개 티켓을 Now / Next / Later / Cut 열의 드래그 가능한 카드로 만들며 최종 순서를 한 줄 근거와 함께 마크다운으로 복사하게 한 인터페이스다. 이 발상을 학원 운영에 옮기면 적용처가 즉시 떠오른다. 다음 주 영어 수업에 다룰 지문 20개를 필수 / 선택 / 보류 / 제외 열로 분류하는 일회용 편집기, 학생 30명을 레벨별로 재배치하는 드래그 보드, 시스템 프롬프트를 조정할 때 왼쪽에는 편집 가능한 프롬프트와 강조된 변수 슬롯을 두고 오른쪽에서 세 가지 샘플 입력을 실시간 렌더링하는 화면 — 모두 원문이 제시한 패턴 그대로다. 한국 학원의 교사 업무 중 상당 부분은 엑셀과 한글, 카카오톡 사이를 오가며 분류·배치·확정을 반복하는 일이다. 이 작업을 그때그때 맞춤 인터페이스로 풀어낸다는 발상은 도구를 사는 게 아니라 매번 새로 만든다는 점에서 결이 다르다.

자기주도 복습으로 이어지는 상호작용

HTML 출력은 학생 쪽에서도 학습 경험을 바꾼다. 원문은 HTML 문서가 슬라이더나 노브를 넣어 디자인을 조정하거나 알고리듬 옵션을 바꿔 결과를 확인하는 양방향 상호작용을 지원한다고 설명한다. 조정한 내용을 다시 프롬프트로 복사하는 기능도 만들 수 있다.

영어 학습으로 옮기면 자기주도 복습 페이지의 모습이 구체화된다. 수능 영어 빈칸 추론 지문을 HTML로 출력하되, 학생이 단락별로 클릭하면 해당 단락의 주제 단서가 강조되며 빈칸 자리에 네 개 선지가 펼쳐지고, 선지마다 클릭 시 왜 오답인가를 보여주는 식이다. EBS 수능특강 한 회분을 이런 방식으로 재구성하면 줄글 해설지를 처음부터 끝까지 읽어 내려가던 복습이, 학생이 직접 손을 움직이는 능동적 과정으로 바뀐다. 긱뉴스 댓글에도 강의자료에 이미지가 필요할 때 클로드 코드의 HTML 시각화를 활용한다는 사용 경험이 등장한다. 교실 현장에서 이미 일부 사용자가 같은 결을 잡아내고 있다는 신호다.

대가와 한계 — 토큰, 시간, 버전 관리

원문은 장점만 나열하지 않는다. 마크다운은 보통 토큰을 덜 쓰지만 HTML은 표현력과 실제로 읽힐 가능성이 높아 전체 결과물이 더 낫다고 본다는 입장이다. HTML 생성은 마크다운보다 2~4배 더 오래 걸린다고 명시한다. 가장 큰 단점은 버전 관리로, HTML diff는 마크다운보다 시끄럽고 리뷰하기 어렵다는 점이다. Opus 4.7의 1MM 컨텍스트 윈도우에서는 늘어난 토큰 사용량이 크게 눈에 띄지 않는다는 단서도 붙는다.

학원 운영자가 이 트레이드오프를 그대로 받아들이려면 판단 기준이 필요하다. 일회성 학부모 리포트, 특정 시험 직전 만드는 핵심 정리 페이지, 시안 비교용 커리큘럼 그리드 — 이런 결과물은 한 번 쓰고 끝나거나 큰 폭의 재편집이 일어나지 않는다. HTML이 적합하다. 반대로 매주 조금씩 갱신되는 어휘 리스트, 학생별 출결 기록, 교재 원고처럼 변경 이력을 추적해야 하는 문서는 여전히 마크다운이나 스프레드시트가 맞다. 원문이 “거의 모든 용도에서 마크다운 사용을 중단했지만 이는 HTML을 최대한 선호하는 쪽에 가까운 사용 방식”이라고 단서를 다는 이유와 통한다.

읽히는 자료가 가르치는 자료다

원문은 “HTML로 된 스펙, 보고서, PR 설명은 동료가 열어보고 참조하기 쉬워 실제로 읽힐 가능성이 훨씬 높아진다”고 정리한다. 표현력과 공유성, 그리고 실제로 읽힐 가능성 — 이 세 가지가 마크다운보다 HTML이 우위에 서는 핵심 근거다. 교육 자료의 본질도 다르지 않다. 아무리 정교하게 설계된 수능 영어 분석 노트라도 학생이 끝까지 읽지 않으면 효과가 없다. 아무리 성실하게 작성된 학습 진단서라도 학부모가 펼치지 않으면 의미가 없다.

긱뉴스 댓글 한 줄이 이 흐름을 짧게 요약한다. 에이전트가 더 유능해질수록 우리에게 필요한 건 읽기 쉬운 글보다 다른 무엇이라는 문장이다. AI가 만들어내는 결과물의 양은 이미 사람이 다 읽기 어려운 수준에 가까워졌다. 한국 영어 교육 현장의 다음 과제는 더 많은 자료를 만드는 것이 아니라 학생과 학부모가 실제로 끝까지 보는 자료를 만드는 일에 가까워지고 있다. 클로드 코드의 HTML 출력은 그 방향으로 가는 구체적인 한 갈래의 도구로 자리 잡아 가고 있다.