장보기•쇼핑 성능 최적화 고군분투기: 웹 전환 과정에서의 경험과 교훈 #우아콘2025 #우아한형제들
우아콘 2025 우아한형제들 · YouTube
AI 핵심 요약
배민 장보기·쇼핑의 가게홈을 네이티브에서 웹으로 옮긴 뒤, 사용자가 체감하는 속도와 사용성이 떨어지는 문제를 해결하기 위해 성능 지표를 측정하고 개선을 반복했습니다. 앱 내 웹뷰라 검색 엔진 최적화가 필요하지 않은 점 등을 고려해 SSR에서 CSR로 전환하고 스켈레톤 UI를 제공했으며, 이미지 지연 로딩·리사이징과 웹뷰 캐시 활성화로 불필요한 요청과 대기 시간을 줄였습니다. 이후 서버 주도 UI, 필수 API 프리패칭, 코드 스플리팅을 적용하고 긴 상품 목록에는 TanStack Virtual 가상화를 도입했으며, 탭 상태 보존 범위도 사용자 데이터에 맞춰 조정했습니다. Sentry 실사용 지표를 모니터링해 개선 효과를 확인하고 성능 저하를 감지하는 체계를 마련했으며, 성능 최적화와 플랫폼 전환은 추측보다 측정과 데이터에 기반해야 한다는 교훈을 얻었습니다.
- 검색 엔진 노출이 필요 없는 앱 내 웹뷰라면 SSR의 이점과 서버 운영 비용을 비교해 CSR 전환을 검토할 수 있습니다.
- 이미지에는 지연 로딩을 적용하고, 리사이저로 화면에 필요한 크기의 파일을 제공해 네트워크와 메인 스레드 부담을 줄이세요.
- 캐시 정책을 바꿀 때는 다른 웹페이지에 미칠 영향을 검증하고, 문제가 생겼을 때 캐시를 삭제할 수 있는 복구 경로도 마련해야 합니다.
- 초기 렌더링에 필요한 작업은 앞당기고 덜 중요한 컴포넌트는 코드 스플리팅으로 늦추되, 인라인 크리티컬 스크립트는 HTML 파싱을 막지 않도록 작게 유지하세요.
- 긴 목록은 가상화하고 탭 상태 보존 범위는 사용자 행동 데이터로 정하는 등, 웹의 제약과 사용성 사이의 타협을 측정값으로 결정하세요.
소개
[세션 설명] 장보기∙쇼핑 가게홈의 웹 전환은 단순한 기술 변경이 아니라 성능과 사용자 경험을 동시에 지켜내야 하는 도전이었습니다. 여러 차례 시도와 개선 끝에 적용된 다양한 최적화 기법과 성과를 소개하며, 서비스 전환 시 반드시 고려해야 할 핵심 포인트를 공유합니다. [발표자 소개] 우희제(프런트엔드 개발자)
비슷한 학습 자료
컨퍼런스 우아콘 2025
오프닝 키노트 #우아콘2025 #우아한형제들
컨퍼런스 우아콘 2025
진화하는 스트리밍 플랫폼: 견고함을 향한 여정과 인사이트 #우아콘2025 #우아한형제들
컨퍼런스 우아콘 2025
로그 회귀 테스트 구축으로 데이터 기반 비즈니스 지키기 #우아콘2025 #우아한형제들
컨퍼런스 우아콘 2025
[세션 설명] 비즈니스 의사결정은 데이터 기반으로 이루어져요. 흔히 View나 Click로그 등으로 지표 데이터를 쌓고 있죠. 만약 코드 사이드 이펙트로 로그가 유실되었고 6개월 뒤에 지표 분석할 때 알게 되었다면 큰 문제예요. 안정적인 비즈니스 분석을 위해서 로그에도 회귀 테스트가 꼭 필요함을 알 수 있는 사례인데요. 어? 나 테스트 코드 짜고 있는데? 하시는 분도 로그가 여전히 잘 동작하는지 회귀 테스트가 필요하다는 사고의 전환을 하실 수 있어요. [발표자 소개] 유동식(프런트엔드 개발자)
소프트웨어 테스트 프로덕트 지표 · 실험 로드맵 1개에 담김
컨퍼런스 우아콘 2025
장보기•쇼핑 개선기: 익숙함을 넘어, 새로운 탐색으로 #우아콘2025 #우아한형제들
컨퍼런스 우아콘 2025
똑같아 보이는데 다르다고? 큐레이션 중복 개발 탈출기 #우아콘2025 #우아한형제들
컨퍼런스 우아콘 2025