CSS에서 Pixel을 rem으로 변환하는 방법 (간단 가이드)

CSS에서 Pixel을 rem으로 변환하는 방법 (간단 가이드)

멋지고 픽셀 하나하나 완벽한 웹사이트를 구축했는데, 사용자가 브라우저의 기본 글꼴 크기를 키우는 순간 레이아웃이 완전히 깨지는 것을 경험해 본 적이 있나요? 저도 그랬습니다. 대개 그런 순간에 우리 개발자들은 모든 것을 픽셀(px)로 하드코딩하는 것이 접근성 측면에서 악몽이 될 수 있다는 사실을 뼈저리게 배우게 되죠.

이때 등장하는 것이 바로 rem 단위입니다.

항상 픽셀 단위로만 생각해 왔다면, rem으로 전환하는 것이 마치 외국어를 즉석에서 배우는 것처럼 느껴질 수 있습니다. 하지만 걱정하지 마세요. 개념만 한 번 이해하고 나면 개발자로서의 삶이 훨씬 편해질 것입니다.

복잡한 수학적 지식 없이도 px을 rem으로 변환하는 방법을 알아보겠습니다.

왜 굳이 Rem에 대해 이야기할까요?

픽셀을 절대적인 측정 단위라고 생각해보세요. 집을 짓는데 건축업자에게 “이 창문을 정확히 40인치 너비로 만들어 주세요”라고 말하는 것과 같습니다. 그 창문은 집의 나머지 부분이 어떻게 변하든 상관없이 40인치 너비가 됩니다. 이것이 픽셀입니다.

반면에 rem은 상대적인 측정 단위라고 생각해보세요. 고정된 인치를 사용하는 대신 건축업자에게 “이 창문을 표준 기초 벽돌 너비의 정확히 3배로 만들어 주세요”라고 말하는 것입니다. 나중에 더 큰 벽돌을 사용하기로 결정하면 창문도 그에 비례하여 자동으로 커집니다.

CSS에서 rem은 “root em”의 약자입니다. 즉, “루트 HTML 요소의 글꼴 크기에 대한 상대적 크기”를 의미합니다. 사용자는 가독성을 위해 브라우저 설정에서 기본 글꼴 크기를 변경할 수 있고 실제로 그렇게 하기도 하므로, rem을 사용하면 웹사이트 전체가 사용자의 설정에 맞춰 매끄럽게 확장됩니다. 레이아웃이 깨지지 않으면서 텍스트의 가독성도 유지되죠. 모두에게 이득입니다.

표준 계산법: 변환하는 방법

기억해야 할 황금률이 있습니다: 기본적으로 거의 모든 현대 웹 브라우저의 루트 글꼴 크기는 16px로 설정되어 있습니다.

이것은 CSS에서 별도로 재정의하지 않는 한 1rem이 16px과 같다는 것을 의미합니다.

머릿속에 있는 픽셀 값을 rem 값으로 변환하려면 다음 기본 공식을 사용하면 됩니다.

목표 픽셀 값 ÷ 기준 픽셀 값 (16) = rem 값

예를 들어 Figma 디자인을 보고 있는데 제목이 24px이어야 한다고 가정해 봅시다. 24를 16으로 나누기만 하면 됩니다.

• 24 ÷ 16 = 1.5

• 따라서 CSS에서는 다음과 같이 작성합니다: font-size: 1.5rem;

더 작은 14px 캡션이 필요한가요?

• 14 ÷ 16 = 0.875

• 따라서 다음과 같이 작성합니다: font-size: 0.875rem;

코딩에 집중하고 있을 때 머릿속으로 나눗셈을 하는 것이 번거로울 수 있다는 점 이해합니다. 암산을 건너뛰고 싶다면, 탭에 이 픽셀에서 Rem로 변환기 같은 도구를 열어두는 것을 강력히 추천합니다. 픽셀 값만 입력하면 즉시 계산해 줍니다.

“62.5% 트릭” (계산을 훨씬 쉽게 만들기)

모든 CSS 코드마다 계산기를 사용하고 싶지 않다면, 개발자들이 고안해낸 62.5% 트릭이라는 영리한 방법이 있습니다.

방법은 다음과 같습니다. 스타일시트의 맨 윗부분에서 루트 html 글꼴 크기를 62.5%로 설정합니다:


html {
  font-size: 62.5%;
}

왜 62.5%일까요? 기본값인 16px의 62.5%가 정확히 10px이기 때문입니다.

이렇게 하면 “표준 기초 벽돌”을 정확히 10px로 재정의한 셈이 됩니다. 갑자기 계산이 터무니없을 정도로 쉬워집니다. 16으로 나누는 대신 10으로 나누기만 하면 됩니다(소수점을 왼쪽으로 한 칸 옮기는 것이죠).

• 24px을 원하시나요? 그냥 2.4rem이라고 적으세요.

• 14px을 원하시나요? 그냥 1.4rem이라고 적으세요.

• 36px을 원하시나요? 그냥 3.6rem이라고 적으세요.

정말 마법 같죠. 다만, 루트 글꼴 크기가 기본값으로 유지된 기존 프로젝트에 참여하는 경우에는 여전히 표준인 ’16으로 나누기’ 공식을 사용해야 한다는 점을 기억하세요.

궁극의 px-rem 치트 시트

수동으로 16을 나누든, 보조 모니터에 띄워둘 빠른 참조 가이드가 필요하든, 가장 일반적인 글꼴 크기에 대한 치트 시트는 다음과 같습니다 (표준 브라우저 기본 크기 16px 기준):

원하는 크기 (px)	입력할 값 (rem)	사용된 계산법
10px	0.625rem	10 ÷ 16
12px	0.75rem	12 ÷ 16
14px	0.875rem	14 ÷ 16
16px	1rem	16 ÷ 16 (기준 크기)
18px	1.125rem	18 ÷ 16
20px	1.25rem	20 ÷ 16
24px	1.5rem	24 ÷ 16
32px	2rem	32 ÷ 16
36px	2.25rem	36 ÷ 16
48px	3rem	48 ÷ 16
64px	4rem	64 ÷ 16

마지막으로 드리는 팁

모든 요소에 rem을 사용할 필요는 없습니다. 글꼴 크기, 여백(margin), 패딩(padding), 레이아웃 너비에는 환상적입니다. 하지만 1px 두께의 테두리(border: 1px solid black)와 같이 아주 작은 장식 요소의 경우에는 표준 픽셀을 그대로 사용하는 것이 완전히 괜찮으며, 오히려 선호됩니다!

이제 책임감 있게 코딩을 시작해 보세요. 사용자들(그리고 그들의 시력)이 감사해할 것입니다.