Truebil이 웹을 성장 채널로 만든 방법

업계 최고의 웹 환경을 구축한 스타트업의 이야기

Harleen Batra
Harleen Batra

정보

2015년에 설립된 Truebil은 100% 인증된 중고차를 판매하는 인도의 온라인 마켓플레이스입니다. 월간 활성 사용자 140만 명이 이용하는 이 솔루션은 소유권 이전, 보험, 대출, 서비스 보증을 한 번에 제공합니다. 잠재고객은 이미지와 상세한 검사 보고서가 포함된 개별 제품 페이지를 확인하고 사이트의 '비교' 및 'Truescore' 기능을 사용하여 차량 평가를 받을 수 있습니다. Truebil은 머신러닝 기반의 맞춤 추천, 즐겨찾기에 추가 기능, 차량 공유 기능 등 다양한 기능으로 제품을 차별화합니다.

도전과제

Truebil은 빈도가 낮고 가치가 높은 거래가 많은 린 스타트업이므로 우선순위를 두고 투자할 적절한 플랫폼을 선택하는 것이 중요했습니다.

Truebil은 모바일을 타겟 플랫폼으로 식별했으며, 웹의 쉬운 검색 가능성과 낮은 마찰로 인해 첫 번째 앱인 Truebil Lite에 웹을 선택했습니다. 웹 기술은 Android/iOS 앱을 빌드하는 것보다 개발 비용이 낮고 데이터 및 메모리 사용량이 적으며 고객 획득 비용이 훨씬 낮습니다. 또한 프로그레시브 웹 앱 (PWA)을 빌드하여 Truebil은 웹의 모든 이점과 iOS/Android의 이점을 모두 누릴 수 있었습니다.

솔루션

인내팀은 프로덕션 이전을 위해 React, Django, Preact를 사용하여 Truebil Lite를 개발하는 데 4개월이 걸렸습니다. 사용자 목표에 따라 웹 앱에 대한 명확한 기본 원칙을 설정했습니다. 환경은 다음과 같아야 했습니다.

  • 첫 로드 및 후속 탐색 시 빠름
  • 사용자의 네트워크 또는 기기 제약 조건과 관계없이 안정적이어야 합니다.
  • 특히 작은 모바일 화면에서 눈길을 끄는 디자인이어야 사용자가 다시 방문하고 싶어 합니다.

빠른 최초 로드 및 탐색을 위해 최적화

Lighthouse를 사용하여 성능 최적화를 안내한 팀은 새 기능을 구현하는 동안 성능 우선 문화를 채택했습니다. Truebil은 콘텐츠가 포함된 첫 페인트Time to Interactive (TTI) 측정항목에 우선순위를 두고 빠른 최초 로드, 재방문, 원활한 탐색에 최적화하여 사용자 환경을 크게 개선할 수 있었습니다. 팀은 실적 예산을 설정하고 다양한 기법을 사용하여 이러한 결과를 달성했습니다.

실적 예산 설정

Truebil팀은 성능을 최우선으로 생각하여 첫 로드 시 서버 측 렌더링을 사용하고 후속 로드 시 클라이언트 측 렌더링을 사용하는 단일 페이지 앱으로 환경을 설계했습니다. 클라이언트 측 렌더링을 사용하여 웹 앱의 성능을 유지하는 것은 쉽지 않으므로 Truebil은 특히 기능을 추가할 때 속도를 떨어뜨리지 않도록 매우 엄격한 성능 예산을 설정했습니다.

팀은 TTI를 5초 미만으로 유지하는 것을 목표로 엄격한 마일스톤 기반 예산을 설정했습니다. 이 목표를 달성하기 위해 빌드가 250KB의 JavaScript 번들 크기를 초과하지 않도록 수동으로 확인하고, 이미지 크기를 지속적으로 확인하고, 앱의 Lighthouse 성능 점수를 지속적으로 추적했습니다.

JavaScript 번들 최적화

팀은 PRPL 패턴을 사용하여 JavaScript 페이로드를 미리 캐시하고 최적화하고 HTTP/2로 전환하여 중요한 JavaScript 번들을 제공하는 기본사항부터 시작했습니다.

중요하지 않은 리소스를 지연 로드하기 위해 프레임워크 수준의 지연 로드 구성요소를 사용하여 화면 아래 프래그먼트를 로드했습니다.

