CSS 단위 변환 가이드: px, rem, em, vw, vh 상세 설명

올바른 CSS 단위를 선택하는 것은 스타일시트를 작성할 때 가장 영향력 있는 결정 중 하나입니다. 선택한 단위는 요소가 다양한 화면 크기에서 어떻게 확장되는지, 사용자 기본 설정(브라우저 글꼴 크기 설정 등)에 어떻게 반응하는지, 그리고 레이아웃의 예측 가능한 동작을 결정합니다. 그러나 많은 개발자가 습관적으로 픽셀을 기본값으로 사용하여 상대 단위가 제공하는 유연성과 접근성 이점을 놓치고 있습니다. 이 가이드는 모든 주요 CSS 단위를 다루고, 각 단위를 언제 사용해야 하는지 설명하며, 단위 간 변환 방법을 보여주고, 현대 반응형 디자인을 위한 실용적인 모범 사례를 제공합니다.

CSS 단위 분류 이해하기

CSS 단위는 절대 단위와 상대 단위의 두 가지 주요 범주로 나뉩니다. 절대 단위는 고정된 물리적 크기를 가지며, 상대 단위는 다른 기준점에서 계산된 값을 파생합니다. 이 차이를 이해하는 것이 현명한 단위 선택의 기초입니다.

절대 단위

절대 단위는 고정된 크기의 측정값입니다. 웹 개발에서 가장 일반적으로 사용되는 절대 단위는 픽셀(px)입니다. 다른 절대 단위로는 포인트(pt), 센티미터(cm), 밀리미터(mm), 인치(in)가 있습니다. 이러한 단위는 주로 인쇄 스타일시트에 사용되거나 컨텍스트에 따라 변하지 않는 측정이 필요할 때 사용됩니다. 화면 기반 CSS에서는 px가 유일하게 자주 사용하는 절대 단위입니다.

상대 단위

상대 단위는 기준 값을 기반으로 최종 값을 계산합니다. em은 현재 요소의 글꼴 크기에 상대적이고, rem은 루트 요소의 글꼴 크기에 상대적이며, vw와 vh는 뷰포트 크기에 상대적이고, 백분율은 부모 요소에 상대적입니다. 상대 단위는 레이아웃이 다양한 컨텍스트에 자동으로 적응할 수 있게 해주므로 반응형 및 접근성 디자인의 초석입니다.

픽셀(px): 기준 단위

픽셀은 화면 픽셀에 직접 매핑되므로(기기 픽셀 비율에 대한 몇 가지 주의사항 있음) 가장 직관적인 CSS 단위입니다. px 값은 컨텍스트에 관계없이 항상 동일하므로 예측 가능하고 이해하기 쉽습니다. 그러나 이러한 예측 가능성에는 대가가 따릅니다: 픽셀 기반 크기는 사용자가 브라우저 기본 글꼴 크기를 변경해도 확장되지 않아 접근성 문제를 야기합니다.

px를 사용해야 할 때

• 테두리 너비: 1px 테두리는 글꼴 크기 설정에 관계없이 1px을 유지해야 합니다.
• 박스 그림자: 그림자 오프셋과 블러 반경은 일반적으로 일관된 시각적 효과를 위해 픽셀을 사용하는 것이 가장 좋습니다.
• 세밀한 디테일: 가는 구분선이나 정확한 아이콘 위치 지정과 같이 확장 시 시각적 디자인이 깨질 수 있는 값입니다.
• 루트 글꼴 크기: html { font-size: 16px; }을 기준선으로 설정하는 것이 일반적인 패턴이지만, 사용자의 브라우저 기본값을 존중해야 합니다.

px를 피해야 할 때

글꼴 크기, 패딩, 마진 및 사용자 기본 설정에 적응해야 하는 레이아웃 크기에 px를 사용하지 마세요. 브라우저 글꼴 크기를 20px로 늘린 사용자는 모든 텍스트가 그에 따라 확장되기를 기대하지만, px 기반 글꼴 크기는 이 변경에 반응하지 않습니다.

rem: 루트 상대 크기

)의 글꼴 크기에 상대적입니다. 대부분의 브라우저에서 기본 루트 글꼴 크기는 16px이므로, 1rem = 16px, 0.5rem = 8px, 2rem = 32px입니다. rem의 주요 장점은 사용자가 브라우저 기본 글꼴 크기를 변경할 때 함께 확장되어 접근성에 가장 적합한 선택이 된다는 점입니다.

px를 rem으로 변환하기

변환 공식은 간단합니다: 픽셀 값을 루트 글꼴 크기로 나누세요.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

62.5% 트릭

많은 개발자가 16으로 나누는 수학 연산이 번거롭다고 느낍니다. 인기 있는 트릭은 루트 글꼴 크기를 62.5%로 설정하여 1rem이 10px과 같게 만드는 것입니다. 이렇게 하면 암산이 간단해집니다: 14px는 1.4rem, 24px는 2.4rem 등으로 변환됩니다.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: 컨텍스트 상대 크기

em 단위는 현재 요소의 글꼴 크기(또는 font-size 이외의 속성의 경우 부모 요소)에 상대적입니다. 즉, 1em은 현재 글꼴 크기와 같으며, em 값은 요소가 중첩될 때 복합됩니다. 이러한 복합 동작은 강력할 수도 있고 혼란스러울 수도 있습니다.

복합 문제

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

각 중첩 요소는 글꼴 크기를 곱하여 지수적 증가를 초래합니다. 이것이 rem이 일반적으로 글꼴 크기에 더 적합한 이유입니다. 그러나 em은 컴포넌트 수준 확장이 필요한 특정 사용 사례에서 뛰어납니다.

