[연수자료] 학습지를 게임 앱으로 변환하기: 한국시각장애인교사회·장교조 공동 AI 코딩 입문 연수

김헌용 · 신명중학교 영어 교사, 함께하는장애인교원노동조합 위원장

이 글은 2026년 5월 6일 한국시각장애인교사회와 함께하는장애인교원노동조합이 공동 주관한 'AI 코딩 입문 연수'의 강의 내용을 속기록을 바탕으로 정리한 것입니다.

들어가며

연휴 직후인 2026년 5월 6일, 10명이 넘는 선생님이 Zoom 화상 회의실에 차례로 입장해 주셨다. 이날의 연수는 한국시각장애인교사회와 함께하는장애인교원노동조합이 공동으로 마련한 AI 코딩 입문 연수였다. 시각장애 교원과 청각장애 교원이 참여한 가운데, 이론을 길게 설명하기보다 일단 한 번 끝까지 가 보기로 하고 연수를 시작했다. 연수의 목표는 단 하나였다. 60분이라는 짧은 시간 안에, 학교에서 흔히 쓰는 학습지 한 장을 학습 게임 한 개로 직접 바꿔 보는 것이다. 이 글은 그 시간에 미처 따라오지 못했거나 사정상 참여하지 못한 분들을 위해 당시의 과정을 차근차근 되짚어 정리한 것이다.

어디에서 시작할 것인가 — 세 가지 환경

이번 연수는 클로드(Claude)를 기반으로 진행하였다. 그런데 같은 클로드라는 인공지능을 사용하더라도 어디에서 접속하느냐에 따라 우리가 할 수 있는 일의 폭은 크게 달라진다. 흔히 접속하는 웹 브라우저 화면은 입문자에게 적합하고, 컴퓨터에 직접 설치해 쓰는 데스크톱 앱은 내 컴퓨터 환경에 부분적으로 접근할 수 있어 중급자에게 알맞다. 더 나아가 터미널 환경을 이용하면 컴퓨터 전체를 제어하는 본격적인 에이전틱 코딩이 가능하다. 이 자리에서는 구글 계정으로 로그인해 곧바로 대화할 수 있는 클로드 데스크톱 앱을 실습 도구로 선택했다.

시연 1: 학교 학습지를 게임으로 바꾸기

가장 먼저 할 일은 클로드에게 재료를 건네는 것이다. 채팅창의 첨부 기능을 이용해 중학교 영어 수업에서 실제 사용하는 단어 영영풀이 엑셀 파일을 올렸다. 26개의 단어와 한국어 뜻, 영영풀이, 예문이 담긴 자료다. 클로드는 PDF나 엑셀, 워드 문서는 잘 읽지만 한글(HWP) 파일은 직접 처리하지 못하므로, 한글 자료라면 미리 PDF로 변환해 두어야 한다.

파일이 올라가자마자 프롬프트를 입력했다. "이 학습지를 시한폭탄 테마의 게임으로 만들어 줘. 시각적 효과와 사운드 효과를 충분히 줘."

▲ Claude 채팅창에 학습지 파일이 첨부되고 프롬프트가 입력된 화면

클로드가 설계 및 코드 작성을 맞치면 곧바로 화면 우측에 아티팩트(Artifacts)라는 새 패널이 열리며 완성된 앱이 나타난다.

▲ Claude 화면 우측에 아티팩트 패널이 열려 완성된 앱이 나타나는 화면

옛날 같으면 앱 하나를 만들기 위해 굉장한 전문성과 적지 않은 시간이 필요했지만, 지금은 인공지능 도구를 이용하면 학습지 한 장을 만드는 시간보다도 짧은 시간 안에 앱이 완성된다. 인공지능은 클라우드 서버에서 작동하므로 내 컴퓨터의 성능이 느리다고 걱정할 필요도 없다.

모델 차이의 실용적 의미 — Opus 4.7 vs Sonnet 4.6

