들어가며: CSS가 진짜 빨라졌어요

예전에는 "CSS 신기능 = 5년 뒤에나 쓸 수 있는 것"이라는 공식이 통했죠. 그런데 요즘은 다릅니다. Chrome이 기능을 먼저 던지고, Safari와 Firefox가 따라오는 사이클이 1~2년으로 확 줄었어요. 문제는 뭐가 지금 쓸 수 있는 건지, 뭐가 실험 단계인지 헷갈린다는 거예요.

이 글에서는 최근 몇 주간 CSS 커뮤니티에서 가장 화제가 된 기능들을 **"지금 당장 쓸 수 있는 것"**과 **"프로그레시브 인핸스먼트로 미리 준비할 것"**으로 나눠서 정리했어요. 실무에서 바로 판단할 수 있게 도와드릴게요. 😊

이 글은 CSS-Tricks의 최신 동향 정리(근거자료)를 바탕으로, 국내 프론트엔드 실무 환경에 맞게 재구성한 내용입니다.

Developer reviewing modern CSS features like interest invokers and flex-wrap balance on a code editor Programming Illustration

지금 당장 쓸 수 있는 기능 3가지

1. flex-wrap: balance — 플렉스 아이템 균형 맞추기

text-wrap: balance가 텍스트 줄바꿈을 예쁘게 만들어줬다면, 이제는 플렉스 아이템도 균형 있게 배치할 수 있어요. Chrome 152부터 지원됩니다.

/* 카드 리스트가 한 줄에 3개, 2개, 1개로 어정쩡하게 남는 문제 해결 */
.card-container {
  display: flex;
  flex-wrap: balance; /* 각 행의 아이템 개수를 균등하게 분배 */
  gap: 1rem;
}

.card {
  flex: 1 1 200px;
}

실무 포인트: 갤러리, 카드 리스트, 태그 목록처럼 "마지막 줄에 하나만 덩그러니 남는" 상황에서 특히 유용해요. 기존에는 JS로 계산하거나 그냥 포기했는데, 이제 CSS 한 줄이면 끝납니다.

2. interest invokers — 툴팁 지연/즉시 표시

툴팁 UX의 정석은 **"호버 시 약간 지연 → 표시 후 즉시 반응"**이에요. 실수로 스쳐도 안 뜨고, 한 번 뜨면 바로 사라져야 하죠. 기존엔 JS로 타이머를 관리해야 했는데, 이제 CSS만으로 됩니다.

/* 관심(interest) 지연 시작/종료를 CSS로 제어 */
.tooltip-trigger {
  interest-delay-start: 300ms;  /* 호버 후 300ms 뒤 표시 */
  interest-delay-end: 0ms;      /* 벗어나면 즉시 사라짐 */
}

/* 툴팁 본체는 popover로 */
[popover].tooltip {
  position: absolute;
  /* ...스타일링 */
}

주의사항: 현재 Chrome만 지원해요. 다만 popover + interest-delay-* 조합은 미지원 브라우저에서 그냥 즉시 표시로 폴백되기 때문에 프로그레시브 인핸스먼트 관점에서 안전하게 도입할 수 있습니다.

3. Custom Highlight API + MicroLighter — 경량 신택스 하이라이터

DOM을 건드리지 않고 텍스트 범위에 스타일을 입히는 ::highlight() API를 활용해서, Dave Rupert가 MicroLighter라는 초경량 신택스 하이라이터를 만들었어요. 블로그 코드 블록에 Prism.js나 highlight.js 대신 쓸 수 있는 대안이에요.

/* 하이라이트 스타일 정의 */
::highlight(keyword) {
  color: #c678dd;
  font-weight: 600;
}

::highlight(string) {
  color: #98c379;
}

// Range API로 텍스트 범위를 잡고 하이라이트 등록
const range = new Range();
range.setStart(textNode, 0);
range.setEnd(textNode, 10);

CSS.highlights.set('keyword', new Highlight(range));

실무 포인트: 라이브러리 번들 크기를 줄이고 싶은 블로그나 문서 사이트에서 특히 매력적이에요. 다만 토크나이저는 직접 만들어야 하니, 언어 지원 범위가 넓어야 한다면 기존 라이브러리가 여전히 낫습니다.

Laptop screen showing CSS grid variables and class prefix selector syntax examples for web developers IT Technology Image

기다려야 하는 기능들 (실험 단계)

class prefix selector: [class^=...]의 진화형