em을 사용해야 할 때

• 컴포넌트 패딩과 마진: 간격이 컴포넌트 글꼴 크기에 따라 확장되기를 원할 때 em은 모든 것을 비례적으로 유지합니다. 버튼의 글꼴 크기를 늘리면 패딩도 자동으로 확장됩니다.
• 미디어 쿼리 중단점: 일부 개발자는 em 기반 중단점을 선호하는데, 이는 사용자 글꼴 크기 기본 설정에 따라 확장되어 적절한 콘텐츠 너비에서 레이아웃이 적응되도록 보장하기 때문입니다.
• 컴포넌트 내 아이콘 크기: em으로 크기가 지정된 아이콘은 주변 텍스트와 비례적으로 확장됩니다.

뷰포트 단위: vw, vh, vmin, vmax

뷰포트 단위는 브라우저 창 크기에 상대적입니다. 1vw는 뷰포트 너비의 1%, 1vh는 뷰포트 높이의 1%입니다. vmin은 vw와 vh 중 작은 값, vmax는 큰 값입니다. 이러한 단위는 사용 가능한 화면 공간에 반응하는 레이아웃을 만드는 데 필수적입니다.

일반적인 뷰포트 단위 사용 사례

모바일 vh 문제

모바일 브라우저에서 100vh는 항상 보이는 뷰포트 높이와 같지 않습니다. 브라우저의 주소 표시줄과 내비게이션 컨트롤이 공간을 차지하지만, 100vh는 이러한 컨트롤 뒤의 영역을 포함합니다. 이로 인해 전체 높이 영역의 하단 콘텐츠가 잘립니다. 최신 CSS는 동적 도구 모음을 고려하는 dvh(동적 뷰포트 높이)를 솔루션으로 제공합니다. 또는 JavaScript를 사용하여 window.innerHeight를 기반으로 CSS 사용자 정의 속성을 설정할 수 있습니다.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

새로운 뷰포트 단위: svh, lvh, dvh

CSS는 모바일 뷰포트 문제를 해결하기 위해 세 가지 새로운 뷰포트 높이 단위를 도입했습니다:

• svh(소형 뷰포트 높이): 모든 브라우저 UI가 보이는 상태의 뷰포트 높이(주소 표시줄 확장).
• lvh(대형 뷰포트 높이): 브라우저 UI가 최소화된 상태의 뷰포트 높이(주소 표시줄 축소).
• dvh(동적 뷰포트 높이): 브라우저 UI가 확장되거나 축소됨에 따라 변하는 현재 뷰포트 높이.

너비(svw, lvw, dvw)와 최소/최대 단위(svmin, lvmin, dvmin 등)에도 동일한 소형/대형/동적 변형이 존재합니다. 모바일 전체 화면 레이아웃에는 dvh를, 콘텐츠가 스크롤 없이 표시되어야 할 때는 svh를, 가능한 최대 공간을 채우고 싶을 때는 lvh를 사용하세요.

clamp()를 사용한 유동적 타이포그래피

CSS clamp() 함수는 반응형 타이포그래피의 게임 체인저입니다. 최소값, 선호값, 최대값의 세 가지 값을 받습니다. 브라우저는 선호값을 선택하되, 최소값과 최대값 사이로 제한합니다.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

이 접근 방식은 모바일에서 텍스트가 너무 작아지거나 데스크톱에서 너무 커질 위험 없이 뷰포트 기반 확장의 이점을 제공합니다. 글꼴 크기에 대한 미디어 쿼리 중단점의 필요성을 없애 CSS 복잡성을 크게 줄입니다.

변환 참조표

이 표를 일반적인 변환의 빠른 참조로 사용하세요. 모든 값은 16px 루트 글꼴 크기와 1920x1080 뷰포트를 기준으로 합니다.

CSS 단위 모범 사례

• 글꼴 크기로 rem 사용하기: 이것이 가장 중요한 규칙입니다. rem 기반 글꼴 크기는 사용자 기본 설정을 존중하고 애플리케이션 전체에서 일관되게 확장됩니다.
• 컴포넌트 간격으로 em 사용하기: 컴포넌트 내 패딩과 마진은 컴포넌트 글꼴 크기가 변경될 때 비례적으로 확장되므로 em의 이점을 누릴 수 있습니다.
• 테두리와 세밀한 디테일에 px 사용하기: 글꼴 크기에 따라 확장되지 않아야 하는 값(1px 테두리, 그림자 오프셋 등)은 픽셀을 사용해야 합니다.
• 레이아웃 너비로 백분율 사용하기: 유연한 레이아웃은 백분율 기반 열과 컨테이너 너비를 사용하여 콘텐츠가 다양한 화면 크기에서 재배치될 수 있도록 합니다.
• 전체 화면 요소에 뷰포트 단위 사용하기: 히어로 영역, 오버레이 및 뷰포트를 채워야 하는 모든 요소는 vh와 vw의 이점을 누릴 수 있습니다.
• clamp()로 유동적 타이포그래피 구현하기: 글꼴 크기에 대한 미디어 쿼리 중단점 대신 clamp()를 사용하여 최소값과 최대값 사이에서 부드러운 확장을 만드세요.
• 루트 font-size를 px로 설정하지 마세요: 항상 백분율(62.5% 등)을 사용하거나 브라우저 기본값을 유지하세요. 픽셀로 설정하면 사용자의 접근성 기본 설정을 덮어쓰게 됩니다.
• 일관성 유지하기: 프로젝트에 대한 단위 전략을 선택하고 일관되게 사용하세요. 무작위로 단위를 혼용하면 코드베이스의 유지 관리와 디버깅이 더 어려워집니다.