"오늘 급식 뭐예요?"라는 질문에 매일 답하는 교사는 많지만, 그 질문을 해결해 주는 앱은 학급마다 사정이 달라 하나로 정하기 어렵습니다. 바이브 코딩은 이런 교실의 필요를 교사가 직접 웹앱으로 만들어 해결할 수 있게 합니다. 이 글은 학급에 맞는 웹앱이 필요한 이유, 맞춤 앱을 기획하는 출발점, 실제로 만든 학급 웹앱 사례, 그리고 앱을 오래 쓰기 위해 갖춰야 할 조건을 정리합니다.

교실에는 범용 앱이 채우지 못하는 필요가 있습니다

교실에는 범용 에듀테크로는 해결되지 않는, 학급과 교사마다 다른 필요가 있습니다. 매일 반복되는 급식 질문, 발표자를 뽑을 때마다 생기는 공정성 논란, 여기저기 흩어지는 상담 기록, 매번 새로 정해야 하는 청소 구역, 학급에 맞는 타이머가 없는 아쉬움이 대표적입니다. 시중 앱은 많은 사용자를 위해 만들어지므로 이런 세세한 상황까지 맞추기 어렵습니다.

시중 도구의 한계는 서술형 평가에서 더 분명하게 드러납니다. 중학교 2학년 사회 교사가 7개 반, 200명이 넘는 학생의 '사회 문제 해결 제안서'를 채점하려면, 한 장에 최소 3~5분씩 1,000분, 즉 16시간이 넘게 걸립니다. 학교에 보급된 AI 채점 보조 도구는 정해진 키워드가 있는지만 확인할 뿐, 교사가 중요하게 여긴 '사회적 공감'과 '창의적 대안'의 가치는 읽지 못했습니다.

기술은 발전했지만 교사의 핵심 업무인 소통과 평가는 여전히 과거의 방식에 머무는 상황을 '디지털 역설'이라고 부릅니다. 바이브 코딩은 기존 서비스를 그대로 쓰는 대신 학급 상황에 맞는 기능을 교사가 직접 설계하고 구현할 수 있다는 점에서 디지털 역설을 풀어 갈 방법이 됩니다.

맞춤 앱의 출발점, 문제를 구체적으로 정의하기

학급 맞춤 앱을 기획하는 출발점은 교실의 불편을 대상, 시간, 행위, 결과가 분명한 문제로 바꾸는 것입니다. "학급을 위한 만능 앱"처럼 막연한 목표는 기능만 많고 실제로는 쓰지 않는 앱으로 이어지기 쉽습니다. 좋은 문제는 칼날처럼 명확해야 합니다.

막연한 문제: "행정 업무를 자동화하고 싶다."
구체적인 문제: "매주 월요일 1교시에 수거하는 독후감 활동지에서, 학생들이 공통으로 언급한 키워드 3가지만 뽑아내고 싶다."

문제 정의에서는 진짜 문제와 가짜 문제를 가려내는 일도 중요합니다. 학생들이 칠판을 보지 않는다는 이유로 칠판을 볼 때마다 포인트를 주는 앱을 떠올릴 수 있지만, 칠판을 보지 않는 데에는 컨디션이나 심리적인 이유가 있을 수 있습니다. 서술형 채점 사례에서도 진짜 문제는 채점 기술이 아니라 교사의 에너지 안배와 평가의 공정성이었습니다. 바이브 코딩은 그 자체가 목적이 아니라 이런 교육적 가치를 지키기 위한 수단입니다.

교실의 불편에서 출발한 학급 맞춤 웹앱

학급 맞춤 웹앱은 하나의 교실 상황에서 출발해, 그 상황에 꼭 필요한 기능만 담는 앱입니다. 교실의 불편이 웹앱으로 바뀐 사례는 다음과 같습니다.

■ 급식 질문에 답하는 급식 알리미

나이스(NEIS) 교육정보 개방 포털이 공개하는 학교 정보와 급식 식단 데이터를 연결하면, 학교를 검색해 오늘의 급식 메뉴를 보여 주는 앱이 됩니다. 날짜를 넘겨 다른 날의 메뉴를 보는 기능, 학생 안전과 직결되는 알레르기 번호 안내처럼 교실에서 필요한 기능을 더해 갈 수 있습니다.

[날짜 이동 버튼과 알레르기 번호가 함께 표시된 급식 알리미 화면]

■ 우리 반 글쓰기 타임라인 SNS

