디자이너의 아트보드는 대개 이상적인 상태를 그립니다. 데이터가 가득 차 있고, 네트워크는 빠르고, 사용자는 실수하지 않는 화면입니다. 그러나 실제 사용자가 제품에서 처음 마주하는 것은 아무것도 없는 빈 화면(Empty State)이고, 가장 감정이 격해지는 순간에 마주하는 것은 에러 화면(Error State)입니다. 이런 엣지 케이스야말로 제품의 인상을 결정하는 진짜 무대입니다.
1. 왜 엣지 케이스가 경험을 만드는가
온보딩 직후의 사용자는 아직 제품에 아무런 애착이 없습니다. 이때 만나는 빈 화면이 그저 하얀 공백이라면, 사용자는 “여기서 뭘 해야 하지?”라는 질문에 스스로 답해야 합니다. 반대로 에러 화면은 사용자가 이미 좌절한 순간에 나타납니다. 심리학에서 말하는 절정과 마지막 순간이 기억을 좌우한다는 피크엔드 법칙을 떠올려 보면, 에러는 부정적 절정이 되기 쉬운 지점입니다. 즉 빈 화면은 첫인상을, 에러 화면은 가장 강렬한 기억을 만드는 셈입니다.
기능이 잘 작동할 때 좋은 경험을 주는 것은 어렵지 않습니다. 브랜드의 성격과 배려가 드러나는 것은 오히려 계획대로 되지 않는 순간입니다. 그래서 성숙한 디자인 조직일수록 해피 패스보다 엣지 케이스 시나리오에 더 많은 리뷰 시간을 씁니다.
2. 좋은 빈 화면과 에러 화면의 원칙
빈 화면은 공백이 아니라 시작점입니다
좋은 빈 화면은 세 가지를 담습니다. 첫째, 이 공간이 무엇을 위한 곳인지 알려주는 짧은 설명. 둘째, 채워졌을 때의 모습을 상상하게 하는 일러스트나 예시. 셋째, 지금 바로 누를 수 있는 명확한 행동 유도 버튼입니다. “아직 항목이 없습니다”라고 상태만 통보하는 화면과, “첫 프로젝트를 만들어 보세요”라고 다음 행동을 여는 화면의 차이는 큽니다.
에러 화면은 회복의 디자인입니다
에러 메시지의 기본 문법은 무엇이 잘못됐는지, 왜 그런지, 이제 무엇을 하면 되는지의 세 문장 구조입니다. 사용자를 탓하는 어투와 오류 코드만 나열하는 방식은 피하고, 재시도·되돌아가기·문의하기처럼 출구를 반드시 함께 제시해야 합니다. 유머는 가벼운 상황에서는 긴장을 풀어주지만, 결제 실패나 데이터 손실처럼 심각한 상황에서는 오히려 독이 됩니다.
상태만 통보하는 화면
“목록이 비어 있습니다”, “오류가 발생했습니다(코드 500)”. 사용자는 원인도 다음 행동도 알 수 없어 그대로 이탈합니다.
행동을 여는 화면
무엇을 위한 공간인지 설명하고, 예시를 보여주고, 재시도나 첫 행동 버튼으로 출구를 제시합니다. 막힌 순간이 시작점이 됩니다.
3. 브랜드들은 엣지 케이스를 어떻게 다루는가
구글 크롬은 인터넷 연결이 끊긴 오프라인 에러 화면에 작은 공룡 달리기 게임을 숨겨 두었습니다. 가장 짜증스러운 순간을 오히려 브랜드의 애교로 바꾼, 에러 화면 디자인의 대표적인 사례입니다. 깃허브의 404 페이지는 스타워즈풍 일러스트로 유명한데, 개발자 커뮤니티라는 브랜드 정체성을 길 잃은 순간에도 유지합니다.
슬랙은 새로 만든 채널의 빈 화면에서 “이 채널의 시작입니다”라는 안내와 함께 사람 초대, 설명 추가 같은 다음 행동을 바로 제안합니다. 빈 화면을 온보딩의 연장으로 쓰는 접근입니다. 에어비앤비 역시 위시리스트가 비어 있을 때 저장 기능이 어떻게 동작하는지 설명하며 탐색을 유도하는 것으로 알려져 있습니다. 공통점은 분명합니다. 이들은 빈 화면을 상태가 아니라 기회로 다룹니다.
4. 실무 적용 단계와 흔한 실수
주요 플로우마다 상태 목록을 만듭니다. 이상 상태 외에 첫 사용, 검색 결과 없음, 로딩, 오프라인, 권한 없음, 서버 오류까지 최소한의 상태 매트릭스를 그립니다.
각 상태에 목적을 부여합니다. 빈 화면에는 다음 행동 하나, 에러 화면에는 원인 설명과 출구 하나를 반드시 정의합니다.
문구를 UX 라이팅 원칙으로 다듬습니다. 무엇이·왜·어떻게의 세 문장 구조, 사용자를 탓하지 않는 어투, 브랜드 보이스의 농도를 상황 심각도에 맞춥니다.
디자인 시스템에 컴포넌트로 등록합니다. 일러스트, 제목, 설명, 버튼으로 이루어진 공통 패턴을 만들어 팀 전체가 같은 품질로 재사용하게 합니다.
실제 데이터로 검증합니다. 네트워크를 끊고, 계정을 새로 만들고, 검색어를 틀리게 입력하며 모든 상태를 직접 통과해 봅니다.
💡 실무 포인트 — 화면 설계 리뷰 때 “이 화면이 비어 있다면?”, “이 요청이 실패한다면?”이라는 두 질문을 체크리스트로 고정해 보세요. 디자이너가 상태를 먼저 정의해 두지 않으면, 엣지 케이스는 결국 개발 단계에서 기본 브라우저 에러와 흰 화면으로 방치됩니다.
가장 흔한 실수는 빈 화면과 에러 화면을 출시 직전에 한꺼번에 채워 넣는 것입니다. 이런 화면은 문구가 시스템 메시지처럼 딱딱해지고, 플로우와 단절된 막다른 길이 되기 쉽습니다. 엣지 케이스는 마감 작업이 아니라, 와이어프레임 단계부터 함께 그려야 하는 본편의 일부입니다.
마치며
제품의 품격은 모든 것이 순조로울 때가 아니라, 비어 있고 어긋난 순간에 드러납니다. 빈 화면은 사용자의 첫걸음을 안내하는 지도이고, 에러 화면은 좌절을 신뢰로 바꾸는 회복의 장치입니다. 다음 프로젝트에서는 이상적인 화면보다 먼저, 아무것도 없는 화면과 무언가 잘못된 화면을 그려 보시기 바랍니다. 경험의 완성도는 바로 거기서 시작됩니다.
Design Daily Life · 디자인의 일상을 기록합니다
한국에 온 외국인 친구가 있나요? 메뉴 번역·택시 요금·약국 카드가 한 앱에 있는 K-OREA를 알려 주세요.
Visiting Korea? K-OREA puts menu scanning, taxi fare guidance and a pharmacy card in one app. Get it on the App Store.