앱에 검색 기능을 추가하는 방법: 간단한 필터부터 전체 텍스트 검색까지

앱에 검색을 추가하려면 가장 단순하게 동작하는 방법부터 시작하세요. 검색창이 서버 라우트를 호출하고, 그 라우트가 몇 개 열을 검색어와 대조해 데이터베이스 행을 걸러내며, 카테고리나 가격 같은 조건으로 한 번 더 거르는 방식입니다. 이것으로 부족하다면, 즉 관련도 순위나 어간 매칭, 많은 데이터가 필요해지면 데이터베이스의 전체 텍스트 검색으로 옮기세요. 강력한 오타 허용이나 대용량 데이터에서의 즉각적인 결과가 꼭 필요할 때만 호스팅 검색 엔진을 고려하면 됩니다. 어떤 방식을 택하든 검색은 권한을 지켜야 합니다. 사용자는 자신이 볼 수 없는 레코드를 검색 결과에서 절대 찾으면 안 됩니다.

앱에서 '검색'이 의미하는 것

검색은 여러 가지를 가리키며, 대부분의 앱은 그중 둘 이상이 필요합니다.

• 키워드 검색: 텍스트 상자에 입력하는 방식입니다. 예: "'정원'이 언급된 매물 찾기".
• 필터: 카테고리, 도시, 가격 범위, 날짜, 상태처럼 구조화된 선택지입니다.
• 정렬: 최신순, 저렴한 순, 관련도 순입니다.
• 자동 완성: 입력하는 동안 제안 목록을 보여줍니다.
• 오타 허용: "restuarant"를 입력해도 "restaurant"를 찾아 줍니다.

디렉터리, 구인 게시판, 쇼핑몰이라면 텍스트 상자보다 필터가 더 중요한 경우가 많습니다. 도구를 고르기 전에 실제로 필요한 기능이 무엇인지 먼저 정하세요.

선택지

데이터가 이미 Postgres에 있다면 기본 제공 전체 텍스트 검색이 좋은 중간 선택지입니다. 텍스트를 단어로 나누고, 어간으로 줄이며("running"이 "run"과 매칭됨), 흔한 단어는 무시하고, 얼마나 잘 맞는지에 따라 결과 순위를 매깁니다. 적절한 인덱스를 두면 큰 테이블에서도 빠르게 동작합니다.

프롬프트 예시

간단하게 시작하는 경우:

목록 페이지에 검색창과 필터를 추가해 주세요. 검색어는 제목과 설명에서 대소문자를 구분하지 않고 매칭합니다. 필터는 카테고리(드롭다운), 도시(드롭다운), 최대 가격입니다. 검색은 서버에서 페이지네이션 API 라우트로 처리하고, 페이지당 결과 20개를 보여주세요. 검색어와 필터는 URL에 유지해서 결과를 공유할 수 있고 뒤로 가기도 동작하게 해 주세요. 결과가 없을 때는 친절한 빈 상태 화면을 보여주세요.

전체 텍스트 검색으로 업그레이드하는 경우:

목록 검색을 Postgres 전체 텍스트 검색으로 바꿔 주세요. 제목(가중치를 더 높게)과 설명을 대상으로 합니다. 적절한 인덱스를 추가하고, 관련도 순으로 결과 순위를 매기며, 기존 필터와 페이지네이션은 그대로 유지해 주세요. 기존 데이터는 변경하지 마세요.

이름에 오타 허용을 추가하는 경우:

상호명에 퍼지 매칭을 추가해서 작은 오타가 있어도 결과가 나오게 해 주세요. 가능하다면 트라이그램 유사도를 인덱스와 함께 사용하고, 불가능하면 현재 검색 방식으로 대체해 주세요.

단계별 진행

