🎨 빨강과 초록으로 상태를 표시하면 안 되는 이유 — 대시보드를 다시 만들며 배운 것

서버에 돌리는 서비스가 늘면서 주소를 외울 수가 없었습니다. 링크와 상태를 한눈에 보는 화면이 필요해서 대시보드를 하나 만들었어요. 정상은 초록, 주의는 노랑, 위험은 빨강. 당연한 배색이라고 생각했습니다. 그런데 다 만들고 나서 문제를 깨달았습니다. 저는 적록색약이라 그 두 색을 잘 구분하지 못합니다. 가장 중요한 두 상태를 정작 제가 못 읽는 화면을 만든 거예요.

색이 정보의 유일한 통로가 되면 안 됩니다

상태 표시에서 초록과 빨강은 거의 표준처럼 쓰입니다. 문제는 이 조합이 가장 흔한 색각 특성과 정면으로 충돌한다는 점이에요. 적록색약에게 두 색은 비슷한 밝기의 비슷한 색으로 보입니다. 신호가 두 개인데 실제로는 하나로 합쳐지는 셈입니다.

여기서 해법은 “다른 색을 고르는 것”에서 그치지 않습니다. 색을 어떻게 고르든 색 하나에만 의존하는 설계는 언제든 무너질 수 있어요. 화면이 어둡거나, 밝은 곳에서 보거나, 흑백으로 출력하거나, 모니터 색이 틀어져 있으면 마찬가지 상황이 됩니다.

그래서 방향을 바꿨습니다. 색을 빼는 게 아니라, 색 말고도 읽을 수 있는 길을 하나 더 두는 것으로요.

색·기호·질감, 세 겹으로 표시하기

같은 정보를 세 가지 방식으로 중복해서 표현했습니다.

수단	정상	주의	위험
색	파랑	노랑	분홍
기호	없음	▲	✕
질감	없음	굵은 사선	촘촘한 사선

우선 초록과 빨강 조합을 버리고 파랑·노랑·분홍으로 갔습니다. 이 셋은 색각 특성과 무관하게 서로 구분되는 편이에요. 그리고 상태마다 기호를 붙였습니다. 색이 안 읽혀도 ▲와 ✕는 읽히니까요.

막대그래프에는 사선 패턴을 넣었습니다. CSS 몇 줄이면 됩니다.

