애플이 사파리 27.3 베타에 '적응형 다크 모드(Adaptive Dark Mode)'를 추가했다. 사용자가 이 기능을 켜면, 다크 모드를 지원하지 않는 밝은 웹사이트도 사파리가 분석해 어두운 화면으로 변환해 보여준다. 애플이 공개한 배경 수치가 이 기능의 필요성을 잘 설명한다. 전체 웹 페이지 로드의 약 40%가 다크 모드 사용자에게서 발생하지만, 실제로 다크 모드를 지원하는 페이지는 10%에 불과하다. 사파리는 2019년 봄 12.1 버전에서 처음으로 웹 다크 모드를 지원한 브라우저였는데, 6년이 지난 지금도 공급과 수요의 간극이 크게 벌어져 있는 셈이다.
사용 방법은 단순하다. 시스템 외형을 다크로 설정한 뒤 배경이 밝은 사이트에 접속하면, 사파리가 적응형 다크 모드 미리보기를 제안하고 사용자가 '시도(Try)'를 누르면 적용된다. 다만 이 기능은 아무 페이지에나 무차별적으로 개입하지 않는다. HTML의 `나 CSS의 color-scheme: light dark로 다크 모드 지원을 명시한 사이트는 손대지 않고, 이미 배경이 어둡고 글자가 밝은 페이지도 그대로 둔다. 즉 다크 모드가 없는 밝은 페이지만 골라 변환하는 보완적 기능이다.
색을 '뒤집는' 것이 아니라 '판단'하는 엔진
기술의 핵심은 색상 변환이다. 색은 단순 장식일 때도 있지만 의미(semantic)를 담을 때도 있어, 무조건 반전하면 오히려 정보가 깨진다. 적응형 다크 모드는 언제 색을 반전해 요소를 계속 보이게 할지, 언제 원래 색을 유지할지를 판단한다. 애플은 색조(hue)는 보존하면서 명도(luminosity)만 반전하는 색상 행렬을 개발해 밝은 배경은 어둡게, 어두운 글자는 밝게 바꾼다. 텍스트 색을 변환할 때는 WCAG가 정한 4.5:1 대비율을 목표로 충분한 가독성을 확보하며, 밝은 CSS 그라디언트도 어둡게 바꾼다. 버튼과 배경의 대비, 이미지 위 텍스트의 가시성, 호버 메뉴의 선명도까지 고려한다는 설명이다.
이미지 처리도 섬세하다. 대부분의 이미지는 원본 그대로 두어 무결성을 지키지만, 배경색이 반전되면 대비를 잃기 쉬운 아이콘과 로고가 문제다. 그래서 SVG는 내부를 검사해 필요할 때 색을 바꾸고, 비트맵 이미지는 픽셀 히스토그램을 분석해 단순한 흑백 로고를 반전한다. 반면 마스크나 mix-blend-mode 같은 효과는 변환된 요소에서 의도치 않은 결과를 낼 수 있어 일부 상황에서는 꺼버리고, 내용을 예측하기 어려운 는 아예 손대지 않는다. 애플은 이 모든 처리가 웹킷 엔진 내부 깊은 곳에서 이뤄지기 때문에 속도와 전력 효율을 확보하면서 복잡한 문제를 풀 수 있다고 강조한다.
실무자가 준비해야 할 것
웹 개발자 입장에서 중요한 메시지는, 현대적인 개발 관행을 따른 사이트일수록 적응형 다크 모드에서 자연스럽게 잘 작동한다는 점이다. 오래된 기법을 쓰는 사이트라면 작은 수정으로 개선할 수 있다. 로고와 아이콘은 비트맵 대신 SVG로 교체하고, 타일 형태의 배경 이미지 대신 CSS의 단색이나 그라디언트를 쓰며, 이미지 스프라이트는 둥근 모서리·그림자·버튼 상태를 표현하는 최신 CSS로 대체하는 식이다. 이미지에 페이지 배경색을 '구워 넣지' 말고 투명 배경으로 만들고, 컨테이너에는 여백을 둬 요소가 뭉치지 않게 하라는 권고도 담겼다.
가장 확실한 해법은 역시 사이트가 다크 모드를 직접 완전 지원하는 것이다. 애플은 color-mix(), contrast-color() 같은 최신 CSS 함수와 CSS 변수로 디자인 시스템을 구성하는 기법을 포함해, 완전한 다크 모드 구현에 필요한 웹 기술이 이미 널리 보급돼 있다고 말한다. 이때 color-scheme 정보는 HTML 의 메타 태그나 CSS :root·body 속성으로 선언해야 하며, 자바스크립트로 나중에 주입하지 말라는 점을 분명히 했다. 선언이 빠를수록 페이지가 올바르고 빠르게 렌더링되기 때문이다. 반대로 변환을 원치 않는다면 light only로 명시할 수 있는데, 다만 only` 키워드는 27.3 베타 1에서는 아직 지원되지 않아 베타 진행에 따라 확인이 필요하다.
프라이버시라는 전제
이번 발표에서 눈여겨볼 대목은 프라이버시 설계다. 애플은 웹사이트가 적응형 다크 모드 적용 여부를 감지할 수 있게 되면 핑거프린팅에 쓰일 정보가 늘어나 추적 방어가 약화된다고 보고, 사파리가 이를 사이트에 노출하지 않도록 막았다. 자바스크립트로 CSS 색상을 조회하면 변환된 값이 아니라 개발자가 원래 작성한 색상이 반환되고, 캔버스에 그려진 이미지도 원본 형태로 렌더링된다. 변환은 어디까지나 사용자 화면 단에서만 일어나고 사이트 쪽 로직에는 보이지 않는다는 뜻이다. 결국 이 기능은 사용자 경험의 간극을 메우는 보완책이지 개발자의 완전한 다크 모드 구현을 대체하지는 않으며, 세밀한 통제를 원한다면 직접 다크 스타일을 제공하는 것이 여전히 정답이다. 애플은 변환 결과가 어색한 사이트는 피드백 어시스턴트로 제보해 달라고 요청했다.