1. 사용자가 무엇을 검색하는지 정리하세요. 어떤 필드(제목, 설명, 태그, 이름)를 검색하나요? 어떤 필터가 필요하나요? 가능하다면 실제 사용자 몇 명에게 물어보세요.
2. 서버 방식으로 시작하세요. 검색어와 필터를 받아 결과 한 페이지를 돌려주는 API 라우트를 추가하세요. 전체 데이터를 브라우저에 불러오지 마세요.
3. 쿼리에 권한을 적용하세요. 사용자가 자신의 레코드나 공개된 레코드만 볼 수 있다면, 그 조건을 검색 쿼리와 같은 쿼리 안에 넣으세요.
4. 처음부터 페이지네이션을 추가하세요. 페이지 번호나 "더 보기" 방식 중 하나를 고르세요.
5. 검색 상태를 URL에 두세요. 예: ?q=garden&city=leeds. 그러면 링크를 공유할 수 있고, 뒤로 가기가 동작하며, 원한다면 검색 엔진이 필터된 페이지도 수집할 수 있습니다.
6. 입력 중 검색에는 디바운스를 적용하세요. 입력이 멈춘 뒤 몇백 밀리초를 기다렸다가 쿼리하면 키를 누를 때마다 요청하는 것을 막을 수 있습니다.
7. 검색하고 필터링하는 열을 알게 되면 인덱스를 추가하세요.
8. 단계적으로 업그레이드하세요. 전체 텍스트 검색, 그다음 퍼지 매칭, 마지막으로 호스팅 엔진 순입니다. 더 단순한 단계가 실제 사용자에게 통하지 않을 때만 올리세요.
9. 현실적인 데이터로 테스트하세요. 수백에서 수천 행, 특수 문자, 빈 검색어, 매우 긴 검색어, 지원하는 다른 언어까지 확인하세요.

흔한 실수

• 전체 테이블을 브라우저에 불러오기. 항목이 50개일 때는 괜찮지만 50,000개가 되면 힘들어지고, 사용자가 보면 안 되는 레코드까지 모두 노출됩니다.
• 권한을 무시하는 검색. 검색은 흔한 누출 경로입니다. 검색 쿼리에 "내 것만" 또는 "공개된 것만" 조건을 빠뜨리면 비공개 레코드나 초안이 결과에 나옵니다.
• 사용자 입력으로 SQL 만들기. 항상 매개변수화된 쿼리를 사용하세요. AI 빌더는 보통 그렇게 만들지만, 문자열을 이어 붙이고 있지 않은지 확인하세요.
• 빈 상태 화면 없음. "결과 없음"과 함께 제안(필터 지우기, 철자 확인)을 보여주면 사용자가 떠나지 않습니다.
• 인덱스 없음. 테스트 데이터에서는 검색이 잘 되지만, 실제 데이터가 늘면 느려집니다.
• 바로 검색 서비스부터 도입하기. 그러면 데이터 사본을 하나 더 동기화하고, 삭제를 처리하고, 키를 하나 더 보호해야 합니다. 눈에 띄는 이득 없이 말이죠.
• 모바일을 잊기. 필터는 휴대폰 화면에 맞아야 합니다. 보통 사이드바보다 필터 서랍이나 접히는 패널이 더 잘 맞습니다.

체크리스트

• 어떤 필드를 검색하고 어떤 필터가 있는지 알고 있다
• 검색은 서버에서 실행되며 페이지네이션된 결과를 반환한다
• 쿼리가 앱의 나머지 부분과 같은 권한을 적용한다
• 사용자 입력은 매개변수로 전달되며 SQL에 이어 붙이지 않는다
• 검색 상태가 URL에 있다
• 입력에 디바운스가 적용되어 있다
• 검색하고 필터링하는 열에 인덱스가 있다
• 빈 상태, 결과 없음, 오류 상태가 분명하다
• 실제와 비슷한 데이터 양과 지저분한 입력으로 테스트했다

Mythex로 검색 추가하기

Mythex로 만든 앱에서는 보통 데이터가 프로젝트 전용 Postgres 데이터베이스에 있으므로, 위의 프롬프트로 바로 시작할 수 있습니다. 먼저 패턴 매칭을 쓰고, 순위가 필요해지면 Postgres 전체 텍스트 검색으로 바꾸세요. 호스팅 검색 엔진을 쓰고 싶다면 직접 계정과 키를 준비하고, 키는 프로젝트 시크릿으로 저장한 뒤 에이전트에게 서버에서 색인하고 조회하도록 요청하세요. 자세한 내용은 Integrate any API에 있습니다.

검색은 많은 앱의 핵심입니다. 검색이 제품의 나머지 부분과 어떻게 맞물리는지는 디렉터리 웹사이트 만드는 법, 구인 게시판 만드는 법, 마켓플레이스 만드는 법을 참고하세요.

자주 묻는 질문