아이 등원시키고 따뜻한 아메리카노 한 잔 내려 노트북 앞에 앉았습니다. 창밖을 보니 벌써 봄 기운이 살짝 비치는 게, 딱 새로운 프로젝트 시작하기 좋은 날씨네요. (물론 현실은 쌓인 메일함부터 비워야 하지만요..ㅎㅎ)
오늘은 12년 차 개발자인 제가 요즘 테크 씬에서 가장 핫한 ‘바이브 코딩(Vibe Coding)‘에 제대로 꽂혀서, 비밀리에 시작한 개인 프로젝트 하나를 소개해보려고 합니다. 이름하여 [Project: 레트로 교실]입니다.
- 컨셉: 8비트 픽셀 아트 기반의 실시간 멀티 커뮤니티 공간
- 핵심 가치: “차렷, 경례!”가 통하는 우리만의 추억 저장소
- 스택: Vue.js + Ably + Cursor (with Gemini 2.0 & Claude 3.7)
“이게 진짜 대화로 되네?” 바이브 코딩의 첫인상
처음엔 아주 막연한 생각이었어요. “어릴 때 반장 시스템을 웹으로 옮기면 어떨까?”라는 생각 말이죠. 예전 같으면 바로 아키텍처 설계하고 데이터베이스 스키마부터 그렸겠지만, 이번엔 좀 다르게 접근해봤습니다. 요즘 유행하는 AI 도구들과 ‘수다’를 떨며 제 ‘바이브’를 전달하는 방식이죠.
저는 요즘 VS Code와 Cursor를 혼용해서 씁니다. 복잡한 로직 설계는 VS Code에서 Gemini의 도움을 받고, 전체적인 화면 구성이나 ‘바이브’가 중요한 코딩은 Cursor에게 맡기죠. 제가 “8090 레트로 감성 알지? 칠판은 좀 투박한 초록색이어야 해”라고 던지면, AI가 제 의도를 찰떡같이 알아듣고 코드를 뱉어냅니다. 12년 개발 인생에 참 묘한 현타와 설렘을 동시에 주는 순간이었죠.
이번 프로젝트의 ‘영업비밀’ 맛보기
아이디어 노출 우려가 있어 세부 로직을 다 공개할 순 없지만, 현재 요 정도로 가닥을 잡고 첫 삽을 떴습니다.
- 반장 전용 시스템: “차렷!”, “경례!” 버튼 하나로 접속한 모든 인원의 캐릭터 상태가 동기화되는 묘한 권력(?)의 맛.
- 실시간 인터랙션: 단순히 채팅만 하는 게 아니라, 내 분신 같은 8비트 캐릭터가 교실 책상 앞에 앉아 친구들과 왁자지껄 떠들수 있는 공간.
- 심리스한 초대: QR 코드 하나로 별도 가입 없이 바로 교실 입장.
확실히 예전처럼 라이브러리 버전 맞추고 환경 변수 잡느라 진 빼던 시절과는 차원이 다릅니다. 제가 “이런 느낌의 UI가 필요해”라고 던지면 AI가 슥- 하고 밑그림을 그려주는 속도… 이거 적응되면 예전으로 못 돌아갈지도 모르겠네요.
메모장: 개발자 아빠의 ‘꿀팁’ 리스트
이번 프로젝트를 시작하며 제 메모장에 적어둔 알짜 팁들을 살짝 공유합니다.
진짜 처음에 게임자체를 처음 만들다보니 스프라이트 이미지에 대한 개념도 없어서 좀 고생은했습니다…ㅎㅎ
- 스프라이트(Sprite) 이미지 생성 팁: 도트 캐릭터 만들 때 막막하시죠? AI 이미지 생성기(DALL-E 3나 Midjourney)에 “Pixel art sprite sheet, 16×16, multiple poses, white background“라고 명확히 주문하세요. 그 다음 온라인 스프라이트 시트 커터로 자르면 5분 만에 리소스 준비 끝입니다.
- Gemini vs Cursor: 로직이 꼬였을 땐 Gemini에게 “이 코드의 허점을 찾아줘”라고 묻는 게 정확하고, UI를 빠르게 찍어낼 땐 Cursor의 ‘Composer’ 기능이 깡패입니다. (이 조합, 진짜 추천해요!)
- Vue.js의 선언적 매력: AI랑 협업할 때 Vue만큼 편한 게 없습니다. “이 상태일 때 이 컴포넌트 보여줘”라고 말하면 AI가
v-if로 아주 깔끔하게 정리해주거든요.
앞으로의 기록 계획
이 프로젝트는 제 개인적인 ‘놀이터’이자, 바이브 코딩이 어디까지 가능한지 시험해보는 실험실이 될 것 같습니다. 한 번에 다 보여드리기보다, 진행 단계별로 이 블로그에 기록해두려고 해요.
- Log #1: 기획과 초기 UI 구현 (오늘의 기록)
- Log #2: 실시간 동기화와 캐릭터 감정 표현의 마법
- Log #3: 교실 안에서 즐기는 ‘추억의 미니 게임’ 하나씩 채우기
- Log #4: 모바일 최적화 및 지인들과의 비공개 테스트
아, 갑자기 생각난 건데… 아까 이거 만지작거리고 있으니 아이가 옆에서 “아빠, 이거 아빠가 만든 게임이야? 나도 반장 시켜줘!”라고 떼를 쓰네요. 조만간 이 교실에 아이를 위한 ‘동화책 읽어주는 선생님’ 기능도 몰래 넣어볼까 고민 중입니다. ㅎㅎ
여러분은 초등학생 때 교실에서 어떤 장난을 제일 좋아하셨나요? “우유 급식 때 장난치기”, “칠판에 이름 적기” 등등.. 댓글로 추억의 아이디어 주시면 제 비밀 프로젝트에 슬쩍 반영해볼지도 모릅니다. 다음 로그에서 봬요!
#바이브코딩 #VibeCoding #프로젝트로그 #레트로교실 #인디개발 #개발자일상 #육아대디 #레트로감성 #AI코딩 #GraceOfGPT #취미개발 #실시간멀티플레이 #나만의게임만들기 #CursorAI #Gemini #Vuejs #스프라이트이미지