EduTap 통합 가이드

EduTap AI 튜터를 웹사이트에 통합하려면 두 가지 단계가 필요합니다:

SDK 연동: 웹사이트에 AI 튜터 UI를 띄우기
데이터 연동: AI 튜터가 학습할 강의 데이터 제공하기

통합 단계

1단계: SDK 연동

웹사이트에 TapKit SDK를 설치하여 AI 튜터 인터페이스를 통합합니다. 프로젝트 환경에 맞춰 CDN 또는 npm 방식을 선택할 수 있습니다.

SDK 연동 가이드

CDN/npm 설치, API 사용법, React 통합 등 SDK 연동 전체 가이드

주요 내용:

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. 플로팅 버튼 추가 (선택) -->
<tap-button position="bottom-right" size="large"></tap-button>

<!-- 4. API 키 설정 -->
<script>
  const kit = document.querySelector('tap-kit');
  kit.apiKey = 'your-api-key';
</script>

tap-button 옵션

속성	값	설명
`position`	`bottom-right`, `bottom-left`, `top-right`, `top-left`	버튼 위치
`size`	`small` (48px), `medium` (56px), `large` (64px)	버튼 크기
`floating`	`true`, `false`	고정/플로팅 모드

<tap-button>은 독립적으로도 동작하지만, <tap-kit>과 함께 사용하면 클릭 시 자동으로 채팅창이 토글됩니다.

비디오 플레이어 연동 (권장)

AI 튜터가 현재 재생 시점을 인식하려면 비디오 플레이어를 연동하세요:

<video id="lecture-video" src="/lecture.mp4" controls></video>
<tap-kit user-id="user-1" course-id="course-1" clip-id="clip-789"></tap-kit>
<tap-button></tap-button>

<script>
  const kit = document.querySelector('tap-kit');
  kit.apiKey = 'your-api-key';

  // 비디오 연동 (videoTarget 속성)
  kit.videoTarget = document.getElementById('lecture-video');
</script>

비디오 연동 시 이점:

AI가 현재 재생 시점 기반으로 더 정확한 답변 제공
채팅에서 특정 구간 클릭 시 비디오 자동 이동
강의 변경(setCourse) 시 자동으로 새 클립 추적

커스텀 비디오 플레이어(YouTube, Vimeo 등)는 어댑터를 통해 연동할 수 있습니다. 자세한 내용은 비디오 연동 가이드를 참조하세요.

완전한 통합을 위해서는 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할 수 있습니다.

다음 단계

SDK 연동 시작하기

웹사이트에 AI 튜터 UI 통합

데이터 연동 시작하기

강의 데이터 준비 및 업로드

비디오 연동

비디오 플레이어 동기화

API Reference

tap-kit, tap-button 전체 API