2026년 정적 HTML 히어로를 위한 CSS 동적 뷰포트 단위: dvh, svh, lvh, 모바일 Safari 크롬, 클라우드 Mac mini WebKit QA

정적 랜딩은 여전히 풀블리드 히어로에 min-height:100vh를 자주 싣는다. 그런데 iOS Safari는 URL 표시줄이 접히는 순간 “한 뷰포트”의 의미를 실제로 칠해지는 영역과 어긋나게 만든다. 헤드라인이 대략 40~120px 잘리고, 데모 영상이 홈 인디케이터 뒤에 숨으며, 주요 CTA는 의도치 않은 스크롤 뒤에야 보이는 일이 반복된다. 2026년 CSS는 동적 뷰포트 단위—dvh, svh, lvh—로 지금 보이는 브라우저 크롬에 맞춘 높이를 제공한다. 이 글은 Chromium 에뮬만으로는 부족한 MPA 팀을 위해 WebKit 검증 레인을 정리한다. 함께 읽으면 좋은 글: 고정 헤더·해시 앵커의 scroll-padding, 모달·중첩 스크롤의 overscroll-behavior, 반응형 이미지·LCP의 srcset·picture. 스크롤·레이아웃·미디어 정책을 한 줄로 맞추자.

단위 결정표, 점진적 @supports 스택, 그리고 숫자로 남길 가드레일(마케팅 히어로 기본 100dvh, 노치 기기 하단 인셋은 종종 34px 부근, 로케일당 실기 QA 45분 가이드)을 가져가길 바란다.

국내 캠페인 LP는 모바일 우선이지만 검증은 데스크톱 중심으로 끝나기 쉽다. 동적 단위는 CSS로 격차를 줄이지만, 세이프 에어리어·고정 내비·이미지 intrinsic 크기 같은 인접 주제를 함께 보지 않으면 다른 CLS나 접근성 이슈가 표면으로 올라온다.

모바일 Safari에서 100vh가 깨지는 이유

고전 vh는 라지 뷰포트—브라우저 UI가 최대한 숨겨졌을 때의 높이—를 기준으로 한다. 모바일 Safari는 스크롤에 맞춰 상단 URL 영역과 하단 툴바를 애니메이션하므로 실제 페인트 영역은 단위가 가정한 값보다 훨씬 작아질 수 있다. 데스크톱 Chrome 반응형 모드는 같은 UI 전이 곡선을 재현하지 못하는 경우가 많아, 에뮬만 돌린 팀이 임원 iPhone에서 처음 회귀를 보는 패턴이 반복된다.

실패의 본질은 “Safari가 틀렸다”가 아니라 vh가 2012년 레이아웃 뷰포트 질문에 답했는데 2026년 제품은 “지금 사용자가 보는 높이”를 원한다는 기대가 바뀌었다는 점이다. 동적 단위는 이 간극을 JS 리사이즈 리스너 없이 메우고, 컴포지터 스크롤과 싸우며 배터리를 깎는 긴 마케팅 페이지에서도 이점이 있다.

추가로 window.innerHeight를 섞으면 진실이 이중화되고, 툴바 전환 경계에서 한 프레임 튀는 현상이 생길 수 있다. 정적 사이트일수록 높이 계산을 CSS로 모으는 편이 운영에 유리하다.

dvh 대 svh·lvh 판단표

dvh는 툴바가 나타나거나 사라질 때 현재 가시 높이를 따라간다. svh는 가장 작은 크롬 구성에 고정되어 URL 아래로 CTA가 숨는 일을 막아야 할 때 유리하다. lvh는 옛 vh에 가깝다. 가로는 dvw, svw, lvw로 노치 좌우로 삐져나가는 캐러셀에 쓸 수 있다.

단위	적합	오용 리스크
100dvh	전체 화면 히어로, 스플래시	스크롤 중 미세한 높이 변화로 배경 영상이 움직여 보임
100svh	첫 화면 보장, 프로모 바	UI가 숨으면 여백이 커짐
100lvh	레거시 호환, 데스크톱 띠	iOS에서 고전 vh와 비슷한 클리핑
calc(100dvh - 4rem)	고정 내비를 뺀 히어로	env(safe-area-inset-*) 누락 시 노치에서 깨짐

마케팅 히어로는 기본적으로 min-height:100dvh를 권한다. 법적 배너처럼 “URL이 펼쳐진 상태에서도 반드시 보여야” 하는 아트 디렉션이면 svh를 검토한다.

배경이 사진이면 동적 변화를 받아들이기 쉽지만, 구도가 고정된 영상이면 object-fit:cover와 안전 마진, 혹은 첫 화면을 svh로 잠그는 등 표현 요구에 맞춘 타협이 필요하다.

정적 HTML 히어로 패턴

엄격한 height보다 min-height를 우선해 번역으로 제목이 길어져도 디센더가 잘리지 않게 한다. 가운데 정렬은 flex로 충분하지만, 히어로 내부에 스크롤을 가두려면 overscroll-behavior까지 검증했을 때로 한정하라. 배경 영상은 컨테이너를 dvh로 잡고 미디어에 object-fit:cover를 주어 LCP 귀속을 왜곡하지 않는다.

