모바일에서 개발 중인 화면을 실시간으로 확인하는 방법

들어가기 전에

개발을 하다 보면 내가 만든 페이지가 모바일 환경에서 어떻게 보일지 궁금할 때가 있어요. 특히 제가 개발 중인 숙명여대 커뮤니티 ‘스노로즈’는 모바일 사용자 비율이 높고, 모바일 퍼스트 디자인을 채택하고 있어서 이런 부분을 더 신경 쓰게 돼요.

특히 2024년 10월 스노로즈 리뉴얼 런칭 이후 진행한 사용자 만족도 조사에서, "모바일에서 폰트 크기가 너무 작다"는 피드백을 받은 적도 있었는데, 그때 모바일 환경에서 직접 확인하는 과정의 중요성을 크게 느꼈습니다.

그래서 배포 전 개발 환경에서 모바일 화면을 실시간으로 확인하는 방법을 간단히 정리해 보았습니다.

---

내 로컬에서 띄운 웹사이트 (localhost)를 같은 Wi-Fi에 연결된 휴대폰에서 접속해서 보자.

방법

1. 내 컴퓨터의 IP 주소 확인

IPv4 주소 또는 무선 LAN 어댑터에 표시된 192.168.xx.xx 형태의 주소를 확인한다.

• Mac: 터미널 열고

  ipconfig getifaddr en0

• Windows: CMD 열고

  ipconfig

2. 프로젝트 실행 시 localhost 대신 0.0.0.0 또는 IP 바인딩

• React 프로젝트의 경우

  • CRA(Create React App) 기반 프로젝트는 별도 설정 없이도 같은 네트워크의 다른 디바이스에서 접속할 수 있도록 기본 설정되어 있다.

  • 따라서 npm start 명령어로 개발 서버를 실행하면, 같은 Wi-Fi에 연결된 모바일 브라우저에서 http://192.168.x.x:3000 주소로 바로 접속해 화면을 확인할 수 있다.

  • 참고로, 특정 상황에서는 HOST=0.0.0.0 npm start 명령어로 외부 접속을 명시적으로 허용해야 할 수도 있다.

    

• Vite를 사용하는 경우

  • Vite 프로젝트는 기본적으로 외부 접속이 차단되어 있으므로, 같은 네트워크의 다른 디바이스(예: 모바일)에서 접속하려면 다음과 같이 실행해야 한다.

    npm run dev -- --host

  • 또는 vite.config.js 파일에서 다음과 같이 설정할 수도 있다:

    // vite.config.js
      export default {
        server: {
          host: "0.0.0.0",
        },
      };

    • 참고로 host: true로도 설정이 가능하지만, "0.0.0.0"으로 명시하는 것이 더 명확하며 일반적으로 권장되는 방식이다.

3. 휴대폰 브라우저에서 접속

• 앞에서 확인한 컴퓨터의 IP 주소와 포트 번호를 휴대폰 브라우저에 입력하면 개발 화면을 확인할 수 있다.

• 단, 컴퓨터와 휴대폰이 같은 Wi-Fi에 연결되어 있어야 한다.

• (192.168.x.x 형태의 IP는 로컬 네트워크 전용 주소이기 때문에, 같은 네트워크 내에서만 접속이 가능)

  http://[IP 주소]:[포트번호]

• 예시: http://192.168.1.40:3000

  

그런데도 안 될 때는? (by chatGPT)

체크리스트	설명
✅ 휴대폰이 같은 Wi-Fi에 있는가?	휴대폰이 LTE나 다른 네트워크면 안 됨
✅ 브라우저 주소 입력이 정확한가?	http://192.168.x.x:3000 정확히 입력했는지
✅ PC 방화벽이 포트 막고 있진 않은가?	Mac/Windows에서 방화벽이 Node.js 접근 막고 있을 수 있음
✅ 회사/카페 공유기 같은 제한된 네트워크인가?	일부 공유기는 내부 접속 차단함. 집 Wi-Fi에서 먼저 시도해 보기

---

정리

배포 이후가 아니라 개발 과정에서 바로 모바일 뷰를 확인하면, 불필요한 수정 과정을 줄이고 더 빠르게 개선할 수 있어요. 😊

폰트사이즈가 작다는 사용자들의 피드백을 받고, 다른 유사 서비스들을 레퍼런스로 조사해 보니 저희 서비스의 기본 폰트 크기가 확실히 작다는 걸 알게 되었어요. 대부분의 서비스가 기본 폰트를 14~16px로 사용하는 반면, 저희는 10~12px을 사용하고 있었더라고요.

그래서 이 문제를 개선하기 위해 디자이너분들과 회의를 거쳐, 서비스 전반의 폰트 크기를 대대적으로 수정했습니다.