버튼 레이블

화면에 버튼을 놓는 일은 쉽지만 그 위에 무슨 말을 적을지는 늘 마지막으로 밀리는 결정이었습니다. 대개 개발이 끝날 무렵 누군가 "확인" 과 "취소" 를 넣고 마무리했습니다. 이 두 단어는 어느 화면에나 들어맞아 보였고, 어디에나 들어맞는다는 것이 곧 문제였습니다.

문서를 지우기 전에 뜨는 창이 대표적입니다. 위에는 "이 작업을 진행하시겠습니까" 가 적혀 있고 아래에는 확인과 취소가 나란히 있습니다. 여기서 취소는 삭제를 그만둔다는 뜻인지 창만 닫는다는 뜻인지 알 수 없고, 확인은 무엇을 확인한다는 것인지 말해 주지 않습니다. 사용자는 위 문장을 다시 읽어야 하고, 급하면 반반의 확률로 누릅니다.

고객센터로 들어오는 문의에는 이 자리에서 생긴 일이 꾸준히 섞여 있습니다. 지울 생각이 없었는데 지워졌다, 결제될 줄 몰랐다 같은 이야기입니다. 화면은 그대로 두고 버튼 위 두 글자만 바꿔도 문의가 줄어든다는 것이 알려지면서, 버튼에 적는 말을 따로 떼어 관리하기 시작했습니다.

버튼 레이블은 누르기 전에 결과를 미리 보여 주는 방식으로 작동합니다. 위에 있는 설명문이 상황을 알려 준다면 레이블은 그 상황에서 지금 손이 하려는 동작 하나를 말해 줍니다. 잘 적힌 레이블은 위 문장을 읽지 않고 버튼만 봐도 뜻이 통합니다. 제품 곳곳에 박힌 짧은 문구 전체를 마이크로카피라고 부르는데, 그중에서도 레이블은 누른 결과가 바로 벌어진다는 점에서 되돌리기가 가장 어려운 자리입니다.

실제로 지키는 규칙은 넷입니다.

1. 결과를 동사로 적습니다. 문서를 지우는 창이면 "확인" 이 아니라 "삭제" 입니다. 이 자리에 명사만 두면(예: "문서 삭제 여부") 누른 뒤 무엇이 달라지는지가 빠집니다.
2. 제품이 쓰는 말이 아니라 사용자가 쓰는 말을 고릅니다. 내부에서 문서를 내보내는 기능을 익스포트라고 불러 왔더라도 화면에는 "PDF로 저장" 이라고 적습니다.
3. 한두 단어에서 끝냅니다. "지금 바로 무료로 시작해 보세요" 는 버튼이 아니라 문장입니다. 길어지면 화면 폭이 좁은 기기에서 줄이 바뀌거나 잘립니다.
4. 나란히 놓인 두 버튼은 서로 다른 말을 씁니다. "저장" 과 "저장 안 함" 은 순간적으로 같아 보이지만 "저장" 과 "변경 내용 버리기" 는 헷갈리지 않습니다.

돈이나 삭제가 걸린 자리에는 규칙이 하나 더 붙습니다. 무엇이 얼마나 사라지는지를 레이블 안에 넣는 것입니다. "결제" 보다 "29,000원 결제", "삭제" 보다 "문서 3개 삭제" 가 낫습니다. 숫자가 들어가면 잘못 고른 사람이 누르기 직전에 멈춥니다.

레이블을 가장 먼저 손보는 자리는 되돌릴 수 없는 동작을 묻는 창입니다. 삭제, 권한 넘기기, 구독 해지처럼 누른 뒤에 되돌릴 수 없는 동작이 여기 모여 있습니다. 결제 화면도 같은 무게를 가집니다. 금액이 빠진 레이블은 결제인지 다음 단계인지 구분되지 않습니다.

