Windows 11은 애플리케이션마다 다크 모드 또는 라이트 모드를 선택할 수 있는 옵션을 기본적으로 제공합니다. 마이크로소프트는 Edge 브라우저에도 이와 유사한 기능인 '렌더링(Rendering) 도구'를 제공하고 있습니다. 렌더링 도구는 렌더링된 페이지에 다크 또는 라이트 색 구성표를 에뮬레이션할 수 있어, 웹사이트가 실제로 어떻게 표시되는지 미리 확인할 수 있습니다.
Dark Reader처럼 확장 프로그램을 설치하지 않고도 다크 모드나 라이트 모드를 적용하고 싶다면, Edge의 렌더링 도구를 대신 활용하면 됩니다.
렌더링 도구란 무엇일까?
먼저 알아두어야 할 점은 Edge의 렌더링 도구가 본래 웹 개발자를 위해 만들어진 도구라는 것입니다. 개발자들은 이 도구를 통해 웹페이지가 다양한 디스플레이 옵션에서 어떻게 보이는지 확인하거나, 색약·색맹 등 시각 장애를 가진 사용자에게 페이지가 어떻게 전달되는지 검증합니다.
브라우저의 개발자 도구는 어디까지나 테스트용이기 때문에, 이 도구에서 변경한 내용은 저장되지 않습니다. 변경 사항을 영구적으로 유지하려면 코드 자체에 직접 반영해야 합니다.
개발자 도구(DevTools) 활성화하기
Chrome의 렌더링 탭과 마찬가지로 Edge에서도 렌더링 도구를 사용해 웹사이트가 다양한 색상 옵션으로 표시될 때 어떻게 보이는지 확인할 수 있습니다.
마이크로소프트 브라우저 도구 수석 프로그램 관리자인 크리스 하일만(Chris Heilmann)은 다크 모드를 지원하지 않는 웹사이트에 다크 모드를 강제로 적용하는 방법에 대해 유용한 조언을 공유한 바 있습니다.
이 기능을 사용하려면 먼저 Edge DevTools(개발자 도구)를 열어야 합니다. DevTools를 여는 방법은 총 4가지입니다.
1. 마우스 오른쪽 버튼으로 아무 웹사이트나 클릭한 뒤 검사(Inspect)를 선택합니다. 이 방법은 개발자 도구의 '요소(Elements)' 탭으로 바로 연결되지만, 그 상태에서 언제든 '렌더링' 탭으로 전환할 수 있습니다.
2. 열려 있는 Edge 창 오른쪽 상단의 점 3개 메뉴를 클릭한 후 도구 더보기 > 개발자 도구를 선택합니다.
3. 키보드 단축키 Ctrl + Shift + I를 누릅니다.
4. 키보드에서 F12 키를 누릅니다. 이 단축키는 필요하다면 나중에 Edge 설정에서 끌 수 있습니다.
Edge에서 렌더링 도구 열기
Edge에서 DevTools를 열면 가장 먼저 '시작(Welcome)' 탭이 나타납니다.
다음 단계는 렌더링 탭을 여는 것입니다. 순서는 다음과 같습니다.
1. DevTools 오른쪽 상단의 점 3개 메뉴를 클릭합니다.
2. 도구 더보기 > 렌더링을 선택합니다.
3. 목록을 아래로 스크롤해 자동 다크 모드 사용 설정 항목을 찾아 체크박스를 클릭합니다. 이렇게 하면 자동 다크 모드가 활성화되며 prefers-color-scheme 값이 dark로 설정됩니다.
자동 다크 모드로의 전환은 즉시 적용되므로, 변경 사항을 확인하기 위해 웹페이지를 새로고침할 필요가 없습니다.