설치 방법 선택
CDN과 npm 중 프로젝트에 맞는 설치 방법을 선택하세요
TapKit는 CDN 방식과 npm 패키지 두 가지 방식으로 제공됩니다. 프로젝트 환경에 맞는 방법을 선택하세요.
빠른 비교
🚀 CDN 방식
스크립트 태그만 추가하면 끝!
장점:
- ✅ 설치 과정 없음 (즉시 사용)
- ✅ 빌드 도구 불필요
- ✅ 자동 업데이트 (항상 최신 버전)
- ✅ 번들 크기 영향 없음
단점:
- ⚠️ TypeScript 타입 별도 설치 필요
- ⚠️ 오프라인 환경에서 사용 불가
CDN 가이드 보기 →
📦 npm 방식
모던 프레임워크와 완벽 통합
장점:
- ✅ TypeScript 타입 기본 포함
- ✅ 버전 명시적 관리
- ✅ IDE 자동완성 즉시 사용
- ✅ 프레임워크와 자연스러운 통합
단점:
- ⚠️ npm/pnpm 설치 필요
- ⚠️ 빌드 도구 필요 (Webpack, Vite 등)
npm 가이드 보기 →
상세 비교
| 기능 | CDN 방식 | npm 방식 |
|---|---|---|
| 설치 방법 | <script> 태그 추가 | npm install @coxwave/tap-kit |
| 빌드 도구 | 불필요 | 필요 (Webpack, Vite, Rollup 등) |
| 업데이트 | 자동 (즉시 반영) | 수동 (npm update) |
| 초기 로딩 | 비동기 로드 (최소화) | 앱 번들에 포함 |
| TypeScript | @coxwave/tap-kit-types 별도 설치 | 기본 포함 |
| 오프라인 | ❌ 불가 | ✅ 가능 (번들 포함 시) |
| 번들 크기 영향 | 없음 (동적 로드) | ~2.8KB 추가 (gzipped) |
| IDE 자동완성 | 타입 패키지 설치 후 | 즉시 사용 |
중요: 두 방식 모두 내부적으로 CDN에서 최신 코드를 동적으로 로드합니다. 따라서 어떤 방식을 선택해도 자동 업데이트 혜택을 받습니다!
언제 어떤 방식을 선택할까?
CDN 방식을 선택하세요 👉
- 빠른 프로토타입: 아이디어를 빠르게 테스트하고 싶을 때
- 레거시 프로젝트: jQuery, Vanilla JS 등 빌드 도구가 없는 환경
- 단순한 HTML 페이지: 블로그, 랜딩 페이지 등
- 외부 스크립트 허용: CDN 로드가 가능한 환경
<!-- CDN 방식 예제 -->
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<script>
const sdk = new TapKit({ apiKey: "your-key" });
sdk.init({ course: { ... } });
</script>
<tap-button></tap-button>npm 방식을 선택하세요 👉
- React/Vue/Next.js: 모던 프레임워크 프로젝트
- TypeScript 프로젝트: 타입 안전성이 중요할 때
- 번들 최적화: Tree-shaking, Code splitting 필요
- 오프라인 지원: 번들에 포함하여 오프라인 동작
- 버전 관리: 특정 버전 고정이 필요한 경우
// npm 방식 예제
import TapKit from "@coxwave/tap-kit";
const sdk = new TapKit({ apiKey: "your-key" });
await sdk.init({ buttonId: "tap-button", ... });// React 방식 예제 (useTapKit 훅)
import { useTapKit } from "@coxwave/tap-kit/react";
const { isReady, setup } = useTapKit({ apiKey: "your-key" });npm 가이드 보기 → | React 통합 가이드 보기 →
자주 묻는 질문
Q. CDN 방식도 TypeScript 지원이 되나요?
네! @coxwave/tap-kit-types 패키지를 개발 의존성으로 설치하면 TypeScript 타입을 사용할 수 있습니다.
npm install -D @coxwave/tap-kit-types자세한 내용은 CDN 가이드의 TypeScript 섹션을 참고하세요.
Q. npm 방식도 자동 업데이트가 되나요?
네! npm 패키지는 경량 래퍼(~2.8KB)이며, 실제 SDK 코드는 CDN에서 동적으로 로드됩니다. 따라서 npm 패키지를 재설치하지 않아도 최신 기능이 자동으로 적용됩니다.
Q. 둘 다 사용해도 되나요?
프로젝트별로 다른 방식을 사용하는 것은 문제없지만, 같은 페이지에서 두 방식을 동시에 사용하는 것은 권장하지 않습니다.
Q. 버전을 고정하고 싶어요
CDN 방식에서 특정 버전을 고정하려면 loader.js 대신 버전별 파일을 직접 로드할 수 있습니다:
<!-- 특정 버전 고정 (예: 0.0.35) -->
<script src="https://files.edutap.ai/tap-sdk/versions/tap-kit-0.0.35.js"></script>단, 버그 수정과 보안 업데이트를 자동으로 받지 못하므로 권장하지 않습니다.
다음 단계
선택한 방식의 가이드를 읽고 빠르게 시작하세요!