명암 단계

정의

명암 단계는 하나의 색을 밝기에 따라 여러 단계로 펼쳐 놓은 것입니다. 흔히 가장 연한 단계를 50, 가장 진한 단계를 900으로 두고 그 사이를 100, 200처럼 일정한 간격으로 나눕니다. 원래 색에 흰색을 섞어 밝게 만든 쪽을 틴트(tint), 검은색을 섞어 어둡게 만든 쪽을 셰이드(shade)라 부릅니다. 핵심은 한 색을 여러 밝기로 미리 준비해 두면, 같은 색 계열 안에서 상황에 맞는 농도를 골라 쓸 수 있다는 점입니다. 그래서 실무에서는 색을 하나의 점이 아니라 하나의 '스케일'로 정의합니다.

왜 중요한가

단계가 중요한 이유는 단일 색 하나만으로는 실제 UI를 만들 수 없기 때문입니다. 화면에는 아주 연한 배경, 은은한 구분선, 또렷한 글자, 강한 버튼처럼 밝기가 서로 다른 자리가 동시에 존재하는데, 이 모두를 색 하나로 감당할 수는 없습니다. 미리 정해진 단계가 있으면 각 자리에 어울리는 농도를 규칙에 따라 고르기만 하면 되어, 색을 쓸 때마다 즉흥적으로 계산하지 않아도 됩니다. 이는 화면을 만드는 속도를 높일 뿐 아니라, 여러 사람이 함께 작업해도 색이 제각각으로 흩어지지 않게 막아 줍니다. 잘 짜인 밝기 스케일은 화면 전체의 톤을 하나로 묶어 주고, 나중에 브랜드 색을 바꿔야 할 때도 스케일 전체를 한 번에 갈아 끼울 수 있게 해 줍니다.

흔한 실수

• 필요할 때마다 색을 즉석에서 밝게 어둡게 조절해 쓰는 경우입니다. 규칙 없이 만든 농도들이 화면마다 쌓이면 비슷하지만 미묘하게 다른 색이 수십 개로 늘어나, 통일감도 잃고 관리도 불가능해집니다.
• 단계 사이의 밝기 간격을 눈으로 대충 잡는 것입니다. 사람 눈은 밝은 쪽과 어두운 쪽의 변화를 다르게 느끼기 때문에, 숫자만 균등하게 나누면 어떤 구간은 거의 같아 보이고 어떤 구간은 확 튀어 계단이 고르지 않게 됩니다.
• 필요 이상으로 많은 단계를 만드는 것입니다. 50부터 900까지 촘촘히 갖춰 놓아도 실제로 쓰는 단계는 몇 개뿐인 경우가 많아, 안 쓰는 단계가 늘어나면 오히려 어떤 것을 골라야 할지 헷갈립니다.

실무 팁

• 색은 하나의 값이 아니라 스케일로 정의하세요. 배경에는 연한 톤(50~100), 테두리에는 중간 톤(200~300), 텍스트와 버튼에는 진한 톤(600~800)이 필요하다는 것을 기준으로 삼으면, 각 요소에 어떤 단계를 쓸지 고민 없이 정할 수 있습니다.
• 단계를 만들 때 색상은 고정하고 채도와 명도만 규칙적으로 조절하세요. 색상이 흔들리면 밝은 단계와 어두운 단계가 서로 다른 색처럼 보여 한 가족이라는 느낌이 깨집니다.
• 진한 단계와 연한 단계를 글자와 배경으로 짝지을 때는 대비 기준을 통과하는지 꼭 확인하세요. 단계가 촘촘하면 인접한 두 단계끼리는 대비가 부족할 수 있습니다.

관련 개념