Luka's Playground - 개발자의 놀이터

AIKit — 개발 회고

시작

"또 시작하고 안 끝내는 프로젝트가 아닐까."

사이드 프로젝트를 시작할 때마다 드는 생각이다. 그런데 AIKit은 달랐다. 기능이 동작하는 라이브러리가 나왔고, GitHub에 공개했고, 문서와 예제를 작성했고, 블로그 시리즈 8편을 완성했다.

---

첫 번째 버전 (v0.1.0)

처음에는 50줄짜리 AIClient 클래스였다. OpenAI API를 호출하고 응답을 반환하는 게 전부였다.

// v0.1.0 — 50줄짜리 시작
class AIClient {
    async chat(message, apiKey) {
        const response = await fetch('https://api.openai.com/v1/chat/completions', {
            headers: { 'Authorization': `Bearer ${apiKey}` },
            body: JSON.stringify({
                model: 'gpt-3.5-turbo',
                messages: [{ role: 'user', content: message }]
            })
        });
        const data = await response.json();
        return data.choices[0].message.content;
    }
}

이걸 퍼즐 게임 힌트 생성에 쓰다가, 블로그 초안 작성 프로젝트에도 붙이다가, "매번 복붙하지 말고 라이브러리로 만들자"고 결심했다.

---

기술 선택의 이유

JavaScript (TypeScript가 아닌 이유)

선택	이유
빌드 도구 불필요	<script> 한 줄로 바로 사용
브라우저/Node 양쪽 호환	별도 설정 없음
진입장벽 최소화	CDN으로 시작 가능
의존성 0개	node_modules 없는 라이브러리

CDN 우선 전략

npm 설치도 지원하지만, <script src="..."> 한 줄로 시작할 수 있는 것을 최우선으로 했다. 초보자가 바로 써볼 수 있어야 한다고 판단했다.

오픈소스로 공개한 이유

"코드가 완벽하지 않은데 공개해도 되나?" — 이 고민을 오래 했다. 결론: 완벽하지 않아도 공개하는 게 안 하는 것보다 낫다. MIT 라이선스로 누구나 쓸 수 있도록 했다.

---

현재 상태 (v1.1.1)

항목	수치
소스 코드	~2,100줄
테스트 코드	~800줄
문서	~500줄
예제	~300줄
테스트 커버리지	87%
의존성 (런타임)	0개

빌드 결과

dist/
├── aikit.js      ← ESM (import)
├── aikit.umd.js  ← UMD (require + browser)
└── aikit.min.js  ← Minified (CDN 배포용)

Rollup으로 3가지 포맷을 빌드한다. aikit.min.js는 50KB 이하로 CDN에서 빠르게 로드된다.

---

AIKit을 쓰고 있는 프로젝트

프로젝트	용도
퍼즐 게임	힌트 생성
블로그 도우미	초안 작성
챗봇 데모	라이브러리 데모

---

배운 것

기술적

1. Adapter Pattern의 위력 — 프로바이더 추가가 1시간이면 끝남
2. 캐싱의 중요성 — 같은 API를 반복 호출하는 경우가 생각보다 많음
3. 비용 추적은 필수 — 모니터링 없이는 비용이 눈덩이처럼 불어남

프로젝트 관리

1. 2주 안에 MVP — 오래 끌면 흥미를 잃는다
2. 공개하고 나서 다듬기 — 비공개로 완벽을 추구하면 영원히 안 나옴
3. 블로그로 기록 — 개발 과정을 글로 남기면 자기 자신도 정리됨

QA 마인드셋

1. "동작하는 코드"보다 "깨지지 않는 코드"
2. 에러 분류를 먼저 설계하고 코드를 나중에 작성
3. 테스트 커버리지 80% 이상을 유지

---

시리즈 정리

#	주제	핵심
1	왜 만들었나	4가지 문제 정의
2	아키텍처	Adapter Pattern + SOLID
3	QA 관점	ResponseValidator + 에러 분류
4	챗봇 만들기	HTML 1개로 완성
5	PHP 연동	클라이언트 사이드 AI + 서버 저장
6	React/Vue	Custom Hook / Composable
7	비용 최적화	캐싱 + 토큰 제한 + 모델 선택
8	회고	이 글

---

앞으로

• 새 프로바이더 추가 (Mistral, Cohere 등)
• Streaming 응답 지원
• TypeScript 타입 정의 강화
• NPM 다운로드 수 확대

---

마무리

사이드 프로젝트의 핵심은 "완성"이다. 아이디어는 누구나 있지만 끝까지 만들어서 공개하는 건 다른 문제다. AIKit은 완벽하지 않지만, 동작하고, 공개되어 있고, 문서화되어 있다. 그것만으로도 의미가 있다고 생각한다.

---

GitHub: github.com/lukaPlayground/aikit
라이브 데모: lukaplayground.github.io/aikit
블로그: lukaplayground.tistory.com