앵커링 동작 방식

클라이언트가 사각형을 그릴 때, InstaFix는 화면 좌표를 저장하지 않습니다 — 좌표는 레이아웃이 조금만 바뀌어도 깨지기 때문입니다. 대신 여러 단계의 폴백을 갖춘 방식으로 주석을 그 아래에 있는 DOM 요소에 고정합니다:

1. 최소한의 CSS 선택자 — 캡처 시점에 계산됩니다.
2. 같은 요소를 가리키는 XPath — 첫 번째 폴백입니다.
3. 텍스트 컨텍스트 — 요소의 텍스트 일부와 그 주변 텍스트로, 두 선택자가 모두 무효화되었을 때 최후의 수단으로 사용됩니다.

사각형 자체는 뷰포트가 아니라 앵커 요소의 바운딩 박스에 대한 백분율로 저장됩니다. 요소가 이동하거나, 커지거나, 다시 배치되어도 주석은 함께 움직입니다.

앵커와 함께 각 주석은 캡처 컨텍스트(뷰포트 크기, 스크롤 위치, 기기 픽셀 비율)를 기록하여, 나중에 위치를 정확하게 해석할 수 있도록 합니다.

견디는 것과 견디지 못하는 것

잘 견디는 경우: 요소 주변의 콘텐츠 수정, 레이아웃 변화, 반응형 리플로우, 다른 요소의 추가/제거, 요소를 알아볼 수 있는 상태로 유지하는 대부분의 리팩터링.

저하되는 경우: 요소 자체가 삭제된 경우(고정할 대상이 사라짐), 태그·텍스트·위치를 한꺼번에 바꾸는 대규모 재작성, 그리고 Shadow DOM 내부의 콘텐츠 — 앵커링 엔진이 현재는 Shadow DOM을 통과하지 못합니다(#177에서 추적 중).

이후 방문 시 앵커를 해석할 수 없으면, 마커는 엉뚱한 곳에 표시되는 대신 해당 페이지 뷰에서는 숨겨집니다 — 마커가 없는 것은 헷갈릴 뿐이지만, 거짓 위치에 표시되는 것은 그보다 더 나쁩니다. 피드백 자체(메시지, 스크린샷, 메타데이터)는 절대 유실되지 않으며, 패널과 대시보드에서 항상 확인할 수 있습니다.

앵커가 잘 동작하도록 돕는 방법

• 주요 컨테이너에 안정적인 id 속성을 부여하면 CSS 선택자가 짧고 오래 유지됩니다.
• 토스트나 스켈레톤처럼 일시적인 UI에는 주석을 달지 마세요 — 설계상 다음 방문 때는 해당 요소가 이미 사라져 있습니다.
• 동적 라우트(/products/42)에서는 urlPattern과 함께 getPageScope를 사용하면, 피드백이 개별 URL이 아니라 템플릿 단위로 그룹화됩니다.