Blog

개발 경험과 기술적인 고민들을 기록합니다.

태그로 필터링

Accessibility

Anthropic API

CVA

Claude API

Claude Code

Cost Optimization

Deep Dive

Design System

Developer Tools

Frontend

Git

GitHub

Heuristics

History

Hooks

JavaScript

LLM

Memoization

Meta Tooling

Metrics

Mobile

Next.js

Optimization

Performance

Product Design

React

Reconciliation

Refactoring

Supabase

System Design

TailwindCSS

Tip

Tutorial

TypeScript

UI/UX

VS Code Extension

Vanilla JS

Virtual DOM

Web Accessibility

Web Development

axe-core

i18n

iframe

npm CLI

shadcn/ui

렌더링 최적화

Claude Code 슬래시 커맨드 30개를 외우다가 결국 도구를 만들었다 — Claude Code Skills Panel 개발기

기억할 커맨드가 30개를 넘어가면서 시작된 페인 포인트. 7일 만에 v0.20에서 v0.44.6까지 45개 릴리즈를 거치며 4개 IDE · 4개 언어로 배포한 1인 사이드 프로젝트의 압축 사이클.

누적 토큰에서 회당 평균으로 — 메트릭의 정의가 기능보다 중요했던 순간

Claude Code Skills Panel 의 토큰 추적 기능은 v0.40 에서 도입됐지만 진짜 가치를 낸 건 v0.44.6 에서 메트릭을 다시 정의한 순간이었다. 같은 데이터, 같은 코드, 완전히 다른 사용자 인지.

세션당 LLM 비용을 ~10× 줄인 4단 게이트 — claude-distill 의 비용 모델 설계

매 세션 자동 실행되는 Stop hook 의 비용 부담을 4단 게이트(재귀 가드 → dedup → 휴리스틱 → Haiku)로 사전 차단. 본 추출 호출 비율을 ~10% 로 줄여 세션당 평균 비용을 ~$0 가까이 만든 설계.

Claude에게 같은 함정을 세 번째 설명하다가 만든 npm CLI — claude-distill 개발기

매 세션 휘발되는 결정·페일·노하우를 자동 누적하는 Stop hook 기반 글로벌 CLI. 4단 게이트로 비용 ~10× 절감하고, 첫 배포 3일 만에 주간 522 다운로드를 기록했다.

A11yGym 개발기: 웹 접근성 학습 플랫폼을 만들며 마주한 기술적 도전들

웹 접근성 학습 플랫폼 A11yGym을 개발하면서 겪었던 iframe 내 React JSX 렌더링 문제와 axe-core 실행 시의 기술적 난관들을 해결한 과정을 공유합니다.