CampusDownWiki
누적 인용 16,105한국어KO 2,699EnglishEN 11,091日本語JA 772中文ZH 1,543
캠퍼스다운 홈 ↗
한국어

빈 상태

⚙️ 공학·기술 작성 캠퍼스다운 위키 편집부 최종 수정
빈 상태는 목록, 장바구니, 검색 결과처럼 보여줄 데이터가 아직 없거나 사라진 화면을 말하며, 좋은 빈 상태는 이유를 알리고 다음에 할 행동을 안내해요.
목차
  1. 1. 빈 화면은 고장처럼 보인다
  2. 2. 좋은 빈 상태의 세 가지
  3. 3. 유형별 문구와 주의점
  4. 4. 자주 묻는 질문
  5. 5. 참고문헌

빈 화면은 고장처럼 보인다

아무것도 없는 하얀 화면을 보면 사람들은 '로딩 중인가, 고장났나, 내가 뭘 잘못했나'부터 생각해요. 닐슨(1994)이 강조한 시스템 상태의 가시성이 깨지는 순간이에요. 구글 머티리얼 디자인은 빈 상태를 처음 사용할 때, 사용자가 직접 비웠을 때, 검색이나 필터 결과가 없을 때, 오류일 때로 나눠요. 같은 '0개'라도 원인이 다르니 문구도 달라야 해요. 아직 불러오는 중이라면 빈 상태 대신 스켈레톤 스크린을 보여줘 두 상황을 구분하는 것이 좋아요.

좋은 빈 상태의 세 가지

캐플런(2021)은 빈 상태에서 세 가지를 하라고 정리했어요. 첫째, 왜 비어 있는지 시스템 상태를 알려요. 둘째, 이 공간에 무엇이 채워지는지 학습 단서를 줘요. 셋째, 바로 행동할 수 있는 경로를 제공해요. 노먼(2013)의 말로 하면 '기표'와 '피드백'을 주는 거예요. 포그(2009)의 행동 모델에서 이 버튼은 행동의 계기가 돼요. 예를 들어 비어 있는 즐겨찾기 화면에 '하트를 누르면 여기에 모여요'라는 설명과 '둘러보기' 버튼을 두는 식이에요. 그래서 빈 상태는 앱 온보딩의 가장 자연스러운 자리이기도 해요.

유형별 문구와 주의점

검색 결과가 없을 때는 검색어를 다시 보여주고 철자 확인, 필터 해제, 비슷한 추천을 제안하세요. 사용자가 할 일을 모두 끝내 비었다면 '모두 끝냈어요'처럼 성취를 축하하는 것이 좋아요. 오류로 비었다면 원인과 다시 시도 버튼을 보여주고 사용자 탓으로 돌리지 마세요. 티드웰과 동료들(2020), 후버와 버크먼(2011)의 패턴처럼 일러스트는 의미를 돕는 정도로만 쓰고, 작은 모바일 화면에서는 핵심 버튼이 첫 화면 안에 보여야 해요. 이 모든 것은 닐슨의 사용성 휴리스틱을 빈 화면에 적용한 것이에요.

자주 묻는 질문

빈 상태 화면에는 무엇을 넣어야 하나요?
왜 비어 있는지, 무엇이 채워질 공간인지, 지금 할 수 있는 다음 행동 버튼, 이 세 가지가 핵심이에요.
로딩 중 화면과 빈 상태는 어떻게 달라요?
로딩 중에는 스켈레톤이나 진행 표시를 쓰고, 정말 데이터가 없을 때만 빈 상태를 보여줘 둘을 구분해야 해요.

출처 검토일: 2026-10-27

참고문헌

  1. Kaplan, K. (2021, September 19). Designing empty states in complex applications: 3 guidelines. Nielsen Norman Group. 빈 상태에서 시스템 상태 알리기·학습 단서·다음 행동 경로를 제시하라는 지침이라, 설계 체크리스트로 참고하면 도움이 돼요.
  2. Google. (n.d.). Empty states. Material Design 2. 첫 사용·사용자가 비운 상태·오류 등 빈 상태 유형을 구분해, 상황별 문구를 정할 때 참고하면 도움이 돼요.
  3. Tidwell, J., Brewer, C., & Valencia, A. (2020). Designing interfaces: Patterns for effective interaction design (3rd ed.). O'Reilly Media. 인터페이스 패턴 모음집이라, 빈 화면을 다른 패턴과 연결해 설계할 때 참고하면 도움이 돼요.
  4. Hoober, S., & Berkman, E. (2011). Designing mobile interfaces. O'Reilly Media. 모바일 화면 패턴을 폭넓게 다뤄, 작은 화면에서 빈 상태를 배치할 때 참고하면 도움이 돼요.
  5. Nielsen, J. (1994). Usability engineering. Morgan Kaufmann. 시스템 상태의 가시성 등 기본 원칙을 담아, 빈 화면이 '고장'처럼 보이지 않게 할 때 참고하면 도움이 돼요.
  6. Fogg, B. J. (2009). A behavior model for persuasive design. In Proceedings of the 4th International Conference on Persuasive Technology (Article 40). ACM. 빈 화면의 버튼이 행동의 '계기'가 된다는 관점을 줘, 첫 행동 유도를 설계할 때 참고하면 도움이 돼요.
  7. Norman, D. A. (2013). The design of everyday things (Revised and expanded ed.). Basic Books. 기표와 피드백 개념을 설명해, 빈 화면에 무엇을 할 수 있는지 알리는 단서를 설계할 때 참고하면 도움이 돼요.

이 이론으로 쓴 레포트·자료

아직 이 이론만 따로 다룬 자료는 없지만, 캠퍼스다운 자료실에서 관련 레포트를 검색해 볼 수 있어요.

레포트 더 찾기 · '빈 상태' 검색 결과 보기 →

같이 보면 좋은 이론

최신 아티클전체보기 ›

대학생 공부·과제에 바로 쓰는 새 정보 글

이 문서는 2026년 10월 27일에 마지막으로 수정되었습니다. 내용은 널리 알려진 원전과 교과서를 바탕으로 정리했으며, 레포트에 인용할 때는 아래 참고문헌의 원전을 직접 확인하세요.