Syrup 모바일 웹 속도 개선기

이 게시물은 SK플래닛의 Syrup 모바일 웹 서비스의 응답 속도 개선을 위한 기술 도입과 개선 과정을 다룹니다.

개선 배경 및 문제점

• 기존 웹 게이트웨이의 느린 API 응답으로 모바일 웹 로딩 속도 저하
• 순차적 API 호출과 CompletableFuture 사용의 복잡성 및 스레드 관리 문제
• 클라이언트의 다중 API 병렬 호출로 인한 트래픽 증가 및 네트워크 비용 문제

적용 기술

• WebFlux: 리액티브 프로그래밍 기반 비동기 논블로킹 처리로 확장성과 성능 향상
• Server Sent Events(SSE): 서버에서 클라이언트로 실시간 데이터 푸시를 통해 렌더링 지연 최소화
• Next.js: 정적 사이트 생성(SSG)으로 초기 렌더링 속도 및 사용자 경험 개선

시행착오 및 결과

• 리액티브 프로그래밍 모델 적응과 멀티스레드 및 블로킹 라이브러리 사용 제한
• 생태계 제약으로 인한 라이브러리 선택과 캐시 처리 문제
• 개선 후 API 요청 건수 70% 감소, 응답 속도 50% 이상 향상, 최초 로딩 속도 1.56초 개선