Quote 기획서

PRD가 무엇을, 왜 만드는지라면, 이 문서는 어떻게 보이고 어떻게 동작하는지를 정리합니다. 2026-11-06 기준 HTML 프로토타입(v0.3)에 구현된 내용을 기준으로 쓰였고, 사용 테스트(11/4~11/9) 후 개정합니다.

영감: 플래너 앱 Spiralday의 스프링 노트 감성과 월 · 주 · 일 · 개요 정보 구조에서 영감을 받아, 독서에 맞게 재해석했습니다.

변경 이력

1. 컨셉과 디자인 원칙

컨셉: 스프링 노트 한 권에 책 한 권. 읽은 문장은 기록 카드로 남기고, 마음에 남은 한 구절만 형광펜으로 표시한다.

2. 정보 구조 (IA)

Quote
├─ 독서 노트    읽는 중인 책 1권의 노트
│   ├─ 책 칩      읽는 중인 책 · 순서 바꾸기 · + 책 추가
│   ├─ 책 카드    제목 · 저자 · 출판사 · 분야 · 인생책 · 시작일 · 회독 · 선택 이유 · ★ 구절 · 진행 상세
│   ├─ 메모패드   책별 포스트잇 메모
│   └─ 기록 목록  쪽수 역순 기록 카드
├─ 일간         그날 남긴 기록 카드
├─ 주간         읽는 중 책 태그 · 주간 목표 · 회고 별점 · 요일별 칸
├─ 월간         달력 + 이달의 목표 · 습관 트래커 · 메모
├─ 개요         쪽수 통계 · 연속 기록 · 12주 추이 · 책별 · 요일별 · 35일
└─ 내 책장      인생책 줄 + 읽는 중 + 읽은 책(표지) / 책 선택=책 설명 + 인용구 리스트 · 검색
               (30권 초과 시 책 선택 · 분야 필터 · 정렬 · 읽은 책 접기)

탭 순서는 독서 노트 > 일간 > 주간 > 월간 > 개요 > 내 책장이다. 오른쪽 끝에 언어 전환(EN / 한국어) 버튼이 있다.

화면 이동은 상단 탭이고, 주소의 #note #day #week #month #overview #shelf로 직접 열 수 있다.

3. 핵심 규칙

3.1 읽은 쪽수는 인용구 기록에서 자동 계산

• 책별로 지금까지 기록한 인용구 중 가장 큰 쪽수를 그 책의 진행 쪽수로 본다.
• 어떤 날 그 값이 늘어난 만큼이 그날 읽은 쪽수다. (예: p.131 → p.146 기록 = 15쪽, 같은 날 p.149 추가 = 3쪽 더)
• 이미 지나간 쪽수에 기록하면 쪽수는 늘지 않는다.
• 월간 · 주간 · 개요의 모든 쪽수와 독서 노트의 진행률이 이 값으로 계산된다.
• 한계: 기록을 남기지 않은 날은 읽은 날로 잡히지 않고, 며칠 읽고 한 번에 기록하면 그날에 몰린다.

3.2 정렬

3.3 완독과 다시 읽기

• 독서 노트에서 완독 표시를 누르면 그 책은 독서 노트에서 사라지고 내 책장에서만 보인다.
• 내 책장에서 완독한 책을 고르면 다시 읽기가 나온다. 누르면 회독이 1 늘고 독서 노트의 읽는 중 목록으로 돌아온다.
• 월간 · 주간 · 개요의 과거 기록에는 완독한 책이 그대로 남는다.

3.4 따라쓰기

• 기록 입력 방식은 직접 입력 / 따라쓰기 중 선택한다. (사진 입력은 준비 중)
• 따라쓰기: 원문을 붙여넣으면 입력창 뒤에 연하게 깔리고, 그 위에 직접 타이핑한다. 맞으면 진하게, 틀리면 빨간 물결선으로 표시하고 일치 글자 수를 보여준다.
• 원문을 모두 옮겨 쓰면 저장 시 따라쓰기 완료 표시가 붙는다.

3.5 장(章)은 선택

