Chrome 확장 프로그램 · AI와 함께 만드는 개발자용

내 앱을 클릭,
고칠 곳을 AI에게.

실행 중인 앱 위에 바로 노트를 남기세요. AI 코딩 에이전트는 마크 하나하나가 가리키는 컴포넌트와 소스 파일, 스타일까지 정확히 전달받습니다.

Chrome에 추가 — 7일 무료 체험 사용 방법 보기

Chrome 116+ · Edge 지원 · $6.43 한 번이면 끝, 구독 없음

지원 에이전트 Claude CodeCursorGitHub Copilot WindsurfCodex — 사실, 붙여넣을 수 있는 곳이면 어디든 됩니다.

사용 방법

거슬리는 순간부터 diff까지, 클릭 세 번.

1

패널 불러오기

실행 중인 앱에서 Alt+Shift+A(Mac: ⌥⇧A)를 누르거나 툴바 아이콘을 클릭하세요. localhost에서는 자동 로드됩니다.

2

거슬리는 곳에 마크

아무 요소에나 Note를 꽂고, 영역은 Frame으로 감싸고, Pen으로 슥슥 그리세요. 바꾸고 싶은 내용은 말하듯 편하게 적으면 됩니다.

“이 버튼 좀 더 크게, 헤더에 있는 버튼처럼 초록색으로”
3

Copy for AI → 붙여넣기

클릭 한 번이면 모든 마크가 각자 가리키는 요소 정보와 함께 묶입니다. 에이전트 채팅창에 붙여넣고, 수정이 착착 반영되는 걸 지켜보세요.

마크

가리키는 방법은 네 가지. 나오는 건 정확한 작업 지시서 하나.

1NOTE 아무 요소나 클릭 · 바꿀 내용 적기

고칠 곳을 콕 집고, 원하는 걸 말하세요.

Note를 고르고 클릭하세요. 요소에 번호 핀이 붙고, 바꿀 내용을 적으면 끝. 넓은 영역은 Frame으로 감싸고, 손 가는 대로 Pen으로 그리세요.

마크마다 깔끔한 스크린샷을 붙이고, 다른 요소는 @참조로 가리키세요 — “이거 @Heading이랑 똑같이 맞춰줘”.

일상 언어로 적은 지시가 달린 두 마크가 나열된 Notepix 패널: 업그레이드 버튼 톤 낮추기, 스탯 카드 사이 간격 맞추기
2SOURCE src/demo/components/UpgradeButton.jsx:6:25

모든 마크는 자기 코드 위치를 알고 있습니다.

div.css-1q2w3e가 아니라 <button> in UpgradeButton — src/components/UpgradeButton.jsx:6으로 찍힙니다. React 18/19, Vite, Next.js, CRA 지원. 에이전트가 grep으로 뒤질 필요 없이 바로 그 파일을 엽니다.

각 마크에는 요소의 계산된 스타일과 클래스 목록까지 함께 담깁니다. React 페이지가 아니라면? 대신 정밀한 CSS 셀렉터가 기록됩니다.

차트에 빨간 손그림 원을 그리고 플로팅 에디터에 노트를 적는 모습. 캡션: 모든 마크는 해당 React 컴포넌트와 파일을 안다
3MEASURE font 14px · pad 18 20 · gap ←18 →18

감이 아니라 실제 픽셀로.

마우스를 올리면 DevTools급 수치가 뜹니다. 패딩과 마진, 옆 요소까지의 실측 간격 — 전부 실제로 렌더링된 픽셀 값입니다.

덕분에 DevTools를 열지 않고도 “여기 간격 24px인데 8로 줄여줘”라고 적을 수 있습니다.

스탯 카드에 마우스를 올리면 컴포넌트 라벨, 패딩 링, 옆 카드까지 실측한 18픽셀 간격이 표시되고 font 14px, pad 18 20, gap 18 칩이 보인다
4BRIEF markdown · plain text · JSON · Claude in Chrome · MCP

클릭 한 번. 어떤 에이전트든 그대로 실행할 수 있는 작업 지시서 하나.

Copy for AI는 열려 있는 모든 마크를 — 요소, 소스, 스타일, 지시까지 — 붙여넣기 한 번 분량으로 묶습니다. Claude in Chrome을 거쳐 Claude Code로 넘기는 핸드오프 프롬프트까지, 포맷은 다섯 가지입니다.

스크린샷마다 해당 마크의 #id 배지가 찍혀 나갑니다 — 이미지와 지시가 서로 어긋날 일이 없습니다.

루프

핀은 내가, 수정은 에이전트가, 완료 체크는 저절로.

✓LIVE npx -y notepix-mcp setup · 플러그 아이콘 → 초록

