뷰포트 크기 및 반응형 브레이크포인트 테스터

브라우저 창이 웹 페이지 입장에서 실제로 얼마나 큰지 확인해 보세요. 이 도구는 CSS 픽셀 단위의 뷰포트 너비와 높이, 기기 픽셀 비율, 화면 방향을 읽어 들이고 현재 크기가 어떤 반응형 브레이크포인트에 해당하는지 실시간으로 보여줍니다. 창 크기를 조절하면 모든 값이 즉시 업데이트됩니다.

—×—px

브라우저 창의 크기를 조절하면 아래 값들이 실시간으로 업데이트되는 것을 확인하세요.

뷰포트 확인 중…브레이크포인트: —

뷰포트

—

window.innerWidth × innerHeight (CSS px)

레이아웃 뷰포트

—

documentElement 클라이언트 크기

기기 픽셀 비율

—

CSS px → 물리적 px

화면 방향

—

가로가 더 길거나 세로가 더 긺

Tailwind CSS 브레이크포인트

창 크기를 조절하면 현재 뷰포트가 속한 범위가 강조 표시됩니다.

접두사	최소 너비	적용 시작 지점
base	0px	0 – 639px
sm	640px	640 – 767px
md	768px	768 – 1023px
lg	1024px	1024 – 1279px
xl	1280px	1280 – 1535px
2xl	1536px	1536px+

기기 카테고리

모바일

<640px

태블릿

640–1023px

노트북

1024–1439px

데스크톱

≥1440px

크기 조절 가능한 테스트 패널

오른쪽 아래 모서리를 드래그해 이 패널의 크기를 조절하세요. 자신의 크기와 그 너비가 어떤 브레이크포인트에 해당하는지 알려주는 간단한 반응형 측정 도구입니다.

패널 크기—패널 브레이크포인트—

—

오른쪽 아래 모서리를 드래그하세요 ↘

일반적인 기기별 뷰포트 크기

참고용 대략적인 세로 모드 CSS 픽셀 뷰포트입니다. 실제 값은 브라우저와 운영체제에 따라 다를 수 있습니다.

기기	뷰포트 (CSS px)	DPR
iPhone SE	375 × 667	2×
iPhone 15 / 14 Pro	393 × 852	3×
Pixel 8	412 × 915	2.6×
iPad mini	768 × 1024	2×
iPad Pro 11"	834 × 1194	2×
Surface Pro	912 × 1368	2×
Laptop (720p)	1280 × 720	1×
Laptop (1080p)	1366 × 768	1×
Desktop (1080p)	1920 × 1080	1×

뷰포트란 무엇인가

뷰포트는 웹 페이지가 실제로 그려질 수 있는 가시 영역으로, 탭이나 주소창, 북마크 바를 제외한 브라우저 창의 콘텐츠 영역을 말합니다. 그렇기 때문에 뷰포트는 화면 해상도보다 거의 항상 작습니다. 화면은 패널 전체를 가리키는 반면, 뷰포트는 페이지가 실제로 사용할 수 있는 부분만을 의미하기 때문입니다. window.innerWidth와 window.innerHeight는 이 영역을 CSS 픽셀 단위로 알려주며, documentElement.clientWidth/clientHeight는 레이아웃 뷰포트(스크롤바가 있을 경우 그 너비를 뺀 동일한 영역)를 알려줍니다. 뷰포트는 창 크기를 조절하거나 화면을 분할하거나 기기를 회전하는 순간 즉시 바뀌기 때문에, 반응형 레이아웃이 실제로 반응하는 기준이 되는 값입니다.

CSS 픽셀과 물리적 픽셀, 그리고 devicePixelRatio

CSS 픽셀은 패널상의 물리적인 점이 아니라 레이아웃 단위입니다. 표준 디스플레이에서는 CSS 픽셀 하나가 물리적 픽셀 하나에 대응하지만, 고밀도 'Retina' 화면은 텍스트를 더 선명하게 보이도록 CSS 픽셀 하나에 물리적 픽셀 두 개 또는 세 개를 채워 넣습니다. window.devicePixelRatio는 바로 이 배율을 알려줍니다. 값이 2라는 것은 CSS 픽셀 기준 1440픽셀 너비의 뷰포트가 물리적으로는 2880픽셀로 그려진다는 뜻입니다. 웹 페이지는 CSS 픽셀 기준으로 레이아웃되므로, DPR이 3이고 뷰포트 너비가 390픽셀로 보고되는 휴대폰은 실제 패널 너비가 약 1170픽셀입니다. 화면의 전체 물리적 해상도와 픽셀 밀도를 확인하려면 화면 크기 확인 도구와 화면 해상도 테스트 도구를 이용하세요.

반응형 브레이크포인트

브레이크포인트란 레이아웃이 바뀌는 뷰포트 너비를 말합니다. 열이 세로로 쌓이거나, 메뉴가 접히거나, 글자 크기가 조정되는 지점이죠. CSS 미디어 쿼리와 Tailwind CSS 같은 유틸리티 프레임워크는 이름이 붙은 몇 가지 너비 값을 정의해 두고, 해당 너비 이상에서 스타일을 적용합니다. Tailwind의 기본값은 640px의 sm, 768px의 md, 1024px의 lg, 1280px의 xl, 1536px의 2xl이며, 640px 미만은 접두사가 없는 base 범위에 해당합니다. 아래 참고표는 창 크기를 조절할 때 현재 적용 중인 범위를 강조 표시하며, 드래그 가능한 테스트 패널은 자신의 너비가 어떤 브레이크포인트에 해당하는지 알려줍니다. 창 전체 크기를 바꾸지 않고도 컴포넌트가 다양한 크기에서 어떻게 동작하는지 빠르게 미리 볼 수 있는 방법입니다.

innerWidth가 화면 너비와 다른 이유

패널의 해상도와 페이지가 인식하는 뷰포트 사이에는 여러 요소가 끼어듭니다. 브라우저 크롬(탭, 툴바, 보이는 스크롤바)은 사용 가능한 영역에서 빠집니다. 페이지 확대/축소도 영향을 미칩니다. 화면을 확대하면 들어가는 CSS 픽셀 수가 줄어들어 창이 이동하지 않았는데도 innerWidth가 줄어들고, devicePixelRatio도 함께 변합니다. 모바일에서는 메타 뷰포트 태그인 <meta name="viewport" content="width=device-width, initial-scale=1">가 브라우저에게 약 980px짜리 데스크톱인 척하는 대신 레이아웃 뷰포트를 기기 너비로 설정하라고 알려주며, 반응형 사이트가 이 태그를 필요로 하는 이유이기도 합니다. 운영체제의 디스플레이 배율 설정 또한 CSS 픽셀 수를 바꾸기 때문에, 동일한 모니터 두 대가 서로 다른 뷰포트 크기를 보고할 수도 있습니다.