'포켓몬 오토체스'라는 게임을 즐겨하고있다.
게임을 하면서 아쉬웠던 점은 웹 브라우저 기반으로 제작되어 스마트폰이나 태블릿으로 즐길 수 없다는 것이었다.
그래서 스마트폰으로 할 수 없는지 검색하던 중 어느 커뮤니티에서 stargon 브라우저에서 실행이 된다는 글을 발견했다.
아쉽게도 안드로이드에서만 제공되는 앱이었기에 테스트 해 볼 수 없었고 다른 브라우저들을 설치해서 게임 사이트에 접속해봤지만 모두 UI가 깨지는 문제가 있었다.
그래서 직접 게임을 구동할 수 있도록 브라우저를 만들어보았다.
기존 브라우저 화면
브라우저: safari
시행착오
1. 이미지 크기 동적 조절
웹 사이트가 디바이스 사이즈에 맞게 동적으로 크기가 적용되도록 구현했다.
JavaScript 코드에서 css기반으로 이미지를 동적으로 크기를 조절하도록 하고 UI는 지정된 크기로 보여지도록 했다.
사파리에서 실행했을 때와 달리 한 화면에 모든 UI가 들어오고 모바일은 지원하지 않는다는 문구는 사라졌다.
하지만 UI와 이미지의 비율이 깨지는 문제가 발생했다.
2. 16:9 비율 조절
사이트 최적 비율이 16:9인 것을 파악하고 디바이스 크기와 관계 없이 16:9 비율을 강제 적용하는 방식으로 코드를 수정했다.
이렇게 웹 브라우저에서 보이는 것과 동일하게 구현할 수 있었다.
문제점
화면을 정상적으로 표시하는 것은 성공했지만 구글 로그인을 시도했을때 보안 문제로 로그인이 차단되는 문제가 있었다.
해결을 위해 googleSingIn을 적용해봐야겠다.
