🔍 클로드 데스크톱 앱 + MCP로 웹페이지 훔치기 - 미라클모닝 스터디

*본 게시물은 GPTers 사례 게시글 도우미와 함께 작성되었습니다.

ALT

SpongeBob Squarepants HD 벽지 -SpongeBob Squarepants HD Wallpaper -SpongeBob Squarepants HD

(3줄요약 미리보기)

• X에서 MCP 사용 사례를 보고 흥미를 느껴 직접 사용해봄.

• MCP를 사용해 URL만 입력하면 클로드가 웹페이지 HTML+CSS 코드를 렌더링

• 렌더링 웹페이지를 바탕으로 자신의 상황에 맞게 웹페이지로 변형 및 활용

• 피그마 플러그인 대신 활용 가능할 것으로 기대...?!

1️⃣ MCP를 사용하게 된 계기

X에서 MCP 사용 사례가 공유된 것을 보고, "이거 피그마 플러그인 대신 써도 괜찮지 않을까?" 하는 생각이 들어 직접 사용해보게 되었습니다.

ALT

사용사례 영상

그리고 실제로 써보니
1. 클로드(Claude) 데스크톱 앱에서 MCP를 활용해 웹페이지를 가져와서 렌더링하고
2. 바로 그 자리에서 시각화 잘하는 클로드 소넷 3.7로 HTML과 CSS 코드를 수정하고
3. 코드를 다운받아 실제로 적용해볼 수 있어서 오히려 피그마 플러그인 보다 더 좋을지도??
라는 결론에 도달했습니다.

2️⃣ 사용 과정과 경험

✅ 준비물

1. 클로드 데스크톱 앱

   https://claude.ai/download

   https://claude.ai/download

2. ScreenshotOne API

   https://screenshotone.com/

   https://screenshotone.com/

3. ScreenshtoOne MCP

   https://github.com/screenshotone/mcp

   https://github.com/screenshotone/mcp

✅ 웹페이지 분석 & 코드 변환

1. ScreenshotOne MCP를 설치하고

   

   ALT

   정상적으로 설치되면 Running이라고 뜹니다.

2. 클로드 데스크톱 앱에서 URL을 입력하면 해당 페이지를 이미지로 캡쳐 후 클로드가 HTML + CSS 코드로 생성하여 제공.
   기존에 클로드한테 페이지 캡쳐해서 렌더링해줘와 같은 원리인데, 이걸 링크로 한다고 생각하시면됩니다.

   사본

   [프롬프트]
   
   Please, render a screenshot of https://antinote.io/ and convert it into HTML and CSS-keep colors, branding and layout.

ALT

흑백 디자인이있는 웹 사이트의 스크린 샷

<왼쪽 원래사이트, 오른쪽 카피한 사이트>

3. 생성된 페이지를 바탕으로 자리에서 마케팅이나 사업 아이디어 클로드로 반영해서 코드 수정하고 변형
   

   

   ALT

   한국어 텍스트가있는 웹 페이지의 스크린 샷

https://claude.site/artifacts/48cb1026-4ba4-4bf6-abac-c7e00bb64a44

3️⃣ 한계와 발전사항

처음에 접근한건 피그마 플러그인 중 하나인 html.to.design을 대체할 수 있지 않을까 하는 생각이었는데, 확실히 그대로 따오는 것과 캡쳐한걸 렌더링하는 것과는 완성도가 다르다는걸 체감했지만,,,

ALT

HTML에서 디자인 페이지의 스크린 샷

ALT

html.to.design로 제작

그럼에도 불구하고 그대로 따와서 클로드에서 바로바로 내 상황에 맞게 수정하고 볼수 있다는 점에서 ScreenshotOne MCP도 써볼만하다!!는 결론이었습니다. See Ya~!

ALT

미니언이 철조망 울타리가있는 들판에 서 있습니다.