소개
노후 생활을 위한 웹사이트를 바이브코딩으로 제작해보겠습니다!
지난 기수 동안 커서, 클로드코드로 바이브 코딩을 배우면서 시행착오 했던 내용을 바탕으로 이번에는 정제된 계획으로 완성된 웹사이트를 제작해보는 목표거든요.
제가 이 프로젝트에 루비 온 레일즈(Ruby on Rails)를 선택한 이유는 백엔드와 프론트엔드를 함께 개발할 수 있다는 것 때문이죠. 😊
진행 방법
🧩 1. 설치부터 난관… Windows 환경의 고충
저는 윈도우 사용자라 루비 레일즈 설치에 고난이 있었고 재설치도 몇번 했기 때문에 다시 설치 확인부터 했습니다.
한국어 텍스트가 있는 검은 화면
버전 호환 오류도 두 번 본 것 같은데, 또 나오네요.
몇 가지 방법을 제안 받았는데, 뭐가 나은 선택인지 잘 모르겠더라구요.
그래서 5~7년간 안정적으로 웹사이트를 운영하기 위한 방법으로 추천 받아 버전 재설치를 진행합니다. 왜 5~7년이냐? 우리 스터디가 7년 가는 풀스텍 개발이라서요~
Rails 한국어 버전의 스크린샷
한국어 Python 스크립트의 스크린샷
🗂️ 2. 개발 전 기획 정리 → AI로 문서 자동화
이번에 웹사이트에 만들고자 하는 기능은 3가지인데 '취미생활 공유', '경제생활 등의 정보 공유나 토론', '노후생활비 계산기' 입니다. 기존에 시행착오했던 내용들을 바탕으로 상세하게 원하는 내용을 md 파일로 사전 제작해두었습니다. 이 내용 정리는 챗 GPT를 사용했어요. (preplan 폴더로)
이 preplan을 참고해서 작업하도록 하고, 이모카님이 공유해주신 Claude.md 파일을 참고해서 작업파일들을 생성했습니다.
시행착오를 줄이고 완성도 높은 개발을 하고 싶었고, 스터디도 할겸, 사전 기획도 신경써서 하고 단계별로 작업을 보여주면서 진행해주도록 요청했어요.
진행 도중에 모르는 개념(환경변수, 코드품질)은 다시 물어봤더니 작업 순서 변경을 추천했습니다.
🧪 3. 우선 구현: 노후생활비 계산기부터?
그런데 다시 추천 받은 작업 순서는 계산기부터 만들어보라고 하네요. 재밌을거라면서..
<제작된 페이지>
✅ 결과와 시행착오
계산기는 기대에 미치지 못하는군요ㅠ
계산 항목이나 비용 등 유저에게 설득력 있기를 바랬기 때문에 꽤 정교한 항목과 금액으로 설계했었는데 다 반영하지 못하고 있는 느낌입니다. 그래서 다시 PRD 파일을 살펴보니, 사전 기획 문서에 비해 간소화 된 것 같습니다.
스터디 때 PRD 문서는 200줄 내외가 좋다고 하셔서 간소화하고 자세한 내용은 plan 파일을 참고하도록 했었는데, 그래도 prd 문서는 600줄 정도더라구요. 중요한 기능들을 날려버릴 수도 있을 것 같아서 더 간소화를 해보지 못했습니다.
작업 문서들을 수정해야 할 것 같은데 좋은 방법이 무엇인지, 기능별로 설계 파일을 나누는 것은 어떤지도 궁금합니다.
지금보다 더 뭣도 모르고 바이브 코딩 해보던 때는 채팅으로 필요한 기능을 대화하면서 만들었었는데, 사전 기획을 정리하고 시작한 지금보다 결과물이 더 좋았던 것 같기도 해요.
🚀 앞으로 더 진행해보겠습니다.