학생이 쓴 글이 클라우드 데이터베이스에 저장되어 교실 밖에서도 쓰고 읽을 수 있는 학급용 글쓰기 공간입니다. 글마다 비밀번호를 두어 쓴 사람만 수정하거나 삭제할 수 있고, 교사는 저장된 글을 엑셀 표처럼 한눈에 확인할 수 있습니다.

[러버블로 만든 글쓰기 타임라인 SNS]

■ 키보드가 서툰 저학년을 위한 영어 학습 앱

글자를 입력하기 어려운 유치원생이나 초등학교 저학년에게는 텍스트 기반 AI 챗봇이 맞지 않습니다. 태블릿 카메라로 시계를 비추면 'Clock', 지우개를 비추면 'Eraser'를 보여 주고 원어민 발음으로 읽어 주는 앱은 사물을 비추는 동작만으로 영어를 익히게 합니다.

[카메라로 머그컵을 비추고 촬영하면에 영어 단어 'Mug'가 나타난 영어 학습 앱 화면]

■ 프로젝터에 띄우는 실시간 칭찬 보드

학생 이름과 칭찬 메시지를 입력하면 카드로 나타나고, 다른 화면에도 같은 카드가 즉시 반영되는 앱입니다. 교탁 컴퓨터와 프로젝터에 보드를 띄워 두면 칭찬이 올라오는 순간 학급 전체가 함께 볼 수 있습니다.

[우리반 실시간 칭찬 보드 화면]

■ 설치 없이 시작하는 출석 체크 앱

이름을 입력하면 출석 시간이 기록되고 인원이 실시간으로 표시되는 앱으로, 메모장과 웹 브라우저만으로 실행할 수 있어 첫 결과물로 만들기에 적합합니다.

[HTML 파일 하나로 만든 '스마트 출석 체크 웹앱' 실행 화면]

학급 앱이 갖춰야 할 세 가지: 저장, 공유, 접근 제한

직접 만든 앱이 학급에서 오래 쓰이려면 기록이 저장되고, 링크로 공유되고, 허가된 사람만 볼 수 있어야 합니다. 화면만 있는 앱은 한 번의 수업에는 쓸 수 있지만, 학급 운영의 도구가 되기는 어렵습니다.

■ 저장

브라우저의 로컬 스토리지(Local Storage)에 저장한 기록은 그 기기에만 남습니다. 집에서 다시 확인하거나 학생과 함께 쓰려면 기록을 서버에 보관하는 클라우드 데이터베이스(Database)가 필요합니다.

■ 공유

배포(Deploy)는 내 컴퓨터에서만 작동하던 웹앱을 인터넷에 올려 링크로 누구나 접속하게 하는 과정입니다. 코드를 GitHub에 올리면 Vercel 같은 배포 서비스가 웹사이트를 자동으로 갱신하므로, 앱을 고쳐도 학생들은 같은 링크로 최신 버전을 씁니다.

■ 접근 제한

접근 규칙이 없는 앱은 주소만 알면 누구나 들어와 다른 사람의 기록을 보고 지울 수도 있습니다. 교사의 업무 일정이나 학생의 개인적인 다짐을 담는 앱이라면 로그인한 사용자만 데이터에 접근하도록 막아야 합니다. 무료 AI API로 보낸 텍스트와 이미지는 AI 모델 학습에 쓰일 수 있으므로, 학생 얼굴 사진, 실명, 전화번호 같은 정보는 처음부터 입력받지 않도록 설계하는 것이 안전합니다.

[일정 관리 앱을 실행하면 나타나는 로그인 창]

교실의 작은 불편은 시중 앱을 찾는 대신 직접 만들 때 비로소 꼭 맞게 해결됩니다. 학급에서 매일 쓰는 앱 하나를 떠올리는 데서 바이브 코딩이 시작됩니다.

『요즘 교사를 위한 웹앱 만들기 with 바이브 코딩』은 교실의 불편을 문제로 정의하는 데서 출발해 출석 체크 앱, 글쓰기 SNS, 급식 알리미, AI 영어 학습 앱, 실시간 칭찬 보드를 만들고, 데이터베이스 연동과 로그인, GitHub와 Vercel 배포까지 하나의 웹 서비스를 완성하는 과정을 담았습니다.

각 장의 'VIBE PLUS'는 앱이 동작하는 원리를 교사 눈높이로 풀어 주며, 실습 프롬프트와 완성 소스 코드는 GitHub로 제공됩니다.

댓글