빈 상태 문구

화면을 만들 때 머릿속에 먼저 떠오르는 것은 내용이 들어찬 상태입니다. 문서 목록에 문서가 열 몇 개 쌓여 있고 알림함에 알림이 여러 건 들어온 그림입니다. 그런데 사용자가 맨 처음 보는 화면은 그 반대입니다. 가입하고 들어온 순간 목록에는 아무것도 없고, 만드는 쪽은 그 상태를 오래 들여다보지 않습니다. 그래서 그 자리에는 "데이터가 없습니다" 같은 한 줄만 남는 일이 많았습니다.

이 한 줄은 이미 눈에 보이는 사실을 되풀이할 뿐입니다. 목록이 비었다는 것은 사용자도 보고 있습니다. 알고 싶은 것은 무엇을 해야 저 자리가 채워지느냐인데 그 답이 화면 어디에도 없으니, 사용자는 버튼을 하나씩 눌러 보거나 창을 닫습니다.

페이지덱에서도 같은 일이 있었습니다. 지현이 가입 첫날의 화면 기록을 보니 무료 가입자 상당수가 빈 문서 목록 앞에서 30초쯤 머물다 나갔습니다. 그 화면에는 회색 아이콘 하나와 "아직 문서가 없습니다" 한 줄이 있었고, 새 문서 버튼은 오른쪽 위 구석에 다른 아이콘들과 섞여 있었습니다.

빈 상태 문구는 이 자리를 안내하는 자리로 바꾸려고 따로 이름을 붙인 것입니다. 보여 줄 내용이 아직 없을 때의 화면인 빈 상태는 예전부터 있었지만, 거기 들어가는 말을 화면을 다 그린 뒤 채워 넣는 부속이 아니라 먼저 정하는 설계 대상으로 다루기 시작한 것이 달라진 점입니다.

빈 상태 문구는 한 화면 안에서 세 가지에 차례로 답합니다. 지금 왜 비어 있는지, 이 자리에 무엇이 들어오는지, 그것을 넣으려면 무엇을 하면 되는지입니다.

1. 비어 있는 이유를 한 줄로 적습니다. 처음이라 비어 있는 것과 검색 조건에 맞는 것이 없어 비어 있는 것은 사용자가 다음에 할 일이 전혀 다릅니다.
2. 이 자리가 채워졌을 때의 모습을 한 줄로 그려 줍니다. "팀과 함께 고친 문서가 여기 모입니다" 는 아직 써 보지 않은 사람에게 이 화면의 쓸모를 알려 줍니다.
3. 그 자리에서 바로 누를 수 있는 버튼을 함께 둡니다. 누르면 무슨 일이 벌어지는지 알려 주는 문구인 버튼 레이블은 결과를 동사로 적습니다. "확인" 이 아니라 "첫 문서 만들기" 입니다.

세 줄을 다 넣는다고 화면이 길어지지는 않습니다. "아직 문서가 없습니다" 한 줄을 "팀과 함께 쓸 문서를 여기에 모아 둡니다" 와 "첫 문서 만들기" 버튼으로 바꾸면 글자 수는 비슷한데 화면이 하는 일이 달라집니다. 앞의 것은 사용자를 세워 두고 뒤의 것은 다음 칸으로 보냅니다.

빈 화면은 한 종류가 아니라 넷이고 자리마다 다른 말이 필요합니다. 하나를 만들어 네 자리에 돌려 쓰면 세 자리에서 엉뚱한 말이 됩니다.

