전편에서 ‘바이브 코딩’이 뭔지 감을 잡았다면, 이번 편은 “그걸로 뭘 만들까?”를 실제로 굴려본 기록이다. 요즘은 복잡한 룰을 익혀야 하는 대작보다, 가볍게 들어와 금방 즐기고 친구랑 내기할 수 있는 사이트가 꾸준히 유입을 만든다고 본다. 그래서 방향을 웹게임 모음집으로 정했다.
왜 하필 웹게임일까? 간단하다. 링크 하나만 던지면 바로 들어와 플레이할 수 있다. 접근성이 좋으니 피드백 속도가 빠르고, 콘텐츠 관점에서도 짧은 체류 + 반복 방문 구조를 만들기 쉽다.
나는 목표를 이렇게 잡았다: 메뉴 → 게임 선택 → 플레이 → 결과 확인까지 1분 내외. 이 흐름을 만족하는 게임들로만 묶어보려 한다.
원칙은 하나 더 있다. 모든 과정은 ChatGPT를 통해 진행한다. 나는 아직 코드 한 줄도 쓰지 않는다. 지피티가 제안한 절차를 따라 하고, 결과를 확인하며 다음 스텝으로 넘어간다.
첫 게임은 반응속도 테스트로 결정. 클릭 한 번에 결과가 바로 보이도록 요구 조건을 정리해 전달했고 금방 뚝딱 만들어 줬다. 나는 코드한줄 적지않고, 사용환경 세팅도 안하는것 목표로 하기에, 피드백도 없었다.
그냥 올려보는거다 나는 일부러 비전공자/비실무자 관점으로 이 프로젝트를 본다. “무슨 말인지 모르겠다”는 마음으로 진행하면, 결국 남는 건 따라 하기 쉬운 절차뿐이다.
실제로 내가 한 일은 단순했다. Github와 Vercel을 회원가입을한다. 지피티가 건넨 파일을 GitHub에 올리고, Vercel에 연동한 것. 그러면 배포가 돌아가고, 링크가 생기고, 바로 공유가 가능해진다.업로드 과정에서 오류가 생기면 지피티한테 물어본다.
처음 업로드해보니 확실히 심심했다. 그래서 메인 메뉴를 요청했고, 바로 에임 테스트도 추가했다. 테스트 중간에 “에임이 화면 밖으로 튕겨나가는” 문제가 있었는데, 다시 물어보니 충돌/경계 처리를 손봐서 금세 해결. 두 게임이 메뉴 아래로 정리되고, 재시작 동선까지 붙으니 비로소 “모음집”의 느낌이 났다.
지피티가 남겨준 기술 메모는 이랬다(요지만 적어둔다).
Next.js로 뼈대를 잡고 각 게임은 독립 페이지처럼 구성
상태는 게임 내부에 가둬 리렌더 비용 최소화
공통 UI(헤더/푸터/메뉴)는 레이아웃로 묶어 재사용성 확보
초기엔 무거운 라이브러리 미루고 첫 접속 경험(TTI/입력 지연) 우선
페이지 타이틀/설명은 게임명 중심으로 통일해 추후 SEO 대비
정리하면, 이번 편에서 내가 얻은 건 두 가지다. 아이디어를 바로 손에 잡히는 결과물로 바꾸는 루프를 경험했다. 코드를 거의 쓰지 않고도 실행 가능한 프로토타입을 만든 방법을 익혔다.
물론 여기서 멈추진 않았다. 나는 이미 DB(리더보드) 연동과 검색/광고(SEO·애드) 세팅까지 손을 대기 시작했지만, 그 부분은 흐름상 다음 포스팅으로 넘긴다. 앞으로도 게임을 계속 추가해 나갈 예정입니다.
이번 편의 질문은 하나. “비전공자도 바이브 코딩으로 시작할 수 있나?” 결론은 간단하다. 된다.
'바이브코딩' 카테고리의 다른 글
| 바이브코딩(Vibe Coding)이 뭐야? (6) | 2025.08.20 |
|---|