가입과 폼 제출도 레이블이 결과를 바꾸는 자리입니다. 같은 폼 아래 "제출" 을 달았을 때와 "무료로 시작하기" 를 달았을 때 누르는 비율이 달라집니다. 다음 행동을 권하는 이런 문구를 마케팅 쪽에서는 행동 유도 문구라고 부릅니다. 광고 배너의 그것은 누르게 만드는 것이 목적이고, 제품 안 레이블은 누른 뒤 후회하지 않게 만드는 것이 목적입니다.

아직 아무 데이터도 없는 화면에 놓인 버튼도 이 자리에 들어갑니다. 목록이 비었을 때 화면에 남는 말을 빈 상태 문구라고 하는데, 가입 직후 처음 마주하는 화면이 대개 여기라 그 안의 버튼 하나가 첫 사용을 여는 문이 됩니다. 문제가 생겼을 때 뜨는 오류 메시지 안의 버튼도 마찬가지입니다. 무엇이 잘못됐는지만 알리고 버튼에는 "확인" 만 달아 두면 사용자는 읽고 창을 닫는 것 말고 할 수 있는 일이 없습니다. "다시 시도" 나 "카드 정보 바꾸기" 가 있어야 다음 걸음이 생깁니다.

입력 칸에 흐리게 적어 둔 예시 문구는 이 자리가 아닙니다. 그쪽은 플레이스홀더로 따로 다룹니다.

"이 버튼 레이블 '확인' 으로 되어 있는데 뭐가 확인되는 건지 모르겠어요."

위 문장을 읽어야만 뜻이 통하는 상태라는 지적입니다.

"삭제 버튼에 개수 넣어 주세요. 몇 개 지워지는지 보이게요."

되돌릴 수 없는 동작이니 누르기 전에 한 번 멈추게 하자는 요청입니다.

"레이블만 '무료로 시작하기' 로 바꿔서 이번 주 지표 비교해 볼게요."

화면은 그대로 두고 문구 하나만 바꿔 효과를 재 보겠다는 말입니다.

페이지덱에서 문서 일괄 삭제 기능을 낼 때 이 논의가 한 번 있었습니다. 민서가 만든 첫 시안에는 "이 작업을 되돌릴 수 없습니다" 아래에 확인과 취소가 있었습니다. 지현이 지난 분기 문의 목록을 꺼내 지울 생각이 없었다는 문의가 열한 건이라고 알려 주자, 민서가 레이블을 "문서 3개 삭제" 와 "그대로 두기" 로 바꿨습니다. 개수는 선택한 만큼 자동으로 들어가게 태오가 붙였습니다.

바뀐 것은 문구 두 개뿐이지만 이 결정에는 셋이 다 들어갔습니다. 개수를 문구에 넣으려면 화면이 그 숫자를 들고 있어야 하기 때문입니다.

레이블을 다 쓴 화면에 마지막으로 얹는 장식으로 여기는 경우가 가장 흔합니다. 버튼은 이미 자리를 잡았고 글자만 채우면 되는 것처럼 보이니 그렇게 생각하기 쉽습니다. 하지만 위의 개수 표시처럼 레이블이 결정되면 화면이 들고 있어야 할 데이터가 달라지고, 반대로 화면을 다 만든 뒤에는 넣을 수 있는 말이 이미 정해진 폭 안으로 줄어듭니다. 그래서 문구를 마지막에 채우는 팀은 결과를 설명하는 말 대신 짧고 안전한 "확인" 으로 돌아가고, 같은 문의가 다음 분기에도 그대로 들어옵니다.

짧을수록 좋다는 말을 글자 수 경쟁으로 읽는 오해도 있습니다. 짧게 쓰라는 기준이 널리 알려져 있으니 두 글자면 더 낫다고 여기게 됩니다. 실제 기준은 길이가 아니라 결과가 드러나는지입니다. "삭제" 로 결과가 드러나면 그대로 두고, "문서 3개 삭제" 여야 드러나면 그쪽이 맞습니다. 길이만 줄이다 보면 가장 짧은 말이 가장 뜻이 없는 말이 됩니다.