왜 PX 대신 REM을 쓸까? 반응형 웹을 만드는 핵심 CSS 단위 완벽 정리

웹 퍼블리싱이나 UI 디자인을 시작할 때 가장 흔히 다루는 단위는 픽셀(PX)입니다. 직관적이고 정확한 크기를 지정하기 쉬워 널리 쓰이지만, 화면 크기와 사용자의 브라우저 설정이 제각각인 현대의 웹 환경에서는 PX만으로 한계에 부딪히게 됩니다.

모바일, 태블릿, PC 등 다양한 해상도에 유연하게 대응하고 웹 접근성을 준수하기 위해서는 상대 단위인 REM과 EM을 적극적으로 활용해야 합니다.

절대 단위 PX vs 상대 단위 REM / EM

단위의 선택 기준은 '무엇을 기준으로 크기가 바뀌는가'에 달려 있습니다.

• PX (Pixel): 디스플레이의 화소를 기준으로 하는 고정 단위. 브라우저 설정이나 부모 요소에 영향받지 않음.
• REM (Root EM): 최상위 요소(html)의 폰트 크기를 기준으로 하는 상대 단위. (기본 16px = 1rem)
• EM: 자기 자신의 폰트 크기나 상위(부모) 요소의 폰트 크기를 기준으로 변하는 상대 단위.

왜 PX 대신 REM을 사용해야 할까?

가장 큰 이유는 웹 접근성(Accessibility)과 웹 글꼴 크기 설정 대응입니다.

시력이 좋지 않은 사용자는 브라우저의 기본 폰트 크기를 20px 이상으로 키워서 웹사이트를 이용하곤 합니다. 이때 폰트 크기를 `px`로 고정해 두면 사용자가 설정을 변경해도 글자 크기가 바뀌지 않아 불편을 겪게 됩니다.

반면 `rem` 단위를 사용하면 브라우저의 기본 글자 크기에 맞춰 본문 텍스트, 간격, 여백 등이 유연하게 동시 조절됩니다.

쉽게 외우는 계산법 (기본 html font-size = 16px 기준)
16px = 1rem | 24px = 1.5rem | 32px = 2rem
계산 공식: 원하는 PX ÷ 16 = REM 값

실무에서는 언제 어떤 단위를 써야 할까?

모든 요소에 REM을 써야 하는 것은 아닙니다. 다음과 같이 역할에 맞게 혼용하는 것이 권장됩니다.

• REM 추천: 전체 폰트 크기(font-size), 레이아웃 패딩/마진, 섹션 간격
• EM 추천: 버튼 내부 간격(Padding), 텍스트 크기에 따라 비율이 같이 움직여야 하는 아이콘 크기
• PX 추천: 1px 테두리(border), 박스 그림자(box-shadow) 등 고정되어야 하는 최소 선 두께

요약 및 실무 핵심 체크리스트

1. 텍스트 크기와 주요 레이아웃 여백은 기본적으로 `rem` 단위를 사용한다.
2. 버튼처럼 요소 내부 폰트 크기와 여백이 동기화되어야 할 때는 `em`을 고려한다.
3. 수식 계산이 번거로울 때는 변환기 도구나 CSS Preprocessor(Sass, Tailwind 등)를 활용한다.