• 책마다 목차가 있는 것은 아니므로 장 입력은 선택이다. 기록 창의 장 칸에서만 입력하고, 이전에 입력한 장이 선택지로 제안된다.
• 책 정보에는 목차 입력을 두지 않는다. 바로 위의 "책 선택 이유"와 역할이 겹친다는 피드백으로 v0.3에서 뺐다. 이미 입력해 둔 목차는 데이터에만 남고 장 제안에 쓰인다.
• 3만 입력하면 3장으로 표시하고, 서문처럼 자유롭게 써도 된다. 쪽수 옆에 p.58 · 2장으로 붙는다. (영어 화면에서는 Ch.3)

3.6 형광펜은 한 구절만

• 기록 카드의 인용구 중 ★로 지정한 구절만 책 색 형광펜으로 표시한다. 나머지는 굵은 글씨만 쓴다.
• ★는 책마다 하나이고, 책 카드의 "가장 인상 깊은 구절"에도 반영된다.

3.7 저장 날짜·시간

• 기록을 저장할 때 날짜와 시간이 함께 저장된다. 기본값은 지금이고, 지난 독서를 채울 때는 직접 고칠 수 있다.
• 독서 노트 · 일간 · 내 책장 카드와 내보내기 파일에 표시된다.

3.8 분야와 분야별 색

• 새 책을 추가할 때 분야를 고른다(선택). 서점의 분류를 따라 19개이고, 목록은 6장에 있다. 철학은 인문･철학으로 통합했고, 이전 값으로 저장된 책은 열 때 새 분야로 자동 이전된다.
• 분야마다 색 1개가 정해지고, 책의 표지 · 칩의 점 · 형광펜 · 월간 주간 개요의 막대가 모두 그 색을 쓴다. 분야를 바꾸면 색이 바로 바뀐다. 분야를 지정하지 않으면 회색이다.
• 색은 사람이 하나씩 고르지 않고 분야 순서에서 자동 생성한다(분야가 늘어도 겹치지 않게).

3.9 인생책

• 독서 노트의 책 카드나 내 책장의 책 설명에서 ♥ 인생책으로 표시한다. 개수 제한은 없다.
• 내 책장 전체 보기에서 인생책은 맨 첫 줄에 고정되고, 읽는 중 / 읽은 책 목록에서는 중복해서 보이지 않는다.
• 마크다운 내보내기에는 favorite: true로 남는다.

3.10 책 태그 순서 바꾸기

• 독서 노트 위의 책 칩은 끌어서 놓기 또는 ‹ › 버튼으로 순서를 바꾼다. 순서 바꾸기를 누르면 켜지고 순서 바꾸기 완료로 끝낸다. 읽는 중인 책이 2권 이상일 때만 보인다.
• 이 순서가 책 정렬(내 순서)과 주간의 읽는 중 책 태그 순서에도 쓰인다.

3.11 시작 상태: 빈 화면과 샘플

• 처음 열면 샘플 없이 빈 상태로 시작한다. 샘플 데이터는 화면 맨 아래의 샘플 데이터로 되돌리기를 눌렀을 때만 들어오고(확인 창), 샘플일 때만 헤더에 샘플 데이터 배지가 보인다.
• 샘플이 아닐 때의 날짜는 실제 오늘이고, 샘플은 기준일(11/4)로 고정한다.
• 모든 데이터 지우기도 확인 창을 거치며 되돌릴 수 없다.

3.12 언어

• 화면 문구는 한국어와 영어를 전환할 수 있고 선택은 브라우저에 저장된다.
• 사용자가 입력한 책 이름 · 저자 · 인용구 · 메모와 샘플 데이터는 번역하지 않는다. 분야 이름은 영어 목록으로 바뀐다.

4. 사용자 플로우

A. 새 책 → 첫 기록 1. 독서 노트 또는 내 책장에서 + 책 추가 (또는 기록 창의 책 선택에서 + 새 책 추가…) 2. 제목 · 저자 · 출판사 · 분야 · 전체 쪽수 · 선택 이유 입력, 필요하면 인생책 표시 후 저장 (책 색은 분야에서 정해짐, 기록 창에서 시작한 경우 새 책이 선택된 기록 창으로 돌아옴) 3. + 기록 → 책 · 쪽수 · 장(선택) · 날짜/시간 · 인용구 · 내 생각 → 저장