화면에는 'Opus 4.7 적응형'이라는 모델 이름이 떠 있다. 클로드에는 크게 오퍼스(Opus)와 소넷(Sonnet) 두 가지 모델이 있다. 지도를 그리는 일에 비유하자면, 소넷은 큰 윤곽을 빠르게 잡아내는 데 능하고 오퍼스는 시간이 걸리더라도 골목길 하나까지 정교하게 채워 넣는 식이다. 유료 사용자의 기본 모델인 오퍼스는 복잡한 앱을 끈기 있게 완성해 내지만, 무료 사용자의 기본 모델인 소넷은 빠른 대신 구조가 단순하다. 학교에서 많이 사용하는 구글 제미나이(Gemini)의 프로(Pro)와 플래시(Flash) 모델이 각각 오퍼스와 소넷의 역할에 대응한다.

결과물 확인 — Artifacts 패널 둘러보기

코드가 모두 완성되면 우측 아티팩트 패널에서 결과물을 바로 확인할 수 있다. 스크린리더 사용자는 다음 헤딩으로 이동하는 탐색키 'H'를 눌러 이 패널로 빠르게 진입할 수 있다.

화면 상단에는 '미리보기'와 '코드 보기' 두 가지 탭이 있다. 미리보기를 누르면 게임을 즉시 실행할 수 있는 화면이 나타난다. 클로드가 만들어 준 게임은 영영풀이를 읽고 사지선다로 단어를 고르는 게임이었고, 시간 안에 정답을 맞히지 못하면 폭탄이 터지는 효과가 나타났다. 내 의도에 정확히 부합하는 결과물이었다. 만약 수정이 필요하면 코드를 직접 고칠 필요 없이 채팅창에 자연어로 요구사항을 적어 내면 된다. 아티팩트는 결과물이 바뀔 때마다 버전을 새로 매기며 표시해 준다.

결과물을 내 컴퓨터로 — index.html로 저장하기

완성된 결과물을 공유하는 방법은 크게 두 가지다. 첫째는 아티팩트 패널 우측 하단의 더보기 메뉴에서 '산출물 게시'를 누르는 것이다. 별도 플랫폼 가입 없이 클로드 도메인의 단축 주소(URL)가 즉시 만들어지는 가장 간편한 방식이다. 둘째는 같은 메뉴에서 '다운로드'를 눌러 파일을 내 컴퓨터로 가져오는 것이다.

다운로드 시에는 유의할 점이 하나 있다. 그냥 내 컴퓨터에서만 사용할 것이라면 어떤 파일명이든 상관없지만, 추후 GitHub에 업로드하여 웹에 배포할 것이라면 파일 이름을 소문자 index.html로 저장하여야 한다는 것이다. 다른 이름으로 저장하면 GitHub에 올릴 때 정상적으로 작동하지 않는다.

HTML 파일은 텍스트 기반 파일로, 그 자체로 완결된 가벼운 문서다. 한글 파일(.hwp)이 한컴오피스가 깔린 컴퓨터라면 어디서든 열리듯, HTML 파일은 Chrome 브라우저만 있으면 어느 컴퓨터에서나 열 수 있다. 인터넷이 연결되어 있지 않아도 된다. USB에 담아 다른 컴퓨터로 가져가도 브라우저에만 띄우면 게임이 똑같이 실행된다.

HTML 파일과 같은 다양한 파일 형식을 다룰 때 윈도우에서 한 가지 설정을 미리 해 두면 편하다. 윈도우는 기본적으로 파일의 확장명을 숨겨 둔다. 폴더 옵션에서 파일 확장명이 보이도록 설정을 바꿔 두면 폴더 안에 있는 파일들이 어떤 형식인지 바로 알 수 있다. 파일 탐색기에서 아무 폴더나 열어둔 상태에서 키보드 기준 Shift+Tab을 두 번 눌러 보기 탭으로 간 뒤, '파일 확장명' 표시를 체크해 주면 된다. 학교 동료 선생님들에게 코딩을 알려드리다 보면 의외로 파일명 관리 이 한 가지 설정에서 많이들 헤매신다.

▲ 윈도우 파일 탐색기에서 보기 - 표시 - 파일 확장명을 체크하고, 잘못 붙은 .txt 확장자를 이름 바꾸기로 제거해 .html로 정정하는 5단계 과정

시연 2: GitHub Pages로 인터넷에 올리기

이제 이 파일을 인터넷에 올릴 차례다. 개발자들의 소셜 네트워크라 불리는 깃허브(GitHub)를 이용하면 된다. 깃허브에서는 폴더 하나를 '저장소(Repository)'라고 부른다. 하나의 프로젝트는 하나의 저장소에 담는 것이 원칙이다. 한 가지 유의할 것은 인증 절차가 꽤 까다롭다는 것이다. 나도 이번 연수를 위해 학교 도메인으로 이메일 계정을 새로 만들었는데, GitHub 가입 과정에서 사람인지 확인하는 인증 과정을 다섯 번이나 거쳐야 했다.

