Safari 27.3 Adaptive Dark Mode, 밝은 사이트도 어둡게

애플이 Safari 27.3 베타에 Adaptive Dark Mode를 넣었습니다. 사용자가 켜면 다크 모드를 지원하지 않는 밝은 사이트도 브라우저가 어둡게 바꿔 보여줍니다. 사이트를 고치지 않아도 되는 것이 이 기능의 요점입니다.

웹킷 블로그가 밝힌 숫자는 이렇습니다. 다크 모드 사용자가 만드는 페이지 로드가 전체의 약 40%인데, 다크 모드를 지원하는 페이지 로드는 10%뿐입니다. 브라우저가 나머지 30%포인트를 대신 메우겠다는 구상입니다.

사이트 운영자에게는 다른 의미입니다. 강제 변환이 기본값이 되면 로고와 배너, 차트처럼 색으로 말하는 요소가 브라우저 손에 넘어갑니다. 어디까지 바뀌고 어디서 막을 수 있는지가 실무 포인트입니다.

사이트가 아니라 브라우저가 색을 고른다

동작은 단순합니다. HTML의 meta color-scheme이나 CSS의 color-scheme: light dark로 다크 모드 지원을 선언한 사이트는 아무것도 바뀌지 않습니다. 나머지 사이트는 페이지 색을 빠르게 분석해 밝은지 어두운지 추정합니다.

어두운 배경에 밝은 글자인 페이지는 그대로 둡니다. 밝은 페이지일 때만 어둡게 변환합니다. 켜는 방법은 시스템 화면 모드를 다크로 두고 밝은 사이트를 여는 것입니다. 미리보기가 뜨면 Try를 누르면 적용됩니다.

애플은 2019년 봄 Safari 12.1로 웹 다크 모드를 처음 지원한 브라우저입니다. 7년이 지나도록 지원 사이트가 10%에 머문 것이 이번 기능의 배경입니다.

밝기만 뒤집고 색조는 남긴다

핵심은 색 행렬입니다. 밝기는 반전하면서 색조는 유지하는 변환을 씁니다. 밝은 배경은 어둡게, 어두운 글자는 밝게 바뀝니다.

글자색을 바꿀 때는 WCAG 대비율 4.5:1을 목표로 잡습니다. 밝은 CSS 그라데이션도 어두운 쪽으로 변환하고, 버튼과 배경, 이미지 위 글자, 호버 메뉴의 가독성을 따로 챙깁니다.

이미지는 대부분 손대지 않습니다. 다만 아이콘과 로고는 배경이 반전되면 대비를 잃습니다. SVG는 색을 변환하고, 비트맵은 픽셀 히스토그램을 분석해 단순한 흑백 로고만 반전합니다.

예외도 분명합니다. mask와 mix-blend-mode는 변환된 요소에서 결과가 나빠질 수 있어 끄는 경우가 있고, canvas 내용은 예측이 어려워 그대로 둡니다. 차트나 지도, 게임 화면이 캔버스로 그려져 있다면 다크 모드에서도 밝은 채로 남습니다.

막는 방법과 프라이버시

특정 페이지를 변환에서 빼려면 color-scheme: light only를 씁니다. 다만 only 키워드는 Safari 27.3 베타 1에서 아직 지원하지 않습니다. 베타가 진행되면서 추가될 항목이라고 애플은 적었습니다.

프라이버시 쪽 설계는 분명합니다. 사이트가 사용자의 Adaptive Dark Mode 적용 여부를 감지할 수 없게 했습니다. 자바스크립트로 CSS 색상을 조회하면 변환 전 원래 값이 돌아옵니다. 다크 모드 사용 여부가 추적 지문 정보가 되지 않게 막은 것입니다.

애플이 권하는 정비는 평범합니다. 로고와 아이콘은 SVG로 바꾸고, 타일 배경 이미지 대신 단색이나 그라데이션 CSS를 씁니다. 이미지 스프라이트 대신 CSS로 모서리와 그림자, 버튼 상태를 만듭니다. 콘텐츠 이미지는 배경색을 굽지 말고 투명 배경으로 저장하고, 컨테이너에 여백을 줍니다.

지금 사이트에 생기는 일

Safari 비중이 높은 블로그나 쇼핑몰은 강제 변환이 기본 노출이 됩니다. 브랜드 색이 중요한 페이지는 color-scheme 선언 한 줄로 통제권을 되찾는 편이 낫습니다.

자체 다크 스타일이 없으면 변환 품질을 브라우저에 맡기는 셈입니다. prefers-color-scheme 미디어 쿼리와 CSS 변수로 직접 다크 스타일을 주면 결과가 예측 가능합니다.

베타 1 기준으로 선택지는 두 가지입니다. 전체 다크 모드를 지원하거나, 변환을 받아들이거나. 사이트 일부만 제외하는 세밀한 제어는 아직 되지 않습니다.

지원 선언은 head의 meta color-scheme이나 루트 요소의 color-scheme로 넣고, 자바스크립트로 나중에 주입하지 않는 것이 애플의 권고입니다. 브라우저가 첫 렌더링에서 바로 판단해야 화면이 깜빡이지 않습니다.

직접 다크 스타일을 만들 때 쓸 도구는 이미 있습니다. prefers-color-scheme 미디어 쿼리, picture 요소의 source media, color-mix()와 contrast-color() 같은 함수가 그것입니다. 선언만 해두면 변환에서 빠지고, 세부 색은 사이트가 정하게 됩니다.

주의할 지점은 이미지입니다. 배너에 글자를 구워 넣었다면 변환 대상이 아니어서 어두운 화면에서 혼자 밝게 남습니다. 로고를 비트맵으로 두면 단순한 흑백 로고만 반전되고 컬러 로고는 그대로여서, 같은 사이트의 로고가 위치마다 다르게 보일 수 있습니다.

40%라는 숫자도 그대로 읽으면 안 됩니다. 사용자 비중이 아니라 페이지 로드 비중입니다. 다크 모드 사용자가 밝은 사이트를 더 자주 여는 경향이 반영된 값이므로, 실제 사용자 비율은 이보다 낮을 수 있습니다.

무엇보다 이 기능은 사용자가 켜야 동작합니다. 다크 모드를 쓰지 않는 방문자에게는 사이트가 지금과 똑같이 보입니다. 기존 디자인을 그대로 두고 다크 모드 사용자만 따로 챙기는 방식이 가능하다는 뜻입니다.

원문 반응

해커뉴스 댓글에서는 Hacker News 자체가 다크 모드 없는 대표 사례로 언급됩니다. 인기 사이트 4곳 중 1곳만 지원한다는 점을 아쉽게 보는 반응이 많았고, prefers-color-scheme은 주요 브라우저가 7년 전부터 지원하니 설정하지 않을 이유가 없다는 지적도 나왔습니다.

반대 의견도 있습니다. 다크 모드가 오히려 읽기 어렵다는 사람은 자동 변환이 반갑지 않다고 말합니다. 브라우저가 모든 사이트를 어둡게 만드는 것과 사이트가 직접 고른 어두운 색은 결과가 다르다는 것입니다.

한 줄 정리

Adaptive Dark Mode는 다크 모드 없는 사이트의 몫을 브라우저가 가져간 변경입니다. 운영자라면 color-scheme을 선언하고, 캔버스와 이미지 속 글자처럼 변환되지 않는 요소를 따로 점검하는 것으로 대응이 끝납니다.

원문 보기 - Introducing Adaptive Dark Mode (WebKit Blog)

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.