Syrup 모바일 웹 개선 사례

간단 소개

Syrup 모바일 웹 성능 개선을 위해 WebFlux, SSE, Next.js를 적용하여 API 응답 속도 및 렌더링 성능을 향상시킨 사례 분석.

AI Summary

Syrup 모바일 웹 개선 배경 및 목표
- Syrup 서비스의 웹 게이트웨이 서버 응답 속도 문제로 모바일 웹 로딩 속도 저하 발생
- 목표: API 호출 방식 개선, WebFlux, SSE, Next.js 적용을 통한 성능 향상
적용 기술 및 효과
- WebFlux: 비동기, 논블로킹 방식으로 대규모 동시 요청 처리, Mono.zip 활용으로 비동기 처리 간소화, 롱-폴링 시 타임아웃 설정 불필요
- SSE: 서버에서 클라이언트로 실시간 데이터 푸시, 개별 API 응답 즉시 프론트엔드에 전달하여 렌더링 속도 향상
- Next.js: 정적 사이트 생성(SSG) 적용, 초기 로딩 속도 및 사용자 경험 향상
개선 결과 및 결론
- API 요청 건수 70% 이상 감소, API 응답 속도 50% 이상 개선, 렌더링 속도 개선
- First Contentful Paint, Total Blocking Time, Speed Index 값 개선 확인
- 최초 로딩 속도 1.56s 개선
- WebFlux, SSE, Next.js 도입 과정에서 시행착오 있었지만, 실질적인 성능 향상 및 개발 역량 강화