InstaFix란 무엇인가요?
오픈소스 클라이언트 피드백 위젯 — DOM에 고정된 주석, 셀프 호스팅, SaaS 구독료 없음.
InstaFix는 여러분의 클라이언트가 여러분이 만들고 있는 바로 그 웹사이트 위에서 직접 피드백을 남길 수 있게 해줍니다. 클라이언트가 페이지 위에 사각형을 그리거나(또는 툴바의 타겟 버튼을 누르고 요소를 클릭해서) 댓글을 입력하면, 여러분은 그 피드백을 정확한 요소에 고정된 상태로 전달받습니다 — 더 이상 이메일에 붙여넣은 스크린샷도, "위쪽에 있는 버튼… 아니, 그거 말고 다른 거요" 같은 대화도 필요 없습니다.
클라이언트와 함께 진행 중인 사이트를 리뷰하는 프리랜서와 에이전시를 위해 만들어졌으며, Marker.io나 BugHerd 같은 도구를 여러분이 직접 소유하는 것으로 대체합니다: MIT 라이선스, 셀프 호스팅, 여러분의 데이터베이스, 구독료 없음.
동작 방식
- 위젯을 추가합니다 — 검토 대상 사이트에
npm install한 번,initInstaFix()호출 한 번이면 끝입니다. 기본적으로 개발 및 스테이징 환경에서만 표시되며, 프로덕션 방문자에게는 절대 노출되지 않습니다. - 클라이언트가 주석을 답니다 — 사각형을 그리거나, 타겟 버튼을 누른 뒤 원하는 요소를 클릭하면 됩니다. 각 댓글은 그 아래의 DOM 요소에 고정되므로, 배포나 레이아웃 변경이 있어도 유지됩니다. 선택 옵션으로 주석이 달린 영역의 스크린샷, 콘솔/네트워크 진단 정보를 함께 남길 수 있습니다.
- 여러분이 트리아지합니다 — 바로 붙여 쓰는 대시보드(키보드 단축키를 지원하는 Linear 스타일 인박스)에서, 또는 순수 HTTP API를 통해 처리합니다. 상태는
open→in_progress→resolved/wont_fix순서로 흘러갑니다.
구성 요소
| 패키지 | 설명 |
|---|---|
@instafix/widget | 클라이언트가 사용하는 피드백 위젯 (gzip 기준 ~30 KB, 프레임워크 독립적, React 훅 포함) |
@instafix/dashboard | 트리아지용 인박스 — React 컴포넌트 하나, 또는 헤드리스 훅 |
@instafix/adapter-prisma / -sqlite | 프로덕션용 서버 어댑터: 엔드포인트 하나, 인증, CORS, 웹훅 |
@instafix/adapter-memory / -localstorage | 테스트, 데모, 서버리스 프로토타입을 위한 스토어 |
@instafix/adapter-kit | 나만의 스토어 어댑터 만들기 — 계약, 엔진, 적합성 테스트 스위트 |
@instafix/cli | init, sync, status, doctor — 설치와 상태 점검 |
준비되셨나요? 퀵스타트는 약 3분이면 끝납니다 — 또는 바로 이 위젯이 동작하는 데모에서 모든 것을 직접 체험해 보세요.