이번 react 과제를 하면서 모바일에서도 UI가 잘 나오는지 궁금해서 확인해봤습니다.
확인해보니 모바일의 카톡, 크롬 UI(아이폰 13)가 PC와는 다르다는 것을 알았습니다…
수정하는 과정에서 제대로 수정됐는지 확인하기 위해 vercel에 반영하고 다시 폰으로 확인하는 이러한 과정을
반복했습니다.
위와 같은 방법말고 좀더 빠르게 확인하는 방법이 있을까요??
그리고 모바일 UI을 만들때 항상 생각하고 있어야할 놓치면 안되는 부분(?)이 있을까요?
개발 시에 모바일에서 바로 확인 하는 방법- 아이폰 디버깅 방법
- xcode 설치 후 ios simulator를 사용 하여 localhost 접근
- 아마도 cors 이슈가 생겨서 해결을 해야할지 모릅니다.
- https://ngrok.com/ 서비스를 통해 퍼블릭으로 프록시해서 cors 이슈 해결
- safari 에서 simulator 사용하여 내 아이폰 디버깅
- 배포 된 웹을 모바일에서 이슈가 있어서 디버깅을 하고 싶을 때 이렇게 확인 가능
- https://raniee.tistory.com/21
- 안드로이드
- 안드로이의 경우 ngrok을 통해서 로컬호스트를 퍼블릭으로 전환 후 접근해서 했던 것 같습니다.
참고 react, nextjs, RN, 등등 어떤 프레임워크를 쓰냐에 따라서 상이할 수 있습니다. 저의 경우 위 3개 다 해봤고, 하이브리드앱을 만들어본 경험도 있는데(ionic3) 이 경우에는 프레임워크 자체에서 hot reloading + 실시간 핸드폰 확인 기능을 제공했었습니다.
모바일 UI 개발UI 자체는 디자인을 따르면 되는 것이라서 큰 고민은 없을 것 같습니다.
- 스크롤 메뉴의 경우 유저에게 직관적으로 스크롤 된다는 것을 보여주게 해야합니다.( 살짝 컴포넌트가 튀어나오도록
- hamburger menu
- depth
- bottom menu 개수
- top navigation menu
- full screen navigaion(닫기를 통해 나와야함)
- user gestures
오히려 다양한 핸드폰 해상도를 고려해야해서 고민이 많을 것 같습니다.
- 해상도
- 아이폰/안드로이드 차이점(header/footer)
- background process 고민
- offline mode 고민
- 웹뷰의 경우 크로미움 버전마다 살짝 살짝 특정 라이브러리와 버그가 존재했었습니다.
- 모바일에서 모달을 띄웠는데, 유저가 스크롤을 하면 모달이 스크롤되는게 아니라 뒷 배경이 스크롤 되는 경우가 존재.
- https://www.npmjs.com/package/body-scroll-lock
- 이런걸 잘 써서 해결
- 핸드폰의 권한을 어떤걸 받아올지 ⇒ 앱 배포가 거절 될 수 있음.