바이브코딩을 공부하며 만든 실시간 퀴즈 플랫폼 안전몽, 그리고 탈락 회고

전역 후 복학을 준비하던 시기, 개발 커뮤니티에서 가장 뜨거웠던 키워드는 단연 ‘바이브코딩(Vibe Coding)‘이었습니다.

LLM과 자연어로 티키타카를 주고받으며 코드를 빌드업하는 이 새로운 흐름을 보면서, 눈으로만 구경할 게 아니라 직접 공부하고 내 손으로 써봐야겠다는 생각이 들었습니다. AI 도구를 실제 개발 워크플로우에 어떻게 녹여내야 하는지, 장점과 한계는 어디에 있는지 제대로 체감해보고 싶었습니다.

단순한 예제나 튜토리얼을 따라 치는 식으로는 바이브코딩의 진가를 공부하기 어렵다고 판단했습니다. “실제 동작하는 프로덕트를 하나 처음부터 끝까지 만들어보며 부딪쳐보자.”

그렇게 바이브코딩을 본격적으로 공부하고 실전에 써보기 위한 시험대로 선택한 것이 2026 KIT 바이브코딩 공모전이었습니다. 500여 팀이 지원할 정도로 관심이 뜨거웠던 대회였고, 팀원 없이 혼자 개인으로 참가해 프로덕트를 만들어보기로 했습니다.

기획: 연구실 안전교육을 실시간 퀴즈로 바꿔보자

공모전의 대주제는 ‘AI 활용 차세대 교육 솔루션’이었습니다. 운영 측의 안내에도 눈에 띄는 문구가 있었습니다:

“단순한 온라인 교육 플랫폼(LMS) 구축에 국한되지 않습니다. 교강사, 수강생 등 교육 현장 구성원들의 실질적인 문제를 날카롭게 해결하는 AI 솔루션을 지향합니다.”

AI를 공부하며 적용하는 김에, 뻔한 챗봇 래퍼(Wrapper)보다는 실제 교육 현장에서 구성원들이 겪는 피로감을 날카롭게 해결하는 서비스를 기획해보고 싶었습니다. 그렇게 눈에 들어온 것이 매년 형식적으로 반복되는 연구실 안전교육이었습니다.

안전몽 랜딩 화면

대학 실험실의 안전교육은 지루한 영상을 틀어두고 음소거를 해두거나, 답이 정해진 문항을 대충 찍고 넘기는 경우가 많습니다. 교강사는 학생들이 어떤 안전수칙을 잘못 알고 있는지 파악하기 어렵고, 학생들은 교육이 끝나면 기억에 남는 것이 없습니다.

이 문제를 실시간 동시 참여형 퀴즈와 세션 종료 후 AI 오개념 진단 리포트로 해결해보기로 했습니다. 프로젝트 이름은 안전몽(Safety-Mong)으로 정했습니다.

원클릭 맞춤형 퀴즈 생성: 교강사가 실습 주제나 취급 화학물질 키워드를 넣으면, Gemini 2.0 Flash가 실험 맥락에 맞춘 문항과 그럴듯한 오답 선택지를 즉시 생성
QR 즉시 입장 & 실시간 동시 퀴즈: 별도 앱 설치나 회원가입 없이 모바일 QR 코드로 접속해 다 함께 타이머에 맞춰 문제를 푸는 실시간 세션
AI 오개념 진단 리포트: 퀴즈가 끝나면 단순 점수 집계가 아니라, 학생들이 왜 특정 오답에 쏠렸는지(공통 착각과 위험 요인)를 분석해 교강사에게 사후 지도 가이드를 제공

기획을 정리하고, 바이브코딩 방식을 활용해 본격적인 구현에 들어갔습니다.

바이브코딩을 직접 써보며 마주한 현실

처음에는 AI 도구를 활용한 개발 속도에 크게 놀랐습니다. Next.js 15 환경을 세팅하고, Drizzle ORM으로 SQLite 스키마를 구성하고, Tailwind CSS로 기본 화면을 잡아나가는 과정은 확실히 빨랐습니다. 구현하고 싶은 기능의 맥락을 설명하면 뼈대 코드를 금방 뽑아주었습니다.

하지만 프로젝트가 단순 CRUD를 넘어 실시간 양방향 통신(Socket.IO)과 엄격한 세션 동기화 영역으로 들어가자, 바이브코딩을 어떤 방식으로 다뤄야 하는지에 대한 고민이 시작되었습니다.

실시간 퀴즈 진행 화면

1. 클라이언트 타이머는 믿을 수 없다: 서버 권위 타이머

단순한 개인 프로젝트라면 브라우저의 setInterval로 타이머를 굴려도 큰 문제가 없었을 겁니다. 하지만 실시간 퀴즈에서는 1초 차이로 순위가 갈립니다. 참가자가 탭을 내리거나 모바일 화면이 잠시 꺼지는 순간 클라이언트 시간은 틀어지기 마련입니다.

