검색 화면 설계: 입력·오류 메시지·행동 유도, 이탈을 줄이는 흐름 만들기
온라인 쇼핑몰에서 원하는 운동화를 찾으려던 사람이 검색창에 제품명을 입력했는데 결과가 하나도 나오지 않았다고 가정해 보겠습니다. 화면에는 빈 목록만 있고, 왜 검색이 안 됐는지나 다음에 무엇을 해야 하는지는 보이지 않습니다. 사용자는 검색어를 다시 바꾸기보다 사이트를 닫을 수 있습니다.
검색 화면 설계는 검색창 하나를 예쁘게 배치하는 일이 아닙니다. 사용자가 무엇을 찾는지 파악하고, 입력부터 결과 확인과 다시 찾기까지의 흐름을 끊기지 않게 만드는 작업입니다. 이 글을 읽으면 검색 화면을 구성하는 순서, 결과가 없을 때의 안내, 필터와 정렬을 넣는 기준, 설계 후 확인할 항목을 알게 됩니다.
검색 화면 설계에서 먼저 정해야 할 것
화면을 그리기 전에 검색의 목적을 정해야 합니다. 상품을 찾는 서비스와 문서를 찾는 서비스는 같은 검색창을 써도 필요한 기능이 다릅니다. 상품 검색은 가격, 색상, 크기 같은 조건이 중요하고, 문서 검색은 제목과 작성자, 날짜가 더 중요할 수 있습니다.
- 누가 검색하는가: 처음 방문한 사람인지, 자주 쓰는 회원인지 살펴봅니다.
- 무엇을 찾는가: 정확한 이름을 입력하는지, 넓은 단어로 탐색하는지 구분합니다.
- 검색 뒤 무엇을 하는가: 결과를 읽는지, 상품을 비교하는지, 바로 결제하는지 확인합니다.
- 실패했을 때 필요한 도움은 무엇인가: 추천 검색어, 오탈자 수정, 필터 초기화 등이 될 수 있습니다.
예를 들어 도서 서비스라면 검색창의 안내 문구를 ‘책 제목, 저자, 출판사를 입력하세요’처럼 쓸 수 있습니다. 반대로 내부 자료실이라면 ‘문서 제목이나 업무명을 입력하세요’가 더 알맞습니다. 안내 문구가 실제 검색 대상과 다르면 사용자는 검색 범위를 추측해야 합니다.
검색 화면 구성 체크리스트
검색 화면은 보통 검색창, 검색 실행 방법, 결과 수, 결과 목록, 필터와 정렬, 상태 안내로 나눌 수 있습니다. 모든 기능을 한 화면에 넣기보다 사용자가 자주 쓰는 순서에 맞춰 배치해야 합니다.
- 검색창은 화면을 열었을 때 찾기 쉬운가?
- 입력한 검색어가 결과 화면에서도 확인되는가?
- 키보드의 입력 완료 동작이나 검색 버튼으로 실행할 수 있는가?
- 결과가 많을 때 필터와 정렬의 차이가 분명한가?
- 검색 중, 결과 있음, 결과 없음, 오류 상태가 구분되는가?
- 모바일 화면에서 검색창과 결과 항목이 지나치게 작아지지 않는가?
검색 버튼은 돋보기 모양만 두기보다 검색 기능임을 알아볼 수 있게 해야 합니다. 아이콘을 쓰더라도 입력창의 설명이나 접근 가능한 이름을 함께 제공하는 편이 좋습니다. 색만 바꿔 상태를 표시하면 색을 잘 구분하지 못하는 사용자에게 정보가 전달되지 않을 수 있습니다.
검색 결과 화면과 필터는 어떻게 나눌까
검색 결과 화면에서 자주 생기는 문제는 결과 목록보다 조건 선택 영역이 더 커지는 것입니다. 사용자는 결과를 보려고 왔는데 필터를 닫고 여는 일부터 해야 할 수 있습니다. 중요한 조건은 먼저 보여 주고, 드물게 쓰는 조건은 더보기 안에 배치하는 방식이 적절합니다.
필터는 결과의 범위를 좁히는 기능입니다. ‘무료 배송’, ‘2025년 이후’, ‘파란색’처럼 여러 조건을 함께 고를 수 있습니다. 정렬은 같은 결과를 어떤 순서로 볼지 정하는 기능입니다. ‘최신순’, ‘가격 낮은순’, ‘관련도순’은 동시에 하나만 선택하는 경우가 많습니다.
| 기능 | 사용자가 하는 일 | 설계할 때 볼 점 |
|---|---|---|
| 필터 | 원하는 조건만 남김 | 선택한 조건을 쉽게 지울 수 있는가 |
| 정렬 | 목록 순서를 바꿈 | 현재 선택된 기준이 보이는가 |
| 추천 검색어 | 검색어를 다시 선택함 | 현재 입력과 관련 있는가 |
검색 결과 수는 ‘총 128개’처럼 표시할 수 있지만, 실제로 사용자가 볼 수 있는 범위와 다를 수 있다면 표현을 조심해야 합니다. 검색 결과가 일부만 불러와지는 구조라면 ‘현재 조건에서 결과를 표시합니다’처럼 범위를 정확히 알리는 편이 낫습니다.
검색 화면을 설계하는 순서
- 사용자 흐름을 적습니다. 검색창을 엶 → 검색어를 입력함 → 결과를 확인함 → 조건을 좁힘 → 상세 내용을 봄의 순서로 적어 봅니다.
- 화면 상태를 나눕니다. 처음 상태, 입력 중, 검색 중, 결과 있음, 결과 없음, 검색 오류를 각각 따로 그립니다.
- 낮은 완성도의 그림부터 시작합니다. 처음부터 색과 그림을 넣지 말고 상자와 글자로 위치와 순서를 확인합니다. 이를 와이어프레임이라고 하며, 화면의 뼈대를 뜻합니다.
- 행동의 결과를 연결합니다. 검색 버튼을 누르면 어디로 이동하는지, 필터를 고르면 목록이 어떻게 바뀌는지 표시합니다.
- 실제 문장으로 검토합니다. ‘검색 결과가 없습니다’ 대신 ‘다른 검색어를 입력하거나 철자를 확인해 보세요’처럼 다음 행동을 알려 줍니다.
이때 주석에는 단순히 ‘버튼을 누르면 이동’이라고 쓰기보다 조건을 적는 것이 좋습니다. 예를 들어 ‘검색어가 한 글자이면 실행하지 않고 입력 안내를 보여 줌’, ‘필터를 선택하면 선택된 조건을 검색창 아래에 표시함’처럼 작성하면 기획자와 개발자의 해석 차이를 줄일 수 있습니다.
자주 나오는 실수와 고치는 방법
첫 번째 실수는 검색 결과가 없을 때 빈 화면만 보여 주는 것입니다. 결과가 없다는 사실보다 중요한 것은 사용자가 다음에 무엇을 할 수 있는지입니다. 비슷한 검색어, 인기 검색어, 철자 확인 안내를 함께 제공하면 다시 탐색할 길이 생깁니다.
두 번째는 입력 오류를 너무 늦게 알려 주는 것입니다. 날짜 형식이나 글자 수 제한이 있다면 입력 직후 또는 실행 전에 알려야 합니다. 다만 글자를 칠 때마다 붉은 경고를 띄우면 부담이 커질 수 있으므로, 사용자가 입력을 마쳤거나 실행했을 때 알리는 방식과 비교해야 합니다.
세 번째는 검색창 안에 너무 많은 기능을 넣는 것입니다. 음성 검색, 최근 검색어, 자동 완성, 필터 버튼을 모두 넣으면 강력해 보이지만 처음 보는 사람은 무엇부터 눌러야 할지 모를 수 있습니다. 자주 쓰는 기능을 앞에 두고 나머지는 단계적으로 보여 주세요.
네 번째는 모바일 화면을 나중에 줄이는 것입니다. 넓은 화면에서 나란히 보이던 필터와 결과가 휴대전화에서는 겹칠 수 있습니다. 모바일에서는 필터를 별도 패널로 열고, 적용 전 선택 항목과 적용 후 결과를 구분하는 방식을 먼저 검토해야 합니다.
검색 화면 설계 자주 묻는 질문
검색 버튼 없이 입력이 끝나면 바로 검색해도 될까요?
짧은 검색어를 입력하는 서비스라면 자동 검색이 편할 수 있습니다. 하지만 입력할 때마다 결과가 바뀌면 데이터 사용량과 화면 움직임이 늘고, 긴 문장을 입력하는 사용자를 방해할 수 있습니다. 검색 버튼과 입력 완료 동작을 함께 제공하고, 자동 검색은 서비스 특성에 맞춰 시험해 보는 것이 좋습니다.
검색 결과가 없을 때 추천 검색어는 몇 개가 적당한가요?
정해진 숫자보다 관련성과 선택의 쉬움이 중요합니다. 너무 많은 단어를 나열하면 사용자가 다시 고르는 부담이 커집니다. 오탈자를 바로잡은 표현, 더 넓은 표현, 인기 있는 표현처럼 서로 다른 도움을 주는 항목을 우선 보여 주세요.
검색 결과가 한 개일 때도 목록 화면이 필요한가요?
사용자가 해당 결과의 상세 내용을 바로 확인하는 서비스라면 바로 이동할 수 있습니다. 다만 결과의 제목이나 검색어와 얼마나 관련 있는지 확인할 기회가 사라질 수 있습니다. 사용자가 비교하거나 선택해야 하는 서비스라면 한 개라도 목록으로 보여 주는 편이 안전합니다.
설계가 끝났는지는 어떻게 확인하나요?
처음 보는 사람에게 검색어를 찾고, 결과를 좁히고, 조건을 해제하는 과제를 부탁해 보세요. 설명 없이도 현재 상태와 다음 행동을 알아차리는지 관찰하면 됩니다. 실제 데이터와 긴 검색어, 오탈자, 결과 없음 상태까지 넣어 확인해야 화면의 약점이 드러납니다.
좋은 검색 화면은 기능이 많은 화면이 아니라 사용자가 길을 잃지 않는 화면입니다. 검색 목적과 결과의 의미를 먼저 정하고, 정상 상태뿐 아니라 오류와 빈 결과까지 함께 설계해 보세요. 마지막으로 화면 크기와 입력 방법이 다른 환경에서 같은 흐름이 이어지는지 확인하면 실제 사용에 가까운 설계가 됩니다.