모바일 웹 미리보기

×

위 툴바에서 주소를 입력하고
[미리보기 시작]을 눌러주세요.

실제 개발자 도구처럼 원하는 기기와 해상도를 자유롭게 조작할 수 있습니다.

모바일 웹 미리보기 사용법 및 주요 기능 안내

스마트폰, 태블릿 등 다양한 기기 환경에서 내 웹사이트가 어떻게 반응하는지 테스트해 보세요. 구글 크롬 개발자 도구의 디바이스 시뮬레이터 기능을 웹상에서 직관적이고 빠르게 사용할 수 있습니다.

주요 특징

  • 다양한 기기 프리셋 지원: 최신 iPhone, Galaxy, iPad 등 대표적인 스마트기기 해상도를 원클릭으로 테스트할 수 있습니다.
  • 자유로운 해상도 조절: 기본 프리셋 외에도 Width(가로)와 Height(세로) 픽셀을 직접 입력하여 맞춤형 화면을 구성할 수 있습니다.
  • 스마트 줌(Zoom) 기능: 데스크탑 모니터 크기에 맞게 50% ~ 150%까지 화면 배율을 자유자재로 축소 및 확대할 수 있습니다.
  • 원클릭 가로/세로 전환: 스마트폰을 가로로 눕혔을 때(Landscape) 웹사이트가 깨지지 않는지 즉시 확인할 수 있습니다.
  • 목업(Mockup) 테두리: 아이폰 특유의 노치 디자인과 둥근 테두리를 입혀, 클라이언트 보고용 캡처 화면을 예쁘게 만들 수 있습니다.

사용 방법

  1. 검색창에 테스트하고자 하는 웹사이트 주소(URL)를 입력하고 [미리보기 시작] 버튼을 누릅니다.
  2. 툴바 첫 번째 드롭다운에서 테스트할 기기(iPhone, iPad 등)를 선택합니다.
  3. 화면이 모니터보다 너무 크거나 작다면 확대비율(Zoom)을 조절하여 한눈에 들어오게 맞춥니다.
  4. 캡처가 목적이라면 우측의 '테두리(Mockup) 표시'를 체크하여 기기 테두리를 입힙니다.
  5. 가로/세로 회전 버튼을 눌러 디바이스 방향에 따른 레이아웃 붕괴 현상이 없는지 점검합니다.

자주 묻는 질문 (FAQ)

Q. 디바이스 시뮬레이터(반응형 웹 뷰어)는 어떤 도구인가요?
A. 내가 만든 웹사이트, 쇼핑몰, 블로그 등이 스마트폰이나 태블릿 등 다양한 기기 환경에서 어떻게 보이는지 한눈에 테스트할 수 있는 무료 웹 개발자 도구입니다. 아이폰 14, 갤럭시 S23, 아이패드 미니 등 사람들이 가장 많이 사용하는 대표적인 디바이스 해상도 프리셋을 제공하며, 사용자가 직접 가로 세로 픽셀을 입력해 테스트할 수도 있습니다. 구글 크롬의 개발자 도구(F12)를 켜지 않아도 직관적이고 빠르게 웹사이트의 반응형 디자인을 점검할 수 있습니다.
Q. 네이버나 구글 등 일부 유명 사이트가 하얗게 뜨면서 보이지 않습니다.
A. 대형 포털 사이트나 보안이 강력한 웹사이트(은행, 관공서 등)는 악의적인 해킹(클릭재킹)을 방지하기 위해 'X-Frame-Options' 또는 'Content-Security-Policy(CSP)'라는 강력한 보안 정책을 서버에 설정해 둡니다. 이 정책이 설정된 사이트는 다른 외부 사이트의 Iframe(아이프레임)에서 화면을 몰래 불러오는 것을 브라우저 차원에서 강제로 차단합니다. 이는 정상적인 보안 작동 원리이며, 주로 본인이 직접 개발하거나 운영 중인 웹사이트, 혹은 보안 제한이 없는 일반적인 개인 블로그 등을 테스트하는 용도로 활용하시길 권장합니다.
Q. 테두리(Mockup) 켜기 기능은 주로 언제 유용하게 쓰이나요?
A. 기획자나 디자이너가 클라이언트(고객)나 상사에게 웹사이트 시안을 보여줄 때, 네모난 화면만 달랑 캡처하는 것보다 실제 스마트폰 껍데기(목업) 안에 예쁘게 담긴 모습을 보여주는 것이 훨씬 고급스럽고 직관적입니다. 상단 툴바에서 '기기표시'를 켜시면 아이폰 특유의 둥근 모서리와 상단 카메라 노치 디자인이 입혀진 화면을 볼 수 있습니다. 이 상태로 화면을 캡처하여 회사 발표 자료나 개인 포트폴리오에 곧바로 활용해 보세요!

이런 도구는 어떠세요? (연관 추천 도구)