Bramus가 소개한 클래스 접두사 선택자는 아직 어디서도 지원되지 않지만, 문법이 너무 깔끔해서 곧 표준화될 것으로 보여요.

/* 신문법 (미지원) */
.something-* {
  /* class="something-xxx" 매칭 */
}

/* 기존 방식: 속성 선택자 3종 세트 */
[class^="something-"] { /* something-xxx */ }
[class*=" something-"] { /* xxx something-xxx */ }
[class*="something-"] { /* my-something-xxx (오탐 위험) */ }

기존 속성 선택자는 "my-something-xxx"처럼 원치 않는 매칭이 발생하거나, 공백 처리를 위해 여러 줄을 써야 했어요. 신문법은 이걸 한 줄로 해결합니다. 성능도 더 좋다고 하네요.

@supports named-feature()

@supports가 "특정 프로퍼티 지원 여부"만 물어볼 수 있었다면, 이제는 "앵커 포지셔닝 시 transform을 존중하는가?" 같은 아주 세부적인 동작까지 질의할 수 있게 됩니다.

@supports named-feature(anchor-positioning-respects-transform) {
  /* 이 브라우저는 해당 동작을 올바르게 처리함 */
}

Chrome은 이미 지원하고, Safari/Firefox는 아직입니다.

Dark mode: 2-state vs 3-state 논쟁

Lea Verou는 2-state(light/dark), Bramus는 3-state(light/dark/auto)를 주장해요. 실무적으로는 "auto-until-overridden" 2-state가 가장 합리적입니다.

접근장점단점
2-state (light/dark)단순, 사용자 의도 명확OS 설정 존중 못 함
3-state (light/dark/auto)OS 설정과 사용자 선택 분리UI 복잡, 상태 관리 부담
2-state + auto 기본값구현 단순 + OS 존중"auto로 되돌리기" UX 애매

국내 서비스 관점: 토스, 당근 같은 앱들은 이미 auto-until-overridden 패턴을 쓰고 있어요. 사용자에게 "시스템 설정 따르기" 옵션을 굳이 노출하지 않는 게 이탈률 측면에서 유리합니다.

이 기술의 한계와 주의사항

  • flex-wrap: balance: 컬럼 폭이 균등할 때만 정확히 동작해요. flex-basis가 제각각이면 기대한 결과가 안 나올 수 있습니다.
  • interest invokers: interest-delay-start가 너무 길면(500ms+) 사용자가 "안 뜬다"고 느껴요. 200~300ms가 스윗스팟입니다.
  • Custom Highlight API: ::highlight()는 상속되지 않아요. 부모 요소에 정의해도 자식 텍스트에 적용 안 되니, 각 텍스트 노드 단위로 등록해야 합니다.
  • class prefix selector: 아직 스펙 초안 단계라 문법이 바뀔 수 있어요. 프로덕션에 넣지 마세요.

Web designer comparing dark mode tri-state toggle and custom highlight API implementation on dual monitors Software Concept Art

마무리: 어떤 걸 먼저 도입할까?

우선순위를 정리하면 이렇게 됩니다.

  1. 오늘 바로 도입 가능: flex-wrap: balance (카드/갤러리 UI가 있다면 무조건), interest-delay-* (툴팁 UX 개선)
  2. 실험적으로 도입: Custom Highlight API (블로그, 문서 사이트)
  3. 지켜보기: class prefix selector, @supports named-feature()

CSS는 이제 "JS로 하던 걸 CSS로 되돌리는" 방향으로 진화하고 있어요. 이 흐름을 놓치면 번들 크기와 렌더링 성능에서 뒤처집니다.

다음 단계 학습 방향

  • popover API와 interest invokers를 조합한 선언형 UI 패턴을 익혀두세요.
  • @container + flex-wrap: balance 조합으로 반응형 카드 레이아웃을 JS 없이 구현해보세요.
  • 브라우저 지원 현황은 caniuse.com과 Baseline에서 주기적으로 체크하는 습관을 들이세요.

함께 보면 좋은 글

궁금한 점 있으면 댓글로 남겨주세요. 다음 편에서 더 깊게 다뤄볼게요! 🚀

본 콘텐츠는 신뢰할 수 있는 출처를 바탕으로 AI 도구를 활용하여 초안이 작성되었으며, 편집자의 검토를 거쳐 발행되었습니다. 전문가의 조언을 대체하지 않습니다.