::highlight 가상 요소의 등장! CSS Custom Highlight API로 텍스트 강조를 혁신하다

기존에 웹에서 특정 텍스트를 강조(하이라이트)하려면, 해당 텍스트를 <span>이나 <em> 태그로 감싸고 클래스를 부여한 뒤 CSS를 적용해야 했습니다. 이는 DOM 구조를 복잡하게 만들고 성능 저하의 원인이 될 수 있었습니다.

CSS Custom Highlight API는 DOM을 조작하지 않고 오직 Javascript와 Css만으로 텍스트 범위에 스타일을 적용하는 새로운 표준을 제시합니다.

 

 

1. 왜 Custom Highlight API를 사용해야 할까?

장점	설명
DOM 독립성 & 성능	텍스트 강조를 위해 HTML 태그를 삽입할 필요가 없습니다. DOM 조작을 최소화하여 렌더링 성능이 향상되고 페이지 로딩 속도가 빨라집니다.
복잡한 범위 처리	여러 개의 텍스트 범위나, DOM 노드를 가로지르는 범위를 하나의 하이라이트로 쉽게 그룹화하고 관리할 수 있습니다. (예: 문단 경계를 넘는 검색 결과 강조)
접근성 (Accessibility)	사용자 선택(::selection)과 마찬가지로 브라우저 기본 렌더링 레이어 위에 적용되므로, 스크린 리더의 방해 없이 시각적인 강조를 제공합니다.
쉬운 스타일링	전용 가상 요소인 ::highlight()를 사용하여 CSS로 간편하게 스타일을 정의할 수 있습니다.

 

2. Custom Highlight API의 기본 구성 요소

이 API는 주로 세 가지 핵심 요소로 작동합니다.

1. Range 객체 (JavaScript):
   • 역할: 하이라이트할 텍스트의 시작점과 끝점을 정의합니다. (DOM 노드와 오프셋을 지정)
2. Highlight 객체 (JavaScript):
   • 역할: 하나 이상의 Range 객체를 담는 컬렉션입니다. 이 객체가 하나의 논리적인 하이라이트 그룹을 대표합니다.
3. document.body.highlights (JavaScript Map):
   • 역할: 브라우저에 하이라이트를 등록하는 전역 맵입니다. 여기에 Highlight 객체를 이름(키)과 함께 등록해야 비로소 렌더링됩니다.
4. ::highlight(custom-name) (CSS):
   • 역할: document.body.highlights 맵에 등록한 이름을 참조하여 해당 범위에 실제 스타일을 적용합니다.

 

3. 실전 활용 예제: 검색 결과 강조

실제 사용자가 입력한 검색어를 페이지 전체에서 찾아 강조하는 코드를 예시로 보여줍니다.

 

const SEARCH_HIGHLIGHT_NAME = 'search-match';
const searchTerm = 'API'; // 검색어라고 가정

/**
 * 텍스트 노드에서 검색어를 찾아 Range 객체 배열을 반환합니다.
 */
function findMatches(term) {
  const matches = [];
  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
  let node;

  while (node = walker.nextNode()) {
    let index = node.textContent.indexOf(term);
    while (index !== -1) {
      const range = new Range();
      range.setStart(node, index);
      range.setEnd(node, index + term.length);
      matches.push(range);
      index = node.textContent.indexOf(term, index + term.length);
    }
  }
  return matches;
}

// 1. 기존 하이라이트 정리
document.body.highlights.get(SEARCH_HIGHLIGHT_NAME)?.clear();

// 2. 새로운 범위(Range) 찾기
const ranges = findMatches(searchTerm);

// 3. Highlight 객체 생성 및 등록 (API 지원 확인 필요)
if (window.CSS.highlights) {
  const highlight = new Highlight(...ranges);
  document.body.highlights.set(SEARCH_HIGHLIGHT_NAME, highlight);
}

/* JavaScript에서 등록한 'search-match' 이름을 사용 */
::highlight(search-match) {
  background-color: yellow;
  color: black;
  font-weight: bold;
}

 

4. 웹사이트 활용 방안

• 통합 검색 결과 강조: 사이트 전체 검색 엔진의 결과를 DOM 조작 없이 빠르게 하이라이트.
• 데이터 유효성 검사 경고: 관리자 페이지에서 잘못된 형식의 데이터(예: 이메일, 전화번호)를 포함한 텍스트를 자동으로 빨간색으로 강조하여 수정 필요를 알림.
• 접근성 기능: 사용자가 '핵심 용어 보기' 버튼을 클릭하면, 복잡한 본문 내의 핵심 단어(예: 학술 용어)를 일괄적으로 강조해주는 기능 구현.

 

바로가기 링크