Algolia 전문 검색 실전: Claude Code 연동 가이드

Claude Code로 Algolia 전문 검색 구축하기

Algolia는 밀리초 단위 응답 속도를 자랑하는 검색 엔진 SaaS 입니다. 오타 허용, 패싯 검색, 개인화 등 고도화된 검색 경험을 손쉽게 구현할 수 있죠. Claude Code를 활용하면 인덱스 설계부터 검색 UI 구축까지 한 번에 끝낼 수 있습니다.

인덱스 설계와 데이터 투입

> Algolia 상품 인덱스를 설계하고
> 데이터를 투입하는 스크립트를 작성해줘. 한국어 검색도 지원되도록.

// src/scripts/index-products.ts
import algoliasearch from 'algoliasearch';

const client = algoliasearch(
  process.env.ALGOLIA_APP_ID!,
  process.env.ALGOLIA_ADMIN_KEY!
);

const index = client.initIndex('products');

// 인덱스 설정
await index.setSettings({
  searchableAttributes: [
    'name',
    'description',
    'category',
    'brand',
    'tags',
  ],
  attributesForFaceting: [
    'searchable(category)',
    'searchable(brand)',
    'price_range',
    'filterOnly(in_stock)',
  ],
  customRanking: ['desc(popularity)', 'asc(price)'],
  queryLanguages: ['ko', 'en'],
  indexLanguages: ['ko', 'en'],
  // 한국어 토크나이저 관련 옵션
  ignorePlurals: true,
  removeStopWords: true,
});

// 데이터 투입
interface Product {
  objectID: string;
  name: string;
  description: string;
  category: string;
  brand: string;
  price: number;
  price_range: string;
  in_stock: boolean;
  tags: string[];
  popularity: number;
  image_url: string;
}

const products: Product[] = await fetchProductsFromDB();

// 배치 단위로 인덱스에 투입 (1000건씩)
const batchSize = 1000;
for (let i = 0; i < products.length; i += batchSize) {
  const batch = products.slice(i, i + batchSize);
  await index.saveObjects(batch);
  console.log(`인덱싱 완료 ${i + batch.length} / ${products.length}`);
}

React InstantSearch로 검색 UI 만들기

> React InstantSearch로 검색 페이지를 만들어줘.
> 패싯, 하이라이트, 페이지네이션 포함해서.

// src/components/SearchPage.tsx
import {
  InstantSearch,
  SearchBox,
  Hits,
  RefinementList,
  Pagination,
  Highlight,
  Stats,
  Configure,
} from 'react-instantsearch';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
  process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY!
);

function Hit({ hit }: { hit: any }) {
  return (
    <article className="p-4 border rounded-lg">
      <img
        src={hit.image_url}
        alt={hit.name}
        className="w-full h-48 object-cover rounded"
      />
      <h3 className="text-lg font-bold mt-2">
        <Highlight attribute="name" hit={hit} />
      </h3>
      <p className="text-gray-600 text-sm mt-1">
        <Highlight attribute="description" hit={hit} />
      </p>
      <div className="flex justify-between items-center mt-2">
        <span className="text-indigo-600 font-bold">
          ₩{hit.price.toLocaleString()}
        </span>
        <span className="text-sm text-gray-500">{hit.brand}</span>
      </div>
    </article>
  );
}

export default function SearchPage() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <Configure hitsPerPage={12} />
      <div className="max-w-6xl mx-auto p-6">
        <SearchBox
          placeholder="상품 검색..."
          className="mb-6"
        />
        <Stats />
        <div className="grid grid-cols-4 gap-6 mt-4">
          <aside>
            <h4 className="font-bold mb-2">카테고리</h4>
            <RefinementList attribute="category" />
            <h4 className="font-bold mt-4 mb-2">브랜드</h4>
            <RefinementList attribute="brand" searchable />
            <h4 className="font-bold mt-4 mb-2">가격대</h4>
            <RefinementList attribute="price_range" />
          </aside>
          <main className="col-span-3">
            <Hits hitComponent={Hit} className="grid grid-cols-3 gap-4" />
            <Pagination className="mt-6" />
          </main>
        </div>
      </div>
    </InstantSearch>
  );
}

인덱스 동기화

데이터베이스 변경 사항을 Algolia에 동기화하는 구조가 필요합니다.

// src/services/algolia-sync.ts
import algoliasearch from 'algoliasearch';

const client = algoliasearch(
  process.env.ALGOLIA_APP_ID!,
  process.env.ALGOLIA_ADMIN_KEY!
);
const index = client.initIndex('products');

export async function onProductCreated(product: Product) {
  await index.saveObject({ ...product, objectID: product.id });
}

export async function onProductUpdated(product: Product) {
  await index.partialUpdateObject({
    objectID: product.id,
    ...product,
  });
}

export async function onProductDeleted(productId: string) {
  await index.deleteObject(productId);
}

정리

Algolia의 빠른 검색과 Claude Code를 조합하면 프로덕션 레벨 검색 기능을 짧은 시간 안에 구축할 수 있습니다. 검색 기능 구현 가이드나 성능 최적화도 함께 참고해 보세요.

Algolia의 상세한 사용법은 Algolia 공식 문서에서 확인할 수 있습니다.