다크 모드는 왜 늘 손이 두 배로 가는가
요즘 손님들은 밤에 침대에 누워 휴대폰으로 가게를 찾는다. 화면이 하얗게 번쩍이면 눈이 부셔 이내 창을 닫는다. 그래서 다크 모드는 이제 '멋'이 아니라 '배려'가 됐다. 문제는 만드는 쪽이다. 버튼 하나, 글자색 하나마다 밝을 때 쓸 색과 어두울 때 쓸 색을 따로 정의하고, 자바스크립트로 화면 전체에 클래스를 갈아 끼운다. 색이 늘어날수록 관리해야 할 짝이 두 배로 불어난다.
light-dark()는 색 한 줄에 두 가지 답을 담는다
CSS의 light-dark() 함수는 이 짐을 덜어 준다. 이름 그대로 밝을 때 쓸 색과 어두울 때 쓸 색, 두 값을 괄호 안에 나란히 적어 두면 된다. 가령 글자색을 color: light-dark(#1a1a1a, #f2f2f2)라고 한 번만 써 두면, 브라우저가 지금 화면이 밝은 모드인지 어두운 모드인지를 보고 알아서 앞의 값이나 뒤의 값을 고른다. 같은 색을 두 곳에 나눠 적고 미디어 쿼리로 갈아 끼우던 일이, 한 줄로 끝난다.
color-scheme이 먼저 깔려 있어야 한다
단, light-dark()가 판단의 근거로 삼는 것은 color-scheme 속성이다. 최상단에 color-scheme: light dark를 선언해 '이 사이트는 두 모드를 모두 지원한다'고 알려 줘야, 함수가 시스템 설정과 사용자 선택을 읽어 올바른 값을 고른다. 이 한 줄을 빼먹으면 light-dark()는 늘 밝은 값만 내놓는다.
실무에서는 이렇게 쓴다
- 색을 변수로 모아 두기: 브랜드 색·배경·글자색을 각각 light-dark()로 정의한 CSS 변수 하나로 묶으면, 사이트 전체 팔레트가 파일 한 곳에서 밝고 어두움을 함께 관리된다.
- 시스템 설정 자동 반영: 손님 휴대폰이 야간 모드면 별도 조작 없이도 어두운 화면이 뜬다. 낮에 온 손님에겐 밝은 화면이 그대로다.
- 수동 토글도 간단하게: '밝게/어둡게' 버튼을 두고 싶다면, 자바스크립트로 색을 일일이 바꿀 필요 없이 color-scheme 값만 바꿔 주면 전체가 따라온다.
- 이미지·로고 대비 점검: 함수가 색은 바꿔 줘도 흰 배경이 박힌 로고 이미지까지 바꾸진 못한다. 투명 배경 이미지를 쓰는 것이 안전하다.
작은 회사 홈페이지일수록 '알아서'가 중요하다
대기업이야 다크 모드 전담 인력이 있지만, 작은 가게 홈페이지는 사장님이 공지 한 줄 고치기도 벅차다. 그래서 손댈 곳이 적은 구조가 곧 오래 가는 홈페이지다. light-dark()처럼 표준 CSS 한 줄로 두 모드를 함께 관리하면, 나중에 색을 바꿔도 실수로 한쪽 모드만 어긋나는 사고가 줄어든다.
CYAN 에이전시는 작은 회사 홈페이지를 만들 때 이런 최신 표준을 기본값으로 깔아 둔다. 화려한 기능을 얹기보다, 손이 덜 가고 손님 눈이 편한 구조를 먼저 챙긴다. 밤에 찾아온 손님이 눈부심 없이 우리 가게를 편히 둘러보게 하는 것, 그 작은 배려가 결국 머무는 시간을 늘린다.
