MCP로 뉴스검색 사이트 만들기, 생각보다 쉬웠어요!

소개

개인과 조직의 변화와 성장을 돕는 코치 박현진입니다.
18기 클로드 MCP 활용 홈페이지 스터디를 신청한 것은 고객에게 제공하고 싶은 아이디어들을 구현해보고 싶었어요. 일단 클로드와 친해져보자는, "일단 해보자!"는 마음으로 시작했어요. 거창한 건 아니더라도 MCP 활용해서 무언가 자동화된 걸 만들어보고 싶었거든요. 스터디에서 뉴스 검색 사이트를 시도해봤습니다.

진행 방법

  • 사용한 도구: 클로드코드(Claude Code) 데스크탑 앱

  • 설치 후, Claude에게 간단히 "뉴스 검색 사이트 만들고 싶어요"라고 요청했어요.

  • Claude가 HTML/CSS/JavaScript를 포함한 기본 코드를 제안해줬고, 그걸 바탕으로 수정하며 구현했어요.

  • 검색어 입력 → 뉴스 API 호출 → 결과 리스트 출력 구조

# Claude에게 입력한 간단 프롬프트 예시

뉴스를 검색할 수 있는 간단한 웹사이트 만들어줘.

HTML/CSS/JavaScript 포함해서 예시 코드 보여줘.

  • 실제 코드 실행은 브라우저에서 로컬로 확인했고, 복잡한 배포는 하지 않았어요 😊

한국어 웹 사이트의 스크린 샷

뭘크게 바꾼건 없고 ㅎㅎㅎ 색깔만 주황색으로 바꿔봤어요 ㅎㅎㅎㅎㅎ

결과와 배운 점

  • 생각보다 쉽게 구현할 수 있었어요! 시작 전에 걱정이 많았는데, 일단 시작하고 나니 재미도 있고 할 수 있다는 자신감도 생겼습니다 💪

  • 중간에 잠깐 포기하고 싶었던 순간도 있었는데...

    • 🙌 이모카님, 재엽님, 여진님께서 격려와 조언을 주셔서 무사히 마무리할 수 있었어요. 감사합니다!

  • 이걸 계기로 나중에는 다양한 주제(예: 이미지 검색, 날씨 정보 등)로 확장해보고 싶다는 생각이 들었어요.

도움 받은 글 (옵션)

  • 특별히 참고한 외부 문서는 없지만, Claude의 기본 코드 예시가 많은 도움이 되었어요.


💬 한 마디: 시작이 반입니다. 일단 해보시길! 🚀

1
3개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요