PX vs REM vs EM | 어떤 CSS 단위를 사용해야 할까요?
솔직히 말해서—CSS에서 크기를 정하는 방법을 익히는 건 완전히 새로운 언어를 배우는 것처럼 느껴질 수 있습니다. 간단한 웹페이지를 스타일링하려고 앉았는데, 갑자기 알파벳 수프처럼 쏟아지는 단위들을 마주하게 되죠.
“이 문단은 16px로 해야 하나? 아니면 1rem? 잠깐, em이 정확히 뭐였지?”
레이아웃이 마침내 제대로 보일 때까지 무작정 단위를 바꿔가며 추측해 본 적이 있다면, 여러분은 결코 혼자가 아닙니다. 프론트엔드 개발자라면 누구나 거치는 통과의례 같은 거죠. 하지만 이 세 가지 단위가 실제로 어떻게 작동하는지 이해하고 나면, CSS는 더 이상 이해할 수 없는 마법이 아니라 예측 가능한 도구 상자처럼 느껴지기 시작할 것입니다.
어려운 전문 용어 대신 실생활의 비유를 사용해 px, em, rem을 하나씩 파헤쳐 보겠습니다.
픽셀 (px): 고집불통 자
픽셀은 절대 늘어나지 않는 원단으로 만든 맞춤 정장과 같다고 생각하세요. 버튼 너비를 200px로, 텍스트 크기를 16px로 설정했다면 정확히 그 수치대로 보입니다. 그게 끝이죠. 이것은 절대 단위(absolute unit)입니다.
픽셀은 사이트를 거대한 4K 모니터로 보든, 5년 된 작은 스마트폰으로 보든, 아니면 사용자가 돋보기를 깜빡해서 브라우저의 기본 글꼴 크기를 아주 크게 키웠든 상관하지 않습니다. 픽셀은 그냥 픽셀입니다.
장점: 예측 가능합니다. 정확히 어떤 결과가 나올지 알 수 있기 때문에 정교한 레이아웃을 만들 때 고려하기 매우 쉽습니다. 단점: 접근성에 좋지 않습니다. 글꼴 크기를 픽셀로 고정해 버리면, 시각 장애가 있는 사용자가 브라우저의 기본 글꼴 크기를 키우려고 해도 16px인 텍스트는 고집스럽게 커지기를 거부합니다.
Ems (em): 전화기 게임 (말 전달하기)
픽셀이 경직되어 있다면, em 단위는 그 정반대입니다. (재미있는 사실: 이 이름은 원래 대문자 “M”의 너비를 기반으로 한 전통적인 타이포그래피 측정법에서 유래되었습니다!) em은 상대 단위(relative unit)로, 주변 환경, 특히 바로 위 부모 요소의 크기를 기준으로 삼습니다.
em 단위를 전화기 게임이나 러시아 인형(마트료시카)과 같다고 생각하세요. 부모 컨테이너의 글꼴 크기가 16px이고 자식 요소에 2em을 주면, 자식은 부모의 두 배 크기인 32px이 됩니다.
좋게 들리죠? 하지만 요소가 중첩되기 시작하면 상황이 달라집니다.
리스트 안에 리스트, 그 안에 또 리스트가 있다고 가정해 봅시다. 모든 li 태그를 1.5em으로 설정하면, 첫 번째 리스트는 일반 크기의 1.5배가 됩니다. 중첩된 두 번째 리스트는 그 크기의 1.5배가 됩니다. 세 번째 리스트는 다시 그 크기의 1.5배가 되죠. 갑자기 텍스트가 거대해져서 화면을 가득 채우게 됩니다. 이를 “복합적인 문제(compounding problem)”라고 하며, 많은 개발자가 em 단위에서 도망치는 이유이기도 합니다.
요소를 중첩할 때 계산이 이상할 정도로 복잡해질 수 있으므로, 머릿속으로 계산하려 하지 마세요. 정신 건강을 위해 상황이 까다로워질 때 사용할 수 있는 pixel to em 변환기를 즐겨찾기 해두세요.
Rems (rem): 시계를 그리니치 표준시로 맞추기
rem 단위는 em의 복합적인 문제를 해결하기 위해 특별히 발명되었습니다.
“Rem”은 Root Em의 약자입니다. 바로 위 부모를 보는 대신, rem은 웹페이지의 가장 꼭대기인 “루트(root)”(<html> 요소)를 확인합니다.
rem 단위를 그리니치 표준시와 같은 글로벌 표준에 시계를 맞추는 것으로 생각하세요. 세계 어디에 있든(또는 요소가 HTML 트리 깊숙이 어디에 중첩되어 있든) 모든 요소가 정확히 동일한 시계를 참조합니다.
기본적으로 대부분의 브라우저는 루트 글꼴 크기를 16px로 설정합니다. 따라서 1rem은 16px, 2rem은 32px, 0.5rem은 8px입니다. 디자인 파일을 코드로 옮길 때마다 매번 암산하기 싫다면, pixel to rem 변환기를 사용하여 작업 속도를 높이세요.
rem의 진정한 마법: 사용자가 더 큰 텍스트가 필요해서 브라우저 설정에서 기본 글꼴 크기를 24px로 바꾸면, 전체 사이트가 자동으로 아름답고 비례에 맞게 커집니다. 왜냐하면 rem으로 빌드된 모든 것이 그 루트 숫자를 기반으로 하기 때문입니다!
그래서, 실제로 어떤 것을 사용해야 할까요?
비결은 이겁니다: 하나만 선택하고 나머지를 버릴 필요는 없습니다. 최고의 개발자들은 세 가지를 모두 사용하되, 각자의 용도에 맞게 사용합니다.
접근 방식은 다음과 같습니다.
1. 거의 모든 것에 rem을 기본으로 사용하세요.
글꼴 크기, 여백(margin, padding), 최대 너비(max-width) 등에는 rem을 사용하세요. 이는 사이트의 접근성을 높여주며, 사용자가 브라우저 설정을 변경해도 모든 것이 비례에 맞춰 조정되도록 보장합니다. 현대 웹 디자인의 명백한 표준입니다.
2. 절대 변하지 않아야 하는 것에는 px를 사용하세요.
카드 주변에 1px 두께의 얇은 테두리를 넣는 경우, 사용자가 글꼴 크기를 키웠다고 해서 그 테두리가 투박한 3px 블록이 되는 것을 원치 않을 것입니다. 테두리(border), 박스 그림자(box shadow), 그리고 때때로 까다로운 레이아웃에서의 정밀한 위치 지정에는 px를 사용하세요.
3. 모듈형 컴포넌트에는 em을 사용하세요.
간격이 해당 요소의 글꼴 크기에 비례하여 확장되기를 원할 때 em을 사용하세요. 예를 들어 버튼을 생각해 보세요. 거대한 “지금 구매하기” 버튼이든 작은 “제출” 버튼이든 텍스트 주변의 여백(padding)이 항상 비례에 맞게 보이길 원할 것입니다. 버튼의 여백을 em으로 설정하면 버튼의 글꼴 크기만 변경해도 여백이 그에 맞춰 자동으로 늘어나거나 줄어듭니다.