1. 문제 상황

하이브리드 환경에서 개발을 하던 Spot Buddy 개발 중 있었던 이슈로 ios 의 스와이프 뒤로 가기 제스쳐를 하게 될 경우에 이전 화면이 보이지 않고 회색 화면으로 보이게 되는 상황

문제는 조금이라도 스크롤을 하고 난 다음의 경우에만 발생을 해서 원인이 web front 코드에 있다는 생각이 들었다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/13711f1c-f836-4ade-8e3d-9a2e7dc707c0/_.mov

문제의 스와이프 영상

2. 원인

vue router 의 scrollBehavior 처리가 ios 환경에서 발생하는 이슈였다. 비슷한 현상의 issue가 vue 공식 repo의 issue 로 등록되어 Evan you가 남긴 답변을 보니 https://github.com/vuejs/vue/issues/5533

WKWebView 환경에서 swipe navigation 의 경우 발생될 수 있는 이슈로 vue의 문제가 아닌 환경의 문제라는 답변을 확인했다.

3. 해결을 위한 노력

vue 는 공부를 통해, 개인 프로젝트를 통해 경험이 많다 생각했지만,

ios, 더더욱 WKWebView 라는 환경은 처음 경험해보는터라 자문을 구해야겠다는 생각이 들었다.

일주일이 넘는 구글링과 깃허브 이슈를 다 들쑤어봐도 명확한 해결책을 찾지 못했다...

주변에 선배 프론트 개발자나 하이브리드 웹 개발에 경험이 있는 분이 없어, 지푸라기라도 잡는 심정으로 평소에 자주 보던 유튜버에게 자문 메일을 보내보았다.

정대리님은 vue 와 ios(swift) 개발을 다 강의로 다루셨던 분이라 해결책을 아실거라 생각했고, 답변을 주실거라 기대는 안 했지만 그만큼 해결하고 싶었던 문제라 연락을 하게 되었다.

유튜버 정대리님의 코드 답변

정대리님은 swift 의 코드 변경으로 답변을 주셨고 같이 작업하시던 ios 개발자분은 이 방법도 적용을 해보았고 이 방법은 swipe 자체를 없애는 방법이라 문제 해결의 근본적인 해결이 아니라고 했다...

4. 문제 해결

문제의 원인이었던 스크롤 옵션 처리를 빼면 네이티브 환경처럼 뒤로가기일 경우에 스크롤이 유지가 되질 않는다.

단편적인 해결이 될 수는 있지만 완벽한 해결은 아니라고 생각했기에 스크롤 유지를 할 수 있는 코드를 vue router 라이브러리의 옵션에 기대는 것이 아닌 스스로 개발해서 적용하기로 했다.

store→scrollStore 모듈

router→index.js

페이지를 떠나기 전에 beforeEach 메소드로 페이지의 이름과 스크롤의 위치를 기억하고

페이지에 들어가기 전에