동급 최고의 웹 환경을 구축한 스타트업의 스토리
정보
2015년에 설립된 Truebil은 100% 인증된 중고차를 판매하는 인도 온라인 마켓플레이스입니다. 월간 활성 사용자 수가 140만 명 이상인 Google Workspace는 소유권 이전, 보험, 대출, 서비스 보증을 포함하는 원스톱 솔루션입니다. 잠재고객은 이미지와 자세한 검사 보고서가 포함된 개별 제품 페이지를 확인하고 사이트의 '비교' 및 'Truescore' 기능을 사용하여 차량 평가를 받을 수 있습니다. Truebil은 머신러닝을 기반으로 한 맞춤 추천, 즐겨찾기에 추가 기능, 차량 공유 기능 등 다양한 기능으로 제품을 차별화합니다.
당면 과제
Truebil은 빈도가 낮고 가치가 높은 거래를 사용하는 린 스타트업이므로 우선순위를 지정하고 투자할 적절한 플랫폼을 선택하는 것이 중요했습니다.
Truebil은 모바일을 타겟 플랫폼으로 꼽았고, 첫 번째 앱인 Truebil Lite로 웹을 선택했습니다. 웹 검색이 용이하고 불편이 적기 때문입니다. 웹 기술은 Android/iOS 앱을 빌드하는 것보다 개발 비용이 낮고 데이터 및 메모리 사용량이 적으며 고객 획득 비용이 크게 낮습니다. 또한 프로그레시브 웹 앱 (PWA)을 빌드함으로써 Truebil은 웹의 모든 혜택 및 iOS/Android의 이점을 모두 누릴 수 있었습니다.
솔루션
사내 팀이 React, Django, Preact (프로덕션 마이그레이션용)를 사용하여 Truebil Lite를 개발하는 데 4개월이 걸렸습니다. 사용자 목표를 바탕으로 웹 앱에 대한 명확한 기본 원칙을 수립했습니다. 경험은 다음과 같아야 했습니다.
- 첫 번째 로드 및 후속 탐색 시 빠름
- 안정성, 사용자의 네트워크 또는 기기 제약과 무관
- 몰입도, 특히 작은 모바일 화면의 경우 사용자가 다시 돌아오기를 원합니다.
빠른 최초 로드 및 탐색에 최적화
팀은 성능 최적화를 안내하기 위해 Lighthouse를 사용하여 새로운 기능을 구현하면서 성과 중심 문화를 채택했습니다. Truebil은 콘텐츠가 포함된 첫 페인트 및 상호작용 시작 시간 (TTI) 측정항목에 우선순위를 두고 빠른 최초 로드, 재방문, 원활한 탐색을 위해 최적화를 진행하여 사용자 환경을 크게 개선할 수 있었습니다. 팀은 성능 예산을 설정하고 이를 달성하기 위한 다양한 기법을 사용함으로써 이러한 결과를 달성했습니다.
성능 예산 설정
Truebil팀은 성능을 최우선으로 하여 첫 번째 로드에는 서버 측 렌더링을, 후속 로드에는 클라이언트 측 렌더링을 사용하는 단일 페이지 앱으로 환경을 설계했습니다. 클라이언트 측 렌더링 성능을 갖춘 웹 앱을 유지하기가 어려울 수 있으므로 Truebil은 특히 기능을 추가할 때 속도 저하를 방지하기 위해 매우 엄격한 성능 예산을 설정했습니다.
팀은 TTI를 위해 5초 미만으로 유지하는 것을 목표로 엄격한 마일스톤 기반 예산을 설정했습니다. 이 목표를 달성하기 위해 250KB JavaScript 번들 크기를 초과하는 빌드가 없도록 수동으로 처리했고, 이미지 크기를 지속적으로 검사하며, 앱의 Lighthouse 성능 점수를 지속적으로 추적했습니다.
자바스크립트 번들 최적화
팀은 PRPL 패턴을 사용하여 JavaScript 페이로드를 사전 캐시 및 최적화하고, HTTP/2로 이전하여 중요한 JavaScript 번들을 제공하는 등 기본사항부터 시작했습니다.
중요하지 않은 리소스를 지연 로드하기 위해 프레임워크 수준의 지연 로드 구성요소를 사용하여 스크롤해야 볼 수 있는 부분의 프래그먼트를 로드했습니다.
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의 콘텐츠 상당 부분이 언제든지 자동차를 추가하거나 구매할 수 있어 매우 동적이지만, Truebil은 사용자가 네트워크가 불안정하거나 완전히 오프라인 상태인 경우에도 참여할 수 있는 일부 콘텐츠를 제공하기를 원했습니다.
팀은 서비스 워커를 사용하여 사용자가 이미 상호작용한 정적 데이터와 동적 데이터를 모두 캐시하여 사용자가 오프라인에서 데이터를 볼 수 있도록 할 수 있었습니다. 다시 온라인 상태가 되었을 때 콘텐츠가 변경될 수 있음을 사용자에게 알리기 위해 팀에서는 오프라인 모드를 나타내는 UI를 그레이 스케일로 변경했습니다. 제품 페이지 탐색은 Truebil 사용자 여정에서 중요한 부분입니다. PWA를 한 번 이상 방문한 사용자는 이전에 방문한 등록정보 및 제품 페이지를 둘러볼 수 있지만 등록정보 또는 제품에 대한 업데이트 사항은 볼 수 없습니다.
참여도를 높여 사용자의 재방문 유도
매력적인 첫 경험
사용자 대부분이 유료 채널에서 유입되기 때문에 Truebil은 전환수를 늘리기 위해 관련성 높은 추천을 표시하는 제품으로 빠르게 로드되는 웹 앱을 보완해야 했습니다. 팀은 기존 사용자를 대상으로 정교한 필터링을 기반으로 한 추천 시스템을 사용하지만 처음 로그인하는 사용자에게는 작동하지 않습니다.
신규 사용자에게 콜드 스타트를 하지 않도록 디지털 마케팅 활동을 활용하여 추천 시스템을 통합했습니다. UTM 매개변수를 통해 자동차 모델, 가격, 차체 유형과 같은 제품 세부정보를 광고의 도착 URL에 추가합니다. UTM 매개변수는 추천 시스템에서 읽고 표시된 제품에 반영됩니다. 시스템이 URL에서 이러한 세부정보를 읽지 않으면 인기 자동차로 대체됩니다. 인기 자동차는 인기 모델, 인기 예산, 지난 몇 주 또는 며칠 동안 인기가 있었던 자동차의 조합입니다.
설치 가능한 웹 앱
완벽한 빠른 속도를 자랑하는 웹 앱과 매력적인 사용자 환경을 구축한 Truebil은 사용자가 계속해서 앱을 이용하도록 만들고자 했습니다. 앱을 설치할 수 있게 만들면 재방문이 훨씬 더 원활해집니다.
팀은 제품을 완전한 프로그레시브 웹 앱 (PWA)으로 만들기 위해 홈 화면에 추가 기능을 구현했습니다. 이 접근 방식을 통해 사용자는 Truebil Lite를 홈 화면에 추가하고 전체 화면 모드로 실행할 수 있습니다. 이미 오프라인 모드를 구현한 상태였기 때문에 새로운 기능을 손쉽게 추가할 수 있었습니다.
팀은 사용자가 스팸을 받지 않도록 하고 사용자가 앱을 설치할 가능성을 높이기 위해 최근 PWA 설치를 촉진하는 전략을 업데이트했습니다. 이를 통해 다양한 종류의 사용자에게 실제로 유용할 때 설치 메시지가 표시되도록 했습니다. Truebil은 3부로 구성된 전략을 수립했습니다.
- 사용자가 작업을 완료했거나 유휴 상태일 때 메시지를 표시합니다.
- 성인 사용자에게 상황별 메시지를 표시합니다.
- 사용자가 사이트에서 일정 시간 동안 머무르면 배너를 표시합니다.
프로세스 완료 및 트래픽이 많은 페이지의 기본 배너
팀에서는 사용자가 작업을 완료하거나 트래픽이 많은 페이지에 있지만 유휴 상태 (즉, 스크롤 또는 양식 작성과 같은 작업을 하지 않는 경우)에 설치 배너를 표시하기로 결정했습니다. 이 접근 방식을 통해 사용자의 활동을 중단하는 것을 피할 수 있었습니다.
성인 사용자를 위한 상황별 메시지
일정 기간 앱과 상호작용한 사용자를 대상으로 팀은 컨텍스트가 높은 맞춤 메시지를 사용하여 홈 화면에 앱을 설치할 때의 가치를 보여주었습니다.
시간 기반 프롬프트용 맞춤 배너
마지막으로 팀은 등록정보 페이지를 열거나 사용자가 일정 시간 앱을 사용한 후와 같은 특정 이벤트가 발생할 때 트리거되는 알림과 유사한 디자인의 비침입형 배너를 구축했습니다.
이러한 개선 덕분에 Truebil의 전환율과 참여율은 사용자 세션이 26% 더 길고 전환수가 61% 증가했으며, 각 전환의 거래 가치가 높다는 점을 감안하면 비즈니스에 큰 의미가 있습니다.
리소스가 제한된 스타트업의 경우 비즈니스의 성공에 적합한 플랫폼을 선택하는 것이 매우 중요합니다. 속도, 복원력, 참여도에 중점을 둔 PWA로 이전한 후 전환이 증가하고 원활한 웹 도달범위 덕분에 수익에서 마케팅에 지출하는 비용을 80% 늘릴 수 있었습니다.
라케시 라만, Truebil 공동 설립자 겸 제품 및 데이터 과학 책임자
44%
로드 시간 개선
26%
더 긴 사용자 세션
61%
전환수 증가
80%
수익 대비 마케팅 비용 증가