1. 시작하기 전에

1.1 tubeCanvas란?

tubeCanvas는 교수자가 영상 위에 퀴즈, 자막, 문서, 분기 학습 등을 시각적으로 배치하여 인터랙티브한 이러닝 콘텐츠를 만들 수 있는 웹 기반 저작도구입니다. 코딩 지식 없이 드래그 앤 드롭만으로 H5P 수준의 콘텐츠를 빠르게 제작하고, SCORM 패키지로 어떤 LMS에도 배포할 수 있습니다.

1.2 무엇을 만들 수 있나요?

• 강의 영상 중간에 객관식 / 참거짓 / 단답형 / 빈칸 퀴즈를 삽입한 콘텐츠
• 학습자 응답에 따라 다른 시점으로 점프하는 분기 학습
• 자막 / 챕터 / 이미지 핫스팟 / 첨부 문서가 포함된 풍부한 멀티미디어 콘텐츠
• Moodle, Canvas, Blackboard 등 SCORM 호환 LMS에 직접 업로드 가능한 패키지
• xAPI Statement로 학습 분석 시스템에 보고되는 콘텐츠

1.3 시스템 요구사항

2. tubeCanvas 첫 화면 이해하기

tubeCanvas는 5개의 영역으로 구성되어 있습니다.

2.1 화면 구성

3. 영상 등록하기

3.1 영상 파일 업로드 (권장)

1. 상단바에서 "영상 업로드" 버튼 클릭
2. MP4, WebM, MOV 등 영상 파일 선택 (최대 2GB)
3. 자동으로 메타데이터(길이, 해상도) 추출
4. 썸네일 자동 생성
5. 타임라인이 영상 길이로 갱신

3.2 YouTube URL 등록

상단바의 빨간 "YouTube" 버튼 클릭. 지원하는 URL 형식:

• https://www.youtube.com/watch?v=...
• https://youtu.be/...
• https://www.youtube.com/embed/...
• https://www.youtube.com/shorts/...
• 11자 video ID 직접 입력

3.3 영상 트리밍 (파일 영상만)

영상의 시작/종료 부분을 잘라낼 수 있습니다. 원본을 수정하지 않고 콘텐츠에만 적용.

4. 9가지 인터랙션 활용법

좌측 라이브러리에서 카드를 드래그해서 타임라인이나 영상 위에 추가하세요.

4.1 객관식 퀴즈 (Multiple Choice)

보기 중 정답 선택. 다중 정답도 가능.

• 질문과 보기 입력
• 정답 보기에 체크 표시
• 정답/오답 피드백 메시지
• "보기 섞기" 옵션

4.2 참/거짓 (True or False)

간단한 진위 판단 퀴즈.

4.3 단답형 (Short Answer)

• 정답 단어 입력
• 동의어 처리 ("엽록체 / chlorophyll" 같이 여러 답 허용)
• 대소문자 구분 옵션

4.4 빈칸 채우기 (Fill in the Blanks)

입력 형식:

광합성은 [[빛]] 에너지를 [[화학]] 에너지로 전환합니다.

[[정답]] 형식으로 빈칸 표시.

4.5 텍스트 오버레이 (Text Overlay)

영상 위에 자유로운 텍스트 박스. HTML 일부 허용 (볼드, 이탤릭, 컬러).

4.6 자막 (Caption)

시간 동기화된 자막. 학습자가 CC 버튼으로 ON/OFF 가능. SRT/VTT 파일 일괄 업로드 지원.

4.7 이미지 핫스팟 (Image Hotspot)

이미지 위의 특정 위치에 클릭 가능한 점. 해부도, 지도, 다이어그램 학습에 효과적.

4.8 문서 첨부 (Document)

PDF, PPT, DOCX 등 다운로드 가능한 첨부 파일 (최대 50MB).

4.9 챕터 (Chapter)

영상을 의미 단위로 구분. 학습자가 좌측 사이드바에서 비선형 탐색 가능.

5. 분기 학습 만들기

5.1 분기 시나리오 예시

5.2 설정 방법