1. 처음이라 비어 있는 화면입니다. 가입 직후 마주하는 목록이 여기 속합니다. 사용자가 제품을 아직 모르는 자리라, 새로 온 사람이 제품에 자리 잡도록 돕는 과정인 온보딩의 첫 칸을 사실상 이 화면이 맡습니다. 무엇을 하는 제품인지와 첫 행동 하나를 함께 담습니다.
2. 사용자가 비워 낸 화면입니다. 할 일을 다 처리했거나 알림을 다 읽어 목록이 0이 된 상태입니다. 여기는 안내가 아니라 확인의 자리라 "읽지 않은 알림이 없습니다" 처럼 끝났다는 사실을 분명히 적고, 굳이 새 행동을 권하지 않습니다.
3. 조건에 맞는 것이 없는 화면입니다. 검색이나 필터 결과가 0건인 경우입니다. 사용자는 이미 무언가를 찾는 중이므로 무엇으로 찾았는지 되짚어 주고 조건을 넓히는 길을 답니다. "'회의록' 으로 찾은 결과가 없습니다. 지난 30일로 걸어 둔 기간을 전체로 바꿔 보세요" 가 그런 형태입니다.
4. 불러오지 못한 화면입니다. 서버에서 목록을 받아오지 못한 경우이고, 이 자리는 무엇이 잘못됐고 무엇을 하면 되는지 알려 주는 오류 메시지가 맡습니다. 둘을 섞으면 사용자는 자기 문서가 사라진 줄로 압니다.

권한이 없어 보이지 않는 경우도 네 번째 쪽으로 다룹니다. 내용이 없는 게 아니라 볼 수 있는 것이 없는 상태라, 권한이 없다는 사실과 누구에게 요청하면 되는지를 함께 적습니다.

"가입하고 처음 보는 화면이 '문서가 없습니다' 한 줄이에요. 여기 문구부터 손봐야 할 것 같은데요."

첫 화면이 안내를 못 하고 있으니 이탈의 원인을 여기서 찾자는 제안입니다.

"검색 결과 0건일 때 문구가 첫 방문 화면이랑 똑같이 나와요. 케이스를 나눠 주세요."

한 문구를 네 자리에 돌려 쓰고 있다는 제보입니다.

"빈 상태 문구 바꿀 때 버튼까지 같이 넣어 주세요. 문장만 고치면 반쪽이에요."

안내와 그 안내를 실행할 수단을 한 화면에 두자는 요청입니다.

페이지덱에서는 이 문구를 민서와 지현이 함께 정합니다. 민서가 화면을 그리기 전에 그 화면이 빌 수 있는 경우를 먼저 적고, 경우마다 무엇을 알릴지 한 줄씩 채운 다음에 자리를 잡습니다. 순서를 뒤집으면 이미 정해진 폭 안에 말을 욱여넣게 되고, 그때 제일 먼저 잘려 나가는 것이 조건과 다음 행동입니다.

시안에 진짜 문장을 넣어 두는 것도 같은 이유입니다. "문구 들어갈 자리" 라고만 적힌 시안은 검토 회의를 그냥 지나갑니다. 그 화면이 읽히는지 아무도 확인하지 않은 채 넘어가고, 구현하는 태오가 물어볼 곳이 없으면 결국 기본값인 "데이터가 없습니다" 가 그대로 나갑니다.

빈 상태를 예외 화면으로 보는 것이 가장 흔한 오해입니다. 목록이 채워진 상태가 정상이고 비어 있는 상태는 잠깐 스쳐 가는 예외처럼 보이니 자연스럽게 나오는 판단입니다. 실제로는 반대입니다. 모든 사용자가 이 화면을 반드시 한 번은 보고, 그것도 제품을 계속 쓸지 말지 정하는 첫 몇 분에 봅니다. 채워진 화면은 남기로 한 사람만 봅니다. 이 자리를 맨 마지막에 채우는 팀은 가장 많은 사람이 보는 화면에 가장 적은 시간을 들이는 셈이 됩니다.

문장 대신 그림으로 채우면 된다는 오해도 있습니다. 화면이 허전해 보이니 일러스트 한 장을 크게 넣고 싶어집니다. 그림은 허전함을 덜어 주지만 다음에 무엇을 하면 되는지는 말해 주지 않습니다. 커다란 그림 아래 "아직 아무것도 없어요" 만 적힌 화면은 손이 더 들어갔는데 하는 일은 그대로입니다. 그림을 줄이고 그 자리에 한 줄과 버튼을 넣는 편이 값을 합니다.