👀 클로드에게 눈을 달아주는 확장 도구 3가지 (설치법)

AI가 만든 화면을 AI가 직접 보고 고치게 하는 확장 도구 3가지입니다. 전부 무료고,
아래 명령어를 복사해서 터미널에 붙여넣으면 돼요.

⚠️ 공통 주의: 세 도구 모두 터미널(CLI) 에서 설치해요. 데스크탑 앱(Claude Desktop)의 Code 탭에서는 /plugin·mcp add 명령어가 막혀 있어서(“isn't available in this environment”), 최초 설치는 터미널에서 해야 합니다.

---

① Playwright MCP (무료) — 브라우저를 직접 보고 고쳐요

출처: https://github.com/microsoft/playwright-mcp

클로드가 실제 브라우저를 열어서, 자기가 만든 화면을 직접 보고 확인·조종합니다.
스크린샷 찍어서 첨부하던 과정이 사라져요.

설치

claude mcp add playwright npx @playwright/mcp@latest

• 설치 후 새 세션에서 적용됩니다.

이렇게 쓰면 돼요

• "모바일·태블릿·데스크탑에서 어떻게 보이는지 확인해줘"
• "전체 페이지 돌면서 깨진 데 있나 봐줘"
• "폼 제출되는지 클릭해보고 확인해줘"

💡 토큰이 부담되면: Playwright MCP는 작업당 토큰을 많이 씁니다(스냅샷을 매번 컨텍스트에 올려서). 토큰을 아끼려면 @playwright/cli(Playwright CLI) 버전도 있어요. 스냅샷을 디스크에 저장해서 약 4배 절약됩니다. 다만 셸 접근이 필요해요.

---

② Chrome DevTools MCP (무료) — 화면 "뒤"를 진단해요

출처: https://github.com/ChromeDevTools/chrome-devtools-mcp

Playwright가 화면을 "조종"한다면, 이건 실행 상태를 "진단"합니다.
왜 느린지, 콘솔에 에러가 뜨는지, 네트워크·성능·Lighthouse까지. 구글 공식 도구예요.

설치 (2단계)

1. 크롬을 디버깅 모드로 실행:

--remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

1. MCP 등록:

npx chrome-devtools-mcp

이렇게 쓰면 돼요

• "이 페이지 왜 느린지 성능 봐줘"
• "콘솔에 에러 뜨는 거 있나 확인해줘"
• "Lighthouse 점수 뽑아줘"

💡 Playwright와 함께 깔면 상호보완이에요. Playwright는 클릭·입력 같은 조종,
Chrome DevTools는 진단. 둘의 역할이 다릅니다.

---

③ Lazyweb SKILL (무료) — 레퍼런스를 보고 비평까지

출처: https://github.com/aboul3ata/lazyweb-skill

25만 개가 넘는 실제 앱 화면을 검색해서 레퍼런스를 가져오고,
내 디자인을 top 앱들과 비교해 개선점을 제안합니다. 유료 Mobbin 급 기능인데 무료예요.

설치 (플러그인)

claude plugin marketplace add https://github.com/aboul3ata/lazyweb-skill

claude plugin install lazyweb@lazyweb

• 무료이고 로그인이 필요 없어요.
• 설치 후 /lazyweb: 슬래시 커맨드로 6개 스킬을 씁니다.

이렇게 쓰면 돼요

• "토스 같은 온보딩 레퍼 찾아서 공통 패턴 정리해줘"
• "내 디자인을 top 앱들이랑 비교해서 개선점 알려줘"
• "핀테크 결제 화면 레퍼 보여줘"

💡 Claude Code뿐 아니라 Codex, Cursor에서도 작동해요.

⚠️ 25만 장은 Mobbin보다는 적고, 미국·서구 앱에 치우쳐 있어요.
아직 v1이라 분류가 덜 정교해 결과에 노이즈가 있을 수 있습니다.

---

세 도구 다 "AI에게 눈을 달아주는" 확장 도구예요. 필요하면 찾는 게 아니라,
있는 줄 알아야 찾을 수 있는 것들이라 정리해봤어요.

설치하다 막히면 인스타 DM으로 편하게 물어보세요 👀
@oliveves.ai