AI 챗은 대표님의 오더로 시작했습니다. "사무실 간식 5만원어치 알려줘"처럼 말만 하면 간식 구성을 짜 주는 기능이요. 개발은 백엔드 개발자 한 분과 저, 둘이서 했습니다. GPT를 부르고 결과를 가공하는 건 백엔드, 그 응답을 받아 화면에 풀어내는 건 제 몫이었어요. 둘이서 서비스 전체를 만든 이야기는 따로 써 보려고 합니다.

이번 글은 그중 AI 챗 이야기입니다. 백엔드와 프론트가 LLM을 어떻게 나눠 맡았는지, 그리고 AI가 없는 간식을 추천하던 문제를 어떻게 잡았는지를 정리했습니다.

글에 실린 화면은 서비스 종료 후 만든 데모에서 다시 찍었습니다. UI는 원래 코드 그대로지만, 화면 속 답변 문장은 GPT가 아닌 데모용 모델이 만든 것입니다.

화면이 먼저 나왔습니다

챗 화면은 GPT가 붙기 전에 먼저 만들었습니다. 2024년 10월 말, 백엔드에 아직 아무것도 없을 때 더미 데이터로 시작했어요.

계속 읽기 →

고객사별로 간식 구성을 짜는 웹앱인데요, 가격표와 운영 가능 상품, 고객사별 특별단가가 들어 있는 엑셀을 올리면 브라우저 안에 상품 DB가 만들어지고, 거기서 검색해 고객사 탭마다 장바구니를 채운 다음 정해진 양식의 엑셀로 내보냅니다.

서버는 없습니다. Vite + React로 만든 SPA이고, 데이터는 전부 브라우저의 IndexedDB(Dexie)에 들어갑니다. 여기에 LLM(Gemini)을 붙인 과정을 정리해 봤습니다.

글의 화면은 촬영용으로 만든 샘플 엑셀(상품 164개, 고객사 5곳)로 다시 찍었습니다. 상품명·고객사·단가는 모두 가짜이고, AI 결과는 실제 Gemini 응답입니다.

규칙으로 할 수 있는 데까지

AI부터 붙인 건 아닙니다. 추천 기능은 이렇게 늘어났어요.

계속 읽기 →

2025년 10월에 쓴 글을 2026년 9월에 다시 썼습니다.

2025년 10월, Next.js 16 베타가 나온 직후에 이 주제로 글을 썼습니다. 다시 읽어 보니 발표 자료를 옮겨 적은 수준이었습니다. 컴파일러가 "알아서 최적화해 준다"고 써 놓고, 정작 컴파일러가 뭘 만드는지는 한 번도 열어 보지 않았습니다.

그래서 이번엔 직접 돌려 봤습니다. babel-plugin-react-compiler 1.0으로 예제 컴포넌트와 이 블로그 코드를 컴파일하고, 결과를 보면서 원래 질문에 다시 답해 봤습니다.

처음 질문

function ProductList({ products, onSelect }) {
  const filtered = products.filter((p) => p.inStock);

  return (
    <ul>
      {filtered.map((p) => (
        <ProductCard key={p.id} product={p} onSelect={() => onSelect(p.id)} />
      ))}
    </ul>
  );
}

예전 같으면 여기서 고민이 시작됩니다. filtered는 useMemo로 감쌀지, onSelect에 넘기는 화살표 함수는 useCallback으로 뺄지. 팀마다 답이 다르고, 결국 "일단 다 감싸자"가 이기는 경우가 많았습니다.

React 팀도 이걸 문제로 봤습니다. Meta 안에서 수동 메모이제이션이 들어간 PR은 전체의 8% 정도였는데, 그런 PR은 작성 시간이 31~46% 더 걸렸다고 합니다. 감싸는 것보다 의존성 배열을 맞추는 데 품이 들기 때문입니다.

계속 읽기 →

문서 사이트를 운영하다 보면 검색 기능은 필수입니다. 특히 한국어 컨텐츠가 많은 사이트에서는 한글에 특화된 검색 기능이 중요합니다. 이번 글에서는 Fumadocs의 기본 검색 엔진인 Orama가 한글을 제대로 지원하지 않는 문제를 해결하기 위해 커스텀 한글 검색 엔진을 구현한 과정을 공유합니다.

문제 발생

😮 : 한글 검색에 문제가 있나?

Fumadocs를 사용해 문서 사이트를 구축했는데, 한 가지 큰 문제가 있었습니다. 한글 검색이 제대로 작동하지 않는 것이었습니다.

원인 분석

Fumadocs는 기본적으로 Orama라는 검색 엔진을 사용하는데, 검색 결과 알게된 사실은…

GitHub Discussion #748에서 Orama 팀의 답변:

계속 읽기 →