"이런 도구가 있으면 수업이 훨씬 편할 텐데." 교실에서 한 번쯤 이런 생각을 해보셨을 겁니다. 시중 도구는 우리 반에 꼭 맞지 않고, 원하는 기능은 늘 한두 개씩 빠져 있죠. 저는 컴퓨터를 전공하지 않은 초등교사이지만, 지난 1년간 AI의 도움을 받아 시계 읽기 연습기, 원의 넓이 시각화 도구, 행사 좌석 배치도 같은 학급 도구를 직접 만들어 썼습니다.
그 방법이 바로 바이브코딩(vibe coding)입니다. 코드를 한 줄씩 손으로 쓰는 대신, AI에게 만들고 싶은 것을 말로 설명하면 AI가 코드를 만들어 주는 방식이죠. 이 글은 "코딩을 전혀 모르는 선생님"을 기준으로, 아이디어를 떠올리는 순간부터 실제로 학생이 쓸 수 있는 웹페이지로 배포하기까지의 과정을 단계별로 정리한 실전 가이드입니다.
핵심은 코드를 아는 것이 아니라, 원하는 것을 정확히 설명하는 능력입니다. 그건 매일 수업에서 학생에게 활동을 안내하는 선생님이 이미 가진 능력입니다.
바이브코딩이란 무엇인가
전통적인 코딩은 사람이 프로그래밍 언어의 문법을 익혀 한 줄씩 작성합니다. 반면 바이브코딩은 ChatGPT, Claude 같은 AI에게 자연어로 요구사항을 전달하고, AI가 만든 코드를 받아 실행해 보고, 다시 고쳐 달라고 요청하는 대화형 반복 과정입니다. 문법을 몰라도 됩니다. 대신 "무엇을, 누가, 어떻게 쓸 것인지"를 또렷하게 전달하는 것이 중요합니다.
오해하기 쉬운 점 하나. 바이브코딩은 "버튼 한 번에 앱이 뚝딱 나오는 마법"이 아닙니다. 처음 결과물은 대개 70% 정도만 맞고, 나머지는 직접 써보며 고쳐 나가야 합니다. 그래서 이 글에서도 '고쳐가며 다듬는 단계'에 가장 많은 분량을 할애했습니다.
시작하기 전에 — 마음가짐 세 가지
- 작게 시작하세요. 학습관리시스템 같은 거대한 것이 아니라, "정각·30분만 연습하는 시계 한 개" 정도의 작은 도구가 첫 프로젝트로 적당합니다.
- 완성이 아니라 작동이 목표입니다. 디자인이 투박해도 학생이 실제로 쓸 수 있으면 성공입니다. 다듬는 건 그다음입니다.
- 실패는 비용이 들지 않습니다. 코드가 망가지면 AI에게 다시 만들어 달라고 하면 됩니다. 마음껏 시도하세요.
1단계 — 문제를 한 문장으로 정리하기
가장 중요한 단계이자, 가장 많이 건너뛰는 단계입니다. 도구를 만들기 전에 "누가, 언제, 무엇을 하기 위해 쓰는가"를 한 문장으로 적어 보세요. 이 문장이 곧 프롬프트의 뼈대가 됩니다.
예를 들어 이렇게 적습니다.
"초등 1학년 학생이, 수학 시간에, 시계의 정각과 30분을 직접 바늘을 돌려가며 연습하기 위한 웹페이지."
여기에는 대상(1학년), 맥락(수학 시간), 목적(정각·30분 연습), 핵심 상호작용(바늘을 직접 돌림)이 모두 들어 있습니다. 이 한 문장만 분명하면 AI는 놀랄 만큼 정확한 출발점을 만들어 줍니다. 반대로 "시계 도구 만들어 줘"라고만 하면 동문서답이 돌아옵니다.
2단계 — 도구 고르기
비전공 교사가 부담 없이 시작할 수 있는 환경을 추천 순서로 정리했습니다.
- 대화형 AI(ChatGPT, Claude) + 단일 HTML 파일: 가장 진입장벽이 낮습니다. AI가 만들어 준 코드를 메모장에 붙여
index.html로 저장하고 더블클릭하면 브라우저에서 바로 열립니다. 설치할 것이 없습니다. 이 글은 이 방식을 기준으로 설명합니다. - AI 코드 에디터(Cursor 등): 파일이 여러 개로 늘어나고 수정이 잦아지면 편리합니다. 다만 처음에는 화면이 복잡해 보일 수 있습니다.
- 노코드 빌더(예: Google Sites, 각종 앱빌더): 코드를 아예 보지 않아도 되지만, 세밀한 커스터마이징에는 한계가 있습니다.
처음이라면 대화형 AI + 단일 HTML 파일로 시작하길 권합니다. 결과물이 파일 하나라서 이해하기 쉽고, 나중에 그대로 인터넷에 올리기도 쉽습니다.
3단계 — 첫 프롬프트 작성하기
1단계에서 적은 문장에 다음 네 가지를 덧붙이면 좋은 첫 프롬프트가 됩니다. 대상·기능·제약·형식입니다. 아래는 시계 연습 도구를 예로 든 실제 프롬프트입니다.
초등학교 1학년 학생이 시계의 정각과 30분을 연습하는
웹페이지를 만들어 줘.
[기능]
- 화면에 아날로그 시계가 보이고, 학생이 마우스로 분침을 돌릴 수 있어야 해.
- "3시 정각으로 맞춰 보세요" 같은 문제를 무작위로 내 줘.
- 정답이면 칭찬 메시지, 틀리면 다시 시도하라고 안내해 줘.
[제약]
- 1학년이 쓰므로 글씨는 크고, 버튼도 커야 해.
- 별도 설치 없이 브라우저에서 바로 열리는 HTML 파일 하나로 만들어 줘.
- 한국어로 보여 줘.
[형식]
- 전체 코드를 하나의 index.html 안에 넣어 줘.대괄호로 항목을 나눈 이유는, AI가 요구사항을 빠뜨리지 않도록 체크리스트처럼 보여주기 위해서입니다. 수업 활동 안내서를 쓰듯 또박또박 적는다고 생각하면 됩니다.
4단계 — 고쳐가며 다듬기 (가장 중요한 단계)
첫 결과물을 받으면 코드를 index.html로 저장하고 더블클릭해 브라우저에서 열어 봅니다. 십중팔구 어딘가 어색합니다. 이때 좌절하지 말고, 관찰한 것을 그대로 말로 전달하면 됩니다. AI를 고치는 비결은 '구체적인 피드백'입니다.
좋은 피드백과 나쁜 피드백을 비교해 봅시다.
- ❌ "이상해요. 고쳐 주세요." → AI가 무엇을 고쳐야 할지 모릅니다.
- ✅ "분침을 돌릴 때 시침이 같이 움직이지 않아요. 3시 30분이면 시침이 3과 4 사이에 와야 해요." → 정확히 고칠 수 있습니다.
한 번에 한 가지씩 고치는 것도 요령입니다. "버튼 색도 바꾸고, 소리도 넣고, 점수도 추가해 줘"라고 한꺼번에 요청하면 결과가 엉키기 쉽습니다. 하나를 고쳐 확인하고, 마음에 들면 다음으로 넘어가세요. 잘 작동하는 버전이 나오면 그 파일을 따로 복사해 저장해 두는 습관도 큰 도움이 됩니다. 다음 수정이 잘못돼도 되돌아갈 지점이 생기니까요.
저는 시계 도구를 만들 때 "정답 판정이 1분 단위로 너무 엄격하다"는 점을 발견하고, "5분 이내면 정답으로 인정해 줘"라고 한 줄 요청해 1학년 눈높이에 맞췄습니다. 직접 써보지 않았다면 몰랐을 부분입니다.
5단계 — 무료로 배포하고 공유하기
내 컴퓨터에서만 열리는 파일은 학생과 나누기 어렵습니다. 인터넷 주소(URL)로 만들면 카톡이나 학급 게시판에 링크 하나로 공유할 수 있습니다. 비용 없이 정적 웹페이지를 올릴 수 있는 대표적인 무료 서비스는 다음과 같습니다.
- GitHub Pages: 파일을 올리면
https://아이디.github.io/프로젝트형태의 주소가 생깁니다. 무료이고 안정적입니다. - Netlify·Vercel: 폴더를 끌어다 놓는 것만으로 배포되는 간편한 서비스입니다.
배포 방법 자체도 AI에게 물어보면 화면을 짚어 가며 안내해 줍니다. "GitHub Pages에 이 index.html을 올려서 인터넷 주소를 만드는 방법을 초보자에게 알려 줘"라고 요청해 보세요.
학생에게 쓰기 전, 꼭 점검할 것
교실에서 쓰는 도구에는 일반 앱과 다른 책임이 따릅니다. 배포 전 아래를 확인하세요.
- 개인정보: 학생 이름·사진·생년월일 등을 수집하거나 외부로 전송하지 않도록 합니다. 가능하면 데이터는 기기 안에만 두세요.
- 광고·외부 링크: 학생용 도구에는 광고나 외부 사이트로 나가는 링크를 넣지 않는 편이 안전합니다.
- 접근성: 글씨 크기, 색 대비, 키보드만으로도 조작 가능한지 확인합니다. 색약 학생을 위해 색에만 의존하지 않도록 합니다.
- 오작동 대비: 여러 기기(태블릿, 크롬북, 스마트폰)에서 미리 열어 보고, 안 되는 환경이 없는지 확인합니다.
자주 막히는 지점과 해결법
"AI가 준 코드를 열었더니 빈 화면이에요." 대개 코드 일부만 복사됐거나 파일 확장자가 .txt로 저장된 경우입니다. 코드 전체를 다시 복사하고, 저장할 때 파일 이름을 index.html로 정확히 지정했는지 확인하세요.
"수정할수록 더 망가져요." 한 번에 여러 가지를 바꾸려다 생기는 흔한 문제입니다. 잘 되던 버전으로 돌아가서, 변경을 하나씩 다시 적용해 보세요. 그래서 4단계에서 '잘 되는 버전 복사 저장'을 강조한 것입니다.
"AI가 자꾸 똑같은 실수를 반복해요." 같은 대화가 너무 길어지면 맥락이 흐려집니다. 새 대화를 열고, 현재까지의 코드와 "이 부분만 이렇게 고쳐 줘"라는 요청을 함께 붙여넣어 보세요.
마치며 — 도구를 만드는 교사의 시선
바이브코딩의 진짜 가치는 멋진 앱을 만드는 데 있지 않습니다. "우리 반의 이 문제를 어떻게 풀까"를 끝까지 파고들 수 있게 된다는 점에 있습니다. 시중 도구에 수업을 맞추는 대신, 수업에 도구를 맞출 수 있게 되는 것이죠.
처음 만든 도구는 분명 어설플 겁니다. 제 첫 도구도 그랬습니다. 하지만 학생이 그 도구로 활동에 몰입하는 모습을 한 번 보고 나면, 다음 도구를 만들 이유는 저절로 생깁니다. 작게 시작하세요. 오늘 떠올린 그 "이런 게 있으면 좋을 텐데"가 첫 프로젝트입니다.
이 블로그의 Projects에는 제가 이렇게 만든 도구들을, 수업 연구에는 그 도구들을 실제로 녹여낸 탐구 단원 수업을 정리해 두었습니다. 함께 보시면 "도구가 수업 속에서 어떻게 쓰이는지" 감을 잡는 데 도움이 될 것입니다.