이 블로그 포스트에서는 브라우저에서 직접 첫 번째 토큰 생성 시간 (Time to First Token, TTFT)과 초당 토큰 처리량 (tokens-per-second throughput)을 측정하는 fast.com 스타일의 LLM API 속도 벤치마킹 도구인 iamspeed.dev를 어떻게 구축했는지 살펴보겠습니다.

만약 LLM의 응답을 기다리며 깜빡이는 커서를 바라보며 "이게 느린 건가, 아니면 나만 그런 건가?"라고 궁금해한 적이 있다면, 이 도구가 바로 당신을 위한 것입니다.

이 도구는 인터넷 속도 테스트를 위한 fast.com의 경험을 모델로 하여, 빠르고 가벼운 벤치마킹을 위해 설계되었습니다. 확장 가능한 프로바이더 어댑터 (provider adapter) 아키텍처를 사용하여 Gemini 또는 Groq와 같은 새로운 프로바이더를 쉽게 추가할 수 있습니다. 향후 계획으로는 과거 결과 기록, 모델 비교 모드, 그리고 Ollama를 통한 로컬 모델 지원 등이 포함되어 있습니다.

iamspeed.dev는 LLM API를 위한 오픈 소스 기반의 브라우저 벤치마킹 도구로, 두 가지 핵심 성능 지표인 첫 번째 토큰 생성 시간 (Time to First Token, TTFT)과 초당 토큰 처리량 (tokens-per-second throughput)을 측정합니다. OpenAI 및 Anth Anthropic 프로바이더를 지원하며, 백엔드나 데이터 전송 없이 AES-GCM 암호화를 사용하여 API 키를 로컬에 저장합니다.

이 프로젝트를 시작하게 된 문제점

저는 시스템을 벤치마킹하는 데 많은 시간을 보냅니다. API 부하 테스트 (Load testing), 마이크로서비스 프로파일링 (profiling microservices), 처리량 측정 (measuring throughput)은 QAInsights와 제 본업에서 제가 하는 일입니다.

LLM이 프로덕션 스택의 일부가 되기 시작했을 때, 대부분의 개발자가 단순히 "빠른 것 같다" 또는 "느린 것 같다"라고 눈대중으로만 판단한다는 것을 발견했습니다. API 키를 설정하고 즉시 구체적인 수치를 얻을 수 있는 빠르고 브라우저 기반인 도구가 없었습니다.

artificial analysis와 같은 도구들은 수백 개의 모델에 대해 심도 있는 비교 작업을 수행합니다. 하지만 저는 더 가벼운 것을 원했습니다. 화요일 오후에 그냥 열어서 바로 실행할 수 있는 무언가를 원했습니다.

그것이 바로 인터넷 속도 테스트를 위한 fast.com이 작동하는 방식입니다. 열고, 실행하고, 숫자를 확인하면 끝입니다.

그래서 저는 LLM API를 위해 똑같은 것을 만들었습니다: iamspeed.dev.

iamspeed.dev 소개

iamspeed.dev란 무엇인가?

iamspeed.dev는 LLM API를 위한 오픈 소스(open-source) 기반 브라우저 벤치마킹 도구입니다. 현재 OpenAI 및 Anthropic과 같은 지원되는 제공업체로부터 실시간 토큰(token)을 스트리밍하며, 성능 지표(performance metrics)가 발생하는 즉시 실시간으로 보여줍니다.

백엔드(backend) 없음. 데이터 수집 없음. 예상치 못한 상황 없음.

사용자의 API 키는 AES-GCM 암호화를 사용하여 브라우저에 로컬로 저장되므로, 사용자의 기기를 절대 벗어나지 않습니다.

인터페이스는 의도적으로 최소화되었습니다. 아래와 같이 로고, 지표 표시창, 실행(Run) 버튼, 그리고 설정 패널만 제공됩니다. fast.com의 미학(aesthetic)에서 직접적인 영감을 받았습니다.

주요 지표: 무엇을 측정하는가

운영 환경(production)에서 LLM을 다룬다면, 단순한 응답 시간(response time)은 오해의 소지가 있는 숫자라는 것을 이미 알고 계실 것입니다. 실제로 중요한 두 가지 지표는 다음과 같습니다:

1. 첫 번째 토큰까지의 시간 (Time to First Token, TTFT)

이는 요청을 보낸 시점부터 모델로부터 첫 번째 토큰을 돌려받을 때까지의 시간입니다. LLM이 얼마나 빠르게 응답 생성을 시작하는지를 반영합니다.

