배지

정의

배지는 어떤 요소 위에 겹쳐 얹는 아주 작은 표식입니다. 대표적으로 안 읽은 알림 개수를 숫자로 보여주거나, 새 소식이 있음을 작은 점 하나로 알리거나, 목록 항목 옆에 NEW 같은 짧은 라벨을 달아 상태를 알립니다. 핵심은 배지가 스스로 독립해 있는 요소가 아니라 언제나 다른 무언가에 딸려서 그 위에 붙는다는 점입니다. 그래서 배지는 보통 아이콘의 오른쪽 위 모서리처럼 눈에 잘 띄는 자리에 놓이고, 본문 흐름을 방해하지 않을 만큼 작게 유지됩니다. 붙는 대상이 있어야 의미가 생긴다는 점에서, 배지는 홀로 쓰이는 라벨과는 성격이 분명히 다릅니다.

왜 중요한가

배지가 중요한 이유는 화면 전체를 다시 그리지 않고도 상태 변화를 즉시 알려 줄 수 있기 때문입니다. 사용자는 메뉴를 하나하나 열어 보지 않아도 어디에 새 소식이 있는지 배지만 훑고 바로 파악합니다. 특히 안 읽은 개수를 보여 주는 숫자 배지는 사용자가 다음에 무엇을 확인해야 할지 자연스럽게 안내하는 강력한 신호가 됩니다. 다만 배지는 눈길을 강하게 끌어당기는 요소라, 존재만으로도 사용자에게 미묘한 압박과 확인 욕구를 만듭니다. 그래서 어디에 배지를 다느냐 하는 결정은 단순한 장식이 아니라 사용자의 주의를 어디로 보낼지 정하는 설계 판단에 가깝습니다. 잘 쓰면 길잡이가 되지만, 함부로 쓰면 사용자를 계속 재촉하는 소음이 됩니다.

흔한 실수

• 배지를 여기저기 남발하는 경우입니다. 모든 메뉴에 빨간 점과 숫자가 붙어 있으면 사용자는 무엇이 정말 급한지 구분하지 못하고, 결국 배지 전체를 배경처럼 무시하게 됩니다. 신호가 너무 많으면 그 어떤 신호도 신호가 아니게 됩니다.
• 큰 숫자를 그대로 노출해 배지 폭이 제멋대로 늘어나는 경우입니다. 1024 같은 값이 들어오면 배지가 옆 요소를 밀어내며 레이아웃이 흔들리고, 화면마다 아이콘 위치가 미묘하게 달라져 정돈된 인상이 무너집니다.
• 숫자만 덩그러니 두어 무엇의 개수인지 알 수 없게 하는 경우입니다. 맥락 없이 떠 있는 숫자는 안 읽은 메시지인지 오류 건수인지 사용자가 매번 짐작해야 하고, 결국 배지가 정보를 주기보다 궁금증만 남기게 됩니다.

실무 팁

• 숫자가 커지면 9+ 나 99+ 처럼 상한을 정해 줄여 표기하세요. 폭이 일정하게 유지되어 레이아웃이 흔들리지 않고, 정확한 수보다 대략 많다는 사실이 더 중요할 때가 많습니다.
• 배지는 정말 주목이 필요한 곳에만 아껴서 쓰세요. 단순한 존재 표시는 점 하나로, 개수가 중요할 때만 숫자로 구분하면 신호의 강약이 살아나 사용자가 급한 것부터 봅니다.
• 배지 색은 배경과 충분히 대비되는 강조색으로 고르고, 그 안의 글자도 읽히도록 대비를 확인하세요. 작을수록 명료해야 제 역할을 하고, 색만으로 뜻을 전하지 않도록 숫자나 라벨을 함께 두는 편이 안전합니다.

관련 개념