배너

제품이 사용자에게 먼저 말을 걸어야 하는 순간이 있습니다. 결제 카드가 만료됐다거나, 이번 주말에 서비스를 멈추고 점검한다거나, 체험 기간이 사흘 남았다는 소식은 사용자가 요청하지 않았어도 제품이 알려야 합니다.

문제는 알릴 자리가 마땅치 않았다는 것입니다. 토스트는 3초쯤 떴다 사라지는 알림이라 그 순간 화면을 보고 있지 않으면 소식이 통째로 증발합니다. 결제 실패 안내를 토스트로 띄운 팀이 겪는 일이 늘 같습니다. 사용자는 문서를 쓰느라 다른 탭에 있었고, 한 달 뒤 계정이 잠긴 다음에야 고객센터에 연락해 "그런 안내를 받은 적이 없다" 고 말합니다. 실제로 안내는 떴지만 아무도 보지 못한 것입니다.

반대쪽 끝에는 모달이 있습니다. 뒤 화면을 어둡게 덮고 답하기 전까지 다른 일을 못 하게 막는 창입니다. 결제 안내를 이걸로 띄우면 못 볼 일은 없지만, 매번 하던 작업을 끊고 창을 닫게 만드니 사용자가 내용을 읽지 않고 닫는 버릇부터 들입니다.

배너는 그 사이를 메우려고 만든 자리입니다. 작업을 막지 않으면서 화면에 계속 남아 있습니다. 사라지는 기준을 시간에서 상태로 바꾼 것이 핵심 차이입니다. 몇 초가 지났느냐가 아니라 그 문제가 아직 남아 있느냐로 표시 여부를 정합니다.

화면 최상단에 가로로 한 줄이 들어가고, 아래 내용 전체를 그만큼 밀어냅니다. 기존 화면 위에 겹쳐 띄우지 않고 자리를 실제로 차지하는 방식이라 아래 내용이 가려지지 않습니다.

한 줄 안에는 보통 네 가지가 들어갑니다.

1. 상태 표시 — 왼쪽의 아이콘과 배경색으로 심각도를 알립니다. 정보는 파랑, 주의는 노랑, 오류는 빨강을 쓰는 식으로 디자인 시스템에 미리 정해 둡니다. 색만으로 심각도를 전하면 색을 구분하기 어려운 사용자에게는 아무것도 전해지지 않으므로 아이콘과 문구를 함께 씁니다.
2. 문구 — 무슨 일이 일어났고 그대로 두면 어떻게 되는지를 한 문장으로 적습니다. "결제에 실패했습니다" 보다 "카드 승인이 거절돼 3일 뒤 계정이 읽기 전용으로 바뀝니다" 가 낫습니다. 뒤쪽 문장은 마감과 결과를 함께 담고 있어 사용자가 지금 움직일 이유가 됩니다.
3. 행동 버튼 — 문제를 해결하는 화면으로 바로 보냅니다. 카드 만료 안내라면 결제 수단 변경 화면으로 가는 버튼 하나면 충분합니다.
4. 닫기 버튼 — 사용자가 직접 치울 수 있게 합니다. 다만 결제 실패처럼 방치하면 서비스가 멈추는 안내에는 닫기를 달지 않기도 합니다.

닫은 뒤에 다시 뜰지를 반드시 정해 둡니다. 한 번 닫으면 영영 안 뜨게 하면 사용자가 실수로 닫은 순간 그 소식은 사라지고, 새로고침할 때마다 다시 뜨게 하면 같은 문장을 하루에 열 번 보게 됩니다. 보통은 이 세션 동안만 감추고 다음 접속에서 다시 띄우거나, 점검 공지처럼 기한이 있는 것은 그 기한이 지나면 스스로 사라지게 합니다.

동시에 두 개 이상 띄우지 않습니다. 두 줄이 겹치면 화면 위쪽 3분의 1이 공지로 덮이고, 그때부터 사용자는 그 영역 전체를 읽지 않고 건너뜁니다.

