서비스가 너무 느려요 😡

우리 서비스 카티(클릭)는 중고차를 사기 전에 꼭 확인해야 할 차량의 과거 이력을 한눈에 볼 수 있도록 정리해주는 서비스입니다. 다수의 외부 업체로부터 정보를 조회하는데, 일부는 데이터 간의 연계가 필요하기 때문에 리포트 1개를 조회할 때, 최대 30초까지 소요되는 경우도 있습니다. 외부업체의 환경은 우리가 컨트롤할 수 없기 때문에 로딩 속도는 더 개선하기 쉽지 않은 상황입니다.

가야할 길은 멀고 시간은 없다는 변명 속에 100% 만족스러운 모습으로 배포하지 못하는 날이 많습니다. "일단 되게 한다"는 목표로 개발하는 일이 많은데, 쉬이 후순위로 두는 일 중 하나가 로딩 화면이었습니다. lucide의 <LoaderIcon /> 하나 띄워두고, "잠시만 기다려주세요"를 띄우는 것이 전부였습니다.

정말 휑하죠..? 놀랍게도 1년 이상 메인 기능(리포트 발급)의 로딩화면은 이 상태였습니다. 너무 심하다고 생각하는 사람도 있을지 모르겠으나, 우선순위가 밀리고 배포가 가까워지고, 새로운 기능이 추가되면, 충분히 발생할 수 있는 일이죠. (뻔뻔) 중요한 건, "왜 그 때 이것밖에 안했지?"에 집중하기 보다 "좀 더 개선해보자"는 마음가짐! 당시의 나에게는 이게 최선이었을 것이고, 지금의 나는 좀 더 개선할 수 있는 상황이니까요.

풍부한 리포트를 만들기 위해, 데이터를 추가할 때마다 로딩 시간은 계속 늘었습니다. 로딩이 너무 길다보니, 이를 오류 상황으로 인지하여 발급 도중 이탈하는 고객님이 많았습니다. 하지만, 정책 상 발급은 도중에 취소할 수 없어 고객님들의 불만도 많이 접수되었습니다. 새로고침을 하다가 중복발급되는 사례가 가장 많았죠.

최대 30초가 소요될 수 있으며, 현재 몇 초가 지났는지를 표시했습니다. 안내 멘트 덕분인지, 매일 접수되던 중복 발급 관련 불만은 이제는 거의 들어오지 않습니다. 하지만, 여전히 로딩화면을 견디지 못하고 새로고침하거나 이탈하는 고객님들은 여전히 존재합니다. 이제는 한 번 더 개선할 필요가 있습니다.

좋은 로딩 화면은 무엇일까?

로딩 화면을 후순위로 미루는 버릇은 무관심에서 나왔습니다. 로딩이 길어진다고 해서 쉽게 분노하지는 않기 때문인가? 게다가 더 이상 불만 상담이 접수되지 않기에, 로딩 화면을 개선해야겠다는 생각은 하지 않고 있었습니다.

내가 알고 있던 로딩 화면

처음 프론트엔드 개발을 공부할 때, 로딩 화면에 대해 찾아본 적은 있었습니다.

스켈레톤

로딩 후 나올 화면의 뼈대를 미리 보여줍니다. YouTube가 대표적인데, 다음 화면을 예상할 수 있게 하고, 요청이 잘 수행되고 있음을 보여줍니다. SEO의 측면에서 볼 때도, 로딩 중과 후의 화면에서 레이아웃이 거의 바뀌지 않아 CLS 역시 개선할 수 있다는 장점이 있습니다.

애니메이션 가미

듀오링고와 파파고 낱말카드 로딩 등 일부 서비스의 로딩화면에서는 귀여운 애니메이션을 볼 수 있습니다. 간단한 아이콘이 움직이기도 하는 등 게이미피케이션 요소를 통해 지루함을 덜고, 서비스의 정체성도 견고하게 할 수 있다는 장점이 있습니다. 하지만, 디자이너가 없거나 리소스 사용이 어렵다면 이 방법은 택하기 매우 어렵습니다.

귀엽죠? 제가 만든 캐릭터입니다. 이름은 TUNO이고, 그냥 자랑하고 싶었어요 ㅎㅎ

AI 툴이 많이 발전한 덕분에 리소스는 현저히 줄었습니다. 듀오링고 같은 느낌을 내는 것도 어려워지진 않았죠. 하지만, 캐릭터를 만드는 것은 브랜딩과도 연결되는 문제기 때문에 비단 리소스만의 문제는 아니죠.

게임의 세상을 알아버리다.

초등학교 때 즐겨하던 테일즈러너와 크레이지 아케이드 외에는 제대로 게임을 해본 적이 없습니다. 싫어하는 것은 아니고, 순수하게 게임을 너무 못해서 재미를 못 붙였습니다. 대학생 때 오버워치를 해봤는데, 자꾸 죽어버리니 아무도 껴주지 않더라구요ㅠ 그 뒤로 제가 즐겨하는 게임은 스도쿠, 루미큐브, 피크민..입니다..

그런 제가 갑자기 닌텐도 젤다의 전설을 시작했습니다. 겜알못이지만, 정말 잘 만든 게임이더라구요. 개발자로서 매우 감명깊었습니다.

