배지

배지가 없던 화면에서 새로 온 것이 있는지 알려면 직접 들어가 보는 수밖에 없었습니다. 메시지함을 열어 맨 위를 확인하고 아무것도 없으면 다시 나오는 동작을 하루에 열 번씩 반복했습니다. 헛걸음이 쌓이면 확인을 그만두게 되고, 그때부터는 온 것이 있어도 며칠씩 묵힙니다.

페이지덱이 문서 댓글 기능을 처음 내놓았을 때 이 문제가 드러났습니다. 수아가 "검토 의견을 달아 뒀는데 왜 답이 없냐고 고객이 묻는다" 는 말을 전해 왔는데, 댓글은 멀쩡히 달려 있었습니다. 받는 쪽이 그 문서를 다시 열어 볼 이유가 없었을 뿐입니다.

알릴 방법이 없지는 않았습니다. 토스트는 3초쯤 떴다 사라지는 알림이라 그 순간 화면을 보고 있지 않으면 전달되지 않습니다. 배너는 위쪽에 계속 걸려 있어 놓칠 일은 없지만 자리를 크게 차지해서 알릴 것마다 띄우면 본문이 밀립니다.

배지는 이 사이를 메웁니다. 자리를 거의 차지하지 않으면서 사용자가 처리할 때까지 사라지지 않습니다. 대신 담을 수 있는 정보가 숫자 하나나 점 하나뿐이라 무엇이 왔는지는 못 알립니다. 온 것이 있다는 사실만 전하는 대신 아무 때나 켜 두어도 화면이 망가지지 않는 쪽을 택한 셈입니다.

배지는 붙을 대상 하나와 거기에 얹을 값 하나로 이루어집니다. 대상은 아이콘, 메뉴 항목, 아바타처럼 이미 화면에 있는 요소이고, 값은 숫자이거나 점 하나입니다. 배지 자체는 누르는 요소가 아니라서 클릭은 대상이 받습니다.

값의 형태는 둘 중 하나입니다.

1. 숫자 배지 — 몇 개인지를 셉니다. 안 읽은 알림이 셋이면 3이 붙습니다.
2. 점 배지 — 개수 없이 무언가 있다는 사실만 알립니다. 설정 화면에 새 항목이 생겼다는 표시가 이쪽입니다.

고르는 기준은 개수가 다음 행동을 바꾸는지입니다. 안 읽은 메시지가 2개든 40개든 어차피 들어가서 읽는다면 숫자를 셀 이유가 없고, 결재 대기가 1건일 때와 12건일 때 일정이 달라지는 사람에게는 숫자를 줘야 합니다.

형태를 정한 뒤에는 네 가지를 더 정합니다. 빼먹으면 붙인 다음에 하나씩 터집니다.

1. 상한 — 보통 99까지 세고 그 위는 99+로 자릅니다. 1,284를 그대로 찍으면 배지가 옆 글자를 밀어내 메뉴 줄이 통째로 어긋납니다.
2. 0의 처리 — 셀 것이 없으면 배지를 아예 지웁니다. 0이라고 적힌 배지는 볼 것이 있다고 말하면서 없다고 말하는 셈입니다.
3. 줄어드는 조건 — 목록을 연 순간인지 항목을 연 순간인지에 따라 결과가 크게 다릅니다. 목록만 훑고 나간 사람에게서 댓글 세 건이 한꺼번에 사라지면 그 댓글은 다시 찾기 어렵습니다.
4. 갱신 시점 — 화면을 다시 열 때만 세는지, 서버에서 바뀔 때마다 밀어 주는지입니다. 앞쪽은 만들기 쉽지만 화면을 열어 둔 사용자에게는 몇 시간씩 옛 숫자가 남습니다.

배지는 색과 크기만으로 정보를 전하는 요소라 접근성이 바로 걸립니다. 빨간 동그라미를 못 보는 사람에게도 같은 사실이 닿아야 하므로, "안 읽은 알림 3개" 처럼 화면 낭독기가 읽을 문구를 따로 붙여 둡니다.

