🔍 클로드 데스크톱 앱 + MCP로 웹페이지 훔치기

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

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

(3줄요약 미리보기)

X에서 MCP 사용 사례를 보고 흥미를 느껴 직접 사용해봄.
MCP를 사용해 URL만 입력하면 클로드가 웹페이지 HTML+CSS 코드를 렌더링
렌더링 웹페이지를 바탕으로 자신의 상황에 맞게 웹페이지로 변형 및 활용
피그마 플러그인 대신 활용 가능할 것으로 기대...?!

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

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

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

2️⃣ 사용 과정과 경험

✅ 준비물

클로드 데스크톱 앱
https://claude.ai/download
https://claude.ai/download
ScreenshotOne API
https://screenshotone.com/
https://screenshotone.com/
ScreenshtoOne MCP
https://github.com/screenshotone/mcp
https://github.com/screenshotone/mcp

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

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

Please, render a screenshot of https://antinote.io/ and convert it into HTML and CSS-keep colors, branding and layout.
```