Safari 27.3 베타, 밝은 웹사이트를 자동으로 어둡게 바꾸는 Adaptive Dark Mode 도입
- Safari 27.3 베타에 Adaptive Dark Mode가 들어감. 사용자가 켜면 밝은 배경의 웹사이트를 자동으로 어둡게 변환하며, 2019년 Safari 12.1이 웹 다크 모드를 처음 지원한 이후 가장 큰 변화임
- 다크 모드 사용자는 페이지 로드의 약 40%인데 다크 모드를 지원하는 페이지는 10%뿐이라, 지원하지 않는 사이트를 어둡게 보여주는 게 목표임
- 명도만 반전하고 색조는 유지하는 색상 행렬을 새로 만들어 밝은 배경과 어두운 글자를 바꾸고, 글자 대비는 WCAG 4.5:1 기준을 맞춤. 밝은 CSS 그라디언트도 변환 대상임
- 이미지는 대부분 그대로 두되 SVG는 검사 후 필요할 때 색을 바꾸고, 비트맵은 픽셀 히스토그램을 분석해 흑백 로고만 반전함. canvas 내용과 mask, mix-blend-mode 효과는 변환에서 제외함
color-scheme: light dark로 다크 모드를 선언한 사이트는 손대지 않고, 자바스크립트가 읽는 CSS 색상은 변환된 값이 아니라 원래 값으로 돌려줘 사이트가 변환 여부를 감지하지 못함
Hacker News 의견들
사용자 입장에선 좋은데 웹 개발자 입장에선 악몽임. 이제 같은 사이트가 사람마다 다르게 보이잖아. 브라우저 엔진에 화면 비율에 플랫폼까지 맞추는 것만으로도 벅찬데.
메타 태그에 color-scheme light only를 넣으면 브라우저가 이 페이지는 라이트 모드만 지원한다고 알게 됨. 그래서 강제 변환 대상에서 빠짐.
개발자인데 나는 환영함. 브라우저가 최종 모습을 정하는 쪽으로 더 밀어붙이면 픽셀 퍼펙트 디자인이나 기본 컨트롤을 디자인 시스템에 맞춰 억지로 뜯어고치는 짓도 사라질지 모름.
prefers-color-scheme을 제대로 구현하라는 가벼운 압박이라고 봄. 다크 팔레트 만들면서 시간 엄청 쓴 디자이너로서 하는 말임.
동의 안 함. 웹은 유동적인 소비 매체라서 그게 핵심임. 일관된 경험을 강제하기 어려운 건 맞지만 웹을 고정된 매체로 취급하면 안 됨.
내가 브라우저에서 폰트 크기 바꾸고 사이트 CSS를 덮어쓸 수 있다는 걸 알면 기절할 듯.
웹은 원래 다르게 보이는 거였음. 디스플레이 종류, DPI, 폰트, 줌 레벨, 리더 모드, 확대경, 고대비 모드까지 다 제각각인데 웹이 고정된 캔버스였다고 착각하는 거임.
사이트가 변환 여부를 감지하지 못하게 브라우저가 거짓말한다는 불평인데, 상대가 서버니까 나는 100% 지지함. 사이트가 브라우저를 통제하는 권한은 줄어들어야 함.
지문 채취 관점에서도 좋음. 사이트가 읽을 수 있는 값이 하나 줄어드는 거니까.
지난주에 다크 모드 플러그인들을 찾아봤는데 선택지가 별로였음. 유명한 Dark Reader는 CSS만 만지는 주제에 백그라운드로 조용히 요청을 많이 보내서 수상했음.
파이어폭스에서는 Stylus 씀. 스타일 검색하거나 직접 쓰면 되고 나도 지금 HN 다크 모드로 보고 있음. 32인치 모니터에서 사이트가 900px로 묶이는 것도 같이 고쳐 쓰는 중.
HN에도 이게 적용되면 좋겠음. 다른 어두운 사이트에서 HN으로 넘어올 때 눈이 아팠는데 나는 사파리를 안 쓰니 소용은 없음.
자동 변환이 웹사이트를 많이 깨뜨릴 것 같음. 같은 기능을 하는 브라우저 플러그인들이 그래 왔음.
그건 옵트인이라 사용자가 선택하는 거고, 자동 변환이 깨지면 사이트가 직접 다크 테마를 만들면 됨. 사용자가 밝은 테마 대신 가끔 깨진 사이트를 고르는 것뿐임.
내 블로그에 다크 모드 넣어봤는데 제대로 하려면 꽤 번거로움. prefers-color-scheme: dark에 body filter: invert()만 걸면 반쯤 되는 척은 되지만 사진까지 반전돼서 엉망이 됨.
invert는 쓰지 마셈. 서브픽셀 렌더링이 망가져서 글자가 지저분해지고 읽기 힘들어짐.
난시 때문에 다크 모드가 흐릿하게 보이고 두통이 옴. 라이트 모드가 기본이고 다크 모드는 모드가 아니라 옵션임.
나는 오히려 다크 모드가 난시에 낫더라. 비문증이나 편두통이 있을 때도 라이트 모드보다 견딜 만함. 어느 쪽이든 선호 자체가 접근성 기능임.