반응형 미리보기
브라우저 개발자 도구를 열지 않고도 휴대폰, 태블릿 및 데스크톱 크기에서 웹사이트를 미리보고 나란히 비교할 수 있습니다.
웹사이트 미리보기
휴대폰, 태블릿 및 데스크톱 한눈에 비교
동일한 페이지를 세 가지 너비로 나란히 렌더링하여 크기를 일일이 전환하지 않고도 레이아웃 깨짐을 확인할 수 있습니다.
휴대폰390 x 844
태블릿768 x 1024
데스크톱1440 x 900
이용 방법
반응형 미리보기 도구는 선택한 기기 너비와 높이에 맞춰진 아이프레임 내에서 웹사이트를 로드하고 화면에 맞게 확대/축소하므로, 브라우저 창 크기를 조정하거나 개발자 도구를 열지 않고도 휴대폰, 태블릿 및 데스크톱 크기에서 반응형 디자인을 확인할 수 있습니다.
- URL 입력
주소를 입력하고 미리보기를 클릭하거나 Enter 키를 누르세요.
- 크기 선택
기기 사전 설정을 선택하거나 최대 3,840 px의 사용자 지정 너비와 높이를 설정하세요.
- 비교
회전하거나 기기 프레임을 전환하거나 아래로 스크롤하여 휴대폰, 태블릿 및 데스크톱을 함께 확인하세요.
확인 가능한 항목 및 확인 불가 항목
미리보기는 선택한 기기의 논리적 CSS 픽셀 크기로 페이지를 렌더링하므로, CSS 미디어 쿼리 또는 sizes 속성을 사용하는 레이아웃, 중단점 및 반응형 이미지를 확인하는 데 정확합니다.
- 기기 픽셀 비율: iframe은 Retina 디스플레이의 높은 픽셀 밀도를 시뮬레이션하지 않으므로, min-resolution 쿼리에 의해서만 교체되는 이미지는 실제 기기와 정확히 일치하지 않을 수 있습니다.
- 터치 및 호버: 이 도구는 마우스로 조작되는 브라우저 탭에서 실행되므로, 호버 전용 상호작용은 터치스크린 환경이 아닌 데스크톱 환경과 동일하게 작동합니다.
- 임베딩 차단: X-Frame-Options 또는 frame-ancestors 헤더를 전송하는 사이트는 이 도구를 포함한 모든 iframe에서 로드를 거부합니다. 이는 사이트 자체의 보안 설정이며 미리보기 도구가 재정의할 수 없습니다.
픽셀 퍼펙트 테스트용
브라우저 자체의 기기 에뮬레이션(DevTools의 기기 툴바) 또는 실제 기기를 사용하세요. 이 도구는 여러 너비에서 레이아웃을 빠르게 확인하는 데 가장 적합하며, 출시 전 실제 하드웨어에서의 테스트를 대체하는 것은 아닙니다.
자주 묻는 질문
브라우저 DevTools 없이 다양한 화면 크기에서 웹사이트를 미리 볼 수 있나요?
사이트 URL을 입력하고 미리보기를 클릭하세요. 그런 다음 iPhone SE (375x667), iPad (768x1024), 데스크톱 (1440x900) 등의 기기 사전 설정을 선택하거나 사용자 지정 너비와 높이를 입력하세요. 해당 뷰포트에 맞게 조정된 iframe 내에서 사이트가 로드됩니다. 회전을 클릭하여 세로 모드와 가로 모드를 전환하세요.
반응형 미리보기 도구에 포함된 기기 크기는 무엇인가요?
사전 설정에는 iPhone SE (375x667), iPhone 14 (390x844), iPad (768x1024), iPad Pro (1024x1366), MacBook (1280x800) 및 데스크톱 (1440x900)이 포함됩니다. 또한 최대 3,840 px까지 사용자 지정 너비와 높이를 입력하고 사용자 지정 크기 적용 버튼을 클릭하여 비표준 브레이크포인트를 미리 볼 수 있습니다.
휴대폰, 태블릿 및 데스크톱을 동시에 비교할 수 있나요?
네. 기본 미리보기 아래의 비교 섹션에서는 동일한 URL을 휴대폰, 태블릿 및 데스크톱 너비로 나란히 표시하므로, 크기를 일일이 전환하지 않고도 레이아웃이 깨지는 지점을 파악할 수 있습니다.
반응형 미리보기에서 웹사이트가 로드되지 않는 이유는 무엇인가요?
많은 사이트가 X-Frame-Options 또는 Content-Security-Policy: frame-ancestors HTTP 헤더를 사용하여 iframe 임베딩을 차단합니다. 사이트에서 이러한 헤더를 전송하면 브라우저는 해당 사이트를 모든 iframe 내부에 표시하는 것을 거부합니다. 이는 서버 측 보안 조치이므로 미리보기 도구로 우회할 수 없습니다. 영향을 받는 사이트에는 일반적으로 검색 엔진, 소셜 네트워크 및 뱅킹 사이트가 포함됩니다.
가로 방향에서 사이트 레이아웃을 테스트하려면 어떻게 해야 하나요?
기기 사전 설정(예: 390x844의 iPhone 14)을 선택한 후 회전 버튼을 클릭하세요. 그러면 너비와 높이가 844x390으로 바뀌어 가로 모드를 시뮬레이션합니다. 미리보기 위에 표시된 크기도 이에 맞게 업데이트됩니다. 세로 방향으로 돌아가려면 회전을 다시 클릭하세요.
iframe 기반 반응형 미리보기의 한계는 무엇인가요?
미리보기는 선택한 뷰포트의 논리 픽셀 크기로 사이트를 렌더링하지만, 실제 기기의 기기 픽셀 비율(device-pixel-ratio)을 복제하지는 않습니다. 고해상도 이미지나 min-resolution을 대상으로 하는 미디어 쿼리는 실제 기기에서와 동일하게 동작하지 않을 수 있습니다. 픽셀 단위의 정확한 테스트를 위해서는 브라우저의 기기 에뮬레이션 또는 물리적 기기를 사용하세요.