TTFT는 사용자가 체감하는 요소입니다. TTFT가 높으면 화면에 아무것도 나타나기 전까지 어색한 멈춤 현상이 발생합니다.

대화형 애플리케이션의 경우, TTFT를 낮게 유지하는 것이 매우 중요합니다. 추론 모델(reasoning models, 확장된 사고 및 딥 싱크 모드)은 첫 번째 가시적 토큰이 도착하기 전에 추가적인 연산(compute)이 수행되기 때문에 TTFT가 5배에서 30배까지 늘어날 수 있습니다.

2. 초당 토큰 수 (Tokens Per Second, Throughput)

이는 첫 번째 토큰이 도착한 후 모델이 사용자에게 토큰을 스트리밍하는 속도입니다. 즉, "출력 속도" 지표입니다.

초당 토큰 수가 높으면 텍스트가 화면에 빠르고 유연하게 나타납니다. 처리량(throughput)이 낮으면 TTFT가 수용 가능한 수준이었더라도 텍스트가 끊기거나 느리게 느껴집니다.

이 두 숫자를 함께 보면 사용자의 유스케이스(use case)에 대해 LLM API가 어떻게 작동하는지에 대한 전체적인 그림을 파악할 수 있습니다.

주요 기능 요약

iamspeed.dev가 지원하는 기능의 간략한 요약은 다음과 같습니다:

• 실시간 메트릭 업데이트를 포함한 라이브 스트리밍 출력 (Live streaming output)
• 첫 번째 토큰이 도착하는 순간을 정확하게 포착하는 TTFT (Time To First Token) 측정
• 생성 과정 동안 지속적으로 업데이트되는 초당 토큰 수 (Tokens/sec) 처리량 (throughput) 추적
• 로컬에만 저장되며 절대 전송되지 않는 AES-GCM 암호화 API 키 저장
• OpenAI 프로바이더 (provider) 지원 (GPT-4o, GPT-4.1 및 호환 모델)
• Anthropic 프로바이더 (provider) 지원 (Claude Sonnet, Claude Haiku 등)
• 깔끔한 ProviderAdapter 인터페이스를 통한 확장 가능한 프로바이더 아키텍처 (Extensible provider architecture)
• fast.com에서 영감을 받은 반응형 미니멀 UI (Responsive minimal UI)

제가 강조하고 싶은 핵심 사항은 로컬 암호화입니다. API 키를 요구한 뒤 조용히 어딘가로 전송하는 도구들을 너무 많이 보았습니다. iamspeed.dev는 그렇게 하지 않습니다. 귀하의 키는 AES-GCM으로 암호화되어 브라우저의 로컬 스토리지(local storage)에만 저장됩니다.

프로바이더 아키텍처는 깔끔하고 의도적으로 설계되었습니다. 각 LLM 프로바이더는 ProviderAdapter 인터페이스를 충족하는 어댑터(adapter)로 구현됩니다. 이를 통해 새로운 프로바이더를 추가하는 과정이 간단해지며, 핵심 벤치마크 로직이 프로바이더에 종속되지 않도록(provider-agnostic) 유지합니다.

이 프로젝트는 iamspeed.dev에서 호스팅되며, 전체 소스 코드는 GitHub에서 확인할 수 있습니다.

로컬에서 실행하는 방법

iamspeed.dev를 로컬에서 실행하는 데는 1분도 채 걸리지 않습니다. 단계는 다음과 같습니다:

1. 저장소(repository)를 클론(Clone)합니다:

git clone https://github.com/QAInsights/iamspeed.dev.git
cd iamspeed.dev

2. 의존성(dependencies)을 설치합니다:

npm install

3. 개발 서버를 시작합니다:

npm run dev

4. 브라우저에서 http://localhost:4321로 이동합니다.
5. 톱니바퀴 아이콘 (설정/Settings)을 클릭하고 OpenAI 또는 Anthropic API 키를 입력합니다.
6. Run을 누릅니다.

아래에 표시된 것처럼, 토큰이 스트리밍되는 모습과 초당 토큰 수(tokens/sec) 카운터가 실시간으로 업데이트되는 것을 즉시 확인할 수 있습니다.

사용 가능한 모든 명령어는 다음과 같습니다:

명령어	설명
npm run dev	개발 서버 시작
...

새로운 프로바이더(Provider)를 추가하는 방법

이 지점에서 아키텍처의 진가가 드러납니다. 예를 들어 Gemini나 Groq에 대한 지원을 추가하고 싶다면, 그 과정은 매우 깔끔합니다:

1. src/lib/providers/에 새로운 어댑터(adapter) 파일을 생성합니다. 어댑터는 반드시 ProviderAdapter 인터페이스를 구현해야 합니다.
2. src/lib/providers/index.ts에 이를 등록합니다.
3. src/lib/config.ts에 프로바이더 메타데이터(이름, 모델 등)를 추가합니다.

이것으로 끝입니다. 벤치마크 엔진(benchmark engine)이나 UI 로직을 변경할 필요가 없습니다. 어댑터 패턴(adapter pattern) 덕분에 관심사가 깔끔하게 분리됩니다.

시간이 지나면서 더 많은 프로바이더를 추가할 계획입니다. 기여하고 싶다면 풀 리퀘스트(pull requests)를 환영합니다.

성능 엔지니어에게 이것이 중요한 이유

여기서 성능 엔지니어(performance engineers)분들께 잠시 직접 말씀드리고 싶습니다.

우리는 JMeter, k6, Gatling 등을 사용하여 시스템을 측정하는 데 익숙합니다. 처리량(throughput), 지연 시간 백분위수(latency percentiles), 동시성(concurrency), 생각 시간(think time)을 이해하고 있습니다. LLM API는 이 모든 것에 새로운 차원을 추가합니다.

AI 기반 제품을 구축할 때, 여러분은 더 이상 단순히 HTTP 응답 시간만을 측정하는 것이 아닙니다. 여러분은 다음과 같은 요소들을 다루게 됩니다:

• 사용자가 인지하는 지연 시간 지표로서의 TTFT (웹 성능의 Time-to-interactive와 유사)
• 지속적인 전달 속도로서의 스트리밍 처리량 (Streaming throughput) (단발성 측정이 아님)
• 프로바이더 가변성 (Provider variability): 동일한 모델이라도 지역(region)과 시간대에 따라 매우 다르게 동작할 수 있음
• 추론 오버헤드 (Reasoning overhead): 사고 모델(thinking models)은 첫 번째 가시적 토큰이 나오기 전 보이지 않는 연산 시간을 추가함

iamspeed.dev와 같은 도구는 빠른 샌니티 체크(sanity check)를 제공합니다. LLM 기반 API를 위한 전체 성능 테스트 스위트(performance test suite)를 설계하기 전에, 이곳에서 빠른 벤치마크를 실행하여 기준점(baseline) 수치를 파악해 보세요.

저는 QAInsights 블로그에 LLM 성능 지표에 대해 광범위하게 작성해 왔으며, JMeter 테스트 플랜에서 TTFT와 TTLT를 측정하기 위한 jmeter-llm-sampler 플러그인을 제작했습니다. iamspeed.dev는 이러한 심층적인 도구들을 보완하는 브라우저 친화적인 동반자입니다.

다음 단계

iamspeed.dev에 추가하고 싶은 몇 가지 기능들입니다:

• 더 많은 제공자 (More providers): Gemini, Groq, Mistral, 그리고 로컬 Ollama 지원
• 이력 결과 (Historical results): 여러 번의 벤치마크 (benchmarks)를 실행하고 시간에 따른 변화를 비교
• 모델 비교 모드 (Model comparison mode): 동일한 프롬프트 (prompt)를 두 모델에서 나란히 실행
• 공유 가능한 결과 링크 (Shareable result links): 팀과 공유할 수 있는 URL 생성
• 프롬프트 커스텀 (Prompt customization): 다양한 워크로드 (workloads)를 시뮬레이션할 수 있도록 입력 프롬프트 길이를 선택 가능

이 기능 중 유용해 보이는 것이 있다면, GitHub 리포지토리 (GitHub repo)에 스타 (star)를 눌러주시고 어떤 기능을 가장 먼저 보고 싶은지 알려주세요.

지금 바로 체험해보세요

iamspeed.dev로 이동하여 설정 (settings)에서 API 키를 구성한 후, 실행 (Run)을 누르세요.

약 10초 안에 초당 토큰 수 (tokens-per-second)를 확인할 수 있습니다.

소스 코드는 MIT 라이선스이며 github.com/QAInsights/iamspeed.dev에서 확인할 수 있습니다. 기여 (Contributions)는 언제나 환영합니다.

즐거운 테스트 되세요!

현재 프로덕션 (production)에서 어떤 LLM 제공자를 사용하고 계신가요? 그리고 TTFT (Time To First Token)는 어느 정도로 나타나고 있나요? 아래에 댓글을 남겨주세요. 수치가 어떻게 다른지 정말 궁금합니다.