▲ GitHub 화면 우측 상단 초록색 New 버튼

로그인이 완료되면 화면 우측 상단의 초록색 'New' 버튼을 눌러 새 저장소를 만든다.

▲ 새 저장소 만들기 화면 — 이름·설명·Public·Create repository

이름은 test-game처럼 짧은 영어 소문자와 하이픈으로 짓는 것이 좋다. 한글이나 대문자를 쓰면 이후 주소를 다루기에 번거롭다. 공개 여부는 'Public'으로 두고 'Create repository'를 눌러 생성한다.

▲ 파일 업로드 화면의 uploading an existing file 링크

빈 저장소 화면에서 'uploading an existing file' 링크를 누른다.

▲ 파일 업로드 후 커밋 메시지 입력과 Commit changes 버튼

이곳에 다운로드해 둔 index.html 파일을 드래그해 올린다. 하단에 커밋 메시지를 채운 뒤 초록색 'Commit changes' 버튼을 누른다. 이때 크롬 자동번역 기능을 켜 두면 'Branch'가 '나뭇가지'로 번역되어 헷갈리기 쉽다. 레포지토리, 브랜치, 커밋 같은 원래 용어 그대로 화면을 읽는 편이 낫다.

▲ Settings 메뉴와 좌측 사이드바의 Pages 항목

파일이 올라갔으면 이제 저장소 상단의 'Settings' 탭으로 이동해 좌측 메뉴에서 'Pages' 항목을 찾는다.

▲ Branch를 None에서 main으로 바꾸고 Save 버튼

화면 가운데 'Branch' 밑의 풀다운 메뉴를 'None'에서 'main'으로 바꾸고 'Save' 버튼을 누른다. 몇 분 기다리면 'Your site is live at'이라는 문구와 함께 내 웹사이트 주소가 표시된다.

시연 중 발생한 오류

그런데 실제 시연에서는 오류가 생겼다. 방금 만든 test-game 저장소가 정상적으로 웹에 배포되지 않고 상태가 펜딩(pending)에 멈춰 있었다. 부여받은 주소를 직접 입력해도 404 오류 화면만 뜰 뿐이었다. 그 순간에는 정확한 원인을 알 수 없어, 결국 개인 계정의 다른 정상 배포 사례를 보여주며 시연을 마무리해야 했다.

연수가 끝난 뒤 곧바로 원인을 추적해 보았다. 깃허브가 신규 가입 계정의 남용을 막기 위해 가동하는 자동화 봇 방지 시스템이 원인으로 보였다. 갓 만든 계정이 곧바로 웹 호스팅을 시도하자 이를 보류한 것이다. 이를 풀기 위해 두 단계 조치를 취했다. 먼저 계정 설정에서 휴대전화 2단계 인증(SMS 2FA)을 활성화해 시스템이 내 계정을 신뢰하게 만들었다. 그다음, 막혀 있던 배포 과정을 단순히 재실행하는 대신 새 파일 하나를 업로드해 새로운 작업 흐름을 유발했다. 이 조치 후 49초 만에 배포가 완료되었고 우리가 만든 게임이 온전히 돌아가는 것을 확인했다.

이 같은 오류는 드문 편이다. 추측하기로는 학교의 조직 구글 계정으로 가입해서 그런 것 같지만 이유는 확실하지 않다. 입문자라면 개인 구글 계정으로 가입하고, 가능하다면 2단계 인증까지 설정해 두기를 권장한다.

참가자 Q&A

30분 가까이 이어진 질의응답 시간에는 코딩을 처음 접하는 분들의 현실적인 질문이 쏟아졌다. 함께 나눌 만한 대목을 정리해 둔다.

