CSS 단위가 중요한 이유
CSS 단위 선택은 단순한 취향 문제가 아닙니다. 사이트의 반응성, 접근성, 유지보수성에 직접 영향을 미칩니다. 웹 디자인에서 텍스트 크기와 여백 설정에 가장 많이 쓰이는 세 가지 단위는 px, rem, em입니다. 각각 동작 방식이 다르고, 잘못 쓰면 화면 크기에 따라 깨지거나 큰 글꼴이 필요한 사용자를 외면하는 딱딱한 레이아웃이 됩니다.
px: 절대 단위
픽셀(px)은 가장 직관적인 CSS 단위입니다. 1px은 표준 디스플레이에서 1 디바이스 픽셀에 해당합니다(고해상도 화면에서는 CSS 픽셀이 스케일링됩니다). font-size: 16px로 지정하면 부모나 루트 설정과 관계없이 항상 16 CSS 픽셀로 렌더링됩니다.
px의 장점은 예측 가능성입니다. 지정한 그대로 나옵니다. 단점은 유연하지 않다는 것입니다. 사용자가 접근성을 위해 브라우저 기본 글꼴 크기를 16px에서 20px로 바꿔도, px로 지정된 텍스트는 그 설정을 완전히 무시합니다. 그래서 현대 웹 개발에서 글꼴 크기에 px를 쓰는 건 권장되지 않습니다.
px가 적합한 곳: 테두리, 그림자, 정밀한 장식 요소처럼 크기가 변하면 안 되는 곳.
rem: 루트 기준 상대 단위
rem(root em)은 루트 요소, 즉 html 요소의 글꼴 크기를 기준으로 합니다. html 글꼴 크기가 브라우저 기본값인 16px이면, 1rem은 16px, 1.5rem은 24px, 0.875rem은 14px입니다.
rem의 핵심 장점은 사용자의 글꼴 크기 설정을 존중한다는 것입니다. 누군가 브라우저 기본값을 20px로 바꾸면, rem 기반 크기가 모두 비례해서 커집니다. 그래서 대부분의 현대 디자인 시스템에서 글꼴 크기, 여백, 레이아웃 크기에 rem을 권장합니다.
자주 쓰이는 기법으로 루트 글꼴 크기를 62.5%(기본 16px 기준 10px)로 설정해서 계산을 쉽게 만드는 방법이 있습니다. 1.6rem = 16px, 2.4rem = 24px. 다만 다른 라이브러리가 기본 16px을 기대하는 경우 문제가 생길 수 있어 주의가 필요합니다.
em: 부모 기준 상대 단위
em은 부모 요소의 글꼴 크기를 기준으로 합니다(font-size 속성에 쓰일 때는 요소 자신의 부모 기준). 부모의 font-size가 20px이면, 그 안에서 1em은 20px입니다.
이 누적 특성이 em의 강점이자 최대 함정입니다. 중첩된 요소에 font-size: 1.2em을 반복 적용하면, 단계마다 텍스트가 점점 커집니다(또는 작아집니다). 깊게 중첩된 컴포넌트에서 예상치 못한 결과가 나올 수 있습니다.
em이 빛나는 곳: 컴포넌트 자체 글꼴 크기에 맞춰 스케일링되어야 하는 컴포넌트 내부 여백. 예를 들어 버튼에 padding: 0.5em을 주면, 버튼 텍스트가 14px이든 24px이든 여백이 비례해서 조정됩니다.
실전 가이드라인
**전역 크기에는 rem.** 글꼴 크기, 마진, 패딩, 레이아웃 컨테이너의 max-width는 rem이 적합합니다. 페이지 전체에서 일관된 스케일링을 보장합니다.
**컴포넌트 내부 여백에는 em.** 컴포넌트 안의 패딩, 마진, 아이콘 크기는 em이 유리합니다. 텍스트 크기에 맞춰 자연스럽게 조정됩니다.
**px는 제한적으로.** 테두리, 박스 쉐도우, 아웃라인 등 스케일링이 바람직하지 않은 장식 속성에만 사용하세요.
접근성이 먼저
글꼴 크기에 px 대신 rem을 권장하는 근본적 이유는 접근성입니다. 사용자의 약 20%가 브라우저 기본 글꼴 크기를 조정합니다. px로 텍스트를 지정하면 이 선택을 무시하게 되고, rem을 쓰면 디자인이 자동으로 적응합니다. 반응형 디자인은 화면 너비만의 문제가 아닙니다. 모든 사용자가 콘텐츠를 편하게 읽을 수 있도록 배려하는 것입니다.
px-to-rem 변환기를 활용하면 px 기반 디자인에서 rem으로의 전환이 훨씬 수월해집니다. 픽셀 값을 입력하면 루트 글꼴 크기에 맞는 정확한 rem 값을 바로 얻을 수 있습니다.