Claude MCP로 웹사이트 만들기

오늘 처음으로 Claude MCP를 활용해 웹사이트 만들기 연습을 시작했습니다.

아직 개념은 잘 모르지만, Node.js와 Python을 설치하고,

mcp도 세팅 완료! - Desktop Commander, playwright-stealth, sequential-thinking

에어비앤비 스타일의 웹사이트 만들기!

>> 진행 순서

https://www.airbnb.co.kr 를 참고해서 에어비앤비 느낌의 웹사이트를 만들고 싶어요.
인덱스 페이지는 Vanilla JS로 제작 예정입니다.
👉 기획을 먼저 해주세요.
웹사이트 구조 기획 & 프로젝트 폴더 생성
작업 순서 정리하기
어떤 흐름으로 진행할지 로드맵 필요
plan.md 파일 작성
모든 작업은 이 파일 기반으로 진행하며, 먼저 이 계획부터 점검하기
디자인 시스템도 구축해 주세요
(컬러, 폰트, 간격 등)
지금까지 진행한 과정을 정리해서 work-log.md 문서로 남기기

3번까지 진행한 후, 웹사이트 기본 틀이 ‘뚝딱’ 나왔습니다. 그러나 오류 발생!

캡처해서 Claude에게 보여줬더니, 직접 점검하고 혼자 열심히 수정하네요.

수정하고 나더니, 이번엔 알아서 스크린샷을 찍어 스스로 점검하기에 기특했습니다.

문제해결까지 리포트해줍니다.

하지만 여전히 오류가 나고 있습니다. 😭

이 간단한 테스트도 잘 되지 않으니 얼마나 더 수정해야 하나.. 싶었는데

다음 강의 자료에서 이런 문구에 마음에 위로가 됩니다.

"클로드의 설레발에 절대 설레지 마라. 본 게임은 지금부터다!!"

😂😂

지난 번 커서를 배우면서도 느꼈지만, 비개발자로서 바이브코딩을 공부하면서 느끼는 한계는 오류를 판단하기 어려워 수정도 어렵다는 것입니다.

그래도.

다음 실습은 복습하면서 내가 기획한 웹사이트를 직접 만들어보겠습니다.

Claude MCP로 웹사이트 만들기 – 첫 도전기