VC 심사역의 바이브 코딩 개발기 -3.3-

진짜 서비스가 되는 순간

안녕하세요, 스타트업에 투자하는 VC 심사역 그믐입니다. 지난 글에서 VS Code와 Copilot으로 기능들을 구현한 이야기를 공유했습니다. 오늘은 제 WOW 레이드 대시보드가 localhost를 벗어나 진짜 인터넷 서비스가 되는 과정을 들려드리겠습니다.

배포의 꿈: localhost를 벗어나고 싶다

프로젝트가 어느 정도 완성되자 친구들에게 자랑하고 싶어졌습니다. 특히 같이 WOW를 하는 길드원들에게 "내가 우리 길드를 위한 공격대 대시보드를 만들었어!"라고 자랑하고 싶었죠.

이 소스 코드가 깃헙에 올라가 있는 것까진 알았지만 무슨 URL을 줘야지 사람들이 제가 만든 결과물을 보게할 수 있을 지 몰랐죠.(적어도 http://localhost:8000/ 은 아닐테니까요.) 그나마 아는 건 배포라는 것을 해야한다는 것이었습니다.

그제야 깨달았습니다. 내 컴퓨터를 벗어나 진짜 인터넷에 올려야 한다는 것을. 하지만 어떻게? 서버를 사야 하나? 도메인은 어디서 구매하지? 막막했습니다.

Vercel 첫 도전: 생각보다 쉬웠던 배포

"이거 배포하고 싶은데 나 어떻게 해야해?"

Copilot에게 물어보니 Copilot은 Vercel아러눈 서비스를 추천해주었습니다. Vercel에 대해서 Copilot은 "GitHub과 연동이 쉽고, Next.js 프로젝트는 Vercel이 만든 회사라 최적화가 잘 되어 있습니다. 무엇보다 무료로 시작할 수 있어요."라고 하더군요.

Vercel 사이트에 들어가니 "Import Git Repository"라는 큰 버튼이 보였습니다. GitHub 계정을 연결하고, 제 프로젝트를 선택했습니다. 몇 가지 설정 화면이 나왔는데, Copilot이 "그냥 다 기본값으로 두고 Deploy 누르세요"라고 해서 그대로 했습니다.

로딩 화면이 돌아가더니 몇 분 후 "Congratulations! Your project has been successfully deployed!"라는 메시지와 함께 raid-roster-nexus.vercel.app이라는 URL이 생성됐습니다.

"이렇게 쉽다고? 이게 진짜 끝이야?"

믿기지 않아서 URL을 클릭해봤더니, 정말로 제가 만든 대시보드가 인터넷에 떠 있었습니다. 복잡한 서버 설정이나 도메인 구매 같은 것을 상상했는데, 클릭 몇 번으로 끝났다니, 너무 신기했습니다.

Git 브랜치의 덫: master인가 main인가

설레는 마음으로 배포된 사이트를 이리저리 둘러봤는데, 뭔가 이상했습니다. 분명 해두었던 한글화 작업이나 아이콘들이 보이지 않더군요.

"왜 옛날 버전이 올라가 있지? 내가 뭘 잘못했나?"

Vercel 대시보드를 살펴보니 "Production Branch: main"이라고 되어 있었습니다. 그런데 제 VS Code를 보니 하단에 "master"라고 표시되어 있었죠.

"master랑 main이 뭐가 달라?"

Copilot에게 물어보니, 제가 Git을 제대로 이해하지 못한 채 두 개의 브랜치를 만들어버린 게 문제였습니다. 처음에는 master 브랜치에서 작업하다가, 어느 순간 main 브랜치로 옮겨갔다가, 다시 master로 돌아오는 등 뒤죽박죽이었죠.

"그래서 어떻게 해야 해?" "master 브랜치의 내용을 main으로 병합하세요."

병합(merge)이라는 개념도 처음 들어봤지만, Copilot이 명령어를 하나하나 알려줬습니다:

git checkout main git merge master git push origin main

명령어를 실행하고 나니, Vercel 대시보드에 "Building..."이라는 메시지가 나타났습니다. 그리고 몇 분 후, 자동으로 새 버전이 배포됐습니다.

"와, 코드를 GitHub에 올리기만 하면 자동으로 배포가 되는구나!"

진짜 개발자들은 똑똑한 사람들 같았습니다. 이렇게 편하게 그 다음단계로 넘어갈 수 있다니.

새로고침의 충격: 데이터가 사라지다

배포 성공의 기쁨을 만끽하며 친구들에게 링크를 뿌렸습니다. "이제 진짜로 작동해! 레이드 계획 만들어봐!"

테스트 삼아 "다음주 화요일 언더마인 해방전선 영웅" 이라는 레이드 계획을 만들고, 제 캐릭터를 탱커로 등록했습니다. 친구도 접속해서 힐러로 참가 신청을 했죠.

그런데 잠시 후 다시 접속해보니...

"어? 내가 방금 만든 레이드 계획이 없네? 참가자 목록도 비어있고?"

브라우저를 새로고침할 때마다 모든 데이터가 리셋되는 걸 발견했습니다. 심지어 친구가 본 화면과 제가 본 화면이 달랐죠. 각자의 브라우저에서만 데이터가 존재했던 겁니다.

이때서야 깨달았습니다. 그동안 만든 건 브라우저 메모리에만 존재하는 임시 데이터였던 거죠. 마치 메모장에 글을 쓰고 저장하지 않은 것과 같았습니다.

Supabase 입문: DB라는 신세계

"이 데이터를 영구적으로 저장하려면 어떻게 해야 해?"

Copilot의 대답은 명확했습니다. "데이터베이스가 필요합니다."

데이터베이스라... 들어는 봤지만 막연히 어렵게만 느껴졌습니다. Copilot은 “네 서비스에 이미 Lovable이 supabase 사용할거라고 해놨던데?” 라고 하더니 Supabase를 통해서 DB를 연결하면 된다고 했습니다.

Supabase 홈페이지에 들어가보니 "The Open Source Firebase Alternative"라는 문구가 크게 보였습니다. 뭔지는 모르겠지만 오픈소스라니 왠지 개발자다운 선택 같아서 마음에 들었습니다.

가입하고 새 프로젝트를 만들었더니 Table Editor라는 화면이 나타났습니다. 엑셀과 비슷해 보여서 안심했지만, 막상 사용하려니 막막했습니다.

"컬럼명은 뭘로 하지? Data type은 뭘 선택해야 하나? text, varchar, integer, uuid... 이게 다 뭐야?"

다시 Copilot의 도움을 받았습니다. "그냥 우리 프로젝트에 필요한 테이블 구조 만들어줘."

Copilot이 SQL이라는 코드를 만들어줬습니다. raid_plans 테이블과 participants 테이블, 각각의 컬럼과 관계까지. 무슨 뜻인지는 정확히 몰랐지만, SQL Editor에 복사해서 붙여넣고 Run을 누르니 테이블이 생성됐습니다.

가장 어려웠던 건 환경변수 설정이었습니다. Supabase에서 제공하는 Project URL과 anon key라는 긴 문자열을 복사해서, 프로젝트에 .env.local이라는 파일을 만들어 넣어야 했습니다.

"이거 GitHub에 올려도 돼?" "절대 안 됩니다! .gitignore에 추가하세요!"

Copilot의 단호한 대답에 겁이 났습니다. 나중에 찾아보니, 이 키가 노출되면 누구나 내 데이터베이스에 접근할 수 있게 된다고 하더군요.

연결 그리고 완성: 모든 것이 하나로

Supabase 연결을 위해 이미 Lovable에서 많은 걸 해두었는지, Copilot이 몇 가지 코드를 수정하고, Supabase의 설정을 몇개 건드렸더니 금방 다음 단계로 넘어갔습니다.

"됐다! 새로고침해도 데이터가 남아있어!"

레이드 계획을 만들고, 브라우저를 완전히 종료했다가 다시 켜도 그대로였습니다. 더 놀라운 건, PC에서 만든 데이터를 스마트폰에서도 볼 수 있다는 것이었죠.

친구에게 다시 링크를 보냈습니다. "이번엔 진짜야! 네가 추가한 캐릭터를 내 화면에서도 볼 수 있어!"

실시간으로 친구가 참가 신청을 하면 제 화면에도 바로 나타났습니다. 비록 새로고침을 해야 보이긴 했지만, 그래도 같은 데이터를 공유한다는 게 너무 신기했습니다.

Vercel에 다시 배포할 때는 환경변수를 Vercel에도 추가해야 했습니다. Project Settings에서 Environment Variables를 찾아 Supabase 키들을 입력했죠. 이 과정도 Copilot이 설명해줘서 어렵지 않았습니다.

깨달음: AI 시대에도 기본기는 필요하다

드디어 완성된 서비스를 보며 뿌듯함과 동시에 아쉬움도 느꼈습니다. Copilot이 시키는 대로 따라 하긴 했지만, 정확히 뭘 한 건지 모르는 부분이 많았거든요.

이번 경험을 통해 꼭 이해해야겠다고 생각한 개념들:

데이터베이스: 왜 필요한지는 알겠는데, SQL이 뭔지, 테이블 관계는 어떻게 설계하는지

환경변수: 왜 분리해야 하는지, .env 파일은 어떻게 작동하는지

배포 프로세스: 내 코드가 어떻게 Vercel 서버로 가서 실행되는지

Git: 브랜치, 머지, 커밋 같은 기본 개념들

하지만 두렵지 않았습니다. 일단 작동하는 서비스를 만들어봤으니, 이제 천천히 배워가면 되겠죠. 무엇보다 휘동님 없이도 혼자서 문제를 해결하고 다음 단계로 나아갈 수 있다는 자신감이 생겼습니다.

가장 큰 성취는 역시 내가 만든 것이 진짜 인터넷 서비스가 되었다는 것. 누구나 접속할 수 있는 URL을 가진, 데이터가 저장되는 진짜 웹 애플리케이션 말이죠.

"deployment", "migration", "rollback" 같은 용어들을 보며 아직 배울 게 많다는 걸 느꼈지만, 이미 첫발을 뗐으니 나머지도 할 수 있을 거라 믿습니다.

다음 개발기에서는 이 여정을 마무리하며, 비개발자가 AI와 함께 코딩하며 느낀 종합적인 생각들을 공유하겠습니다.

#바이브코딩 #VC심사역 #Supabase #Vercel #배포