배지가 붙는 자리는 크게 셋입니다.

첫째는 들어가는 문입니다. 앱 아이콘, 내비게이션의 메뉴 항목, 탭처럼 다른 화면으로 넘어가는 요소에 붙여 그 안에 처리할 것이 있다고 알립니다.

둘째는 목록 안의 줄입니다. 문서 목록을 테이블로 늘어놓은 화면에서 행마다 댓글 수를 붙이면, 열어 보지 않고도 어디에 사람이 몰렸는지 보입니다.

셋째는 상태 라벨입니다. 개수 대신 이 항목이 어떤 상태인지를 짧은 단어로 붙입니다. 요금제 옆의 "베타", 이름 옆의 "관리자", 제목 옆의 "만료됨" 이 이쪽입니다. 앞의 둘은 처리할 것이 남았다고 재촉하고, 셋째는 분류해 알립니다.

세 자리 모두에서 지켜야 할 것은 개수입니다. 한 화면에 배지를 여럿 달면 아무것도 달지 않은 것과 같아집니다. 페이지덱 사이드바를 만들 때 민서가 알림·댓글·공유 요청 세 곳에 모두 빨간 점을 달았는데, 셋 다 늘 켜져 있어서 어느 것도 눈에 걸리지 않았습니다.

여러 화면에서 같은 규칙을 쓰려면 배지를 디자인 시스템에 부품으로 등록해 둡니다. 색과 크기뿐 아니라 상한과 0의 처리까지 한 군데에 적습니다.

"여기는 숫자 말고 점으로 갈까요? 몇 개인지가 행동을 바꾸는 화면이 아니라서요."

개수를 세어 보여 줄 실익이 없으니 존재만 알리자는 제안입니다.

"앱 아이콘 배지는 3인데 들어가면 아무것도 없어요. 숫자 세는 쪽이 어긋난 것 같은데요."

서버가 센 값과 화면이 센 값이 서로 다르다는 버그 보고입니다.

"이건 배지가 아니라 칩이어야 해요. 눌러서 필터를 걸어야 하는 자리예요."

누를 수 있어야 하는 요소를 누르지 못하는 표시로 잘못 만들었다는 지적입니다.

페이지덱에서 안 읽은 댓글 배지를 붙일 때 세 사람이 각각 다른 것을 걱정했습니다. 민서는 사이드바가 좁아 두 자리까지만 들어간다며 상한을 99+로 잡자고 했고, 태오는 숫자를 실시간으로 밀면 문서를 열어 둔 사람마다 연결이 하나씩 더 붙는다며 30초마다 다시 세자고 했습니다. 지현은 숫자가 언제 사라지는지를 물었고, 셋은 항목을 연 순간에만 그만큼 줄이기로 정했습니다. 배지 하나가 폭과 갱신 주기와 읽음 처리 기준을 함께 정하는 일이라는 뜻입니다.

배지를 관심을 끄는 장치로 보는 경우가 가장 많습니다. 빨간 점을 달면 사용자가 눌러 보니 많이 달수록 자주 들어올 것 같다는 생각은 자연스럽습니다. 실제로는 반대입니다. 눌렀는데 볼 것이 없는 경험이 몇 번 쌓이면 사용자는 그 색을 무시하는 법을 배웁니다. 마케팅 문구와 처리할 일을 같은 배지에 섞으면 두 달쯤 뒤에는 아무도 누르지 않는 화면이 되고, 정작 급한 알림이 생겼을 때 쓸 수단이 남지 않습니다.

배지가 사라진 것을 사용자가 내용을 읽었다는 뜻으로 받아들이는 오해도 흔합니다. 화면에서 표시가 없어졌으니 전달이 끝났다고 보기 쉽습니다. 배지가 말해 주는 것은 읽음 처리 조건을 충족했다는 사실뿐이고, 그 조건은 목록을 열었는지 항목을 열었는지 같은 기계적인 기준입니다. 이걸 읽었다는 근거로 삼으면 "분명히 알렸는데 못 봤다고 한다" 는 상황이 계속 생깁니다.