vw·vh와 svh·lvh·dvh 같은 동적 뷰포트 단위는 어떻게 다른가요?

이렇게 답해 보세요 (핵심 답변)

1vw와 1vh는 각각 뷰포트 너비와 높이의 1%를 뜻하지만, 모바일 브라우저에서는 주소창이나 하단 툴바가 나타나고 사라질 때 실제 보이는 높이가 달라집니다. 이를 보완하기 위해 주소창이 펼쳐진 가장 작은 뷰포트 기준인 svh, 주소창이 숨겨진 가장 큰 뷰포트 기준인 lvh, 그리고 현재 UI 상태에 맞춰 실시간으로 변하는 dvh를 사용합니다. 전체 화면 모달이나 히어로 영역을 만들 때는 스크롤 시 주소창 변화로 인한 화면 흔들림 여부를 함께 따져 단위를 고릅니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 높이를 뷰포트 단위로만 고정해 두면 내부 콘텐츠가 길어지거나 글꼴을 확대했을 때 내용이 잘릴 수 있어 min-height와 함께 검토합니다.
2. dvh는 모바일 주소창이 움직일 때마다 계산 높이가 바뀌므로 스크롤 중 레이아웃 재계산이나 시각적 점프가 생길 수 있습니다.

면접에서 자주 하는 실수

100vh가 모든 모바일 브라우저 상태에서 실제 화면에 보이는 가시 영역 높이와 항상 일치한다고 단정하면 안 됩니다.