웹 퍼블리싱을 하다 보면 같은 HTML 코드인데도 브라우저마다 여백, 폰트, 버튼 스타일이 다르게 보이는 경우가 있습니다.
이 문제의 원인은 바로 브라우저 기본 스타일(User Agent Stylesheet) 때문입니다.
이 기본 스타일 차이를 줄이기 위해 가장 많이 사용하는 방법이 CSS reset과 normalize.css입니다.
둘 다 브라우저 스타일 차이를 해결하는 목적은 같지만, 동작 방식과 실무 활용 방법은 분명히 다릅니다.
이번 글에서는 CSS reset과 normalize의 차이, 각각의 장단점, 그리고 실무에서 어떤 방식을 선택하면 좋은지를 쉽게 정리해보겠습니다.
브라우저 기본 스타일이 왜 문제일까?
브라우저는 HTML 태그에 기본 스타일을 가지고 있습니다.
h1 {
font-size: 2em;
margin: 0.67em 0;
}
예를 들어 h1, p, ul, button은 브라우저마다 기본 margin, padding, line-height가 다를 수 있습니다.
이 차이가 레이아웃 깨짐이나 예상치 못한 스타일 차이를 만들게 됩니다.
CSS reset이란?
reset CSS는 브라우저 기본 스타일을 거의 모두 제거하여 완전히 동일한 시작점에서 스타일을 작성하도록 만드는 방식입니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
대표적으로 margin, padding, list-style, border 등을 초기화합니다.
reset의 특징
- 기본 스타일 대부분 제거
- 완전한 커스텀 가능
- 처음부터 디자인 시스템 구축에 유리
normalize.css란?
normalize.css는 브라우저 기본 스타일을 무조건 제거하지 않고, 브라우저 간 차이만 최소화하는 방식입니다.
즉, 유용한 기본 스타일은 유지하면서 불필요한 차이만 통일합니다.
html {
line-height: 1.15;
}
button,
input {
font: inherit;
}
normalize의 특징
- 브라우저 차이만 보정
- 기본 스타일 일부 유지
- 접근성과 기본 UI에 유리
reset과 normalize의 가장 큰 차이
reset = 모두 제거
기본 스타일을 거의 0에 가깝게 만듭니다.
normalize = 필요한 것만 정리
브라우저 차이만 줄이고 기본 사용성을 유지합니다.
예시로 비교하기
reset 적용 시
h1 {
margin: 0;
}
ul {
list-style: none;
}
모든 기본 여백과 리스트 스타일이 사라집니다.
normalize 적용 시
브라우저별 차이만 맞추고 의미 있는 기본 스타일은 유지됩니다.
실무에서는 어떤 걸 더 많이 쓸까?
최근 실무에서는 보통 아래 방식으로 많이 갑니다.
- 디자인 시스템 / 퍼블리싱 > reset 선호
- 서비스형 웹앱 > normalize 선호
- 프레임워크(Tailwind, Bootstrap) → 자체 preflight 사용
특히 Tailwind CSS는 reset과 normalize의 중간 개념인 Preflight를 사용합니다.
reset CSS 장점과 단점
장점
- 예측 가능한 시작점
- 퍼블리싱 통제 쉬움
- 브라우저 차이 최소화
단점
- 버튼, 폼 UI까지 모두 사라짐
- 접근성 기본 스타일 제거 가능
- 초기 스타일링 작업량 증가
normalize 장점과 단점
장점
- 기본 사용성 유지
- 브라우저 간 차이 보정
- 폼 요소 안정적
단점
- 완전한 통일은 아님
- 디자이너 픽셀 단위 맞춤엔 불편할 수 있음
실무 추천 사용 기준
퍼블리싱 / 템플릿 제작
reset CSS 추천
서비스 / 접근성 중요 프로젝트
normalize 추천
Tailwind / UI Framework
기본 preflight 사용
추천 reset 기본 코드
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
이 정도가 가장 많이 쓰는 실무 기본 reset입니다.
SEO와 웹 성능 관점
reset과 normalize는 SEO에 직접 영향은 없지만, 레이아웃 안정성과 CLS 방지에 도움이 됩니다.
특히 초기 렌더링 일관성은 사용자 경험과 Core Web Vitals 개선에 긍정적입니다.
마무리
CSS reset과 normalize는 둘 다 브라우저 차이를 줄이기 위한 중요한 방법입니다.
정리하면 다음과 같습니다.
- reset = 기본 스타일 대부분 제거
- normalize = 필요한 기본 스타일 유지
- 퍼블리싱은 reset, 서비스는 normalize가 실무에서 많이 사용됨
프로젝트 성격에 따라 적절히 선택하면 CSS 구조가 훨씬 안정적이고 유지보수하기 쉬워집니다.