워드프레스 다크모드 플러그인 WP Dark Mode

Last Updated: 2024년 10월 24일 5개 댓글

워드프레스 사이트에 다크모드와 라이트모드 간 전환 버튼을 추가하고 싶은 경우 WP Dark Mode 플러그인을 사용하면 편리합니다. 컴퓨터 모니터를 오랫동안 보고 있으면 아무래도 눈의 피로를 피할 수 없을 것입니다. 과학적으로는 입증되지 않은 것으로 알고 있지만 다크모드가 눈의 동공을 덜 확장하게 하여 눈의 피로를 덜어주는 것 같습니다.

이 블로그에서 메뉴에 다크모드로 전환할 수 있는 밝기 모드 전환 버튼을 추가하여 테스트해보았습니다. 다크모드로 사이트를 보고 싶은 경우 이용하시면 도움이 될 것입니다. 특히 야간에 유용하리라 생각됩니다.

워드프레스와 다크모드

워드프레스에서는 가장 인기 있는 웹사이트 빌더이며 많은 기업들이 워드프레스를 사용하고 있습니다.

워드프레스는 크게 워드프레스닷컴에서 가입하여 사용하는 가입형 워드프레스와 웹호스팅에 가입하여 사용하는 설치형 워드프레스(Self-hosted WordPress)가 있습니다. 보통 워드프레스라 하면 설치형을 일컫는 경우가 많습니다.

다크 타입의 웹사이트를 만들려면 먼저 도메인 네임(예: example.co.kr)이 있어야 합니다. 도메인 이름이 사이트의 주소가 됩니다. 또한, 워드프레스를 운영하려면 웹호스팅에도 가입해야 합니다.

저렴한 웹호스팅을 원하거나 수익형 블로그를 운영하려는 경우 가성비가 좋은 것으로 평가되는 패스트코멧이나 케미클라우드를 고려해볼 수 있습니다. 블루호스트와 비슷한 레벨의 케미클라우드는 특히 서울 서버를 도입하여 우리나라에서도 속도가 빠른 편입니다.

이 블로그는 블루호스트를 오랫동안 사용했지만 속도 문제 때문에 클라우드웨이즈로 변경했습니다. 방문자 수가 많거나 여러 개의 사이트 운영 시 클라우드웨이즈가 괜찮은 선택일 수 있습니다.

워드프레스 테마와 다크모드

워드프레스 테마 중에서 다크모드와 라이트모드 간 전환 기능을 제공하는 테마는 접하지 못했습니다만, 테마에서 다크모드 데모를 로드하여 사이트 전체를 다크모드로 설정하는 것은 가능합니다. CSS를 안다면 밝은 모드의 데모를 로드한 다음, CSS로 다크모드를 구현하는 것을 생각해볼 수 있습니다.

아바다(Avada), 뉴스페이퍼(Newspaper), 플랫섬(Flatsome) 등의 테마는 데모를 로드하면 사이트 전체에 스타일이 적용됩니다. 또한, 전역 컬러 구성을 사용자 정의하기나 테마 옵션에서 조정할 수 있습니다. Divi 테마는 레이아웃을 로드하여 활용할 수 있으며, 랜딩 페이지 등 특정 페이지에만 스타일이 적용됩니다. 마찬가지로 Divi 테마에서도 전역 컬러 설정이 지원되어 전체적으로 컬러를 사용자 정의하기에서 설정할 수 있습니다.

워드프레스 Divi 테마 컬러 스킴

이 블로그에 적용된 GeneratePress 테마의 경우 Global Colors(전역 컬러)가 지원되기 때문에 약간의 CSS로 다크모드를 추가하여 어두운 모드와 밝은 모드 간 전환 기능을 구현할 수 있다고 합니다. 자세한 내용은 How can I enable Dark mode on theme? (테마에서 다크모드를 활성화하는 방법) 제목의 포럼 글을 참고해보시기 바랍니다.

워드프레스 다크모드 플러그인 WP Dark Mode

CSS와 자바스크립트 등의 코딩 작업 없이 워드프레스 사이트에 다크모드 버튼을 추가하고 싶은 경우 다크모드 플러그인을 사용할 수 있습니다. 워드프레스 저장소에서 검색해보면 몇 가지 무료 다크모드 플러그인이 검색됩니다. 그 중에서 WP Dark Mode 플러그인이 가장 인기가 있고 자주 업데이트되고 있습니다.

워드프레스 다크모드 플러그인 WP Dark Mode

WP Dark Mode는 무료 버전과 유료 버전이 있습니다. 워드프레스 알림판 > 플러그인 > 새로 추가에서 'wp dark mode'로 검색하여 이 플러그인을 설치할 수 있습니다. 무료 버전은 기능이 많이 제한되어 있지만, 단순히 다크모드 버튼을 추가하여 사용자들이 다크모드에서 글을 읽도록 배려하고 싶은 경우 이용할 수 있습니다.

이 블로그에서는 현재 WP Dark Mode 플러그인을 설치하여 다크모드 전환 버튼을 추가했습니다.

저는 구글, 네이버 홈, 페이스북 등 다크모드가 제공되는 환경에서는 다크모드를 활성화하여 사용하고 있습니다. 이 블로그에 다크모드 기능을 추가한 이유 중 하나는 제가 사용하기 위한 것이기도 합니다. (오랫동안 밝은 모드에서 글을 보고 있으면 눈의 피로가 금방 오는 것 같습니다.)

PC(데스크톱)에서는 메뉴 내비게이션에 있는 다크모드/라이트모드 간 전환 스위치를 사용하여 밝기 모드를 바꿀 수 있습니다.

워드프레스 다크모드 전환 버튼

모바일 기기에서는 오른쪽 하단에 밝기 모드 전환 스위치가 표시됩니다.

