EduTap 통합 가이드
EduTap AI 튜터를 웹사이트에 통합하는 완벽한 가이드
EduTap AI 튜터를 웹사이트에 통합하려면 두 가지 단계가 필요합니다:
- SDK 연동: 웹사이트에 AI 튜터 UI를 띄우기
- 데이터 연동: AI 튜터가 학습할 강의 데이터 제공하기
통합 단계
1단계: SDK 연동
웹사이트에 TapKit SDK를 설치하여 AI 튜터 인터페이스를 통합합니다. 프로젝트 환경에 맞춰 CDN 또는 npm 방식을 선택할 수 있습니다.
주요 내용:
- CDN 방식: 빌드 도구 없이 HTML에 바로 추가
- npm 방식: React, Vue, Next.js 등 모던 프레임워크 통합
- API 레퍼런스: 메서드, 이벤트, 설정 옵션
- 스타일링: UI 커스터마이징
- 비디오 연동: 타임라인 동기화
2단계: 데이터 연동
AI 튜터가 강의 내용을 학습할 수 있도록 강의 데이터를 제공합니다.
주요 내용:
- 강의 정보 구조 (JSON)
- 자막 파일 (SRT/VTT)
- 학습 자료 (PDF, HTML, 코드 파일)
- 파일 서버 API 사용법
- 데이터 전처리 프로세스
빠른 시작 예제
HTML 파일에 SDK를 추가하고 초기화하는 기본 예제입니다:
<!-- 1. SDK 로드 -->
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<!-- 2. TapKit 요소 추가 -->
<tap-kit
user-id="user-1"
course-id="course-1"
clip-id="clip-789">
</tap-kit>
<!-- 3. API 키 설정 -->
<script>
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';
</script>완전한 통합을 위해서는 SDK 연동과 데이터 연동 두 단계를 모두 완료해야 합니다. SDK만 연동하면 UI는 표시되지만, 데이터를 연동해야 AI 튜터가 강의 내용을 학습하여 정확한 답변을 제공할 수 있습니다.
주요 기능
- 자동 업데이트: CDN 기반 아키텍처로 최신 기능 자동 적용
- 경량: npm 패키지 ~2.8KB (gzipped)
- 타임라인 동기화: 비디오 플레이어와 양방향 통신
- 이벤트 시스템: 채팅 상태 추적 및 제어
- TypeScript 지원: 완전한 타입 정의 제공
- 커스터마이징: 위치, 크기, 스타일 자유롭게 조정
시스템 요구사항
브라우저 지원
ES2020을 지원하는 모던 브라우저:
- Chrome 80+ (2020년 2월~)
- Firefox 74+ (2020년 3월~)
- Safari 13.1+ (2020년 3월~)
- Edge 80+ (2020년 2월~)
npm 방식 사용 시
React를 사용하는 경우 다음 버전이 필요합니다:
{
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0"
}
}React 없이도 사용 가능하며, React Hook은 선택적으로 import할 수 있습니다.