다양한 기기 화면 크기에서 웹사이트가 어떻게 보이는지 미리 확인하세요
웹사이트 URL을 입력하고 로드 버튼을 클릭하면 선택한 기기 크기로 미리볼 수 있습니다.
많은 웹사이트들이 보안을 위해 X-Frame-Options 또는 Content-Security-Policy 헤더를 사용하여 iframe 임베딩을 차단합니다. 이는 클릭재킹 등의 공격을 방지하기 위한 것입니다.
로컬 개발 서버(localhost), iframe 임베딩을 허용하는 사이트, 또는 직접 개발 중인 웹사이트에서 가장 잘 작동합니다.
뷰포트 크기는 동일하지만, 실제 기기의 렌더링 엔진, 픽셀 밀도, 터치 인터랙션 등은 시뮬레이션할 수 없습니다. 최종 테스트는 실제 기기에서 수행하는 것이 좋습니다.
큰 뷰포트(데스크톱, 노트북)를 작은 화면에서 확인하거나, 작은 뷰포트의 디테일을 확대해서 볼 때 유용합니다.
반응형 웹 디자인(Responsive Web Design)은 하나의 HTML 소스로 다양한 화면 크기에 최적화된 레이아웃을 제공하는 접근 방식입니다. CSS 미디어 쿼리(@media)를 사용하여 특정 뷰포트 너비에서 레이아웃·폰트 크기·여백 등을 동적으로 변경합니다. Tailwind CSS의 sm:, md:, lg: 접두사나 Bootstrap의 그리드 시스템도 동일한 반응형 원리를 기반으로 동작합니다. 반응형 디자인을 올바르게 구현하면 모바일·태블릿·데스크톱 사용자 모두에게 최적의 경험을 제공할 수 있습니다.
현재 가장 많이 사용되는 모바일 뷰포트는 390px(iPhone 14), 360~412px(Android 주류)이며, 태블릿은 768~1024px, 데스크톱은 1280~1920px 범위입니다. 그러나 실제 기기의 물리적 해상도와 CSS 픽셀(논리 픽셀)은 다릅니다. 예를 들어 iPhone 14의 물리적 해상도는 2532×1170이지만 CSS 픽셀 기준 뷰포트는 390×844입니다. 이는 기기 픽셀 비율(DPR)이 3배이기 때문이며, 미디어 쿼리는 CSS 픽셀 기준으로 동작합니다.
뷰포트 시뮬레이터는 실제 기기 없이도 다양한 화면 크기에서의 레이아웃을 빠르게 확인할 수 있게 해줍니다. 개발 단계에서 조기에 레이아웃 오류를 발견하면 수정 비용을 크게 줄일 수 있습니다. 특히 텍스트 잘림, 버튼 겹침, 이미지 비율 깨짐 등 모바일에서 자주 발생하는 문제를 미리 점검하는 데 유용합니다. 단, 최종 품질 검증은 실제 기기에서 직접 테스트하는 것을 권장합니다.