1. 객관식/참거짓/단답형 인터랙션 추가
2. 우측 속성 패널 → "분기 (Branching)" 섹션 펼치기
3. "정답 시 점프": 시간 입력 (또는 null=분기 없음)
4. "오답 시 점프": 복습 시점 입력
5. 미리보기에서 동작 확인

6. AI 자동 자막 활용하기

6.1 동작 방식

상단바의 "AI 자동 자막" 버튼 클릭하면 자동 자막이 생성됩니다. 현재 베타는 시뮬레이션 모드이며, 정식 출시 시 Whisper STT 기반으로 전환됩니다.

6.2 SRT/VTT 파일 업로드

이미 자막 파일이 있다면 "자막 업로드" 메뉴로 직접 업로드 가능. .srt 또는 .vtt 파일을 자동으로 시간 동기화하여 인터랙션으로 추가합니다.

7. 미리보기로 학습자 화면 확인

1. 상단바 "미리보기" 버튼 클릭
2. 전체화면 모달이 열리며 영상 자동 재생
3. 인터랙션 시점에 자동으로 오버레이 표시
4. 응답해보고 분기, 피드백 동작 확인
5. 영상 종료 시 결과 요약 화면이 자동 표시
6. ESC 키 또는 닫기 버튼으로 종료

8. 5가지 패키지 형식 비교

저작한 콘텐츠를 어떻게 배포할지에 따라 형식을 선택하세요.

8.1 어떤 형식을 선택해야 하나요?

• 학교 LMS에 업로드 → SCORM 2004 (대부분 호환)
• 구식 LMS 또는 호환성 확인 안 됨 → SCORM 1.2
• USB로 공유 / 더블클릭 재생 → 단일 HTML 파일
• 내부망 정적 서버에 배포 → HTML5 패키지
• 학습 분석 LRS 있음 → xAPI

9. SCORM으로 LMS에 업로드하기

9.1 SCORM 패키지 만들기

1. 저작도구에서 콘텐츠 완성
2. 상단바 "패키지 출력" 드롭다운 클릭
3. "SCORM 2004" (또는 1.2) 선택
4. ZIP 파일 자동 다운로드
5. ZIP을 그대로 LMS에 업로드 (압축 풀지 마세요)

9.2 Moodle 업로드

1. 코스 → 편집 모드 활성화
2. "활동 또는 자료 추가" → "SCORM 패키지"
3. 이름 입력 후 ZIP 파일 업로드
4. 저장 후 학습자가 클릭하면 tubeCanvas 학습자 뷰어로 자동 진입

9.3 Canvas 업로드

1. 코스 → Settings → Apps → SCORM 활성화 (관리자 권한)
2. 모듈에서 "+ Add Item" → "External Tool" → "SCORM"
3. ZIP 파일 업로드 후 활성화

9.4 자동으로 LMS에 전송되는 데이터

10. 단축키 모음

11. 자주 묻는 질문 (FAQ)

Q1. 영상 업로드가 너무 느려요

tubeCanvas는 클라우드가 아닌 브라우저 메모리에서 영상을 처리합니다. 처음 로딩 시 메타데이터 추출에 시간이 걸릴 수 있습니다. 2GB에 가까운 대용량은 압축을 권장합니다.

Q2. 작업 중 새로고침하면 데이터가 사라지나요?

현재 베타 버전은 자동 저장이 없습니다. Ctrl+S로 자주 저장해주세요. content.json 파일로 다운로드됩니다. Phase 2에서 클라우드 자동 저장 추가 예정.

Q3. 모바일에서도 학습자가 볼 수 있나요?

Standalone Player와 SCORM 패키지는 모바일에서도 동작합니다. 다만 모바일 최적화는 Phase 2 예정. 현재는 데스크톱 권장.

Q4. YouTube 영상에 광고가 나와요

YouTube IFrame Player API는 광고 차단을 지원하지 않습니다. 학생이 광고 없이 학습하려면 영상 파일을 직접 업로드하세요.

Q5. SCORM 패키지 점수가 LMS에 반영 안 돼요