AI에게 타이머 작성을 부탁하자 처음에는 브라우저 시간 기반의 단순한 카운트다운 코드를 제안했습니다. 치팅이나 네트워크 핑 차이에 취약한 구조였습니다. 결국 AI에게 무작정 맡기기보다, 구조를 직접 고민하여 서버 권위 타이머(Server Authority Timer) 방식을 설계하고 AI와 함께 살을 붙여나갔습니다.

// 서버 프로세스 내부의 틱을 단일 진실 공급원(Single Source of Truth)으로 삼고,
// 네트워크 지연을 감안해 500ms 유예 시간을 두고 클라이언트 답안을 수신·검증

서버가 기준 시간을 관리하고 틱마다 남은 시간 이벤트만 브로드캐스트하며, 참가자의 답안 제출 역시 서버 타임스탬프 기준으로 판정하도록 구현했습니다.

2. 세션 상태머신: 흐름을 놓치면 방 전체가 굳는다

안전몽의 세션 흐름은 꽤 촘촘했습니다:

waiting → active → intermission → active → ... → completed → analysis → closed

대기실에서 퀴즈 시작, 정답 공개, 다음 문제 전환, 최종 AI 분석까지 모든 참가자가 어긋남 없이 동일한 상태를 공유해야 했습니다.

AI가 초기에 작성해 준 코드는 참가자가 도중에 새로고침을 하거나 재접속할 때마다 예외가 터지며 방 전체가 멈추는 현상이 생겼습니다. 단순히 “이 에러 고쳐줘”라고 프롬프트를 날리는 식으로는 해결되지 않았습니다.

여기서 “바이브코딩을 하더라도 시스템 설계와 상태 모델링은 사람이 쥐고 있어야 한다”는 점을 절감했습니다. 종이에 직접 세션 전이 규칙을 정리하고 Zod 스키마로 엄격한 유니온 타입을 정의한 뒤, 그 틀 안에서 AI에게 세부 핸들러 작성을 요청하자 코드가 안정적으로 맞물리기 시작했습니다.

3. 메모리 누수와 배포 안정화

브라우저 탭을 여러 개 띄워 동시 접속 테스트를 진행하다가 서버가 예기치 않게 뻗는 현상을 만났습니다.

소켓 연결이 끊겼을 때 인메모리 Map에서 참가자 인스턴스를 제때 지우지 않던 문제
무차별 로그인 방지용 Map에 만료 엔트리 정리 로직 누락
빠른 타이머 갱신으로 인한 불필요한 전체 컴포넌트 리렌더링

AI와 함께 코드베이스를 짚어가며 메모리 누수 지점을 정리하고, 고빈도 갱신 컴포넌트에 React.memo를 적용했습니다. Docker Compose로 배포 환경까지 패키징을 마치며 실동작하는 서비스를 완성했습니다.

교강사 종료 리포트 화면

결과, 그리고 남은 것들

심사 결과 발표 날, 500여 팀 중 수상 명단에 제 이름은 없었습니다. 탈락이었습니다.

소켓 동기화부터 AI 분석 파이프라인, 도커 배포까지 직접 부딪쳐가며 완성했기에 결과에 대한 아쉬움은 남았지만 결코 헛된 시간은 아니었습니다. 공모전의 결과를 떠나, 안전몽 프로젝트는 저에게 바이브코딩을 가장 깊이 있게 체득할 수 있었던 최고의 실전 공부였습니다.

바이브코딩을 제대로 쓰는 법을 배웠습니다.
AI에게 자연어로 코드를 맡긴다고 해서 개발자의 역할이 줄어드는 것이 아니었습니다. 오히려 데이터 모델링, 상태 전이의 경계, 시스템 아키텍처를 사람이 명확하게 정의해 줄 때 비로소 AI가 폭발적인 생산성을 발휘한다는 것을 배웠습니다.
실전 개발 감각을 확실하게 되찾았습니다.
공부 삼아 시작했던 프로젝트였지만, 기획부터 소켓 서버, AI 파이프라인, 배포까지 전 과정을 혼자 힘으로 밀어붙이며 개발에 대한 막연한 불안감을 털어낼 수 있었습니다.

이때의 고민과 경험은 이후 저만의 개발 워크플로우를 정립하는 든든한 밑거름이 되었습니다. 나에게 맞는 CLI 환경과 에이전트 하네스(Pi)를 구성하고, 실제 학생들이 사용하는 호서 LMS Plus를 만들고, 홈랩 환경을 구축해 나가는 모든 과정의 출발점에는 바이브코딩을 부딪치며 공부했던 안전몽의 경험이 자리 잡고 있습니다.

공모전 도전은 탈락으로 끝났지만, 새로운 개발 방식을 직접 써보고 체득한 배움만큼은 확실하게 남았습니다.