10장. 재생과 이어 보기

이번 장에서 할 일

영상은 4장부터 이미 나와요. 이번 장에서는 본 위치를 프로필마다 저장해 이어 보기 줄을 내 기록으로 바꿔요. 보다 만 작품은 홈 첫 줄과 나의 Nextflix의 이어 보기 줄에 진행 막대와 함께 나와요.

이어서 시청 기록과 숨기기, 시청한 예고편 줄, 실제 기록으로 매기는 TOP 10을 만들어요. 광고형 요금제의 조건(속도 버튼 숨김, 볼 수 없는 작품)은 이 장에서도 지켜요. 광고와 라이브 방송은 끝까지 화면만 흉내 내요.

1. 재생과 이어 보기 만들기

9장의 확인을 마친 에이전트에 보내요.

저작자 표기는 영상을 만든 곳과 이용 허락 조건을 밝히는 글이에요. 에이전트는 이런 순서로 일해요.

1. 1.

   스펙(기능의 범위와 동작을 적은 문서)을 보여 주며 확인을 받아요.

2. 2.

   4장에서 설치한 영상 재생기 부품(@videojs/react)이 프리셋 팩(만들 서비스의 화면 구성, 기능 규칙, 디자인 노트, 예시 데이터, 그림을 묶어 둔 폴더)에 적힌 판으로 고정돼 있는지 확인해요(없으면 더해요). 고정해 두면 새 판이 나와도 저절로 바뀌지 않아요.

3. 3.

   시청 진행 표를 만드는 마이그레이션(DB의 표를 만들거나 바꾸는 기록)을 만들어 적용해요.

4. 4.

   본 위치를 저장하는 서버 기능을 만들어요. 끝까지 봤는지는 화면이 아니라 서버가 정해요.

5. 5.

   두 계정으로 서로의 시청 기록을 보거나 바꿀 수 없는지 자동 테스트로 확인해요.

6. 6.

   재생 화면의 영상 정보와 상세 창에 저작자 표기가 있는지 확인해요(없으면 더해요).

7. 7.

   리뷰를 마치면 개발 서버를 켜 두고 확인을 요청해요.

처음에는 이어 보기 줄이 비어 있어요. 4장의 예시 이어 보기 대신 내가 본 작품이 나와서예요. 홈의 이어 보기 줄은 비어 있으면 감춰지고, 나의 Nextflix에는 안내가 나와요.

시리즈를 하나 골라 재생해 보세요.

크게 보기

프리셋 사이트의 재생 화면이에요. 아래 오른쪽 아이콘 가운데 앞의 두 개가 "음성 및 자막"과 속도 버튼이에요. 이 장을 마치면 이 화면이 실제로 동작해요.

괜찮으면 확인했어라고 보내세요.

2. 시청 기록, 예고편 기록, TOP 10

1절의 확인을 마친 에이전트에 보내요. 에이전트는 이 기능으로 라운드(기능 하나를 만들거나 요청한 것을 고치고 확인까지 마치는 작업 묶음)를 새로 열어요. 서비스 이름을 바꿨다면 [Nextflix]도 바꾸세요.

괜찮으면 확인했어라고 보내세요.

에이전트가 물어보면

5장처럼 라운드(기능 하나를 만들거나 요청한 것을 고치고 확인까지 마치는 작업 묶음) 하나로 진행되고, 끝에 직접 써 보고 확인해 달라고 해요. 4장과 5장 표의 질문(디자인 점수, 스킬 업데이트 등)도 나올 수 있어요. 선택지 창에서 답하는 법은 질문에 답하는 법에 있어요.