• 저작도구가 정적 호스팅 환경(prod 빌드)에서 실행됐는지 확인
• 패키지 안 SCORM_README.txt에 "학습자 번들 임베드됨" 표시 확인
• LMS와 콘텐츠가 same-origin인지 확인
• LMS의 SCORM 활동 설정에서 '점수 보고' 활성화 확인

Q6. 분기 학습이 복잡해지면?

한 영상에 분기는 2~3개를 넘지 마세요. 학습자가 자기 위치를 잃기 쉽습니다. 큰 분기는 별도 영상으로 나누는 게 효과적입니다.

Q7. 베타 기간의 기능 제한?

Closed Beta 동안은 모든 기능이 무료로 제공됩니다. 정식 출시 시 Free / Standard / Pro 요금제가 적용되지만, 베타 참여자는 6개월간 Standard 50% 할인 쿠폰을 받습니다.

12. 문제 해결 가이드

12.1 영상이 재생되지 않음

• 브라우저가 최신인지 확인 (Chrome 110+ 권장)
• 영상 코덱이 H.264인지 확인 (HEVC/H.265는 브라우저 지원 제한)
• 영상 파일이 손상되지 않았는지 다른 플레이어로 확인

12.2 인터랙션이 사라지거나 안 보임

• 위치 좌표 (x, y, width, height)가 0~100 범위인지 확인 (% 단위)
• startTime이 endTime보다 작은지 확인
• 타임라인에서 인터랙션 블록 클릭해서 우측 속성 패널 확인

12.3 패키지 출력 실패

• 인터랙션이 1개 이상 있어야 합니다
• 브라우저 메모리 부족 시 다른 탭 닫고 재시도
• 대용량 영상(1GB+)은 패키징 시간이 오래 걸릴 수 있음

12.4 베타 도중 버그/문의 신고

이메일: hello@tubecanvas.kr

스크린샷 + 브라우저 버전 + 동작 상황을 함께 보내주시면 빠른 답변이 가능합니다.

13. LMS 시스템 통합 개요

13.1 tubeCanvas와 LMS의 관계

tubeCanvas는 학습 콘텐츠 저작과 표준 패키지 출력만 담당하고, 학습자 관리 / 진도 추적 / 성적 처리는 LMS가 담당합니다. 둘은 SCORM 또는 xAPI 표준을 통해 통신합니다.

통신 흐름 (SCORM 기준):

1. 교수자: tubeCanvas에서 콘텐츠 제작 → SCORM 패키지 ZIP 다운로드
2. LMS 관리자: ZIP을 LMS에 업로드 → SCORM 활동(activity) 생성
3. 학습자: LMS에서 활동 클릭 → LMS가 콘텐츠를 iframe으로 표시
4. 학습자가 응답 → tubeCanvas 학습자 뷰어 → SCORM API → LMS DB
5. 관리자: LMS 성적부에서 점수와 완료 상태 확인

13.2 지원 표준

13.3 권장 LMS

• Moodle 3.x~4.x — 오픈소스, SCORM 모두 지원, 한국어 지원 우수
• Canvas LMS — Instructure사, LTI 1.3 우수
• Blackboard Learn — 기업/대학용
• Brightspace (D2L) — 캐나다 기반, 글로벌
• 자체 LMS — SCORM Player 라이브러리 사용

14. SCORM 데이터 모델 상세

14.1 SCORM 1.2 데이터 모델

14.2 SCORM 2004 데이터 모델

14.3 합격 기준 (Mastery Score)

기본 합격 기준은 정답률 70%입니다. 결정 위치:

• tubeCanvas 학습자 코드: MASTERY_SCORE_PERCENT = 70 상수
• imsmanifest.xml: adlcp:masteryscore=70 (1.2) 또는 imsss:minNormalizedMeasure=0.7 (2004)

14.4 API 호출 시퀀스

// 1. 페이지 로딩
LMSInitialize("")
LMSGetValue("cmi.core.student_name")  // 로그용
LMSSetValue("cmi.core.lesson_status", "incomplete")
LMSCommit("")