JavaScript 번들 병목 현상을 제거하기 위해 팀은 코드 분할을 통해 페이로드를 줄였습니다. 구성요소 및 경로 기반 청크를 사용하여 기본 번들 크기를 줄이고 로드 시간을 44% 개선했습니다. TTI는 6초에서 약 5초로, 첫 번째 의미 있는 페인트 (FMP)는 4.1초에서 3.6초로 줄었습니다.

코드 분할 전후의 Truebil Lite 빌드 크기를 보여주는 Chrome DevTools의 스크린샷
청크 크기를 줄이는 효과

중요한 인라인 CSS

FMP를 더욱 개선하기 위해 팀은 Lighthouse를 사용하여 성능 최적화의 기회를 찾고 그 영향을 검증했습니다. Lighthouse에서 렌더링 차단 CSS를 줄이면 가장 큰 효과가 있다고 표시되었으므로 Truebil은 모든 중요한 CSS를 인라인 처리하고 중요하지 않은 CSS를 지연했습니다. 이 기법을 사용하면 FMP가 약 2초 감소했습니다.

CSS 인라인 처리 전후에 Truebil Lite의 의미 있는 첫 번째 페인트까지의 시간을 보여주는 Chrome DevTools의 스크린샷
중요한 CSS를 인라인 처리하는 경우의 영향

출발지로의 여러 번의 왕복 이동으로 인한 비용 절감

DNS 및 TLS의 오버헤드를 완화하기 위해 Truebil은 <link rel="preconnect"><link rel="dns-prefetch">를 사용했습니다. 이 접근 방식을 사용하면 브라우저가 페이지 로드 시 최대한 빨리 TLS 핸드셰이크를 완료하고 교차 출처 도메인 이름을 사전 확인하여 안전하고 빠른 사용자 환경을 제공할 수 있습니다.

rel=preconnect의 효과를 보여주는 Chrome DevTools의 스크린샷
<link rel=preconnect> 추가의 영향

다음 페이지를 동적으로 미리 로드

데이터를 분석한 결과, 최적화할 수 있는 가장 일반적인 사용자 여정을 파악했습니다. 이 경우 앱은 <link rel=prefetch>를 사용하여 다음 페이지 리소스를 동적으로 다운로드하여 사용자의 원활한 탐색을 보장합니다. 팀은 미리 로드할 링크를 수동으로 식별하지만 webpack을 사용하여 이러한 링크의 JS를 번들로 묶습니다.

애셋이 이미 미리 로드되었으므로 일반적인 탐색 시 네트워크 요청이 필요하지 않다는 것을 보여주는 Truebil Lit 앱 및 Chrome DevTools의 스크린샷
일반적인 사용자 여정에서 애셋을 미리 로드하면 어떤 효과가 있는지 확인할 수 있습니다.

이미지 및 글꼴 최적화

이미지는 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의 콘텐츠 중 상당 부분은 매우 동적입니다. 언제든지 자동차를 추가하거나 구매할 수 있습니다. 하지만 팀은 네트워크 연결이 불안정하거나 완전히 오프라인 상태인 경우에도 사용자가 참여할 수 있는 일부 콘텐츠를 제공하고자 했습니다.

팀은 서비스 워커를 사용하여 사용자가 이미 상호작용한 정적 데이터와 동적 데이터를 모두 캐시하여 사용자가 오프라인에서 볼 수 있도록 했습니다. 사용자가 다시 온라인 상태가 되면 콘텐츠가 변경될 수 있음을 알 수 있도록 YouTube팀은 UI를 회색조로 변경하여 오프라인 모드를 표시했습니다. 제품 페이지 탐색은 Truebil 사용자 여정에서 중요한 부분입니다. PWA를 한 번 이상 방문한 사용자는 이전에 방문한 등록정보 및 제품 페이지를 탐색할 수 있지만 등록정보 또는 제품의 업데이트는 볼 수 없습니다.

오프라인 모드의 Truebil Lite 앱 스크린샷
오프라인 모드의 Truebil Lite

사용자의 재방문을 유도하기 위한 참여도 개선

흥미로운 첫 경험

대부분의 사용자가 유료 채널에서 유입되므로 Truebil은 빠르게 로드되는 웹 앱을 전환수를 늘리기 위해 관련성이 높은 추천을 표시하는 제품으로 보완해야 했습니다. 팀에서는 기존 사용자를 위해 정교한 필터링을 기반으로 추천 시스템을 사용하고 있지만, 이 시스템은 처음 로그인하는 사용자에게는 작동하지 않습니다.

