⚡ 한눈에 보는 전체 흐름

1. DocCast란?

DocCast는 강의자료 PDF를 띄워놓고 카메라/마이크로 설명하면서, 펜·하이라이터·도형으로 자료에 표시까지 하는 강의 녹화 도구예요. 녹화가 끝나면 페이지 전환 시점이 자동으로 챕터 마커로 변환되어 tubeCanvas 저작도구에서 바로 편집할 수 있어요.

1.1 무엇이 다른가요?

1.2 누구에게 좋나요?

• 📚 강의자료(PDF)를 기반으로 강의하시는 교수자
• 🖥 별도 영상 편집 도구가 부담스러운 분
• 🏫 빠르게 인터랙티브 학습 콘텐츠를 만들고 싶은 분
• 🎯 LMS에 바로 업로드할 SCORM 패키지가 필요한 분

2. 준비물 체크

2.1 필수

• 강의자료 PDF — 5~50페이지 권장 (큰 PDF는 렌더링에 시간 걸림)
• 카메라/마이크 권한 — 브라우저에서 허용 필요
• 최신 Chrome / Edge / Firefox — Safari 14.1+ 가능
• 조용한 환경 — 마이크 노이즈 최소화

2.2 권장

• 외장 마이크 — 노트북 내장보다 훨씬 좋은 음질
• 1080p 이상 모니터 — 정확한 잉크 그리기에 유리
• 이미지/PNG 슬라이드 — PDF가 없으면 슬라이드 이미지도 OK

3. ① 준비 단계

3.1 DocCast 열기

1. tubeCanvas 상단에서 [🎬 녹화] 버튼 클릭 → 새 탭에서 DocCast 열림
2. 직접 주소: http://localhost:5175/record.html

3.2 카드 ① — 문서 업로드

• 📕 PDF — PDF.js로 페이지별 PNG 자동 변환 (HD 해상도)
• 🖼 PNG / JPG / WebP — 단일 슬라이드로 즉시 처리
• 🎓 "데모 슬라이드" 링크 — 테스트용 5장 placeholder

드래그&드롭 또는 카드 클릭으로 파일 선택 → 업로드되면 페이지 수와 파일명이 표시돼요.

3.3 카드 ② — 카메라/마이크

"카메라 켜기" 토글 → 브라우저가 권한 요청 → 허용 시 미리보기에 자기 모습 보임. 마이크도 같은 방식.

3.4 카드 ③ — 레이아웃 선택

3.5 녹화 시작

3가지 카드가 모두 채워지면 하단 [🔴 녹화 시작] 버튼이 활성화돼요. 클릭하면 다음 단계로 이동.

4. ② 녹화 단계

4.1 3초 카운트다운

녹화 시작 시 3-2-1 카운트다운 후 자동 녹화 시작. 이 시간 동안 마지막 점검:

• 카메라에 자신이 잘 보이는지
• 마이크 레벨이 잡히는지 (좌측 사이드바 시각화)
• 첫 페이지가 의도한 슬라이드인지

4.2 상단 컨트롤 바

• 🔴 REC + 경과 시간 (녹화 중 깜박이는 빨간 점)
• 📄 문서 정보 — 현재 페이지 / 전체 페이지
• ⏸ 일시정지 / ▶ 재개 버튼
• ⏹ 종료 버튼

4.3 페이지 넘김

4.4 일시정지 / 재개

P 키 또는 ⏸ 버튼. 일시정지 중에는 녹화 시간이 멈추고 재생하면 이어서 계속.

4.5 녹화 종료

⏹ 종료 버튼 클릭 → "저장 중..." 1~2초 → 검토 단계로 자동 이동.

5. 펜·하이라이터·도형 도구

녹화 화면 상단에 도구 팔레트가 있어요. 강의 중에 PDF 위에 직접 그릴 수 있고, 그린 내용은 영상에 그대로 들어갑니다.

5.1 8가지 도구

5.2 색상과 굵기

도구 선택 후 색상 4가지 (검정/빨강/노랑/파랑), 굵기 3단계 (얇게/보통/굵게) 선택 가능. 지우개는 굵기로 크기를 조절해요.

5.3 페이지별 잉크 보존 ⭐