복붙마저 생략 — 에이전트가 마크를 직접 읽어 갑니다.

명령어 한 줄이면 컴퓨터의 모든 코딩 에이전트에 로컬 Notepix 서버가 등록됩니다. 에이전트가 브라우저에서 마크를 바로 집어 가고, 하나 고칠 때마다 카드가 눈앞에서 DONE으로 넘어갑니다.

“마크 남길 때마다 바로 고쳐줘”라고 말해 두고, diff가 쌓이는 동안 앱 여기저기를 계속 클릭하세요. 이 모든 통신은 127.0.0.1 안에서 끝납니다.

초록 플러그 아이콘이 켜진 Notepix 패널. 1번 마크가 DONE으로 바뀌고 텍스트에 취소선이 그어져 있다 — 연결된 AI 에이전트가 MCP로 실시간 완료 처리한 모습

디테일

이것도 전부 기본 제공.

키보드 우선

Alt+Shift+N이면 패널을 열지 않고도 노트가 바로 붙습니다. 패널 안에서는 N F D S로 모드를 전환합니다.

깔끔한 스크린샷 크롭

📷는 딱 그 컴포넌트만 잘라 찍습니다 — Notepix 자체 핀은 먼저 걷어낸 채로.

SPA 인식, 페이지별 저장

라우트마다 마크가 따로 저장되고, 패널은 클라이언트 사이드 라우팅을 그대로 따라옵니다.

내보내기 / 가져오기

JSON으로 내보내고 JSON으로 불러옵니다 — 동료의 마크를 합치거나 다른 컴퓨터로 옮길 때 그대로 쓰세요.

기본은 깨끗한 페이지

핀은 마크하는 동안에만 보입니다. 패널을 숨기면 앱은 바로 시연해도 될 만큼 깨끗해집니다.

알아서 짝을 찾는 이미지

모든 스크린샷에 해당 마크의 #id가 찍힙니다 — 에이전트는 붙여넣은 순서가 아니라 배지로 이미지와 지시를 매칭합니다.

한 번 쓰고 끝이 아닌, 루프

마크를 ✓ 완료로 체크하면 참고용으로 남고, 다음 복사부터는 빠집니다. 삭제는 전부 Undo로 되돌릴 수 있습니다.

방해되지 않게

Ghost 모드를 켜면 마우스를 올리기 전까지 패널이 은은하게 흐려집니다. 아무 데나 끌어다 놓고, 아무 가장자리나 잡아 크기를 조절하세요.

도움말은 ? 하나로

?를 누르면 30초 가이드가 다시 열립니다. 단축키는 chrome://extensions/shortcuts에서 바꾸면 됩니다.

설계부터 프라이빗

앱은 절대 내 컴퓨터를 떠나지 않습니다.

서버 없음, 계정 없음

백엔드 자체가 없습니다. 노트·스크린샷·소스 경로는 내 컴퓨터의 Chrome 로컬 저장소에만 있습니다 — 다른 어디에도 없습니다.

추적 없음

사용 분석도, 텔레메트리도, 크래시 리포트도 없습니다. 무엇을 마크하는지는 나만 압니다.

네트워크 요청은 단 한 종류

라이선스 키를 입력하기 전까지는 요청 0건 — 그 후에도 Gumroad 키 검증 딱 한 종류뿐. 페이지나 노트는 절대 보내지 않습니다.

가격

7일 무료. 그 후 $6.43. 단 한 번.

$6.43 일회성 · 평생 소장

Chrome Web Store 심사 중 — 등록이 완료되면 설치 버튼이 활성화됩니다.

Gumroad에서 결제 · 라이선스 키는 이메일로 · 패널에 입력하면 잠금 해제

  • 7일 무료 체험, 모든 기능 그대로 — 계정도, 카드 등록도, 가입 절차도 없습니다.
  • 한 번만 결제하면 평생 사용 — 구독도 없고, 인원수만큼 내는 요금도 없습니다.
  • 노트는 절대 잠기지 않음 — 기존 마크의 보기·복사·내보내기는 체험이 끝나도, 결제하지 않아도 그대로 동작합니다.
  • 컴퓨터를 바꿔도 그대로 — 라이선스 키 하나면 새 컴퓨터에서도 바로 잠금 해제됩니다.

자주 묻는 질문

궁금한 점, 미리 답해 뒀습니다.

React가 꼭 필요한가요?

아니요 — Notepix는 어떤 페이지든 마크할 수 있습니다. React dev 빌드(Vite, Next.js, CRA; React 18·19)에서는 마크마다 해당 요소의 컴포넌트 이름과 소스 파일:라인까지 함께 기록됩니다. 프로덕션 빌드나 React가 아닌 페이지에서는 대신 정밀한 CSS 셀렉터를 기록합니다. Vue와 Svelte 소스 추적은 로드맵에 올라 있습니다.

