소개
이번 스터디의 결과로 클로드 MCP 스터디로 나만의 강의 사이트 MVP를 만들겠다는 최종 목표를 세웠다. 그런데 처음부터 무작정 시작하기엔 막막했다. 어떻게 하면 좋을지 고민하던 중, 이모카님이 "에어비앤비 웹사이트 정도는 MCP로 만들기에 만만하다"는 조언을 듣고 에어비앤비 따라하기부터 시작하기로 했다.
예전 같았으면 웹사이트 하나 만들려면 HTML, CSS, 자바스크립트를 몇 달씩 공부해야 했겠지만. 이젠 그런 지식 없이도 10분 만에 웹사이트를 뚝딱 완성하는 황당한(?) 경험을 했다.
에어비앤비 클론 코딩 과정
smithery.ai에서 desktop-cimmanderd MCP와 playright MCP를 설치했다. 물론 각 사이트에서 필요한 API Key를 얻어야 MCP를 설치할 수 있다.
그 다음은 따라하고 싶은 웹사이트 주소를 알려주고 어떻게 하면 되는지 물어봤다. 클로드MCP는 어떤 기술을 선택해야 하는지, 핵심기능 구현에 필요한 페이지들은 무엇인지, 개발 접근방법까지 구체적으로 알려줬다.
먼저 웹사이트의 구조를 잡아달라고 요청하니, 만들어야 할 사이트맵도 만들어 줬다.
그리고 마지막으로 로컬 프로젝트 폴더를 알려줬다.
"프로젝트를 여기에 만들꺼야 C:\Users\HSKim\MCP_Project 네가 사이트를 만들어줘"
그랬더니 프로젝트를 다음과 같은 구조로 만들어줬디.
MCP_Project/ ├── app/ │ ├── auth/page.tsx # 로그인/회원가입 │ ├── rooms/[id]/page.tsx # 숙소 상세 │ ├── search/page.tsx # 검색 결과 │ ├── globals.css # 전역 스타일 │ ├── layout.tsx # 루트 레이아웃 │ └── page.tsx # 홈페이지 ├── components/ │ ├── Header.tsx # 헤더 │ ├── HeroSection.tsx # 히어로 섹션 │ ├── PropertyCard.tsx # 숙소 카드 │ ├── FeaturedSection.tsx # 추천 섹션 │ └── Footer.tsx # 풋터 └── 설정 파일들...
비개발자도 웹사이트를 만드는 시대
이렇게 하여 10분도 안걸려서 에어비앤비 클론 웹사이트가 만들어졌다 ㅎ~ . 숙소 목록, 검색창, 메뉴 바 등 주요 요소들이 모두 구현되었다
서브페이지 중에는 문제가 발생한 곳도 있었다. 그러나 MCP 설정상의 문제 같아 보였는데, 이런 오류도 잡아 줄 것이므로 별로 걱정되진 않았다.
이제 웹개발자가 아니어도, 클로드 MCP와 같은 AI 도구를 활용하면 누구나 자신만의 프로젝트를 시작할 수 있는 시대가 왔다는 걸 실감하는 시간이었다. 에어비앤비 클론 코딩은 단순히 웹사이트를 따라 만드는 것 이상이었다.
오프모임에서는 이재엽님이 클로드 MCP에서 클로도 코드를 연결하여 실행하는, 기가 막히는 방법도 알려줬다.
결과와 배운점
클로드 코드와 연계하니, VS Code에서 코드를 작성하는 것이 아닌, 프롬프트(바이브코딩)로 코딩을 완성한다는 것은 놀라웠다.
사이트를 만들 땐 PRD를 먼저 만들어야 하는 줄 알았는데, 꼭 그런건 아니라는 것도 알게 됐다.
다음에는 최종목표인 나만의 강의 사이트 MVP 구축에 조금 더 다가서볼 것이다. 그러려면 프론트엔드 외에도 백앤드와 DB 연결이라는 과제까지도 해결해야 한다. 비개발자인 나로써는 이것도 넘어야 할 큰 산이다. 다행히 정적 사이트 정도는 (Vercel 없이도) 로컬에서 웹 배포 가능하다는 것과, DB도 SQLlite로 해결할 수 있는 방법이 있다고 하니, 놓치지 않고 따라가 볼 생각이다.
AI에게 물어보니 웹사이트를 만들 땐 Sequential Thinking MCP를 활용해서 계획을 세우는 것이 좋다고 추천해줬다. 다음에는 이것도 활용해서 사이트를 조금씩 고도화시켜볼 생각이다.
