얼마 전 FRME 블로그에 다크모드를 넣기로 했습니다.
그냥 재밌을 것 같아서요.
토글을 누르면 라이트모드와 다크모드를 오가는 기능은 이제 흔하지만, 적어도 블로그에서는 거의 보지 못했습니다. 티스토리 블로그가 어디까지 갈 수 있는지 확인해보고도 싶었습니다.
처음에는 별일 아니라고 생각했습니다.
밝은 배경을 어둡게 바꾸고, 검은 글씨를 희게 바꾸면 되는 것 아닌가.
CSS에서 지정 색상들을 뒤집으면 끝나는 일처럼 보였습니다. 반나절이면 충분하겠다고 생각했습니다.
사실 저는 저보다 AI를 더 믿었습니다.
AI도 제가 만들어둔 style.css를 분석하더니, 사용 색상이 대부분 정의되어 있어서 일부 예외 케이스만 조정하면 다크모드를 추가하는 건 어렵지 않다고 했고, 저도 동의했습니다. 토글 버튼 하나 달고, CSS에서 배경색 바꾸고, 글자색 바꾸고.
실제로 처음 30분은 순조로웠습니다. 화면이 까매지고 글씨가 하얘졌습니다.
됐네. 다 됐네.
다 되긴 뭐가 다 돼
색을 바꾼 그 순간부터 시작됐습니다. 배경 하나를 어둡게 했더니, 그 위에 얹혀 있던 것들이 하나씩 이상해지기 시작했습니다.
카테고리 라벨이 안 보였습니다. 그래프 막대가 사라졌습니다. 구분선이 사라졌습니다. 로고가 보이지 않았습니다.
하나를 건드렸을 뿐인데, 건드린 적 없는 것들이 줄줄이 고장 났습니다.
처음에는 AI의 말투도 자신만만했습니다.
이렇게 하면 됩니다. 이 CSS를 추가하세요. 이 선택자를 수정하세요.
그런데 어느 순간부터 말이 조금씩 달라졌습니다.
이건 확인이 필요합니다. 개발자 도구로 한번 찍어볼까요. 해당 요소의 클래스명을 확인해야 합니다.
저는 AI가 확신 없는 말투를 쓸 줄 안다는 걸 이번에 처음 알았습니다.
처음에는 둘 다 이 일이 간단한 줄 알았던 겁니다. CSS에서 지정 색상들만 반전시키면 되는 걸로 생각했죠.
그런데 막상 열어보니 그게 아니었습니다. 다크모드는 단순히 색을 바꾸는 일이 아니라, 내가 그동안 화면 위에 얼마나 많은 가정을 얹어두었는지 확인하는 일이었습니다.
그 동안 회사에서 일하며 보아온 풍경이 겹쳐 보였습니다.
대기업 웹사이트를 만들 때도 비슷했습니다.
고객사가 간단한 것 하나만 바꿔달라고 했습니다.
정말 간단해 보입니다. 버튼 하나. 입력 필드 하나. 공통 배너 하나. 약관 문구 하나. 그런데 그 하나가 기존의 전부를 건드립니다.
버튼 하나를 달았더니 같은 컴포넌트를 쓰는 다른 페이지의 CTA가 먹통이 됩니다. 입력 필드 하나를 추가했더니 백엔드에서 문자열과 숫자 자료형이 맞지 않는다며 오류를 토합니다. 공통 배너의 노출 조건을 바꿨더니 캐시와 국가 코드가 엇갈려 권역별로 다른 이미지가 뜹니다. 약관 문구를 수정했더니 모바일에서 버튼이 화면 아래로 밀리고, 접근성 리더는 안내 문구와 동의 버튼을 엉뚱한 순서로 읽습니다.
QA를 며칠씩 합니다. 다 잡았다고 생각합니다.
런칭합니다. 그리고 안정화 기간에, 아무도 예상하지 못한 곳에서 또 터집니다.
“드디어 해치웠나?”는 또다른 오류의 부활을 예고하는 플래그와 다름없었습니다.
다크모드는 그 거대한 프로젝트의 축소판 같았습니다.
차이는 규모뿐입니다. 대기업 플랫폼에서 수십 명이 붙어 며칠씩 보던 일을, 제 블로그에서는 저와 AI가 둘이 앉아 몇 시간 동안 보고 있었습니다. 말하자면 1인 운영 조직의 야간 안정화였습니다.
고객사는 없었지만, 가장 까다로운 사용자인 제가 있었습니다.
정말 무서운건 보이지 않는 오류다
이번에 다시 몸에 새겼습니다. 오류에도 종류가 있다는 사실을요.
하나는 보이는 오류입니다.
이게 왜 이렇게 보이지.
색이 어긋나고, 라벨이 너무 흐리고, 선이 너무 진하고, 여백이 이상합니다.
보기 싫습니다. 당황스럽습니다. 하지만 어쨌든 보입니다. 보이면 고칠 수 있습니다.
잘못된 곳을 찍고, 색을 바꾸고, 여백을 조정하고, 확인하면 됩니다.
보이는 오류는 껄끄럽지만 정직합니다. 자기가 여기 있다고 말해주니까요.
문제는 보이지 않는 오류입니다.
이게 왜 안 보이지.
Most Read 영역에 화살표가 있었습니다. 글 목록을 옆으로 넘기는 화살표입니다. 어느 순간 그게 사라졌습니다.
처음에는 화살표가 없어진 줄도 몰랐습니다. 그냥 왜 글이 세 개밖에 안 보이지, 하고 한참을 헤맸습니다.
개발자 도구로 찍어보니 화살표는 그 자리에 있었습니다. 위치도 맞고, 크기도 있고, 클릭도 됐습니다. 단지 색이 배경과 같았습니다. 어두운 회색 화살표가 어두운 회색 배경 위에 얹혀 있었습니다.
있는데 없는 상태. 아니, 없어졌다는 사실조차 모르는 상태.
보이는 오류는 차라리 낫습니다. 존재감을 드러내니까요. 버튼이 깨지고, 이미지가 밀리고, 텍스트가 겹치면 누구라도 알아봅니다.
진짜 무서운 건 비명도 없이 사라지는 것들입니다. 만약 제가 그 자리에 화살표가 있었다는 사실을 잊고 있었다면, 영영 몰랐을 겁니다. 처음 온 사람은 원래 그런가 보다 했겠죠. 기능은 작동하는데, 색 하나 때문에 조용히 지워진 셈입니다.
댓글에 생긴 오류는 거기서 한 발 더 나갔습니다. 배경은 어두워졌는데 댓글 글자는 여전히 검정에 가까웠습니다. 누군가 댓글을 남겼고, 답글도 달렸고, 날짜도 있었지만, 다크모드에서는 희미한 흔적처럼만 보였습니다. 화살표는 내 기능이 사라진 거였지만, 이건 누군가 남긴 말을 보이지 않게 만들어버린 거였습니다. 더 보기 좋게 만들겠다고 고치다가요.
모든 요소들은 전제에 기댄다
다크모드는 취향의 문제가 아니었습니다. 검은 배경이 멋있냐, 흰 배경이 편하냐의 문제가 아니었습니다.
그것은 화면 위의 요소들이 어떤 전제에 기대고 있었는지 드러내는 검사였습니다.
흰 배경이라는 전제. 검은 글씨라는 전제. 밝은 선이라는 전제. 검은 로고가 당연히 보일 거라는 전제.
밝은 배경에서는 멀쩡해 보이던 것들이, 어두운 배경 위에서 하나씩 자신이 어디에 기대고 있었는지 털어놓기 시작했습니다.
나는 사실 색을 따로 지정받은 적이 없습니다. 나는 부모 요소의 색을 따라갑니다. 나는 라이트모드에서만 살아남도록 태어났습니다. 나는 검은 로고라서 어두운 데서는 죽습니다.
듣고 싶지 않은 고백들입니다. 그러다 보니 다크모드 작업이라기보다, 제 블로그 스킨의 약점을 하나씩 탐문하는 일에 가까워졌습니다. 처음에는 이렇게 하면 되겠지였는데, 나중에는 이건 왜 이러지로 바뀌었습니다. 마지막에는 여기에도 뭔가 숨어 있겠지, 까지 갔죠.
이쯤 되면 다크모드가 아니라 블로그 스킨의 심리 상담입니다.
밝을 때는 괜찮아 보이던 사람이 숨겨둔 어둠을 드러내는 것처럼, 밝은 배경에서는 멀쩡해 보이던 요소들이 어두운 배경 위에서 하나씩 자기 사정을 털어놓습니다.
결국 저는 다크모드를 완성했습니다.
아니, 완성했다고 믿고 있는 것에 가깝습니다. 아직도 어디엔가 어두운 배경 위에 숨은 검은 글씨가 있을지도 모릅니다. 어느 페이지에선가
화살표 하나가 또 유령처럼 앉아 있을지도 모릅니다. 그래도 지금 보이는 것들은 대체로 보이게 만들었습니다.
그 정도면 일단 됐습니다.
무언가를 고쳤다는 것은, 모든 문제가 사라졌다는 뜻이 아닙니다.
적어도 이제 무엇이 안 보이는지는 조금 더 알게 됐다는 뜻입니다.
끝.