이 4가지 간단한 단계로 WordPress 웹사이트에 다크 모드를 추가하는 방법
게시 됨: 2022-06-162019년 10월 Instagram과 몇 개의 다른 주요 웹사이트와 앱이 다크 모드를 추가했을 때 우리는 이 기능에 대한 사람들의 관심이 크게 증가한 것을 목격했습니다.
그러나 Instagram의 어두운 야간 모드 채택이라는 이상값을 제외하더라도 위의 그래프는 지난 몇 년 동안 이 기능의 인기도가 증가했음을 분명히 보여줍니다.
Instagram과 함께 다른 많은 주요 회사가 야간 모드 시대로 전환했으며 전환을 고려해야 합니다. 유행하기 때문이 아니라 사용자의 눈의 피로 감소, 사이트를 방문하는 데 사용되는 장치의 배터리 수명 증가, 훨씬 더 시원해 보이는 등 사용자에게 많은 이점이 있습니다.
좋습니다, 마지막 것은 약간 주관적일 수 있지만 우리는 그것을 고수하고 있습니다.
고맙게도 WordPress 웹 사이트에 다크 모드를 추가하는 것은 매우 간단합니다. 웹사이트가 각 사용자에게 표시되는 방식을 설정할 수 있을 뿐만 아니라 관리 대시보드에 기능을 추가하고 눈을 쉬게 할 수도 있습니다.
사이트에 다크 모드를 추가할 생각이라면 몇 가지 방법이 있지만 플러그인을 사용하는 것이 상상할 수 있듯이 가장 간단합니다.
이 게시물에서는 로스앤젤레스의 대부분의 웹사이트 디자인 회사에서 권장하는 플러그인인 WP 다크 모드를 소개하고 웹사이트와 WordPress 테마에 맞도록 이 기능을 추가하고 사용자 지정하는 데 필요한 모든 단계를 검토합니다.
그러나 먼저 다크 모드가 무엇이며 가장 주목할만한 이점을 살펴 보겠습니다. 읽어!
다크 모드란 무엇이며 왜 유용한가요?
야간 모드라고도 하는 다크 모드는 웹사이트의 색 구성표를 밝은 색에서 어두운 색으로 변경하는 간단한 디스플레이 토글입니다.
흰색 배경에 검은색 글자가 있는 일반적인 웹 사이트에서는 일반적으로 색상이 단순히 반전된 것처럼 보이지만 아래에서 설명하겠지만 그 이상의 의미가 있습니다.
이 간단한 조정은 특히 사용자가 저녁에 웹사이트를 방문하는 경우 화면에서 나오는 백색광을 크게 줄여 눈의 피로를 줄입니다.
다크 모드를 활성화하는 옵션은 대부분의 최신 운영 체제 및 웹 브라우저에서 사용할 수 있습니다.
다크 모드의 가장 주목할만한 이점
이 게시물 전체에서 이 기능의 이점 중 일부를 이미 언급했지만 귀하의 편의를 위해 여기에서 모두 멋진 글머리 기호 목록으로 요약할 것이라고 생각했습니다.
따라서 다크 모드의 이점은 다음과 같습니다.
- 눈에 부담이 덜하다
- 에너지 소비 감소 및 배터리 수명 연장
- 화면의 백색광 감소
- 페이지에서 더 많은 시간을 보낸다
이미 알고 있듯이 최신 브라우저와 운영 체제는 이미 어두운 모드를 옵션으로 제공하지만 웹사이트가 선호하는 사용자에게 올바른 색 구성표로 표시되도록 하려면 직접 추가해야 합니다.
고맙게도 WP 다크 모드 플러그인을 설치하면 이 프로세스를 간단하게 만들 수 있을 뿐만 아니라 웹사이트의 다크 모드 모양에 대한 모든 종류의 제어를 제공할 수 있습니다.
다크 모드 대 야간 모드
계속 진행하기 전에 독수리 눈을 가진 독자가 문제를 일으킬 수 있는 잠재적인 문제를 해결하고 싶습니다. 즉, 우리는 기술적으로 두 가지 다른 기능을 설명할 수 있지만 이 기사 전체에서 "다크 모드"와 "야간 모드"라는 용어를 사용하고 있으며 계속 사용할 것입니다.
"야간 모드"라는 용어는 대부분의 최신 스마트폰에서 사용할 수 있는 기능에 자주 사용됩니다. 이 기능은 밤이 되면 화면에서 블루라이트를 완전히 또는 부분적으로 제거하여 수면 주기에 대한 화면 시간의 영향을 줄입니다.
그러나 앞서 설명했듯이 이 두 용어는 서로 바꿔서 사용할 수 있으며 이것이 이 게시물에서 선택한 접근 방식입니다.
이제 워드프레스 웹사이트에 다크(또는 야간) 모드를 추가하는 방법을 살펴보겠습니다.
WP 다크 모드 플러그인을 사용하여 WordPress 웹 사이트에 다크 모드를 추가하는 방법
이제 WordPress 사이트에 다크 모드를 추가해야 하는 모든 이유를 알았으므로 간단한 4단계를 통해 이를 수행하는 방법을 보여드리겠습니다.
마이애미에 있는 웹 디자인 회사의 친구들이 WP 다크 모드라는 특수 플러그인에 의존하는 이 단계별 가이드를 만드는 데 도움을 주었습니다.
1. 플러그인 설치
여러 다크 모드 WordPress 플러그인이 있지만 WP 다크 모드가 가장 사용자 친화적이고 안정적인 것으로 나타났습니다.
복잡한 설정이나 코드를 다룰 필요 없이 사이트의 어두운 버전을 빠르고 쉽게 구축할 수 있는 플러그인입니다.
예상대로 WordPress 플러그인 디렉토리에서 이 도구를 찾을 수 있습니다.
이전에 사이트에 플러그인을 추가했다고 가정하지만 만일의 경우를 대비하여 관리자 대시보드로 이동하여 플러그인 탭에서 새로 추가 를 선택하기만 하면 됩니다.
거기에서 WP 다크 모드 를 찾아 지금 설치 및 활성화 를 클릭할 수 있습니다.
2. 원하는 설정 켜기
일반 설정 탭에서 다크 모드를 켜고 끌 수 있습니다. 이 탭을 열면 두 가지 옵션이 기본적으로 이미 켜져 있는 것을 볼 수 있습니다.
프런트엔드 다크 모드 활성화 및 OS 인식 다크 모드 활성화 입니다.
전자는 웹사이트에서 다크 모드를 활성화하고, 후자는 사용자의 OS 또는 브라우저가 다크 모드로 설정되어 있으면 기능이 자동으로 활성화됨을 의미합니다.
또 다른 옵션은 다크 모드를 기본값 으로 설정하는 것입니다. 이것은 매우 자명합니다. 켜면 모든 사용자가 선호도에 관계없이 웹 사이트의 어두운 버전을 볼 수 있습니다.
3. 플로팅 스위치 켜기 및 사용자 지정
사용자에게 언제든지 어두운 모드와 밝은 모드 사이를 전환할 수 있는 옵션을 제공하려면 플로팅 스위치 옵션 표시 도 활성화할 수 있습니다.
이 옵션은 주석에 표시된 대로 정확하게 수행합니다. 사이트의 프런트 엔드에 토글을 배치하여 사용자가 원하는 대로 다크 모드를 켜거나 끌 수 있도록 합니다.
디스플레이 설정 섹션에서 아이콘의 위치와 스타일을 엉망으로 만들 수 있습니다. 플러그인의 무료 버전에서는 스타일에 대한 옵션이 다소 제한되지만 주요 기능(어두운 모드 켜기 또는 끄기)이 있습니다.
4. 다양한 다크 모드 색 구성표로 실험
이 시점에서 WordPress 웹 사이트에는 완벽하게 작동하는 다크 모드가 있으며, 이것이 원하는 전부라면 이 단계를 건너뛸 수 있습니다.
그러나 사이트가 일반적으로 보이지 않게 하려면 어두운 모드 색상을 사용자 지정하는 것이 좋습니다. 스타일 설정 섹션에서 필요한 모든 옵션을 찾을 수 있습니다.
이 화면은 사이트의 시각적 아이덴티티와 함께 사용할 수 있는 색상 팔레트를 제공합니다.
상상할 수 있듯이 WP 다크 모드 플러그인의 무료 버전은 여기에서 다소 제한된 옵션을 제공하지만 적절한 솔루션을 찾을 수 있어야 합니다.
색상을 추가로 사용자 정의하려면 프리미엄 버전에서 더 넓은 범위의 사전 설정 색상 팔레트를 제공하고 자신만의 구성표를 만들 수 있습니다.
보너스 — WordPress 관리자 대시보드에서 다크 모드 활성화
고객과 잠재 고객에게 WordPress 웹 사이트의 프런트 엔드에서 다크 모드의 모든 이점을 제공하려는 경우 동일한 예의를 자신에게 확장하고 관리자 대시보드에도 모드를 추가하지 않겠습니까?
기본 WordPress 색 구성표가 취향에 너무 밝다면 WP 다크 모드 플러그인에 솔루션이 있습니다. 방법은 다음과 같습니다.
- WP 다크 모드 플러그인을 설치 하세요. 여기서 설명할 내용은 많지 않습니다. 이 단계를 완료하는 방법에 대한 지침은 위의 섹션을 참조하십시오.
- 백엔드 다크 모드 활성화 — 이 옵션은 이전에 이야기한 다른 필수 설정과 동일한 탭에 있습니다( 일반 설정 ). 이 섹션으로 이동하여 Enable Backend Darkmode라는 스위치를 켜야 합니다. 아래로 스크롤하여 설정 저장 을 클릭하여 변경 사항을 적용하는 것을 잊지 마십시오.
- 관리 대시보드에서 다크 모드 전환 —이제 관리 대시보드 상단에 다크 모드를 켤 수 있는 스위치가 있습니다. 이는 각 사람이 독립적으로 다크 모드를 켜거나 끌 수 있으므로 여러 관리자가 있는 웹 사이트에 특히 유용합니다.
- (선택 사항) 관리 대시보드 색 구성표를 조정합니다 . 어두운 모드를 켠 상태에서 일부 색상을 전환하여 모든 것을 더 아름답게 보이게 할 수 있습니다. 이렇게 하려면 사용자 > 프로필 로 이동하여 원하는 팔레트를 선택합니다. 색상을 설정했으면 프로필 업데이트 를 클릭하여 새 설정을 적용합니다.
그리고 그게 전부입니다. 이 가이드가 WordPress 사이트와 관리자 대시보드에서 다크 모드를 구현하는 데 도움이 되었기를 바랍니다.
이 업그레이드는 WP 다크 모드 플러그인으로 무시하기에는 너무 간단하므로 사이트에 이 우수한 기능을 추가하는 것이 좋습니다.
저자 약력: Christopher는 Digital Strategy One의 디지털 마케팅 전문가이자 프리랜서 블로거입니다. 그는 새로운 웹 기술 트렌드와 다양한 채널에 걸친 디지털 음성 배포에 중점을 두고 있습니다. 여가 시간에 Christopher는 드럼과 Magic: Gathering을 연주합니다.