.bar.warn > i {
  background: repeating-linear-gradient(45deg,
    #fbbf24 0 7px, #b4820f 7px 14px);
}
.bar.danger > i {
  background: repeating-linear-gradient(45deg,
    #f472b6 0 4px, #a21c63 4px 8px);
}

주의는 사선을 성기게, 위험은 촘촘하게 넣었어요. 색을 못 봐도 패턴의 밀도만으로 심각도가 읽힙니다.

이게 색약을 위한 배려처럼 보이지만 실제로는 그렇지 않습니다. 흑백으로 출력해도 읽히고, 화면 밝기를 낮춰도 읽히고, 작게 줄여도 읽혀요. 특정한 사람을 위해 만든 장치가 대체로 모두에게 이득이 되는 쪽으로 굴러갑니다.

이건 취향이 아니라 기준으로 정리돼 있습니다

혼자 쓰는 대시보드를 만들면서 뒤늦게 찾아봤는데, 제가 헤맨 내용이 이미 웹 접근성 기준에 다 들어 있었습니다.

국내에는 한국형 웹 콘텐츠 접근성 지침이 있습니다. 2022년 말에 2.2로 개정됐고, 4개 원칙과 14개 지침, 33개 검사항목으로 이뤄져 있어요 (출처: 웹 접근성 지침 2.2 — 웹소울랩). 제가 부딪힌 문제는 그중 첫 번째 원칙인 인식의 용이성 안에 나뉘어 들어 있었습니다.

• 색에 무관한 콘텐츠 인식 — 콘텐츠는 색에 관계없이 인식될 수 있어야 한다
• 텍스트 콘텐츠의 명도 대비 — 텍스트와 배경의 명도 대비는 4.5 대 1 이상이어야 한다
• 콘텐츠 간의 구분 — 이웃한 콘텐츠는 구분될 수 있어야 한다

첫 항목이 제가 만든 문제 그 자체입니다. 색이 정보를 전달하는 유일한 수단이면 안 된다는 것. 권장 사항이 아니라 33개 검사항목 중 하나예요.

재미있는 건 이 항목의 올바른 사례로 제시된 그림입니다. 색상만 다른 그래프를 흑백으로 바꾸면 정보를 읽을 수 없는 게 잘못된 사례이고, 그래프마다 모양을 다르게 준 것이 올바른 사례로 나옵니다 (출처: 웹 접근성 실무 가이드 — 명료성). 제가 사선 패턴을 넣으면서 스스로 궁리했다고 생각한 방법이, 기준에는 이미 표준 해법으로 적혀 있었어요. 콘텐츠 간의 구분 항목에도 구분 방법 중 하나로 서로 다른 무늬가 들어가 있습니다.

명도 대비 쪽도 짚어둘 만합니다. 본문 크기 텍스트는 4.5 대 1이지만, 18pt 이상이거나 굵은 14pt 이상인 큰 텍스트는 3 대 1까지 허용됩니다. 장식 목적 텍스트나 로고, 비활성 상태를 나타내려고 일부러 흐리게 만든 컨트롤은 예외고요.

제가 처음 쓴 초록과 빨강은 서로 구분이 안 될 뿐 아니라 밝기까지 비슷했습니다. 색상만 다르고 밝기가 같으면, 색을 못 읽는 순간 정말로 아무 정보도 안 남아요. 색을 고를 때 색상표만 보지 말고 명도 차이를 함께 봐야 하는 이유입니다. 대비율은 브라우저 개발자 도구로 바로 확인할 수 있습니다.

혼자 쓰는 도구에 기준까지 챙길 필요가 있나 싶었는데, 생각해보면 이 기준이 상정한 사용자가 바로 저였습니다. 기준은 남을 위한 규칙이라기보다 놓치기 쉬운 것들의 목록에 가깝더라고요.

경고 기준은 절대값이 아니라 비율로

디스크 경고를 처음엔 “몇 GB 남음”으로 만들었는데 쓸모가 없었습니다. 4TB 디스크에 100GB 남은 것과 500GB 디스크에 100GB 남은 것은 전혀 다른 상황이거든요. 앞쪽은 곧 위험하고 뒤쪽은 아직 여유가 있는데, 숫자만 보면 똑같아 보입니다.

그래서 비율로 바꿨습니다.

일반 볼륨    80% 주의  ·  85% 위험
ZFS 풀       75% 주의  ·  85% 위험

ZFS는 기준을 따로 뒀습니다. 파일 시스템 특성상 공간이 차면 성능 저하가 더 일찍 나타나거든요. 같은 85%라도 시스템마다 의미가 다르다면 기준도 나눠야 합니다.

하드디스크 온도가 158도로 나왔습니다

만들면서 틀린 것도 많았어요. 그중 가장 황당했던 건 디스크 온도였습니다. 화면에 158도가 찍혔거든요. 하드디스크는 그렇게 뜨겁지 않습니다.

원인은 제가 진단 도구의 출력 텍스트를 정규식으로 긁어오면서 엉뚱한 열을 읽은 것이었습니다. 표처럼 생긴 텍스트라 몇 번째 값이 온도인지 위치로 짐작했는데, 디스크마다 열 구성이 조금씩 달랐어요.

해결은 간단했습니다. 같은 도구의 JSON 출력 옵션을 쓰고 온도 항목을 이름으로 직접 집었습니다. 텍스트를 긁는 것보다 구조화된 출력을 쓰는 편이 언제나 낫습니다. 위치는 바뀌지만 이름은 잘 안 바뀌니까요.

잠금은 위험한 동작에만 겁니다

전원 제어에 PIN을 걸었는데, 실수로 컨테이너 시작 버튼에까지 걸려 있었습니다. 서비스 하나 켜는 데 매번 번호를 넣어야 하니 금세 귀찮아졌어요.

범위를 좁혀서 호스트 종료와 재부팅에만 PIN을 요구하도록 바꿨습니다. 되돌리기 어려운 동작에만 건 거죠.

여기서 배운 게 있습니다. 보안 장치를 아무 데나 걸면 사용자가 그걸 무시하게 됩니다. 매번 확인 창을 띄우면 사람은 내용을 안 읽고 누르게 되니까요. 막을 곳을 줄여야 실제로 막힙니다.

정리

만들면서 얻은 규칙은 네 줄로 정리됩니다.

색으로만 정보를 전달하지 않습니다. 색과 기호와 질감으로 겹쳐 표현하면 하나가 안 보여도 나머지로 읽힙니다. 색을 고를 때는 색상뿐 아니라 명도 차이도 함께 봅니다. 경고 기준은 절대값이 아니라 비율로 잡습니다. 도구 출력을 읽을 때 구조화된 형식이 있으면 그걸 씁니다. 그리고 보안 장치는 위험한 동작에만 겁니다.

무엇보다, 자기가 못 보는 걸 스스로 확인하기는 생각보다 어렵습니다. 저는 제 화면을 다 만들고 나서야 알았어요. 만들 때 “이걸 다르게 보는 사람은 어떻게 읽을까”를 한 번 물어보는 것만으로도 꽤 달라집니다.