풀스택 Vibe 코딩으로 웹앱 배포 경험을 목표로 온라인 쇼핑몰/쇼룸 개발 (1/?)

### 소개

풀스택 Vibe 코딩으로 빠르고 쉬운 웹앱 배포 경험을 목표로 온라인 쇼핑몰/쇼룸 개발

### 진행 방법

🔹 목표: 온라인 쇼핑몰/쇼룸 형태로 배포 , 로그인 후 제품 목록 확인, 클릭 시 상세 페이지

최초 작업 요약

• GPTS를 사용하여 PRD 작성.

• Cursor 환경에서 Next.js 프로젝트 세팅 및 Vercel 서버리스 API 활용하여 별도 백엔드 없이 구현.

• todo.md 기반 체크리스트 방식으로 작업 진행.

• Cursor와 Claude 3.7 Sonnet을 활용해 JavaScript 언어 지식 없이 Vibe 코딩 수행.

• Clerk를 사용한 google 인증 설정 및 Vercel에 배포.

최초 결과

https://virtual-showroom-gpjp0y2r2-heartfish00s-projects.vercel.app

ALT

웹 브라우저에서 의류 상점 이미지

ALT

Google 로그인 페이지의 스크린 샷

재작업 이유 및 과정

• 처음에 Cursor만으로 UI를 작업했으나 UI 퀄리티가 매우 낮아 추후 v0(shadcn/ui, TailwindCSS, Next.js)로 작성한 UI로 대체 시도.

• 코드가 길어져 커서로 기존 UI 기반으로의 전환에 실패하고 커밋 안 해둬서 전체 삭제.

• 다시 V0 UI 기반으로 todo 리스트와 기능 명세를 처음부터 재정의하고 다시 개발하여 구현함.

• 마지막에 하이드레이션 이슈가 발생했으나 클라이언트 렌더링으로 일부 전환하여 해결됨.

재작업 결과

ALT

다양한 항목을 보여주는 웹 페이지의 스크린 샷

ALT

제품 페이지를 보여주는 웹 페이지의 스크린 샷

### 결과와 배운 점

- 풀스택 레이아웃 배포 경험 통해 Vibe 코딩 경험 (PRD / Todo / UI 연결 / 웹개발언어 등)