CSS Custom Highlight API를 활용한 웹페이지 텍스트 범위 스타일링

CSS Custom Highlight API의 작동 방식

CSS Custom Highlight API는 웹페이지에서 텍스트 범위를 스타일링하기 위한 네 가지 핵심 단계로 구성됩니다.

1. Range 객체 생성: JavaScript를 사용하여 스타일링할 텍스트의 시작점과 끝점을 정의하는 Range 객체를 생성합니다. 이는 문서 내의 특정 노드와 오프셋을 지정하여 텍스트 범위를 설정하는 과정입니다.
   • new Range()를 사용하여 객체를 생성하고, setStart() 및 setEnd() 메서드로 범위를 정의합니다.
2. Highlight 객체 인스턴스화: 생성된 하나 이상의 Range 객체들을 모아 Highlight 객체를 만듭니다. 하나의 Highlight 객체는 여러 Range를 포함할 수 있으며, 이를 통해 여러 텍스트 조각에 동일한 스타일을 적용할 수 있습니다. 각 Highlight 객체는 고유한 스타일을 가질 수 있습니다.
   • new Highlight(range1, range2, ...)와 같이 Range 객체들을 인수로 전달하여 생성합니다.
3. HighlightRegistry 등록: CSS.highlights를 통해 접근 가능한 전역 HighlightRegistry에 Highlight 객체를 사용자 정의 식별자와 함께 등록합니다. 이 레지스트리는 Map과 유사한 구조로, 등록된 하이라이트를 이름으로 관리하며, 필요에 따라 하이라이트를 추가, 삭제 또는 전체 초기화할 수 있습니다.
   • CSS.highlights.set("custom-id", highlightObject) 형태로 등록합니다.
4. ::highlight() 가상 요소를 통한 스타일링: 마지막으로, CSS에서 ::highlight() 가상 요소를 사용하여 HighlightRegistry에 등록된 하이라이트의 사용자 정의 식별자에 스타일을 적용합니다. 이를 통해 background-color, color 등 다양한 CSS 속성을 사용하여 하이라이트의 시각적 표현을 제어할 수 있습니다.
   • ::highlight(custom-id) { /* styles */ }와 같이 CSS 규칙을 작성합니다.

예시: 검색 결과 하이라이팅

이 API는 웹페이지 내 검색 결과 하이라이팅과 같은 동적인 텍스트 강조 기능 구현에 매우 효과적입니다. 사용자 입력에 따라 문서 내에서 일치하는 텍스트를 찾아 Range 객체를 생성하고, 이들을 하나의 Highlight 객체로 묶어 HighlightRegistry에 등록합니다. 이후 CSS를 통해 해당 하이라이트에 스타일을 적용함으로써, DOM을 직접 조작하지 않고도 시각적으로 강조된 검색 결과를 사용자에게 제공할 수 있습니다. 이는 성능 이점과 더불어 코드의 유지보수성을 높이는 데 기여합니다.