바이브코딩으로 완성한 웹 서비스 사례 분석

아래 이미지는 AI 바이브 코딩으로 개발하여 운영중인 사이트의 화면입니다.

사이트 주소는 https://codegear.info 입니다

CodeGear - AI 기술로 개발자의 성장을 돕습니다

 

 

이 사이트의 처음부터 끝까지 모두 바이브 코딩으로 만들었습니다.

제작 과정은 블로그와 유튜브로 모두 남겨 놓았으니 참고 하시기 바랍니다.

---

사이트 개발 목적

• AI 바이브 코딩으로 개발 가능한지 검증
• AI 개발 관련 정보 공유
• CodeGear 블로그와 유튜브 홍보
• n8n 워크플로우 자동화 기능 구현 및 실무 적용 사례

---

사이트 구조

프로젝트 아키텍처는 다음과 같습니다.

• Frontend : Next.js
• Backend : Nest.js
• Database : MySQL
• AI 자동화 Agent : n8n

프로젝트 폴더 구조는 다음과 같습니다.

로그인 인증은 구글 로그인을 사용하였습니다.

---

사이트 구조

• 메인 홈
  • 코드 기어 블로그 추천글(codegear.tistory.com) - 3개
  • AI 개발 관련 추천글(기사, 블로그등) - 3개
  • 코드 기어 유튜브 추천 영상(코드기어채널) - 3개
• 소개
• AI 개발 관련 추천글 - 전체
• 코드기어 유튜브 링크
• 코드기어 티스토리 링크

관리자 기능

• 코드기어 블로그 추천글 관리
• AI 개발 관련 추천글 관리
• 사용자 관리
• 코드기어 유튜브 추천 영상 관리

---

n8n 추천글 자동 요약 워크플로우

• 이 기능은 관리자 "AI 개발 관련 추천글 관리" 메뉴에서 사용을 합니다.
• 원본 링크를 넣고 "AI 요약" 버튼을 누르면 나머지 필드들이 모두 자동으로 채워집니다.
• 관리자는 내용을 확인하고 저장 버튼만 누르면 됩니다.

n8n 워크플로우

• 셀프호스팅으로 설치된 n8n Agent 서버를 사용합니다.
• 클로드 코드에 n8n MCP를 설치 후 해당 워크플로우를 만들어 달라고 요청하였습니다.
• 만들어진 워크플로우는 다음과 같습니다.

 

---

클로드 코드와 n8n을 이용해서 바이브코딩으로 만든 사이트 리뷰를 해보았습니다.

사이트를 어떻게 만들지에 대한 계획을 잘 세우고,

AI 도구들을 적재 적소에 활용할 줄 알고,

그것들을 잘 컨트롤 할 수만 있다면,

충분히 상업적인 사이트 개발이 가능하다는게 제 생각입니다.

 

앞으로 계속 유용한 사이트로 발전 시켜 나갈 계획이므로,

지켜봐주시고 응원 부탁드립니다.