PlaynPlay
PlaynPlay

북마크

다시 볼 장면을
학습자가 직접 표시합니다

학습자는 재생 중 메뉴에서 지금 위치를 제목과 함께 저장하고, 고객사는 그 목록을 PlaynPlay 서비스에 둘지 자사 DB에 둘지 고릅니다. 북마크 데이터 구조, 두 저장 방식의 차이, 기기를 바꿔도 목록을 잇는 설계, PC 커스텀 페이지 API를 정리했습니다.

최종 수정

북마크 기능을 표현한 PlaynPlay 일러스트
Learner Flow

학습자의 북마크 사용 순서

Android·iOS 기본 플레이어 화면 기준입니다. 저장하는 방법은 같고 고치는 동작이 다릅니다.

  1. 메뉴에서 북마크 열기

    위쪽 메뉴 버튼을 누르고 북마크를 고르면 저장된 목록이 나옵니다. 오른쪽 위 완료 버튼을 누르면 창이 닫힙니다.

  2. 지금 위치 저장

    왼쪽 위 플러스(+) 버튼을 누르면 제목 입력 팝업이 뜨고, 확인을 누르는 순간의 재생 위치가 저장됩니다. 제목 칸을 비워 두면 Untitled라는 이름이 붙습니다.

  3. 이름 바꾸기와 삭제

    Android는 각 행 오른쪽의 연필 버튼으로 이름을 바꾸고 맨 오른쪽 휴지통 버튼으로 지웁니다. iOS는 항목을 꾹 누른 채 왼쪽으로 조금 밀면 편집·삭제 버튼이 나오고, 끝까지 밀면 바로 삭제 확인 팝업이 뜹니다.

학습자 안내서를 만들 때는 편집 동작을 플랫폼별로 나눠 적어야 합니다. 같은 문장으로 쓰면 iOS 사용자가 연필 버튼을 찾는 문의가 생깁니다.

Data

북마크 한 건에 담기는 값

북마크는 위치와 제목 두 값으로 이뤄집니다. 위치의 형식만 플랫폼마다 다릅니다.

구분 위치 제목 정의된 곳
PC·Callback URL pos: 숫자, 초 단위, 필수 title: 문자열 또는 null, 지정하지 않으면 Untitled Agent의 Bookmark, 커스텀 페이지의 BookmarkItem
Android SDK position: Duration title: String? BookmarkItem (2025년 2월 27일 추가)
iOS SDK position: Duration title: String? BookmarkItem (2025년 2월 27일 추가)

문서의 북마크 구조는 이 두 값이 전부입니다. 작성 시각, 메모, 강좌 정보가 필요하면 고객사 DB 방식을 고르고 서버에서 칸을 더해 관리합니다.

Storage Modes

PlaynPlay 저장과 고객사 DB 저장

MediaItem의 useBookmarkCallback 값 하나로 고릅니다. 기본값은 false입니다.

비교 PlaynPlay 저장 (false) 고객사 DB 저장 (true)
동작 PlaynPlay 서비스가 제공하는 북마크 불러오기·저장 방식을 씁니다. 플레이어가 GetBookmarks로 목록을 받고 UpdateBookmarks로 변경을 알립니다.
고객사 개발 북마크용 서버 개발이 필요하지 않습니다. Callback URL 서버에 요청 두 가지를 추가합니다.
기존 데이터 기존 북마크를 옮기는 절차는 상담에서 확인합니다. GetBookmarks 응답에 기존 북마크를 담아 그대로 보여 줍니다.
데이터 활용 북마크를 학습 보조 기능으로만 쓸 때 맞습니다. LMS 화면, 학습 리포트, 다른 시스템에서 같은 목록을 씁니다.

PC는 MediaItem의 useBookmarkCallback, Android는 MediaItem.Builder.setUseBookmarkCallback(), iOS는 MediaItem.Builder.useBookmarkCallback(_)으로 지정합니다. 두 SDK에는 2025년 3월 7일 추가됐습니다.

Callbacks

고객사 DB 방식의 요청과 응답

