Terra는 기기에서 어두운 모드를 선호하는 사용자에게 어두운 테마를 표시하여 이탈률을 60% 줄이고 세션당 읽은 페이지 수를 170% 늘렸습니다.
월 사용자 7,500만 명을 보유한 브라질 최대 미디어 기업 중 하나인 Terra는 어두운 모드를 선호하는 사용자를 위해 맞춤형 어두운 테마를 제공하여 데스크톱에서 이탈률을 60% 줄이고 세션당 페이지 읽기를 170% 늘렸습니다.
이 도움말에서는 '어두운 모드' 동질 집단의 크기를 파악하는 것에서부터 맞춤 어두운 테마를 적용한 후, 마지막으로 이 구현이 주요 KPI에 미치는 영향을 측정하는 것까지 Terra의 여정을 분석합니다.
60%
이탈률 감소
170%
세션당 페이지 더보기
어두운 모드란 무엇인가요?
이전에는 기기의 사용자 인터페이스가 '라이트 모드'로 표시되었으며, 이는 일반적으로 밝은 인터페이스 위에 검은색 텍스트를 표시하는 것을 의미합니다. 다른 방법은 '어두운 모드'로, 회색이나 검은색과 같이 어두운 배경에 밝은 텍스트가 표시됩니다.
어두운 모드는 사용자 환경에 이점이 있습니다. 어떤 사람들은 미적 요소나 접근성을 이유로 Google Workspace를 선호합니다. 기기의 배터리 수명 보존과 같은 다른 장점이 있습니다. 사용자는 운영체제에 따라 달라지는 기기의 설정을 통해 어두운 모드를 선호한다고 표현할 수 있습니다. 예를 들어 다음 스크린샷은 Android Q를 실행하는 기기에서 어두운 테마 구성 옵션이 어떻게 표시되는지 보여줍니다.
'어두운 모드'를 선호하는 사용자에게 더 나은 환경을 제공하려면 값이 light 또는 dark인 prefers-color-scheme 미디어 쿼리를 사용하면 됩니다. 이 미디어 쿼리는 기기에서 사용자가 선택한 사항을 반영합니다. 그런 다음 어두운 테마를 선호하는 사용자를 위해 맞춤 어두운 테마를 로드할 수 있습니다. 예를 들어 '어두운' CSS 파일을 로드하고 글꼴 및 배경 색상과 같은 값을 변경합니다. 다음 코드는 이에 대한 예를 보여줍니다.
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
'밝은 색 선호'와 '어두운' 사용자 동질 집단 식별
이 보고서 작성 시점 (2021년 12월)을 기준으로 Chrome 플랫폼 상태는 웹 트래픽의 약 22%가 '어두운 색 선호'로 설정된 사용자로부터 발생한 것으로 판단합니다.
이는 합산 데이터이므로 사이트에 방문하는 어두운 색을 선호하는 사용자의 실제 비율은 다를 수 있습니다. 따라서 이 그룹의 규모를 이해하려면 사내 측정을 진행하는 것이 좋습니다.
다음 코드는 light와 dark를 선호하는 사용자의 실적을 측정하는 애널리틱스 측정기준을 만듭니다.
function getColorScheme() {
let colorScheme = 'Unknown';
if (window.matchMedia) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
colorScheme = 'Dark';
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
colorScheme = 'Light';
}
}
return colorScheme;
}
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date; ga('create', 'UA-ID', 'auto');
ga('set', 'color-scheme-preference', getColorScheme());
ga('send', 'pageview');
Terra는 사이트에 이 코드를 구현하고 모바일 (Android) 기기와 데스크톱 (Windows) 기기에서 두 그룹의 행동을 비교했습니다. 당시 Terra는 맞춤 어두운 테마를 제공하지 않았으므로 이 실험의 목표는 다음과 같습니다.
- 어두운색을 선호하는 사용자 그룹의 규모를 결정합니다.
- 패턴 파악: 예를 들어 어두운 색을 선호하는 사용자는 밝은 색을 선호하는 사용자보다 사이트를 더 빨리 떠납니까?
이를 알면 맞춤 어두운 테마를 제공해야 하는 등의 경우에 결정을 내릴 때 도움이 됩니다. 다음은 14일 동안 테스트한 후 테라가 얻은 결과입니다.
모바일 (Android)
모바일 (Android)의 경우 이탈률 및 세션당 페이지수는 '밝은' 것을 선호하는 사용자와 '어두운 색'을 선호하는 사용자 간의 큰 차이를 보여주지 못했습니다.
데스크톱 (Windows)
데스크톱 (Windows)의 경우 '어두운 색'을 선호하는 사용자 그룹은 사이트에 머무는 비율이 훨씬 더 낮았습니다. '밝은 색'을 선호하는 사용자보다 이탈률이 거의 두 배이고 페이지의 절반 이상을 약간 읽었습니다.
Terra는 이 데이터를 바탕으로 사이트에서 어두운 테마를 지원하지 않기 때문에 '어두운 색'을 선호하는 사용자가 데스크톱 기기에 머무는 빈도가 낮다고 가정했습니다.
Terra는 다음 단계로 '어두운 테마' 전략을 수립하여 어두운 테마를 선호하는 사용자 그룹의 참여도를 높일 수 있는지 알아보기로 했습니다.
어두운 테마 구현
대부분의 웹사이트에서는 prefers-color-scheme 미디어 쿼리를 통해 사용자 구성 변경을 수신 대기하고 이를 바탕으로 스타일을 변경하는 이전에 보여드린 간단한 전략을 사용하여 어두운 테마를 구현합니다.
Terra는 사용자에게 더 많은 제어 기능을 제공하기로 했습니다. 미디어 쿼리를 통해 기기에서 '어두운 화면 선호' 설정이 켜져 있음을 감지하면 '야간 모드'로 탐색할지 묻는 메시지를 표시합니다. 사용자가 '무시' 버튼을 클릭하여 메시지를 거부하지 않는 한 사용자의 OS 설정을 따르고 맞춤 어두운 테마를 적용합니다.
이 전략을 보완하기 위해 '설정' 화면에서 추가 구성 옵션을 제공합니다. 여기서 사용자는 명시적으로 '밝은' 것을 사용할지, '어두운지'를 사용할지 아니면 기본 기기 설정을 사용할지 결정할 수 있습니다.
Terra의 '야간 모드'는 다음과 같이 표시됩니다.
테라의 어두운 테마가 미치는 영향 측정
Terra는 어두운 테마의 영향을 측정하기 위해 기기에서 '어두운 테마 선호' 설정을 사용 설정한 사용자 그룹을 대상으로 '밝은' 테마와 '어두운' 테마를 표시할 때의 참여도 측정항목을 비교했습니다. 모바일 (Android) 및 데스크톱 (Windows)의 결과는 다음과 같습니다.
모바일 (Android)
이탈률은 비슷한 수준을 유지했지만, 사용자가 어두운 테마에 노출되었을 때 페이지와 세션은 거의 두 배 (2.47에서 5.24로) 증가했습니다.
2X
세션당 페이지 더보기
데스크톱 (Windows)
어두운 테마를 표시할 때 두 측정항목 모두 개선되었습니다. 이탈률은 27.25% 에서 10.82% 로 증가했고 세션당 페이지 수는 거의 3배 (3.7에서 9.99로) 거의 3배 증가했습니다.
60%
이탈률 감소
170%
세션당 페이지 더보기
테라는 이 데이터를 바탕으로 사용자가 어두운 테마를 구현할 경우 얻을 수 있는 이점을 확인하고 사이트의 핵심 기능으로 계속 유지하기로 결정했습니다.
결론
어두운 모드는 사용자가 기기에서 사용 설정하여 화면의 스타일을 어두운 테마로 변경할 수 있는 환경설정입니다. 이 기술은 사용자 환경의 이점과 배터리 수명 절약과 같은 사용자 기기의 다양한 측면에 이점이 있다고 보고되었습니다.
이 도움말에서는 맞춤 어두운 테마를 제공하여 기기에서 선호하는 어두운 모드 설정을 사용하는 Terra 사용자 그룹의 참여도 측정항목을 어떻게 개선했는지 확인했습니다.
이 방법은 대체 어두운 테마를 구현할 수 있는 리소스가 있는 회사에 권장되는 접근 방식입니다. 이러한 기능에 투자할 시간이 없는 사용자를 위해 Chrome은 자동 어두운 모드 기능을 출시하기 시작할 예정입니다.