CSS를 조금이라도 만져본 적이 있다면, 디자인 시안을 바라보며 “여기에는 픽셀(px)을 써야 할까, 아니면 rem 값으로 만들어야 할까?” 하고 고민해 본 적이 있으실 겁니다.
풀 HD 화면 너비(특히 1920px)를 다루면서 이를 rem으로 변환하고 싶다면 아주 잘 찾아오셨습니다. 정확한 계산법을 파헤치고, 아주 쉬운 비유를 통해 왜 이렇게 작동하는지 설명해 드린 뒤 바로 코딩으로 복귀하실 수 있도록 도와드리겠습니다.
빠른 정답: 1920px를 rem으로 변환하기
결론부터 바로 말씀드리겠습니다. 웹사이트가 브라우저의 표준 기본 폰트 크기인 16px를 사용한다고 가정할 때, 1920px는 정확히 120rem입니다.
어떻게 이 값이 나왔을까요? 간단한 나눗셈입니다:
1920 ÷ 16 = 120
이게 전부입니다. 하지만 왜 16으로 나누는지, 왜 굳이 rem을 사용하는지, 혹은 이 계산을 완전히 생략하는 방법이 궁금하다면 잠시만 더 읽어주세요.
(꿀팁: 머리로 일일이 계산하는 것이 귀찮다면 편리한 픽셀-rem 변환기를 즐겨찾기해 두고 복잡한 계산을 맡겨보세요).
픽셀 vs Rem: “베이킹” 비유로 이해하기
웹 개발자들이 왜 이토록 rem에 집착하는지 이해하려면, 컴퓨터에서 잠시 벗어나 주방으로 가보는 것이 도움이 됩니다.
픽셀(px)을 딱딱한 금속 케이크 틀이라고 생각해 보세요. 9인치짜리 케이크 틀이 있다면, 이 틀은 항상 9인치입니다. 2인분 케이크를 굽든 20인분 케이크를 굽든 상관없이 틀의 크기는 절대 변하지 않습니다. 웹 디자인에서 픽셀은 엄격한 절대 단위입니다. 어떤 상자를 1920px로 설정하면, 사용자가 작은 스마트폰으로 보든 시력이 나빠 화면을 크게 확대해서 보든 상관없이 무조건 1920px로 유지됩니다.
반면에 Rem은 유연한 레시피와 같습니다. “1인당 밀가루 1컵”이라는 팬케이크 레시피를 떠올려 보세요. 1명이 먹는다면 1컵을 사용합니다. 4명이 먹는다면 자동으로 4컵으로 늘어납니다.
CSS에서 rem은 “root em”을 의미합니다. 이는 루트(root)(사용자가 브라우저에 설정해 둔 기본 폰트 크기)를 참조하여 모든 요소를 비례하여 비율을 조정합니다.
마법의 숫자: 16
기본적으로 시중에 있는 거의 모든 웹 브라우저는 루트 폰트 크기를 16px로 설정합니다.
따라서 CSS에 컨테이너 너비를 1rem으로 만들라고 지시하면 브라우저는 “좋아, 기본 크기가 16px니까 이 컨테이너 너비를 16px로 만들어야겠군” 하고 생각합니다.
만약 1920픽셀 너비의 풀 HD 래퍼(wrapper)를 만들고 싶다면, 스스로에게 이렇게 물어보기만 하면 됩니다: “1920 안에 16이 몇 번 들어가지?”
1920 ÷ 16 = 120
스타일시트에 max-width: 120rem;을 작성하기만 하면 끝입니다. 그리고 혹시 거꾸로 계산해야 할 때(다른 사람의 코드를 읽다가 도대체 120rem이 일반 화면 기준으로 얼마인지 궁금할 때)는 언제든 rem-픽셀 변환기를 사용해 역으로 계산해 볼 수 있습니다.
왜 신경 써야 할까요? (접근성 관점)
“계산하기 귀찮은데 그냥 1920px라고 적고 끝내면 안 되나?”라고 생각할지도 모릅니다.
물론 그렇게 하셔도 됩니다. 하지만 rem을 사용하여 웹사이트를 구축하면 화면을 확대해야 하는 사용자에게 엄청나게 친화적인 사이트가 됩니다. 시각 장애가 있는 사용자가 기본 브라우저 폰트 크기를 16px에서 24px로 변경하는 경우, 전부 px로만 만들어진 사이트는 완강하게 원래 크기를 고수하여 텍스트가 겹치거나 읽기 힘들게 되는 경우가 자주 발생합니다.
반면 rem으로 사이트를 제작했다면 사용자의 설정에 맞춰 전체 레이아웃이 자연스럽게 숨을 쉬듯 완벽하게 확대됩니다. 이건 거의 마법과 같으며, 당신을 접근성에 진심인 유능한 최고급 개발자처럼 보이게 만들어 줍니다.
한눈에 보는 CSS 치트 시트
CSS를 쓸 때마다 계산기를 두드릴 수는 없으니, 표준 16px 루트를 기준으로 한 빠른 참조 가이드를 준비했습니다.
공식: 목표 픽셀 크기 ÷ 16 = rem 값
- 16px = 1rem (기본값)
- 24px = 1.5rem
- 32px = 2rem (일반적인 제목용으로 좋음)
- 48px = 3rem
- 64px = 4rem
- 768px = 48rem (일반적인 태블릿 중단점)
- 1024px = 64rem (표준 데스크톱 중단점)
- 1440px = 90rem (대형 데스크톱)
- 1920px = 120rem (풀 HD 모니터)
다음번에 1920px 디자인을 마주하게 된다면, 이 유연한 레시피 방식을 떠올려 보세요. 16으로 나누고, 120rem을 입력한 뒤, 계속해서 멋진 프로젝트를 만들어 보세요!