Intro. (실무 이슈)
몇 달 전 회사 하이브리드 앱 개발 중에 마주쳤던 이슈를 다뤄보려 한다.
하이브리드 앱 배포일이 임박하여 모두가 정신없이 개발하던 중, 웹에서 이미지를 뿌려주는 방식이 갑작스레 바뀌었다.
이 때문에 화면 로딩이 너무 느려져 해결책을 찾다가 웹뷰의 캐시 모드를 알게 되었고,
실제로 특정 모드에서 Web View 로드가 더욱 빠르게 되는 것을 확인했다.
사건은 Cache 모드를 바꾸다가 발생했다..
웹뷰의 캐시 모드는 기본적으로 LOAD_DEFAULT 모드로 되어있으나
LOAD_CACHE_ELSE_NETWORK 모드로 바꾸고 실행시키니, 두 번째 로드부터 로딩 속도가 아주 빨라졌다.
기존의 자원을 활용하여 속도를 빠르게 했다는 것에 만족하며 몇번의 테스트 후 기분 좋게 퇴근했으나....
다음 날 특정 기능이 되지 않았다ㅠㅠ
팀원들이 각자의 부분에서 문제점을 찾으려고 분주하였지만
결국 내가 바꿨던 앱 캐시 문제인 것으로 판명 나서 많이 혼나고 팀원한테도 미안했다..
(이후로 올바른 코드 사용과 꼼꼼한 테스트는 정말 중요한 것임을 알게 되었다..)
그럼 이제 하이브리드 앱, Web Cache란 무엇인지와 여러 모드들에 대해서 알아보겠다.
Hybrid App | Cache
Hybrid App이란?
하이브리드 앱은 보여줄 화면을 웹으로 만들고(Java Script, CSS)
이를 Andorid, IOS 앱에서 Web View를 통해 웹 화면을 띄어주는 방식이다.
쉽게 말해 껍데기는 앱이고 알맹이는 웹이라고 생각하면 좋겠다.
처음 들어봤을 땐 개발 비용과 시간이 감축되고,
매번 플레이스토어, 앱스토어에서 심사를 통해 배포 및 업데이트되는 네이티브 앱과 달리
필요할 때 즉시 업데이트가 가능한 것을 보고 너무 효율적으로 보여
지금까지 해왔던 네이티브 방식이 안 좋아 보였다..
그러나 현재까지 경험해 보았을 때 장점만큼 단점이 존재한다.
1. 앱 또는 웹에서 변경한 부분이 서로에게 큰 영향을 끼친다.
웹과 앱이 매우 밀접하게 엮여있는 방식이기에 웹, 앱 중 한쪽에서 변경 후 사소해 보여 전달하지 않은 부분에서 버그가 날 수 있으며 이때 웹, 앱이 다 같이 원인을 찾아야 하는 상황이 자주 발생하여 네이티브 앱보다 정신적, 육체적, 시간적 소모가 생각보다 많다.
(니탓 내탓을 하는 상황이 자주 발생한다)
2. 사용자 경험 측면에서 불리하다.
결국 서비스는 사용자의 마음을 사로잡아 앱을 사용하도록 하는 게 가장 중요하다고 생각한다.
그러나 이번 프로젝트로 느낀점은 데이터 로드 속도, 부드러운 애니메이션, 오프라인 동작, 센서 기능 등을 통해 사용자 경험을 끌어올릴 수 있는 네이티브와 달리 웹에 최적화 되어있는 화면을 앱에서 보여주려고 하는 하이브리드는 앞서 말한 부분에 불리하다.
물론 최적화를 잘하였을 땐 사용자가 모를 정도로 감소시킬 수 있겠으나, 네이티브를 못 따라간다고 본다.
(간단한 기능만 제공하는 앱이라면 크게 고려하지 않아도 된다.)~~
3. 웹은 앱 OS 맞춤 세팅을 해야한다.
Android는 뒤로가기 버튼이 하단에 고정되어 있으나 IOS는 슬라이스 제스처로 뒤로가기를 한다.
Android는 크롬 브라우저를 사용하지만 IOS는 사파리 브라우저를 사용한다.
이러한 차이 때문에 Android에서 되는것이 IOS에서 안되거나 그 반대의 상황이 자주 발생하였다.
따라서 OS별로 발생하는 차이점을 파악하고 웹 분기 처리를 통해 각각의 특성에 맞게 세팅을 해줘야 하는 비용이 발생한다.
Cache란?
이미지, JS, CSS 등과 같이 정적인 데이터를 특정 위치에 저장하여, 이를 매번 서버에 요청할거 없이 필요할 때 꺼내와 자원을 효율적으로 사용할 수 있는 방식
캐시를 통해 클라이언트가 서버에 요청하는 상황을 감소시켜 서버의 부하를 줄여주고, 사용자 경험도 향상시킬 수 있다.
Web Cache 모드
하이브리드 구현을 위해 Andorid 앱에서 WebView를 띄어주어야 하며, 최초 로드 이후 앱 자체적으로 Cache를 저장하게 된다.
상황에 맞는 캐시 관리를 위하여 다양한 Cache Mode를 설정할 수 있다.
LOAD_CACHE_ONLY : 네트워크 사용 없이 캐시로 로드
LOAD_CACHE_ELSE_NETWORK : 캐시로 우선 로드하고 빈 부분은 네트워크 로드
LOAD_DEFAULT : 캐시로 로드하지만 웹에서 변경된 부분은 네트워크 로드
LOAD_NO_CACHE : 캐시없이 네트워크로만 로드
이때 나는 LOAD_DEFAULT 모드에서 LOAD_CACHE_ELSE_NETWORK 모드로 변경하다가 이슈가 발상하였다.
앱 자체적으로 저장했던 Cache를 우선적으로 로드하는 모드기 때문에
웹 화면에 변화가 있더라도 Client가 Cache로 가지고 있다면 불러오지 않았다.
모드를 바꾸고 테스트를 해보았을 때 화면이 정상적으로 로드되고 속도도 빨라지니
좋다고 퇴근했던 내가 밉다..ㅠㅠ
느낀점
앱 개발자 새싹으로서 확실하게 파악하지 못한 코드 사용이 이렇게 무서운 결과로 돌아온다는 것을 뼈저리게 느겼다.
또한, 코드 변경 후 꼼꼼한 테스트는 매우 매우 매우 중요한 것 같다..
(요즘은 테스트를 정말 열심히 한다..ㅠㅠ)
