출근하자
(주)드림픽셀, 2022.10 ~ 2023.08 · 프론트엔드, 백엔드, 배포
검색 조건을 바꿀 때마다 지도가 30초 가까이 멈춤
배경
위치기반 구인구직 플랫폼입니다. 경력 없는 신입으로 입사했는데 회사에 개발자가 없어 운영 중이던 웹과 앱을 그대로 인수받았고, 처음 접한 GraphQL과 Apollo, Prisma를 공부해 3주 만에 수정 작업을 시작했습니다. 대표, 디자이너와 서비스 방향과 UX 개선안을 이야기하고 구현해서 보여준 다음 다시 다듬는 식으로 일했습니다. 입사했을 때 지도가 뜨기까지 30초 가까이 걸렸는데, 원인을 찾는 것부터 고치는 것까지 제가 맡았습니다.
문제
검색 조건을 바꿀 때마다 수백 개의 마커를 전부 다시 그려서 그동안 지도가 멈췄습니다. 마커를 찍는 데 쓰지도 않는 기업 이미지와 재무 정보까지 같이 내려오느라 GraphQL 응답이 약 50MB였습니다.
판단
네이버 지도를 카카오맵으로 바꿨습니다. 공식 MarkerClusterer가 있어서 클러스터링을 직접 만들지 않아도 됐기 때문입니다. 쿼리에서는 마커에 필요 없는 필드를 약 140줄 지우고 검색 반경도 30% 줄였습니다. 직무 3단계 트리 자동완성은 서버를 부르지 않고 이미 받아 둔 데이터를 메모리에서 걸러내도록 다시 만들었습니다.
결과
지도가 뜨기까지 약 30초 걸리던 것이 2초 안팎으로, API 응답이 약 50MB에서 5MB 수준으로 줄었습니다. 필터를 바꿀 때마다 화면이 멈추던 것도 없어졌습니다.
개선 전
개선 후
지도 표시 시간
API 응답 크기
기업정보 페이지가 쿼리 4개를 모두 기다린 뒤에야 응답
문제
기업정보 페이지는 getServerSideProps에서 기업정보, 재무, 국민연금 인원, 업종 평균 연봉 쿼리 4개를 차례로 await 한 뒤에야 HTML을 내려줬습니다.
판단
기본 기업정보만 SSR에 남기고, 무거운 재무, 국민연금 인원, 업종 평균 연봉은 Apollo useQuery와 useLazyQuery로 옮겨 브라우저에서 받게 했습니다. 업종 평균 연봉은 인원 데이터를 받은 뒤 이어서 부르고, 섹션마다 로딩 표시를 붙였습니다.
결과
기본 정보를 먼저 보여 주고 무거운 데이터는 섹션별로 채우는 구조가 됐습니다.
모바일 앱
- Next.js
- GraphQL
- Node.js