🧱 뷰포트 단위(vw, vh)와 max-width 사용 전략

🧱 뷰포트 단위(vw, vh)와 max-width 사용 전략

반응형 웹에서 유연한 크기 조절을 위해 사용하는 핵심 단위가 vw, vh입니다. 하지만 무조건 뷰포트 단위만 사용하면 오히려 가독성 저하나 요소 깨짐이 발생할 수 있으므로, max-width와의 조합이 매우 중요합니다.

---

1️⃣ vw, vh 단위란?

• vw: viewport width – 브라우저 너비의 1%
• vh: viewport height – 브라우저 높이의 1%

.hero {
  width: 100vw;  /* 전체 너비 */
  height: 100vh; /* 전체 높이 */
}

👉 전체 화면을 차지하는 섹션, 배경 이미지 등에 자주 사용됩니다.

---

2️⃣ 뷰포트 단위의 장점

• 브라우저 크기에 따라 실시간으로 반응
• 반응형에서 픽셀 단위보다 유연함
• 고정된 크기가 없는 요소의 크기 제어 가능

---

3️⃣ 뷰포트 단위의 한계

• 글자가 너무 작거나 커질 수 있음 → 가독성 저하
• iOS 모바일에서 주소창 문제로 100vh 사용 시 레이아웃이 밀릴 수 있음

.text {
  font-size: 5vw; /* ❌ 작은 화면에서 너무 작아질 수 있음 */
}

해결책: clamp()나 max-width 조합 사용

---

4️⃣ max-width를 활용한 안정적인 조합

.container {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
}

👉 화면이 클 땐 max-width로 제한, 작을 땐 vw로 유연하게 대응

---

5️⃣ clamp() 함수로 텍스트 유동 조절

.title {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

• 최소값: 1rem
• 중간값: 2.5vw
• 최대값: 2rem

👉 화면 크기에 따라 글자 크기가 부드럽게 반응하지만, 너무 작거나 커지지 않음

---

6️⃣ 실전 패턴 요약

• 전체 영역 배경: width: 100vw; height: 100vh;
• 중앙 정렬 + 최대폭 제한: width: 90vw; max-width: 1200px;
• 텍스트 유동 크기: clamp()로 조절

---

📌 요약 정리

• vw/vh는 뷰포트 기준의 유연한 단위
• 가독성과 레이아웃 보호를 위해 max-width 또는 clamp()와 함께 사용
• 특히 텍스트에는 단독 사용보다 조합 전략이 중요

---

📌 다음 글 예고

다음 글: “모바일 퍼스트 디자인 전략 – 어떤 순서로 설계할까?”에서는 모바일 퍼스트 접근법의 이점과 실제 설계 순서를 소개합니다.