브라우저가 rem 단위를 계산하는 원리

솔직히 말해봅시다. 옛날에는 CSS로 크기를 지정하는 일이 정말 큰 골칫거리였습니다. 노트북으로 멋진 웹사이트를 만들어 놓아도, 누군가 스마트폰으로 보거나 화면을 확대하기만 하면 레이아웃이 완전히 깨져버렸죠.

여기서 등장하는 것이 바로 rem 단위입니다. 웹 디자인에 조금이라도 관심이 있었다면 어디서든 보셨을 겁니다. 그런데 도대체 rem이란 정확히 무엇이며, 브라우저는 화면에서 이 단위가 실제로 어떤 크기를 의미하는지 어떻게 알아내는 걸까요?

걱정 마세요. 고차 방정식 같은 건 필요 없습니다. 커피 한 잔 들고, 쉽고 현실적인 예시들을 통해 브라우저가 rem 단위를 계산하는 원리를 파헤쳐 보겠습니다.

REM은 도대체 무슨 약자일까요?

rem은 “루트 em(root em)”의 약자입니다.

타이포그래피 측정의 역사를 더 깊이 파고들고 싶다면, 위키백과의 em 단위 및 과거 인쇄기의 물리적 기원에 대한 흥미로운 설명을 참고해 보세요.

하지만 현대 웹 디자인에서 여러분이 반드시 이해해야 할 부분은 바로 ‘루트(root)’라는 단어입니다.

나무를 떠올려 보세요. 뿌리는 나무 전체에 영양분을 공급하는 기반입니다. HTML 문서에서 뿌리는 바로 <html> 태그입니다. 따라서 rem 단위는 단순히 <html> 태그(루트)의 폰트 크기를 확인하고 이를 기준으로 삼습니다.

‘마스터 레시피’ 비유

rem을 주방에서 마스터 레시피의 양을 조절하는 것에 비유해 봅시다.

할머니의 마스터 레시피로 정확히 초콜릿 칩 쿠키 16개를 만들 수 있다고 해보죠.

반죽 양을 두 배로 만들고 싶다면 레시피에 2를 곱합니다. 쿠키 32개가 나오죠.
절반만 만들고 싶다면 0.5를 곱합니다. 쿠키 8개가 나옵니다.

rem 단위도 정확히 이와 같은 방식으로 작동합니다. 브라우저의 기본 루트 폰트 크기는 보통 16px입니다(우리의 마스터 레시피인 셈이죠).

따라서 CSS에 2rem이라고 적으면 브라우저는 다음과 같이 간단한 계산을 합니다.
16px(기본값) × 2(rem 값) = 32px.

정말 간단하지 않나요?

몇 가지 쉬운 예시를 살펴봅시다

웹사이트의 루트에 브라우저 기본 폰트 크기인 16px가 적용되어 있다고 가정해 보겠습니다. 브라우저가 CSS의 rem을 픽셀로 변환하는 방식은 다음과 같습니다.

본문 텍스트 (1rem): 16px × 1 = 16px
큰 제목 (2.5rem): 16px × 2.5 = 40px
작은 바닥글 텍스트 (0.875rem): 16px × 0.875 = 14px

그렇다면 루트 크기를 바꾸면 어떻게 될까요?

16px가 너무 작다고 느껴져서 CSS에 다음과 같이 작성했다고 해봅시다.

html {
  font-size: 20px;
}

그러면 브라우저는 즉시 웹사이트 전체의 계산 방식을 업데이트합니다. 마스터 레시피를 바꿔치기한 것이죠. 이제 똑같은 rem 값이 완전히 다른 크기를 나타냅니다.

1rem은 이제 20px가 됩니다 (20 × 1).
2.5rem은 이제 50px가 됩니다 (20 × 2.5).
0.875rem은 이제 17.5px가 됩니다 (20 × 0.875).

코드 단 한 줄만 바꾸었는데도 웹사이트 전체의 크기가 완벽하게 조절됩니다. 마법 같지 않나요?

REM 대 EM: 러시아 인형 문제