useBookmarkCallback을 true로 두면 플레이어가 콘솔에 등록한 Callback URL로 아래 요청을 보냅니다. 서버 개발 범위를 정할 때 쓰는 요약입니다.

  • GetBookmarks

    목록 요청

    플레이어에 북마크 데이터가 필요할 때 옵니다. 요청에는 App ID, 세션 ID, 사용자 ID, userData, 미디어 URL이 실리고, 서버는 result Ok와 bookmarks 배열을 돌려줍니다.

    • 응답 예: title과 pos(초)를 가진 항목의 배열
    • 응답이 늦으면 목록 표시도 늦으니 조회용 인덱스를 둡니다
  • UpdateBookmarks

    변경 알림

    북마크 데이터가 바뀌면 업데이트된 북마크 배열이 오고, 서버는 result Ok로 답합니다. 문서는 배열이라는 점만 정의하므로 첫 연동 시험에서 한 건을 고친 뒤 전체 목록이 오는지 보고 저장 방식을 정하세요.

  • Authorization

    요청 인증

    콘솔에 Authorization 값을 등록하면 두 요청 모두 Bearer 헤더로 붙어 옵니다. 등록은 선택이지만 북마크는 학습자 데이터이므로 값을 정해 검증하기를 권합니다.

  • sessionId

    재생 세션과 연결

    두 요청에는 세션 ID가 있어 어느 재생 중에 바뀐 북마크인지 진도 기록과 맞춰 볼 수 있습니다. 진도 보고 설계는 진도 데이터 설계에 있습니다.

Continuity

기기를 바꿔도 같은 목록 보여 주기

PC에서 표시한 장면을 스마트폰에서 다시 찾게 하려면 고객사 DB 방식에서 서버가 목록의 기준을 잡습니다. PlaynPlay 저장 방식의 기기 간 공유 범위는 문서에 적혀 있지 않으니 상담에서 확인하세요.

  1. 목록의 키 정하기

    GetBookmarks에는 사용자 ID와 미디어 URL이 실려 옵니다. 같은 영상을 여러 과정에서 쓴다면 userData에 넣은 과정·차시 ID까지 키에 넣습니다.

  2. 모든 채널을 같은 방식으로

    PC, Android 앱, iOS 앱 모두 useBookmarkCallback을 true로 맞춥니다. 한 채널만 false면 그 채널의 북마크는 PlaynPlay 저장 방식으로 따로 쌓입니다.

  3. 미디어 URL 바꾸지 않기

    목록이 미디어 URL에 묶이므로 서비스 중 영상 경로를 바꾸면 목록이 끊깁니다. 경로를 꼭 바꿔야 한다면 서버에서 옛 URL과 새 URL을 이어 응답합니다.

  4. 오프라인 저장 시험

    오프라인 재생 중에 만든 북마크가 언제 서버에 반영되는지는 문서에 적혀 있지 않습니다. 다운로드 수강이 많은 과정이라면 출시 전 시험 항목에 넣으세요.

PC Custom Page

PC 커스텀 페이지의 북마크 API

학습 화면을 고객사 웹으로 만드는 커스텀 페이지에서는 video 요소가 북마크 객체를 돌려줍니다. 강의 목차 옆에 북마크를 함께 그리는 식으로 화면을 직접 짭니다.

API 하는 일 화면 기획 예 (권장)
getBookmarks() 저장된 북마크 정보를 비동기로 가져옵니다. 학습 화면을 열 때 목록을 그립니다.
items BookmarkItem(pos, title) 배열 위치 순으로 정렬해 진행 바 아래에 표시합니다.
add(bookmark) 북마크를 추가합니다. 지금 장면 저장 버튼에 연결합니다.
removeAt(index) 해당 순번의 북마크를 지웁니다. 목록 행의 삭제 버튼에 연결합니다.
updateTitle(index, title) 해당 순번의 제목을 바꿉니다. 목록에서 제목을 바로 고치게 합니다.

커스텀 페이지는 startService()로 보안 서비스를 시작한 뒤 video 요소의 open()으로 영상을 엽니다. 연결 구조는 PC 플랫폼 페이지에 있습니다.

LMS Design

LMS에 북마크를 들일 때 정할 것

