색상 설정, 줄 길이, 다크모드. 직접 써보고 달라진 것들.
한참 모니터를 들여다보다가 퇴근하면 눈이 뻑뻑하고 화면이 잔상처럼 남는 느낌, 한 번쯤 겪어봤을 겁니다. 저는 그게 당연한 줄 알았습니다. 컴퓨터를 많이 써서 그런 거라고. 그런데 어느 날 CSS를 조금 손봤더니 같은 시간을 봐도 눈이 덜 피로한 걸 느꼈습니다. 모니터가 바뀐 것도, 안경을 새로 맞춘 것도 아니었는데.
그 뒤로 화면이 눈에 주는 피로감이 설정에 따라 달라진다는 걸 체감했습니다. 이 글은 제가 직접 써보고 "이건 확실히 다르다"고 느낀 CSS 설정 다섯 가지와, 그걸 다크모드까지 연결하는 방법을 정리한 기록입니다.
배경색, 글자색, 줄 길이 — 숫자로 보는 색상 설정
배경색을 순수 흰색 대신 아주 약간 따뜻한 색으로 바꾸는 것은 단순한 취향 문제가 아닙니다. 이 차이는 광도 값의 차이로 설명됩니다. 광도란 화면이 방출하는 빛의 밝기를 수치화한 것으로, 순수 흰색은 최대 광도를 출력해 눈의 조절근을 지속적으로 긴장시킵니다. 저도 처음 배경색을 바꿨을 때는 그 자리에서 큰 차이를 못 느꼈습니다. 그런데 그날 저녁 눈이 평소보다 덜 뻑뻑하다는 걸 알아챘고, 그때부터 이 설정을 진지하게 보기 시작했습니다. 즉각적으로 느껴지는 변화가 아니라 누적해서 느껴지는 변화였습니다. 그래서 더 오래 걸렸지만, 확인했을 때는 분명했습니다.
처음에 이 변화를 믿지 않았던 이유가 있습니다. "그냥 기분 탓 아닐까"라는 생각이었는데, 의심을 떨치고 싶어서 일주일씩 번갈아 써봤습니다. 순수 흰색 배경 한 주, 약간 따뜻하게 조정한 배경 한 주. 두 번째 주가 끝날 무렵 눈의 피로감 차이가 다시 분명해졌습니다. 기분 탓만은 아니었습니다.
글자색도 마찬가지입니다. 순수 검정 대신 약간 완화된 짙은 색을 쓰는 이유는 명암비와 관련이 있습니다. 명암비란 배경색과 글자색 사이의 밝기 차이를 나타내는 비율인데, 너무 높으면 오히려 눈의 피로를 가중시킵니다. 저는 직접 원래 설정으로 되돌려봤을 때, 순수 검정 텍스트가 얼마나 강하게 눈에 박히는지 비교하고 나서야 차이를 실감했습니다. 수치상으로 미미해 보여도 장시간 읽기에서는 누적 피로가 다릅니다. 접근성 기준인 WCAG에서는 본문 텍스트의 명암비를 최소 4.5:1 이상으로 권고하는데, 이 기준을 충족하면서도 최대치를 피하는 조합을 찾는 것이 핵심입니다. 예쁜 색이 아니라 읽기 편한 색입니다.
줄 길이 제한도 눈에 띄는 효과가 있습니다. 한 줄에 표시되는 문자 수를 약 65자로 제한하면, 눈이 한 줄 끝에서 다음 줄 첫 글자를 찾아 이동하는 거리 자체가 줄어듭니다. 처음에는 콘텐츠 영역이 너무 좁아지는 게 아닌가 걱정했는데, 실제로 적용하고 나니 오히려 본문이 더 깔끔하고 읽기 편해 보였습니다. 화면을 꽉 채운 텍스트가 더 정보가 많아 보인다는 느낌은 착각에 가깝습니다. 읽기 편한 너비가 정보 전달에 실질적으로 유리합니다.
한 가지 짚고 싶은 점이 있습니다. 줄 길이 제한 설정이 반응형 환경에서 어떻게 동작하는지에 대한 언급이 빠진 경우가 많습니다. 모바일에서는 화면 자체가 좁아 이 설정이 실질적인 효력을 발휘하지 못하는 경우도 있습니다. 미디어 쿼리, 즉 화면 크기나 해상도 같은 환경 조건에 따라 다른 스타일을 적용하는 CSS 기능을 활용해 뷰포트 너비에 따라 조건 분기를 걸어두는 것이 좋습니다. 설정 하나가 모든 환경에서 동일하게 작동한다고 가정하면 반드시 예상 밖의 결과가 생깁니다.
font-smoothing, 즉 글자 가장자리를 부드럽게 렌더링하는 속성도 빠뜨리기 쉬운 설정입니다. 이 처리 없이는 글자 경계가 거칠게 계단식으로 보이는 경우가 있고, 장시간 텍스트를 읽을 때 이 차이가 눈의 피로 누적에 영향을 줍니다. 대부분의 글에서 이 속성을 설명 없이 넘기는데, 실제로 적용해보면 차이가 있습니다. 저는 이걸 적용한 이후로 의도적으로 빼본 적이 없습니다. 그만큼 돌아가기가 싫었습니다.
다크모드 구현 — OS 연동 vs 토글, 어느 쪽이 나을까
다크모드를 구현하는 방식은 크게 두 가지입니다. 하나는 운영체제의 다크·라이트 모드 설정값을 CSS가 직접 읽어와 자동으로 적용하는 방식이고, 다른 하나는 사용자가 직접 버튼으로 전환하는 토글 방식입니다. 저도 두 방식을 모두 구현해서 운영해봤습니다.
OS 연동 방식은 설정이 간결하고 자동으로 적용된다는 장점이 있지만, 독자 입장에서는 제어권이 없다는 불만이 있었습니다. 블로그는 사용자가 직접 선택하고 싶어하는 공간입니다. 자동 적용이 편의처럼 보여도, 선택권을 빼앗기는 느낌을 주는 경우가 있습니다. 토글 방식을 도입했을 때 독자 반응이 확연히 달라졌습니다. "낮에 밝게 써도 되고 밤에 어둡게도 되니 편하다"는 피드백이 직접 들어올 정도였습니다. 단순 기능 제공이 아니라 독자가 자신에게 맞게 조정할 수 있다는 감각을 주는 것이 중요했습니다.
토글 방식에는 한 가지 함정이 있습니다. 페이지를 새로고침하거나 다른 페이지로 이동하면 설정이 초기화된다는 점입니다. 이를 해결하려면 브라우저의 로컬 저장소를 활용해 사용자의 선택값을 저장해야 합니다. 로컬 저장소란 브라우저에 키-값 형태로 데이터를 저장하고, 탭이나 브라우저를 닫아도 값이 유지되는 저장 방식입니다. 재방문 시에도 다크모드 설정이 유지된다면 독자 경험이 한 단계 올라갑니다. 이 부분을 빠뜨리고 단순 토글만 구현한 경우가 많은데, 실제로 쓰다 보면 가장 먼저 문제가 되는 부분입니다. 클릭 한 번에 설정이 돌아온다면, 그 편의가 쌓여 신뢰를 깎습니다.
CSS 변수를 활용하면 다크모드 전환이 훨씬 깔끔해집니다. 색상과 간격값을 변수로 정의해두고, 다크모드 클래스 하나만 교체하면 사이트 전체 색상이 한꺼번에 바뀌도록 만드는 방식입니다. 각 요소마다 개별적으로 색상을 재정의할 필요가 없어서 유지보수 측면에서도 훨씬 효율적입니다. 처음 설계할 때 이 구조를 갖춰두지 않으면, 나중에 다크모드를 추가하는 작업이 처음부터 다시 하는 것과 거의 비슷해집니다. 저는 이걸 두 번이나 겪었습니다. 한 번은 개인 블로그에서, 한 번은 작은 토이 프로젝트에서. 두 번 다 처음부터 다시 짜는 게 빠르겠다 싶었을 만큼 힘들었습니다.
CSS 몇 줄로 독자 경험이 실질적으로 달라진다는 걸 직접 느끼고 나서, 설정 하나하나를 훨씬 꼼꼼하게 챙기게 됐습니다. 배경색, 글자색, 줄 길이, 줄 간격, 그리고 다크모드까지 — 이 다섯 가지를 순서대로 적용해보는 것만으로도 충분히 체감 가능한 변화가 생깁니다. 작은 수치 하나가 장시간 독자를 붙잡는 경험의 질을 결정합니다. 그리고 그 수치는 스스로 써보지 않으면 자기 것이 되지 않습니다.
참고
- MDN Web Docs – prefers-color-scheme
- Google Material Design – Dark Theme
- CSS-Tricks – Dark Mode in CSS
- web.dev – prefers-color-scheme 가이드