작품 상세
(2026년 3월 11일 updated)
1. 목적
하나의 도서 및 만화 작품의 정보를 담은 화면을 작품 상세라 칭한다. 이 화면에서는 사용자가 그림책을 읽기 전에 작품에 대한 정보(대상 연령, 저자, 줄거리, 시리즈, 유사 콘텐츠, 렉사일 지수 등)를 확인하고, 읽기 및 찜하기 등 주요 행동을 자연스럽게 유도할 수 있도록 작품 상세 화면의 UI 구성 및 동작 방식을 정의한다.
2. 진입 경로
- 홈 / 인기 / 내 계정 등에서 작품 카드 및 스티커 클릭 시 작품 상세 화면으로 진입
- 앱 내에서 항상 뷰어 진입 전 단계로 사용됨
3. Book 모델 구조
작품 상세 화면에 표시되는 데이터는 Book 모델(TranslatableModel)을 기반으로 한다.
3.1 기본 필드
| 필드 | 타입 | 설명 |
|---|---|---|
book_code | CharField (unique) | 도서 코드 (예: A001, A002) |
brand | CharField | 브랜드: disney / pixar |
status | CharField | 연재 상태: ongoing / completed / hiatus |
lexile_label | CharField | 렉사일 지수 표시 (예: 400L - 600L) |
age_label | CharField | 연령 범위 표시 (예: 2-5, 3-7) |
views | IntegerField | 조회수 |
pv_score | IntegerField | PV 점수 (정렬용) |
average_rating | DecimalField | 평균 평점 |
is_active | BooleanField | 활성화 여부 |
3.2 다국어 필드 (TranslatedFields)
| 필드 | 타입 | 설명 |
|---|---|---|
title | CharField | 도서 제목 |
author | CharField | 작가명 |
illustrator | CharField | 일러스트레이터명 |
publisher | CharField | 출판사 |
synopsis | TextField | 줄거리 |
cover_url | URLField | 표지 이미지 URL |
content_url | URLField | 콘텐츠 URL |
published_date | DateField | 출간일 |
is_new | BooleanField | NEW 배지 노출 여부 (언어별) |
3.3 관계 필드
| 필드 | 타입 | 설명 |
|---|---|---|
series | ForeignKey (BookSeries) | 소속 시리즈 |
characters | ManyToManyField (Character) | 등장 캐릭터 |
illustrators | ManyToManyField (Illustrator, TranslatableModel) | 일러스트레이터 목록 (다국어 지원) |
age_filters | ManyToManyField (HomeFilter) | 연령대 필터 (M2M, AGE_ 접두사) |
lexile_filter | ForeignKey (HomeFilter, 1:1) | 렉사일 필터 (1:1 관계, LEX_ 접두사) |
4. 기본 구조 및 구성 요소
4.1 상단 메타 정보
| 항목 | 설명 |
|---|---|
| 작품 상세 메인 이미지 | 커버이미지 노출 / 중앙 정렬 / 비율 고정 |
| 뱃지 | 해당 작품에 BGM이 포함된 경우, 커버에 "BGM" 배지 노출 및 사용자가 녹음한 책에 대한 배지 개인화하여 노출 |
| 리워드 스티커 | 사용자가 작품을 완독하면 획득하게 될 리워드 스티커가 커버 이미지 우측 하단에 원형으로 표시됩니다. (회차 있는 작품은 각 회차 섹션에 표시) 이미 획득한 경우에는 획득 완료 뱃지 또는 시각적 강조 효과로 구분됩니다. |
| 대상 연령 | 예: 3~5세 (age_label 필드) |
| 렉사일 지수 | 예: 470~600L (lexile_label 필드) |
| 제목 | 책 제목 노출 |
| 작가 정보 | 글/그림 작가명. 작가의 작품이 2개 이상일때, 하이퍼링크 포함 |
| 줄거리 | 최대 3줄까지 요약 노출 → 더보기 클릭 시 펼쳐짐 |
| 지원 언어 | 텍스트 형태로 나열 (예: 한국어, 영어, 일본어, 스페인어 등) |
4.2 회차 목록 영역 (회차형 콘텐츠인 경우에만 노출)
- 작품 정보 하단에 노출
- 회차 목록: 세로 리스트
- 표지 + 회차 제목 + 회차별 스티커 아이콘
- 첫 회차는 자동 선택 상태 (기본 읽기 대상)
- 완독한 회차는 스티커에 별도 표시
4.3 추천 콘텐츠
아래 3개 섹션은 고정 순서로 나열되며, 각 섹션은 콘텐츠 수가 5개 미만인 경우 미노출
-
또래 친구들이 많이 봤어요
- 같은 연령대 사용자 열람 기반 추천 (같은 도서 연령을 열람한 사람들이 많이 열람한 도서)
-
비슷한 콘텐츠
- 테마 기반 추천
-
시리즈
- 동일 캐릭터 또는 시리즈 콘텐츠 모음
4.4 읽기 진행도
사용자의 도서 읽기 진행 상황을 확인할 수 있다.
| 항목 | 내용 |
|---|---|
| API | GET /api/books/<id>/reading-progress/ |
| 설명 | 해당 도서의 전체 읽기 진행률 조회 |
5. 에피소드 관련 정책
5.1 에피소드 상세
| 항목 | 내용 |
|---|---|
| API | GET /api/books/<book_id>/episodes/<pk>/ |
| 설명 | 특정 에피소드의 상세 정보 (다국어 페이지 데이터 포함) |
5.2 에피소드 녹음
| 항목 | 내용 |
|---|---|
| API | GET /api/books/<book_id>/episodes/<episode_id>/recordings/ |
| 설명 | 해당 에피소드의 녹음 목록 조회 |
5.3 에피소드 진행도
| API | 메서드 | 설명 |
|---|---|---|
/api/books/<book_id>/episodes/<episode_id>/progress/ | GET | 에피소드 읽기 진행률 조회 |
/api/books/<book_id>/episodes/<episode_id>/progress/ | PATCH | 에피소드 읽기 진행률 업데이트 |
6. 하단 버튼 영역
-
구독자 버튼:
- 바로 읽기 (기본 CTA)
- 북마크(찜) 버튼: 토글형
-
비구독자 버튼:
- 작품 상세에서 구독 유도 버튼 상시 노출
- 바로 읽기 대신 '미리보기' 로 노출
- 북마크(찜) 버튼: 토글형
-
버튼 위치:
- 항상 하단 고정 (스크롤 가능 상태에서도 고정)
-
상태에 따른 동작:
- 북마크 버튼은 사용자가 이미 찜한 경우 색이 채워진 아이콘, 다시 누르면 해제 가능
- 찜한 도서는 **[내 계정 > 북마크한 책]**에 저장됨
7. 기타 정책
- 스크롤 위치 저장: 상세 페이지는 스크롤 위치 저장하지 않음. 매 진입 시 상단부터 노출
- 뷰어 진입 시점: '바로 읽기' 버튼 클릭 시 뷰어 진입
8. 예외 처리
- 회차가 없는 단일 도서일 경우, 회차 영역은 전체 생략
9. API 요약
| API | 메서드 | 설명 |
|---|---|---|
/api/books/<id>/ | GET | 도서 상세 정보 |
/api/books/<id>/recommendations/ | GET | 추천 콘텐츠 |
/api/books/<id>/reading-progress/ | GET | 읽기 진행도 |
/api/books/<book_id>/episodes/<pk>/ | GET | 에피소드 상세 |
/api/books/<book_id>/episodes/<episode_id>/recordings/ | GET | 에피소드 녹음 목록 |
/api/books/<book_id>/episodes/<episode_id>/progress/ | GET/PATCH | 에피소드 진행도 조회/업데이트 |