Terra가 어두운 모드를 통해 사용자 참여도를 개선한 방법

Terra는 기기에서 어두운 모드를 선호하는 사용자에게 어두운 테마를 표시하여 이탈률을 60% 줄이고 세션당 읽는 페이지 수를 170% 높였습니다.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

월간 사용자 7,500만 명을 보유한 브라질 최대 미디어 회사 중 하나인 Terra는 맞춤 어두운 테마를 제공하여 어두운 모드를 선호하는 사용자의 데스크톱에서 이탈률을 60% 줄이고 페이지당 세션을 170% 늘렸습니다.

이 도움말에서는 Terra가 '어두운 모드' 동질 집단의 크기를 파악하고 맞춤 어두운 테마를 적용한 후 마지막으로 이 구현이 주요 KPI에 미치는 영향을 측정하는 과정을 분석해 보겠습니다.

60_%

이탈률 감소

170_%

세션당 페이지수 증가

어두운 모드란 무엇인가요?

이전에는 기기의 사용자 인터페이스가 '밝은 모드'로 표시되었습니다. 즉, 일반적으로 밝은 인터페이스 위에 검은색 텍스트를 표시했습니다. 대안은 회색이나 검은색과 같은 어두운 배경에 밝은 텍스트가 있는 '어두운 모드'입니다.

어두운 모드는 사용자 환경에 이점이 있습니다. 미적 또는 접근성 이유로 선호하는 사용자도 있습니다. 기기의 배터리 수명 보존과 같은 다른 이점도 있습니다. 사용자는 기기의 설정을 통해 어두운 모드를 선호한다고 표시할 수 있습니다(운영체제에 따라 다름). 예를 들어 다음 스크린샷은 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');

테라는 사이트에 이 코드를 구현하고 모바일 (Android) 및 데스크톱 (Windows) 기기에서 두 그룹의 동작을 비교했습니다. 당시 테라는 맞춤 어두운 테마를 제공하지 않았기 때문에 이 실험의 목표는 다음과 같습니다.

• 어두운 모드를 선호하는 사용자 그룹의 크기를 결정합니다.
• 패턴 파악: 예를 들어 어두운 모드를 선호하는 사용자가 밝은 모드를 선호하는 사용자에 비해 사이트에서 더 빨리 나가나요?

이를 알면 맞춤 어두운 테마를 제공해야 하는 경우와 같이 의사결정에 참고할 수 있습니다. Terra가 14일 동안 테스트한 결과는 다음과 같습니다.

모바일 (Android)

모바일 (Android)의 경우 이탈률과 세션당 페이지 수가 '밝은' 모드를 선호하는 사용자와 '어두운' 모드를 선호하는 사용자 간에 큰 차이를 보이지 않았습니다.

데스크톱 (Windows)

데스크톱 (Windows)의 경우 '어두운 모드'를 선호하는 사용자 그룹이 사이트에 머무는 시간이 훨씬 짧았습니다. '밝은 모드'를 선호하는 사용자에 비해 이탈률이 거의 2배 높고 페이지의 절반을 조금 넘게 읽었습니다.

이 데이터를 바탕으로 Terra는 '어두운 테마'를 선호하는 사용자가 사이트에서 어두운 테마를 지원하지 않아 데스크톱 기기에서 머무는 시간이 적다고 가정했습니다.

Terra는 다음 단계로 어두운 테마를 선호하는 사용자 그룹의 참여도를 개선할 수 있는지 확인하기 위해 '어두운 테마' 전략을 수립하기로 결정했습니다.

어두운 테마 구현

대부분의 웹사이트는 앞에서 설명한 간단한 전략을 사용하여 prefers-color-scheme 미디어 쿼리를 통해 사용자의 구성 변경사항을 리슨하고 그에 따라 스타일을 변경하여 어두운 테마를 구현합니다.

Terra는 사용자에게 더 많은 제어 권한을 부여하기로 결정했습니다. 미디어 쿼리를 통해 기기에서 '어두운 모드 선호' 설정이 사용 설정되어 있는 것을 감지하면 '야간 모드'로 탐색할지 묻는 메시지를 표시합니다. 사용자가 '무시' 버튼을 클릭하여 메시지를 거부하지 않는 한 사용자의 OS 설정을 따르고 맞춤 어두운 테마를 적용합니다.

이 전략을 보완하기 위해 '설정' 화면에 추가 구성 옵션을 제공합니다. 여기에서 사용자는 '밝은 모드', '어두운 모드' 중 어느 쪽을 명시적으로 선호하는지 또는 기본 기기 설정을 사용할지 결정할 수 있습니다.

Terra의 '야간 모드'는 다음과 같이 표시됩니다.

Terra의 어두운 테마가 미치는 영향 측정

어두운 테마의 영향을 측정하기 위해 Terra는 기기에서 '어두운 테마 사용' 설정을 사용 설정한 사용자 그룹을 대상으로 '밝은 테마'와 '어두운 테마'를 표시할 때의 참여도 측정항목을 비교했습니다. 다음은 모바일 (Android) 및 데스크톱 (Windows)의 결과입니다.

모바일(Android)

이탈률은 비슷한 수준을 유지했지만 사용자에게 어두운 테마에 노출된 경우 페이지와 세션수가 거의 두 배 (2.47에서 5.24) 증가했습니다.

2_배

세션당 페이지수 증가

데스크톱 (Windows)

어두운 테마를 표시하면 두 측정항목이 모두 개선되었습니다. 이탈률은 27.25%에서 10.82%로, 세션당 페이지 수는 3.7에서 9.99로 거의 세 배나 증가했습니다.

60_%

이탈률 감소

170_%

세션당 페이지수 증가

Terra는 이 데이터를 바탕으로 사용자가 어두운 테마를 구현할 때 얻을 수 있는 이점을 확인하고 이를 사이트의 핵심 기능으로 계속 유지하기로 결정했습니다.

결론

어두운 모드는 사용자가 기기에서 사용 설정하여 화면의 스타일을 어두운 테마로 변경할 수 있는 환경설정입니다. 이 기법은 사용자 환경과 사용자 기기의 다양한 측면(예: 배터리 수명 절약)에 이점을 제공하는 것으로 보고되었습니다.

이 도움말에서는 맞춤 어두운 테마를 제공하여 기기에서 선호하는 어두운 모드 설정을 사용 설정한 Terra 사용자 그룹의 참여도 측정항목을 개선한 방법을 살펴봤습니다.

대체 어두운 테마를 구현할 리소스가 있는 회사의 경우 이 접근 방식을 사용하는 것이 좋습니다. 이러한 기능에 투자할 시간이 없는 사용자를 위해 Chrome에서는 자동 어두운 모드 기능을 출시하기 시작했습니다.