크롬, 사파리, 엣지 브라우저에서 모바일 화면 확인하는 방법

 브라우저에서 직접 모바일 화면을 시뮬레이션하여 확인하는 방법은 매우 간단합니다.

  사용 중인 브라우저에 따라 아래 방법을 따라 해보세요.

  1. 크롬(Chrome), 엣지(Edge), 웨일 브라우저

  가장 보편적이고 정확한 방법입니다.

   1. 브라우저에서 홈페이지를 엽니다.

   2. 키보드의 `F12` 키를 누르거나, 화면 아무 곳에서나 마우스 오른쪽 클릭 >

      [검사(Inspect)]를 선택합니다.

   3. 개발자 도구 창이 뜨면, 상단 왼쪽의 휴대폰/태블릿 모양 아이콘 (Device

      Toolbar)을 클릭합니다.

   4. 이제 상단에서 'iPhone 14'나 'Pixel 7' 같은 기기 모델을 선택하여 실제 크기로

      확인할 수 있습니다.

  2. 사파리(Safari) - Mac 사용자

   1. 사파리 메뉴에서 [설정(Settings)] > [고급(Advanced)]으로 이동하여 "메뉴

      막대에서 개발자용 메뉴 보기"를 체크합니다.

   2. 상단 메뉴의 [개발자용(Develop)] > [응답형 디자인 모드 시작]을 선택합니다.

   3. 다양한 Apple 기기의 화면 크기를 바로 확인할 수 있습니다.

  3. 실제 휴대폰으로 확인하기

  만약 현재 컴퓨터에서 로컬 서버(예: npm run dev)를 실행 중이라면:

   1. 컴퓨터와 휴대폰을 같은 Wi-Fi에 연결합니다.

   2. 컴퓨터의 터미널에서 ipconfig(Windows) 또는 ifconfig(Mac) 명령어로 IP 주소를

      확인합니다. (예: 192.168.0.10)

   3. 휴대폰 브라우저 주소창에 http://IP주소:3000을 입력하면 직접 접속해서 확인할

      수 있습니다.

  팁: 크롬 개발자 도구에서 화면 너비를 마우스로 직접 줄여보면서 정렬이 실시간으로

  변하는지(반응형) 확인하는 것이 개발할 때 가장 편리합니다!

  변하는지(반응형) 확인하는 것이 개발할 때 가장 편리합니다!