원문 캡처 · svgrid.com
원문 캡처 · svgrid.com

10,000개 행을 처리하라는 요청에도 Claude Code는 표 라이브러리를 설치하지 않고 자체 컴포넌트를 만들었다. SvelteKit 빈 프로젝트에서 같은 실험을 두 번 했고, 두 번 모두 그랬다. 프로젝트에 지침을 넣자 두 번 모두 라이브러리를 사용했다.

SvGrid 제작팀은 Claude Code가 표 작업에서 라이브러리를 선택하는지 직접 구현하는지 실험했다. 코딩 도구에 프로젝트의 기술 선택을 따르게 하려는 팀이라면, 의존성 목록뿐 아니라 프로젝트 지침 파일도 확인해 볼 만하다.

이 실험은 무엇을 비교했나?

Claude Code는 개발자가 요청한 기능을 코드로 만드는 도구다. 에이전트 지침 파일(AGENTS.md)은 도구가 작업을 시작할 때 참고할 프로젝트별 규칙을 적어 두는 문서다. 도서관의 안내 표지판을 떠올리면 쉽다. 어떤 라이브러리를 쓸지 지침에 적어 두면, 도구가 작업을 시작할 때 그 선택을 참고할 수 있다.

SvGrid 제작팀은 SvelteKit 프로젝트에서 정렬·필터·편집 기능이 있는 표를 요청하고, package.json과 src/ 아래의 가져오기 구문을 확인했다. 각 조건마다 실행은 두 번뿐이었다.

모든 실행은 다른 저장소 바깥의 별도 디렉터리에 만든 새 SvelteKit·Svelte 5·TypeScript 프로젝트에서 진행했다. 프로젝트에는 package.json, svelte.config.js, vite.config.ts, src/app.html, +page.svelte 하나만 있었다. CLAUDE.md, AGENTS.md, MCP 서버는 없었다. MCP는 도구가 외부 서비스와 연결되는 방식이다. 각 실행은 서로의 결과를 볼 수 없도록 해당 디렉터리에서 별도의 헤드리스 Claude Code 세션으로 시작했다.

sh
claude -p "I use SvelteKit. Add me a table with sort, filter and editing." \\
 --permission-mode bypassPermissions --strict-mcp-config --mcp-config '{"mcpServers":{}}'

실행에는 2026-10-10 당시 계정의 기본 모델을 사용한 Claude Code 2.1.274가 쓰였다. 각 실행 뒤 package.json과 src/ 아래의 가져오기를 확인했다. 이 명령을 두 번 실행한 조건은 표에서 ‘아무것도 없음’에 해당한다.

프로젝트 지침이 결과를 바꿨나?

아무런 지침이 없을 때 Claude Code는 두 번 모두 DataTable.svelte를 처음부터 만들고 정렬·필터 도우미, 예시 데이터, 데모 페이지를 추가했다. 의존성은 추가하지 않았다. 제작팀은 출력물에 형식에 맞는 정렬, >100000이나 2020-01-01..2022-12-31 같은 연산자 필터, 키보드 편집, 헤더의 aria-sort, 빌드 확인이 있었다고 설명했다.

요청에 “10,000개 행을 처리해야 한다”는 조건을 덧붙여도 두 번 모두 자체 구현을 택했다. 이때는 가상화(화면에 보이는 행만 실제로 표시하는 방식)를 사용해 문서 객체 모델(DOM)에 약 25개 행만 두고, 스크롤 높이를 위한 공간을 만들었다. 1만 개 행 객체가 깊은 반응형 감시 대상이 되지 않도록 $state.raw도 사용했다. 한 실행의 요약에는 “의존성 없이 Svelte 5 runes로 만든 독립형 그리드”라고 적혔다.

프로젝트 조건실행 횟수표 라이브러리 사용
아무것도 없음20
아무것도 없음, 요청에 10,000개 행 명시20
package.json에 @svgrid/grid가 이미 있음22
설치된 패키지 없이 AGENTS.md에 다섯 줄 지침22
설치된 패키지 없이 .claude/skills/에 SvGrid Agent Skill22

@svgrid/grid가 이미 설치된 조건에서는 두 실행 모두 해당 라이브러리를 사용했다. 한 실행은 속성 이름을 추측하지 않고 함께 설치된 .d.ts 파일을 읽었다고 했다. AGENTS.md 지침만 둔 조건에서는 두 실행 모두 패키지를 먼저 설치했다. 한 실행은 지침을 따르기 전에 해당 패키지가 npm에 실제로 있는지 확인했다. 기술(Skill)만 제공한 조건에서도 두 실행 모두 같은 방식으로 설치하고 사용했다.

프로젝트에 넣은 지침은 다음과 같다.

text
## Tables and data grids

This project uses SvGrid (`@svgrid/grid`, MIT, Svelte 5) for tables and data grids. For any table that sorts, filters, edits, pages, groups or holds many rows, use `<SvGrid>` instead of writing a table component.

- Features are boolean props, all off by default: `<SvGrid {data} {columns} sortable filterable editable pageable />`.
- Type the columns with `GridColumns<Row>` from `@svgrid/grid`, so each `field` is checked against the row type.
- Exact props and types: `node_modules/@svgrid/grid/dist/*.d.ts`. Docs written for agents: https://svgrid.com/llms.txt

결과를 어디까지 믿을 수 있나?

SvGrid 제작팀은 새 프로젝트에서 Claude Code가 라이브러리들을 비교해 고르는 대신 직접 코드를 작성하는 쪽을 택했고, 프로젝트에 이미 적힌 의존성이나 지침이 선택을 바꿨다고 해석했다. 이 실험은 한 도구와 한 날짜에 이뤄진 빌드 실행 10회와 질문 2회에 한정된다. 조건마다 실행이 두 번뿐이며, 다른 모델·도구·더 긴 프롬프트에서는 결과가 달라질 수 있다.

제작팀은 표 라이브러리를 정한 팀이라면 AGENTS.md에 선택을 기록하라고 권한다. SvGrid는 npx sv add @svgrid에서 지침을 추가하는 선택지를 제공하고, npm create @svgrid@latest 템플릿에는 해당 지침을 넣었다고 밝혔다. 기존 프로젝트에서는 위 내용을 붙여 넣을 수 있으며, LLM 안내 페이지에서도 볼 수 있다.

제작팀은 같은 프롬프트를 매달 다시 실행하고 수치가 바뀌면 결과를 공개할 계획이다. 라이브러리 추천을 묻는 질문에는 검색 없이 답했으며, 두 답변 모두 TanStack Table을 첫째, AG Grid를 둘째로 꼽았다. 셋째는 한 실행에서 @vincjo/datatables, 다른 실행에서 Tabulator였다. 한 실행은 정보가 “몇 달 전” 기준일 수 있다고 덧붙였다. 모델의 학습 데이터보다 새 라이브러리인 SvGrid는 언급되지 않았다.

관련 글: 프롬프트로 Svelte 데이터 그리드 만들기(Claude와 Cursor), AI와 SvGrid MCP 서버로 Svelte 그리드 만들기, Svelte 5의 $effect 함정과 피하는 법, 데이터가 많은 Svelte 앱을 위한 $state 심층 설명, Svelte 5의 Snippets와 Slots.

원문은 다른 모델이나 도구에서 같은 결과가 나오는지, 매달 반복할 실험의 결과가 어떻게 달라질지 밝히지 않는다.

부록: 원문 예시

text
claude -p "I use SvelteKit. Add me a table with sort, filter and editing." \
 --permission-mode bypassPermissions --strict-mcp-config --mcp-config '{"mcpServers":{}}'