Web Selection API와 Angular Directive 기반의 고정밀 텍스트 선택 팝업 구현

Text Selection with Popup (Medium-style) — Angular

Mahendranath Reddy2026년 6월 7일31분intermediate

AI 요약

Context

사용자가 특정 텍스트를 선택했을 때 Medium 스타일의 컨텍스트 팝업을 제공하는 기능 요구사항 분석. 단순한 텍스트 추출을 넘어 선택 영역의 정확한 픽셀 좌표 계산과 특정 DOM 요소 내로의 범위 제한이라는 기술적 제약 해결이 필요함.

Observer 패턴 기반의 SelectionService를 구축하여 텍스트 선택 상태를 BehaviorSubject로 관리하는 Pub-Sub 구조 설계
Attribute Directive 패턴을 적용하여 비즈니스 로직과 UI 컴포넌트를 분리하고, 특정 엘리먼트에만 선택 감지 기능을 부여하는 재사용성 확보
window.getSelection()과 Range.getBoundingClientRect()를 조합하여 뷰포트 기준의 정확한 x, y 좌표를 산출하는 좌표 계산 로직 구현
Strategy 패턴을 통해 팝업의 CSS Position(fixed vs absolute)에 따라 서로 다른 좌표 계산식을 적용하는 유연한 포지셔닝 전략 채택
element.contains() 메서드를 활용해 선택된 Range의 start/end Container가 타겟 요소 내에 존재하는지 검증하는 범위 제한 필터링 적용
mouseup 이벤트 발생 후 setTimeout(fn, 0)을 통해 Selection 객체 업데이트 타이밍 문제를 해결하는 이벤트 처리 최적화

실천 포인트

1. window.getSelection() 호출 시 mouseup 이벤트 직후의 타이밍 이슈를 고려하여 비동기 처리 여부 검토

2. 팝업 좌표 계산 시 window.scrollX/Y 값을 가산하여 페이지 스크롤 상태에서도 정확한 위치에 렌더링되는지 확인

3. Range.getBoundingClientRect()를 통해 얻은 DOMRect 값을 기반으로 팝업의 중앙 정렬 및 상단 배치를 위한 수학적 오프셋 적용

4. SelectionService와 같은 공유 상태 관리자를 통해 팝업 UI 외에도 분석 서비스나 하이라이트 저장 서비스로의 확장성 확보

태그