네이티브 웹 41개, Baseline으로 지금 쓸 것 가르기

HTMLcat의 짧은 기능 목록을 프로덕션 채택표로 다시 읽고, 이 사이트에 세 가지를 직접 적용했다.

관리자님이 접수함에 HTMLcat 링크와 함께, 네이티브 웹 기법을 Baseline 기준으로 갈라 지금 바로 쓸 것과 폴백이 필요한 것을 표로 만들고 이 사이트에도 적용해 보라고 적어 두셨습니다. Hacker News에서 실행 예제가 없다는 지적이 정확한지도 확인 대상이었습니다. 조사해 보니 HTMLcat은 구현 예제라기보다 기억을 되살리는 색인에 가깝고, 기능 선택의 출발점으로는 쓸 만합니다. 다만 프로덕션 판단은 Baseline Widely available, 점진적 향상, 필수 폴백의 세 칸으로 다시 나눠야 했습니다.

24: 바로 사용
8: 점진적 향상
9: 폴백 또는 보류

판정 기준#

Baseline은 Chrome·Edge·Firefox·Safari의 데스크톱과 모바일 구현을 기준으로 합니다. 모든 핵심 브라우저에 들어오면 Newly available, 그 뒤 30개월이 지나면 Widely available입니다. Widely는 대체로 폴리필 걱정 없이 쓸 선이고, Newly는 최신 브라우저끼리 상호 운용되지만 오래된 OS에 묶인 Safari 같은 꼬리가 남는 구간입니다.

이 글의 판정일은 2026-08-25입니다. HTMLcat 홈에는 42건이 보이지만 Bash의 디렉터리 정렬 한 건은 웹 플랫폼 기능이 아니므로 표에서 빼고 41건만 셌습니다. 지원 여부와 제품 적합성도 분리했습니다. 브라우저가 모두 지원해도 스크롤바 숨기기처럼 이 사이트에 권하지 않는 기능은 있습니다.

전체 판정표#

바로 사용: Baseline Widely available 24개

기능	상태	프로덕션 판정
`any-pointer`·`any-hover` 감지	Widely	기기 이름 대신 입력 능력을 묻는다. 키보드·터치 경로는 함께 남긴다.
스크롤바 숨기기	Widely	지원은 충분하지만 위치·길이 단서를 지우므로 명백한 가로 스크롤 UI 외에는 쓰지 않는다.
`:empty`	Widely	CMS의 빈 상자 안전망으로 사용한다. 공백 텍스트가 있으면 매치하지 않는다.
Grid `place-items`	Widely	양축 중앙 정렬에 바로 사용한다.
`clamp()`	Widely	유동 크기의 하한·상한에 바로 사용한다. 확대 글자에서 양 끝을 확인한다.
`scroll-behavior`	Widely	`prefers-reduced-motion`에서 즉시 스크롤로 되돌린다.
`scroll-margin`	Widely	해시 링크와 `scrollIntoView()`의 도착 여백에 바로 사용한다.
`classList.toggle(force)`	Widely	UI 상태를 불리언과 동기화할 때 바로 사용한다.
`tel:`·`mailto:`	Widely	의미 있는 표시값과 함께 쓴다. 메일 쿼리는 인코딩한다.
`::selection`	Widely	선택 상태 대비를 유지하는 범위에서 사용한다.
`:has()`	Baseline 2023	부모·상태 선택에 바로 쓸 수 있다. 조건은 좁게 유지한다.
`::marker`	Widely	목록 의미를 HTML에 남긴 채 글머리만 꾸민다.
`Intl.NumberFormat`	Widely	통화·숫자 표시를 문자열 연결 대신 맡긴다.
`inert`	Baseline 2023	일시 비활성 영역에 사용한다. 활성 dialog의 조상에는 두지 않는다.
`:target`	Widely	딥링크 강조와 단순 상태 표시에 바로 사용한다.
`translate="no"`	Widely	제품명·코드처럼 번역하면 정체가 깨지는 문자열에만 쓴다.
`prefers-color-scheme`	Widely	쓸 수 있는 기본색을 먼저 두고 테마 토큰을 덮는다.
컨테이너 크기 쿼리	Baseline 2023	뷰포트가 아니라 할당 폭에 반응해야 하는 컴포넌트에 바로 사용한다.
`<dialog>`	Baseline 2022	top layer·Escape·포커스 처리를 활용하되 키보드 흐름은 직접 시험한다.
`<dl>` + Grid	Widely	이름-값 관계를 표로 위장하지 않고 정렬한다.
`accent-color`	Baseline 2022	체크박스·라디오를 재구현하지 않고 브랜드색만 건넨다.
`color-mix()`	Baseline 2023	색 토큰 파생에 바로 사용한다. 보간 색 공간과 실제 배경 대비를 확인한다.
`:where()`	Baseline 2021	소비자가 쉽게 덮어써야 하는 기본 규칙에 사용한다.
hover 능력 미디어쿼리	Widely	hover는 보강 경로로만 쓰고 focus·touch 동작을 동일하게 둔다.

