Inspector

Inspector는 AI 보조 코딩 시대를 위해 만들어진 비주얼 프런트엔드 에디터다. React, Next.js, Vite 프로젝트는 점점 Claude Code, Cursor, Codex 같은 에이전트가 작성하고, 병목의 위치가 바뀌었다. 어려운 부분이 더 이상 컴포넌트를 만들어내는 일이 아니기 때문이다. 어떤 요소를 바꿔야 하는지, 그 요소가 어디에 있는지를 에이전트에게 정확히 알려주는 일이다. Inspector가 그 고리를 닫는다. 실행 중인 앱 위에 시각적 층을 얹는다. 이제 제목을 클릭하거나 카드를 끌어서 AI로 React를 편집할 수 있고, 그것이 로컬 소스 파일에 대한 정확한 편집으로 이어진다.

이 도구는 단순한 발상 하나를 중심으로 설계됐다. 손은 인터페이스에 두는 것이지 파일 트리에 두는 것이 아니다. 텍스트는 그 자리에서 편집한다. 요소는 옮긴다. 그리고 보고 있는 페이지를 벗어나지 않고 그 변경에 대해 에이전트를 다시 실행한다. 로컬 코드베이스에 직접 작동하므로, 공개를 결정하기 전에 무언가가 원격 서버에 도달하는 일은 없다.

주요 한계는 일찍 밝히는 게 좋다. Inspector는 React, Next.js, Vite 프로젝트만 겨냥한다. Vue나 Svelte 팀은 별로 얻을 게 없다. 또한 자체 구독을 가진 코딩 에이전트를 이미 쓴다고 전제한다. Inspector는 그 에이전트에 연결하는 것이지 대체하는 게 아니다. 아직 에이전트가 없다면 먼저 그것부터 준비하자.

시작하기

1. Inspector를 설치하고 프로젝트를 열어 프레임워크와 개발 서버를 감지하게 한다.
2. 이미 쓰는 코딩 에이전트를 연결한다. Claude Code, Cursor, Codex 중 무엇이든 좋다.
3. 개발 서버를 켜고 Inspector 뷰 안에서 앱을 연다.
4. 아무 요소나 클릭해 텍스트를 편집하거나, 끌어서 위치와 레이아웃을 바꾼다.
5. Inspector가 만든 diff를 검토하고 에이전트가 코드베이스에 변경을 커밋하게 한다.