PX vs REM vs EM의 렌더링 메커니즘과 반응형 웹 디자인 단위 설계 전략
웹 프론트엔드 개발에서 단위 선택은 단순한 취향의 문제가 아니라 사용자의 시각 접근성(Accessibility)과 반응형 레이아웃의 유연성을 결정짓는 핵심 아키텍처입니다. 픽셀(px)은 디바이스의 물리적 화소에 고정되는 절대 단위(Absolute Unit)인 반면, rem(Root em)과 em은 폰트 크기 계층 구조에 따라 유기적으로 비례하는 상대 단위(Relative Unit)입니다.
W3C의 웹 콘텐츠 접근성 가이드라인(WCAG 2.1 SC 1.4.4 Resize Text)에 따르면, 시각 장애인이나 고령 사용자가 브라우저의 기본 글꼴 크기를 200%까지 확대했을 때 콘텐츠의 손실 없이 페이지가 재배치되어야 합니다. 고정 픽셀(px)로 작성된 웹사이트는 브라우저 글꼴 크기 변경을 무시하지만, rem 단위를 사용하면 전체 타이포그래피와 컴포넌트 여백이 사용자 설정에 맞춰 완벽하게 자동 스케일링됩니다.
본 도구는 픽셀(px)과 rem 단위의 수학적 환산뿐만 아니라 em, pt, %, Tailwind CSS 클래스까지 양방향으로 브라우저 로컬에서 즉시 계산하여 복사 가능한 CSS 스니펫을 제공합니다.
PX ↔ REM 무지연 양방향 실시간 변환
PX 입력 시 REM이, REM 입력 시 PX이 소수점 오차 없이 즉각 동기화되며 실시간 CSS 스니펫을 생성합니다.
루트 폰트 베이스(10px, 14px, 16px, 18px 등) 유연 조절
HTML 루트 크기(html { font-size: 16px; } 또는 62.5%) 변경에 맞춰 모든 환산 비율이 동적으로 재계산됩니다.
23종 빈출 디자인 토큰(Design Tokens) 원클릭 참조표
1px부터 128px까지 디자인 시스템에서 가장 자주 쓰이는 표준 스페이싱 및 타이포그래피 스케일을 즉시 확인하고 적용합니다.
EM, Point(pt), %, Tailwind CSS 유틸리티 동시 산출
인쇄 디자인(Figma pt), 부모 상대 단위(em), 그리고 Tailwind CSS의 폰트/패딩 유틸리티 클래스를 한눈에 비교합니다.
1. 웹 프론트엔드 5대 CSS 단위 특성 및 렌더링 기준 비교표
각 CSS 단위의 기준점, 상속 여부, 웹 접근성 영향 및 권장 사용처 비교표입니다.
| CSS 단위 | 분류 | 스케일링 기준점 (Anchor) | 부모 상속 (Cascading) | 주요 권장 사용처 |
|---|---|---|---|---|
| rem (Root em) | 상대 단위 | 최상위 <html> 루트 태그의 font-size | 부모 영향 없음 (루트만 참조) | 폰트 크기, 마진, 패딩, 레이아웃 그리드 (최우선 권장) |
| em | 상대 단위 | 직계 부모 요소의 font-size | 부모로부터 중첩 누적 상속 발생 | 아이콘 크기, 버튼 내부 패딩 (글자 크기와 비례 시) |
| px (Pixel) | 절대 단위 | 화면의 1 물리적 픽셀 (CSS 픽셀) | 상속 없음 (완전 고정) | 1px 미세 테두리(border), 박스 섀도우(box-shadow) |
| % (Percent) | 상대 단위 | 부모 요소의 너비/높이 또는 font-size | 부모 속성에 직접 종속 | line-height, 반응형 컨테이너 너비(width: 100%) |
| vw / vh / ch | 뷰포트 단위 | 브라우저 뷰포트 창 크기 / 글자 폭 | 화면 해상도 실시간 반응 | 풀스크린 히어로 섹션, 반응형 유동 폰트(clamp) |
2. 단위 변환 공식 및 CSS 테크닉 (62.5% Trick)
① PX에서 REM 변환 공식:
-
- 예: 루트 폰트가 16px일 때 24px =
② REM에서 PX 변환 공식:
-
- 예: 루트 폰트가 16px일 때 1.25rem =
③ 62.5% 루트 폰트 트릭 (CSS 10px Trick):
- 브라우저 기본 16px에 를 곱하면 이 됩니다.
- html { font-size: 62.5%; }을 지정하면 1.4rem = 14px, 1.6rem = 16px, 2.4rem = 24px처럼 10진수로 직관적인 계산이 가능해집니다.
3. Tailwind CSS의 4px 기반 스페이싱 시스템과 REM 스케일
① Tailwind CSS의 기본 단위 스케일 (1 unit = 0.25rem = 4px):
- p-1 = 0.25rem (4px) | p-2 = 0.5rem (8px) | p-3 = 0.75rem (12px) | p-4 = 1rem (16px)
- p-6 = 1.5rem (24px) | p-8 = 2rem (32px) | p-12 = 3rem (48px) | p-16 = 4rem (64px)
② Tailwind 폰트 크기 유틸리티 매핑:
- text-xs (0.75rem / 12px) | text-sm (0.875rem / 14px) | text-base (1rem / 16px)
- text-lg (1.125rem / 18px) | text-xl (1.25rem / 20px) | text-2xl (1.5rem / 24px) | text-3xl (1.875rem / 30px)
자주 묻는 질문 (FAQ)
Q.왜 웹 개발에서 px 대신 rem을 권장하나요?
rem을 사용하면 사용자가 브라우저나 OS 설정에서 글꼴 크기를 키웠을 때 웹사이트 전체가 자연스럽게 함께 확대되어 시각 접근성이 크게 향상됩니다. 고정 px 단위를 남발하면 글자가 커지지 않거나 레이아웃이 깨지는 치명적인 접근성 문제가 발생합니다.
Q.모든 속성을 rem으로 작성해야 하나요? px을 써도 되는 곳이 있나요?
아닙니다. 미세한 테두리 선(border: 1px solid ...), 얇은 그림자(box-shadow: 0 1px 2px ...), 디바이더 구분선 등 브라우저 폰트 확대와 무관하게 1픽셀 굵기를 유지해야 하는 시각적 장식 요소에는 여전히 px 사용이 적합합니다.
Q.rem과 em의 결정적인 차이점은 무엇인가요?
rem은 오직 최상위 <html> 태그의 폰트 크기만을 기준으로 하므로 어디서 사용하든 예측 가능합니다. 반면 em은 직계 부모의 폰트 크기를 기준으로 하므로, 부모와 자식이 중첩될수록 1.2em * 1.2em = 1.44배처럼 크기가 기하급수적으로 불어나는 상속 부작용(Cascading Issue)이 있습니다.
Q.피그마(Figma) 디자인 시안의 px 값을 rem으로 어떻게 쉽게 옮기나요?
디자인 시안의 기본 폰트가 16px 기준이라면 피그마의 픽셀 수치를 16으로 나누면 됩니다 (예: 24px = 1.5rem, 32px = 2rem). 본 계산기 상단의 변환기나 빈출 참조표를 활용하시면 원클릭으로 필요한 rem 코드와 Tailwind 클래스를 즉시 얻을 수 있습니다.
Q.입력한 수치 데이터가 외부 서버로 전송되거나 로깅되나요?
전송되지 않습니다. 본 도구의 모든 단위 계산 및 클립보드 복사 로직은 사용자의 브라우저 로컬 자바스크립트 엔진 안에서 클라이언트 사이드로 실행됩니다.