레이아웃 변경에도 깨지지 않는 DOM 앵커링 기반 피드백 위젯 구현기

Context

SaaS 기반 피드백 도구의 높은 월 구독료와 데이터 외부 저장 문제. 스크린샷 기반 앵커링 방식의 레이아웃 변경 시 좌표 불일치 현상. 개발자와 클라이언트 간의 비효율적인 커뮤니케이션 루프 발생.

Technical Solution

• CSS Selector, XPath, Text Snippet의 3중 앵커링 시스템을 통한 요소 추적 정확도 향상
• 앵커링 실패 시 Fuzzy Matching 기반의 순차적 폴백(Fallback) 전략 적용
• 픽셀 좌표 대신 요소 바운딩 박스 기준의 백분율(Percentage) 좌표 저장 방식 채택
• Shadow DOM을 활용한 위젯 스타일 격리 및 메인 문서 레이어 분리 설계
• SitepingStore 인터페이스 기반의 어댑터 패턴을 적용하여 Prisma, Memory, LocalStorage 등 저장소 교체 구조 확보
• Tree-shaking이 가능한 모듈형 패키지 구조 설계로 클라이언트 번들 크기 최소화

Impact

• 위젯 번들 크기 약 23KB(gzipped) 달성
• 780개 이상의 Unit Test 및 29개의 Playwright E2E Test로 안정성 검증

Key Takeaway

정적인 좌표값이 아닌 DOM 구조와 상대적 비율을 결합한 하이브리드 식별 전략을 통해 동적인 웹 환경에서도 데이터의 지속성을 유지하는 설계 원칙.