“그냥 em을 쓰면 안 되나요?”라는 생각이 들 수도 있습니다.

rem이 루트 요소를 바라보는 반면, 일반 em 단위는 부모 요소의 폰트 크기를 바라봅니다. 이것만 보면 괜찮아 보이지만, <div> 안에 또 다른 <div>가 있고 그 안에 리스트가 있는 것처럼 요소를 중첩하기 시작하면 문제가 생깁니다.

em 단위를 사용하는 것은 러시아 전통 인형인 마트료시카를 가지고 노는 것과 같습니다. 부모가 1.2em이고, 자식이 1.2em이며, 손주가 1.2em이면 브라우저는 이 값들을 모두 곱해버립니다(1.2 × 1.2 × 1.2). 순식간에 텍스트가 엄청나게 커지고, 왜 이렇게 되었는지 영문도 모르게 되죠!

하지만 rem은 언제나 단 하나의 루트 요소만을 바라보기 때문에 이러한 복리 효과(눈덩이처럼 불어나는 효과)가 발생하지 않습니다. 예측 가능하고 안전하며, 머리를 쥐어뜯을 일도 없애줍니다.

브라우저(그리고 사용자)가 REM을 사랑하는 이유

이렇게 생각하실 수도 있습니다. “1rem이 고작 16px라면, 그냥 편하게 16px라고 적고 계산을 안 하는 게 낫지 않나?”

그 정답은 바로 접근성에 있습니다.

모든 사람이 완벽한 시력을 가지고 있는 것은 아닙니다. 많은 사람들이 편안하게 읽기 위해 브라우저 설정에서 기본 폰트 크기를 16px에서 20px, 심지어 24px로 변경합니다.

사이트를 오직 px로만 구축했다면 텍스트 크기가 고정되어 꼼짝도 하지 않습니다. 사용자의 설정은 무시되고, 결국 콘텐츠를 읽기 힘들어지죠.
반면 rem을 사용해 사이트를 구축했다면, 브라우저는 “아! 사용자가 루트 크기를 24px로바꿨구나!”라고 인식합니다. 그리고 새로 바뀐 24px 기준에 맞춰 rem 값들을 다시 계산하므로, 사이트 전체가 사용자에게 알맞게 아름답게 확장됩니다.

간편한 REM 치트 시트

CSS를 작성할 때마다 직접 계산하느라 애를 먹지 않도록, 표준 16px 기본값(default)을 기준으로 유용한 치트 시트를 준비했습니다. 북마크해두고 언제든 꺼내 보세요!

브라우저의 계산	작성하는 값 (`rem` 기준)	원하는 크기 (픽셀)
`16 × 0.75`	0.75rem	12px
16 × 0.875	0.875rem	14px
16 × 1	`1rem` (기본값)	16px
16 × 1.125	1.125rem	18px
16 × 1.25	1.25rem	20px
16 × 1.5	1.5rem	24px
16 × 2	2rem	32px
16 × 3	3rem	48px
16 × 4	4rem	64px

(전문가 팁: 직접 계산하고 싶다면 원하는 픽셀 크기를 16으로 나누기만 하면 됩니다. 예: 24px ÷ 16 = 1.5rem)

계산 과정을 완전히 건너뛰고 시간을 아끼고 싶다면, 저희가 제공하는 무료 rem to pixel 변환기를 사용하여 정확한 크기를 즉시 계산해 보세요!

마치며

자, 이제 다 알게 되셨습니다! 브라우저는 rem 값을 루트 폰트 크기와 곱하기만 하여 rem 단위를 계산합니다. 코드를 깔끔하게 유지해주고, 크기 지정의 악몽을 방지하며, 콘텐츠를 읽으려는 모든 이들에게 웹을 훨씬 더 친화적인 공간으로 만들어 주는 확장 가능한 레시피일 뿐입니다.

사이트에서 px에서 rem으로 전환하는 데 애를 먹고 있는 특정 요소가 있나요? 알려주시면 함께 머리를 맞대고 해결해 보겠습니다!