Safari 27.3에 Adaptive Dark Mode 도입

Safari 27.3 베타의 Adaptive Dark Mode는 사용자가 활성화하면 다크 모드를 지원하지 않는 밝은 웹사이트를 어둡게 변환함 다크 모드 지원을 선언한 사이트나 이미 어두운 페이지는 그대로 두고, 페이지 색상을 분석해 밝은 페이지에만 변환을 적용함 색조를 유지하면서 밝기를 반전하고, 텍스트는 WCAG 대비율 4.5:1을 목표로 조정함 개발자는 color-scheme 으로 자체 다크 스타일 적용 범위나 변환 제외 의도를 지정할 수 있지만, 제외에 필요한 only 키워드는 Safari 27.3 베타 1에서 아직 지원하지 않음 사용자 프라이버시를 위해 웹사이트가 변환 적용 여부를 감지하지 못하게 하며, JavaScript로 CSS 색상을 조회하면 변환 전 원래 값을 반환함 적용 대상과 활성화 방법 Adaptive Dark Mode는 사이트별 다크 모드 지원 격차를 줄이고 웹 전반에서 일관된 어두운 화면을 제공하도록 설계됨 Safari 12.1은 2019년 봄 웹 다크 모드를 지원한 최초의 브라우저였음 웹 페이지 로드의 약 40%는 다크 모드 사용자에게서 발생하지만, 다크 모드를 지원하는 페이지 로드는 10%에 불과함 Safari 27.3 베타에서 시스템 화면 모드를 다크로 설정한 뒤 밝은 배경의 웹사이트를 방문하면 미리보기가 나타나며, ‘Try’를 눌러 사용해 볼 수 있음 HTML의 <meta name="color-scheme" content="light dark"> 또는 CSS의 color-scheme: light dark로 다크 모드 지원을 선언한 사이트에는 변환을 적용하지 않음 그 외 페이지는 색상을 빠르게 분석해 전체적으로 밝은지 어두운지 판단함 어두운 배경과 밝은 텍스트가 주를 이루면 그대로 유지함 밝은 화면이면 다크 모드로 변환함 색상, 이미지, 효과의 변환 방식 색상 변환 행렬로 색조를 유지하면서 밝기를 반전해 밝은 배경은 어둡게, 어두운 텍스트는 밝게 바꿈 텍스트 색상은 WCAG의 4.5:1 대비율을 목표로 변환함 밝은 CSS 그레이디언트도 어둡게 변환함 색상이 장식용인지 의미를 전달하는지 고려해 반전 여부를 판단함 버튼과 배경 사이의 대비, 이미지 위 텍스트의 가독성, 호버 메뉴의 선명함을 고려함 대부분의 이미지는 원형을 보존하지만, 배경 반전으로 대비가 사라질 수 있는 아이콘과 로고는 별도로 처리함 SVG 이미지를 검사해 필요한 경우 색상을 변환함 비트맵 이미지는 픽셀 히스...