검색 결과 0개와 검색 실패를 같은 화면으로 만들지 않기

찾은 것이 없는지, 아직 못 찾았는지부터 구분합니다

검색창 아래에 아무 카드도 없으면 결과가 없는 것인지 조회가 실패한 것인지 알기 어렵습니다. 실제로 검색을 하지 않은 첫 화면까지 “0개”라고 적으면 모든 자료가 없는 것처럼 보일 수 있습니다. 미검색, 정상적인 0건, 조회 실패를 다른 상태로 설명해야 합니다.

예제는 가상 문구류 여덟 개를 브라우저 안에서 검색합니다. “나무”는 0건이고 “노트”는 여러 결과입니다. 실패 버튼은 오류 표시를 비교하려는 연습 상태이며 실제 네트워크 장애를 재현하는 기능은 아닙니다.

같은 빈 화면에도 다음 행동은 다릅니다

결과 영역의 세 가지 빈 상태
상태	현재 아는 것	다음 행동
아직 검색하지 않음	조건을 정하지 않음	입력 예와 전체 목록 경로
정상 0건	그 조건으로 찾은 항목이 없음	검색어·필터 수정, 조건 해제
조회 실패	결과 수를 확인하지 못함	재시도와 현재 입력 보존

조회 실패를 0개로 바꾸면 사용자는 데이터가 없는 것으로 이해하고 검색어를 계속 고칠 수 있습니다. 반대로 정상적인 0건에 “오류”라고 쓰면 같은 요청을 반복하게 만듭니다. 결과 수를 알 수 있는 상태인지부터 나누는 것이 문구 선택보다 먼저입니다.

무슨 조건의 결과인지 같은 자리에서 읽게 합니다

0건 메시지에는 검색한 말이나 적용한 분류를 다시 보여줄 수 있습니다. 다만 입력에 임의의 HTML이 들어와도 문서로 실행하지 않도록 텍스트로 표시해야 합니다. 사용자 내용을 분석 도구나 공개 주소에 불필요하게 남기는지도 별도로 확인합니다.

const query = input.value.trim();
const results = products.filter(product =>
  product.name.toLowerCase().includes(query.toLowerCase())
);
heading.textContent = `“${query}” 검색 결과 ${results.length}개`;

이 단순 예제는 배열의 이름에서 부분 문자열을 찾습니다. 실제 검색 엔진의 형태소·오타·순위 기능을 제공하지 않습니다. 빈 검색어는 따로 처리해 전체 목록을 보는 선택과 구분합니다. MDN의 filter는 조건을 통과한 항목의 새 배열을 만들며 없으면 빈 배열을 돌려주는 동작을 설명합니다.

0건 다음에 고칠 수 있는 범위를 보여줍니다

회복 경로를 구체적으로 쓰기
경로	예제의 동작	주의할 점
검색어 수정	나무를 노트로 바꿈	기존 입력을 지우지 않고 고칠 수 있음
조건 지우기	미검색 상태로 돌아감	지운 조건의 범위가 이름과 같음
전체 8개 보기	가상 목록 전체를 표시	다른 조건까지 몰래 변경하지 않음
재시도	같은 입력으로 실패 표시를 해제	성공 결과와 다시 구분

추천 검색어를 넣는다면 실제로 지원하는 자료나 분류로 연결합니다. 어떤 말이든 답이 있는 것처럼 임의의 인기 검색어를 만들지 않습니다. 결과가 없는 이유를 확인하지 못했다면 철자 오류나 품절 때문이라고 단정할 수도 없습니다.

결과 수가 바뀌어도 입력 흐름을 지킵니다

결과가 갱신될 때 수와 상태를 짧은 문장으로 전달할 수 있습니다. W3C의 상태 메시지 설명은 초점을 옮기지 않는 변화도 보조기술이 알 수 있는 관계를 다룹니다. 목록 전체를 매번 다시 읽게 하거나 키를 칠 때마다 결과로 초점을 빼앗지 않도록 실제 입력 흐름을 확인해야 합니다.

주소로 필터를 공유하는 화면이라면 화면의 선택과 조회 조건도 맞아야 합니다. 목록을 더 읽고 돌아가는 상태는 누적 목록과 위치 복원과 연결됩니다. 검색어 입력 오류를 처리하는 경로와 결과가 없는 경로는 같은 메시지 하나로 묶지 않습니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.