소개
모바일 앱에 맞춰 화면 비율을 조정해야 했습니다.
제 휴대폰 비율인 3088×1440(19.3:9)로 작업하고자 했지만, 웹과 모바일의 화면 크기와 해상도 차이 때문에 어려움이 있어 화면 배율 조정을 시도했으나, 이는 'show distances on hover' 기능에 문제를 일으켜 새로운 불편을 초래했습니다.
진행 방법
Native App으로 전환 시도
페이지 에디터의 옵션 중 'This page is a native app'을 활성화 했습니다.
안내에 따라 320*640으로 변경합니다.
Issues를 날리지만 실행만 가능하다면 문제 되지 않습니다.
화면 변환은 완료 되었습니다. 하지만 여전히 불편합니다.
가이드 선을 추가합니다.
container의 에디터 > Style > Border style > Solid
시각적으로 편안해졌습니다. 하지만 여전히 불편합니다.
휴대폰 형태로 변환합니다.
F12를 눌러 DevTools > Toggle device toolbar를 활성화합니다.
휴대폰 디바이스 형태를 사용할 수 있습니다. 다만 크기가 맞지 않습니다.
커스텀 디바이스를 추가해 줍니다. 완료되면 체크해줍니다.
기기를 변경합니다. 눈이 편안해집니다.
결과와 배운 점
시각적인 설정 문제를 해결한 후, 카카오 로그인과 Slider 기능을 구현하고 Native Camera 플러그인도 테스트했습니다. 페이지 생 성과 연결 과정은 직관적이고 편리했지만, 버블 개발 경험이 부족해 카메라 기능 구현에는 직접 어려움을 겪고 있습니다. 현재는 Low Fidelity로 구현하는 것을 목표로 하고 익숙해진 후 다시 제작하는 것을 목표로 하려 합니다.
