UA(User-Agent, 사용자 에이전트)가 시맨틱 중첩 구조를 인식하여 헤딩 태그에 적용하는 기본 스타일을 변경하기 시작했습니다. 개발자는 웹이 UA 스타일에 의존하고 있는지 확인하여 예기치 않은 결과와 라이트하우스(Lighthouse) 검사 실패를 방지해야 합니다. 이 글에서는 변경 사항, 페이지의 문제를 확인하는 방법, 표준을 준수하면서도 더 나은 구조를 갖춘 웹사이트를 만드는 몇 가지 팁을 살펴봅니다.
변경 사항
HTML 사양은 한때 아웃라인 알고리즘 개념을 정의하여 <h1> 요소에 암묵적으로 계층 수준을 부여했습니다. 이 수준은 섹셔닝 요소(<section>, <aside>, <nav>, <article>) 안에 얼마나 깊게 중첩되어 있는지에 따라 정해졌습니다.
브라우저의 기존 렌더링 방식은 다음과 같았습니다. <section> > <h1>은 시각적으로 <h2>처럼 보이도록 크기와 여백이 지정되었습니다. <section> > <section> > <h1>은 <h3>처럼 표시되었습니다. 이런 규칙은 브라우저의 기본 UA 스타일로 구현되었지만, 스크린 리더가 참고하는 접근성 트리 의 헤딩 수준에는 반영되지 않았습니다. 개발자들은 섹셔닝 요소들을 사용하면서도, 헤딩 수준이 자동으로 조정되리라고 예상하지 못해 혼란이 생겼습니다.
이로 인해 개발자들이 <h1> 요소를 어디에 사용해야 할지 혼란을 겪었고, 도구마다 HTML을 다르게 해석하게 되었으며, 결국 아웃라인 알고리즘에 불만이 제기되었습니다. 결국 이 알고리즘은 2022년에 HTML 사양에서 제거되었지만, 여전히 UA 스타일 규칙이 남아 있었습니다. 최근 브라우저 벤더들은 이제 이러한 기본 스타일 규칙을 제거하고 있습니다.
/* 여기서 x는 article, aside, nav, section 중 하나를 의미함 */
x h1 {
margin-block: 0.83em;
font-size: 1.5em;
}
x x h1 {
margin-block: 1em;
font-size: 1.17em;
}
x x x h1 {
margin-block: 1.33em;
font-size: 1em;
}
x x x x h1 {
margin-block: 1.67em;
font-size: 0.83em;
}
x x x x x h1 {
margin-block: 2.33em;
font-size: 0.67em;
}예를 들어 아래와 같은 HTML 코드가 있다고 가정해 보겠습니다.
<body>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
<section>
<h1>Level 4</h1>
</section>
</section>
</section>
</body>기존 UA는 위 HTML 문서를 아래와 같이 스타일링 했습니다.
새로 변경된 UA 스타일을 적용하면 다음과 같이 보입니다.
여러분이 지금 사용하고 있는 브라우저는 아래와 같이 표시합니다.
역자주: 실제 MDN 문서는 HTML 문서의 렌더링 결과를 보여주고 있습니다. 블로그 특성상 스크린숏으로 대체합니다. (사용 브라우저: whale 4.31.304.16 버전) 직접 확인하고 싶으신 분은 플레이그라운드를 참고하세요.
변경 목적과 시기
브라우저 스타일 변화와 함께, 라이트하우스 같은 페이지 검사 도구도 <h1>에 명시적인 font-size가 지정되지 않은 경우 권장하지 않는다는 경고를 표시하기 시작했습니다. 앞으로 예상되는 주요 변화는 다음과 같습니다.
<h1>은 더 이상<section>,<article>,<nav>,<aside>같은 섹셔닝 요소에 따라 스타일이 적용되지 않습니다. 각 UA는 이제 모든<h1>에 동일한 스타일을 적용하며, 더 이상 암묵적으로<h2>,<h3>등으로 격하시켜 스타일링 하지 않습니다.- 라이트하우스는
<h1>이 섹셔닝 요소 안에 중첩되어 있고font-size를 명시하지 않은 경우, 경고를 표시합니다. 관련 라이트하우스의 경고 메시지는H1UserAgentFontSizeInSection입니다. 이에 대한 대응 방법과 가이드는 다음 섹션에서 설명합니다.
위 변경 사항은 아래 브라우저들에서 순차적으로 적용될 예정입니다.
Firefox
- 2025년 3월 31일부터 Firefox는 데스크톱 환경에서
<article>,<aside>,<nav>,<section>내부의<h1>에 적용되던 UA 스타일을 제거하는 변경 사항을 138 베타 버전 사용자 중 절반에게 적용하기 시작했습니다. 이후 4월 14일부터는 138 베타 버전 사용자 모두에게 적용됩니다. 이 변경은 Firefox 138 안정 버전에서 5% 사용자에게 먼저 배포된 후, 10%까지 점진적으로 확대되며, 최종적으로 Firefox 140 버전에서 모든 플랫폼에 적용될 예정입니다. (관련 버그 1885509) - Firefox 136 버전부터는,
<article>/<aside>/<nav>/<section>내부에 있으면서 개발자가font-size나margin을 명시하지 않은<h1>에 대해 콘솔 경고가 표시됩니다. (관련 버그 1937568) - Firefox에서 변경 사항을 미리 테스트하려면, about:config에서
layout.css.h1-in-section-ua-styles.enabled설정을 false로 변경하세요.
Chrome
- Chrome은 136 버전부터 4가지 섹셔닝 요소 안에 있는
<h1>에 스타일을 지정하지 않아 기본 규칙에 따라 더 작게 스타일링 되는 경우, 사용 중단 경고를 표시합니다. Chromium에서 어떤 기능이 사용 중단으로 표시되면, 라이트하우스의 "Best Practices" 점수에 부정적인 영향을 줄 수 있습니다. (관련 이슈 394111284)
Safari
- 현재 Safari는 관련 변경 사항을 개발 중이며 292765 버그 트래커에서 확인할 수 있습니다.
라이트하우스 경고 수정하기
라이트하우스는 최근 Chromium DevTools의 경고를 기반으로 한 검사 항목을 새롭게 도입했습니다.
이는 <article>,<aside>, <nav>, <section> 안에 있는 <h1> 요소에 font-size를 명시하지 않은 경우를 대상으로 합니다. 이 새로운 규칙은 H1UserAgentFontSizeInSection이라는 이름으로 추가되었으며, 3월부터 사용 중단 경고와 함께 표시되기 시작했습니다. 만약 <h1> 경고를 보았다면, 반드시 <h1>에 font-size와 margin을 명시적으로 지정했는지 확인하세요.
다음은 권장되는 스타일 방식의 예시입니다.
h1 {
margin-block: 0.67em;
font-size: 2em;
}<h1>에 적용된 다른 스타일 규칙을 덮어쓰지 않으려면 우선순위가 0인 :where()를 사용하면 됩니다.
:where(h1) {
margin-block: 0.67em;
font-size: 2em;
}이제 MDN의 제목 요소 페이지에는 위에 언급한 사용 방법이 포함되어 개발자가 정보를 쉽게 확인할 수 있습니다.
요약
염두에 두어야 할 사항은 다음과 같습니다.
- 제목 계층 구조를 표현할 때 기본 브라우저 스타일에 의존하지 마세요. 두 번째 수준의 제목에는
<h2>, 세 번째 수준의 제목에는<h3>등을 사용하여 문서 계층 구조를 명시적으로 정의하세요. - 항상
<h1>요소에font-size와margin을 정의하세요. - CSS 리셋을 업데이트하여 이번 변경 사항을 반영하세요.
- 라이트하우스와 브라우저의 개발자 도구로 사이트를 점검하여 더 이상 권장되지 않는 사용 방식이 있는지 확인하세요.
- MDN 문서에서 HTML 섹션 제목의 사용법을 숙지하세요.
UA(User-Agent, 사용자 에이전트)가 시맨틱 중첩 구조를 인식하여 헤딩 태그에 적용하는 기본 스타일을 변경하기 시작했습니다. https://salvatore-contracting.com