조작법은 커녕, 앞을 보고 걸어가는 것도 못하는 갓 태어난 망아지 상태라서 튜토리얼 깨는데 7시간 넘게 걸렸습니다. 오픈월드가 너무 신기해서 사과랑 버섯만 따면서 놀고 있었는데, 본 스토리는 시작도 안한 튜토리얼이었더라구요.. 시작한지 3달 째인데, 아직 신수를 깰 자신이 없어서, 여전히 약초 뜯어 요리하고 물고기 잡아요. 젤다의 전설이 아닌 동물의 숲을 하고 있습니다.

해보신 분들은 알겠지만, 게임 내 맵에서 워프하거나 새로운 공간(사당 등)에 들어가면 로딩이 필요합니다. 맵을 로드하고, 데이터를 저장하는 등 다음 화면을 준비하는 것이죠. 근데, 이 로딩 시간이 상당함에도 불구하고, 전혀 지루하지 않다는 것을 뒤늦게 깨달았습니다. 주변 게임덕후게이머들에게 물어보니, 게임에서 로딩화면은 매우 중요한 과제 중 하나라서 신경을 많이 쓴다고 합니다.

다양한 게임 속 로딩 화면은 이 영상(클릭)을 보시길 바랍니다 :) 게이머들의 이탈을 막기 위한 게임 기획자의 피땀눈물을 알 수 있습니다..!

젤다의 전설 속 로딩화면

젤다의 전설에서는 로딩 중간 중간 게임 tip을 알려줍니다. 오픈월드 특성도 있지만, 젤다의 전설 자체가 게임 내 자유도가 높은 것으로 유명합니다. 현실의 물리 법칙을 게임으로 옮긴 덕분에 "이렇게도 움직이려나?" 생각한 모든 것이 가능합니다. 이것까지 다 말하면 글이 너무 길어지니 참겠습니다.

그렇게 열심히 개발했는데, 유저들이 모르면 너무 속상하겠죠. 유저들이 더 다양한 기능을 알고 잘 활용할 수 있도록 유저는 맵설계와 튜토리얼 모두 공을 많이 들였습니다. 그리고 로딩 화면에서 "우리 이런 기능도 있다?"를 노출하면서 유저를 계속 교육합니다.

카티 서비스와 젤다의 전설 간의 공통점

감히 젤다의 전설에 비교해보자면, 카티 서비스 역시 매우 복잡합니다. 가뜩이나 복잡한 고관여 상품인 "자동차"의 이력 데이터를 불러오고, 그걸 기반으로 고객님들께서 스스로 "차량의 상태를 추정"할 수 있도록 해야 합니다.

예를 들어, 자차보험 미가입 기간이 온라인 이력 신뢰도에 어떤 영향을 주는지, 자비수리 이력과 보험이력의 차이는 무엇인지, 미세판금의 기준은 무엇인지 등 데이터를 해석할 수 있는 방법을 계속 교육해야 합니다.

자동차의 상태를 추정할 수 있도록 정말 다양한 데이터를 수집하고 있는데, 그걸 고객님께서 제대로 활용하지 못할 때 가장 속상합니다. 이를 위해 카티는 공식 블로그를 운영하며, 데이터 해석 방법과 함께 중고차 구매에서의 다양한 사례를 공유하고 있습니다. 하지만, 블로그에 직접 찾아와 글을 모두 읽는 충성도 높은 고객님은 많지 않습니다.

젤다의 전설이 갓태어난 망아지였던 저를 세계관으로 무사히 잘 온보딩해준 것처럼, 카티 역시 고객님들께서 데이터를 해석할 수 있는 눈을 가질 수 있도록 로딩화면에 설명을 추가하기로 했습니다.

개선된 로딩 화면

아직 적용하진 못했지만, 예상도는 위와 같습니다. 매번 랜덤한 팁을 보여주고, 3~5초에 한 번씩 멘트를 변경합니다. 화살표를 누르면 다음 팁을 확인할 수 있습니다.

고객님들께서 어려워하는 이력 해석을 위한 팁은 물론, 카티의 신기능에 대해서도 공지할 수 있게 될거라 기대하고 있습니다. FAQ도 만들어 링크해두는 등 고객님들의 학습을 장려해야 겠습니다.

계속 보면, 너무 질리지 않을까?

젤다의 전설도 3개월 정도 하고 나니까 더 이상 로딩 화면에서 새로운 정보를 접하진 못하고 있습니다. 하지만, 알고 있는 것과 해본 것은 다르죠. 생각만 하고 실제로 적용하지 못해 까먹을 수 있는데, 로딩화면을 보면서 계속 상기할 수 있더라구요. "아, 그래 이런 방법도 있었지"를 계속 알려주는 장치도 될 수 있을거라 생각합니다.

더군다나, 자동차는 정말 복잡하고, 수리 부위와 방법 등 데이터의 종류 역시 아주 방대합니다. "아 여기 나온 지식 전부 다 아는건데?" 하는 고객님들은 거의 없을거라 예상하기에 섣부른 걱정은 하지 않기로 했습니다. 개인적으로 부작용보다는 장점이 더 기대되는 화면입니다 :3