r/vibecoding•6개월 전•50•14
Claude Code에 내장 브라우저를 추가해서 요소를 클릭하고 즉시 수정할 수 있게 만들었습니다
I added an embedded browser to my Claude Code so you can click any element and instantly edit it
핵심 요약
AI 코딩 에이전트용 IDE인 Vibeyard에 내장 브라우저를 추가하여 클릭 한 번으로 웹 UI 요소를 직접 수정하는 기능을 구현함.
- 내장 브라우저 — Claude Code 세션 내에 브라우저 탭을 추가하여 웹 요소를 직접 클릭하고 수정함.
- 직관적 UI 수정 — 요소를 직접 클릭하여 선택함으로써 정확한 셀렉터를 찾거나 설명하는 번거로움을 제거함.
- 오픈소스 IDE — Vibeyard라는 오픈소스 프로젝트를 통해 AI 코딩 에이전트의 웹 개발 경험을 개선함.
- 기술적 구현 — MCP 서버를 활용해 스크린샷 없이 브라우저 제어 명령을 직접 호출하는 방식을 채택함.
Vibe coding으로 웹 UI를 만들 때 가장 불편했던 점은, 수정하고 싶은 내용을 설명해야 하는데 셀렉터가 틀리거나 Claude가 올바른 컴포넌트를 찾지 못하는 상황이었습니다.
그래서 Vibeyard (AI 코딩 에이전트를 위한 오픈소스 IDE)에 브라우저 탭 세션 타입을 추가했습니다.
추측할 필요도, 올바른 컴포넌트를 찾아 헤맬 필요도 없습니다. 클릭 → 지시 → 완료.
사용해보고 싶으시다면 여기 GitHub 링크를 확인하세요 - https://github.com/elirantutia/vibeyard
