탐색 설계, 검색 화면·구성 요소·상호작용을 바꾸는 기준
온라인 쇼핑몰에서 마음에 드는 상품을 찾다가 뒤로 가기를 여러 번 누른 경험이 있나요? 메뉴 이름이 애매하거나 검색 결과가 엉뚱하면, 사용자는 상품이 없는 것이 아니라 길을 찾을 수 없다고 느낍니다. 반대로 첫 화면에서 어디를 눌러야 하는지 보이고, 지금 어느 단계에 있는지 알 수 있으면 서비스가 훨씬 편하게 느껴집니다.
탐색 설계는 화면에 메뉴를 많이 배치하는 일이 아닙니다. 사용자가 목적을 정하고, 필요한 정보를 찾고, 다음 행동으로 자연스럽게 이동하도록 길을 만드는 작업입니다. 이 글을 읽으면 검색 화면 설계와 구성 요소 설계의 차이, 사용자의 흐름을 점검하는 방법, 자주 생기는 실수와 개선 기준을 알게 됩니다.
탐색 설계란 무엇인가
탐색 설계는 사용자가 서비스 안에서 위치를 파악하고 원하는 곳으로 이동하는 방식을 정하는 일입니다. 웹사이트의 상단 메뉴만 뜻하지 않습니다. 검색창, 필터, 뒤로 가기, 하단 탭, 이동 버튼, 진행 단계 표시까지 모두 탐색에 영향을 줍니다.
예를 들어 도서관 앱을 만든다고 가정해 보겠습니다. 사용자는 책 제목을 검색할 수도 있고, 분야별 목록을 둘러볼 수도 있습니다. 이때 검색 결과에서 분야를 다시 고르거나 대출 가능 여부를 확인하기 어렵다면, 각 화면의 모양이 예뻐도 탐색 경험은 나빠집니다.
- 목적: 사용자가 무엇을 하려는지 분명한가
- 위치: 현재 어떤 화면에 있는지 알 수 있는가
- 선택: 다음에 할 행동이 눈에 보이는가
- 회복: 잘못 눌렀을 때 이전 상태로 돌아갈 수 있는가
좋은 탐색은 사용자가 화면을 공부하지 않아도 작동합니다. 메뉴를 누르기 전에 결과를 예상할 수 있고, 예상과 다를 때도 쉽게 되돌릴 수 있어야 합니다.
설계를 시작하기 전 확인할 것
먼저 화면 목록을 그리기보다 사용자의 목적을 적어 보세요. 같은 서비스라도 방문 이유에 따라 필요한 길이 달라집니다. 쇼핑몰에서는 “검은 운동화를 사고 싶다”가 목적일 수 있고, 고객센터에서는 “환불 진행 상황을 확인하고 싶다”가 목적일 수 있습니다.
다음 질문에 답하면 탐색의 문제를 구체적으로 찾기 쉽습니다.
- 사용자는 첫 화면에서 가장 먼저 무엇을 찾는가?
- 검색하지 않고 둘러보는 사람에게도 분류 기준이 보이는가?
- 메뉴 이름만 보고 안에 어떤 내용이 있을지 예상할 수 있는가?
- 현재 선택한 조건과 이미 본 화면을 구별할 수 있는가?
- 휴대전화처럼 화면이 좁아져도 중요한 이동 수단이 남는가?
특히 실제 자료를 바탕으로 확인해야 합니다. 사용자가 많이 누르는 메뉴, 검색어가 없는 화면, 중간에 이탈하는 단계는 분석 도구나 사용성 테스트로 살펴볼 수 있습니다. 숫자만으로 이유를 단정하지 말고, 몇 명에게 직접 “왜 이 버튼을 눌렀는지” 물어보면 의외의 문제를 발견할 수 있습니다.
탐색 방식과 화면 구성 비교
탐색 방식은 하나로 통일하기보다 서비스의 정보 구조에 맞춰 조합해야 합니다. 정보 구조는 내용을 어떤 기준으로 묶고 순서를 정하는 방식입니다.
| 방식 | 잘 맞는 상황 | 주의할 점 |
|---|---|---|
| 상단 메뉴 | 주요 영역이 적고 계속 이동해야 할 때 | 항목이 많아지면 이름과 순서를 단순하게 해야 함 |
| 하단 탭 | 휴대전화에서 자주 쓰는 핵심 기능이 있을 때 | 탭을 너무 많이 넣으면 서로 구별하기 어려움 |
| 검색창 | 상품명, 문서명처럼 정확한 대상을 찾을 때 | 검색어가 달라도 비슷한 결과를 보여줘야 함 |
| 분류와 필터 | 상품이나 게시물이 많고 조건 비교가 필요할 때 | 선택한 조건이 결과에 적용됐는지 알려야 함 |
| 단계 표시 | 신청, 주문, 결제처럼 순서가 정해진 작업 | 현재 단계와 남은 과정이 분명해야 함 |
검색 화면 설계에서는 입력 전과 입력 후를 따로 봐야 합니다. 입력 전에는 최근 검색어, 인기 분야, 예시 문구를 보여줄 수 있습니다. 입력 후에는 결과 수, 정렬 기준, 필터 상태, 결과가 없을 때의 대안을 제공해야 합니다. “결과 없음”만 보여주는 것과 “철자 확인 또는 비슷한 항목 보기”를 함께 제안하는 것은 사용자가 느끼는 막막함에서 큰 차이가 납니다.
탐색 설계를 진행하는 순서
- 사용자 목표를 한 문장으로 적습니다. “정보를 본다”처럼 넓게 쓰지 말고 “이번 달 강좌 중 저녁 시간 수업을 신청한다”처럼 구체화합니다.
- 필요한 이동 경로를 그립니다. 시작 화면, 선택 화면, 확인 화면, 완료 화면을 상자와 화살표로 연결합니다. 중간에 같은 화면으로 돌아가는 길도 표시합니다.
- 메뉴와 버튼의 역할을 나눕니다. 메뉴는 영역을 이동할 때, 버튼은 현재 작업을 실행할 때 사용합니다. “자세히 보기”와 “신청하기”를 같은 모양으로 만들면 행동의 차이가 흐려집니다.
- 구성 요소를 상태별로 만듭니다. 검색창은 기본, 입력 중, 오류, 결과 없음 상태가 모두 필요합니다. 버튼도 누를 수 있음, 처리 중, 완료 상태를 구분해야 합니다.
- 작은 화면에서 다시 확인합니다. 긴 메뉴 이름이 잘리는지, 손가락으로 누르기 어려운 간격은 없는지, 화면을 줄였을 때 중요한 버튼이 아래로 밀리지 않는지 살핍니다.
- 다른 사람에게 과제를 줍니다. “이 서비스가 편한가요?”라고 묻기보다 “지난달 주문 내역에서 영수증을 찾아 보세요”처럼 실제 행동을 요청합니다. 머뭇거린 지점과 잘못 누른 위치를 기록합니다.
이 과정에서 움직임 설계도 함께 살펴볼 수 있습니다. 화면 전환 애니메이션은 사용자가 어디에서 어디로 이동했는지 알려주는 데 도움이 됩니다. 다만 장식적인 움직임이 너무 길면 사용자는 기다리는 느낌을 받습니다. 움직임을 끄는 설정이 있는지, 중요한 정보가 움직임이 끝나기 전에 가려지지 않는지도 확인해야 합니다.
자주 하는 실수와 고치는 방법
메뉴를 많이 넣으면 친절하다고 생각하는 경우
항목이 많으면 선택지가 풍부해 보이지만, 사용자는 무엇부터 눌러야 할지 결정하기 어려워집니다. 관련 기능을 묶고, 자주 쓰는 기능과 드물게 쓰는 기능을 나누세요. 이름이 비슷한 “관리”, “설정”, “환경”은 실제 내용을 비교해 더 분명한 말로 바꾸는 편이 좋습니다.
아이콘만으로 뜻을 전달하려는 경우
돋보기나 집 모양처럼 익숙한 아이콘도 사람마다 해석이 다를 수 있습니다. 특히 공유, 저장, 보관함처럼 비슷하게 느껴지는 기능은 글자를 함께 보여주는 것이 안전합니다. 아이콘을 눌렀을 때 이름이나 설명이 나타나도록 만드는 방법도 있습니다.
현재 위치를 표시하지 않는 경우
상세 페이지에서 목록으로 돌아왔는데 이전에 고른 필터가 사라지면 사용자는 같은 작업을 다시 해야 합니다. 뒤로 가기, 이동 경로 표시, 선택 조건 보존 중 서비스에 맞는 방법을 적용하세요. 결제 화면에서는 현재 단계와 주문 금액을 계속 확인할 수 있어야 합니다.
예외 상황을 나중에 처리하는 경우
검색 결과가 없거나 인터넷 연결이 끊겼을 때의 화면도 처음부터 설계해야 합니다. 오류 문구만 보여주기보다 다시 시도하기, 조건 지우기, 고객센터로 이동하기처럼 다음 행동을 제시하세요. 단, 사용자가 하지 않은 행동을 했다고 오해하게 만드는 문구는 피해야 합니다.
탐색 설계에 관한 질문
탐색 설계와 상호작용 설계는 어떻게 다른가요?
탐색 설계는 사용자가 어디로 이동할지에 초점을 둡니다. 상호작용 설계는 버튼을 눌렀을 때 무엇이 바뀌고 어떤 반응이 나타나는지 다룹니다. 둘은 따로 떨어지지 않습니다. 검색 결과로 이동하는 길과 검색창에 글자를 입력했을 때의 반응을 함께 맞춰야 자연스럽습니다.
메뉴는 몇 개까지 넣는 것이 좋은가요?
모든 서비스에 적용되는 숫자는 없습니다. 기능의 중요도와 사용 빈도, 화면 크기를 기준으로 정해야 합니다. 메뉴를 늘리기 전에 실제 사용 기록에서 자주 쓰지 않는 항목을 묶을 수 있는지 확인하고, 이름만 보고 의미를 예상할 수 있는지 테스트하세요.
검색창과 분류 메뉴 중 무엇을 먼저 설계해야 하나요?
사용자가 특정 대상을 알고 들어오는 서비스라면 검색창을 먼저 눈에 띄게 할 수 있습니다. 반대로 무엇을 볼지 정하지 않은 사용자가 많은 서비스라면 분야, 주제, 추천 목록을 함께 제공해야 합니다. 실제 이용 목적이 한 가지가 아니라면 검색과 둘러보기를 경쟁시키지 말고 서로 연결하세요.
설계가 잘됐는지 무엇으로 판단하나요?
사용자가 목표를 얼마나 빨리 달성했는지만 보지 말고, 잘못 누른 횟수와 뒤로 돌아간 횟수, 도움말을 찾은 지점도 함께 살펴보세요. 마지막에는 사용자에게 “어떤 부분이 가장 헷갈렸는가”를 물어야 합니다. 수치와 관찰 내용을 함께 봐야 다음 수정 방향이 분명해집니다.