- 삼성 인터넷의 강제 다크 모드는 사이트가 정한 color-scheme 설정을 무시하고 배경색을 뒤집는데, 그림은 그대로 둬요.
- 그래서 픽셀 캐릭터가 깨져 보였습니다. 배경색 칠하기 → SVG → 24×24 캔버스로 세 번 바꿔서 해결했습니다.
- 짐작으로 고르지 않고 8가지 방식을 한 화면에 늘어놓고 눈으로 대 봤습니다. 캔버스 2종만 원래 색을 지켰어요.
제가 만든 반려동물 앱 오늘도 밥줌의 홈 화면에는 픽셀 다마고치 캐릭터가 있습니다. 그 캐릭터가 어떤 환경에서는 깨져 보였어요. 색이 전부 어긋나 있었죠.
범인은 삼성 인터넷의 강제 다크 모드였습니다. 앱 코드를 잘못 쓴 게 아니라, 브라우저가 제 색을 덮어쓰고 있던 거예요.
삼성 인터넷은 배경만 뒤집고 그림은 그대로 둡니다
웹에는 “이 사이트는 밝은 화면입니다”라고 알리는 color-scheme 설정이 있어요. 보통 브라우저는 그걸 보고 색을 건드리지 않습니다. 그런데 삼성 인터넷의 강제 다크 모드는 그 설정을 무시하고 배경색을 어둡게 뒤집습니다.
문제는 뒤집는 대상이 배경색뿐이라는 점입니다. 그림 파일은 그대로 둬요. 제 캐릭터는 칸마다 배경색을 칠해서 픽셀 모양을 만든 방식이었는데, 그 배경색이 전부 뒤집히니 캐릭터 자체가 다른 그림이 돼 버린 겁니다.
세 번 바꿨습니다 — 배경색 → SVG → 캔버스
원래 방식은 칸마다 배경색을 칠하는 것이었어요. 이게 뒤집히니, 먼저 색 지정을 손봤어요. 안 됐습니다. 두 번째로 SVG 이미지로 바꿨어요. 이것도 넣는 방식에 따라 색이 바랬습니다. 세 번째가 24×24 캔버스였고, 이게 통했어요.
캔버스는 브라우저가 “그림”으로 보기 때문에 배경색 뒤집기 대상에서 빠져요. 다크 모드가 손댈 틈이 없는 겁니다.
8가지를 한 화면에 늘어놓고 비교했습니다
세 번이나 바꿔 가며 고친 끝에, 방식을 하나씩 시험하는 대신 비교 페이지를 따로 만들었습니다. 같은 강아지 캐릭터를 8가지 방식으로 그려 한 화면에 늘어놓고, 다크 모드를 켠 채 열어 봤어요.
| 방식 | 무엇으로 그렸나 | 다크 모드에서 |
|---|---|---|
| A | 칸마다 배경색 칠하기 (원래 방식) | 색 바램 |
| B | SVG 배경 | 색 바램 |
| C | SVG 이미지 태그 | 색 바램 |
| D~F | PNG 3종 | 방식마다 다름 |
| G·H | 캔버스 2종 | 원래 색 유지 |
이 페이지는 답을 확인한 뒤 지웠어요. 앱에 남겨 둘 화면은 아니었으니까요. 그래도 이 한 장짜리 비교가 세 번의 추측보다 빨랐습니다.
고치고 나서 또 깨졌습니다
캔버스로 바꾸니 색은 잡혔어요. 그런데 상점에서 배경을 걸어 둔 화면에서 캐릭터가 오른쪽으로 밀리고 배경 그림이 작게 겹쳐 보였습니다.
원인은 예전에 넣어 둔 CSS 한 줄이었습니다. 무대 안의 요소를 전부 position: relative 로 정해 둔 줄이 있었는데, 그게 배경 캔버스의 absolute 를 덮어 버렸어요. 그러니 배경으로 깔려야 할 캔버스가 문서 흐름에 끼어들어 자리를 차지한 거예요. 이것도 고쳤습니다.
버그 하나를 고치면 그게 다른 걸 건드립니다. 9월 20일 이후로 이 앱에 올린 커밋이 142개예요. 새 기능보다 이런 뒤처리가 더 자주 들어갑니다.
솔직한 한계
이건 다크 모드를 지원한 게 아니라, 다크 모드가 망치지 못하게 막은 것입니다. 앱에 제대로 된 어두운 테마를 만든 게 아니에요. 그래서 다크 모드를 켜 둔 분이 보면 버튼 색이 탁해지는 곳이 아직 남아 있습니다. 앱 자체 다크 테마는 다음 과제로 미뤄 뒀어요.
그리고 캔버스가 모든 상황에서 안전하다고 말할 수는 없습니다. 제가 확인한 건 삼성 인터넷 강제 다크 모드 한 가지 조건이고, 다른 브라우저가 다른 방식으로 색을 건드리면 또 달라질 수 있어요.
하나씩 바꿔 가며 세 번 틀린 끝에, 8가지를 한 화면에 늘어놓고 나서야 답이 보였습니다.
다음에 할 일
- 앱 자체 어두운 테마 만들기 — 강제 다크 모드를 막는 게 아니라 제대로 지원하기
- 새 화면을 만들 때마다 삼성 인터넷 다크 모드로 한 번씩 열어 보기
- 캔버스로 그린 요소가 늘었으니, 배경·무대 쪽 CSS를 한 번 정리하기