좌우 분할(왼쪽 카피, 오른쪽 목업)에서는 목업을 max-height:70dvh로 제한해 가로 모드에서 CTA가 화면 밖으로 밀리지 않게 한다. 타이포는 clamp()로 동적 박스 안에 두고 JS를 줄인다.

히어로 안에 보조 링크 줄이나 로고 띠를 넣을 때는 접기/우선순위 설계가 필요하다. 작은 화면에서 “전체 뷰포트 높이”는 CTA 가시성을 직격한다.

세이프 에어리어와 고정 푸터

동적 단위는 박스 크기이며 env(safe-area-inset-top)·env(safe-area-inset-bottom)를 대체하지 않는다. 고정 구매 바 예시:

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

iPhone 15급에서 하단 인셋이 34px 전후로 자주 잡히며, 16px만 주면 버튼이 잘린다. 노치 뒤까지 그리려면 viewport 메타에 viewport-fit=cover를 넣는다. 없으면 env가 0처럼 보여도 하드웨어 안내 영역은 남는 불일치가 생길 수 있다.

탭 영역과 포커스 링 가시성도 함께 보고, VoiceOver로 하단 패딩이 초점을 화면 밖으로 밀지 않는지 확인한다.

@supports 점진 강화

.hero {
  min-height: 100vh;
}
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
}
@supports (height: 100dvh) {
  .hero { min-height: 100dvh; }
}

이 순서로 오래된 WebKit에 우아하게 내려간다. 크리티컬 CSS를 인라인한다면 스택 전체가 첫 14KB gzip 예산에 들어가는지도 점검 대상이다.

디자인 토큰이 생성한 CSS에서 이 블록을 “선택적 최적화”로 취급하지 말 것. 히어로는 항상 폴드 위다.

2026년 WebKit 주의점

macOS Safari 비전체 화면에서는 동적 단위가 가시 콘텐츠 사각형에 매핑되어 iOS와 8~12px급 차이가 날 수 있다. 두 OS 모두 스크린샷을 남긴다. 100dvh가 툴바 전환으로 변할 때 background-attachment:fixed는 피한다. 패럴랙스 트릭은 메인 스레드 페인트를 유발해 베이스 M칩 고부하에서 55fps 아래로 떨어지기 쉽다.

dvh 크기 히어로 안의 sticky는 단위 변화 때 “튀는” 것처럼 보일 수 있다. 가능하면 sticky 내비는 루트로 올리고 장식 배경만 dvh에 맡긴다.

svh 프로모와 dvh 히어로를 같이 쓰면 회전·iPad 분할에서 조합 깨짐이 잘 난다. 스마트폰 폭만 있는 컴프에서는 놓치기 쉬우니 실기 폭 패턴을 늘리자.

실기 체크리스트

1. URL 표시줄이 펼쳐진 상태로 로드해 주요 CTA가 스크롤 없이 보이는지 확인한다.
2. 120px 정도 스크롤해 툴바 수축 시 법적 문구가 가려지지 않는지 본다.
3. 가로 모드에서 svh 프로모가 홈 인디케이터를 피하는지 확인한다.
4. VoiceOver로 고정 푸터를 순회하며 하단 패딩이 초점을 화면 밖으로보내지 않는지 본다.
5. 안정 Safari와 STP 필름스트립을 비교해 뷰포트 변경 회귀를 잡는다.
6. 변경 티켓에 전후 PNG를 첨부해 디자인 서명 흔적을 남긴다.

영어보다 문자열이 30% 이상 긴 로케일은 히어로 검증에 로케일당 45분을 잡는 편이 안전하다. 독일어·브라질 포르투갈어는 숨은 줄바꿈 가정을 깨기 쉽다.

FAQ

모든 vh를 dvh로 바꿔야 하나요?

아닙니다. 장식용 중단 밴드는 vh를 유지해도 됩니다. 전체 뷰포트 히어로, 모달 시트, 모바일 크롬과 맞닿는 고정 CTA를 우선하세요.

Lighthouse가 dvh를 벌점 주나요?

실험실은 히어로 이미지에 치수가 없으면 레이아웃 시프트를 보고할 수 있습니다. 동적 단위는 width/height 속성의 대체재가 아닙니다.

JS innerHeight와 섞어도 되나요?

비추천입니다. 이중 진실과 리스너 기반 저킹을 다시 불러옵니다. @supports가 있는 CSS 동적 단위를 우선하세요.

MacHTML로 Apple Silicon Mac mini를 빌리면 현장 이해관계자와 같은 WebKit을 손에 넣는다. Linux 컨테이너의 Safari 흉내가 아니다. 노드는 자동 스크린샷 diff용 SSH와 프레임 단위 검토용 VNC를 제공할 수 있다. 대기 전력은 흔히 6~12W로, 이 주 뷰포트 감사를 돌려도 런치 직전 히어로 회귀를 고치는 비용보다 저렴한 경우가 많다.

공개 가격은 하루 약 16.9달러다. 캠페인 뒤 놀 데스크톱을 추가 구매하는 것보다 예측 가능하다. QA가 끝나면 인스턴스를 끄면 되고, dvh 스택은 Git에 남으며 금속은 36개월 조달 주기 동안 조용히 감가되지 않는다.