URL을 입력하면 모바일·태블릿·데스크탑 사이즈로 동시에 미리봅니다. 반응형 디자인 검토에 활용.
⚠️ 일부 사이트는 X-Frame-Options 헤더로 iframe 임베드를 차단합니다. 그런 경우 본 도구로 미리보기가 안 됩니다 (예: 네이버, 구글, 페이스북).
📱 모바일 (375×667)
📱 태블릿 (768×1024)
🖥️ 데스크탑 (1280×800)
반응형 미리보기 사용법
- 테스트할 URL을 입력합니다.
- "불러오기" 버튼을 누르면 3가지 디바이스 사이즈로 동시 표시됩니다.
- 각 화면에서 레이아웃·텍스트 크기·터치 영역 등을 검토합니다.
- 이슈가 있으면 코드를 수정하고 다시 불러옵니다.
주요 기능
- 모바일(375×667), 태블릿(768×1024), 데스크탑(1280×800) 동시 미리보기
- 실제 디바이스 프레임 디자인
- iframe 기반 — 실제 페이지 그대로 렌더링
- 외부 통신 없음 (브라우저가 직접 요청)
활용 예시
- 웹사이트 반응형 디자인 검증
- 발표·시연용 멀티 디바이스 스크린샷
- 경쟁사 사이트 반응형 분석
- 고객사 검토용 시각 자료
- 작업 중 사이트의 빠른 검토
왜 일부 사이트는 미리보기가 안 되나요?
보안상 많은 사이트가 X-Frame-Options: DENY 또는 Content-Security-Policy: frame-ancestors 헤더로 외부 iframe 임베드를 차단합니다. 이는 클릭재킹 공격을 막기 위한 표준 보안 조치이며, 본 도구로 우회할 수 없습니다.
자주 묻는 질문
네이버·구글·페이스북이 미리보기 안 되는 이유?
이런 대형 사이트는 보안상 iframe 임베드를 차단합니다. 일반적인 자체 사이트나 작업 중인 사이트는 대부분 표시됩니다.
localhost도 미리보기 가능한가요?
본 도구는 https로 접속하므로 localhost(http)는 일반적으로 안 됩니다. 로컬 개발 시에는 브라우저 DevTools의 디바이스 모드를 사용하세요.
실제 디바이스와 정확히 똑같나요?
iframe은 데스크탑 브라우저 안에서 작은 사이즈로 렌더링되어 실제 디바이스와 100% 동일하지는 않습니다. 정확한 테스트는 실제 디바이스 또는 BrowserStack 같은 서비스를 사용하세요.
스크린샷도 가능한가요?
현재는 미리보기만 지원합니다. 스크린샷이 필요하면 OS의 캡처 도구를 사용하세요.