어떤 AI 에이전트와 함께 쓸 수 있나요?

붙여넣을 수 있는 곳이면 어디든 됩니다: Claude Code, Cursor, GitHub Copilot, Windsurf, Codex, Aider, 그냥 채팅창까지. 작업 지시서는 클립보드에 담기는 일반 텍스트라 계정도, 별도 설정도 필요 없습니다. 붙여넣기 자체를 건너뛰는 방법도 두 가지입니다. Claude in Chrome으로 Claude Code를 연결하거나(핸드오프 포맷을 고르면 페이지에서 마크를 직접 읽어 갑니다), 옵션인 Notepix MCP 서버를 추가하세요 — 명령어 한 줄, npx -y notepix-mcp setup이면 컴퓨터의 모든 코딩 에이전트에 등록되고, 에이전트가 마크와 스크린샷을 직접 가져가 고치는 대로 하나씩 완료 처리합니다.

고칠 요소를 AI 에이전트에게 어떻게 알려주나요?

클릭하면 됩니다. Notepix가 요소에 번호 노트를 꽂고, 해당 React 컴포넌트와 소스 파일:라인, 계산된 스타일, 깔끔한 스크린샷까지 함께 기록합니다. Copy for AI를 누르면 전부 하나의 작업 지시서가 되어 Claude Code, Cursor, Copilot에 붙여넣을 수 있고, MCP로 에이전트가 마크를 직접 읽게 할 수도 있습니다.

Notepix는 UI 주석 도구인가요, 시각적 피드백 도구인가요?

둘 다입니다 — 단, AI 코딩 루프에 맞춰 만들어졌습니다. 디자인 리뷰나 버그 리포트 도구처럼 쓰면 됩니다. localhost를 포함해 어떤 웹페이지에나 메모지 붙이듯 노트·프레임·스케치를 남기세요. 차이점은 하나, 모든 주석에는 AI 코딩 에이전트가 수정을 실제로 반영하는 데 필요한 코드 컨텍스트(컴포넌트, 파일, 셀렉터, 스타일)가 함께 담깁니다.

Lovable, Replit, v0, Bolt 프리뷰에서도 되나요?

네 — 클라우드 프리뷰를 포함해 http(s) 페이지라면 어디서든 Notepix 툴바 아이콘을 누르고 바로 마크하면 됩니다. localhost 개발 서버에서는 새로고침할 때마다 Notepix가 자동으로 로드됩니다. 프리뷰 도메인 원클릭 자동 로드는 다음 업데이트로 준비 중입니다.

노트는 어디에 저장되나요?

Chrome의 로컬 확장 프로그램 저장소에 페이지별·SPA 라우트별로 저장됩니다. localhost 개발 서버에서는 Notepix가 자동으로 로드되니 새로고침해도 노트가 그대로 남아 있습니다. 어떤 페이지든 마크를 JSON 파일로 내보내 어디서든 다시 가져올 수 있습니다.

Notepix는 네트워크로 무엇을 보내나요?

라이선스 키를 입력하기 전까지는 아무것도 컴퓨터 밖으로 나가지 않습니다. 그 후에도 인터넷 요청은 딱 한 종류입니다: 활성화할 때와 최대 주 1회, Gumroad 라이선스 API로 키를 확인하는 요청. 여기에는 키와 제품 ID만 담기고 페이지 내용·노트·스크린샷은 절대 들어가지 않습니다. 옵션인 MCP 연결을 켜도 그 통신은 127.0.0.1, 즉 내 컴퓨터 안에서만 오가고 다른 어디로도 가지 않습니다. 전체 정책은 개인정보 처리방침 페이지에 있습니다.

체험 기간이 끝나면 어떻게 되나요?

새 마크를 만들려면 일회성 $6.43 잠금 해제가 필요합니다. 이미 만들어 둔 마크는 언제까지든 보고, 복사하고, 내보내고, 지울 수 있습니다 — 내 노트는 내 데이터니까요.

키보드 단축키가 안 먹혀요?

Alt+Shift는 특히 Windows에서 입력 언어 전환 단축키와 겹칠 때가 있습니다. chrome://extensions/shortcuts를 열어 “Toggle the Notepix panel”을 원하는 키로 다시 지정하세요 — 어떤 경우든 툴바 아이콘과 우클릭 메뉴는 항상 동작합니다.

Chrome 전용인가요?

지금은 Chrome 116+와 Chromium 기반 Edge(테스트 완료)에서 동작합니다. Edge Add-ons 등록과 다른 브라우저 지원은 로드맵에 있습니다.