사파리 다크모드 설정과 적응형 다크 모드 베타 안내

사파리에서 다크 모드를 켰는데 웹페이지는 여전히 밝다면, 운영체제 설정과 사이트의 색상 지원을 나눠 살펴볼 필요가 있습니다. WebKit은 Safari 27.3 베타에 밝은 사이트를 어둡게 바꾸는 적응형 다크 모드를 소개했습니다. 기존 다크 모드와의 차이, 공식 설정 순서, 개인 웹사이트 운영자가 확인할 항목을 정리합니다.

WebKit 공식 예제의 밝은 화면과 적응형 다크 모드 비교

출처: WebKit 공식 발표. WebKit의 예제 화면입니다.

핵심 요약

적응형 다크 모드는 Safari 27.3 베타에 소개된 기능입니다. 일반 버전 전체에 적용된 기능으로 받아들이면 안 됩니다.
공식 체험 순서는 시스템 외관을 어둡게 설정하고, 밝은 사이트에서 나타나는 미리보기의 시도 버튼을 누르는 것입니다.
사이트가 직접 제공하는 다크 테마와 브라우저의 자동 색상 변환은 구분해야 합니다.
웹 개발자는 지원 선언과 실제 어두운 스타일을 함께 점검하는 편이 좋습니다.

왜 사파리만 어둡고 웹페이지는 밝을까

W3C의 색상 조정 명세는 사용자의 색상 선호와 웹사이트가 지원하는 색상 모드를 구분합니다. 사용자가 어두운 외관을 선택하는 것, 사이트가 그 선호에 맞는 배경과 글자색을 준비하는 것은 별개의 단계입니다. 따라서 문제를 확인할 때는 브라우저 테두리와 페이지 본문을 따로 보는 것이 좋습니다. W3C 색상 조정 명세

개발자 관점에서도 역할이 나뉩니다. color-scheme은 요소가 어떤 색상 모드를 지원하는지 알리며, 브라우저가 그리는 입력란과 스크롤바 등의 기본 색상에 영향을 줍니다. 이것만 추가한다고 사이트가 지정한 모든 색상이 자동으로 다크 테마가 되는 것은 아닙니다. MDN 색상 모드 속성

이 구분을 알고 있으면 설정을 반복해서 바꾸기 전에 확인할 지점이 보입니다. 먼저 페이지 자체에 테마 선택이 있는지 살펴보고, 없다면 현재 브라우저에서 자동 변환 기능을 사용할 수 있는지 확인하세요.

적응형 다크 모드에서 달라지는 부분

WebKit 설명에 따르면 새 기능은 밝은 페이지를 분석해 어두운 모습으로 변환합니다. 이미 어두운 페이지나 color-scheme으로 다크 모드 지원을 알리는 사이트는 그대로 둡니다. 또한 <canvas> 내용은 변환하지 않습니다. 따라서 페이지 안의 모든 영역이 같은 방식으로 바뀐다고 가정하면 안 됩니다. WebKit 공식 소개

다음 표는 기능을 고를 때 사용할 판단 기준입니다. 우열을 매기기보다 내가 해결하려는 문제가 어디에 있는지 찾는 용도로 보세요.

확인할 대상	목적	먼저 볼 항목
시스템 외관	사용자 색상 선호 지정	시스템이 어두운 외관인지
사이트 자체 테마	사이트가 준비한 디자인 사용	페이지의 테마 메뉴와 본문 색상
적응형 다크 모드	밝은 사이트의 브라우저 변환	지원 베타와 미리보기 표시 여부

공식 안내에 따른 설정·확인 순서

아래는 WebKit 발표에 나온 체험 절차를 한국어로 정리한 것입니다. 직접 설치해 검증한 후기는 아닙니다.

사용 중인 Safari가 해당 기능을 제공하는 27.3 베타인지 확인합니다.
시스템 외관을 어둡게 설정합니다.
밝은 배경의 웹사이트를 엽니다.
Safari가 적응형 다크 모드 미리보기를 제안하면 시도 버튼을 선택합니다.

버튼이 나타나지 않을 때는 기기별 메뉴 이름을 추측하며 설정을 바꾸기보다, 브라우저 버전과 페이지의 원래 색상을 먼저 기록해 두세요. 이후 공식 안내와 대조하면 문의하거나 재확인할 때도 조건을 설명하기 쉽습니다. WebKit 체험 안내

Safari 적응형 다크 모드 확인 순서 도식

WebKit 공식 안내를 바탕으로 제작한 설정 절차 도식입니다. 실제 설정 화면이 아닙니다.

개인 웹사이트 운영자가 점검할 것

사이트를 만드는 쪽이라면 먼저 지원 선언을 확인하세요. 아래 코드는 W3C 명세에 제시된 기본 예시입니다. 밝은 모드와 어두운 모드를 지원한다는 뜻이며, 완성된 테마 전체를 대신하는 코드는 아닙니다.

:root {
  color-scheme: light dark;
}

실제 스타일을 사용자 선호에 맞춰 나눌 때는 prefers-color-scheme 미디어 기능을 사용합니다. MDN은 운영체제나 브라우저 설정으로 표현된 밝은 테마·어두운 테마 선호를 감지하는 기능으로 설명합니다. 사이트가 직접 지정한 배경과 글자색은 이 조건에 맞는 스타일도 준비해야 합니다. MDN 색상 선호 감지

점검은 페이지 전체가 어두워 보이는지만 확인하고 끝내지 않는 편이 좋습니다. 다음 순서로 검토해 보세요.

본문과 카드: 글자색과 배경색을 한 쌍으로 확인합니다.
입력란과 버튼: 기본 상태뿐 아니라 선택·비활성 상태도 비교합니다.
테마 선언: 실제로 준비한 스타일과 지원한다고 알린 모드가 일치하는지 확인합니다.
차트와 안내 문구: 색만 보고 의미를 오해할 여지가 없는지 검토합니다.

이는 특정 사이트의 오류를 단정하는 목록이 아니라 배포 전 검토 제안입니다. W3C도 작성자가 지정한 색과 기본 색을 섞으면 대비가 보장되지 않을 수 있어 전경색과 배경색을 함께 지정할 필요가 있다고 설명합니다.

본문·입력란·버튼의 밝은 테마와 어두운 테마 비교 예시

자체 제작한 테마 점검 예시입니다.

사파리 다크모드 설정, 웹페이지가 밝다면?