모바일에서 테스트하기

빠른 확인에는 builder의 반응형 뷰포트 전환기를 사용하고, 모바일 전용 동작과 관련된 사항은 실제 기기에서 publish한 후 테스트하세요.

Proyecta의 모바일 테스트는 두 단계로 이루어집니다: builder 내 반응형 미리보기와 published URL에서의 실제 기기 테스트입니다.

Builder에서 반응형 미리보기

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

모드	크기
Desktop	전체 창 너비
Tablet	768 × 1024
Mobile	375 × 667

편집하는 동안 모드를 전환하면 레이아웃 문제를 조기에 발견할 수 있습니다. 이는 명백한 반응형 버그(오버플로, 깨진 그리드, 탭하기 어려운 버튼)를 빠르게 확인하는 가장 빠른 방법입니다.

실제 기기에서 테스트하기

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

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

실제 기기에서만 확인할 수 있는 사항

탭 대상 크기 — 손가락은 마우스 포인터보다 큽니다
Sticky 요소 — 모바일 브라우저 chrome이 있을 때 뷰포트 단위가 다르게 동작합니다
폼 입력 — 자동 완성, 키보드 유형, autocomplete
iOS Safari 특이 사항 — 100vh 문제, 스크롤 바운싱, fixed 포지셔닝
푸시 알림 권한 플로우 — HTTPS가 적용된 published 오리진의 최상위 브라우저 탭에서만 작동합니다. builder의 미리보기 패널 내에서는 실행되지 않습니다(미리보기가 이미 HTTPS로 제공되는 경우에도 마찬가지입니다).
실제(느린) 하드웨어에서의 성능

테스트 팁

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