B. 완독 1. 책 카드를 펼쳐 완독 표시 → 독서 노트에서 사라지고 내 책장에서 완독으로 보임 2. 다시 읽고 싶으면 내 책장에서 책을 고르고 다시 읽기

C. 다시 꺼내 보기 1. 내 책장에서 검색 또는 책 선택 2. 인용 카드의 독서 노트에서 보기로 원래 기록으로 이동, 복사로 마크다운 복사

D. 인생책 지정 1. 독서 노트의 책 카드 또는 내 책장의 책 설명에서 ♥ 인생책 2. 내 책장 전체 보기 맨 첫 줄에 고정

E. 책이 많아졌을 때 (30권 초과) 1. 내 책장에서 책 선택 드롭다운 또는 검색(책 · 저자 · 출판사 · 인용구) 2. 분야 칩으로 좁히고 정렬(내 순서 · 최근 기록순 · 제목순 · 분야순) 바꾸기 3. 읽은 책은 24권까지 보이고 +N권 더 보기로 펼침

F. 주간 점검 1. 주간에서 요일별 읽은 책과 쪽수 확인, 주간 목표 입력, 회고 별점 남기기 2. 개요에서 연속 기록일 · 12주 추이 확인

5. 화면 명세

공통: 헤더

• 왼쪽에 화면 제목(독서 노트 · 일간 · 주간 · 월간 · 개요 · 내 책장)과 부제, 오른쪽에 탭 6개와 언어 전환 버튼.
• 샘플 데이터일 때만 샘플 데이터 배지가 붙는다. 부제는 내용이 있을 때만 보인다. (월간의 부제 "읽은 쪽수와 책을 색으로"는 v0.3에서 뺐다.)
• 맨 아래에 "이 화면은 클릭해서 써 볼 수 있는 프로토타입이에요" 안내와 샘플 데이터로 되돌리기 · 모든 데이터 지우기.

S1. 독서 노트

목적: 한 권의 독서를 한 장의 노트처럼 보고 남긴다.

레이아웃: 위에 읽는 중인 책 칩, 좌 40% 책 영역(BOOK + MEMO), 우 60% 기록 목록(QUOTES).

상태: 책이 하나도 없으면(처음 열었을 때) "아직 책이 없어요. 읽고 있는 책을 추가해 보세요." + + 책 추가를 보여준다. 읽는 중인 책이 없고 책장에 책이 있으면 내 책장 열기도 함께 보여준다. 기록이 없으면 "첫 문장을 남겨 볼까요?".

S2. 월간

• 부제 없이 제목만 보인다. 7열 달력(월요일 시작). 날짜 칸에 그날 읽은 책(색 점) · 쪽수, ✎ 인용 N, 합계 막대와 쪽수. 오늘은 원형 강조, 날짜를 누르면 일간으로 이동.
• 오른쪽: 이달의 목표(체크 · 추가), 습관 트래커(1쪽 이상 읽은 날 · 인용구 남긴 날의 점), 메모.
• 기록 없는 날은 빈 칸으로 둔다. (실패 표시를 하지 않는다.)

S3. 주간

• 이전/다음 주 이동, 이번 주 요약(쪽수 · 읽은 날 · 인용구).
• 읽는 중 책 태그: 읽는 중인 책이 책 색 태그로 나오고 이번 주 쪽수를 함께 보여준다. 누르면 독서 노트로 이동.
• MY GOAL(주간 목표 입력), REVIEW OF THE WEEK(별점 5단계).
• 요일별 7칸: 날짜, 그날 읽은 책 태그와 쪽수, ✎ 인용구 줄, 하루 합계. 인용구 줄은 독서 노트의 그 기록으로, 날짜는 일간으로 이동.

S4. 일간

