SpotNote – UI 피드백 & 동기 스크롤

확장 프로그램 개발자 도구10 사용자

SpotNote – UI 피드백 & 동기 스크롤의 항목 미디어 1(스크린샷)

SpotNote – UI 피드백 & 동기 스크롤의 항목 미디어 2(스크린샷)

SpotNote – UI 피드백 & 동기 스크롤의 항목 미디어 3(스크린샷)

개요

웹 요소에 UI 피드백을 남겨 셀렉터 포함 마크다운으로 복사하고, Chrome 분할 화면 스크롤을 동기화하세요.

눈에 보이는 UI 피드백을 바로 구현 가능한 맥락으로 바꾸고, 두 페이지를 비교할 때는 스크롤 위치까지 함께 맞춰주세요. SpotNote는 개발자·디자이너·기획자를 위해 두 가지 작업을 하나의 가벼운 확장 프로그램으로 제공합니다. • UI 피드백 — 바꿀 웹 요소를 직접 클릭하고 수정사항을 적은 뒤, 셀렉터가 포함된 마크다운을 AI 코딩 에이전트에 전달합니다. • 분할 화면 동기 스크롤 — Chrome 분할 화면의 두 페이지를 연결해 전체 길이 대비 진행률에 맞춰 함께 스크롤합니다. UI 피드백 사용법 1. 툴바 메뉴에서 UI 피드백을 선택하거나 Cmd/Ctrl+Shift+E를 누릅니다. 2. 요소에 마우스를 올려 대상을 확인하고, 클릭해 수정사항을 입력합니다. 번호 마커가 각 대상을 표시합니다. 3. 저장된 대상을 다시 찾거나, 노트를 바로 수정하거나, 패널을 닫지 않고 일반 브라우징 모드로 전환할 수 있습니다. 4. 복사를 눌러 AI 코딩 에이전트에 붙여넣으세요. 전달된 노트는 자동으로 정리되며 필요하면 되돌리기로 복원할 수 있습니다. 에이전트가 받는 내용 각 노트에는 CSS 셀렉터, 태그, 표시 텍스트, 페이지 URL, 필요한 경우 iframe 경로가 포함됩니다. ## 1. form.checkout > button[type="submit"] - Element: <button> "주문하기" - Feedback: 위 입력창과 같은 폭으로 맞춰주세요 최신 기능 • 하나의 메뉴에서 UI 피드백 / 분할 화면 동기 스크롤 선택 • Chrome 분할 화면 두 페이지의 양방향·진행률 기반 스크롤 동기화 • 대상 다시 찾기, 노트 즉시 수정, 번호 마커, 모두 지우기, 되돌리기 • 페이지별 로컬 저장으로 새로고침·재방문 후에도 노트 유지 • SPA 경로, query/hash 상태, 열린 상세 다이얼로그별 노트 분리 • 접근 가능한 동일 출처·중첩 iframe 내부의 세부 요소 선택 • 단축키: Cmd/Ctrl+Shift+E 토글, Shift+Enter 또는 Cmd/Ctrl+Enter로 추가 • 패널, 복사, 정리, 복원의 자연스러운 전환 효과 • 계정과 초기 설정 불필요 동기 스크롤과 권한 동기 스크롤은 Chrome 140 이상에서 사용할 수 있습니다. 페이지 접근 권한은 동기 스크롤을 선택했을 때만 요청됩니다. UI 피드백은 기존처럼 현재 탭에 대한 임시 권한만 사용합니다. 개인정보 노트는 chrome.storage.local에만 저장되며 복사를 누를 때만 클립보드로 나갑니다. 동기 스크롤은 화면에 열린 두 페이지를 로컬에서만 연결하며 페이지 데이터를 서버로 전송하지 않습니다. SpotNote는 AI를 실행하지 않고 어떤 서버로도 전송하지 않습니다. Claude Code, Cursor, Codex 등 마크다운을 붙여넣을 수 있는 모든 도구와 함께 쓸 수 있습니다. Anthropic, Cursor, OpenAI, Google과 제휴 관계가 없습니다.

5점 만점에 0점
평점 없음
검색결과 및 리뷰에 관해 자세히 알아보기

세부정보

버전
0.2.1
업데이트됨
2026년 8월 8일
우려사항 신고
크기
36.72KiB
언어
언어 2개
개발자
이메일
knway09@gmail.com
비판매자
판매자로 식별되지 않은 개발자입니다. 유럽 연합에 거주하는 소비자의 경우, 이 개발자와 체결한 계약에 대해서는 소비자 권리가 적용되지 않을 수 있음을 유의해야 합니다.

개인정보 보호

확장 프로그램을 관리하고 조직에서 확장 프로그램이 사용되는 방식을 알아보세요.

개발자가 데이터를 수집하거나 사용하지 않겠다고 명시했습니다. 자세히 알아보려면 개발자의 privacy policy 문서를 참고하세요.

개발자가 사용자 데이터에 관해 다음과 같이 선언했습니다

승인된 사용 사례를 제외하고 서드 파티에 판매하지 않음
항목의 핵심 기능과 관련 없는 목적으로 사용하거나 전송하지 않음
신용도 판단 또는 대출 목적으로 사용하거나 전송하지 않음

관련 항목

Modify — Visual CSS Editor for AI Coding Agents

5.0

Edit live webpages with a visual CSS editor, then copy exact changes as a structured prompt for terminal AI coding agents.

분할 화면

5.0

Chrome에서 분할 화면을 사용하여 두 개의 탭을 나란히 배치하고 멀티태스킹을 향상하세요. 듀얼 모니터에 적합하며, 간단한 분할 탭 설정입니다.

CloneWebsite - Pixel Perfect Page Cloner

0.0

Clone webpages pixel-perfect. Extract HTML, CSS, images, fonts & JS to ZIP. Convert clones to React/Vue with Magic Paste.

Copy Text Easily

3.9

Extension that lets you view and reuse clipboard history with drag and drop, and copy text with one click

FullPage Screenshot

5.0

Capture full-page screenshots with correct handling of sticky headers and infinite-scroll pages.

Zero Bookmark Manager

4.3

A sleek and intuitive Chrome extension to manage bookmarks.

Browser Bridge

0.0

Control Chrome for Browser Bridge: drive tabs and inspect pages for coding agents.

전체 페이지 스크린샷 – Full Page Screen Capture

4.3

Use 전체 페이지 스크린샷・웹페이지 전체 캡처 – Chrome에서 긴 웹페이지를 위에서 아래까지 저장하세요.

Page to Markdown

5.0

Copies the visible page content area as structured Markdown, following Chrome's Annotated Page Content design.

Annotator - for Chrome

5.0

Capture page screenshot, annotate with draws/highlights/arrows/text, select & move elements, and send to IDE.

Syncroll: Split View Sync Scroller

0.0

Sync scroll across Chrome Split View, side-by-side windows, and canvas apps like Figma. Works on any two tabs in any window.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.