소개
처음에는 Claude Desktop에서 강남구청 강남페스티벌 홍보 페이지를 기획하고 제작하는 과정을 거쳤고, 이후 시행착오를 통해 Claude Code로 웹페이지를 개발하는 흐름으로 전환하게 되었습니다. 이 과정에서 다양한 AI 툴을 병행하여 활용하는 방법과 Claude Code의 효율성과 확장성에 큰 감명을 받았습니다.
진행 방법
🛠️ 사용한 도구
Claude Desktop
Claude MCP (playwright 기반)
Claude Code
퍼플렉시트 (Perplexity)
젠스파크 (LLM 문서 요약)
📝 주요 작업 흐름
우선 제일 중요한 사전 작업 클로드 mcp설치하기
🖥️ 로컬 MCP 서버 구성:
playwright,textEditor,context7,sequential-thinking,desktop-commander등 다양한 MCP를 데스크탑에 설치해 활용출처: 이모카님 1인 사업가를 위한 claude&mcp로 끝내는 마케팅 웹사이트 늦게 알게된 사실이지만
desktop-commander는 오류가 있어 작동을 안했었음. 거의context7을 통해 코딩이 된것 같음.
기획서 작성 시작 : 강남페스티벌 사이트를 playwright 기반 MCP로 살펴보려 했으나, 원인 불명의 오류로 실패
대신 퍼플렉시트를 활용해 관련 정보를 수집하고 기획서 작성요청
2025강남 페스티발 홍보 페이지 같은 웹홍보 페이지를 만들고 싶어. 주민들에게 그날 그날 프로그램에 대해 잘 알릴수 있는 방법과 컨텐츠를...
Claude 프로젝트에서 작업 시작 :
지침기획서.md,디자인.md파일을 프로젝트에 파일로 저장, 프롬프트로 작업 폴더를 알려줌C:\Users\user\claude-project 이 폴더를 개발 폴더로 할거야젠스파크를 통해 기획서 내용을 요약/수정하며 품질 개선, 개선을 했으나,,이미 개선전 기회서로 작업 진행해서 그냥 기획서만
여기까지가 사전 작업
자 이제 드가자~개발 시작~!
여기서 부터는 클로드 코드로 갈아타기~~
Claude Desktop은 느리고 대화가 끊겨 불편했으나, Claude Code 환경에서는 훨씬 안정적으로 작업 가능
이번에는 클로드 코드로 다시 개발 시작 plan.md 만들고, degine.md파일생성후, todo.md와 claude.md파일 생성후 개발 시작
Claude Code에도 MCP를 이식하고 싶어 config 파일을 찾아봤으나 실패
모카님이 알려준 꿀팁: "클로드데스크탑 mcp를 클로드코드에 설치할 수 있어" 라고 프롬프트에 입력하자 Claude가 자동으로 데스크탑 MCP를 찾아 설치해줌 🎉 완전 대박!
결과와 배운 점
클로드데스크탑에서 만든것(4시간)
클로드코드에 만든것(40분)
Claude MCP를 통해 폴더와 파일이 자동 생성되는 구조가 매우 흥미로웠고, 작업 속도에도 도움이 되었음.
그럼에도 Claude Desktop은 속도 문제와 대화 단절 현상으로 실사용에 어려움이 있었음
playwright MCP의 사이트 접근 오류는 예상 밖이었지만, 퍼플렉시트와 Claude Code로 우회 가능
LLM 두 개 이상을 병행 사용하여 서로 보완하고 견제하는 습관이 매우 유용함을 다시 한 번 느꼈음
토요일 오프모임 실습을 통해 터미널 창의 개념과 종류(파워셸, Git Bash, Ubuntu 등)를 처음으로 명확히 이해함
Claude Code는 VS Code나 Cursor처럼 폴더를 처음에 지정해서 작업하는 방식이라 는 점이 매우 중요하게 다가옴
실제로 Claude Code에서 작업한 시간은 기존 4시간 분량을 40분 내에 마무리할 정도로 효율적이었음. 이게 아마 모카님과 재엽님의 큰 그림이 아니였을까...ㅎㅎ
가장 큰 발견: Claude Code는 월 20달러로 무제한 사용이 가능하다는 점! (추가 과금 없음)
단, 사용량이 차면 5~6시간 후에 재사용해야 하는 제한은 있음
하지만 일반적인 작업 흐름에서는 충분히 합리적인 조건이라고 판단됨
그럼 이제 클코 안할 이유 없는거죠~
도움 받은 글
모카님 강의문서
강남페스티벌 공식 홈페이지 https://visitgangnam.net/gnfestival2025/