Safari 27.3 베타, 사용자가 선택해 밝은 웹페이지를 어둡게 바꾼다

본문

WebKit은 Safari 27.3 베타에서 Adaptive Dark Mode를 선보였습니다. 사용자가 적용을 선택하면 Safari가 밝은 웹페이지의 색을 어두운 화면에 맞게 바꿉니다. WebKit에 따르면 전체 웹페이지 로드 중 다크 모드 이용자에게서 발생한 로드는 거의 40%지만, 다크 모드를 지원하는 페이지의 로드는 10%입니다. 사이트마다 별도 다크 테마를 만들지 않아도 밝은 페이지를 어두운 화면에서 읽기 쉽게 만드는 기능입니다.

이용자는 먼저 기기의 화면 설정을 다크 모드로 바꾼 뒤 밝은 배경의 사이트를 방문합니다. Safari가 Adaptive Dark Mode 미리보기를 띄우면 Try를 눌러 적용합니다. 이용자가 미리보기를 보고 기능을 선택하는 방식입니다.

Safari는 먼저 사이트가 자체 다크 모드 지원을 선언했는지 확인합니다. HTML의 color-scheme 메타 태그나 CSS 속성에 light dark를 지정한 페이지는 변환하지 않습니다. 그 밖의 페이지에서는 색을 빠르게 분석해 화면이 전반적으로 밝은지 어두운지 추정합니다. 배경이 어둡고 글자가 밝은 페이지는 유지하고, 밝은 페이지는 어두운 화면으로 바꿉니다.

WebKit은 색조를 유지하면서 명도를 반대로 조정하는 색상 행렬을 개발했습니다. 이 행렬로 밝은 배경은 어둡게, 어두운 글자는 밝게 바꿉니다. 색은 장식뿐 아니라 의미를 나타낼 수도 있어, Safari는 요소를 계속 읽거나 알아볼 수 있도록 색을 바꾸거나 유지합니다. 텍스트 색을 바꿀 때는 WCAG가 정한 4.5:1 대비를 확보하는 것을 목표로 합니다. 밝은 CSS 그라데이션도 조정하며, 버튼과 배경의 대비, 이미지 위 텍스트, 마우스를 올렸을 때 열리는 메뉴의 가독성도 고려합니다.

이미지는 대체로 변환하지 않아 원래 모습을 유지합니다. 다만 배경색이 바뀌면 대비가 낮아질 수 있는 SVG 아이콘과 로고는 필요에 따라 색을 조정합니다. 비트맵 이미지에서는 픽셀 히스토그램을 분석해 단순한 흑백 로고를 반전하기도 합니다. 캔버스는 다양한 콘텐츠를 그릴 수 있어 Safari가 변환하지 않습니다. 색을 바꾼 요소의 마스크나 mix-blend-mode가 예상하지 못한 결과를 낼 수 있는 경우에는 해당 효과를 끄기도 합니다.

사이트 운영자는 특정 요소에 color-scheme: light dark를 지정하고 자체 다크 스타일을 적용할 수 있습니다. WebKit은 로고와 아이콘에 비트맵 대신 SVG를 쓰고, 타일형 배경 이미지는 CSS 단색이나 그라데이션으로 바꾸는 방법도 안내합니다. 버튼 상태나 그림자에는 이미지 스프라이트 대신 CSS를 쓰고, 페이지 배경색을 이미지에 합성한 콘텐츠 이미지에는 투명 배경을 사용하는 방법을 제안합니다. 다만 Safari 27.3 베타 1은 light only 선언에 쓰이는 only 키워드를 지원하지 않습니다.

Safari는 웹사이트가 Adaptive Dark Mode 적용 여부를 감지하지 못하게 했습니다. 적용 여부가 사이트에 노출되면 이용자의 브라우저 설정이 추적에 쓰일 수 있기 때문입니다. JavaScript로 CSS 색상을 조회해도 페이지에 원래 작성된 색이 반환되며, 이미지를 캔버스에 그릴 때도 변환 전 형태로 렌더링됩니다.

자료: WebKit 블로그 / 정리·해설: Trawling