프론트엔드 개발자라면 누구나 경험하는 상황: 디자인 목업에는 24px이라고 되어 있는데 코드베이스는 rem을 사용합니다. 계산기를 열어 16으로 나누고, 한 시간 뒤에 같은 계산을 반복합니다. 전용 CSS 단위 변환기가 이 마찰을 완전히 해소합니다.
CSS 단위 전체 그림
CSS는 여러 단위 유형을 제공하며, 올바른 단위 선택이 접근성과 반응형 디자인에 실제로 영향을 미칩니다.
px — 절대 픽셀
픽셀은 가장 직관적인 단위입니다. font-size: 16px는 정확히 16 CSS 픽셀입니다. 그런데 “절대”라는 말은 오해를 줍니다——CSS 픽셀은 디바이스 픽셀이 아닙니다. 레티나 디스플레이에서는 1 CSS 픽셀이 두 개(이상)의 물리적 픽셀에 매핑됩니다.
px 사용처: 보더(border: 1px solid), 그림자, 사용자 폰트 설정에 따라 스케일되면 안 되는 것.
rem — 루트 em
1rem은 루트 <html> 요소의 폰트 크기와 같습니다. 기본값이 16px이므로 1.5rem = 24px입니다. 핵심 장점: 사용자가 접근성을 위해 브라우저 폰트 크기를 크게 하면, rem 기반 레이아웃이 비례하여 스케일됩니다.
html { font-size: 16px; } /* 기본값 */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */rem 사용처: 폰트 크기, 스페이싱, 레이아웃 치수——사용자 접근성 설정을 존중해야 하는 모든 것.
em — 부모 em
1em은 현재 요소의 부모 폰트 크기와 같습니다. 이것은 복합됩니다: 이미 1.5em인 컨테이너 내부의 1.5em 폰트는 실효 크기가 2.25rem이 됩니다. 이 복합 동작은 강력하기도 하고 오류 원인이 되기도 합니다.
.card { font-size: 1.25em; } /* 부모가 16px이면 20px */
.card .caption { font-size: 0.8em; } /* 16px (0.8 × 20) */em 사용처: 컴포넌트 자체 폰트 크기에 따라 스케일되어야 하는 컴포넌트 내부 스페이싱(예: 버튼 패딩).
vw와 vh — 뷰포트 단위
1vw는 뷰포트 너비의 1%; 1vh는 뷰포트 높이의 1%입니다. 풀스크린 레이아웃, 히어로 섹션, 유동적 타이포그래피에 이상적입니다.
.hero { height: 100vh; }
.headline { font-size: 5vw; }주의: iOS Safari의 동적 툴바가 100vh 동작에 영향을 줍니다. 모바일 안전한 풀스크린 레이아웃에는 dvh(dynamic viewport height)를 사용하세요.
% — 퍼센트
퍼센트는 부모 요소의 해당 치수에 상대적입니다. width: 50%는 부모 너비의 절반을 의미합니다.
단위 간 변환 방법
기준값을 알면 계산은 간단합니다.
px → rem
rem = px / 루트 폰트 크기기본 16px 루트에서:
| px | rem |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 16 | 1 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
rem → px
px = rem × 루트 폰트 크기px → vw
vw = (px / 뷰포트 너비) × 1001440px 디자인 뷰포트에서 240px 요소는 240/1440 × 100 = 16.67vw.
온라인 CSS 단위 변환기
직접 계산하는 대신 브라우저 기반 도구를 사용하세요:
임의의 단위(px, rem, em, vw, vh, pt, cm, mm, in)로 값을 입력하면 다른 모든 단위의 등가값이 즉시 표시됩니다. 프로젝트에 맞게 루트 폰트 크기와 뷰포트 치수를 설정할 수 있습니다.
모든 것이 브라우저 내에서 실행됩니다——데이터가 기기 밖으로 나가지 않습니다.
실용적인 워크플로
디자인 인수인계
디자이너가 Figma 기본값인 px로 스펙을 전달합니다. 스타일 토큰은 rem을 사용합니다. 변환기를 사용하면 전체 스페이싱 스케일을 몇 초 만에 일괄 변환할 수 있습니다.
접근성 감사
브라우저 폰트 크기를 20px로 변경하고 어떤 요소가 깨지는지 확인하세요. px로 크기가 지정된 요소는 리플로우되지 않습니다——그것이 수정 목록입니다. 해당 값을 rem으로 다시 작성할 때 변환기가 시간을 절약합니다.
clamp()를 이용한 반응형 타이포그래피
clamp()는 최솟값, 선호 값, 최댓값 세 가지를 받습니다. 단위 혼합이 일반적입니다:
font-size: clamp(1rem, 2.5vw, 2rem);2.5vw 선호 값 선택: 800px 뷰포트에서 폰트를 20px로 하려면 20/800 × 100 = 2.5vw를 계산합니다. 변환기가 이 계산을 즉시 처리합니다.
rem vs em: 선택 기준
| 시나리오 | 단위 |
|---|---|
| 본문 텍스트 | rem |
| 제목 | rem |
| 버튼 패딩 (버튼 폰트에 따라 스케일) | em |
| 카드 패딩 (카드 폰트에 따라 스케일) | em |
| 전역 스페이싱 스케일 | rem |
| 미디어 쿼리 브레이크포인트 | em (브라우저 줌 호환성) |
확장 가능한 시스템을 위한 CSS 커스텀 속성
기본 단위에서 파생된 CSS 변수로 스페이싱 스케일을 정의하는 것이 최선의 접근법입니다:
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
}이 시스템에서 html { font-size }를 변경하면 전체 레이아웃이 스케일됩니다. CSS 단위 변환기는 디자인의 픽셀 값에서 스케일을 구축하는 데 도움이 됩니다.
요약
- 폰트 크기와 전역 스페이싱에는 rem 사용——사용자 접근성 설정을 존중합니다.
- 로컬 폰트 크기에 따라 스케일되어야 하는 컴포넌트 내부 스페이싱에는 em 사용.
- 뷰포트 상대 레이아웃과 유동적 타이포그래피에는 vw/vh 사용.
- 보더, 그림자, 절대로 스케일되면 안 되는 요소에는 px 사용.