코드잇 텐엑스 "입문자를 위한 바이브 코딩" 강의 최종 후기

Об этом предложении

본 포스팅은 10x 체험단 활동의 일환으로 강의 수강권을 제공받아 작성한 후기입니다. 기획한 화면을 실제 서비스로 완성하고 배포해본 바이브 코딩 학습 아이디어에서 실제 작동하는 서비스까지 이번 코드잇 텐엑스 3주차 과정에서는 지난 1~2주차 동안 기획하고 화면으로 구체화했던 서비스를 실제로 작동하는 웹서비스로 발전시키는 과정을 학습했다. 1주차에는 사용자의 불편함을 발견하고 이를 서비스 아이디어로 발전시키면서 MVP와 PRD를 작성했고, 2주차에는 Google Stitch를 활용해 기획한 내용을 실제 UI 화면으로 만들어보았다. 그리고 이번 3주차에서는 그 화면을 Google AI Studio로 가져와 기능을 구현하고, Firebase를 활용해 데이터를 저장하며, GitHub와 Vercel을 연결해 실제 인터넷에서 사용할 수 있는 서비스로 배포하는 과정까지 경험했다. 이전까지는 서비스 기획과 개발, 배포가 각각 별개의 과정처럼 느껴졌는데, 이번 학습을 통해 하나의 서비스가 만들어지는 전체 흐름을 직접 경험할 수 있었다. 📍 Google Stitch에서 만든 화면을 실제 서비스로 발전시키기 3주차에서 가장 먼저 배운 것은 화면이 있다고 해서 서비스가 완성되는 것은 아니라는 점 이었다. 2주차까지 Google Stitch를 활용해 ClipSort의 화면을 구성했지만, 당시에는 화면의 형태만 존재할 뿐 실제로 데이터를 저장하거나 사용자의 행동에 따라 기능이 동작하는 상태는 아니었다. 이번에는 Google Stitch에서 만든 결과물을 Google AI Studio로 옮겨 실제 기능을 추가했다. 내가 기획한 ClipSort는 유튜브, 인스타그램, 틱톡 등에서 나중에 다시 보고 싶은 콘텐츠를 저장한 뒤 원하는 콘텐츠를 쉽게 다시 찾을 수 있도록 도와주는 서비스다. 사용자가 콘텐츠 링크를 입력하면 이를 저장하고, 카테고리에 따라 콘텐츠를 확인하거나 수정·삭제할 수 있도록 기능을 구성했다. 이 과정에서 AI에게 단순히 “이 기능을 만들어줘”라고 요청하는 것이 아니라, 어떤 버튼을 눌렀을 때 어떤 동작이 발생해야 하는지 구체적으로 설명해야 원하는 결과에 가까워진다는 것을 다시 한번 느꼈다. 특히 AI가 처음 만들어준 화면이나 기능이 항상 내가 의도한 방향과 정확히 일치하지는 않았다. 따라서 결과물을 직접 확인하고, 수정이 필요한 부분을 다시 설명하면서 여러 번 다듬는 과정이 필요했다. 바이브 코딩은 AI에게 모든 것을 맡기는 것이 아니라 내가 원하는 결과를 명확히 정의 하고, AI가 만든 결과를 판단하고 수정하는 과정 이라는 점을 더 확실하게 이해하게 됐다. 📍 Firebase를 활용해 데이터 저장하기 이번 주차에서 새롭게 경험한 부분 중 하나는 데이터베이스였다. 이전에는 화면에 콘텐츠가 추가되더라도 단순히 화면 안에서만 보이는 것이라고 생각했지만, 실제 서비스에서는 사용자가 저장한 데이터를 계속 유지하기 위한 공간이 필요하다는 것을 배웠다. 이를 위해 Firebase Firestore를 ClipSort와 연결했다. 사용자가 콘텐츠를 저장하면 Firebase에 데이터가 저장되고, 카테고리를 변경하거나 콘텐츠의 상태를 수정하면 데이터베이스에 저장된 값도 함께 변경되도록 구성했다. 이 과정을 통해 프론트엔드와 백엔드, 데이터베이스가 각각 어떤 역할을 하는지 조금 더 구체적으로 이해할 수 있었다. 사용자가 직접 보는 화면이 프론트엔드 라면, 화면에서 발생한 요청을 처리하고 데이터를 주고받는 과정이 백엔드 와 연결되며, 실제 정보가 유지되는 공간이 데이터베이스 라는 흐름을 실제 프로젝트를 통해 경험할 수 있었다. 처음에는 데이터베이스라는 용어 자체가 어렵게 느껴졌지만, 내가 만든 서비스 안에서 데이터가 생성되고 변경되는 모습을 직접 확인하니 훨씬 쉽게 이해할 수 있었다. 📍 GitHub와 Vercel을 활용해 직접 배포해보기 기능을 구현한 다음에는 내가 만든 서비스를 다른 사람도 인터넷에서 사용할 수 있도록 배포하는 과정을 진행했다. Google AI Studio에서 작업한 코드를 GitHub로 내보내고, GitHub 저장소를 Vercel과 연결했다. 이 과정에서 새롭게 알게 된 점은 GitHub에 새로운 변경사항을 Push하면 Vercel이 이를 감지해 자동으로 새로운 버전을 배포할 수 있다는 것이었다. 즉, Google AI Studio에서 기능 수정 → GitHub에 Push → Vercel 자동 배포 라는 하나의 흐름을 만들 수 있었다. 처음 배포를 시도했을 때는 바로 성공하지 않았다. Vercel에서 npm install 단계에서 오류가 발생했지만 로그에는 자세한 원인이 나타나지 않아 처음에는 무엇을 수정해야 할지 막막했다. 그래서 프로젝트를 내 컴퓨터로 내려받고 Node.js를 설치한 뒤 직접 npm install 을 실행해 오류를 확인했다. 그 결과 Vite와 esbuild의 버전이 서로 맞지 않아 dependency 충돌이 발생하고 있다는 것을 확인할 수 있었다. package.json 에서 관련 버전을 수정한 후 다시 npm install 을 실행했고, 이어서 npm run build 까지 정상적으로 완료되는 것을 확인했다. 수정한 내용을 다시 GitHub에 Push하자 Vercel에서 새로운 배포가 진행됐고, 최종적으로 Status가 Ready 상태로 변경되며 배포에 성공했다. 처음에는 에러가 발생하면 단순히 “배포가 안 된다”라고만 생각했지만, 이번 경험을 통해 오류 메시지를 확인하고 문제의 위치를 좁혀가며 해결하는 과정도 개발에서 매우 중요한 부분이라는 것을 알게 됐다. 📍 이번 학습을 통해 달라진 점 처음 프로젝트를 시작했을 때는 내가 서비스 아이디어를 직접 웹사이트로 만들어 인터넷에 배포하는 것까지 가능할 것이라고 생각하지 못했다. 하지만 3주 동안 학습하면서 하나의 아이디어가 점차 서비스의 형태로 발전하는 과정을 직접 경험했다. 처음에는 사용자의 불편함 발견 → 서비스 아이디어 정도에 머물렀다면, 지금은 문제 정의 → MVP → PRD → UI 설계 → 기능 구현 → 데이터 저장 → GitHub 관리 → 서비스 배포 까지 하나의 과정으로 바라볼 수 있게 됐다. 특히 이번 프로젝트를 통해 코드를 직접 처음부터 작성하지 않더라도 AI 도구를 활용해 서비스를 만들어볼 수 있다는 점이 인상적이었다. 하지만 동시에 AI가 모든 것을 자동으로 해결해주는 것은 아니었다. 내가 원하는 기능이 무엇인지 명확하게 설명해야 했고, AI가 만들어준 결과가 제대로 동작하는지 직접 확인해야 했다. 오류가 발생했을 때는 원인을 찾아 수정하는 과정도 필요했다. 결국 바이브 코딩에서도 중요한 것은 단순히 AI에게 요청하는 것이 아니라 문제를 정의 하고, 요구사항을 구체화 하며, 결과물을 검증하는 능력 이라는 생각이 들었다. 📍 기획자로서 새롭게 느낀 점 이번 학습은 내가 관심을 가지고 있는 서비스 기획 및 AI 서비스 개발과도 많이 연결되어 있었다. 이전에는 기획자가 요구사항을 정리해 개발자에게 전달하는 역할이라고 생각했다면, 이번에는 직접 화면을 구성하고 기능을 구현해보면서 웹서비스 만들기 개발 과정에서 어떤 부분을 명확하게 정의해야 하는지 조금 더 이해할 수 있었다. 예를 들어 “카테고리를 수정할 수 있게 해주세요” 라는 요구사항과 “콘텐츠 카드의 카테고리 변경 버튼을 누르면 카테고리를 선택할 수 있고, 변경 후에는 화면과 데이터베이스에 동시에 반영되어야 한다” 라는 요구사항은 개발 과정에서 전달되는 정보의 수준이 완전히 다르다는 것을 체감했다. 앞으로 서비스 기획을 할 때도 단순히 필요한 기능을 나열하는 것이 아니라 사용자가 어떤 행동을 하고, 시스템이 어떻게 반응해야 하는지까지 구체적으로 설계하는 습관을 만들고 싶다. 📍 앞으로의 목표 이번 3주차까지의 학습을 통해 ClipSort의 기획부터 UI 제작, 기능 구현, 데이터 저장, 배포까지 한 번의 사이클을 경험했다. 앞으로는 단순히 서비스를 만들어보는 것에서 끝나는 것이 아니라 실제 사용자의 반응을 확인하고 서비스를 개선하는 과정까지 경험해보고 싶다. 특히 현재 만든 ClipSort에 로그인 기능이나 사용자별 데이터 관리, 검색 기능 등을 추가하고, 실제 사용자가 서비스를 이용하면서 어떤 기능을 많이 사용하는지 확인해보고 싶다. 이번 프로젝트를 통해 가장 크게 얻은 것은 개발 지식 자체보다도 아이디어를 실제 결과물로 만들어볼 수 있는 방법을 알게 되었다는 점이다. 앞으로도 새로운 서비스 아이디어가 생겼을 때 기획서에서 끝내지 않고, AI를 활용해 빠르게 프로토타입을 만들고 직접 테스트하면서 아이디어를 검증해보는 경험을 계속 쌓아가고 싶다.