오픈소스 개발자 도구

에이전트에게 페이지가 아니라
코드 한 줄을 알려주세요

실행 중인 화면에서 요소를 클릭하고 무엇이 잘못됐는지 적으면, 정확한 파일과 줄·열 번호가 담긴 프롬프트가 클립보드에 복사됩니다. 서버도, 계정도 필요하지 않습니다.

$npm install local-feedbackernpm에서 보기 →

클립보드 — 에이전트에 그대로 붙여넣습니다

## Feedback: "Primary button should be white"

## Clicked UI
- Element: button.btn-primary
- Nearby copy: Save changes

## Confirmed implementation source — start here
- Call site: src/components/OrderPanel.tsx:142:8
- Definition: src/ui/Button.tsx:24:1

## Supporting context
- Route: /orders/new

## Requested agent behavior
Inspect the confirmed call site first. Preserve unrelated behavior.
Ask a question if the requested change is ambiguous.

무엇이 다른가

선택자는 검색이고, 줄 번호는 답입니다

대부분의 시각 피드백 도구는 CSS 선택자와 좌표를 넘겨줍니다. 에이전트는 그때부터 코드를 직접 찾아야 합니다. 클래스명을 저장소 전체에서 grep하고, 네 개의 Button 컴포넌트 중 어느 것이 이 화면을 그렸는지 추측합니다. 토큰과 시간이 바로 그 탐색에서 소모됩니다.

선택자만 제공에이전트가 직접 탐색

### 1. Button
Location:body > div > main
          > button.btn-primary
Classes: btn btn-primary
Position: 412px, 288px
Feedback: Should be white

local-feedbacker에이전트가 파일을 바로 엶

## Confirmed source
- Call site:
  src/components/
  OrderPanel.tsx:142:8
- Definition:
  src/ui/Button.tsx:24:1

작동 방식

런타임 추측이 아니라 빌드 시점에 확정합니다

런타임 방식은 React 내부의 _debugSource 필드를 읽습니다. 이 필드는 개발 빌드에만 존재하고 React 19에서 제거됐으며, 파이버 트리를 거슬러 올라가다 클릭한 요소가 아닌 상위 컴포넌트를 가리키기도 합니다. local-feedbacker는 빌드 과정에서 위치를 심기 때문에 프로덕션 번들에서도 살아남고, React 내부 구조에 전혀 의존하지 않습니다.

번들러 설정을 감쌉니다

Babel 기반 로더가 앱을 컴파일하면서 각 JSX 호출 지점에 원본 위치를 기록합니다.

// next.config.mjs
import { withLocalFeedbacker } from "local-feedbacker/next";

export default withLocalFeedbacker({});

위젯을 마운트합니다

컴포넌트 하나면 됩니다. 프로덕션에서는 기본적으로 숨겨지고, Ctrl/Cmd+Shift+. 로 언제든 켜고 끌 수 있습니다.

import { ImpakersFeedbackProvider } from "local-feedbacker/react";

<ImpakersFeedbackProvider language="ko" />

클릭하고, 설명하고, 붙여넣습니다

제출하는 순간 프롬프트가 클립보드에 올라갑니다. Claude Code, Cursor 등 텍스트를 읽는 어떤 도구에도 그대로 전달하면 됩니다.

프롬프트 구성

모든 항목이 제 몫의 토큰을 합니다

호출 위치: 지금 이 인스턴스가 렌더링된 지점입니다. 대부분의 수정은 바로 이 줄에서 이뤄집니다.
정의 위치: 컴포넌트 자체가 선언된 곳입니다. 모든 인스턴스에 공통으로 적용할 수정일 때 필요합니다.
클릭한 UI: 요소, 선택한 텍스트, 주변 문구, 접근성 이름까지 함께 담습니다.
모달 컨텍스트: 다이얼로그 안에서 남긴 피드백이라면 그 다이얼로그를 어떻게 열었는지 기록합니다. URL만으로는 에이전트가 그 화면에 도달할 수 없기 때문입니다.
요청 동작: 호출 위치부터 확인할 것, 관련 없는 동작은 보존할 것, 모호하면 추측하지 말고 되물을 것 — 에이전트에게 주는 명시적 지시입니다.

그 밖에

한 번의 클릭이 아니라 리뷰 세션을 위해 만들었습니다

스크롤을 따라가는 스크린샷

지금 보고 있는 화면 그대로 캡처합니다. 모달 안에서 남긴 피드백은 모달 자체를 캡처합니다.

음성 받아쓰기

브라우저 자체 음성 인식으로 문제를 말로 설명할 수 있습니다. 어디에도 업로드되지 않습니다.

4개 언어

한국어, 영어, 스페인어, 중국어. 인터페이스뿐 아니라 생성되는 프롬프트 자체가 번역됩니다.

한 번에 내보내기

리뷰 세션 전체가 마크다운과 스크린샷이 담긴 zip 하나로 내려받아집니다. 폴더 선택도 권한 대화상자도 없습니다.

남아 있는 핀

마커가 새로고침과 페이지 이동을 넘어 유지되므로, 플로우 전체를 훑은 뒤 한꺼번에 넘길 수 있습니다.

백엔드 없음

모든 것이 localStorage에 저장됩니다. 계정도, 서버도, 수집도 없고 오프라인에서 동작합니다.

이럴 때는 맞지 않습니다

빌드 단계 통합이 이 도구가 치르는 대가입니다. 번들러 설정을 건드릴 수 없거나 직접 관리하지 않는 기기에서 피드백을 받아야 한다면, 설정이 필요 없는 런타임 도구가 더 빠릅니다. 대신 에이전트에게 줄 번호 대신 선택자를 넘기게 됩니다.

React 전용이며, 소스 위치의 정확도는 빌드에 달려 있습니다. 로더를 거치지 않은 파일은 확정된 줄 없이 요소 컨텍스트만 제공됩니다.

도입을 검토하고 계신가요?

팀 환경에 맞는 설정을 함께 잡아드립니다.

무료 상담 문의하기

에이전트에게 페이지가 아니라코드 한 줄을 알려주세요