다크 모드의 회색을 역할별로 나누는 방법

밝기 순서보다 쓰임을 먼저 정합니다

회색을 밝기 순서로 여러 개 준비해도 어느 곳에 쓸지 정해져 있지 않으면 화면마다 선택이 달라집니다. 먼저 앱의 바탕, 카드와 입력 영역, 경계선, 텍스트처럼 역할을 나눠 보세요. 각 역할 안에서 필요한 강조 수준을 정하는 것이 출발점입니다.

이 네 가지는 고정된 색상 개수를 뜻하지 않습니다. 텍스트에도 본문과 보조 설명이 있고, 표면에도 기본 영역과 위에 뜨는 영역이 있을 수 있습니다. 제품에 필요한 차이만 추가하되 이름에는 목적이 드러나도록 합니다.

예를 들어 보조 설명을 특정 밝기 값으로 직접 쓰기보다 해당 역할의 토큰을 사용하면 테마를 조정할 때 관련 요소를 함께 검토할 수 있습니다. 실제 색 값은 주변 색과 글자 크기, 화면 구성 안에서 결정해야 합니다.

표면과 경계가 같은 일을 반복하지 않게 합니다

카드마다 배경과 테두리와 그림자를 모두 강하게 주면 내용보다 상자가 먼저 보일 수 있습니다. 어떤 영역을 구분해야 하는지 정하고, 밝기 차이와 경계선 중 무엇이 그 역할을 맡을지 선택합니다.

대화상자처럼 위에 뜨는 영역은 배경 화면과 구분되어야 하지만, 모든 안쪽 요소까지 같은 정도로 강조할 필요는 없습니다. 입력칸은 입력할 수 있는 영역이라는 점이 드러나야 하고, 읽기 전용 정보는 그와 다른 기대를 주어야 합니다.

중첩된 카드와 여러 패널이 있는 화면에서 검토하면 표면 단계가 불필요하게 늘어나는지 알 수 있습니다. 색을 더하기 전에 여백, 제목, 정렬만으로 묶음을 설명할 수 있는지도 확인하세요. 하나의 구분에 여러 장치를 겹치면 나중에 조정할 항목도 많아집니다.

텍스트 위계와 상태 의미를 함께 확인합니다

보조 문구를 덜 강조하려다 읽기 어렵게 만들지 않도록 주의합니다. 날짜, 단위, 오류 해결 방법처럼 작게 보이는 정보도 작업을 끝내는 데 필요할 수 있습니다. 중요도가 낮다는 이유만으로 읽을 수 없는 수준으로 흐리게 두면 안 됩니다.

오류나 선택 상태를 색만 바꿔 표시하는 경우에는 문구와 아이콘 등 다른 단서도 검토합니다. W3C의 색 사용 설명은 색만으로 정보나 행동을 구분하지 않도록 안내합니다. 다크 모드에서도 상태의 의미가 분명해야 합니다.

밝은 브랜드 색과 회색의 조합은 실제 화면에서 확인하세요. 정상, 선택, 비활성, 오류 상태를 같은 내용으로 비교하면 어떤 정보가 지나치게 튀거나 사라지는지 찾기 쉽습니다.

한 화면의 수정이 다른 화면에도 맞는지 봅니다

색을 조정할 때는 목록, 입력 폼, 대화상자처럼 구성이 다른 대표 화면을 함께 확인합니다. 한 화면에서는 읽기 좋아진 보조 문구가 다른 배경에서는 지나치게 강조될 수 있습니다. 공통 토큰을 바꾸었다면 해당 토큰의 사용처를 기준으로 영향 범위를 정합니다.

• 긴 본문과 작은 숫자, 비활성 안내를 넣어 봅니다.
• 사진과 그래프처럼 자체 색이 있는 콘텐츠를 함께 확인합니다.
• 라이트와 다크에서 정보의 우선순위가 유지되는지 비교합니다.
• 키보드 포커스와 선택 상태가 배경에 묻히지 않는지 봅니다.

최종적으로 토큰 이름, 쓰는 위치, 피해야 할 조합을 남겨 두세요. 다음 화면을 만드는 사람이 같은 판단을 재사용할 수 있어야 색상 규칙이 유지됩니다.