CSS search-text, 브라우저 페이지 내 찾기 스타일링 완벽 가이드

들어가며: 왜 브라우저 검색 결과를 스타일링해야 할까?

개발자라면 누구나 Ctrl+F(Windows) 또는 ⌘F(Mac)로 페이지 내 검색을 자주 사용하실 겁니다. 기본 브라우저의 노란색 하이라이트는 익숙하지만, 사용자 경험(UX)을 고려한 서비스를 만든다면 이 스타일을 커스터마이징하고 싶을 때가 있습니다.

예를 들어:

• 문서 검색 기능이 핵심인 서비스(예: 기술 문서, 법률 문서 뷰어)
• 브랜드 컬러를 일관되게 유지하고 싶은 경우
• 현재 포커스된 검색 결과를 시각적으로 강조해야 할 때

CSS ::search-text 의사 요소(Pseudo-element)는 바로 이 지점에서 빛을 발합니다. 브라우저의 '페이지 내 찾기' 결과에 스타일을 적용할 수 있는 표준 API입니다. 아직 실험적 단계이지만, 최신 브라우저에서 대부분 지원되고 있어요.

이 글은 CSS-Tricks의 ::search-text 가이드를 기반으로, 실무에서 바로 써먹을 수 있는 팁과 주의사항을 덧붙였습니다.

기본 사용법: ::search-text 선언하기

사용법은 아주 간단합니다. 원하는 스타일을 ::search-text 블록 안에 선언하면 끝입니다.

/* 모든 검색된 텍스트에 적용 */
::search-text {
  background: oklch(87% 0.17 90); /* 연한 노랑 */
  color: black;
}

/* 현재 포커스된 검색 결과에만 적용 */
::search-text:current {
  background: oklch(62% 0.22 38); /* 선명한 빨강 */
  color: white;
}

특정 요소에만 적용하기

전역이 아니라 특정 영역(예: 문서 본문)에만 적용할 수도 있습니다.

/* 본문 영역 내 검색 결과만 스타일링 */
article::search-text {
  background: gold;
  color: black;
  text-decoration: underline;
  text-decoration-color: oklch(65% 0.18 240);
  text-decoration-thickness: 0.22em;
  text-underline-offset: 0.15em;
}

지원되는 CSS 속성

::search-text에서는 모든 CSS 속성을 사용할 수 없습니다. 아래 속성으로 제한됩니다:

• background-color
• color
• text-decoration 및 관련 하위 속성 (text-decoration-color, text-decoration-line, text-decoration-style, text-decoration-thickness, text-decoration-skip-ink, text-underline-offset)
• text-shadow
• text-underline-position
• 커스텀 속성 (CSS 변수)

:root {
  --brand-highlight: oklch(0.5458 0.1568 241.39);
}

::search-text {
  background-color: var(--brand-highlight);
  color: white;
}

꿀팁: text-decoration 위주로 스타일링하면 배경색을 건드리지 않아 사용자 혼란을 줄일 수 있습니다. 특히 접근성 관점에서 추천하는 방식이에요.

고급 활용: 상속 체인과 :current 조합

상속 체인 이해하기

::search-text는 모든 하위 요소로 스타일이 상속됩니다. 예를 들어 다음과 같은 HTML 구조가 있다고 가정해볼게요.

<article>
  <p>Lorem ipsum dolor sit amet.</p>
  <div>
    <p>Lorem appears again here.</p>
    <strong>Another lorem appears here.</strong>
  </div>
</article>

여기서 article::search-text에 배경색과 밑줄을 지정하고, p::search-text에 글자색을 오버라이드하면:

article::search-text {
  background: gold;
  color: black;
  text-decoration: underline;
}

p::search-text {
  color: orange;
}

strong::search-text {
  text-decoration: line-through;
}

• 첫 번째 <p>의 "Lorem" → gold 배경 + orange 글자 + underline
• <div> 내부 <p>의 "Lorem" → gold 배경 + orange 글자 + underline (상속)
• <strong>의 "Lorem" → gold 배경 + orange 글자 + line-through (오버라이드)

이처럼 개별 속성도 따로 상속되고 오버라이드되므로, 세밀한 제어가 가능합니다.

:current로 현재 포커스 강조하기

여러 개의 검색 결과가 있을 때, 현재 선택된(포커스된) 결과만 다르게 표시하고 싶다면 :current를 붙이면 됩니다.

::search-text:current {
  text-decoration-color: oklch(85% 0.22 38);
  text-decoration-thickness: 0.3em;
}

이렇게 하면 사용자가 검색 결과를 이동할 때마다 현재 위치가 시각적으로 두드러져 UX가 훨씬 좋아집니다.

주의사항: :past와 :future는 사용 불가

CSS 사양에는 :past와 :future라는 의사 클래스도 정의되어 있지만, 현재 ::search-text와 함께 사용하면 무효 처리됩니다. 공식 문서에 따르면:

":past와 :future 의사 클래스는 향후 유사한 용도로 예약되어 있습니다. ::search-text와의 조합이 지원되지 않는 경우 무효로 처리해야 합니다."

따라서 이 기능을 기대하고 개발하지 않는 것이 좋습니다.

접근성 및 실무 적용 시 주의사항

접근성 체크리스트

1. 명도 대비: WCAG 기준에 따라 텍스트와 배경 간 명도 대비를 최소 4.5:1로 유지하세요.
2. 과도한 변경 자제: 브라우저 기본 검색 스타일을 너무 많이 바꾸면 인지 장애가 있는 사용자에게 혼란을 줄 수 있습니다. 특히 배경색은 기본값을 유지하고 text-decoration만 변경하는 것을 추천합니다.
3. 테스트 필수: 다양한 브라우저에서 동작을 확인하세요. 아직 실험적 기능이므로 브라우저별 차이가 있을 수 있습니다.

한국 개발 생태계에서의 적용 맥락

국내에서는 대부분의 서비스가 자체 검색 UI를 구현하기보다 브라우저 기본 검색에 의존하는 경우가 많습니다. 하지만 기술 문서 플랫폼(예: Velog, Tistory 커스텀 스킨)이나 사내 위키 시스템을 운영한다면 ::search-text를 활용해 브랜드 아이덴티티를 유지하면서도 검색 UX를 개선할 수 있습니다.

예를 들어, 사내 개발 문서 포털에서:

• 검색 결과 배경색을 회사 브랜드 컬러(예: 네이버의 초록, 카카오의 노랑)로 설정
• 현재 포커스된 결과에만 밑줄 두께를 두껍게 표시

이런 세심한 디테일이 사용자 만족도를 높여줍니다.

다음 단계 학습 방향

• ::search-text와 유사한 ::selection(텍스트 선택 스타일링)도 함께 알아두면 좋습니다.
• CSS oklch() 색상 함수는 접근성과 색상 일관성 측면에서 기존 rgb()나 hsl()보다 강력합니다. oklch 색상 가이드를 참고해보세요.
• 브라우저 지원 현황은 Can I Use에서 실시간으로 확인 가능합니다.

함께 보면 좋은 글

• AI 네이티브 시대의 프라이버시 인프라: 메타가 LLM으로 데이터를 분류하는 7단계 패턴 →
• AWS 유럽 주권 클라우드, 크로스 파티션 장애 조치 설계의 모든 것 →