빈 화면과 오류 화면도 설계해야 하는 이유

쇼핑몰 앱을 막 오픈한 대표님이 처음 가입해 보고 당황하셨습니다. 주문 내역 메뉴를 눌렀더니 하얀 화면만 나왔습니다. 고장인지, 아직 주문이 없어서인지 알 수 없었습니다.

화면설계에는 주문이 다섯 건쯤 쌓인 예쁜 목록만 그려져 있었습니다. 주문이 하나도 없을 때 무엇을 보여 줄지는 누구도 정하지 않았습니다. 개발사는 그냥 아무것도 그리지 않았습니다.

새로 가입한 사람은 모두 이 하얀 화면을 가장 먼저 봅니다. 서비스의 첫인상이 기획되지 않은 화면에서 만들어진 셈입니다.

핵심은 화면 하나에 상태가 여러 개라는 것입니다. 내용이 있을 때뿐 아니라 비어 있을 때, 불러오는 중일 때, 오류가 났을 때 무엇을 보여 줄지 화면설계에서 함께 정해야 합니다. 정하지 않은 상태는 개발자가 임의로 만들게 되고, 대개 가장 밋밋한 모습으로 나옵니다.

화면마다 확인할 네 가지 상태

목록이나 데이터를 보여 주는 화면이라면 적어도 아래 네 상태를 떠올려 봅니다.

모든 화면을 네 장씩 그릴 필요는 없습니다. 비슷한 화면끼리 묶어 공통 규칙을 한 장으로 정하고, 특별한 화면만 따로 그리면 됩니다.

빈 화면은 다음 행동을 알려 주는 자리입니다

빈 화면을 「내용 없음」 한 줄로 처리하면 사용자는 거기서 멈춥니다. 기획자는 빈 화면을 다음 행동으로 이어 주는 자리로 봅니다.

• 주문 내역이 비어 있으면 「아직 주문이 없습니다」와 함께 인기 상품으로 가는 버튼을 둡니다.
• 검색 결과가 없으면 검색어를 바꿔 보라는 안내와 비슷한 분류를 보여 줍니다.
• 찜 목록이 비어 있으면 찜하는 방법을 한 문장으로 알려 줍니다.

빈 화면이 두 종류라는 점도 기억해 두면 좋습니다. 처음이라서 비어 있는 것과, 조건에 맞는 것이 없어서 비어 있는 것은 안내가 달라야 합니다.

오류 화면은 사용자가 할 일을 적습니다

「오류가 발생했습니다」라는 문장은 사용자에게 아무것도 알려 주지 않습니다. 오류 화면에는 무슨 일이 생겼는지와 지금 할 수 있는 일을 함께 적습니다.

• 인터넷 연결 문제. 연결을 확인하라는 안내와 다시 시도 버튼
• 로그인이 풀린 경우. 다시 로그인한 뒤 보던 화면으로 돌아오게 하기
• 권한이 없는 화면. 왜 볼 수 없는지와 돌아갈 곳
• 입력 오류. 어느 칸이 왜 틀렸는지 그 칸 바로 아래에 표시

특히 결제나 신청처럼 중간에 실패하면 불안한 화면은 「결제가 되었는지」를 꼭 알려 줘야 합니다. 이 문장 하나가 문의 전화를 크게 줄입니다.

화면 목록에 상태 칸을 하나 더합니다

가장 쉬운 방법은 화면 목록 표에 「비어 있음」과 「오류」 칸을 추가하는 것입니다. 칸을 채우다 보면 아직 정하지 않은 화면이 바로 드러납니다. 개발사도 이 칸을 보고 작업량을 더 정확히 잡을 수 있습니다.

빈 화면과 오류 화면은 개발 막바지에 몰아서 정하면 급하게 처리되기 쉽습니다. 메뉴 구조와 화면설계를 만들 때 상태까지 함께 적어 둔 기획서가 있으면, 처음 쓰는 사람도 문제가 생긴 사람도 길을 잃지 않습니다.

자주 묻는 질문

화면설계에 빈 화면까지 그려야 하나요?

네, 적어도 규칙은 정해 두는 것이 좋습니다. 그리지 않으면 개발자가 임의로 처리하게 됩니다. 비슷한 화면은 공통 규칙 한 장으로 묶으면 작업량이 크게 늘지 않습니다.

오류 메시지 문구는 누가 정하나요?

기획 단계에서 정하는 것이 좋습니다. 개발자는 기술적인 원인을 그대로 적기 쉬워서 사용자가 이해하기 어려운 문장이 나옵니다. 사용자가 할 수 있는 일을 함께 적는 것이 원칙입니다.

불러오는 중 화면도 따로 설계해야 하나요?

대부분은 공통 모양 하나로 충분합니다. 다만 오래 걸릴 수 있는 화면, 예를 들어 결제 처리나 파일 올리기는 기다리는 동안 무엇을 안내할지 따로 정해 두어야 사용자가 화면을 닫지 않습니다.