브라우저마다 기본 스타일이 다르다는 사실은 늘 뒤늦게 체감해요. 같은 h1인데 브라우저마다 크기와 여백이 다르고, 같은 button인데 어떤 브라우저는 테두리와 배경이 다르게 보여요. 그래서 스타일을 시작하기 전에 기준선을 맞추는 작업이 필요해요.
둘 다 브라우저 차이를 줄여요
Reset CSS와 Normalize CSS는 모두 브라우저 기본 스타일 차이를 줄이기 위한 방법이에요. 다만 접근 방식이 달라요.
| 방식 | 생각 |
|---|---|
| Reset CSS | 기본 스타일을 거의 다 지우고 새로 시작해요 |
| Normalize CSS | 브라우저마다 다른 부분만 맞추고 유용한 기본값은 남겨요 |
Reset CSS는 여백, 패딩, 글자 크기, 정렬 같은 기본값을 거의 비워 버려요. 반면 Normalize CSS는 제목 크기나 폼 컨트롤처럼 의미 있는 기본값은 남기고, 브라우저 간에 튀는 부분만 고쳐요.
/* Reset CSS의 느낌 */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Normalize CSS의 느낌 */
h1 {
font-size: 2em;
margin: 0.67em 0;
}
a {
background-color: transparent;
}선택 기준은 다르지 않아요
Reset CSS는 시작점을 완전히 통일하고 싶을 때 좋아요. 디자인 시스템처럼 모든 요소를 직접 설계하고, 브라우저 기본값을 거의 믿지 않는 프로젝트에서 잘 맞아요.
Normalize CSS는 기본값의 장점을 살리고 싶을 때 좋아요. 문서형 콘텐츠가 많거나, 폼 컨트롤의 기본 동작을 어느 정도 유지하고 싶을 때 유리해요. 처음 세팅도 상대적으로 덜 부담스러워요.
즉, Reset CSS는 "완전한 통제"에 가깝고, Normalize CSS는 "안전한 정리"에 가까워요. 둘 다 맞는 선택일 수 있지만, 같은 문제를 다른 방식으로 풀어요.
디자인 시스템을 만든다면 브라우저 기본 스타일을 어디까지 허용할지 먼저 정하는 편이 좋아요. 그 기준이 있어야 컴포넌트마다 스타일이 흔들리지 않아요.
너무 큰 reset은 비용이 커요
브라우저 기본값은 그냥 오래된 잔재가 아니에요. 접근성이나 사용성을 돕는 기본값도 많아요. 예를 들어 button, input, textarea 같은 요소는 브라우저가 제공하는 기본 상호작용이 있어요. 이를 전부 없애면 다시 많은 규칙을 직접 복구해야 해요.
그래서 요즘은 "무조건 전체 reset"보다 "작은 reset + 컴포넌트 수준 스타일"을 더 자주 써요. 필요한 것만 지우고, 나머지는 브라우저의 합리적인 기본값을 활용하는 편이 유지보수에 유리해요.
button {
font: inherit;
color: inherit;
background: none;
}이렇게 시작하면 문서 구조는 단순해지고, 나중에 다시 스타일을 얹을 때도 부담이 덜해요. 단, focus 스타일까지 같이 지워 버리면 접근성이 나빠질 수 있으니 그 부분은 별도로 복구해야 해요.
실무에서는 이렇게 시작해요
- 프로젝트가 작고 빠르게 시작해야 하면 Normalize CSS부터 봐요.
- 디자인 시스템이 강하고 컴포넌트를 직접 통제해야 하면 Reset CSS가 어울려요.
- 어느 쪽이든 focus, button, form 요소의 기본 동작은 따로 검토해요.
이 기준이 있으면 "어떤 걸 깔아야 하지?"보다 "무엇을 남겨야 하지?"를 먼저 보게 돼요.
정리
- Reset CSS는 기본 스타일을 지우고 다시 시작하는 방식이에요.
- Normalize CSS는 브라우저 차이를 정리하면서 유용한 기본값을 남기는 방식이에요.
- 디자인 시스템처럼 전부 직접 통제해야 하면 reset이 어울리고, 빠른 초기 세팅이나 기본 UI를 살리고 싶다면 normalize가 어울려요.