• Q. 학습지를 만들었더니 빈칸이 제가 의도한 괄호가 아니라 밑줄로 나옵니다. 빈칸 색깔도 마음대로 바뀌고요.
  • A. 이런 시각적 디자인은 한 번에 완벽하게 통제하기가 어렵습니다. 한 번 마음에 드는 결과물을 만들고 나면, 다음 차시 학습지를 만들 때 이전 결과물 파일과 새 엑셀 파일을 함께 첨부하면서 "이전 형식과 똑같이 내용만 바꿔 줘"라고 지시하시면 훨씬 수월합니다. 한 가지 더, 모델에 따라 지시 이행률 차이가 큽니다. 무료 사용자의 기본 모델인 소넷보다 유료 사용자의 기본 모델인 오퍼스 4.7이 같은 지시도 훨씬 충실히 따라 줍니다.
• Q. 나중에 HTML 파일의 텍스트 내용을 직접 수정할 수도 있나요?
  • A. 가능합니다. 다운로드한 파일을 메모장으로 열고 본문 내용만 고친 뒤 저장하시면 됩니다. 단 한 가지, 글씨를 둘러싼 레이아웃 코드는 절대 건드리지 마세요. 학습지 내용은 보통 한국어나 영어 그대로 보이는 부분이라 어렵지 않게 찾으실 수 있습니다.
• Q. 다운로드한 HTML 파일을 스마트폰으로 보냈는데 열리지가 않네요. 그냥 폰으로 바로 열 수는 없을까요?
  • A. HTML 파일은 그 자체로는 일종의 레시피일 뿐이고, 그것을 그려내는 환경이 따로 있어야 작동합니다. 컴퓨터의 Chrome 브라우저는 그 역할을 직접 해 주지만, 모바일은 첨부받은 HTML 파일을 그려내는 환경이 없습니다. 그래서 깃허브 페이지로 한 번 웹 주소로 배포해 두어야 모바일 브라우저가 곧장 받아 실행해 줄 수 있습니다.
• Q. 클로드, 챗지피티, 제미나이 같은 AI 서비스가 워낙 많은데 어떤 차이가 있는지 궁금합니다.
  • A. 각 서비스의 강점이 조금씩 다릅니다. 표로 정리해 드립니다.

• Q. 시각장애인도 터미널에서 코딩을 할 수 있나요?
  • A. 충분히 가능합니다. 센스리더가 텍스트 기반 터미널 출력을 모두 읽어 줍니다. 처음에는 화면 글씨를 전체 복사하는 단축키 'Ctrl+Shift+A'와 'Ctrl+Shift+C'를 활용해 메모장에 붙여 넣고 읽으시면 편리합니다(센스리더 기능키 무시 상태에서 실행). 도구별로는 출력 내용이 깔끔한 챗지피티 기반의 코덱스(Codex)를 입문자에게 추천합니다. 클로드 코드(Claude Code)는 학습 자료가 풍부한 대신 출력에 부가 기호가 많아 처음에는 읽기가 다소 번거롭습니다.
• Q. 사용 한도와 비용은 어느 수준이 적당할까요?
  • A. 처음 한두 번 배우는 목적이라면 월 20달러의 유료 구독으로도 하루 한 시간 이상 실습이 가능합니다. 본격적으로 매일 사용하는 단계로 가면 한도가 빠르게 닳기 시작하는데, 그 단계에서도 클로드의 100달러 티어 정도면 사실상 무한정 쓸 수 있는 수준입니다.

마치며

깃허브에 가입하고 파일을 올려 설정하는 과정 자체가 너무 번거롭게 느껴진다면, 클로드 데스크톱 앱 안에 있는 '산출물 게시' 기능만으로도 충분히 교실에서 쓸 만한 웹 링크를 얻을 수 있다. 무료 사용자라도 부담 없이 시작할 수 있는 첫 번째 길이다.

하지만 장기적으로 인공지능을 활용해 복잡한 시스템을 만들고 내 업무를 자동화해 보고 싶다면, 귀찮더라도 깃허브 가입과 터미널 환경에 발을 들여놓기를 권유한다. 자연어 한 줄로 내 컴퓨터를 제어하며 앱을 만들어 내는 경험은 앞으로의 교육 현장에서 유용한 도구가 될 것이다.

관련 글

• [연수자료] AI 시대, 웹 접근성을 넘어 보편적 인프라로: 문서 접근성부터 교육 콘텐츠, 조직 운영 자동화까지
• [연수자료] 시각장애인 교사의 바이브 코딩/에이전틱 엔지니어링 실전기
• [연수자료] AI 기반 노조 실무 자동화: 회의록에서 재정 보고까지