안녕하세요, IMQA입니다.
앱 서비스를 운영하는 기업은 사용자가 앱을 불편함 없이 사용할 수 있도록 주기적으로 모니터링해야 하는데요. 사용자가 불편함 없이 사용하기 위해선 기본적으로 빠른 속도와 각 화면으로 이동할 때 매끄럽게 전환될 수 있어야 합니다. 하지만 앱을 이용하다 보면 화면이 느려지거나 버벅거리고 끊기는 현상은 종종 발생하기 마련이죠. 그렇다면 이런 현상들은 왜 발생할까요? 그리고 어떻게 해결할 수 있을까요?
이럴 땐 이렇게 화면 로딩시간편에서는 느린 화면 로딩시간의 주된 원인과 해결책을 알아보았습니다.
- 이럴 땐 이렇게! 크래시편
- 이럴 땐 이렇게! 화면 로딩시간편
화면이 너무 느리고, 버벅거려요!
여러분들은 모바일 앱에서 하염없이 돌아가고 있는 로딩을 보면 어떤 생각이 드시나요? 혹은 쇼핑몰 앱에서 이미지가 버벅거리면서 끊기듯 나오면 어떤 생각이 드시나요? 대부분 앱 사용자들은 로딩이 조금만 늦어도 답답함을 느끼고, 길어질 경우 앱을 종료할 것입니다. 더한 경우 앱을 삭제하기도 하죠.
그렇다면 사용자를 불편하게 만드는 주원인인 화면 느림과 버벅거리는 현상은 왜 발생하는 것일까요?
화면이 느려지는 다양한 원인
여러 가지 이유가 있겠지만 복잡한 화면 구성, 고성능이 필요한 앱, 과도한 메모리를 사용할 때 주로 나타납니다. 일반적으로 게임과 같이 고사양이 필요한 앱이나 이커머스 앱과 같이 대량의 고화질 이미지가 필요한 경우 이러한 현상들이 자주 나타나죠. 또한 비용 절감을 위해 모바일에 특화된 환경을 고려하지 않은 채 PC 웹, 모바일을 병행하는 형태로 서비스를 만든 경우에도 이슈가 발생합니다. 다양한 원인 중, 많이 발생하는 케이스 몇 가지를 알아보겠습니다.
1. 가장 주된 원인은 복잡한 화면 구성
지난 몇 년간 국내 기업 앱 서비스는 비용 문제로 One Source Multi Use 전략을 취하며, 하나의 서비스로 웹 / 앱에 모두 사용하였습니다. 그래서 하이브리드 앱이 많아졌죠.
문제는 이러한 전략으로 인해 모바일 환경을 고려하지 않은 채 개발하여 화면 구성이 복잡하다는 것입니다. 또한 많은 자원과 이미지를 웹서버에서 다운로드하는 형태로 구성되어 있어서 서버에서 받아올 때마다 네트워크 지연시간이 쌓이게 되고 화면이 늦게 뜨게 됩니다. 대부분 외주사를 통해 앱을 개발하다 보니 빠른 출시를 위해 기능 구현에만 몰두하게 되어 로딩 시간이나 성능 부분을 놓치게 된 것도 많이 보이는 케이스입니다.
하지만 더 큰 문제는 이러한 문제 원인을 파악하기 어렵다는 것인데요. IMQA는 해당 문제 원인을 실시간으로 상세히 확인할 수 있습니다. 어떻게 확인하는지 알아볼까요?
IMQA 웹 리소스 분석 화면입니다. 지표를 보시면 돔과 로딩시간은 오래 걸렸고, 네트워크와 서버 시간은 짧게 걸린 것을 확인할 수 있습니다. 그래프에서도 화면이 그려지는 시간인 돔, 로딩, 컨텐츠 다운로드 시간이 오래 걸린 것을 확인할 수 있는데요. 이것은 통신상의 문제가 아닌 복잡한 화면 구성으로 인해 로딩이 느리다는 것을 의미합니다.
2. 모바일 앱에서는 버거운 웹용 이미지
케이스1. 웹앱
모바일 쇼핑 이용자가 더 많지만 여전히 이커머스 중심의 대다수 기업에는 웹 이용자도 많습니다. 그렇기 때문에 기업은 웹과 앱을 함께 운영할 수밖에 없는데요. 여기서 문제가 발생합니다. 웹 기준의 고화질 이미지를 게재하고, 그것을 모바일 앱에서도 함께 보기 때문입니다. 웹 사이트에서는 문제없이 뜨던 이미지가 모바일 앱에서는 무거워 성능이 저하되어 이미지가 버벅거리면서 늦게 뜨게 됩니다.
케이스2. 네이티브앱
같은 이미지라도 웹 / 앱용이 다릅니다. 웹 사이트에는 고화질 이미지를, 앱에는 모바일에 특화된 압축한 이미지를 사용합니다. 하지만 간혹 웹용 이미지를 앱에 적용하는 경우가 있는데요. 이럴 경우, 앱 성능이 떨어지게 되면서 이미지가 끊기면서 뜨게 됩니다. IMQA에서는 해당 문제를 어떻게 확인할까요?
웹 리소스 분석을 보시면 response가 특히 길다는 것을 확인할 수 있는데요. 다운로드량이 많고 파일 사이즈가 크다는 것을 의미합니다. 이런 경우 보통 모바일에 특화된 압축된 이미지가 아닌 PC용 고화질 이미지를 사용하여 로딩시간이 길어진 사례가 많이 있습니다.
3. 전반적으로 느린 네트워크 응답 속도
이미지가 전반적으로 느리게 뜨는 경우도 있습니다. 이 경우 보통 네크워크 응답 속도와 관련이 있는데요. 여러분들은 네트워크 응답 속도를 어떻게 확인하시나요?
IMQA에서는 ‘네트워크 응답시간’ 지표에서 확인할 수 있습니다.
지표를 보시면 네트워크와 서버시간은 오래 걸렸고, 돔과 로딩시간은 짧게 걸린 것을 확인할 수 있습니다. 네크워크와 서버시간이 오래 걸렸다는 것은 네트워크 속도가 늦었다고 이해할 수 있는데요. 그래프에서도 요청 전 대기하는 시간인 Waiting, Fetch, 서버 연결에 걸린 시간인 Connect가 오래 걸린 것을 확인할 수 있습니다. 이 경우 느린 네트워크 속도로 인해 전체적으로 리소스들도 늦게 로딩되는 것을 확인할 수 있습니다.
이때 네트워크가 느린 원인이 사용자 디바이스가 아닌 서버의 문제라면, 리소스를 CDN으로 처리하면 응답 속도가 훨씬 개선될 것입니다.
해결 방법은 IMQA!
IMQA는 화면 로딩시간이 느리고 버벅거리며 늦게 뜨는 등 성능 저하 문제가 발생했을 때 원인을 다각도로 분석할 수 있습니다.
정확한 문제의 원인을 소스코드 레벨로 확인할 수 있고, 전반적인 앱 문제인 경우 컨설팅을 해드립니다.
이번 시간에는 화면 로딩시간이 느리고, 버벅거리는 문제 원인을 어떻게 분석하고 해결하는지 알아보았습니다.
아직도 느린 앱 속도로 고민이신가요? 아니면 우리 앱이 왜 느린지 원인을 모르시나요?
이제 IMQA를 통해 문제 원인을 해결하고, 로딩시간을 빠르게 개선해 보세요!
함께 보면 좋을 콘텐츠도 추천드립니다.