중요: 페이지를 넘기면 이전 페이지 잉크는 화면에서 사라지지만 데이터는 보존됩니다. 다시 그 페이지로 돌아오면 그렸던 잉크가 복원돼요. 정규화 좌표로 저장되어 화면 크기가 바뀌어도 위치가 정확합니다.

5.4 되돌리기와 모두 지우기

• Ctrl/⌘+Z — 마지막 작업 되돌리기 (그리기와 지우개 모두)
• 도구 팔레트의 🗑️ 모두 지우기 — 현재 페이지의 모든 잉크 제거 (Undo로 복원 가능)

5.5 강의 흐름 예시

1. 1페이지 도입: 마우스 모드로 시작 → 설명만
2. 2페이지로 넘김 (→): 자동 챕터 생성
3. 🖍️ 하이라이터 (H) → 노랑 → 핵심 단어 칠하기
4. ✏️ 펜 (B) → 빨강 → 단어에 동그라미
5. ⭕ 원 (O)으로 그래프 영역 강조
6. 🔴 레이저 (K)로 일시적으로 여기저기 지시
7. 다음 페이지 (→) → 잉크는 화면에서 사라짐 (영상엔 들어감)
8. 마지막에 ⏹ 종료

6. ③ 검토 단계

6.1 영상 미리보기

녹화 종료 직후 검토 화면 상단에 🎬 녹화된 영상 카드가 나타나요. HTML5 video 플레이어로 바로 재생 가능 — 잉크와 카메라가 모두 잘 합성됐는지 확인하세요.

6.2 영상 다운로드

영상 카드 하단의 💾 영상 다운로드 버튼 → WebM 파일이 즉시 다운로드됩니다. 파일명: {문서이름}_녹화.webm

6.3 녹화 요약 정보

• ⏱ 총 시간 / 📄 문서 / 📑 페이지 수 / 🔄 페이지 전환 횟수
• 📷 카메라·마이크 사용 여부
• 📐 사용된 레이아웃

6.4 다음 단계 선택

• 🎨 tubeCanvas로 보내기 ⭐ — 영상이 저작도구에 자동 임포트 (가장 빠른 흐름)
• 🔁 다시 녹화 — 처음부터 다시 시작 (이전 녹화는 폐기됨)

7. tubeCanvas 자동 연동 ⭐

이게 DocCast의 핵심 가치예요. 검토 화면에서 [🎨 tubeCanvas로 보내기]를 누르면:

7.1 자동으로 일어나는 일

1. 녹화된 영상이 IndexedDB에 임시 저장됨
2. 페이지 전환 이벤트가 챕터 마커로 변환됨
3. tubeCanvas (editor.html)가 같은 탭에 열림
4. 저작도구가 시작 시 자동으로 핸드오프 감지
5. 영상이 자동 임베드 + 챕터 마커가 타임라인에 깔림
6. 환영 다이얼로그가 결과 요약 표시

7.2 환영 다이얼로그

"DocCast 녹화가 도착했어요!" 다이얼로그가 자동으로 뜨고 다음 정보가 보여요:

• 📄 문서 제목 / ⏱ 녹화 시간 / 📑 페이지 수
• 📍 자동 챕터 마커 개수
• 🎬 영상 로드 완료 (사이즈 표시)
• 다음 단계 가이드 4가지

7.3 편집 시작

"편집 시작하기" 버튼 → 평소처럼 tubeCanvas 화면 진입. 차이점:

• 중앙 미리보기에 녹화한 영상이 재생됨 (잉크 포함)
• 하단 타임라인에 챕터 마커가 자동 배치됨
• 각 챕터 클릭 시 해당 시간으로 영상 점프

7.4 챕터 마커에 인터랙션 추가

챕터는 출발점에 불과해요. 챕터 마커 위치에 다음을 추가하세요:

• 퀴즈 — 페이지마다 이해도 확인
• 설문 — "이 부분 이해되셨나요?" 익명 응답
• 텍스트 오버레이 — 핵심 키워드 강조
• 분기 학습 — 정답/오답에 따라 다른 페이지로 점프

7.5 패키지 출력

편집이 끝나면 평소처럼 [패키지 출력] → SCORM 또는 단일 HTML 등 원하는 형식. LMS에 업로드하거나 자체 호스팅하면 끝.

8. 영상 직접 업로드 (대안 흐름)

자동 연동 외에도 영상 파일을 별도로 보관하고 나중에 업로드하는 흐름도 가능해요.

