인스펙터
Inspector
웹 화면을 편집하면 코드가 자동으로 바뀌는, 브라우저와 IDE를 연결한 AI 비주얼 에디터
부분 무료WebDesktop
웹사이트 방문하기tryinspector.com
레플리케이트와(과) 비교하기소개
Inspector는 브라우저와 코드베이스를 시각적으로 연결하여 프론트엔드 개발 워크플로우를 혁신적으로 개선하는 AI 기반 통합 개발 환경(IDE)입니다. 이 도구는 개발자가 일반적으로 겪는 브라우저와 코드 사이의 컨텍스트 수집 과정을 자동화하여 개발 속도를 높이는 것을 목표로 합니다. Inspector의 핵심 기능은 사용자가 화면상의 요소를 직관적으로 이동하거나 텍스트를 수정할 수 있는 비주얼 에디터를 제공한다는 점입니다. 또한, Claude Code, Codex, Cursor 같은 코딩 에이전트를 사용자의 브라우저에 직접 연동하여, 개발자가 보는 런타임 컨텍스트(시각적 요소, DOM, 로그 등)를 AI에게 그대로 전달할 수 있습니다. 이를 통해 AI는 더 정확한 코드를 생성하고 수정할 수 있습니다. 모든 기능은 완전히 로컬 환경에서 실행되며, 어떤 로컬 코드베이스에도 연결할 수 있어 개발 속도를 저해하지 않습니다. 이 도구는 특히 실제 프론트엔드 화면에서 즉각적인 반영 작업을 선호하는 프론트엔드 엔지니어 및 웹 개발자에게 최적화되어 있습니다. 현재 MacOS 운영체제를 지원하며 사용을 시작할 수 있습니다.
활용 워크플로우
입력
로컬 React/Next.js 소스 코드브라우저 런타임 데이터 (DOM, CSS 스타일)AI 에이전트 API (Claude Code, Cursor, Codex)사용자의 시각적 UI 편집 및 주석
인스펙터
브라우저 요소와 코드 소스 매핑 (Click-to-Code)런타임 시각적 컨텍스트 및 스냅샷 자동 추출AI 에이전트용 비주얼 컨텍스트 지시문(Prompt) 합성로컬 파일 시스템 코드 자동 패치 및 실시간 동기화
출력
AI가 자동 업데이트한 리액트 컴포넌트 코드실시간 핫 리로딩이 적용된 브라우저 뷰최적화된 Tailwind CSS 및 스타일 속성코드 변경 사항이 반영된 로컬 Git 저장소
비주얼 다이렉트 에디팅 모드
코드를 직접 치지 않고 브라우저 상에서 요소를 드래그하거나 텍스트를 직접 수정하여 AI가 즉시 코드를 생성하도록 유도
AI 에이전트 컨텍스트 주입
Claude Code나 Cursor에 현재 화면의 특정 DOM 구조와 시각적 스냅샷을 전달하여 복잡한 로직이나 버그 수정을 요청
로컬-퍼스트 보안 워크플로우
모든 코드 데이터와 연동 프로세스를 로컬 환경 내에서 처리하여 코드 외부 유출 없이 빠른 개발 속도 유지
핵심 차별점: 브라우저 런타임의 시각적 요소를 소스 코드의 정확한 위치와 실시간으로 매핑하여, AI가 화면을 '보고' 직접 코드를 수정할 수 있는 완전한 환경을 제공합니다.
주요 기능
- 브라우저 요소 클릭 시 해당 소스 코드 라인 즉시 이동
- Claude Code, Cursor, Codex 등 주요 AI 코딩 에이전트와의 직접 연동
- 화면의 시각적 스냅샷을 AI에게 컨텍스트로 제공하는 Page-aware Screenshot
- 로컬 코드베이스와 완벽하게 동기화되는 비주얼 에디터 기능
장점 & 단점
웹검색을 통해 수집된 사용자 피드백 정보입니다
장점
- 디자인-코드 간 핸드오프 과정을 획기적으로 줄여주는 기능
- 비기술직 팀원도 실제 코드를 배포할 수 있게 지원
- 디자이너가 익숙한 인터페이스로 AI 에이전트를 통해 코딩 가능
- 카드 간격 조정 등 시각적 편집 후 클릭 한 번으로 저장소에 적용
- 프롬프트 작성 없이 네비게이션 바를 시각적으로 재설계하고 PR 생성 가능
- DOM 인식 스크린샷과 DevTools 터미널 출력을 대화에 직접 첨부 가능
단점
- 랜딩 페이지에 가격 정보가 없어 사용자들이 신뢰하지 못함
- 완벽한 코드를 작성하지 못하며 어시스턴트 역할만 수행
- 제대로 작동하는 결과물을 얻기 위해 3-4번 시도가 필요한 경우 존재
- 이미 Cursor나 Claude Code 사용 시 불필요한 추가 계층이 될 수 있다는 우려
- 수동 코딩의 정밀도를 완전히 대체할 수 있는지에 대한 의문
가격 정보
부분 무료시작 가격: 월 $29
무료 티어를 제공하여 사용자가 AI IDE 기능을 제한적으로 체험해 볼 수 있다. 유료 플랜은 월 $20부터 시작하며, 브라우저와 코드베이스를 연결하여 시각적으로 프론트엔드 요소를 편집하고 AI 에이전트에게 맥락을 전달하는 기능을 제공한다.
활용 사례
- Figma처럼 브라우저 UI를 직접 편집하여 실제 코드에 즉시 반영
- AI 에이전트에게 런타임 오류나 스타일 이슈의 시각적 증거를 전달하여 정확한 수정 유도
- 로컬 개발 환경에서 시각적 수정과 코드 작성을 병행하는 하이브리드 워크플로우 구축
대상 사용자
프론트엔드 엔지니어개발자
연동 서비스
GitHubClaude CodeCursorCodex
태그
코드 생성디자인자동화개발자 도구스타트업브라우저 확장엔터프라이즈
사용자 리뷰
리뷰를 불러오는 중...
대안 도구
이 도구 대신 사용할 수 있는 대안
