brunch

You can make anything
by writing

C.S.Lewis

by 최우주 Jun 22. 2023

눈이 나빠도 일할 수 있어요 : Dark Reader

© davidschultz, 출처 Unsplash



나는 현재 2개의 법인회사를 운영하고 있고 1개의 회사에 추가로 고용되어 있으며 대학원에서 박사 학위를 받기위해 공부도 하고 있다. 주 업무는 웹과 모바일 인터페이스를 설계하고 front-end(프론트엔드) 개발을 한다. 그리고 데이터 사이언스 관련 일도 하고 있다. 시력이 떨어지기 전 20살 부터 일을 시작하였고 망막질환이 본격적으로 영향을 주게 된 35살 이전까지 일과 학업을 병행하면서 열심히 일을 해왔다.

장애등급을 받은 36살 즈음 기존의 일하던 환경과 체계로는 도저히 업무를 할 수 없게 되었고 다행히 나의 눈을 보조해줄 다양한 도구를 통해 불편하지만 업무를 이어갈 수 있었다. 이 내용을 시리즈로 구성하여 혹시나 나와 같이 급격한 시력 저하를 겪는 학생이나 직장인 혹은 나이가 들어가며 지장이 있는 분들에게 조금이나마 도움이 되었으면 좋겠다.




어떻게 하면 모든 배경을 검게 물들일 수 있을까?


먼저 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년만 일찍 병이 발병했더라면 불편함을 감수 하며 살았거나 심지어 아예 일을 그만두어야 하는 상황이 발생할 수도 있었다. 혹시나 이러한 같은 상황에 놓인 분이라면 부디 이 글을 참조하여 조금이나마 도움을 받고 활용할 수 있기를 바란다. 앞으로 업무에 활용할 수 있는 다양한 기능이나 팁을 꾸준히 공유할 예정이다.


#웹접근성 #다크모드 #Window #DarkReader #macos

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari