> 참고: 이 글은 WebKit 공식 블로그 글 전문을 확인하지 못한 채 썼어요. 확인된 건 'Safari 27.3에 Adaptive Dark Mode가 소개됐다'는 사실까지예요. 동작 방식에 대한 설명은 기능 이름과 다른 브라우저 사례를 바탕으로 한 추정이니, 정확한 동작과 제외 방법은 원문에서 꼭 확인해 주세요.
밤에 침대에서 아이폰으로 웹서핑을 하다가, 링크를 눌렀더니 새하얀 화면이 눈을 때린 적 있으시죠? 시스템은 다크 모드인데 웹사이트가 다크 모드를 지원하지 않아서 생기는 일이에요. WebKit 팀이 Safari 27.3의 새 기능으로 Adaptive Dark Mode를 소개했는데요, 이름대로라면 다크 테마가 없는 페이지도 브라우저가 상황에 맞춰 어둡게 보여 주는 기능으로 짐작돼요.
이게 프론트엔드 개발자에게 왜 중요하냐면요, 지금까지 웹의 색은 기본적으로 사이트가 정하는 영역이었거든요. 브라우저가 색을 바꿔 보여 주기 시작하면, 우리가 CSS에 적은 색과 사용자가 보는 색이 달라질 수 있어요. 아이폰 사용자가 많은 서비스라면 QA 범위도 넓어질 수 있고요.
지금까지 웹의 다크 모드는 어떻게 동작했을까
먼저 기본기부터 정리해 볼게요. 사이트가 직접 다크 모드를 지원하는 방법은 크게 세 가지예요.
첫째, prefers-color-scheme 미디어 쿼리예요. '사용자 시스템이 다크 모드면 이 CSS를 적용해 줘'라고 조건을 거는 방식이에요. @media (prefers-color-scheme: dark) { ... }처럼 쓰죠.
둘째, color-scheme 속성이에요. 이게 뭐냐면, 브라우저에게 '우리 페이지는 밝은 테마와 어두운 테마를 둘 다 지원해요'라고 알려 주는 명함 같은 거예요. :root { color-scheme: light dark; }라고 선언하면 스크롤바, 입력창, 기본 배경색 같은 브라우저 기본 요소까지 테마에 맞춰져요. HTML의 meta 태그로도 선언할 수 있는데, 이렇게 하면 CSS를 받기 전 첫 화면부터 색을 맞출 수 있어서 깜빡임을 줄일 수 있어요.
셋째, light-dark() 함수예요. color: light-dark(#111, #eee);처럼 밝을 때와 어두울 때의 값을 한 줄에 적는 방법이에요.
이 세 가지의 공통점은 개발자가 직접 색을 설계한다는 거예요. 반면 자동 다크 모드는 브라우저가 페이지의 색을 분석해서 바꿔요. 페인트공이 집을 통째로 다시 칠해 주는 셈인데요, 편하긴 해도 '이 벽은 일부러 흰색으로 둔 건데'라는 의도까지 알아채긴 어려워요.
자동 변환에서 자주 깨지는 것들
다른 브라우저의 자동 다크 모드나 확장 프로그램에서 흔히 보이는 문제들이 있어요. Safari에서도 똑같이 일어난다는 뜻은 아니지만, 점검 목록으로는 충분히 쓸 만해요.
투명 배경 PNG 로고가 대표적이에요. 검은 글자가 들어간 로고가 어두운 배경 위로 올라가면 사라져 버리죠. 글자가 박힌 배너 이미지도 문제예요. 주변만 어두워지면 이미지가 붕 떠 보이거든요. canvas로 그린 차트나 지도는 JavaScript로 색을 칠하기 때문에 페이지와 따로 놀기 쉬워요. 브랜드 색상이나 성공, 경고, 오류를 나타내는 상태 색상이 바뀌면서 의미가 흐려지는 경우도 있고요.
다른 브라우저는 어떻게 하고 있을까
이런 시도가 처음은 아니에요. Chrome은 Android에서 Auto Dark Theme을 제공해 왔고, 페이지가 color-scheme: only light로 밝은 테마만 쓰겠다고 선언하면 자동 변환을 피할 수 있게 했어요. 삼성 인터넷도 웹페이지를 어둡게 바꾸는 기능을 제공하고, 데스크톱에서는 Dark Reader 같은 확장 프로그램이 비슷한 역할을 해 왔어요. 접근성 쪽에는 forced-colors라는 개념도 있어요. 윈도우의 고대비 모드처럼 사용자 설정이 사이트 색을 덮어쓸 때 대응하는 기준이에요.
Safari가 이 흐름에 합류한다면 의미가 꽤 커요. iPhone과 Mac 사용자에게 기본 브라우저로 쓰이는 경우가 많으니까요. 다만 Safari가 Chrome과 같은 제외 규칙을 쓰는지는 이 글에서 단정할 수 없어요. 이 부분은 WebKit 원문을 꼭 확인해 주세요.
한국 개발자에게 주는 시사점
국내 서비스에는 챙겨 볼 부분이 특히 많아요. 쇼핑몰 상세 페이지처럼 긴 이미지를 통으로 올리는 구조, 글자가 들어간 프로모션 배너, 오래된 공공기관 페이지, WebView 기반 하이브리드 앱이 대표적이에요. 앱 개발자라면 WKWebView에도 이 기능이 적용되는지를 가장 먼저 확인해 보세요.
당장 해 볼 수 있는 일은 이 정도예요.
1. color-scheme을 명시해서 우리 사이트의 의도를 브라우저에 알려 주세요.
2. 색상 값을 CSS 변수로 모으세요. --white보다 --color-surface처럼 역할 중심으로 이름을 지으면 테마를 늘리기 쉬워져요.
3. 로고와 아이콘은 SVG와 currentColor를 쓰고, 이미지는 picture 요소로 다크용 버전을 나눌 수 있는지 살펴보세요.
4. 차트는 matchMedia('(prefers-color-scheme: dark)')로 테마를 감지해서 색을 바꾸고, 테마 변경 이벤트도 함께 처리해 주세요.
5. Safari 27.3을 실제 기기에서 켜 보고 주요 화면을 캡처해 비교해 보세요.
마무리
한 줄로 정리하면, 다크 모드가 '사이트가 제공하는 기능'에서 '브라우저가 챙겨 주는 경험'으로 옮겨 가는 신호일 수 있고, 그럴수록 개발자는 자기 의도를 코드로 분명히 표현해야 한다는 이야기예요.
여러분은 브라우저의 자동 다크 모드가 반가우신가요, 아니면 디자인 의도를 해칠까 봐 걱정되시나요? 다크 모드를 넣으면서 가장 애먹었던 화면도 공유해 주세요.
🔗 출처: Hacker News