WP DARK MODE 기능 (무료 버전)

  1. 플로팅 전환 스위치 (Floating Switch Button) – 사이트의 푸터에 다크모드 플로팅 전환 버튼을 표시할 수 있습니다.
  2. 기본 모드 (Default Mode) – 다크모드를 기본 모드로 설정할 수 있습니다. 그러면 사용자들에게 다크모드가 먼저 표시됩니다.
  3. 다크모드 엘리멘터 위젯 – Elementor 위젯(Dark Mode Switch) 위젯을 사용하여 다크모드 전환 버튼을 페이지/포스트의 원하는 곳에 배치가 가능합니다. 엘리멘터 프로의 테마 빌더를 사용하여 템플릿에 배치하는 경우에 유용할 것 같습니다.
  4. 다크모드 구텐베르크 위젯 – Dark Mode Switch 구텐베르크 블록을 사용하여 페이지/포스트의 원하는 곳에 전환 버튼을 추가할 수 있습니다.
  5. 자동 매치 OS 테마(Auto Match OS Theme) – OS 선호 테마가 다크인 경우 자동으로 다크모드를 표시합니다.
  6. 백엔드에서 사용 가능 – 백엔드 관리자 페이지에서도 어두운 모드를 활성화할 수 있습니다.
  7. 사전 설정된 컬러 스키마 (Presets Color Schema) – 무료 버전에서는 2가지 사전 설정 컬러 스키마가 제공됩니다. 사전 정의된 프리셋에서 다크모드를 빠르게 바꿀 수 있습니다.
  8. 다크모드 스위치 (Dark Mode Switch) – 다크모드를 설정/해제하는 다크모드 전환 스위치
  9. 다크모드 설정 기억 – 다크모드를 활성화하면 다크모드 설정이 저장됩니다.
  10. 테마 호환성 – 이 플러그인은 대부분의 테마와 문제 없이 호환됩니다.
  11. 레볼루션 슬라이더(Revolution Slider) 호환 – 이 플러그인은 유명한 레볼루션 슬라이더와 호환됩니다.
  12. 낮은 이미지 밝기 – 다크모드에서 이미지의 밝기와 대비를 낮춥니다.
  13. 키보드 접근성 (Keyboard Accessibility) – 키보드 단축키(Ctrl + Alt + D)로 다크모드 설정/해제

WP DARK MODE 유료 버전 기능

WP Dark Mode 유료 버전에는 Pro 요금제와 Ultimate 요금제가 있습니다. 무료 버전의 기능에 만족하지 못하는 경우 유료 버전을 고려해볼 수 있지만, Pro 요금제에서도 안 되는 기능이 제법 있기 때문에 유료 버전을 구입한다면 Ultimate 플랜이 더 바람직해 보입니다.

저는 무료 버전을 활성화하니 블로그 사이트 속도가 0.5초 정도 느려지는 것을 경험했습니다. Pro 플랜에서는 속도가 조금 빨라져 큰 효과가 없는 것 같고, Ultimate 플랜을 사용해야 속도에 미치는 영향이 최소화되는 것 같습니다.

속도는 이용하는 호스팅과도 관련이 있을 수 있습니다. 이 블로그는 이 글을 작성할 당시 블루호스트를 이용했는데, 속도가 느린 편이었습니다. 현재는 클라우드웨이즈로 바꾸었습니다. 블루호스트에서는 플러그인을 몇 개 설치하면 속도가 느린 것이 눈에 띄었지만, 클라우드웨이즈에서는 설 속도에 미치는 영향이 적은 것 같습니다.

Ultimate 요금제를 사용하면 더 많은 전환 버튼 스타일과 기능 외에도 밝기 모드에 따라 다른 이미지를 지정할 수 있고, 다크모드 시 특정 요소들을 제외 또는 포함시키도록 설정할 수 있습니다.

다크모드에서 로고 변경하기

예를 들어, 사이트 로고를 다크모드에서 다르게 지정할 수 있습니다. 하지만 CSS/자바스크립트 코드를 압축하여 최적화하는 플러그인이 사용되는 경우에는 이 기능이 제대로 작동하지 않는 경우도 있는 것 같습니다.

저는 다음과 같은 CSS 코드를 사용하여 어두운 모드에서 로고를 변경했습니다.

/* 워드프레스 GeneratePress 테마에서 다크모드 로고 이미지 변경하기 */
/* Change the Dark Mode log in the GeneratePress WordPress theme */

.wp-dark-mode-active .site-logo img {
display: none;
}

.wp-dark-mode-active .site-logo > a::after {
	content: "";
  background-image:url(Logo_Image_URL);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  width: 103px;
  height: 45px;
	margin-top: 6px;
	
}

위의 코드는 GeneratePress 테마를 기준으로 한 것이며, 테마에 따라 코드를 적절히 변경할 수 있습니다.

유료 버전에는 연간 라이선스와 라이프타임 라이선스가 있습니다. 유료 버전과 요금제에 대한 자세한 정보는 WP Dark Mode 사이트를 참고하시기 바랍니다.

참고


5 개 댓글

Leave a Comment

  1. 위젯 스위치 스타일은 변경이 안되는데 사이트 하단에 스위치 스타일이 변경되네요! 좋은 플러그인 소개해 주셔서 감사합니다^^

    응답
  2. 무료 버전은 메뉴에 추가 못하고 위젯에만 추가할 수 있나 보네요. 설정에서 스위치 스타일을 변경해도 위젯에서는 계속 한 가지 스타일로만 노출이 되네요.

    응답
    • 일을 하는 와중에 눈을 자주 쉬어 주어야 하지만 잘 안 되네요.
      저는 구글과 페이스북 등에서도 다크모드로 설정하여 사용하고 있습니다.ㅎ

      응답