Viewport 단위(vw, vh)와 rem 단위 최적 활용법｜반응형 웹 필수 개념

반응형 웹에서 폰트 크기와 레이아웃을 유연하게 조절하기 위해서는 vw, vh, rem 같은 단위의 특성을 정확히 이해해야 합니다.
이 글에서는 Viewport 단위와 rem 단위의 차이점, 그리고 실무에서 혼합해 사용하는 최적 전략을 예제와 함께 소개합니다.
반응형 디자인의 핵심 원리를 파악해보세요.

Viewport 단위란?

Viewport 단위는 브라우저 화면 크기를 기준으로 비율을 계산하는 단위입니다.

단위	의미	예시 (가로 1200px, 세로 800px)
`1vw`	Viewport Width의 1%	12px
`1vh`	Viewport Height의 1%	8px
`1vmin`	`vw`와 `vh` 중 작은 값의 1%	8px
`1vmax`	`vw`와 `vh` 중 큰 값의 1%	12px

💡 장점: 화면 크기에 따라 자동으로 크기가 변해 완벽한 반응형 구현 가능
⚠️ 주의점: 너무 작은 화면에서 글자나 요소가 지나치게 작아질 수 있음

rem 단위란?

rem 단위는 HTML 루트 요소(<html>)의 폰트 크기를 기준으로 비율을 계산합니다.

html {
  font-size: 16px;
}

p {
  font-size: 1.25rem; /* = 20px */
}

html {
  font-size: 16px;
}

p {
  font-size: 1.25rem; /* = 20px */
}

CSS

1rem = html의 font-size 값
일반적으로 html의 기본값을 16px로 설정
장점: 사용자가 브라우저 기본 폰트 크기를 변경해도 유연하게 반응
실무에서 폰트 사이즈 관리에 매우 유리

Viewport 단위 vs rem 단위 비교

항목	Viewport 단위(vw/vh)	rem 단위
기준	브라우저 화면 크기	루트 요소 폰트 크기
주 사용처	배경, 섹션 크기, 큰 제목	폰트, 버튼, 일반 UI
장점	완벽한 반응형 비율	접근성과 유지보수성 우수
단점	너무 작은 화면에서 요소가 과도하게 작아질 수 있음	직접 반응형 처리가 어려움

두 단위를 혼합해 쓰는 전략

가장 많이 사용되는 방식은 clamp()와 함께 혼합 사용입니다.

html {
  font-size: clamp(14px, 1.2vw, 18px);
}

h1 {
  font-size: 2rem; /* 루트 글자 크기에 비례 */
}

.section {
  padding: 5vh 2vw; /* 세로와 가로를 Viewport 비율로 */
}

html {
  font-size: clamp(14px, 1.2vw, 18px);
}

h1 {
  font-size: 2rem; /* 루트 글자 크기에 비례 */
}

.section {
  padding: 5vh 2vw; /* 세로와 가로를 Viewport 비율로 */
}

CSS

clamp() → 최소, 유동, 최대 값을 동시에 설정해 극단적인 크기 변화 방지
rem → 폰트와 버튼 같은 가독성이 중요한 요소
vw/vh → 레이아웃 여백, 섹션 크기 같은 화면 비율이 중요한 요소

📱 실무 팁: 기본은 rem을 사용하고, 화면 크기에 직접적으로 반응해야 하는 영역만 vw/vh로 설정하세요.

실무 예시: 반응형 Hero 섹션

<section class="hero">
  <h1>반응형 웹 디자인</h1>
  <p>Viewport와 rem 단위를 활용한 유연한 레이아웃</p>
</section>

<section class="hero">
  <h1>반응형 웹 디자인</h1>
  <p>Viewport와 rem 단위를 활용한 유연한 레이아웃</p>
</section>

HTML

.hero {
  height: 100vh;
  padding: 10vh 5vw;
  text-align: center;
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: #fff;
}

.hero h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.hero p {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

.hero {
  height: 100vh;
  padding: 10vh 5vw;
  text-align: center;
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: #fff;
}

.hero h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.hero p {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

CSS

📝 설명:

height: 100vh → 화면 높이 전체를 Hero 영역으로

padding: 10vh 5vw → 화면 크기에 따라 자동으로 여백 조정

clamp() → 글자 크기를 너무 작거나 크게 변하지 않도록 제한

마무리

Viewport 단위와 rem 단위를 적절히 조합하면 완벽한 반응형 디자인을 구현할 수 있습니다.
폰트와 핵심 UI에는 rem을, 여백이나 전체 레이아웃에는 vw/vh를 사용해 균형을 맞추세요.
또한 clamp()를 통해 최소·최대 값을 설정해 사용자 경험을 향상시킬 수 있습니다.

Summary in English

Learn how to effectively use viewport units (vw, vh) and rem for responsive web design. Discover practical tips for combining these units to create flexible layouts and scalable typography.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의Ajay Gorecha