소개
시도하고자 했던 것과 그 이유를 알려주세요.
처음 Claude Desktop을 설치하고 자연어로 웹사이트를 만들 수 있다는 말을 들었을 때, 반신반의했습니다. "정말 코드 한 줄 안 쓰고도 홈페이지를 만들 수 있을까?"라는 의문이 있었지만, 강의를 따라가며 Claude MCP와 Thorrey를 사용해보고 나서는 생각이 완전히 바뀌었습니다.
이 글은 저처럼 웹 개발에 익숙하지 않은 초보자도 AI 도구만으로 어떻게 첫 번째 웹페이지를 만들 수 있는지 경험한 내용을 공유하기 위해 작성했습니다.
진행 방법
가장 먼저 클로드 데스크탑을 다운로드 해야 합니다. https://claude.ai/download
그리고 MCP 설치 전에 node.js를 설치해야 하고요.
클로드 데스크탑에서 설정 > 개발자에 들어가 https://smithery.ai 에서 검색하여 복사한
desktop-commander
playwright-mcp
를 붙여 넣어 설치 해줍니다.
그리고 저는 이런 프롬프트를 넣었습니다.
"https://www.airbnb.co.kr/ 를 확인해서 에어비앤비 스타일의 웹사이트를 만들고 싶어. 인덱스 페이지를 바닐라 JS로 제작할거야. 스타일만 에어비앤비로 해주고, 컨텐츠는 책 추천 및 독후감 등 책과 관련된 싸이트야."
결과는 이렇게 나왔습니다.
결과와 배운 점
AI를 활용한 웹 개발의 진입장벽이 매우 낮아졌음을 실감했습니다.
프롬프트를 다듬는 것만으로 다양한 결과물을 만들 수 있어, 코딩보다 표현력과 구성이 더 중요하게 느껴졌습니다.
다음에 해보고 싶은 것
폼 입력이나 인터랙션 추가
반응형 웹 디자인 구성 요청하기
실제 도메인에 배포해보기
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
#18기 클로드MCP
