손쉽게 웹사이트를 어둡게 만들어보기
어떻게 하면 모든 배경을 어둡게 물들일 수 있을까?
먼저 36살 이후로 인생 최대의 고민은 어떻게 하면 모니터에서 나오는 빛을 줄일 수 있을까 하는 일이었다. 감사하게도 최근 Window와 macOS는 다크모드는 기본적으로 제공하여서 이러한 문제를 어느 정도 해결해 주고 있다. 나중에 이러한 접근성 세팅법은 한꺼번에 모아서 설명해 볼 예정이다.
macOS 화면모드 예시이번에는 모든 인터넷 브라우저 화면의 바탕을 어둡게 만들어주는 것을 설명하려고 한다. 보통 웹사이트는 흰 배경으로 구성되어 있기 때문에 웹을 탐색할 때 빛 반사로 인해 글씨가 매우 흐릿하게 보이는 경우가 많다. 배경이 원래 어두운 사이트나 유튜브와 같이 어두운 모드 설정을 지원하는 사이트는 괜찮지만 일반 사이트까지 이런 기능을 요구하는 것은 어려운 일이다.
유튜브 화면 디자인 세팅 예시하지만 브라우저의 확장 프로그램을 이용하여 이러한 문제를 어느 정도 해결할 수 있고 사용하는 즉시 눈에 시원함을 느끼는 경험을 하게 될 것이다. 그리고 아래 소개하는 확장 프로그램은 Chrome, Firefox, Edge, Safari 심지어 네이버 웨일까지 지원하니 범용적으로 사용할 수 있다.
1. 확장 프로그램 다운로드하기
Chrome 기준으로 먼저 설명하도록 한다. google 검색창에 "크롬 웹스토어"를 검색하거나 아래 URL로 이동한다. 접속 후 검색창에 "Dark Reader"를 검색하고 첫 번째 나오는 앱을 클릭하고 확장 프로그램에 추가한다. → https://chrome.google.com/webstore/search/Dark%20reader?hl=ko
2. 설정하기
"켬"과 "끔" 상태를 눌러보면 확실히 배경을 어둡게 만드는 것을 알 수 있다. 배경을 어둡게 처리하고 폰트는 대비로 밝게 처리한다. front-end를 개발하는 사람이 보기에는 css를 강제로 적용시켜 이러한 효과를 주는 것이 아닐까 생각한다. CSS만 처리하다 보니 이미지에는 영향을 주지 않고 텍스트만 쉽게 읽을 수 있다.
3. 부가기능
이 Dark Reader의 매우 유용한 기능 2가지를 설명하려고 한다. 첫 번째는 명암과 대비를 설정할 수 있는 것이다. 이 앱을 설치하면 중간값이 기본값으로 되어있는데 여기에서 추가 설정을 통해 대비를 증가시켜 훨씬 더 선명한 글자를 얻을 수 있다. 명도대비를 더 뚜렷하게 하면 사이트 기본 디자인이 망가질 수 있다. 그러나 텍스트만 읽어도 충분할 경우 눈을 찌푸리지 않고도 시원하게 텍스트를 읽을 수 있다.
두 번째는 단축키이다. 번거롭게 우측 상단의 전환 버튼을 눌러 기능을 활성화하는 것이 아니라 Alt + Shift + D 버튼을 눌러 자유자재로 활용할 수 있다. 사이트의 원래 모습을 보고 싶다면 바로 단축키로 전환할 수 있다.
4. 확장성
앞서 언급하였듯이 Chrome 뿐만 아니라 Firefox, Edge, Safari, 네이버 웨일에서도 사용가능하다. 단 Safari는 mac 기준으로 유료 결제가 필요하다.
*Dark Reader 링크
크롬 : https://chrome.google.com/webstore/search/Dark%20reader?hl=ko
파이어폭스 : https://addons.mozilla.org/en-US/firefox/addon/darkreader/
사파리(유료) : https://apps.apple.com/kr/app/dark-reader-for-safari/id1438243180
엣지 : https://microsoftedge.microsoft.com/addons/detail/dark-reader/ifoakfbpdcdoeenechcleahebpibofpc
5. 마치며
모든 사이트를 다크모드로 만드는 것은 마치 대중교통이 발달하지 않은 지역에서 자동차를 얻은 듯이 마음대로 사이트들을 눈에 힘을 주지 않고 확대하지 않고 볼 수 있는 장점이 있다. 너무나 다행스럽게도 기술의 발전으로 인해 부족한 점을 보완할 수 있는 도구들이 많이 생기고 있다.
10년만 일찍 병이 발병했더라면 불편함을 감수하며 살았거나 심지어 아예 일을 그만두어야 하는 상황이 발생할 수도 있었다. 혹시나 이러한 같은 상황에 놓인 분이라면 부디 이 글을 참조하여 조금이나마 도움을 받고 활용할 수 있기를 바란다. 앞으로 업무에 활용할 수 있는 다양한 기능이나 팁을 꾸준히 공유할 예정이다.