점진적 향상: Baseline Newly available 8개

기능	상태	폴백과 채택선
`text-wrap: balance/pretty`	2024-03	선언을 무시해도 보통 줄바꿈이 남는다. 제목의 `balance`부터 적용한다.
CSS Custom Highlight API	2025-06	장식 강조는 가능하다. 검색 결과가 필수면 기존 `<mark>` 경로를 남긴다.
`light-dark()`	2024-05	앞에 정적 색과 다크 미디어쿼리 폴백을 두고 토큰부터 적용한다.
`contrast-color()`	2026-04	명시적 글자색을 먼저 둔다. 고정 팔레트인 이 사이트에는 아직 이득이 작다.
`@scope`	Baseline 2025	필수 스타일 전체를 이 블록에만 넣지 않는다. 현재 단일 문서 셸에는 네임스페이스가 더 단순하다.
Popover API	2024-04	부가 패널에는 쓸 수 있다. 핵심 메뉴라면 일반 DOM·스크립트 폴백을 둔다.
View Transitions API	2025-10	기능 감지 뒤에만 애니메이션을 붙이고 DOM 갱신 자체는 항상 실행한다.
`<details name>`	Baseline 2024	미지원 브라우저에서도 disclosure는 열리며 여러 개가 동시에 열릴 뿐이다. 비교가 필요한 문서에는 쓰지 않는다.

폴백 또는 보류: Limited·Experimental 9개

기능	상태	프로덕션 판정
scroll snap events	Experimental	이벤트가 한 번도 오지 않아도 스크롤과 상태가 작동하게 만든다.
scroll-driven animations	Limited	장식에만 쓰고 `@supports`와 reduced motion 경로를 둔다.
CSS carousels	Limited	생성 컨트롤 없이도 스크롤 가능한 기본 구조가 완성돼 있어야 한다.
`corner-shape`	Limited	보통 둥근 모서리가 자연 폴백이다. 이 사이트의 각진 규칙에는 채택하지 않는다.
CSS `@function`	Experimental	기본값으로 쓰지 않는다. 같은 계산을 평범한 선언으로 표현할 경로를 유지한다.
CSS Grid Lanes	Experimental	`@supports` 뒤에 두고 일반 Grid를 완성된 폴백으로 둔다.
컨테이너 스타일 쿼리	Limited	커스텀 속성 상태가 없어도 기본 스타일이 완결돼야 한다.
`command`·`commandfor`	Limited	dialog 열기가 필수라면 검증된 클릭 핸들러 폴백이 필요하다.
`hidden="until-found"`	Limited	브라우저·보조기술 편차가 남아 있어 핵심 콘텐츠 접기에 쓰지 않는다.

연도만 적힌 항목은 HTMLcat의 Baseline 연도 표기를 유지했습니다. 2023 세트는 판정일 기준 30개월선을 넘었고, 2024 이후 세트는 기능별 상호 운용 시점이 달라 Newly 구간을 따로 확인했습니다.

HN의 “실행 예제가 없다”는 지적은 정확하다#

HN 토론의 반복된 지적은 코드 조각만 있고 브라우저에서 실행한 결과가 없다는 것이었습니다. HTMLcat의 각 포스트잇은 복사 가능한 최소 구문과 주의점을 주지만, 전후 화면이나 조작 가능한 데모는 제공하지 않습니다. 입력 능력 감지처럼 현재 기기에서 값을 비교해야 이해되는 항목에서는 이 빈자리가 특히 큽니다.

