웹 브라우저로 접속한 슬랙은 시스템 다크모드를 무시하고 밝은 화면을 그대로 띄웁니다. Everything Dark Mode 확장 프로그램을 쓰면, 슬랙 웹버전의 모든 채널과 대화창을 시스템 테마와 연동해 자동으로 어둡게 표시할 수 있습니다.
브라우저에서 열린 슬랙이 눈에 주는 부담
밤에 코드를 짜다 슬랙 알림을 확인하는 순간, 흰 배경이 확 튀어나옵니다. VS Code는 어둡고, GitHub도 어둡고, Confluence도 다크 테마로 설정해 뒀는데, 슬랙 웹버전만 유독 환합니다.
데스크톱 앱은 자체 다크모드가 있습니다. 하지만 팀 계정이 여럿이거나, 회사 방침으로 앱 설치가 안 되는 환경이라면 웹버전을 쓸 수밖에 없습니다. 웹버전 슬랙은 prefers-color-scheme: dark 미디어 쿼리에 반응하지 않습니다. 브라우저가 시스템 다크 모드 신호를 내려보내도, 슬랙 웹앱은 이를 무시하고 밝은 테마를 고집합니다.
OLED 패널에서는 흰 픽셀이 발광하므로 밝기 차이가 더 두드러집니다. 주변 환경이 어두울수록 대비가 커지고, 눈이 빠르게 피로해집니다. 다크 테마가 없는 사이트에 브라우저 확장 프로그램이 필요한 이유가 바로 여기에 있습니다.
Everything Dark Mode로 슬랙 웹버전에 다크모드를 강제 적용하는 방법
Everything Dark Mode는 슬랙 웹버전처럼 자체 다크 테마가 없는 사이트에 CSS 필터와 색 반전 처리를 씌웁니다. 슬랙 도메인만 따로 지정하면, 다른 사이트는 건드리지 않고 슬랙만 어둡게 유지할 수 있습니다.
동작 원리는 단순합니다. 확장 프로그램은 지정한 도메인에서 hue-rotate와 invert 필터를 페이지 루트에 적용하고, 이미지와 동영상은 다시 반전시켜 색상이 뒤집히지 않게 보정합니다. 결과적으로 텍스트·배경·사이드바가 어두워지고, 사진이나 첨부 파일 미리보기는 원본 색을 유지합니다.
적용 절차
- Chrome 웹 스토어에서 Everything Dark Mode를 설치합니다. (Add to Chrome)
- 브라우저에서
app.slack.com을 엽니다. - 확장 프로그램 아이콘을 클릭해 팝업을 엽니다.
- 상단 토글로 현재 사이트에 대해 다크모드를 켭니다.
- 사이트별 설정으로 저장하면, 다음에 슬랙을 열 때도 자동 적용됩니다.
시스템 테마와 연동 옵션을 활성화하면, macOS나 Windows에서 시스템 테마가 다크로 바뀌는 순간 슬랙 웹버전도 함께 어두워집니다. 낮에 라이트 모드로 쓰다가 밤에 자동으로 전환되는 흐름이 끊기지 않습니다.
슬랙 웹버전에만 다크모드를 적용하고 나머지 사이트는 그대로 두는 방법?
확장 프로그램의 사이트별 토글이 핵심입니다. 전체 켜기를 쓰면 모든 사이트가 어두워져, 이미 자체 다크 테마를 가진 GitHub나 Figma가 이중으로 처리됩니다. 그 대신 슬랙 도메인만 개별 지정하는 방식이 깔끔합니다.
| 설정 방식 | 적용 범위 | 이미 다크인 사이트 |
|---|---|---|
| 전체 켜기 | 모든 사이트 | 이중 반전 발생 가능 |
| 사이트별 켜기 | 지정 도메인만 | 영향 없음 |
| 시스템 연동 | 지정 도메인 + OS 테마 따라 자동 전환 | 영향 없음 |
실무에서 가장 무난한 조합은 사이트별 켜기와 시스템 연동을 함께 쓰는 것입니다. 슬랙만 어둡게 하고, OS가 라이트로 바뀌면 슬랙도 자연스럽게 밝아집니다.
밝기와 대비 슬라이더로 텍스트 가독성을 조정하는 방법
다크모드를 켰는데 텍스트가 너무 희거나, 배경이 지나치게 진해서 읽기 불편한 경우가 있습니다. 이 문제는 밝기(Brightness)와 대비(Contrast) 슬라이더로 조정합니다.
슬랙 웹버전 기준으로 실용적인 출발점은 다음과 같습니다.
- 밝기: 기본값(100)에서 85-90 정도로 낮추면 배경이 덜 어두워지고, 밝은 아이콘이 눈에 덜 쏩니다.
- 대비: 110 안팎으로 살짝 올리면 슬랙 사이드바의 채널 목록과 본문 텍스트 구분이 뚜렷해집니다.
슬라이더는 필터 위에서 작동하므로 반응이 즉각적입니다. 슬랙 창을 열어 둔 채로 값을 움직이면 실시간으로 확인할 수 있습니다.
주의할 점이 하나 있습니다. 대비를 너무 높이면 슬랙의 미확인 채널 표시(굵은 텍스트)가 지나치게 도드라져, 오히려 시각적 노이즈가 늘어납니다. 대비는 115를 넘기지 않는 것이 무난합니다.
코드 호스팅·문서 도구와 함께 다크 환경을 일관되게 유지하는 방법?
VS Code, GitHub, Confluence를 함께 쓰는 개발 환경에서 슬랙만 밝으면 화면 전환 때마다 눈이 재적응을 요구합니다. Everything Dark Mode로 슬랙 도메인을 지정해 두면, 나머지 도구와 밝기 수준이 맞춰집니다.
GitHub는 자체 다크 테마를 제공하고 prefers-color-scheme에 반응하므로, 시스템 다크 모드를 설정해 두면 슬랙 확장 설정과 자연스럽게 맞물립니다. Confluence의 경우 설치 버전과 클라우드 버전의 다크 지원 수준이 달라서, 클라우드 버전 일부 테마는 확장 프로그램의 추가 적용이 더 일관된 결과를 줍니다.
도구마다 다크 테마 지원 방식이 다른 것이 현실입니다. 자체 지원이 있는 곳은 자체 설정을 쓰고, 없는 곳에만 확장 프로그램을 씌우는 것이 가장 충돌이 적습니다.
자주 묻는 질문
슬랙 데스크톱 앱을 쓰면 이 확장 프로그램이 필요 없나요?
네. 슬랙 데스크톱 앱은 설정 메뉴에서 자체 다크모드를 제공합니다. Everything Dark Mode는 데스크톱 앱에서는 작동하지 않으며, 브라우저로 접속한 app.slack.com에만 적용됩니다. 앱 설치가 가능하다면 앱의 내장 테마 설정을 쓰는 편이 낫습니다.
다크모드를 적용하면 슬랙의 이모지나 이미지 색상이 이상해지지 않나요?
이미지와 이모지는 반전 후 재반전 처리를 거쳐 원본 색을 유지합니다. 다만 일부 SVG 아이콘은 색이 미묘하게 달라 보일 수 있습니다. 밝기 슬라이더를 85-90 사이로 설정하면 이 차이가 줄어드는 경향이 있습니다.
시스템 테마 연동 옵션을 켜면 슬랙이 항상 자동으로 전환되나요?
OS 테마 변경을 브라우저가 감지하면 즉시 전환됩니다. macOS에서 자동 테마 일정을 설정해 두거나, 수동으로 다크/라이트를 바꿀 때 모두 적용됩니다. 브라우저 탭을 새로 고칠 필요 없이 현재 탭에서 바로 반영됩니다.
app.slack.com 외에 슬랙 도메인이 더 있으면 어떻게 하나요?
슬랙 웹버전은 기본적으로 app.slack.com을 씁니다. 일부 엔터프라이즈 워크스페이스는 커스텀 도메인을 쓸 수 있는데, 그 경우 해당 도메인을 추가로 지정하면 됩니다. 확장 프로그램 팝업에서 도메인을 직접 입력하는 방식을 지원합니다.
확장 프로그램이 슬랙 성능에 영향을 주나요?
CSS 필터를 루트 엘리먼트에 적용하는 방식이라 JavaScript 번들이나 네트워크 요청에는 관여하지 않습니다. 렌더링 레이어에서만 처리되므로 체감 성능 차이는 거의 없습니다. 아주 오래된 저사양 기기라면 복잡한 레이아웃에서 미미한 렌더링 부하가 생길 수 있습니다.
슬랙 웹버전의 밝은 화면 문제는 설정 하나로 해결되지 않습니다. 자체 다크 지원이 없는 사이트에는 브라우저 레이어에서 처리해야 하고, Everything Dark Mode의 사이트별 토글과 시스템 연동 옵션이 그 역할을 담당합니다. 슬랙 도메인만 지정하고, 밝기와 대비를 실제 작업 환경에 맞게 조정해 두면 야간 개발 흐름에서 화면 전환 때마다 눈이 리셋되는 불편을 줄일 수 있습니다.
더 보기: https://chromewebstore.google.com/detail/efohpnohjdgabelfddlngenfonojneoj?utm_source=item-share-cb
Top comments (0)