동급 최고의 웹 환경을 구축한 스타트업의 이야기
정보
2015년에 설립된 Truebil은 100% 인증된 중고차를 판매하는 인도 온라인 마켓입니다. 월간 활성 사용자 수가 140만 명 이상인 이 플랫폼은 명의 이전, 보험, 대출, 서비스 보증을 포함하는 원스톱 솔루션입니다. 잠재 고객은 이미지와 자세한 검사 보고서가 포함된 개별 제품 페이지를 확인하고 사이트의 '비교' 및 'Truescore' 기능을 사용하여 차량 평가를 받을 수 있습니다. Truebil은 머신러닝 기반 맞춤 추천, 즐겨찾기에 추가 기능, 자동차 공유 기능 등 다양한 기능을 통해 제품을 차별화합니다.
도전과제
Truebil은 거래 빈도가 낮고 가치가 높은 거래를 하는 소규모 스타트업이므로 우선순위를 정하고 투자할 적절한 플랫폼을 선택하는 것이 중요했습니다.
Truebil은 모바일을 타겟 플랫폼으로 식별했으며, 웹의 쉬운 검색과 낮은 마찰로 인해 첫 번째 앱인 Truebil Lite에 웹을 선택했습니다. 웹 기술은 Android/iOS 앱을 빌드하는 것보다 개발 비용이 저렴하고 데이터 및 메모리 사용량이 적으며 고객 획득 비용이 훨씬 저렴합니다. Truebil은 프로그레시브 웹 앱 (PWA)을 빌드하여 웹의 모든 이점과 iOS/Android의 이점을 누릴 수 있었습니다.
솔루션
사내 팀은 React, Django, Preact (프로덕션 마이그레이션용)를 사용하여 Truebil Lite를 개발하는 데 4개월이 걸렸습니다. 사용자 목표에 따라 웹 앱에 대한 명확한 기본 원칙을 설정합니다. 환경은 다음과 같아야 합니다.
- 첫 번째 로드 및 후속 탐색에서 빠름
- 사용자의 네트워크 또는 기기 제약 조건과 관계없이 안정적이어야 합니다.
- 특히 작은 모바일 화면에서 매력적이어서 사용자가 다시 방문하고 싶어 해야 합니다.
빠른 첫 번째 로드 및 탐색을 위해 최적화
Lighthouse를 사용하여 성능 최적화를 안내하면서 팀은 새로운 기능을 구현하는 동안 성능 우선 문화를 채택했습니다. Truebil은 콘텐츠가 포함된 첫 페인트 및 상호작용까지의 시간 (TTI) 측정항목의 우선순위를 지정하고 빠른 첫 로드, 반복 방문, 원활한 탐색을 위해 최적화하여 사용자 환경을 크게 개선할 수 있었습니다. 팀은 실적 예산을 설정하고 다양한 기법을 사용하여 이러한 결과를 달성했습니다.
실적 예산 설정
성능 우선 사고방식을 바탕으로 Truebil팀은 첫 번째 로드에는 서버 측 렌더링을 사용하고 후속 로드에는 클라이언트 측 렌더링을 사용하는 싱글 페이지 앱으로 환경을 설계했습니다. 클라이언트 측 렌더링을 사용하는 웹 앱의 성능을 유지하기는 어려울 수 있으므로 Truebil은 특히 기능을 추가할 때 속도를 저하시키지 않도록 매우 엄격한 성능 예산을 설정했습니다.
팀은 TTI를 5초 미만으로 유지하기 위해 엄격한 마일스톤 기반 예산을 설정했습니다. 이 목표를 달성하기 위해 빌드가 250KB JavaScript 번들 크기를 초과하지 않도록 수동으로 확인하고, 이미지 크기를 지속적으로 확인하고, 앱의 Lighthouse 성능 점수를 지속적으로 추적했습니다.
JavaScript 번들 최적화
팀은 PRPL 패턴을 사용하여 JavaScript 페이로드를 미리 캐시하고 최적화하고 HTTP/2로 전환하여 중요한 JavaScript 번들을 제공하는 등 기본적인 작업부터 시작했습니다.
중요하지 않은 리소스를 지연 로드하기 위해 프레임워크 수준 지연 로드 구성요소를 사용하여 스크롤 없이 보이는 부분 아래의 프래그먼트를 로드했습니다.
자바스크립트 번들 병목 현상을 제거하기 위해 팀은 코드 분할을 통해 페이로드를 줄였습니다. 구성요소 및 경로 기반 청킹을 사용하여 기본 번들 크기를 줄이고 로드 시간을 44% 개선했습니다. TTI는 6초에서 약 5초로, 의미 있는 첫 페인트 (FMP)는 4.1초에서 3.6초로 감소했습니다.
중요한 인라인 CSS
FMP를 더욱 개선하기 위해 팀은 Lighthouse를 사용하여 성능 최적화의 영향을 검증하고 기회를 찾았습니다. Lighthouse는 렌더링 차단 CSS를 줄이는 것이 가장 큰 효과가 있다고 표시했으므로 Truebil은 모든 중요한 CSS를 인라인으로 처리하고 중요하지 않은 CSS는 지연했습니다. 이 기법으로 FMP가 약 2초 감소했습니다.
출발지로 여러 번 왕복하는 비용을 절감하세요.
DNS 및 TLS의 오버헤드를 완화하기 위해 Truebil은 <link rel="preconnect"> 및 <link rel="dns-prefetch">를 사용했습니다. 이 접근 방식을 사용하면 브라우저가 페이지 로드 시 가능한 한 빨리 TLS 핸드셰이크를 완료하고 교차 출처 도메인 이름을 사전 해결하여 안전하고 빠른 사용자 환경을 제공할 수 있습니다.
<link rel=preconnect> 추가의 영향다음 페이지를 동적으로 프리패치
데이터를 분석한 결과, 팀은 최적화할 수 있는 가장 일반적인 사용자 여정을 파악했습니다. 이러한 경우 앱은 <link rel=prefetch>를 사용하여 다음 페이지 리소스를 동적으로 다운로드하여 사용자의 원활한 탐색을 보장합니다. 팀은 미리 가져올 링크를 수동으로 식별하는 동안 webpack을 사용하여 해당 링크의 JS를 번들로 묶습니다.
이미지 및 글꼴 최적화
이미지는 Truebil의 제품 경험과 신뢰도에서 중요한 부분을 차지하며 각 제품 등록정보에는 최대 40개의 사진이 포함됩니다. 이미지가 페이지 로드를 차단하지 않도록 하기 위해 팀은 CDN에서 모든 리소스를 제공하고 이미지 최적화에 imagemagick을 사용하기로 했습니다. 또한 이미지, JavaScript, CSS를 비롯한 압축 가능한 모든 리소스를 Gzip으로 압축하여 로드 시간을 더욱 단축했습니다.
로드 시간을 최대한 짧게 유지하면서 보이지 않는 텍스트가 표시되는 것을 방지하기 위해 Truebil은 외부 글꼴이 로드될 때까지 시스템 글꼴을 대체 글꼴로 사용하도록 CSS를 설정했습니다.
추가 최적화
앱이 준비되자 팀은 공급업체 번들 크기와 JavaScript 실행 시간을 더욱 줄이고 싶어 프로덕션에서 React 앱을 Preact로 전환했습니다. (React 컬렉션에서 자세히 알아보세요.) 이 접근 방식을 통해 공급업체 번들 크기를 82.3KB에서 51.2KB로 줄일 수 있었습니다.
안정성 내장
인도 시장에 중점을 둔 Truebil의 사용자는 대부분 때때로 2G만큼 낮은 대역폭으로 떨어지는 불안정한 네트워크에서 제품에 액세스합니다. 따라서 제한된 네트워크 조건에서 성능을 개선할 뿐만 아니라 사용자가 신뢰할 수 있는 제품, 즉 항상 작동하는 제품을 제공하는 데도 탄력적인 환경을 구축하는 것이 중요했습니다.
안정적인 로드를 위한 하이브리드 캐싱 전략
Truebil 콘텐츠의 상호작용성과 변경률은 매우 다양합니다. Truebil 팀은 모든 콘텐츠가 최신 상태이고 신뢰할 수 있도록 네트워크 우선, 캐시 우선, 가장 빠른 우선 전략을 조합하여 API 캐싱을 구현했습니다.
Truebil은 구독 페이지와 같은 정적 페이지의 경우 캐시 우선 전략을 사용하여 먼저 구독 API 캐시로 이동한 후 네트워크로 대체합니다.
제품 목록이나 세부정보 페이지와 같이 거의 변경되지 않는 동적 콘텐츠가 있는 페이지의 경우 Truebil은 네트워크를 사용할 수 없는 경우 브라우저가 먼저 콘텐츠에 대한 네트워크를 확인한 후 API 캐시로 대체되도록 네트워크 우선 전략을 사용합니다.
홈, 필터, 검색, 도시 페이지와 같이 자주 변경되는 동적 페이지의 경우 Truebil은 가장 빠른 우선 전략을 사용하여 먼저 로드되는 네트워크 또는 캐시를 기반으로 선택합니다. 콘텐츠가 최신 상태인지 확인하기 위해 네트워크 응답이 캐시에 있는 내용과 다를 때마다 캐시가 업데이트됩니다.
완전한 오프라인 환경을 위한 서비스 워커
Truebil 콘텐츠의 상당 부분이 매우 동적(언제든지 자동차를 추가하거나 구매할 수 있음)이지만, 팀은 사용자가 불안정한 네트워크를 사용하거나 완전히 오프라인 상태인 경우에도 일부 콘텐츠를 이용할 수 있도록 하고 싶었습니다.
서비스 워커를 사용하여 팀은 사용자가 오프라인으로 볼 수 있도록 정적 데이터와 사용자가 이미 상호작용한 동적 데이터를 모두 캐시할 수 있었습니다. 사용자가 온라인으로 돌아왔을 때 콘텐츠가 변경될 수 있음을 알리기 위해 팀은 오프라인 모드를 나타내도록 UI를 그레이스케일로 변경했습니다. 제품 페이지를 탐색하는 것은 Truebil 사용자 여정에서 중요한 부분입니다. PWA를 한 번 이상 방문한 사용자는 이전에 방문한 등록정보와 제품 페이지를 둘러볼 수 있지만 등록정보나 제품의 업데이트는 볼 수 없습니다.
참여도를 개선하여 사용자의 재방문 유도
매력적인 첫 경험
대부분의 사용자가 유료 채널에서 유입되므로 Truebil은 전환수를 늘리기 위해 매우 관련성이 높은 추천을 표시하는 제품으로 빠르게 로드되는 웹 앱을 보완해야 했습니다. 팀은 기존 사용자를 위해 정교한 필터링을 기반으로 하는 추천 시스템을 사용하지만, 이 시스템은 처음 로그인하는 사용자에게는 작동하지 않습니다.
팀은 신규 사용자에게 콜드 스타트를 제공하지 않기 위해 디지털 마케팅 노력을 사용하여 추천 시스템을 통합했습니다. 이러한 판매자는 UTM 매개변수를 통해 자동차 모델, 가격, 차체 유형과 같은 제품 세부정보를 광고의 도착 URL에 추가합니다. 추천 시스템은 이를 읽어 표시되는 제품에 반영합니다. 시스템이 URL에서 이러한 세부정보를 읽지 못하는 경우 인기 차량으로 대체됩니다. 인기 차량은 인기 모델, 인기 예산, 지난 몇 주 또는 며칠 동안 인기가 있었던 차량의 조합입니다.
설치 가능한 웹 앱
매력적인 사용자 환경을 갖춘 빠르고 완전한 기능을 갖춘 웹 앱을 구축한 Truebil은 사용자가 계속해서 다시 방문하도록 하고 싶었습니다. 앱을 설치할 수 있도록 하면 반복 방문이 훨씬 더 원활해진다는 사실을 알게 되었습니다.
팀은 제품을 완전한 프로그레시브 웹 앱 (PWA)으로 만들기 위해 홈 화면에 추가 기능을 구현했습니다. 이 접근 방식을 통해 사용자는 Truebil Lite를 홈 화면에 추가하고 전체 화면 모드로 실행할 수 있었습니다. 오프라인 모드를 이미 구현했으므로 팀은 새로운 기능을 쉽게 추가할 수 있었습니다.
사용자가 스팸을 받지 않도록 하고 사용자가 앱을 설치할 가능성을 높이기 위해 최근 팀에서는 다양한 사용자에게 실제로 유용할 때 설치 메시지가 표시되도록 PWA 설치를 홍보하는 전략을 업데이트했습니다. Truebil은 세 부분으로 구성된 전략을 선택했습니다.
- 사용자가 작업을 완료했거나 유휴 상태일 때 프롬프트를 표시합니다.
- 성인 사용자에게 상황별 프롬프트를 표시합니다.
- 사용자가 사이트에서 설정된 시간만큼 머무른 경우 배너를 표시합니다.
프로세스 완료 시 및 트래픽이 많은 페이지의 기본 배너
사용자가 작업을 완료하거나 트래픽이 많은 페이지에 있지만 유휴 상태 (즉, 스크롤하거나 양식을 작성하는 등의 작업을 하지 않음)일 때 설치 배너를 표시하기로 결정했습니다. 이 접근 방식을 통해 사용자의 활동을 중단하지 않을 수 있었습니다.
성인 사용자를 위한 상황별 프롬프트
앱과 한동안 상호작용한 사용자에게는 매우 맥락에 맞는 맞춤 메시지를 사용하여 홈 화면에 앱을 설치하는 가치를 보여주었습니다.
시간 기반 메시지를 위한 맞춤 배너
마지막으로 팀은 목록 페이지를 열거나 사용자가 앱에서 일정 시간을 보낸 후와 같은 특정 이벤트에서 트리거되는 알림과 유사한 디자인의 비침해적 배너를 내장했습니다.
이러한 개선사항 덕분에 Truebil의 전환율과 참여도가 크게 증가했습니다. 사용자 세션이 26% 더 길어지고 전환이 61% 더 많아졌습니다. 각 전환의 거래 가치가 높다는 점을 고려할 때 이는 비즈니스에 큰 의미가 있습니다.
리소스를 제한적으로 보유한 스타트업의 경우 적절한 플랫폼을 선택하는 것이 비즈니스 성공에 매우 중요합니다. 속도, 복원력, 참여도에 중점을 둔 PWA로 전환한 덕분에 전환이 증가하고 웹의 원활한 도달범위가 확대되어 수익 대비 마케팅 비용이 80% 증가했습니다.
라케시 라만, Truebil 공동 창립자 겸 제품 및 데이터 과학 부문 책임자
44%
로드 시간 개선
26%
사용자 세션 연장
61%
전환수 증가
80%
수익 대비 마케팅 비용 증가