모바일에서 테스트하기

builder의 반응형 뷰포트 전환기로 빠르게 확인한 후, 모바일 전용 동작이 관련된 부분은 실제 기기에서 publish하고 테스트하세요.

Proyecta의 모바일 테스트에는 두 가지 단계가 있습니다: builder 내 반응형 미리보기와 published URL에서의 실제 기기 테스트입니다.

Builder에서의 반응형 미리보기

미리보기 패널의 주소 표시줄에 뷰포트 전환기가 포함되어 있습니다:

모드	크기
Desktop	전체 창 너비
Tablet	768 × 1024
Mobile	390 × 844

편집하는 동안 모드를 전환하여 레이아웃 문제를 조기에 발견하세요. 명백한 반응형 버그(오버플로우, 깨진 그리드, 탭할 수 없는 버튼 등)를 잡아내는 가장 빠른 방법입니다.

QR 코드로 휴대폰에서 열기

실제 기기에서 가장 빠르게 확인하는 방법은 대시보드의 Mobile → Test 탭을 이용하는 것입니다. 앱을 publish하고 나면 QR code가 표시되며, 휴대폰 카메라로 스캔하면 라이브 앱을 즉시 열 수 있습니다. URL을 직접 전송하고 싶다면 Copy link 버튼도 있습니다. (아직 publish하지 않은 경우, 탭에서 먼저 publish하라는 안내가 표시됩니다 — 기기에서의 테스트에는 라이브 URL이 필요합니다.)

실제 기기에서 테스트하기

뷰포트 전환기는 크기만 시뮬레이션할 뿐, 터치 입력·실제 네트워크 지연·모바일 브라우저의 특이 동작·플랫폼별 동작은 시뮬레이션하지 않습니다. 실제로 중요한 부분(터치 인터랙션, 설치 프롬프트, 푸시 알림, 카메라, GPS)은 반드시 실제 기기에서 테스트하세요:

앱을 *.proyecta.live 서브도메인으로 publish하기
휴대폰 브라우저에서 URL 열기
PWA 지원을 추가했다면 Add to Home Screen을 선택하고 설치된 환경 테스트하기
중요한 플로우를 직접 실행해보기

실제 기기에서만 발견할 수 있는 문제들

탭 타겟 크기 — 손가락은 마우스 포인터보다 큽니다
고정(sticky) 요소 — 모바일 브라우저 크롬이 있을 때 뷰포트 단위 동작이 다릅니다
폼 입력 — 자동 완성, 키보드 타입, 자동 채우기
iOS Safari 특이 동작 — 100vh 문제, 스크롤 바운싱, 고정 포지셔닝
푸시 알림 권한 플로우 — HTTPS가 적용된 published origin의 최상위 브라우저 탭에서만 동작하며, builder의 미리보기 패널 내에서는 실행되지 않습니다(미리보기가 이미 HTTPS로 제공되더라도 마찬가지입니다).
실제 (저사양) 하드웨어에서의 성능

테스트 팁

휴대폰의 개발자 도구를 활용하세요. macOS의 Safari는 모바일 Safari에 연결하여 실시간 디버깅이 가능하며, Chrome은 Android Chrome에 연결할 수 있습니다.
가로 모드(landscape)도 테스트하세요. 대부분의 개발자는 세로 모드만 테스트하다가 가로 모드 버그를 놓칩니다.
저전력 모드를 켠 상태에서 테스트하세요. 애니메이션과 타이머 동작이 달라집니다.
PWA 푸시 알림은 실제 iPhone에서 테스트하세요. iOS의 푸시 알림은 Safari를 통해 설치된 PWA에서만 작동합니다.