• 날짜(20261104 WED)와 전날/오늘/다음날 이동.
• 그날 남긴 기록 카드만 보여준다. 여러 책이면 책별로 묶고 쪽수 역순. 카드 구조는 독서 노트와 같다.
• + 기록으로 바로 추가. 기록이 없으면 안내 문구.
• 시간표 · 할 일(○△×) · 링크 · D-day는 정보가 많아 정신없다는 피드백으로 뺐다.

S5. 개요

S6. 내 책장

• 전체: 책 표지 모양 카드만 보여준다. 맨 위에 인생책 줄(♥), 그 아래 읽는 중 / 읽은 책으로 나뉘고 새 책 칸이 있다. 표지는 분야 색이고 제목 · 저자 · 분야 배지 · 읽는 중/완독 배지, 아래에 인용구 수와 진행률. 분야를 지정하지 않은 책은 회색이다.
• 책 선택(또는 표지 클릭): 위에 책 설명 영역(표지 · 제목 · 저자 · 출판사 · 상태 · 인용구 수 · 시작일 · 분야 변경 · ♥ 인생책 · 마크다운 내보내기 · 책 삭제 · 독서 노트에서 열기 또는 다시 읽기), 그 아래에 인용구 리스트(쪽수 · 저장 시간 / 인용구 / 내 생각 / 복사)를 쪽수 오름차순으로 보여준다. 책 설명이 비어 있으면 + 책 설명 추가하기가 나오고, 한두 줄로 직접 적는다.
• 책 목록 위에서 정렬 메뉴(책 · 쪽수 / 최근 저장 / 무작위), 오늘 다시 꺼내 볼 문장, 인용 카드(복사 · 독서 노트에서 보기)를 쓸 수 있다.
• 검색: 검색어를 입력하면 맞는 책 표지(제목 · 저자 · 출판사)를 먼저, 그 아래에 인용구 결과(인용구 · 내 생각 · 장)를 보여준다. 지우면 책 표지로 돌아온다.

책이 많을 때 (30권 초과) — 30권 이하에서는 위 모양 그대로이고, 30권을 넘으면 대량 모드로 바뀐다. | 영역 | 동작 | |---|---| | 책 칩 | 책마다 칩 대신 전체 + 책 선택 드롭다운. 고른 책은 칩으로 표시 | | 분야 필터 | 실제로 쓰는 분야만 칩으로 보여 한 번에 좁힌다 | | 책 정렬 | 내 순서 · 최근 기록순 · 제목순 · 분야순 | | 읽은 책 | 24권까지 보이고 +N권 더 보기, 섹션 전체 접기 · 펼치기 가능 | | 인생책 줄 | 맨 위에 그대로 고정 |

S7. 새 기록 창

• 순서: 책(읽는 중 / 읽은 책 그룹 + + 새 책 추가…) → 쪽수 · 저장 날짜 · 시간 → 장(선택) → 입력 방식(직접 입력 / 따라쓰기) → 인용구 → 내 생각.
• + 새 책 추가…를 고르면 창 제목이 새 책 추가로 바뀌고 책 정보(제목 · 저자 · 출판사 · 분야 · 전체 쪽수 · 선택 이유, ♥ 인생책)만 보인다. 분야를 고르면 책 표지 색 미리보기가 바뀐다. 저장하면 책이 만들어지고 새 책이 선택된 새 기록으로 돌아온다. 취소도 새 기록으로 돌아오고, 한 번 더 누르면 닫힌다.
• 인용구가 비어 있으면 저장할 수 없고, 내 생각이 비어 있으면 "한 줄만 적어도 나중에 다시 볼 이유가 생겨요" 안내만 보여준다.

S8. 영어 화면

• 오른쪽 위 EN을 누르면 모든 화면 문구가 영어로 바뀌고(탭 · 라벨 · 안내 · 오류), 버튼은 한국어로 바뀐다. 요일 · 월 이름 · 인용구 수의 복수형 · 장 표기(Ch.3)도 영어에 맞춘다.
• 사용자가 쓴 책 이름 · 저자 · 인용구 · 메모는 번역하지 않는다. 샘플 데이터도 한국어 그대로다(영어 샘플은 없음).

S9. 좁은 창

