소개
경영자문을 하면서 항상 변화에 맞는 실행을 고민해왔어요. 그러던 중, 출간을 앞두고 책을 홍보할 랜딩페이지를 만들어보자는 생각이 들었습니다. 예전부터 웹페이지 제작에 대한 관심이 있었고, 마침 최근 등장한 AI 도구들을 활용해보면 좋겠다는 타이밍이었죠.
그래서 Claude의 프로젝트 기능과 MCP를 중심으로 반자동화 랜딩페이지 제작에 도전하게 되었습니다. 그리고 클로드 코드도 사용해보면서 보완 또는 비교도 해보게 되었습니다.
진행 방법
사용한 도구는 다음과 같아요:
🧠 Claude 데스크탑 버전: 프로젝트 기능으로 전반적인 흐름 구성
🛠️ Claude Code: 코드 보완 및 비교용
🧩 MCP: 플레이롸이트, 데스크탑, 시퀀셜씽킹, 컨텍스트7 설치 (디자인 팀)
🤖 Gemini: 보조 확인 및 의견 비교용
진행 방식은 이렇게 흘러갔습니다:
Claude 데스크탑 버전 설치 (맞는 버전으로 다운로드 클릭)
필요한 MCP 설치 (플레이롸이트, 데스크탑커맨더, 씨퀀셜씽킹, 컨텍스트7)
smithery site에서 구글아이디나 깃헙으로 로그인하고, MCP 를 다운로드 받으면 된다.
원하는 mcp 클릭 --> 나에 맞게 설치 (클로드데스크탑 버전클릭하고 복사해서 터미널에 붙여넣으면 끝)
이렇게 하고 클로드 데스크탑의 설정에서 개발자 클릭하고 들어가 보면 설치된것을 확인가능함.
이제 책의 랜딩페이지를 위한 디자인팀을 프로젝트로 설정
책의 기본 원고 등을 첨부하여, 기획서를 만들고, 어떤 목적으로 랜딩페이지를 만드는지 티키타카를 진행함. 여기에서 나오는 대화들을 정리하여 md 파일로 요청하여 다시 폴더와 지식파일에 첨부함.
5. 책의 내용을 정리한 파일 커서 제미나이로 가서 기획안이나 의도 등을 이야기하면 내용을 정리하고 파일로 정리해서 다시 클로드 프로젝트 내 지식파일로 첨부하고, 디자인을 위한 레퍼런스 링크를 넣고 디자인가이드를 요청함.
https://www.webjangi.com/artwork?filter0=pick&filter1=&filter2=&tag=&color=&domInter=&filter=false#cbp=/artwork/artworkView?artworkIndex=A0000000129325 위 링크의 디자인을 참고해서 랜딩페이지를 만들계획이야. 플레이롸이트 mcp를 이용해서 확인하고, 차분하게 분석해서 디자인가이드를 md 파일로 만들어줘막 MCP 가 작업을 하더니 어느 정도 진행 후 다음과 같은 결과를 내기 시작함.
이후 프롬프트 입력
데스크탑 커맨더 MCP를 이용해, 첨부된 랜딩페이지에 대한 기획안도 좀 더 상세하게 기재해서 md 파일로 저장해줘내가 랜딩페이지를 만든 목적은 2가지야
1. 책에 실린 프롬프트를 독자에게 쉽게 전달함
2. 랜딩페이지안에서 특별한 이벤트(책을 구입만 해도 강의를 들을 수 있음)를 통해 강의 요청
"""
이 내용도 기획안에 넣어줘. 제일 중요한 부분이야책의 가격은 2만원이고, 출판기념이벤트(2025년 12월 말까지만)는 인원을 기준으로, 30인 이하 사업장이나 모임은 30권구입, 30인 이상은 인원수에 맞게 책을 구입하시면 2시간 AI를 활용한 생산성 향상과 관련된 입문이나 기초강의를 하는거야. 이 내용도 정리해서 수정보완하고 md파일도 업그레이드 해줘B2B가 될 수도 있고, 모임 형태의 B2C 가 될 수도 있으니 참고해서 진행해줘더 이상 진행이 어렵다고 해서 새 창으로 가서 먼저 창의 내용을 다 넣고 마무리 작업 멘트
우여곡절 끝에 랜딩페이지가 나옴.
https://claude.ai/public/artifacts/80b8a02d-1646-4f7c-ba3a-c220e30711cd
이 작업을 통해 데스크탑커맨더 MCP가 만들어 준 폴더에 터미널을 통해 클로드코드를 침투시켜 폴더의 내용을 하나씩 읽고 디자인을 수정보완해 달라고 요청함. 그랬더니 서브에이전트가 나와서 한 10분정도 작업 후 완료해줌.
클로드코드를 통해 완료된 랜딩페이지 (시간관계상 한번에 나온 자료 게시)
한번만에 나와서인지 큰 차이는 못 느끼지만, 한두번 수정하면 클로드코드 작업이 퀄리티가 높다는건 인정하게 됨.
😅 예상과 달랐던 점
완성된 프런트엔드는 솔직히 만족스럽진 않았어요.
제 실력이 부족해서일 수도 있고, 아직은 세밀한 조정이 어려운 점도 있었어요.
👍 좋았던 점
자연어 기반으로 전체 구조를 빠르게 생성할 수 있는 점
MCP에서 컨텍스트를 유지하며 연속적 작업이 가능했던 점
전반적인 흐름을 잡는 데엔 확실히 도움됨
💡 배운 점
기획과 컨텍스트 정리의 중요성: 일관성을 유지하려면 기획 단계가 매우 중요하다는 걸 다시금 느꼈습니다.
디자인도 마찬가지: 아무리 AI를 써도 결국은 좋은 레퍼런스와 구체적 요청이 성패를 좌우해요.
🚀 다음 시도는?
기존에 방치된 워드프레스 홈페이지가 있어요. 이것도 Claude + MCP 조합으로 반자동화 리뉴얼을 시도해보고 싶어요!
도움 받은 자료나 내용
스터디장인 이모카님의 친절하고 상세한 강의와 지침이 매우 도움이 많이 됐습니다.
참! 또 다른 재엽님이 만들어 주신 앱이 있어 클로드데스크탑의 MCP를 관리하는게 너무
편하고 도움이 많이 됩니다.