// 2. 학습자가 응답할 때마다
LMSSetValue("cmi.core.score.raw", "50")
LMSCommit("")

// 3. 영상 종료
LMSSetValue("cmi.core.lesson_status", "completed")
LMSSetValue("cmi.core.lesson_status", "passed")  // ≥70%
LMSSetValue("cmi.core.score.raw", "75")
LMSSetValue("cmi.core.session_time", "0000:05:23.45")
LMSCommit("")

// 4. 페이지 닫기 직전
LMSFinish("")

15. 진도율 및 점수 추적 구현

15.1 Moodle 데이터 확인

1. 강좌 → 좌측 "성적" 또는 "보고서"
2. SCORM 활동 클릭 → "보고서" 탭
3. "상호작용" 보고서에서 각 응답까지 추적
4. CSV/Excel 내보내기 가능

15.2 Canvas 데이터 확인

1. 코스 → "Grades" 탭
2. SCORM 활동 열 확인
3. API: /api/v1/courses/:id/assignments/:id/submissions

15.3 자체 LMS 구현 — SCORM 라이브러리

15.4 자체 LMS 최소 구현 예제 (Node.js Express)

// server.js
app.get('/api/scorm/cmi/:contentId', (req, res) => {
  res.json(getCMIForLearner(req.user.id, req.params.contentId));
});

app.post('/api/scorm/cmi/:contentId', (req, res) => {
  saveCMI(req.user.id, req.params.contentId, req.body);
  res.json({ ok: true });
});

// client.html
<iframe src="/courses/123/scorm/index.html"></iframe>
<script>
window.API = {
  LMSInitialize: (s) => 'true',
  LMSSetValue: async (key, val) => { /* POST to /api/scorm/cmi */ },
  LMSGetValue: (key) => { /* 캐시된 값 반환 */ },
  LMSCommit: async (s) => { /* flush */ },
  LMSFinish: async (s) => { /* terminate */ },
};
</script>

15.5 진도율 정의 매핑

16. 트러블슈팅 (LMS 연계)

16.1 LMS에서 콘텐츠가 안 보임

증상: SCORM 활동 클릭해도 빈 화면

• ZIP 안 index.html이 placeholder인 경우 → tubeCanvas를 prod 빌드 + 정적 호스팅에서 다시 출력
• LMS가 iframe sandbox로 격리한 경우 → LMS 설정 확인
• Mixed Content (HTTPS LMS + HTTP 콘텐츠) → 브라우저 콘솔 확인

16.2 점수가 LMS에 안 들어옴

진단 절차:

1. 브라우저 개발자 도구(F12) → Console 탭
2. 학습자 응답 시 [tubeCanvas] SCORM ... 연결됨 메시지 확인
3. "SCORM 환경 아님" → LMS가 API 객체를 노출하지 않음
4. "연결됨"인데 점수 안 들어가면 → LMS의 SCORM 핸들러 오류
5. SCORM Cloud의 "Debug Logs"에서 SetValue 추적 가능

16.3 한글 이름이 깨짐

증상: cmi.core.student_name이 "???"

원인: LMS가 UTF-8을 안 쓰거나 SCORM 1.2의 4096 바이트 제한 초과

해결: LMS가 SCORM 2004를 지원하면 그것 사용 (64000자 제한)

16.4 학습 재개(Resume) 안 됨

증상: 학습자가 도중 닫고 다시 들어와도 처음부터 시작

원인: cmi.suspend_data 미사용

해결: Phase 2에서 추가 예정. 임시 방안은 학습자가 챕터 단위로 진행

16.5 SCORM Cloud로 호환성 검증 (강추!)

실제 LMS에 배포하기 전 SCORM Cloud 30일 무료 평가판으로 검증 권장:

1. https://cloud.scorm.com 회원가입
2. Library → Add Content → tubeCanvas SCORM ZIP 업로드
3. Launch → 학습 진행
4. Reports → 점수/완료 확인
5. Debug Logs → 모든 SetValue 호출 캡처

궁금한 점은 hello@tubecanvas.kr로 문의해주세요.

문서 버전 1.0 · 2026년 6월 4일