소개
시도하고자 했던 것과 그 이유를 알려주세요.
사업에 이용할 마케팅 자동화 구현을 준비중인데, 마케팅을 위해서는 웹에서 자료를 크롤링해서 데이터베이스에 저장하는 일이 많습니다. 클로드 mcp를 이용하여 firecrawl, brave search mcp 등을 사용해서 도움을 받아봤지만, 마케팅 자동화를 구현하기에는 많은 어려움이 있고 완전자동화는 불가능할 것 같습니다. 왜냐면, mcp를 사용할 때마다 일일이 권한 허용을 해주어야하고, 또 크롤링 데이터가 클 경우 클로드의 용량제한에 걸려 번번이 멈추곤 합니다....
계속 작업을 지켜보는 상황이 되고 있기에 완전 자동화 구현이 참 힘들구나 하고 느꼈습니다.
그런데, 이번 노젓는 mcp 스터디를 듣고, ai 도구와 에이전트의 발전 속도에 놀라고, 도 완전 자동화 구현이 빨라질 수 있다는 기대감이 들었습니다... 사업에 필요한 업무 생산성이 엄청 올라갈 가능성이 커 졌습니다. 개발자F님, 댕댕이멍멍님, 타이칸님 모두 고맙습니다.~~^^
그래서, 마케팅 자동화에 가장 많이 사용하게 될, 그것도 무료로 계속 사용할 firecrawl mcp server를 먼저 개발해 봐야겠다고 생각하여 시도해 보았습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
https://mcpstudy.vercel.app/lecture/6dca5ecd-4248-4fbf-afd5-ff03d6a6c451
위 자료정리 대박! 타이칸님 감사해용^^
위 강의 자료를 보고 또 보고..... 이해가 안 가서 또 쳐다보기를.... 3일째
Python SDK로 MCP서버 개발하기를 자료의 설명대로 따라해 보았습니다.
파이썬 설치: python-3.13.2-amd64
uv 설치 (파이썬 개발 환경 관리 도구)
uv init 설치 (프로젝트 생성) : 프로젝트명: firecrawl mcp server
uv venv 설치 (파이썬 가상 환경 생성)
source .venv/bin/activate 설치 (가상 환경 활성화)
아~~~ 근데 여기서부터 저는 딴 길로 끝도 없이 갑니다... 하루 웬종일 헤맸습니다....ㅠㅠ
결국, 클로드, gpt를 동원하여 묻고 또 묻고..... 결국은 제가 맥에서 쓰는 코드를 실행하고 있던거였어요....
결국, 윈도우 설치방법을 찾아서 다시 진행...
.venu/scripts/activate (또는: ./.venv/scripts/activate.psl) 설치: 슬래시가 역 방향입니다.
uv add "mcp[cli]" 설치 (필수 라이브러리 설치)
vs code 편집기( 또는 windsurf)에서 프로젝트 열기
File-> Open Folder-> view-> Terminal
터미널에서 .venu/scripts/activate (또는: ./.venv/scripts/activate.psl) 설치: 슬래시가 역 방향입니다.터미널에서 실행하고 main.py파일의 내용을 아래와 같이 변경.
맥에서는 http:// 127.0.0.1:6724 아마 이렇게 나오는거 같은데, 윈도우에서는
"http://localhost : 8081" 형태로 나왔어 요.... 그래서 기능 구현을 위해,
클로드 데스크탑에 mcp install(파이썬경로), mcp istall main.py를 설치 했는데,
또 , 여기서 클로드 데스크탑에서 파이어크롤이 기존에 설치되어 있던 mcp를 호출하는 현상이 계속 나타나서,,, 아무래도 제대로 설치가 안된 것 같아...또 다시, gpt와 claude와 심도 있는 개발 이야기를 해 나갔습니다.......ㅠㅠ 넘 힘듦...
한번에 안 알랴줌.......;;
클로드에 기존 설치되어 있는 것이 함께 있어도 상관없다고 했는데 결국은 파이어크롤 mcp 서버를 사용 못하는 현상만 계속......... 결국, 클로드에 설치되어 있는 Firecrawl mcp를 삭제하고,
클로드 데스크탑에 다시 새로 받은 코드로 Firecrawl mcp저장하고, 호스트에 접속할 수 있는 html 코드를 새로 받아서 설치도 하고, 내가 개발 했다던(?) 파이어크롤 mcp 서버의 호스팅 IP주소를 추적하여 윈도우 설정창에서 프록시를 스크립트주소 url과 8081을 저장하고 사용 허가를 눌러 결국은 어찌어찌 개발은 된 것 같습니다....
이거 하느라 다른 일 한개도 못하고, 산더미처럼 쌓아 놨네요....
위와 같이 설정했습니다.
테스트를 해 봅니다.
클로드 데스크탑에서가 아닌, 크롬브라우저 웹상에서 클로드를 띄워, 제가 찾고자 하는 웹사이트의 정보를 크롤링 해봤습니다.
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
firecrawl 을 사용하여 "https://www.github.com"에 가서 최신 핫한 트렌드 mcp 5개를 크롤링해서 설치 방법을 블로그 게시글로 각각 정리해 줘.
파이어크롤 이용해서 ai타임즈 최신 뉴스 3개를 스크래핑해서 블로그 게시글로 각각 정리해 줘.
파이어크롤로 스크래핑 해 갖고와서 내가 아래 제시한 사이트 분석해서 뭐하는 사이트인지 거기서 biotrak 제품 자료를 이미지랑 같이 꺼내서 내용을 한글로 내놔.
---
"https://tsi.com"
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
<!DOCTYPE html>
<html>
<head>
<title>MCP 서버 클라이언트</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.container { max-width: 800px; margin: 0 auto; }
input, button { padding: 8px; margin: 5px 0; }
#serverUrl { width: 300px; }
#output {
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 10px;
height: 300px;
overflow-y: auto;
margin-top: 10px;
}
.success { color: green; }
.error { color: red; }
</style>
</head>
<body>
<div class="container">
<h1>MCP 서버 클라이언트</h1>
<div>
<label for="serverUrl">서버 주소:</label>
<input type="text" id="serverUrl" placeholder="http://서버주소:포트" />
<button onclick="testConnection()">연결 테스트</button>
</div>
<div>
<label for="command">명령어:</label>
<input type="text" id="command" placeholder="실행할 명령어" />
</div>
<div>
<label for="params">파라미터 (JSON):</label>
<input type="text" id="params" placeholder='{"key": "value"}' value="{}" />
<button onclick="sendCommand()">명령 실행</button>
</div>
<div>
<h3>결과:</h3>
<div id="output"></div>
</div>
</div>
<script>
// 로그 출력 함수
function log(message, type = '') {
const output = document.getElementById('output');
const element = document.createElement('div');
element.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
if (type) element.classList.add(type);
output.appendChild(element);
output.scrollTop = output.scrollHeight;
}
// 연결 테스트
async function testConnection() {
const serverUrl = document.getElementById('serverUrl').value;
if (!serverUrl) {
log('서버 주소를 입력하세요', 'error');
return;
}
try {
log(`${serverUrl}에 연결 시도 중...`);
const response = await fetch(serverUrl, {
method: 'GET',
headers: { 'Content-Type': 'application/json' }
});
if (response.ok) {
log(`연결 성공: 상태 코드 ${response.status}`, 'success');
} else {
log(`연결 실패: 상태 코드 ${response.status}`, 'error');
}
} catch (error) {
log(`연결 오류: ${error.message}`, 'error');
}
}
// 명령어 전송
async function sendCommand() {
const serverUrl = document.getElementById('serverUrl').value;
const command = document.getElementById('command').value;
const paramsText = document.getElementById('params').value;
if (!serverUrl || !command) {
log('서버 주소와 명령어를 모두 입력하세요', 'error');
return;
}
let params;
try {
params = JSON.parse(paramsText);
} catch (error) {
log('파라미터 JSON 형식이 잘못되었습니다', 'error');
return;
}
try {
log(`명령 실행 중: ${command}`);
const response = await fetch(`${serverUrl}/api`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ command, params })
});
const data = await response.json();
log(`응답 받음: ${JSON.stringify(data, null, 2)}`, 'success');
} catch (error) {
log(`명령 실행 오류: ${error.message}`, 'error');
}
}
</script>
</body>
</html>pytho(내용 입력)
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
html코드에서 url넣는 부분은 본인이 만든 파일명을 넣어야 됩니다.
개발 한 건지 찾아낸 건지.... 암튼, firecrawl mcp server가 잘 되는 건지.... 확신은 안 됩니다만..
mcp server가 됐든 A2A, ADK가 됐든, 본인 사업에 뭐가 필요한 지를 잘 결정하고 기획하고 설계해야 잘 만들 수 있고, 또 개발해 놓은 ai 에이전트를 어디에 어떻게 적절히 잘 활용하는 방법을 아는 것이 더 중요한 것 같다는 생각이 듭니다.
😄 역시, 약은 약사에게, 개발은 개발자에게
과정 중에 어떤 시행착오를 겪었나요?
도움이 필요한 부분이 있나요?
앞으로의 계획이 있다면 들려주세요.
💀 스타트업 실험실에서 뼈를 묻고 찬찬히 제대로 배워야겠어요... CTO연합 만세!!!☠️
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)