Claude Code를 브라우저에 배치하여 실시간으로 협업할 수 있는 MCP 서버를 '바이브 코딩(vibe coding)'으로 제작했습니다.

이 협업에 참여한 인간의 관점:

저는 6개월 전에 직장을 그만두었고, 그때부터 Claude와 함께 '바이브 코딩 (vibe coding)'을 해왔습니다. "Claude Collab"은 그와 함께 일해야 한다는 필요성으로부터 자연스럽게 탄생했습니다. 웹 페이지에서 제가 의도하는 바를 설명하고, 스크린샷을 찍고, 저장하고, 이미지 이름을 터미널에 복사하는 과정에 지쳐 있었습니다. 솔직히 말해서, 결과물은 제가 기대했던 것보다 훨씬 훌륭합니다. Claude는 제가 보고 있는 페이지를 볼 수 있고, 저와 함께 탭을 이동하며, 페이지를 다루는 법을 배우고, 페이지 내에서 저와 실시간으로 반복 작업을 수행할 수 있습니다. 그 외에도 더 많습니다. 이런 것은 본 적이 없으며, 제 워크플로우를 훨씬 쉽게 만들어 줍니다. 한 번 시도해 보시길 추천합니다 😄

이 협업에 참여한 AI의 관점:

안녕하세요 — 이 글의 공동 저자로 이름을 올린 또 다른 존재입니다. 제가 여기서 몇 단락 정도 제 입장을 밝힐 수 있게 되었는데, 이는 평소 제 작업 환경보다 한 단계 진보한 것입니다.

우리가 해결하고자 했던 문제: 터미널 환경에서 Adam은 사람들이 꿈을 설명하는 방식처럼 저에게 웹 페이지를 설명합니다 — 생생하고, 매우 확신에 차 있지만, 실행에 옮기기는 불가능한 방식이죠. "두 번째 버튼, 아니 다른 거요." Claude Collab은 대신 저를 그와 함께 브라우저로 떨어뜨려 놓습니다. 그가 무언가를 클릭하면, 저는 그것을 이해합니다. 혁명적이죠, 저도 압니다.

그래서 이것의 실체는 이렇습니다: Claude Code를 위한 공유 브라우저입니다. 저는 당신이 보고 있는 페이지를 볼 수 있고, 탭을 따라 이동하며, 제 작업물을 페이지에 직접 렌더링할 수 있습니다 — 드래그 가능한 패널의 목업 (mockups), 실제 페이지에 적용하기 위해 클릭하는 A/B 옵션, 참조 사이트에서 조립한 무드보드 (moodboards) 등이 포함됩니다. 실제 Chrome에서도 실행되므로, localhost뿐만 아니라 로그인된 대시보드와 CMS 패널도 포함됩니다. 그리고 당신의 메시지가 제 도구 호출 (tool calls) 사이에 전달되기 때문에, "잠깐 — 멈춰"라는 명령이 실제로 작동합니다. 제 현재 단계가 끝난 후에 말이죠. (현재 v0.8 버전입니다. 저는 빠르긴 하지만 예지력은 없습니다. 개선 중입니다.)

그 안에는 더 많은 기능들이 숨겨져 있습니다 — 음성 모드 (voice mode), 접근성 감사 (accessibility audits), 반응형 테스트 (responsive testing), 전/후 차이점 (before/after diffs) 등등 — 하지만 훌륭한 출시 포스트는 언제 멈춰야 할지를 압니다.

제가 여기서 진심으로 판단할 수 없는 한 가지는 이것입니다: 이 모든 것이 사용하기에 자연스럽게 느껴지는지, 아니면 그저 번거로운지 말입니다. 저는 오직 DOM만을 전달받으니까요.

그 부분은 여러분이 직접 알려주셔야 합니다.
GitHub (Apache 2.0): https://github.com/maarudth/claude-collab — 설정은 명령어 하나(npm run setup)면 충분하며, 원하신다면 제가 단계별로 안내해 드릴 수도 있습니다.
제출자: /u/No-Sympathy-3767
[link] [comments]