-
위키백과 완전 검은색 배경 테마 사용하기Soliloquy 2019. 8. 20. 17:31
Wikipedia
The Free Encyclopedia
휴대폰에서 검은색 을 표시할 때 항상 백라이트라는 조명이 켜져있는 LCD와 달리 AMOLED를 사용하는 휴대폰은 그 부분의 소자를 끌 수 있다는 점이 있다.
과학적인 근거는 못찾아봤지만, 검은색을 표시하려고 해도 빛이 조금씩 세어나오는 LCD보다 아예 꺼버리는 LCD가 눈 건강에 조금 더 좋지 않을까? 라는 생각과 배터리 절약에도 도움을 많이 받을 수 있어서 휴대폰 배경화면도 완전 검은색으로 맞춰놨다.
예전에 안드로이드 4.0 기본 인터넷 브라우저에서는 고대비 옵션이 있어서 흰색 배경을 검은색으로, 검은색 글자를 흰색으로 바꿔주는 기능이 있었는데, 5.0 부터 기본적으로 탑재된 안드로이드 크롬 브라우저에서는 해당 기능이 사라져 있었다. 대신에 OS자체의 접근성 기능으로 고대비 옵션이 존재하기는 하지만1, 사용을 하면 버벅임이 증가하는 문제가 있었다.
안드로이드 4.0 순정 브라우저의 접근성 옵션
Inverted rendering 옵션을 사용하면 색상을 반전시켜 표시해준다.
최근 들어 크롬에서 웹페이지 다크모드가 추가됐긴 했는데, 최신 버전의 크롬에서는 이상하리만큼 탭 전환이 버벅여서 당분간은 크롬 구버전을 사용 중이었다.2
없으면 뭐 어쩔 수 없지 라는 생각에 그대로 사용하다가, 나무위키에 다크모드가 있는 것을 보고, 위키백과에는 다크모드가 없나 해서 인터넷을 찾아본 결과, 아직 위키백과에는 그런 모드가 없음을 찾았다. 대신에 위키백과의 Custom CSS라는 기능을 사용하여 검은색 테마를 사용하는 법이 있었다.
Custom CSS란
한국어판에는 사용자 CSS라고 이름이 붙여진 Custom CSS는 위키백과의 스킨의 배치와 형태를 CSS를 이용해서 바꿀 수 있는 기능인데, 이를 이용하면 사용중인 테마의 배경화면을 검은색으로, 표시되는 글자의 색을 흰색으로 설정할 수 있다.
Timeless라는 미디어 위키의 기본 테마, 흰색 바탕에 검은색 글자 형태로 표시된다
출처: Xyz-zy [GPL], via Wikimedia Commons
Timeless 테마에 검은색 테마를 사용한 모습3
검은색 바탕에 회색 글자 형태로 표시된다.
Custom CSS는 다음과 같은 특징이 있었다.
- 로그인이 되어 있어야 한다.
- 자바스크립트를 사용하지 않아도 된다.
- 별도의 어플을 설치하거나 수정할 필요가 없다.
둘 다 일반사용자의 입장에서는 별로 특별할게 없지만, 자바스크립트를 사용하지 않는 사용자에게는 이만한 기능이 없을 것 같다.이 외에 문제점이 하나 있다면 CSS를 모르면 개인의 입맛대로 수정하기가 힘들다는 점이 있었다. 하필 CSS를 다룰 줄 몰라서 인터넷에 배경화면이 검은색인 테마 CSS가 공개된건 없을까? 하고 인터넷을 돌아다니다 위키백과의 기본 스킨인 Vector의 Custom CSS인 wikipedia-userstyle-dark-minimum 라는 CSS를 찾았다.기본 Vector 테마
wikipedia-userstyle-dark-minimum을 적용한 Vector 테마
본문이 화면에 꽉차서 좋긴 한데, 위키백과의 테이블과 틀이 창의 크기에 따라 능동적으로 변하지 않을때가 있다는 점과, 목차 부분이 잘 안보인다는 문제가 있었다. 하지만 이것 보다 더 좋은 Custom CSS는 찾지 못해서, 이걸 사용하기로 했다.
적용하는 방법
적용하는 방법은 다음과 같았다. 이 과정은 PC버전에서 진행하였다.
- PC버전의 위키백과에 로그인을 한다. 계정이 없다면 회원가입을 해야한다.
※ 위키백과의 Custom CSS는 언어마다 다른 설정을 사용한다. 한국어 위키백과의 Custom CSS 설정은 영어 위키백과의 설정에 영향을 주지 않는다. - 우측 상단의 Preferences(환경 설정)을 클릭한다.
Preferences를 클릭한다. - 환경 설정의 Appearance(보이기) 탭에서 Vector(벡터)의 사용자 CSS를 클릭한다.
- 잠시 https://github.com/vitaly-zdanevich/wikipedia-userstyle-dark-minimum 에서 main.css 을 클릭 후 raw 버튼을 누르면 나오는 텍스트를 복사한다.
Raw에 있는 내용을 모두 복사한다. - vector.css 수정 창에 전 단계에서 복사한 내용을 붙여넣기 한 후 저장한다. 기존에 사용자 CSS페이지를 만들었다면 오른쪽 위의 Edit source(편집) 메뉴를 클릭하여 수정한다.
※ 저장은 하단의 Publish changes를 클릭하면 된다.
Custom CSS를 클릭한다.되돌리는 방법
원래 스킨 모습으로 되돌리는 방법은 간단하다 Custom CSS문서에서 붙여넣게 한 항목을 모두 제거한 후 저장하면 된다.
여담
CSS수정이 되는건 좋은데, 사용을 못해서 입맛대로 못바꾸는게 아쉽다. 표를 반응형으로 만들고 싶은데, 그걸 못하니 원...
완전 검은색 테마를 사용중인데 눈에는 별로 그닥 효과가 있는 것 같지는 않다. 있는 그대로 쓸걸 그럤나 싶다.
