다크 모드
손님 폰이 어두운 화면으로 설정돼 있으면, 글자와 배경이 같은 색이 되어 아무것도 안 읽힐 수 있어요. 요즘 폰은 이게 기본값에 가까워서, 안 맞춰 두면 멀쩡한 가게 소개가 통째로 안 보이는 손님이 생겨요.
손님이 이렇게 말하면 이 문서예요
손님한테서 이런 연락이 오면 대부분 원인이 하나예요. 손님 폰은 어두운 화면 설정이고, 사장님 폰은 밝은 화면 설정이라서 같은 화면이 서로 다르게 보이는 거예요.
| 손님이 보낸 말 | 화면에서 실제로 벌어진 일 |
|---|---|
| "글씨가 안 보여요" | 글자색과 배경색이 둘 다 어두워졌어요. 글자가 지워진 게 아니라 배경에 묻힌 거예요. 마우스로 긁으면 글자가 선택되는 걸로 확인할 수 있어요 |
| "하얀 칸만 나와요" | 배경은 밝게 남았는데 글자만 흰색으로 바뀌었어요. 위와 정반대 조합인데 결과는 같아요 |
| "밤에 열면 상호가 사라져요" | 로고 파일이 배경 없는 검은 글자예요. 밝은 배경에서만 보이고 어두운 배경에서는 통째로 안 보여요 |
| "버튼이 어디 있는지 모르겠어요" | 버튼 테두리와 구분선이 연한 회색이었어요. 어두운 배경에서는 그 선이 사라져서 눌 곳이 안 보여요 |
| "저는 잘 보이는데요?" | 사장님 폰이 밝은 화면 설정이라는 뜻이에요. 고장이 아니라 사장님만 멀쩡한 화면을 보고 있는 상태예요 |
이건 사장님이 잘못 만든 게 아니에요. 색을 반만 정해 둔 화면은 원래 이렇게 되어요. 그리고 색을 반만 정하는 건 아주 흔해요. 밝은 화면에서 만들고 밝은 화면에서 확인하면 반만 정해도 완벽해 보이니까요.
쉽게 말하면
가게 앞 칠판에 흰 분필로 오늘 메뉴를 써 뒀다고 해요. 검은 칠판이라 잘 보이죠. 그런데 누가 칠판만 흰색으로 바꿔 칠했다면 흰 분필 글씨는 그대로 있는데 아무것도 안 보여요. 글씨를 지운 사람은 없어요. 다크 모드가 딱 이거예요. 손님 폰이 내 화면의 벽 색을 바꿔 칠하는데, 글씨 색을 같이 바꿀 준비가 안 돼 있으면 글씨가 사라져요.
배경만 어두워지면 짙은 회색 글자가 묻혀요. 화면은 켜져 있는데 읽을 게 없어요.
손님 설정이 어느 쪽이든 글자와 배경이 항상 짝으로 바뀌어요. 두 벌 다 읽혀요.
핵심은 글자색과 배경색은 언제나 짝이라는 거예요. 하나만 바뀌면 사고가 나요. 그래서 고칠 때도 "글자를 하얗게 해주세요"가 아니라 "어두운 배경일 때 글자가 잘 보이게 해주세요"라고 짝으로 말하는 게 좋아요.
색이 사라지는 다섯 가지 경로
증상은 똑같이 "안 보여요"인데, 범인은 다섯 종류예요. 어느 쪽인지 알면 AI에게 훨씬 정확하게 시킬 수 있어요.
| 범인 | 무슨 일이 벌어지나 |
|---|---|
| 색을 반만 정함 | 글자색만 정하고 배경색을 비워 두면, 배경이 어두워질 때 글자는 그대로 남아요. 짙은 글자에 짙은 배경이면 아무것도 안 보여요 |
| 브라우저의 자동 어둡게 | 안드로이드 크롬이나 삼성 인터넷에는 준비가 안 된 화면도 억지로 색을 뒤집는 기능이 있어요. 사장님이 잡아 둔 색 조합이 손님 폰에서 흐트러져요 |
| 배경 없는 로고 파일 | 검은 글자로 된 로고는 흰 배경에서만 보여요. 어두운 배경에 올리면 사라져요. 탭에 뜨는 파비콘도 같은 문제를 겪어요 |
| 사진 속 글자와 흰 여백 | 사진은 설정에 따라 색이 바뀌지 않아요. 어두운 화면에 흰 여백 사진이 붙으면 형광판처럼 튀고, 사진에 박아 넣은 글자는 영원히 그 색이에요 |
| 연한 선과 그림자 | 칸을 나누던 연한 회색 선과 부드러운 그림자는 어두운 배경에서 안 보여요. 목록이 한 덩어리로 뭉쳐 보이고 입력칸 경계가 없어져요 |
어느 범인인지 가려내는 요령이 있어요. 글자가 아예 안 보이면 첫 번째나 두 번째예요. 안 보이는 자리를 손가락으로 길게 눌러 보세요. 글자가 선택되며 파랗게 잡히면 글자는 멀쩡히 있고 색만 묻힌 상태예요. 글씨는 읽히는데 특정 그림만 사라지면 세 번째고, 읽히기는 하는데 눈에 거슬리게 튀기만 하면 네 번째나 다섯 번째예요. 앞의 두 개는 손님을 잃는 급한 문제이고, 뒤의 세 개는 오늘 안 고쳐도 장사가 돌아가는 문제예요.
가장 무서운 건 두 번째예요
첫 번째는 내가 만든 화면 안의 문제라 내가 고칠 수 있어요. 두 번째는 손님 브라우저가 내 허락 없이 색을 뒤집는 것이라, 아무 준비도 안 해 두면 결과가 제멋대로예요. 그래서 다크 모드를 지금 안 만들기로 정했더라도, "항상 밝은 화면으로 고정"이라고 못을 박아 두는 편이 그냥 두는 것보다 안전해요.
AI에게 이렇게 말하세요
사장님이 색 이름이나 전문 용어를 외울 필요는 없어요. 본 것을 그대로 말하고, 어떻게 되기를 원하는지 붙이면 돼요. 아래 문장은 그대로 복사해서 써도 되는 것들이에요.
| 사장님이 겪은 일 | 이렇게 말하세요 |
|---|---|
| 손님 폰에서 글씨가 안 보인다고 한다 | "손님 폰이 어두운 모드일 때 글자가 배경에 묻혀서 안 읽혀요. 어두운 모드에서도 글자가 잘 보이게 색을 맞춰주세요" |
| 배경도 검고 글씨도 검다 | "배경색과 글자색이 같이 어두워져서 안 보여요. 배경이 어두워지면 글자는 밝아지게 짝으로 바꿔주세요" |
| 로고나 아이콘만 사라진다 | "어두운 배경에서 로고가 안 보여요. 어두운 배경용 로고를 따로 써주세요" |
| 입력칸과 버튼 경계가 안 보인다 | "어두운 모드에서 입력칸 테두리와 안내 글씨가 안 보여요. 테두리를 진하게 하고 안내 글씨를 밝게 해주세요" |
| 목록이 한 덩어리로 뭉쳐 보인다 | "어두운 모드에서 구분선과 그림자가 사라져요. 칸이 나뉘어 보이게 배경 밝기를 조금씩 다르게 해주세요" |
| 어둡게는 되는데 촌스럽다 | "어두운 모드 색을 다시 잡아주세요. 배경은 완전한 검정 대신 짙은 회색으로, 강조색은 조금 연하게요" |
| 지금은 다크 모드를 안 하고 싶다 | "손님 폰 설정과 상관없이 항상 밝은 화면으로 보이게 고정해주세요" |
| 손님이 직접 고르게 하고 싶다 | "화면 오른쪽 위에 밝은 화면과 어두운 화면을 바꾸는 작은 버튼을 넣어주세요. 손님이 고른 값은 다음에 와도 기억되게요" |
| 한 곳만 유난히 안 읽힌다 | "가격표 칸만 어두운 모드에서 글자가 안 보여요. 그 칸만 색을 다시 맞춰주세요" |
여기에 어디가 그런지 위치를 붙이면 훨씬 정확하게 고쳐져요. "맨 위 소개 칸에서", "가격표 아래 작은 글씨가"처럼요. 화면 전체를 뭉뚱그려 말하면 안 건드려도 될 곳까지 손을 대고, 그러다 밝은 화면 쪽이 망가지는 일이 생겨요. 손님이 보내 준 캡처가 있으면 그걸 함께 올리는 것이 어떤 설명보다 빨라요.
고쳐졌는지 3분 만에 확인하는 법
고쳐 달라고 말한 뒤에는 반드시 사장님 눈으로 확인해야 해요. 확인 안 하고 넘어가면 다음 손님 캡처로 다시 알게 되거든요.
- 1내 폰 설정에서 어두운 화면을 켜요. 아이폰은 설정의 디스플레이 항목, 안드로이드는 설정의 디스플레이 항목에 어두운 모드 스위치가 있어요.
- 2내 화면을 폰 브라우저로 새로 열어요. 이미 열어 둔 창은 옛 화면을 기억하고 있을 수 있어서, 새 창으로 여는 게 확실해요.
- 3위에서 아래까지 한 번 훑어요. 볼 곳은 정해져 있어요. 상호와 로고, 본문 글씨, 가격 숫자, 버튼 글씨, 입력칸 안내 글씨, 그리고 맨 아래 작은 글씨예요.
- 4작은 글씨와 회색 글씨를 특히 봐요. 큰 제목은 웬만하면 살아남고, 연한 회색으로 쓴 보조 설명이 가장 먼저 사라져요.
- 5밝은 화면으로 되돌려서 한 번 더 봐요. 어두운 쪽을 고치다가 밝은 쪽이 망가지는 일이 자주 생겨요. 두 벌을 다 봐야 끝난 거예요.
가장 흔한 함정
고쳤는데도 그대로 보이면 대개 화면이 옛 것을 기억하고 있는 것이에요. 새 창으로 열거나 화면을 아래로 당겨 새로 받아 보세요. 그래도 그대로면 진짜 안 고쳐진 거니까 다시 말하면 돼요.
사장님이 실제로 겪는 장면
장면 1 · 손님이 캡처를 보내왔다
“사장님 소개 글이 안 보여요. 캡처 보내드릴게요. 검은 화면만 있고 글자가 없어요.”
사장님 폰으로 열어 보면 멀쩡해요. 그래서 "손님 폰이 이상한가?" 하고 넘기기 쉬운데, 사장님만 밝은 화면 설정이었을 가능성이 훨씬 커요. 손님한테 확인시키기 전에 내 폰을 어두운 모드로 바꿔서 열어 보세요. 재현되면 원인이 확정된 거예요.
장면 2 · 낮에는 멀쩡한 로고가 밤에 사라진다
“낮에 보면 상호가 잘 보이는데, 밤에 폰으로 열면 그 자리가 텅 비어 있어요.”
화면 색은 잘 맞췄는데 로고 파일 하나가 안 따라간 경우예요. 배경 없는 검은 글자 로고는 밝은 배경 전용이에요. 어두운 배경용으로 밝은 색 로고를 한 장 더 만들어 두고 상황에 따라 바꿔 쓰면 끝나요. 로고 색 규칙은 브랜드 색 쪽에서 미리 정해 두면 편해요.
장면 3 · 외주 개발자가 말했다
“다크 모드는 나중에 하죠. 지금은 밝은 화면만 잡을게요.”
타당한 판단이에요. 두 벌을 만들면 확인할 화면이 두 배가 되니까요. 다만 사장님이 한 가지는 요청해야 해요. "밝은 화면으로 고정해 주세요"라고요. 그 말이 없으면 손님 브라우저가 알아서 반쯤 뒤집어 버려서, 나중에 하는 게 아니라 잘못 된 상태로 열려 있게 돼요.
자주 묻는 것
- Q. 어두운 모드 쓰는 손님이 진짜 많아요?
- 가게마다 다르니 숫자를 단정할 수는 없어요. 다만 요즘 폰은 해가 지면 자동으로 어두운 화면으로 바뀌는 설정이 흔하고, 그걸 항상 켜 두는 사람도 많아요. 그래서 저녁 시간대 방문자 중 상당수가 어두운 화면으로 내 가게를 본다고 생각하는 게 안전해요.
- Q. 반드시 두 가지 색을 다 만들어야 하나요?
- 아니에요. 밝은 화면 한 벌만 잘 만들고 그걸로 고정하는 것도 정당한 선택이에요. 최악은 반만 준비된 상태예요. 두 벌을 만들거나, 한 벌로 고정하거나, 둘 중 하나로 정하면 돼요.
- Q. 사진 안에 박힌 글자는 어떻게 해요?
- 사진은 설정에 따라 색이 바뀌지 않아요. 그러니 중요한 문구는 사진 안에 넣지 말고 글자로 따로 두는 게 좋아요. 흰 여백이 많은 사진은 어두운 화면에서 눈이 아플 정도로 튀니까, 여백 없는 사진으로 바꾸거나 배경을 투명하게 처리해 달라고 하면 돼요.
- Q. 제 폰에서만 계속 잘 보여요. 문제가 있는지 어떻게 알죠?
- 폰 설정에서 어두운 모드를 직접 켜 보는 게 유일하고 확실한 방법이에요. 3분이면 끝나요. 손님에게 물어서 알아내려 하면 문제를 겪은 손님은 이미 나가 버린 뒤예요.
- Q. 카톡이나 인스타 안에서 열면 또 다르게 보여요.
- 앱 안에 들어 있는 간이 브라우저는 그 앱의 색 설정을 따르기 때문에 결과가 또 달라요. 링크를 보냈을 때 뜨는 미리보기 카드는 화면 색과 별개로 움직이니 링크 공유 쪽을 함께 보세요.
- Q. 어두운 모드를 지원하면 검색에 유리해요?
- 검색 순위와 직접 관계는 없어요. 다만 글씨가 안 보여서 바로 나가는 손님이 많으면 그건 숫자로 나타나고, 그 숫자는 결과에 영향을 줘요. 검색 노출 문서에 그 연결이 정리돼 있어요.
- Q. 글자가 안 보이는 문제는 어두운 모드에서만 생기나요?
- 아니에요. 밝은 화면에서도 흰 배경에 연한 회색 글자를 쓰면 나이가 있는 손님은 못 읽어요. 색이 충분히 대비되게 하는 이야기는 웹접근성에서 더 깊이 다뤄요.
확인해 보세요
손님이 "글씨가 안 보여요" 캡처를 보냈어요. 내 폰에서는 멀쩡해요. 가장 먼저 할 일은?
하나 더
다크 모드는 나중에 하기로 했어요. 지금 해 둘 안전한 선택은?
직접 해보기
폰을 어두운 모드로 바꾸고 내 화면을 열어 보세요
지금 만들고 있는 화면을 폰으로 열어 두고, 폰 설정에서 어두운 모드를 켜 보세요. 이상한 곳이 있으면 이 문서의 표에서 문장 하나를 골라 그대로 말하면 돼요. 아무 이상이 없으면 그것도 확인한 거예요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
어쩌다 어두운 화면이 기본값이 됐나 · 폰 화면 종류가 바뀐 게 컸어요. 요즘 많이 쓰는 화면은 검은 부분의 불을 아예 켜지 않아서, 어두운 화면이 배터리를 덜 써요. 거기에 밤에 밝은 화면을 보면 눈이 부시다는 불편이 겹쳐서, 폰을 만드는 회사들이 정식 기능으로 넣고 해가 지면 자동으로 바뀌는 설정까지 붙였어요. 그래서 지금은 사용자가 굳이 켜지 않아도 저녁이 되면 어두운 화면이 되는 사람이 많아요. 손님이 특별한 취향을 가진 게 아니라, 기본값이 그쪽으로 옮겨 간 거예요.
색을 값이 아니라 이름으로 정해 두면 한 번에 갈린다 · 화면 여기저기에 색을 직접 박아 넣으면, 어두운 모드를 만들 때 그 자리들을 하나하나 다 찾아야 해요. 스무 군데 중 열여덟 군데만 고치면 두 군데가 남아서 사고가 나요. 그래서 잘 만든 화면은 색을 "본문 글자색"·"카드 배경색"처럼 이름으로 정해 두고, 밝을 때와 어두울 때 그 이름에 다른 값을 끼워요. 페인트통에 색 이름 대신 "벽에 칠하는 색"이라고 이름표를 붙여 두고, 계절마다 통 안의 물감만 갈아 넣는 것과 같아요. AI에게 "색을 한곳에서 관리하게 정리해주세요"라고 부탁하면 이렇게 정리해 줘요. 이후에 색 바꾸는 요청이 훨씬 싸고 안전해져요.
어두운 모드는 색을 뒤집는 게 아니다 · 밝은 화면을 그대로 뒤집으면 눈이 아픈 화면이 나와요. 순수한 검정 배경에 순수한 흰 글자를 얹으면 글자 테두리가 번져 보여서 오래 읽기 힘들어요. 그래서 실제로는 배경을 짙은 회색 정도로, 글자를 살짝 낮춘 흰색으로 잡아요. 또 밝은 화면에서 칸을 나누던 그림자가 어두운 배경에서는 안 보이니, 층을 나눌 때 그림자 대신 배경 밝기를 아주 조금씩 다르게 해서 앞뒤를 구분해요. 강조색도 그대로 쓰면 눈이 찌르는 느낌이라 조금 연하게 낮춰요. 어두운 모드를 잘 만든 화면과 억지로 뒤집은 화면은 이 세 가지에서 갈려요.
이것만 기억하세요
- ·글자색과 배경색은 언제나 짝이에요. 하나만 바뀌면 글자가 사라져요
- ·사장님 폰이 밝은 모드라서 사장님만 멀쩡한 화면을 보고 있을 수 있어요
- ·확인은 내 폰 설정에서 어두운 모드를 켜고 새 창으로 여는 것부터예요
- ·본 것을 그대로 말하면 돼요. "어두운 모드에서 글자가 안 보여요. 잘 보이게 색을 맞춰주세요"
- ·지금 안 만들기로 했다면 "항상 밝은 화면으로 고정"이라고 못을 박아 두세요