← 블로그 목록으로

flutter web 모바일에서 테스트

문제 상황 및 해결 로그

PC와 아이폰이 같은 Wi-Fi에 연결되어 있다면 3단계로 즉시 테스트할 수 있습니다.

1단계. PC의 로컬 IP 주소 확인하기

터미널을 열고 아래 명령어를 입력해 PC의 사설 IP(보통 192.168.x.x 형태)를 확인합니다.

  • macOS:

    ipconfig getifaddr en0

    (Wi-Fi 연결 시 보통 en0이며, 유선 연결 시 en1일 수 있습니다)

  • Windows:

    ipconfig

    (IPv4 주소 확인)

출력된 IP 주소(예: 192.168.0.15)를 기억해 둡니다.

2단계. 플러터 웹 서버 실행 (외부 접속 허용)

프로젝트 루트 폴더 터미널에서 --web-hostname 0.0.0.0 옵션을 붙여 실행합니다. 이 옵션이 있어야 외부 기기(아이폰)의 접속을 허용합니다.

flutter run -d web-server --web-hostname 0.0.0.0 --web-port 8080

터미널에 Flutter Web Server is being served at [http://0.0.0.0:8080](http://0.0.0.0:8080) 메시지가 뜨면 서버가 준비된 상태입니다.

3단계. 아이폰 Safari에서 접속하기

  1. 아이폰이 PC와 같은 Wi-Fi에 연결되어 있는지 확인합니다.

  2. Safari 앱을 열고 주소창에 http://[1단계에서-확인한-IP]:8080을 입력합니다.

    • 예: [http://192.168.0.15:8080](http://192.168.0.15:8080)
  3. 3D 뷰어가 로드되면 화면 드래그와 핀치 줌을 테스트합니다.

접속이 안 될 때 체크할 점

  • 공유기 게스트 모드: 공유기의 ’AP 격리(게스트 네트워크)’가 켜져 있으면 기기 간 통신이 차단되므로 일반 가정용 Wi-Fi SSID로 연결해야 합니다.

  • 방화벽 확인: Mac의 [시스템 설정] $→$ [네트워크] $→$ [방화벽]에서 들어오는 연결이 차단되어 있는지 확인합니다.

  • 핫스팟 활용: 공유기 설정이 복잡하다면 아이폰 핫스팟을 켜고 PC를 핫스팟에 연결한 뒤, 위 단계를 그대로 진행해도 됩니다


ip 번호 바로 찾기

핫스팟이나 연결 방식(USB, Wi-Fi)에 따라 Mac의 네트워크 인터페이스 번호(en0, en1 등)가 달라지기 때문입니다.

인터페이스 번호를 일일이 찾지 않고 현재 할당된 로컬 IP를 즉시 확인하는 2가지 방법입니다.

방법 1. 터미널 명령어로 활성 IP 한 번에 확인 (추천)

터미널에 아래 한 줄을 복사해 붙여넣으면 현재 연결된 실제 IP만 바로 출력됩니다.

ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}'
  • 아이폰 핫스팟에 연결된 경우 보통 172.20.10.x 형태의 IP가 출력됩니다. (예: 172.20.10.2)

방법 2. macOS 설정 화면에서 5초 만에 확인

  1. Mac 좌상단  메뉴 $→$ [시스템 설정] $→$ [Wi-Fi] (또는 [네트워크])로 이동합니다.

  2. 현재 연결된 아이폰 핫스팟 이름 옆 [세부사항… (Details)] 버튼을 클릭합니다.

  3. 좌측 [TCP/IP] 탭을 선택하면 우측에 표시된 ‘IP 주소’ (172.20.10.x)를 확인합니다.

아이폰 접속 확인

  1. Mac 터미널에서 서버 실행 상태 유지:

    flutter run -d web-server --web-hostname 0.0.0.0 --web-port 8080
  2. 아이폰 Safari 주소창에 방금 확인한 IP로 접속:

    • 예: [http://172.20.10.2:8080](http://172.20.10.2:8080)