변な 스택으로 포켓몬용 도구 만들기 (DuckDB Wasm / Wasm Component Model 과 AI 에이전트)

오늘은 Claude 에게 Web 애플리케이션을 한 번에 만들어달라고 요청할 수 있는 날이라서, 이 스택에 넣고 싶었지만 아직 다루지 않은 기술을 이 스택에 추가하고 질문하며 학습하면 효율이 좋을 것 같습니다.

포켓몬 챔피언스가 출시되었으므로, 간단한 대전용 도구를 그 주제로 삼기로 했습니다.

기본적인 데미지 계산에
인기 있는 에이전트도 추가해 보겠습니다.

(갑자기 존재하지 않는 포켓몬이 등장하니까요. 앱 자체도 전혀 사용하기 어렵습니다. 기존 도구는 정말 훌륭합니다.)

선택한 기술은 다음과 같습니다. 빠르고 약간의 Web 애플리케이션을 최대한 저렴하게 유지하기 위해 선택했습니다.

• BE

• axum

• connectrpc

• FE

• Solid

• generouted

• 얇은 자체 SSG

• DuckDB-Wasm

• WIT Component Model

• Cloudflare Workers

• Turso Cloud

• fly.io

• OpenRouter

약간의 아키텍처

이 변한 스택으로 괜찮은 애플리케이션을 하나 만들어 보았는데, 각각의 학습이 있습니다. 이 글은 그중에서 Wasm 주변에 관한 것입니다.

Turso Cloud 또한 Rust 서버의 프로세스 내의 Turso 와 Sync 하는 것이 흥미롭기 때문에, 기가 되면 쓸 예정입니다.

DuckDB Wasm

DuckDB 는 원래 포켓몬 같은 게 아닌 규모의 OLAP 을 가정하고 있어서, 예를 들어 이런 조건부 검색 화면은 브라우저 로컬에서 빠르게 작동할 수 있었습니다.

조건 전환 시의 쿼리→결과 표시까지는 렌더링 포함 30~70ms 정도이므로, 꽤나 임의로 UI 의 상태에서 쿼리 결과를 표시해도 괜찮은 느낌입니다.

읽을 수 있는 데이터 포맷 종류가 정말 좋았습니다. 이번에는 parquet 에 데이터를 저장해 두는 것뿐이고, 다양한 대시보드 등을 빠르게 만들 수 있을 것입니다. 향후 업무에서도 보통 선택지가 될 것 같습니다.

에이전트

그리고, 지난 에이전트는 실제로 브라우저에서 작동하는 DuckDB Wasm 에 tool call 로 직접 쿼리를 했습니다.

tool 의 정의는 다음과 같습니다.

// web/src/features/agent/tools.ts
const QUERY_POKEDEX_TOOL: ToolDef = {
type: "function",
...
```sql\n" +
POKEDEX_SCHEMA_SQL +