클로드 MCP 활용 홈페이지 제작 무작정 따라하기

😄 선택의 이유

18기 클로드 MCP 활용 홈페이지를 선택한 이유는 회사 프로젝트를 위해 홈페이지가 필요해진 상황이었습니다. 웹 개발 지식이 없었지만, "AI로 해볼 수 있지 않을까?"라는 생각이 들었고, 이번 기회에 배워서 직접 만들어보자는 목표로 도전하게 되었습니다.

🔨진행방법 및 사용한도구

  • 클로드: 클로드앱과 MCP를 활용해 스터디장님이 하시는 방법을 그대로 따라했습니다

  • 사용한 MCP:

    • seq

    • desktop-commander

    • server-text-editor

    • playwright

단순히 따라하기만 했는데도 클로드가 다음과 같은 결과를 보여줬습니다

한국어 페이지의 스크린 샷

그리고 이렇게 에어비앤비 스타일의 홈페이지가 만들어졌습니다 (우왕 신기....)

부동산 웹 사이트의 홈페이지

💡 시도한 방식

스터디장님이 보여주시는 대로 그대로 따라했을 뿐입니다. 기존에 클로드와 클로드코드를 써본 경험이 약간 있고, 최근 AI에 관심이 많아져 이것저것 찾아본 덕분인지 큰 어려움 없이 과정을 따라할 수 있었습니다.

🔥결과와 배운 점

역시 AI 세상에 '딸깍'으로 완성되는 마법은 없었습니다. 실제 사람과의 프로젝트도 기획이 엉망이면 과정이 어렵고 결과물도 만족스럽지 못한 것처럼, AI 활용에서도 기획을 잘하는 것이 매우 중요하다는 점을 느꼈습니다.

툴을 효과적으로 사용하려면 사용자가 도구를 제대로 이해하고 어떻게 활용할지 명확히 결정하는 것이 중요한 것 같습니다. 컨텍스트 엔지니어링이 중요해진 이유가 여기에 있다는 것을 깨달았습니다.

앞으로는 기획문서(지침)를 잘만들고 툴을 더 이해하고 잘 쓸수 있도록 한달동안 달려보겠습니다

1
3개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요