1rem은 몇 픽셀일까요? 전문 용어 없는 완벽 가이드

1rem은 몇 픽셀인가요? 전문 용어 없는 완벽 가이드

최근 웹 디자인을 시작했거나 CSS를 작성해 보셨다면 “rem”이라는 용어를 접하고 바로 궁금해졌을 것입니다. 잠깐, 그냥 픽셀(px)을 쓰면 안 되는 걸까? 그리고 더 중요한 것은, 정확히 1rem은 몇 픽셀일까요?

여기에 군더더기 없는 짧은 답변이 있습니다: 기본적으로 1rem은 16픽셀과 같습니다.

하지만 모든 곳에 16px를 하드코딩하기 전에, 애초에 왜 rem이 존재하는지, 그리고 왜 고정된 픽셀에만 의존하는 것이 웹사이트를 생각보다 훨씬 사용자 친화적이지 않게 만드는지 이야기해 봅시다.

“Rem”이란 무엇인가요?

“Rem”은 Root EM의 약자입니다. “em”의 유래가 된 수백 년 된 타이포그래피 역사에 대해서는 너무 걱정하지 마세요. 현대 웹 디자인에서 “root”는 단순히 핵심 HTML 문서를 의미합니다.

쿠키를 굽는 것에 비유해 봅시다. “root”는 마스터 레시피입니다. 만약 마스터 레시피에 “1배치 = 쿠키 16개”라고 되어 있다면, 2배치(2rem)를 요청하면 32개의 쿠키를 얻게 됩니다.

나중에 마스터 레시피를 변경하여 1배치가 쿠키 20개가 되도록 결정한다면, 갑자기 2rem은 40개의 쿠키를 의미하게 됩니다. 모든 곳에서 “2배치”라는 지침을 일일이 수정할 필요 없이 마스터 계획만 업데이트하면 다른 모든 것이 완벽하게 조정됩니다.

픽셀 vs. Rem: 대결

픽셀은 고정적입니다. 마치 석판에 지시 사항을 새기는 것과 같습니다. 16px는 화면에서 어떤 상황에서도 정확히 16픽셀입니다.

그렇다면 시각 장애가 있는 사용자가 눈을 찡그리지 않고 편안하게 읽기 위해 브라우저의 기본 글꼴 크기를 24px로 변경하면 어떻게 될까요? 사이트가 엄격하게 픽셀로 구축된 경우 텍스트는 고집스럽게 16px에 고정된 채로 유지됩니다. 본질적으로 사용자의 브라우저 설정을 무시한 셈입니다.

하지만 rem을 사용하면 사이트가 사용자의 설정에 적극적으로 귀를 기울입니다. 1rem은 기본적으로 “사용자의 기본값에 1을 곱한 값”을 의미합니다. 사용자의 기본값이 16px라면 16px로 보이고, 기본값이 24px라면 1rem 텍스트는 매끄럽게 24px로 확대됩니다. 이는 모든 사람에게 더 나은 사이트를 만들어주는 즉각적인 접근성 향상입니다.

계산하기 (그리고 계산을 피하는 방법)

rem을 픽셀로 변환하는 것은 간단한 곱셈입니다. 기본 픽셀 크기(보통 16)에 rem 값을 곱하기만 하면 됩니다.

• 0.5rem = 8px (16 x 0.5)

• 1.5rem = 24px (16 x 1.5)

• 2rem = 32px (16 x 2)

하지만 솔직히 말해서, 코딩에 집중하는 동안 암산을 좋아하는 사람은 없습니다. 실시간으로 2.125rem이 얼마인지 알아내려고 할 때 계산기를 꺼낼 필요가 없습니다. 도구가 어려운 일을 대신 하도록 하세요.

시간을 절약하기 위해 이 유용한 변환기들을 즐겨찾기에 추가하세요:

• rem 값이 있지만 실제 크기가 얼마나 될지 알고 싶으신가요? 이 Rem에서 픽셀로 변환기를 사용하세요.

• 픽셀 단위로 완벽한 Figma 디자인을 보고 CSS로 변환해야 하나요? 픽셀에서 Rem로 변환기로 이동하세요.

개발자 치트 시트

가장 일반적인 크기에 대한 빠른 참조가 필요한 경우를 위한 치트 시트입니다. 이는 표준 16px 기본 브라우저 크기를 가정합니다.

일반적인 사용 사례	픽셀 환산값	REM 값
작은 UI 간격 또는 테두리	4px	0.25rem
마진, 패딩, 작은 틈	8px	0.5rem
작은 텍스트, 캡션, 메타데이터	12px	0.75rem
기본 본문 텍스트	16px	1rem
부제목, 서문 단락	20px	1.25rem
H3 제목, 큰 버튼	24px	1.5rem
H2 제목, 섹션 제목	32px	2rem
H1 제목, 히어로 텍스트	48px	3rem