8.1 언제 이 방식?

• 녹화 후 바로 편집하지 않고 시간을 두고 작업할 때
• 다른 사람이 녹화한 webm을 받아서 편집할 때
• 영상을 다른 곳(클라우드 등)에 백업해두고 싶을 때

8.2 두 가지 진입 메뉴

tubeCanvas는 webm 파일을 두 메뉴 어디서든 받을 수 있어요:

1. [⚙️ 설정] → [불러오기] — JSON 콘텐츠와 영상 모두 자동 감지
2. [📺 영상] → [영상 업로드] — 영상 전용 입구

8.3 단계

1. DocCast 검토 화면에서 💾 영상 다운로드 → webm 파일 저장
2. 나중에 tubeCanvas (editor.html) 열기
3. [설정] → [불러오기] (또는 [영상] → [영상 업로드])
4. webm 파일 선택 → 자동으로 영상으로 인식되어 임포트
5. 토스트 "영상 업로드됨 (1분 23초, 12.3MB)" 표시

9. 알려진 한계와 권장사항

9.1 영상 포맷

출력은 WebM (Chrome/Edge: VP9, Firefox: VP8, Safari: H.264 mp4). 학습자 뷰어는 모두 지원하지만, 다른 도구로 가져갈 때는 mp4 변환이 필요할 수 있어요.

9.2 진행 중 stroke은 영상에 약간 지연 반영

드래그하는 동안에는 화면에 즉시 표시되지만, 영상에 합성되는 것은 stroke 완성(마우스 떼는 시점)부터예요. 빠르게 그리면 영상에서는 약간 늦게 나타날 수 있습니다. 천천히 그리는 게 시각적으로 가장 깔끔.

9.3 IndexedDB 영상 보관 기간

녹화한 영상은 IndexedDB에 임시 저장되며 24시간 후 자동 정리될 수 있어요. 영구 보관을 원하면 검토 화면에서 반드시 💾 다운로드하세요.

9.4 PPT 파일 직접 지원 안 함

PowerPoint(.ppt/.pptx)는 브라우저에서 직접 못 읽어요. PDF로 내보내거나 슬라이드를 PNG로 저장 후 업로드하세요.

9.5 권장 녹화 시간

• 10분 이내 — 권장 (학습자 집중력)
• 30분 이내 — OK (파일 크기 ~300MB)
• 1시간 이상 — 권장 안 함 (파일 크기 1GB+, IndexedDB 부담)

10. 자주 묻는 질문

Q1. 카메라 없이도 사용할 수 있나요?

네, "마이크만" 모드 또는 "문서만" 레이아웃 사용. 얼굴 안 보이고 음성과 자료만 들어갑니다.

Q2. 녹화 도중 실수하면 어떻게 하나요?

⏸ 일시정지 후 다시 시작하면 그 위치에서 이어집니다. 큰 실수면 ⏹ 종료 후 검토 화면에서 [🔁 다시 녹화] 클릭.

Q3. 페이지를 잘못 넘겼어요. 챕터 마커를 지울 수 있나요?

녹화 중에는 못 지워요. tubeCanvas로 가져간 후 챕터 마커를 클릭해서 삭제하면 됩니다.

Q4. 영상 화질을 더 높일 수 있나요?

현재는 1280×720 @ 30fps @ 2.5Mbps 고정. 향후 설정 옵션 추가 예정.

Q5. 강의 도중 음악이나 동영상을 보여줄 수 있나요?

현재는 정적 PDF/이미지만 지원해요. 동영상 임베드는 향후 기능.

Q6. 외부 화면 공유(예: 코드 에디터)도 가능한가요?

현재 미지원. 향후 getDisplayMedia API 활용한 화면 공유 모드 검토 중.

Q7. 잉크 데이터를 영상에서 빼고 따로 편집할 수 있나요?

현재는 영상에 영구 합성됩니다. 향후 잉크를 별도 트랙으로 분리해 편집 가능하게 하는 기능을 검토 중.

Q8. iPad나 태블릿에서 펜으로 그릴 수 있나요?

기술적으로 가능하지만 (Pointer Events 지원) 현재는 데스크톱 워크플로우만 검증됨. 태블릿 최적화는 후속 과제.

11. 단축키 치트시트

DocCast 사용 가이드 · tubeCanvas v25.25 · 2026년 6월