방치하면 사용자에게 손해가 생기고, 해결하려면 사용자가 무언가를 해야 하는 상황에 씁니다. 페이지덱에서 실제로 걸리는 자리는 다섯 가지입니다.

1. 결제 문제 — 카드 승인 실패나 만료 임박. 며칠 뒤 무엇이 제한되는지를 함께 적습니다.
2. 점검 예고 — 토요일 새벽 두 시부터 두 시간 동안 서비스가 멈춘다는 안내. 점검이 끝나면 저절로 내려가게 해 둡니다.
3. 체험 기간 만료 — 남은 날짜를 세어 보여 주고 요금제 선택 화면으로 보냅니다.
4. 제한된 상태 — 초대받은 문서를 읽기 권한으로만 열었을 때처럼, 지금 화면에서 할 수 없는 일이 있다는 사실을 미리 알립니다.
5. 환경 문제 — 지원이 끝난 브라우저로 접속했을 때 기능 일부가 동작하지 않는다는 안내입니다.

신기능 홍보에 쓰는 경우가 많은데 여기서부터 값이 떨어집니다. 사용자가 그 자리를 광고로 인식하는 순간 다음에 뜨는 결제 실패 안내도 같이 무시되기 때문입니다. 그 자리는 눈에 띄는 대신 한 번에 하나씩만 쓸 수 있는 예산에 가깝습니다.

"이건 토스트 말고 배너로 올려야 해요. 놓치면 결제가 끊깁니다."

사라지는 알림에 담기에는 결과가 무거우니 화면에 남는 자리로 올리자는 제안입니다.

"닫기 누르면 이번 세션만 숨기고 다음 접속에 다시 뜨게 했습니다."

한 번 닫았다고 영영 감추지는 않도록 조건을 정했다는 뜻입니다.

"지금 위에 두 줄 떠 있어요. 우선순위 정해서 하나만 남깁시다."

공지가 겹쳐 둘 다 안 읽히는 상태라 하나를 내리자는 말입니다.

페이지덱에서 이 논의가 가장 자주 붙는 자리는 결제 실패 안내였습니다. 처음에는 태오가 토스트로 붙여 두었는데, 석 달 동안 카드 만료로 계정이 잠긴 사용자 서른 명 중 스물여덟 명이 안내를 본 적 없다고 답했습니다. 민서가 화면 최상단으로 자리를 옮기고 문구에 남은 날짜와 잠금 결과를 넣자 잠기기 전에 카드를 바꾸는 비율이 크게 올랐습니다.

대신 규칙을 하나 만들었습니다. 이 자리에 무엇을 올릴지는 접근성 검토와 함께 민서가 최종 결정하고, 마케팅 공지는 올리지 않기로 했습니다. 현우가 새 기능 출시 안내를 올리고 싶어 했을 때도 제품 안 다른 자리를 찾았습니다.

눈에 잘 띄는 자리이니 중요한 안내를 여기 모아 두면 된다고 생각하기 쉽습니다. 실제로 화면 맨 위는 시선이 가장 먼저 닿는 곳이라 그렇게 보입니다. 그런데 같은 자리에 계속 무언가가 떠 있으면 사용자는 그 영역을 화면의 장식으로 학습합니다. 광고 영역을 눈으로 건너뛰는 것과 같은 일이 제품 안에서 일어납니다. 그렇게 되고 나면 정작 계정이 잠기기 사흘 전에 띄운 경고도 같은 속도로 넘어가고, 이 자리는 효과를 잃은 채 화면만 좁히게 됩니다.

닫기 버튼만 달아 두면 사용자가 알아서 치운다고 보는 것도 흔한 오해입니다. 치울 수 있으니 조금 성가셔도 괜찮다는 계산인데, 사용자는 내용을 읽고 닫는 것이 아니라 시야를 가리니 닫습니다. 스낵바처럼 되돌릴 기회를 함께 주는 알림과 달리 이 자리는 닫는 순간 아무 흔적도 남지 않습니다. 그래서 닫혀도 문제가 남아 있다면 다음 접속에 다시 띄우고, 같은 내용을 메일이나 설정 화면에도 남겨 둡니다.