• 창 폭이 760px 이하로 줄어들면 스프링이 왼쪽으로 옮겨가는 세로 노트가 된다. 카드는 배경 없이 줄 노트처럼 평평해지고 한 열로 쌓인다.

6. 데이터 모델

Book   id · title · author · publisher · genre(분야 id) · desc(책 설명) · life(인생책) · color(분야에서 정해짐)
       total(전체 쪽수) · started · reread · status(reading|done) · reason · toc(이전 데이터만) · memo · finished
Entry  id · bookId · page · chapter(선택) · quote · thought · typed · star · open
       createdAt(날짜) · createdTime(시간)
(파생) 일별 읽은 쪽수 = 책별 최대 쪽수의 증가분  ← 저장하지 않고 Entry에서 계산
Goal   이달의 목표 [{t, done}]   Week  주간 목표 · 회고 별점 (주 시작일 키)
App    sample(샘플 데이터 여부) · nextId · lang(브라우저 별도 저장)

저장은 브라우저 localStorage(quote-proto-v1)이고, 언어는 quote-lang이다.

분야 (서점 분류 기준 19개)

이전 값 철학 → 인문･철학, 에세이 → 시/에세이로 자동 이전한다.

마크다운 내보내기 (책 1권 = 파일 1개)

---
title: 책 제목
author: 저자
publisher: 출판사   (입력했을 때만)
genre: 분야            (선택했을 때만)
started: 2026-10-12
reread: 1
favorite: true         (인생책일 때만)
---
## 책 설명          (입력했을 때만)
...

## 선택 이유
...
## 기록
> 인용구 (p.58 · 2장 · 2026-10-22 08:11)

내 생각: ...

## 메모
...

7. 디자인 시스템 요약

8. 독서법 반영 (고명환 작가 방법론 참고)

공개 인터뷰와 서점 소개 자료에서 확인한 방법을 기능으로 옮겼다.

출처: 메트로신문 인터뷰(2026.9), 교보문고 '나만의 독서법 자랑대회' 이벤트 페이지, 교보eBook 《나는 어떻게 삶의 해답을 찾는가》 소개.

9. 결정 로그

10. 엣지 케이스

프로토타입(2026-11-05 기준)이 실제로 하는 동작을 적었다. 정함은 의도한 규칙이고, 임시는 동작은 하지만 사용 테스트 후 다시 볼 것, 미정은 아직 결정하지 않은 것이다.

10.1 비어 있을 때

10.2 입력 검증

10.3 읽은 쪽수 계산

읽은 쪽수는 기록한 쪽수에서 자동으로 계산한다(3.1). 책별로 지금까지 가장 멀리 간 쪽수가 늘어난 만큼을 그 기록을 남긴 날의 읽은 쪽수로 본다.

10.4 책 상태

10.5 내 책장 (책이 많을 때)

책이 30권을 넘으면 대량 모드로 바뀐다. 30권 이하에서는 모양이 달라지지 않는다.

10.6 분야 · 태그 순서

10.7 언어 · 날짜 · 저장소

10.8 정해야 할 것 (우선순위 순)

1. 저장 실패 알림과 데이터 백업 · 복원 (데이터 유실은 가장 큰 위험)
2. 책 삭제의 실행 취소 또는 휴지통
3. 같은 제목의 책 중복 경고
4. 며칠 몰아서 기록했을 때의 읽은 쪽수 보정
5. 기록 쪽수가 전체 쪽수를 넘을 때 전체 쪽수 수정 안내

11. 미구현과 후속 과제

12. 검증 계획

• 5일 사용 테스트 (11/4~11/9): 직접 쓰면서 피드백을 받는다.
• 볼 것: 인용구 하나를 남기는 데 걸린 시간, 막힌 순간, 안 쓰게 된 화면, 있었으면 한 기능, 쪽수 자동 계산이 실제 독서와 어긋난 경우.
• 판단 기준과 지표는 Quote PRD 4장과 7장을 따른다.

Quote 기획서 · 2026-11-06 · 이 문서의 화면 캡처는 HTML 프로토타입(v0.3, 샘플 데이터)에서 가져왔습니다.