초보자가 빈 상태 처리를 놓치기 쉬운 이유

빈 상태(empty state)는 개발 중에는 거의 안 보인다. 로컬 데이터는 충분하니까 빈 상태가 발생할 일이 드물기 때문이다. 하지만 실제 운영 중에 데이터가 없는 상황은 얼마든 생길 수 있다.

현재 상태 파악

먼저 목표를 정한다. "이 페이지가 비었을 때 뭘 보여주려고 했는가"를 명확히 한다. 아무것도 표시하지 않을 건가, 안내 문구를 보여줄 건가, 아니면 특정 액션을 유도할 건가. 이걸 정해둬야 다음 단계로 나아갈 수 있다.

메타데이터부터 확인

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
npm run build

페이지 소스의 title과 description을 본다. 빈 상태일 때 페이지 자체의 제목과 설명이 맞는가. SEO 관점에서도 빈 상태 페이지의 메타데이터는 신경써야 한다.

canonical 태그와 렌더링 조건

canonical이 제대로 설정되었는지 본다. 프론트엔드 코드에서 "데이터가 없으면 기본값을 보여준다"는 로직이 있다면, canonical도 그에 맞춰 설정되어야 한다. 예를 들어 필터가 적용된 빈 결과 페이지라면, canonical도 그 필터를 포함한 URL이어야 한다.

빌드 후 실제 화면 확인

로컬에서 개발자 도구로 DOM을 수정해서 데이터를 비운 상태를 만들어본다. 또는 API 응답을 가짜 응답으로 바꿔본다. 이렇게 빈 상태가 나타났을 때 정말 원하는 화면이 보이는지 확인한다.

기록해두기

빈 상태 처리를 어떻게 했는지 주석으로라도 남겨둔다. "여기서 데이터가 없으면 기본값을 보여준다" 같은 메모는 나중에 같은 문제가 나올 때 빨리 해결하는 데 도움이 된다.