고객사 DB 방식을 고른 경우의 설계 권장안입니다. 북마크를 플레이어 안의 기능으로 두지 않고 LMS 학습 기록의 한 종류로 다룰 때 효과가 큽니다.

  • Table

    저장 구조

    사용자 ID, 과정·차시 ID, 미디어 URL, 위치(초), 제목, 마지막 수정 시각을 한 행에 둡니다. 수정 시각은 문서 구조에 없으니 서버가 UpdateBookmarks를 받은 시각으로 채웁니다.

  • Jump

    LMS 화면에서 바로 재생

    강의실 페이지에 북마크 목록을 띄우고, 항목을 누르면 그 위치(pos)를 startTime의 value로 넘겨 PC 플레이어를 엽니다. 두 값 모두 초 단위라 변환 없이 이어지고, syncedAt에는 북마크를 고른 시각을 넣습니다.

  • Privacy

    제목은 학습자가 쓴 글

    북마크 제목은 학습자가 직접 입력한 문장입니다. 다른 학습자에게 노출하지 않고, 과정 종료 뒤 보관 기간과 삭제 기준을 개인정보 처리 방침에 맞춰 정합니다.

  • Scope

    본인 목록만 응답

    GetBookmarks에는 사용자 ID가 실려 오므로 서버는 그 사용자의 목록만 돌려줍니다. Authorization 검증과 함께 쓰면 다른 사람의 북마크가 섞일 여지를 줄입니다.

  • Course Copy

    과정 개편과 재개설

    같은 영상을 새 기수에 다시 쓸 때 이전 기수의 북마크를 넘길지 정합니다. 키에 과정 ID를 넣었다면 넘길 때 복사 규칙을 따로 둡니다.

  • Report

    운영 지표로 쓰기

    차시별 북마크 수와 몰리는 구간을 강사에게 공유하면 보충 설명이 필요한 장면을 찾는 데 도움이 됩니다. 운영 지표 설계는 교육 운영 담당자 안내에 있습니다.

북마크 설계 FAQ

  • Untitled 북마크가 너무 많이 쌓입니다.

    제목 없이 저장하면 Untitled가 붙습니다. 고객사 DB 방식이라면 LMS 화면에 보여 줄 때 Untitled 항목 옆에 위치 시각(예: 12:30)을 함께 표시해 서로 구분되게 하세요. 학습자 안내 화면에 제목을 짧게라도 적으면 나중에 찾기 쉽다는 문장을 넣어 두는 것도 효과가 있습니다.

  • 기존 LMS의 북마크 단위가 밀리초입니다.

    GetBookmarks 응답의 pos는 초 단위이므로 변환해서 내려줍니다. 같은 서버가 받는 진도 보고의 위치는 밀리초라서, 북마크와 진도 기록을 한 표에서 볼 때도 단위를 먼저 맞춥니다.

  • 북마크를 학습 분석에 쓸 수 있나요?

    고객사 DB 방식에서는 UpdateBookmarks로 들어온 위치가 서버에 남습니다. 차시별로 위치를 모으면 어느 장면에 표시가 몰리는지 보이고, 보충 자료를 만들 구간을 고를 때 근거가 됩니다.

  • 탐색을 막은 영상에서도 북마크로 이동하나요?

    탐색 금지 영상에서 북마크 이동이 어떻게 동작하는지는 문서에 따로 적혀 있지 않습니다. 의무 교육처럼 정책이 걸린 영상은 오픈 전 시험 항목에 넣으세요. 정책 설정은 재생 정책에서 다룹니다.

Get Started

PlaynPlay 도입을 위한
기술적 지원과 서비스를 제공합니다.

제품 문의부터 데모 시연까지, 모든 지원을 위해 세일즈 및 기술 지원 팀이 준비되어 있습니다.

  • 제품 및 도입 문의

    도입 범위, 일정, 견적을 상담합니다. 서비스 형태와 사용자 규모를 알려주시면 맞는 연동 방식과 보안 설정을 제안합니다.

  • Trial 신청

    PlaynPlay의 기능을 먼저 테스트해 보세요. 트라이얼 기간 동안 귀사의 제품과 PlaynPlay를 연동하고 성능과 기능을 직접 검증할 수 있습니다.

  • PlaynPlay 기술 문의

    SDK 연동, Callback URL 설계, DRM 패키징 중에 생기는 질문에 기술팀이 답합니다. 공개된 개발 문서와 샘플 프로젝트도 함께 확인하세요.