주니어와 시니어의 차이, '예외 케이스' 기획의 한 끗: 데이터 없음과 에러 화면 설계
주니어와 시니어의 차이, '예외 케이스' 기획의 한 끗: 데이터 없음과 에러 화면 설계
신입 기획자와 숙련된 기획자의 기획서를 비교하면, 가장 눈에 띄는 차이는 대개 “잘 되는 화면(Happy Path)”이 아닙니다.
데이터가 없거나 문제가 생긴 순간을 얼마나 촘촘하게 설계했느냐가 진짜 차이를 만듭니다.
사용자가 서비스에서 가장 크게 불쾌감을 느끼는 순간은 “막혔다”를 체감하는 때입니다. 이 위기의 순간을 이탈이 아니라 다음 행동으로 바꾸는 방법, 오늘은 Empty와 Error 상태를 “기획자의 언어”로 정리해봅니다.
1) 왜 Empty와 Error가 ‘시니어의 한 끗’인가?
Happy Path는 대부분 팀이 “자연스럽게” 그립니다. 문제는 예외 상황입니다. 예외는 보통 다음과 같이 방치됩니다.
- “데이터가 없습니다” 한 줄로 종료
- “알 수 없는 오류”로 사용자를 미궁에 봉인
- 404/500에 버튼 없이 벽만 세움
시니어의 기획은 여기서 갈립니다. 빈 화면을 “공백”으로 보지 않고 가이드 영역으로 보고, 에러를 “사과문”이 아니라 복구 동선으로 설계합니다.
핵심 관점: 예외 화면은 UI가 아니라 “협업의 언어”입니다. 기획서에 이게 있으면 개발자는 “이 사람, 변수를 통제하고 있네”라고 느낍니다.
2) 사용자를 방치하지 않는 Empty State 설계
Empty State는 “아무것도 없음”이 아니라 “지금 무엇을 해야 하는지 알려주는 안내판”입니다.
2-1. 주니어 vs 시니어: 한 줄의 차이
- 주니어: “데이터가 없습니다.”
- 시니어: “아직 등록한 카드가 없어요” + “카드 등록하기(CTA)” + “왜 비었는지(상황)”
2-2. Empty State 3요소(이대로 넣으면 완성)
- 상황 설명: 왜 비었는지, 사용자가 이해할 언어로
- 시각적 완충: 아이콘/일러스트(필수는 아니지만 효과가 큼)
- 다음 행동(CTA): 사용자가 즉시 빠져나갈 문(Primary action)
2-3. Empty 카피(문구) 예시
- 기본 Empty: “아직 저장된 항목이 없어요.” / “첫 항목을 추가해 볼까요?”
- 검색 결과 없음: “검색 결과가 없어요.” / “철자를 확인하거나 다른 키워드를 시도해 보세요.”
- 필터로 인한 Empty: “현재 필터 조건에서 보이는 항목이 없어요.” / “필터 초기화”
2-4. CTA 설계 원칙(딱 두 개만)
- Primary CTA는 1개: “카드 등록하기”처럼 가장 중요한 행동 하나만 선명하게
- Secondary는 ‘탈출구’: “둘러보기”, “필터 초기화”, “샘플 데이터 보기”처럼 막힘을 풀어주는 선택지
3) 당황한 사용자를 달래는 Error State 설계
에러는 사용자의 잘못이 아닌 경우가 많습니다. 그런데 화면이 “너 잘못했어” 톤이면 이탈이 빨라집니다. (사용자는 죄인이 아니라 고객입니다. 🧾)
3-1. 주니어 vs 시니어: ‘알 수 없는 오류’ 금지
- 주니어: “알 수 없는 오류가 발생했습니다.” 또는 404 코드만 노출
- 시니어: 이해 가능한 문장 + 해결책 + 복귀 동선(버튼)
3-2. 에러 유형을 3개로만 나누면 기획이 쉬워진다
- 복구 가능(Recoverable): 네트워크/일시 장애 → “다시 시도” + “이전 화면”
- 사용자 입력/검증(Validation): 폼 오류 → “필드 근처”에 구체적 안내
- 경로/시스템(System): 404/500/점검 → “홈으로” + “재시도” + “문의”
3-3. 에러 메시지 문장 구조(이거 하나로 대부분 해결)
무슨 일이 있었는지(What) + 왜인지(Why, 가능할 때) + 지금 할 수 있는 일(How)
- 예: “네트워크 연결이 불안정해요. 잠시 후 다시 시도해 주세요.”
- 예: “요청을 처리하지 못했어요. 다시 시도하거나 홈으로 이동할 수 있어요.”
3-4. 에러 화면 버튼 구성 추천
- Primary: 다시 시도(Retry)
- Secondary: 홈으로 / 이전 화면
- Optional: 고객센터 문의(링크), 상태 페이지(있다면)
3-5. “에러 코드”는 숨기되, 버리지 말기
사용자에게는 친절한 문장으로 안내하고, 운영/CS/개발을 위해 에러 ID는 “자세히 보기”로 제공하는 방식이 실무에서 안전합니다.
- 사용자 노출: “요청에 실패했어요. 다시 시도해 주세요.”
- 보조 정보: “오류 ID: 8F2A…” (복사 가능)
4) 피그마에서 예외 화면을 ‘재사용 가능한 시스템’으로 만드는 법
예외 화면은 “한 번 그리고 끝”이 아니라, 프로젝트 내내 반복됩니다. 그래서 피그마에서는 반드시 재사용 구조로 만들어야 합니다.
4-1. 추천 페이지/섹션 구조
- [Guide] Empty & Error 페이지를 따로 만들기
- 또는 하나의 페이지 안에 Section으로 구분
- Empty: Onboarding Empty / No Search Results / Filtered Empty
- Error: Network / 404 / 500 / Maintenance
4-2. 컴포넌트로 묶기(Variants 추천)
가능하면 Empty/Error 블록을 컴포넌트로 만들고, Variant 속성을 이렇게 잡아두면 기획서 작성 속도가 급상승합니다.
[Component] EmptyState
- Variant property: type = onboarding | no-results | filtered
- Variant property: action = primary-only | primary+secondary
[Component] ErrorState
- Variant property: type = network | validation | 404 | 500 | maintenance
- Variant property: action = retry | home | back | contact
4-3. 텍스트로 ‘조건’을 반드시 옆에 적기
그림만으로는 개발이 흔들립니다. 예외 화면은 특히 조건이 중요합니다.
[Trigger]
- When: GET /cards 응답 200, items.length === 0
- Then: EmptyState(onboarding) 노출
- CTA: "카드 등록하기" → /cards/new
[Trigger]
- When: 검색 query 결과 0건
- Then: EmptyState(no-results) 노출
- Suggest: 인기 검색어 5개 노출
5) 개발 전달용: Empty/Error 스펙 템플릿(복붙용)
5-1. Empty State 스펙 템플릿
[Empty State Spec]
- Screen/Area:
- Type: onboarding | no-results | filtered | other
- When(Trigger):
- Data condition:
- Title copy:
- Description copy:
- Visual: icon/illustration (있음/없음)
- Primary CTA: label / destination
- Secondary CTA: label / destination (optional)
- Analytics: impression / click events (optional)
- Accessibility: focus order / 스크린리더 문구(필요 시)
5-2. Error State 스펙 템플릿
[Error State Spec]
- Screen/Area:
- Error type: network | validation | 404 | 500 | maintenance
- When(Trigger): (HTTP status, timeout, permission, etc.)
- User message(What/How):
- Recovery:
- Primary: Retry(재시도) (가능/불가)
- Secondary: Home/Back
- Support: Contact link (optional)
- Data safety:
- 입력값 유지 여부(유지/초기화)
- 재시도 시 중복 요청 방지(버튼 disabled + loading)
- Error ID:
- 사용자에게 노출(숨김/표시)
- 복사 가능 여부
6) 실무 체크리스트(피그마에서 섹션으로 분리해서 정의)
✅ 검색 결과 없음 (No Search Results)
- 문구에 “검색어 확인” 가이드 포함
- 오타 가능성 대비: 추천 키워드/인기 검색어 제안
- CTA: “필터 초기화” 또는 “전체 보기”
✅ 서비스 첫 진입 (Onboarding Empty)
- “왜 비었는지”보다 “어떻게 시작하는지”를 더 강조
- 첫 액션을 하나로 좁히기(Primary CTA 1개)
- 필요하면 샘플 데이터/가이드 링크 제공
✅ 404 및 서버 오류 (System Error)
- 전문 용어 대신 쉬운 언어로 설명
- 복구 동선 확보: 홈으로, 다시 시도, 이전 화면
- 너무 과한 농담은 금지(사용자는 지금 화가 났을 수도 있음)
결론: 빈 화면이 서비스의 인상을 결정합니다
모든 것이 순조로울 때보다, 문제가 생겼을 때 얼마나 친절한지가 UX의 실력입니다.
오늘 여러분의 화면들 사이에 Empty 1장과 Error 1장을 추가해 보세요. 그 두 장이 “시니어의 한 끗”을 만들어 줍니다.
그리고 개발자의 질문이 줄어든 만큼, 여러분의 집중력은 늘어납니다. (집중력은 월급처럼 소중합니다.) 🧠
FAQ
Q Empty는 디자인 영역 아닌가요? 기획자가 꼭 해야 하나요?
A표현(일러스트/톤)은 디자인의 영역이지만, “언제 Empty가 뜨는지” “무슨 행동으로 빠져나가는지”는 로직이라 기획이 정의하는 편이 안정적입니다.
Q 일러스트가 꼭 있어야 하나요?
A필수는 아닙니다. 아이콘 1개만 있어도 충분히 지루함을 줄일 수 있습니다. 핵심은 “다음 행동(CTA)”입니다.
Q 에러 메시지에 404/500 같은 코드를 보여줘야 하나요?
A사용자에게는 쉬운 문장으로 안내하고, 운영을 위해 에러 ID는 보조 정보로 제공하는 방식이 안전합니다. 코드는 ‘설명’이 아니라 ‘디버깅 도구’인 경우가 많습니다.
Q Retry(재시도)는 언제 제공해야 하나요?
A네트워크/일시 장애처럼 복구 가능성이 있는 에러에서는 Retry가 효과적입니다. 반대로 권한/삭제/404처럼 구조적으로 해결이 안 되는 경우엔 Home/Back이 더 적절합니다.
Q “첫 진입 Empty”와 “검색 결과 없음 Empty”는 왜 나눠야 하죠?
A사용자 심리가 다릅니다. 첫 진입은 “어떻게 시작하지?”이고, 검색 결과 없음은 “내가 뭘 잘못했나?”입니다. 안내 문장과 CTA가 달라야 이탈이 줄어듭니다.