빈 화면 설계, 검색·입력·결제 화면 규칙과 전환 흐름을 막히지 않게 만드는 법
온라인 쇼핑몰에서 마음에 드는 상품을 찾았는데 검색 결과가 하나도 나오지 않는 상황을 떠올려 보세요. 화면에 ‘결과 없음’이라는 문장만 덩그러니 있으면 사용자는 검색어를 바꿔야 할지, 서비스에 문제가 생긴 것인지 알기 어렵습니다. 빈 화면은 내용이 없는 장면이 아니라 사용자가 다음 행동을 결정해야 하는 순간입니다.
빈 화면 설계를 제대로 살펴보면 검색, 입력, 결제처럼 상태가 자주 바뀌는 화면도 함께 정리할 수 있습니다. 이 글을 읽으면 빈 화면을 상황별로 나누는 기준, 안내 문구와 버튼을 정하는 방법, 화면 전환에서 놓치기 쉬운 오류까지 알게 됩니다.
빈 화면 설계가 필요한 이유
화면 설계는 글자와 버튼을 배치하는 일에서 끝나지 않습니다. 사용자가 무엇을 보고, 어떤 행동을 하며, 행동 뒤에 화면이 어떻게 달라지는지까지 정해야 합니다. 특히 빈 화면은 정보가 부족한 상태이므로 일반 화면보다 설명과 다음 행동이 중요합니다.
예를 들어 ‘저장한 글이 없습니다’라는 문구만 보여 주는 화면과 ‘나중에 다시 읽고 싶은 글을 저장해 보세요’라는 문구 아래 저장 방법을 안내하는 화면은 사용성에서 큰 차이가 납니다. 앞의 화면은 현재 상태만 말하지만, 뒤의 화면은 사용자가 할 일을 알려 줍니다.
- 처음 비어 있는 상태: 아직 사용자가 아무 행동도 하지 않은 경우입니다. 저장하기, 상품 추가하기 같은 시작 버튼이 필요합니다.
- 검색 결과가 없는 상태: 행동은 했지만 조건에 맞는 결과가 없는 경우입니다. 검색어 수정이나 조건 초기화가 적절합니다.
- 오류로 불러오지 못한 상태: 데이터가 없다는 뜻이 아니라 일시적으로 가져오지 못한 경우입니다. 다시 시도와 오류 원인을 함께 알려야 합니다.
- 권한이 필요한 상태: 로그인이나 접근 권한 때문에 내용을 볼 수 없는 경우입니다. 필요한 조건과 이동 버튼을 분명히 보여 줍니다.
설계 전에 확인할 체크리스트
빈 화면을 만들기 전에 ‘왜 비어 있는가’를 먼저 적어 보세요. 같은 빈 화면처럼 보여도 원인이 다르면 안내 문구와 버튼도 달라집니다. 원인을 섞어 한 문장으로 처리하면 사용자는 문제를 스스로 추측해야 합니다.
- 사용자가 이 화면에 들어온 이유는 무엇인가?
- 비어 있는 원인은 처음 사용, 검색 실패, 삭제 완료, 오류 중 무엇인가?
- 사용자가 지금 할 수 있는 가장 useful한 행동은 무엇인가?
- 버튼을 누르면 어디로 이동하며, 이전 입력 내용은 유지되는가?
- 인터넷 연결이 끊겼을 때와 실제 데이터가 없을 때를 구분하는가?
- 휴대전화의 작은 화면에서도 문장과 버튼이 잘 보이는가?
문구도 상태에 맞춰 확인해야 합니다. ‘데이터가 없습니다’는 원인을 설명하지 못합니다. 대신 검색 결과가 없는 경우에는 ‘검색어를 줄이거나 다른 단어로 찾아보세요’처럼 바꿀 수 있습니다. 사용자가 직접 만든 목록이 비어 있다면 ‘첫 번째 목록을 만들어 보세요’처럼 시작 행동을 제시하는 편이 낫습니다.
상황별 화면 설계 비교
빈 화면의 품질은 그림의 예쁨보다 안내의 정확성에서 갈립니다. 아래 기준으로 상황을 비교하면 필요한 요소를 빠뜨리기 어렵습니다.
| 상황 | 사용자 마음 | 필요한 안내 | 주요 행동 |
|---|---|---|---|
| 처음 방문 | 무엇을 해야 할지 모름 | 기능의 쓰임과 시작 방법 | 만들기, 추가하기 |
| 검색 결과 없음 | 내 검색이 틀렸는지 궁금함 | 검색어와 조건을 바꾸라는 안내 | 다시 검색하기 |
| 삭제 후 | 정상적으로 처리됐는지 확인하고 싶음 | 삭제 완료 사실과 되돌릴 수 있는지 여부 | 목록으로 이동 |
| 불러오기 실패 | 서비스가 고장 났다고 느낌 | 잠시 후 다시 시도하라는 안내 | 다시 불러오기 |
검색 화면에서는 필터를 모두 적용한 뒤 결과가 없을 수 있습니다. 이때 검색어만 바꾸라고 하면 원인이 필터인지 알 수 없습니다. ‘선택한 지역과 가격 조건을 줄여 보세요’처럼 영향을 준 조건을 알려 주고, 조건을 한꺼번에 초기화하는 버튼도 제공하는 것이 좋습니다.
결제 화면은 빈 상태와 처리 중 상태를 특히 구분해야 합니다. 결제 수단 목록이 비어 있다면 결제 수단을 등록하거나 다른 방법을 선택하게 해야 합니다. 결제가 진행 중인데 화면이 비어 보이면 사용자가 여러 번 누를 수 있으므로 진행 중 표시, 중복 결제 방지 안내, 실패했을 때의 다음 행동을 함께 설계해야 합니다.
빈 화면을 설계하는 순서
- 상태를 목록으로 만든다. 정상, 비어 있음, 불러오는 중, 오류, 권한 없음, 완료 상태를 화면별로 적습니다. 한 화면에 최소 여섯 가지 상태가 생길 수 있다는 점을 놓치지 마세요.
- 상태의 원인을 한 문장으로 쓴다. ‘목록이 없음’보다 ‘아직 저장한 항목이 없음’처럼 원인과 대상을 구체적으로 적습니다.
- 사용자의 다음 행동을 하나 정한다. 버튼을 여러 개 나열하기보다 가장 중요한 행동을 앞에 둡니다. 보조 행동은 링크나 두 번째 버튼으로 낮춰 표현합니다.
- 화면 전환을 연결한다. 버튼을 누른 뒤 어느 화면으로 가는지, 뒤로 돌아왔을 때 입력값이 남는지, 완료 후 원래 화면이 갱신되는지를 확인합니다.
- 문구와 구성 요소를 실제 화면에서 시험한다. 긴 검색어, 긴 이름, 화면 확대, 느린 연결 상태를 넣어도 줄바꿈과 버튼 위치가 무너지지 않는지 봅니다.
상호작용 설계에서는 움직임도 상태를 설명하는 도구가 됩니다. 자료를 불러오는 동안에는 빈 화면 대신 짧은 대기 표시를 보여 주고, 완료되면 목록이 나타나게 할 수 있습니다. 다만 장식용 움직임이 너무 길면 사용자는 오류로 생각할 수 있으므로 기다리는 이유와 재시도 방법이 더 중요합니다.
자주 생기는 실수와 고치는 방법
문구만 있고 행동이 없는 경우
‘아직 내용이 없습니다’라는 안내 뒤에 아무 버튼도 없다면 사용자는 화면을 떠나야 합니다. 내용을 추가할 수 있는 화면이라면 ‘첫 항목 만들기’를 제공하고, 권한 문제라면 관리자에게 요청하거나 로그인하는 경로를 보여 주세요.
모든 상태를 같은 화면으로 처리하는 경우
검색 결과 없음과 서버 오류를 같은 그림과 문구로 표시하면 사용자는 검색어를 계속 바꾸거나 같은 버튼을 반복해서 누를 수 있습니다. 데이터가 정말 없는지, 불러오기에 실패했는지 상태 이름을 따로 관리해야 합니다.
버튼을 많이 넣는 경우
‘검색 수정’, ‘필터 초기화’, ‘처음으로’, ‘문의하기’를 모두 같은 크기로 배치하면 선택이 어려워집니다. 지금 문제를 가장 빨리 해결하는 행동 하나를 기본 버튼으로 정하고 나머지는 보조 선택지로 구분하세요.
화면 전환 뒤 상태를 잃는 경우
입력 화면에서 내용을 작성한 뒤 다른 화면으로 이동했다가 돌아왔는데 입력값이 사라지면 불편이 큽니다. 저장되지 않은 내용이 있는지 알리고, 이동 전에 확인을 받거나 임시 저장을 적용할지 정해야 합니다.
자주 묻는 질문
빈 화면에는 꼭 그림이 있어야 하나요?
그림은 분위기를 부드럽게 만들 수 있지만 반드시 필요한 요소는 아닙니다. 그림 때문에 안내 문구가 아래로 밀리거나 버튼이 작아진다면 원인과 다음 행동을 먼저 남기는 편이 좋습니다.
안내 문구는 얼마나 길어야 하나요?
사용자가 지금 상태와 다음 행동을 이해할 정도면 충분합니다. 제목은 짧게 쓰고, 필요한 설명은 한두 문장으로 나누세요. 전문 용어보다 ‘검색어를 바꿔 보세요’처럼 실제 행동을 적는 것이 효과적입니다.
빈 화면과 불러오는 화면을 어떻게 구분하나요?
불러오는 화면은 아직 결과가 정해지지 않은 상태이고, 빈 화면은 확인할 결과가 없는 상태입니다. 불러오는 동안에는 잠시 기다려 달라는 표시를 쓰고, 결과가 없을 때는 이유와 다음 행동을 알려야 합니다.
설계가 끝났는지는 어떻게 확인하나요?
각 상태에서 사용자가 ‘왜 비었는지’, ‘무엇을 할 수 있는지’, ‘행동 뒤 어디로 가는지’를 답할 수 있으면 기본 설계가 된 것입니다. 기획자와 디자이너, 개발자가 같은 화면을 보고 같은 동작을 설명할 수 있는지도 함께 확인하세요.