시각 디자인 규칙은 감각을 대체하지 않는다

#000000과 #FFFFFF는 강합니다. 배경과 텍스트의 대비를 만들기에는 쉽지만 화면 전체를 딱딱하고 피곤하게 만들기도 합니다. near-black, near-white로 한 발 물러나면 인터페이스의 온도가 부드러워집니다.

뉴트럴 컬러를 완전히 무채색으로 두면 브랜드 팔레트와 따로 노는 경우가 많습니다. 회색에 주 색상을 아주 조금 섞으면 화면 전체가 한 덩어리로 묶입니다. 다만 이것은 색감의 통일을 돕는 장치이지, 접근성 대비를 대신하지는 않습니다.

서로 다른 색이라도 명도가 같으면 흑백으로 바꿨을 때 구분되지 않습니다. 시각적 위계와 접근성은 색상명보다 명도 차이에서 먼저 무너집니다. 팔레트를 고를 때 “예쁜 색”보다 “서로 다른 역할로 읽히는가”를 먼저 봐야 합니다.

아이콘, 삼각형, 원형 버튼은 중앙 정렬을 해도 중앙처럼 보이지 않을 수 있습니다. 특히 한글은 영문보다 글자 면적이 커서 아이콘과 나란히 놓을 때 더 쉽게 어긋나 보입니다. 정렬값이 맞는 것과 눈에 맞는 것은 다릅니다.

막힐 때는 12px 24px처럼 가로를 세로의 두 배로 잡는 기본값이 안전합니다. 버튼은 글자를 담는 상자가 아니라 누를 수 있는 표면입니다. 좌우 공간이 부족하면 라벨이 숨을 쉬지 못하고 너무 넓으면 행동보다 장식처럼 보입니다.

카드 안에 카드가 들어갈 때 안쪽 반경은 대충 맞추면 어색합니다. 기본식은 간단합니다. 안쪽 반경 = 바깥 반경 − 두 요소 사이 간격. 작은 차이지만 이런 불일치가 쌓이면 화면은 설명하기 어려운 방식으로 아마추어처럼 보입니다.

모든 카드에 같은 그림자를 붙이면 공간감이 사라집니다. 광원에 가까운 요소는 그림자가 더 크고 흐려져야 하고 멀리 있는 요소는 다르게 보여야 합니다. 그림자는 장식이 아니라 깊이의 언어입니다.

배경이 복잡하면 전경은 단순해야 합니다. 전경이 복잡하면 배경은 물러나야 합니다. 복잡한 것 위에 복잡한 것을 얹는 디자인은 아주 잘하지 않으면 정보가 아니라 소음이 됩니다.

배경과 컨테이너의 대비가 과하면 카드가 화면에서 튀어나옵니다. Hobday는 다크 모드에서는 12% 이내, 라이트 모드에서는 7% 이내라는 기준을 제안합니다. 절대값은 맥락에 따라 바뀌지만 “카드를 돋보이게 하려고 배경과 너무 벌리지 말라”는 방향은 유효합니다.

여백, 정렬, 색, 그림자 라운드, 크기에는 이유가 있어야 합니다. 이유를 말할 수 없는 요소는 아직 결정되지 않은 요소입니다. 이 규칙은 다른 모든 규칙보다 강합니다.

crit의 관점: 규칙은 초안을 구하지만 취향을 만들지는 못합니다

이 글의 장점은 시각 디자인을 신비한 감각이 아니라 점검 가능한 결정으로 바꾼다는 점입니다. 화면이 어딘가 어색한데 이유를 찾지 못할 때, 순수 검정, 광학 정렬, 라운드 계산, 그림자 복사 여부를 확인하는 것만으로 많은 문제가 잡힙니다.

하지만 이 규칙들을 “좋은 디자인 공식”처럼 쓰면 바로 약해집니다. 안전한 규칙은 실패 확률을 낮출 뿐, 기억에 남는 화면을 만들지는 않습니다. 모든 화면이 near-black, 2배 패딩, 계산된 라운드, 얌전한 그림자만 따르면 깨끗하지만 평평한 결과가 나옵니다.

그래서 이 규칙은 시작점보다 검수 도구에 가깝습니다. 초안을 빠르게 정리하고 어색함의 원인을 찾고 팀 안에서 시각적 판단을 설명하는 언어로 쓰기 좋습니다. 반대로 이미 강한 의도와 명확한 브랜드 톤이 있는 화면이라면, 규칙을 깰 이유도 충분히 생깁니다.

생각할 질문은 이것입니다.

• 지금 화면의 어색함은 감각 문제인가, 설명되지 않은 규칙 문제인가
• 우리 팀의 디자인 시스템은 광학 보정 같은 미세한 판단을 문서화하고 있는가
• 안전한 규칙을 지키느라 브랜드의 긴장감까지 지우고 있지는 않은가
• 이 규칙을 깨는 순간, 그 이유를 말할 수 있는가

Safe Rules는 디자이너를 대신 판단하지 않습니다. 대신 판단을 시작할 수 있는 바닥을 깔아줍니다. 좋은 규칙은 창의성을 막는 것이 아니라, 정말 깨야 할 부분이 어디인지 더 선명하게 보여줍니다.