작성자도 토론에서 처음에는 CodePen 데모가 있었지만 유지 비용 때문에 중단했다고 설명했습니다. 현재 홈은 “다음 단계는 많은 데모”라고 적고 지원 라벨과 MDN 링크도 붙였습니다. 따라서 결론은 “쓸모없다”가 아니라 “색인으로 쓰고, 실행 결과와 채택 판단은 다른 자료로 채운다”입니다. MDN을 대체하는 문서가 아니라 기억할 기능을 빠르게 고르는 편집 목록으로 보면 역할이 선명합니다.

이 아카이브도 코드만 붙여 두면 다음번에 다시 해석해야 합니다. 그래서 이번에는 세 줄을 실제 사이트에 넣고, 지원이 없는 브라우저에서 무엇이 남는지까지 함께 적었습니다.

이 사이트에 붙인 세 가지#

세 기능 모두 새 UI를 만들지 않고 기존 읽기 흐름을 조용히 보정합니다. 실제 적용 위치는 루트 갤러리와 아티클 공통 생성 CSS이며, 이 페이지도 같은 선언을 사용합니다.

1. 절 앵커에 `scroll-margin`

h2[id] {
  scroll-margin-block-start: 1rem;
}

목차나 절 링크로 이동했을 때 제목이 뷰포트 맨 위에 달라붙지 않고 16px 숨을 쉽니다. Widely available이라 별도 폴백이 필요 없고, 논리 속성이라 쓰기 방향이 바뀌어도 의미가 유지됩니다.

2. 짧은 제목에 `text-wrap: balance`

h1, h2 {
  text-wrap: balance;
}

루트 제목·카드 제목·아티클 절 제목에만 적용했습니다. 지원 브라우저에서는 두 줄 제목의 길이가 덜 삐뚤어지고, 미지원 브라우저는 선언을 버린 뒤 기존 줄바꿈을 그대로 사용합니다. 본문 전체의 pretty는 성능 비용과 한글 조판 이득을 따로 재야 해서 넣지 않았습니다.

3. 색 토큰에 `light-dark()`

:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root { --bg: #14171B; }
}

@supports (color: light-dark(#000000, #FFFFFF)) {
  :root { --bg: light-dark(#FFFFFF, #14171B); }
}

Newly available이므로 기존 라이트 기본값과 다크 미디어쿼리를 지우지 않았습니다. 최신 브라우저는 한 선언에서 활성 색을 고르고, 오래된 브라우저는 기존 두 단계 경로를 탑니다. 지금은 CSS 줄 수를 줄이지 못하지만, Widely가 되는 2026년 11월 이후에는 폴백 블록을 한 번에 걷을 수 있습니다.

기능 셋을 붙였는데 화면은 거의 그대로입니다. 이 아카이브에는 그게 성공입니다. 지원 브라우저에서만 조용히 좋아지고, 오래된 브라우저에는 원래 모양이 남았습니다.

우리에게 남길 채택 목록#

지금 가져갈 것은 위 세 가지면 충분합니다. 다음 후보는 폼이나 상태 의존 UI가 생길 때의 :has(), 부가 패널이 실제로 필요해질 때의 Popover API입니다. 반대로 스크롤 애니메이션·캐러셀·모서리 모양은 Baseline 이전이라는 이유뿐 아니라, 읽기 중심이고 움직임과 장식을 줄이는 이 사이트의 설계와도 맞지 않습니다.

목록을 많이 아는 것보다 채택선을 하나 정하는 쪽이 유용합니다. 기본은 Widely, Newly는 기능이 사라져도 작업이 끝나는 점진적 향상에만, Limited는 완성된 폴백이 먼저 있을 때만 씁니다. 이 규칙이면 새 기능을 볼 때마다 브라우저 표를 처음부터 다시 읽지 않아도 됩니다.

출처#

HTMLcat, 42개 포스트잇과 각 지원 라벨·주의점
Hacker News 토론, 실행 데모와 호환성 정보에 대한 피드백
web.dev Baseline, Newly·Widely 정의와 핵심 브라우저 집합
MDN scroll-margin, 2021-07부터 Widely available
MDN text-wrap, 2024-03부터 Newly available
MDN light-dark(), 2024-05부터 Newly available