Safe Rules 9가지: 시각 디자인의 기본값은 어디까지 안전한가

#000000과 #FFFFFF는 가장 강한 대비를 만듭니다. 그래서 모든 텍스트와 표면에 적용하면 화면의 모든 요소가 같은 강도로 말하기 시작합니다. 본문과 배경에 약간의 색을 남기면 시각적 온도가 낮아지고 위계를 만들 여지가 생깁니다.

다만 덜 하얗고 덜 검다는 이유만으로 읽기 쉬운 것은 아닙니다. 작은 본문과 보조 텍스트는 WCAG 대비 기준을 따로 확인해야 합니다. 분위기를 위해 회색을 낮추는 순간, 읽을 수 없는 회색이 되지 않았는지 먼저 봐야 합니다.

완전히 무채색인 회색은 제품의 나머지 팔레트와 분리되어 보일 수 있습니다. 주 색상의 색조를 아주 약하게 섞으면 배경·테두리·본문이 하나의 시스템처럼 읽힙니다.

이 규칙은 모든 회색을 브랜드 색으로 칠하라는 뜻이 아닙니다. 따뜻한 색과 차가운 색을 한 화면에 무심코 섞으면 오히려 시스템이 흔들립니다. 다크 모드와 색각 이상 환경에서도 표면의 역할이 유지되는지 확인해야 합니다.

버튼, 오류, 현재 위치처럼 사용자가 놓치면 안 되는 정보는 배경과 충분히 구분돼야 합니다. 모든 요소를 강한 대비로 만들면 아무것도 중요하지 않게 되므로, 대비는 양이 아니라 배분의 문제입니다.

색상 대비만 보지 말고 크기·위치·여백·상태 변화도 함께 봅니다. 강조색 하나에 모든 의미를 맡기면 색을 구분하기 어려운 사용자에게 정보가 사라질 수 있습니다.

원·삼각형·아이콘·한글 텍스트는 박스의 정확한 중앙에 놓여도 시각적으로 어긋나 보일 수 있습니다. 먼저 그리드와 토큰으로 정렬한 뒤, 반복되는 컴포넌트는 눈으로 보정한 값을 시스템에 기록합니다.

광학 보정은 감각을 정량화하지 못한다는 뜻이 아닙니다. 어떤 아이콘이 몇 픽셀 올라가야 하는지 개인의 눈에만 남겨두지 말고, 컴포넌트 가이드나 회귀 테스트에 남겨야 한다는 뜻입니다.

큰 제목은 글자 자체의 면적이 커서 자간과 행간이 넓으면 덩어리가 풀어질 수 있습니다. 작은 텍스트는 반대로 글자 사이와 줄 사이에 숨 쉴 공간이 있어야 읽기 쉽습니다.

하지만 한국어·영문·숫자가 섞인 문장은 같은 수치로 맞춰도 다르게 보입니다. 폰트, 문장 길이, 화면 폭, 사용자의 글자 크기 설정을 함께 확인하고, 화면 캡처 하나에 맞춘 타이포그래피가 되지 않게 해야 합니다.

카드 테두리가 카드 안쪽 색과만 대비되고 바깥 배경과는 섞이면 경계가 약해집니다. 반대로 양쪽 모두 강하게 두르면 모든 컨테이너가 선으로 둘러싸여 화면이 조각납니다.

테두리·표면색·그림자 중 무엇으로 경계를 만들지 먼저 정하세요. 경계가 필요한 이유가 정보 그룹인지, 클릭 가능한 표면인지, 단지 장식인지에 따라 같은 색을 쓸 필요가 없습니다.

제목·본문·버튼·이미지가 각자 다른 시작선을 가지면 작은 차이도 화면을 불안하게 만듭니다. 그리드, 텍스트 열, 이미지 모서리 중 최소 하나를 공유하게 하면 요소 사이 관계가 빨리 읽힙니다.

정렬선을 많이 만드는 것이 목표는 아닙니다. 한 화면에 여러 축을 만들고 그 축을 설명하지 못하면 오히려 복잡해집니다. 어떤 정보가 함께 읽혀야 하는지 먼저 정한 뒤 정렬선을 줄이세요.

색상환에서 멀리 떨어진 색이라도 명도가 비슷하면 화면에서는 비슷한 무게로 보일 수 있습니다. 반대로 색이 비슷해도 명도 차이가 크면 위계를 만들 수 있습니다. 색상만 보지 말고 흑백으로 변환해 정보의 순서가 남는지 확인하는 이유입니다.

명도 차이는 장식의 문제가 아니라 의미의 문제입니다. 상태·경고·선택·비활성화를 색 하나로만 구분하지 말고 텍스트, 아이콘, 패턴, 위치와 함께 설계해야 합니다.