vw 계산기 (px ↔ vw 변환)

CSS vw 단위는 "뷰포트 폭(브라우저 화면 폭)"을 기준으로 크기를 계산합니다. 이 계산기는 px ↔ vw 변환은 물론, 반응형 타이포에 자주 쓰는 clamp() 수식도 생성합니다.

px → vw

vw → px

clamp() 생성기

clamp()는 반응형(Fluid) 타이포/간격을 만들 때 유용합니다. clamp(min, preferred, max) 형태로, 화면이 작을 때는 min, 커질수록 preferred가 증가하다가 max에서 멈춥니다.
개발용 유틸도 함께 쓰면 좋아요: 👉 UUID 생성기, 👉 JSON 유효성 검사기, 👉 서브넷 계산기

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

이 사이트는 광고 수익으로 유지되고 있습니다. 배너 또는 여기를 클릭하여 구매해 주시면 유지에 도움을 주실 수 있습니다.

vw는 "viewport width"의 약자로, 현재 화면 폭의 1%를 의미합니다. 예를 들어 화면 폭이 375px이라면 1vw = 3.75px 입니다. 그래서 vw를 쓰면 화면이 커질수록(또는 작아질수록) 요소의 크기가 자연스럽게 함께 변합니다.

디자인 기준 폭(예: 375, 360, 1440 등)을 viewportWidth로 두면:
vw = (px / viewportWidth) * 100
반대로 vw를 px로 바꾸려면:
px = (vw / 100) * viewportWidth

100vw는 스크롤바 폭을 포함할 수 있어, 가로 스크롤이 생기는 경우가 있습니다. 레이아웃이 미묘하게 흔들리면 width: 100%와 차이를 확인해보세요.
모바일에서 주소창/툴바 때문에 뷰포트가 "동적으로" 바뀌며, vw 기반 UI가 살짝 흔들릴 수 있습니다. 민감한 UI는 clamp() 또는 rem/em 중심으로 잡고, 일부만 vw를 쓰는 방식이 안정적입니다.
폰트까지 전부 vw로만 잡으면 너무 큰 화면에서 과하게 커질 수 있으니 clamp(min, preferred, max)로 상한/하한을 두는 것을 추천합니다.

기준 뷰포트 폭(375px)에서의 값입니다.

clamp()는 "최소/최대 제한이 있는 vw"라고 생각하면 쉽습니다. 이 페이지의 clamp 생성기 탭에서 min/max 크기와 min/max 뷰포트를 넣으면, 실무에서 바로 붙여 넣을 수 있는 수식을 만들어줍니다.

Q. 기준 뷰포트 폭은 뭘로 잡아야 하나요?
A. 보통 모바일 중심이면 360/375/390 중 하나, 데스크탑 중심이면 1440/1920 등을 "디자인 기준폭"으로 잡고 px→vw 변환을 합니다. 팀 디자인 시스템의 기준 폭을 따라가면 됩니다.
Q. vw 대신 %를 쓰면 안 되나요?
A. %는 "부모 요소" 기준, vw는 "화면" 기준입니다. 화면 기준으로 스케일링이 필요할 때 vw가 더 직관적입니다.

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

이 사이트는 광고 수익으로 유지되고 있습니다. 배너 또는 여기를 클릭하여 구매해 주시면 유지에 도움을 주실 수 있습니다.

📐 vw 계산기 (px ↔ vw 변환)