SK플래닛, Syrup 모바일 웹 속도 개선 위해 WebFlux·SSE·Next.js 도입

SK플래닛은 13년 이상 운영된 Syrup 서비스의 모바일 웹 응답 속도 문제를 해결하기 위해 신규 서버 구축을 진행했다. 기존 웹 게이트웨이는 다수의 외부 파트너 API를 순차적으로 호출하거나 비동기 처리 시 CompletableFuture의 복잡성과 스레드 관리 이슈로 인해 성능 저하가 발생했다.

기술 스택 변경 및 적용

새로운 아키텍처에는 WebFlux, Server Sent Events(SSE), Next.js가 적용되었다. WebFlux는 논블로킹 I/O와 리액티브 스트림을 지원하여 대규모 동시 요청 처리에 적합하며, Mono.zip을 활용해 비동기 API 호출 코드를 단순화했다. SSE는 서버에서 클라이언트로 데이터를 실시간 푸시하여 프론트엔드가 전체 응답을 기다리지 않고 개별 API 결과를 즉시 렌더링할 수 있게 했다. 프론트엔드는 Next.js의 정적 사이트 생성(SSG) 기능을 적용해 초기 로딩 속도를 개선했다.

시행착오 및 제약 사항

리액티브 프로그래밍 모델 적응에는 6개월 이상의 학습 기간이 소요되었다. WebFlux 환경에서는 ThreadLocal이나 MDC 같은 멀티 스레드 기반 라이브러리를 사용할 수 없어 ContextView로 대체해야 했다. 또한, 블로킹 I/O 라이브러리 사용이 제한되어 MemCached 연동을 위해 논블로킹 클라이언트인 com.spotify.folsom을 도입했으며, 기존 라이브러리와의 해싱 알고리즘 차이로 인한 캐시 미스 문제를 해결하는 과정을 거쳤다.

개선 결과

기술 도입 후 Syrup 모바일 웹의 성능 지표가 크게 향상되었다. API 요청 건수는 기존 대비 70% 이상 감소했고, API 응답 속도는 50% 이상 개선되었다. 실제 화면 로딩 시간은 개선 전 3.52초에서 1.96초로 단축되어 1.56초의 속도 향상을 달성했다.