신규 사용자에게 콜드 스타트를 제공하지 않기 위해 디지털 마케팅을 활용한 맞춤 콘텐츠 시스템을 통합했습니다. UTM 매개변수를 통해 자동차 모델, 가격, 차체 유형과 같은 제품 세부정보를 광고의 도착 URL에 추가합니다. 이 정보는 맞춤 콘텐츠 시스템에서 읽고 표시되는 제품에 반영됩니다. 시스템이 URL에서 이러한 세부정보를 읽지 못하면 인기 차량으로 대체됩니다. 인기 차량은 인기 모델, 인기 예산, 지난 몇 주 또는 며칠 동안 인기가 높았던 차량의 조합입니다.

설치 가능한 웹 앱

매력적인 사용자 환경을 갖춘 빠르고 기능이 완벽한 웹 앱을 구축한 Truebil은 사용자가 계속 다시 방문하도록 하고자 했습니다. 앱을 설치 가능하게 하면 재방문이 훨씬 더 원활해질 수 있다는 사실을 깨달았습니다.

팀은 제품을 완전한 프로그레시브 웹 앱 (PWA)으로 만들기 위해 홈 화면에 추가 기능을 구현했습니다. 이 접근 방식을 통해 사용자는 Truebil Lite를 홈 화면에 추가하고 전체 화면 모드로 실행할 수 있었습니다. 이미 오프라인 모드를 구현했기 때문에 팀은 새 기능을 쉽게 추가할 수 있었습니다.

사용자가 스팸을 받지 않도록 하고 사용자가 앱을 설치할 가능성을 높이기 위해 Google은 최근 PWA 설치를 홍보하기 위한 전략을 업데이트하여 다양한 유형의 사용자에게 실제로 유용할 때 설치 메시지가 표시되도록 했습니다. Truebil은 다음과 같은 세 가지 전략을 세웠습니다.

  • 사용자가 작업을 완료했거나 유휴 상태일 때 메시지를 표시합니다.
  • 성숙한 사용자에게 문맥 프롬프트를 표시합니다.
  • 사용자가 사이트에서 일정 시간 동안 머물렀을 때 배너를 표시합니다.

절차 완료 시 및 트래픽이 많은 페이지에 표시되는 기본 배너

YouTube팀은 사용자가 작업을 완료했거나 트래픽이 많은 페이지에 있지만 유휴 상태 (즉, 스크롤이나 양식 작성과 같은 작업을 하지 않음)일 때 설치 배너를 표시하기로 결정했습니다. 이 접근 방식을 통해 사용자의 활동이 중단되지 않았습니다.

Truebil Lite의 설치 배너 스크린샷

성인 사용자를 위한 문맥 프롬프트

앱과 한동안 상호작용한 사용자의 경우 팀은 컨텍스트에 맞는 맞춤 메시지를 사용하여 앱을 홈 화면에 설치하는 것이 얼마나 유용한지 보여주었습니다.

성인 사용자를 위한 Truebil Lite의 문맥설치 메시지 스크린샷

시간 기반 메시지의 맞춤 배너

마지막으로 팀은 등록정보 페이지를 열거나 사용자가 앱에서 일정 시간 동안 사용한 후와 같이 특정 이벤트에서 트리거되는 알림과 유사한 디자인의 방해가 되지 않는 배너를 앱에 빌드했습니다.

Truebil Lite의 시간 기반 설치 메시지 배너 스크린샷

이러한 개선으로 Truebil의 전환 및 참여율이 크게 증가하여 사용자 세션이 26% 길어지고 전환이 61% 증가했습니다. 이는 각 전환의 거래 가치가 높다는 점을 고려할 때 비즈니스에 상당히 중요합니다.

리소스가 제한된 스타트업의 경우 적절한 플랫폼을 선택하는 것이 비즈니스 성공에 매우 중요할 수 있습니다. 속도, 탄력성, 참여도에 중점을 둔 PWA로 전환한 결과, 전환 증가와 웹의 원활한 도달범위 덕분에 수익 대비 마케팅 비용을 80% 늘릴 수 있었습니다.

라케시 라만, Truebil 공동 창립자 겸 제품 및 데이터 과학 책임자

44%

로드 시간 개선

26%

더 긴 사용자 세션

61%

전환수 증가

80%

수익 대비 마케팅 비용 증가