하고 있는 게임 중에 MHNow 라는 게임이 있고 컨텐츠 중에 하나가 무기별로 빌드를 짜는 컨텐츠가 있음

보통 국내 커뮤니티 사이트에서 보거나 mhn.quest에서 빌드를 짜고 저장을해두는 편인데 이걸 매번 스샷찍고 정리하고 하는게 귀찮은 상황 + 바이브 코딩에 대해서 여기저기 듣기는 했었는데 궁금해서 한번 시도를 해봄

처음에 원했던 기능은 mhn.quest 에서 특정 빌드에 대한 링크를 제공을 해줘서 해당 링크를 넣으면 스크린샷과 함께 간단하게 검색 혹은 모아서 볼 수 있는 페이지를 만들고자 함 물론 아는사람들과 공유하기 위한 목적도 있었음

처음에는 제미나이 한테 질문

이왕 하는김에 안써본 버셀을 써보자고해서 물어보니 답을 받고 기술스택하고 구현방식에 대해서 알려줬는데

잘 모르겠다고 다시 처음부터 하나 하나 천천히 알려달라고 물어보니 상세하게 가이드를 주기 시작

 - 우선 처음에 시도한 방식은 Next.js 프로젝트 생성 어느정도 구현 한 후에 github에 코드를 푸시하게 되면 연결된 vercel쪽으로 자동으로 deploy가 되면서 웹페이지를 띄워주는 구조로 생성 이후 업데이트를 까지 확인 다만 구현된 방식이 Local Storage 방식이었기 때문에 같이 하는 사람들과 공유가 불가능 한 상태여서 Vercel 에서 제공해 주는 Storage(redis)와 연결해서 사용하는 것으로 전환 해서 최초 구성을 완료.

다만 크롬을띄워서 빌드 스크린샷을 찍어야 하는 과정이 있었기 때문에 vercel 무료로 제공받는 툴에서는 메모리 부족으로 실패하는 케이스가 계속 발생 다른 공간에 구성하는걸로 변경을 진행

- Oracle Cloud에 구성되 있는 무료 VM + Docker 환경으로 전환 해서 구성하였으나 CPU 문제인건지 크롬 실행이 정상적으로 되지 않아서 포기

- 다음으로 집에 구성해둔 Proxmox 서버 내 올려둔 Docker VM으로 다시 전환해서 최종적으로 하기와 같은 구성으로 띄워놓은 상태

- 현재는 외부에서 접근은 NPM Proxy 통해서 https 통해서 들어올 수 있도록 구성해둠

- 시간은 토~일 해서 이틀정도 소요

- 사용 툴은 너무많이 물어봐서 토큰이 떨어져서 바꾸면서 진행 했는데 개인적으로는 CursorAI가 유용했던 느낌
  Gemini + VS Code -> CursorAI -> 다음날 VS Code + Gemini Code Assist(GeminiCLI)

복잡한 시스템 구현은 아무래도 힘들겠지만 개인적인 프로젝트나 필요에 의해서 구현하는 웹사이트는 혼자서 구현이 가능할 정도는 되는것 같음. 물어보면 자꾸 딴소리해서 고런 건아직 좀문제가 있으려나 라는 생각도 드는데  프롬프트를 얼마나 세세하게 그리고 명확하게 얘기를 해주는거에 따라 답변의 질이 차이가 많이 난다는 것도 좀 느끼게 된 계기

기능 : 빌드 링크 추가, 빌드명 검색, 몬스터, 무기별 필터링, 추가, 삭제, 빌드명 입력, 설명입력, 카드 생성한 날짜