BFF 서버에 SSE를 도입한 이유: 전시 서버의 통신 구조 재설계
Summary
배민은 왜 API 호출을 하나로 합치고도 화면을 더 빠르게 그리게 만들었을까?
BFF와 SSE 스트리밍으로 1.7MB에 달하는 대형 전시 지면의 병목을 시원하게 해결한 배달의민족 기술 여정
서비스가 성장하면서 복잡해진 배달의민족 '가게목록' 지면의 통신 구조를 획기적으로 개선한 사례입니다. 클라이언트와 서버 간의 다중 호출 문제를 해결하기 위해 BFF 서버를 구축하고, 응답 지연을 방지하기 위해 웹 표준인 SSE 스트리밍을 과감히 도입했습니다. 프론트엔드와 백엔드의 유기적인 아키텍처 재설계를 통해 사용자 경험(UX)과 엔지니어링 생산성을 동시에 극대화한 과정을 생생하게 담고 있습니다.
- 0112개 이상의 복잡한 전시 영역을 하나의 API로 단순화하는 BFF 아키텍처 구축
- 02서버에서 준비된 데이터부터 먼저 흘려보내는 SSE 스트리밍으로 300ms에서 15ms로 초기 반응 속도 단축
- 03Authorization 헤더 처리를 위해 브라우저 EventSource 대신 fetch와 ReadableStream을 결합한 클라이언트 수신 구조 설계
- 04React Query 캐시를 활용해 컴포넌트 단위로 데이터를 점진적으로 주입하고 불필요한 재요청 차단
- 05Nginx의 proxy_buffering 작동 원리에 대한 철저한 벤치마크 실험으로 무조건 버퍼링을 꺼야 한다는 기술적 편견 해소
RECOMMENDATION
다양한 서브 도메인의 데이터를 한 화면에 렌더링해야 하는 포털형 지면을 개발 중이거나, 대량의 데이터 전송으로 인해 화면 초기 로딩 성능에 병목을 겪고 있는 아키텍트 및 풀스택 개발자에게 강력히 추천합니다.
The Problem
배달의민족 가게목록 지면이 단순 리스트에서 다양한 큐레이션과 광고가 결합된 통합 전시 지면으로 진화하면서, 클라이언트가 여러 서버를 직접 호출하는 다중 통신 구조로 인해 클라이언트 코드 복잡도 증가 및 백엔드의 화면 제어권 상실 문제가 발생했습니다. 이를 단일 REST API로 통합할 경우, 대용량 응답 데이터와 가장 느린 구좌 속도로 전체 지연 시간이 상향 평준화되는 새로운 병목 현상이 예상되었습니다.
The Solution
BFF(Backend For Frontend) 서버를 도입하여 1지면 1API 구조로 통합하는 한편, 요청은 단 한 번만 받되 응답은 완료되는 순서대로 부분 전송하는 SSE(Server-Sent Events) 스트리밍 기술을 도입했습니다. 웹 프론트엔드에서는 커스텀 헤더 지원을 위해 fetch와 ReadableStream을 결합하여 스트림을 직접 파싱하고, 수신된 데이터를 React Query 캐시에 동적으로 밀어 넣어 컴포넌트 단위로 점진적 렌더링을 수행하도록 설계했습니다.
The Result
기존에는 전체 지면이 완성되기까지 약 300ms를 대기한 후에야 렌더링이 시작되었으나, SSE 도입 이후에는 가벼운 구좌가 약 15ms 만에 먼저 응답하여 체감 초기 로딩 속도가 극적으로 단축되었습니다. 또한 백엔드가 각 영역의 조회 오류 시 대체 구좌를 편성하는 등 유연한 화면 제어권을 확보했으며, nginx 프록시 버퍼링 검증을 통해 스트리밍 환경에서도 안정적인 자원 제어가 가능함을 입증했습니다.
Trade-off
표준 EventSource API의 커스텀 헤더 미지원 제약으로 인해 fetch 기반의 자체 스트림 파서 구현 비용이 발생했으며, 단일 컴포넌트나 단순한 응답 구조를 가진 지면에는 오히려 시스템 복잡도만 가중시킬 수 있다는 한계가 있습니다.
Key Concepts
More from 우아한형제들
View all posts from 우아한형제들기술블로그 세 번째 책 《요즘 우아한 백엔드 개발》 출간
KotlinApache KafkaElasticsearch3주 전배포 없이 앱과 로컬 웹을 잇다
ProxyTunnelingWebSocket3주 전기술이 없던 곳에 기술 더하기: 사내 해커톤 플랫폼 만들기
AI-Assisted DevelopmentClaudeSpring Boot1개월 전멀티 어카운트 NACL 차단 자동화 도구 운영 및 개선 경험
AWS NACLAWS LambdaAmazon DynamoDB1개월 전AI가 내 프롬프트를 흘려듣는 이유: 원리부터 다시 본 컨텍스트 엔지니어링
LLMPrompt EngineeringContext Window1개월 전
