웹앱의 퍼포먼스를 늘리는 법

왜 갑자기 이런걸 신경쓰나?

갑작스레 신경쓰이게 된 건 아니고, 예전부터 상용 프로그램과 내가 만든 프로그램의 차이가 무엇이길래 이렇게 크게 사용감이 다른가 의아했었다. 사실 퍼포먼스에 대해서는 많은 프론트엔드 개발자들이 마음에 담아두는 부분일 것이다.

웹앱으로 유명한 노션을 보면 그렇게 좋을 수가 없는데 왜 내가 만든건 사용감이 이 모양일까.

버튼을 누르면 0.5초 정도 느리게 움직이는 것 같고, 로딩은 또 왜이렇게 긴지...

 

이 부분은 내가 다니는 회사에서도 고질적인 문제였다. 실력자들은 많았지만 작은 규모의 회사다보니 하나부터 열 까지 선임 개발자가 챙겨줄 수 없었다는 점. 그래서 내가 만든 앱이 왜 이렇게 구린지 나름대로 원인을 분석해 보고, 사내 행사 때 프레젠테이션을 했던 내용을 토대로 여기에 글을 작성해본다.

페이지 이동 시 느껴지는 딜레이

사실 가장 크게 느껴지는건 이 부분일 것이다. 이 부분은 어찌보면 웹의 가장 큰 딜레마와도 직접적인 연관을 보이는데, 웹은 기본적으로 페이지를 이동할 때마다 서버에 들러서 데이터를 불러온다.

우리가 네이버 메인을 들어가거나 뉴스를 들어갔을 때 데이터를 불러오는 것 처럼 말이다.

서버에 들러야 화면에 보여질 데이터를 불러오지만, 서버에 들르는 시간이 오래걸리는 것 때문에 앱이 느려진다는건 아이러니하다.

눌렀는데 반응을 왜 이렇게 늦게 해?

우리가 사용자의 입장에서는 이런 불평이 정말 쉽게 나오지만 개발자의 입장에서 바라보면 이 문제를 해결하는건 간단하지 못하다. 이 이슈는 위에 기재한 이슈와도 어느정도 연관이 있을 수 있는데, 아마 해당 버튼을 눌렀을 때 벌어지는 이벤트가 메모리를 많이 점유하기 때문에 생길 가능성이 높다.

 

 

그래서 해결방법은?

DOM에 요소를 그리는 문제에서 발생하는 이슈라면 개발자의 역량으로 최적화가 가능하다.

하지만 네트워크에서 발생하는 응답속도의 문제라면 처리하기가 상당히 곤란하다. 서버의 사양을 늘리면 어찌 해결이야 되겠지만 근본적인 해결 방법은 아닌데다가 무엇보다 대가가 비싸다(...)

 

그래서 나름대로 이에 대한 해결 방법을 가져와봤다.

개발자는 그 버튼을 누르면 뭐가 일어날지 예상이 가능하다.

예를 들어 페이스북 좋아요를 누른다고 생각해보자. 좋아요의 숫자가 100개인 게시글이 있다고 하면 새로운 사람이 좋아요를 누르면 몇 개가 되겠는가? 당연 101개가 된다.

만약 좋아요를 누르고 서버의 응답을 기다렸다가 숫자를 표시한다면 누르고 약간의 딜레이가 생기겠지만, 네트워크의 응답을 기다리지 않고 결과를 예측하여 그린다면 네트워크의 응답은 고려하지 않고 즉각적으로 결과를 보여줄 수 있다.

결과를 예측할 수 없다면?

만약 탭 메뉴가 있다고 쳐보자.

이런거 말이다. (출처: http://bitly.kr/28nGhLtyte)

여기서 두번째 탭을 눌렀을 경우에 내용이 갱신되어야 한다면?

그리고 그 내용을 유추할 수 없다면?

이럴 경우에는 사용자의 클릭 노동(?)에 대한 성의를 보여주면 된다.

많은 초보 개발자가 버튼을 눌러서 페이지를 이동하는 것에만 관심이 있는데, 결과를 불러오는 것에만 초점을 맞추지 말고 결과를 불러오는 과정을 지루하지 않게 만들면 된다.

 

이런 로딩 오버레이를 써보자.

많은 사용자는 버튼을 눌렀을 때 아무런 반응도 없다면 10에 5는 앱이 고장났다고 생각할 것이고, 나머지 5는 응답이 오기도 전에 앱을 꺼버릴 것이다.

최소한 로딩이라도 보여줘서 사용자의 클릭에 대한 수고(?)를 보상해줘야 한다.

우리는 장을 볼 때 물건을 하나씩만 사진 않는다.

제목이 좀 추상적인데, 말 그대로다.

우리는 닭도리탕을 만들어 먹으려 할 때 슈퍼에 가서 닭만 덜렁 사오진 않는다.

재료가 닭, 고추장, 마늘, 파 이렇게 4가지가 있다고 친다면, 한 번 마트에 갈 때 이 4개를 전부 사올지언정, 마트를 4번 들러서 재료를 한 가지 씩 사오지는 않는다는 얘기이다.

 

이 부분을 개발에 적용해보면, 최초 페이지 접속 때 모든 페이지에 사용할 데이터를 한 번에 불러오면 된다는 얘기이다.

쇼핑몰 앱을 구현한다고 생각해보면 기본적으로 보여야 할 데이터인 '메인 페이지 추천 상품', '장바구니 데이터' 등의 비교적 가볍고 자주 보여지는 데이터들을 미리 호출하는 식으로 구현한다면 앱 이용의 상당 부분에서 데이터를 갱신하지 않고 이용할 수 있기 때문에 상대적으로 속도가 빨라짐을 느끼게 될 것이다.

 

물론 앱을 처음 실행할 때 상대적으로 오래걸리기야 하겠지만, 사용자 대다수는 앱을 실행할 때 걸리는 로딩에 대해서는 관대한 편이기에 이 기회를 적극 활용하자는 방안이다.