Reread Bookshelf
Reread Bookshelf는 RIDI, 네이버 시리즈, 카카오페이지에서 읽은 책과 웹소설을 다시 찾기 쉽게 저장하는 개인용 기록장입니다. 제목이나 작가보다 인물, 관계성, 분위기, 기억나는 장면, 발췌 이미지처럼 실제로 다시 찾을 때 떠오르는 단서를 중심에 둡니다. 최신 버전에서는 링크로 가져오기 어려운 작품도 스크린샷 업로드와 OCR 초안 채우기로 등록할 수 있게 했습니다.
Repository는 private으로 운영 중입니다. 이 페이지는 포트폴리오 검토를 위한 공개 가능한 수준의 요약입니다.
샘플 책장 데이터
플랫폼: RIDI · 태그: 계약관계, 쌍방구원, 후반부 몰입 · 재탕 후보
플랫폼: 네이버 시리즈 · 태그: 회귀, 성장, 팀플레이 · 32화 근처 장면 메모
플랫폼: 카카오페이지 · 태그: 라이벌, 오피스, 가벼운 문체 · 발췌 이미지 2장
책 추가, 상세 보기, 발췌 이미지 시트를 history stack과 연결해 브라우저 back으로 닫습니다.
19세/로그인 제한 화면은 스크린샷을 올려 제목, 작가, 장르, 태그, 목차 후보를 초안으로 채웁니다.
화면별 설명
책장 목록
표지, 제목, 플랫폼, 핵심 태그가 먼저 보입니다. 제목이 기억나지 않을 때를 기준으로 분위기와 관계성 단서를 목록에서 노출합니다.
- 샘플 상태: 기록 8개, 재탕 후보 8개, 표지 없음 0개
- 확인 포인트: 플랫폼 배지, 최근 수정, 태그 노출
작품 추가 시트
링크를 넣으면 가능한 기본 정보를 먼저 채우고, 실패하면 직접 입력으로 이어집니다. 링크 접근이 막히는 작품은 스크린샷을 올려 OCR 초안을 만들 수 있습니다. 모바일에서는 저장 버튼을 하단에 고정해 긴 폼에서도 액션을 잃지 않게 했습니다.
- 샘플 상태: RIDI/시리즈/카카오페이지 링크 입력 또는 스크린샷 업로드
- 확인 포인트: 자동 채우기, OCR 초안, 중복 감지, 수동 보완
상세 보기와 수정
작품을 열면 기본 정보보다 기억 단서를 먼저 다룹니다. 주인공, 상대역, 관계성, 엔딩감, 분위기, 스포 메모를 같은 시트에서 수정합니다.
- 샘플 상태: 분위기 태그 4개, 스포 메모 1개
- 확인 포인트: 태그 편집, 재탕 횟수, 마지막 수정
발췌 이미지와 장면 메모
기억나는 문장이나 장면을 이미지와 함께 저장합니다. 등록 스크린샷과 발췌 이미지는 IndexedDB에 분리해 보관하고, OCR 텍스트와 메모를 검색 단서로 다시 씁니다.
- 샘플 상태: 등록 스크린샷 2장, 발췌 이미지 2장, 장면 메모 3개
- 확인 포인트: 이미지 추가/삭제, OCR 텍스트, 메모 연결, 저장 크기
검색과 태그 필터
정확한 제목을 몰라도 인물명, 관계성, 분위기, 장면 단어로 찾는 흐름입니다. 여러 태그를 조합해 기억나는 조각부터 좁혀갑니다.
- 샘플 상태: “계약관계 + 느린 감정선” 검색
- 확인 포인트: 통합 검색, 태그 조합, 정렬
local-first 백업
계정 없이 브라우저에 먼저 저장하고, JSON export/import로 데이터를 직접 관리합니다. 서버 저장소를 붙이더라도 이 사용성은 유지하는 방향입니다.
- 샘플 상태: JSON 백업 파일 1개 생성
- 확인 포인트: 내보내기, 가져오기, 스키마 변경 대비
Snapshot
| 구분 | 내용 |
|---|---|
| 상태 | In progress, private repository |
| 문제 | 이미 읽은 책을 다시 찾을 때 제목보다 장면, 인물, 분위기 같은 기억 단서가 먼저 떠오름 |
| 접근 | 작품 기록을 단순 목록이 아니라 검색 가능한 기억 인덱스와 모바일 시트 UX로 구성 |
| 기술 | JavaScript, HTML/CSS, IndexedDB, PWA manifest, Service Worker, localStorage, Netlify Function, OpenAI Vision OCR |
| 저장 | 브라우저 localStorage 기반 local-first 구조, JSON 내보내기/가져오기 지원 |
Latest Notes
OpenAI Vision OCR 스크린샷을 Netlify Function으로 보내 제목, 작가, 장르, 태그, 목차, 메모 초안을 채우는 흐름을 추가했습니다. OpenAI 키가 없거나 실패하면 기본 OCR로 폴백합니다.
스크린샷 등록 19세/로그인 제한 작품을 캡처 이미지로 보관하고 검색 텍스트에 포함할 수 있게 했습니다.
모바일 뒤로가기 열린 책 추가, 상세, 재탕, 발췌 시트를 history stack과 맞춰 브라우저 back으로 닫히게 했습니다.
발췌 이미지 장면/문장 기록에 이미지를 붙이고 관리할 수 있게 했습니다.
중복 방지 같은 작품 링크나 제목이 반복 저장될 때 기존 기록으로 연결합니다.
카카오페이지 가져오기 RIDI와 네이버 시리즈에 더해 카카오페이지 링크 기반 입력을 추가했습니다.
What It Does
- 책과 웹소설 기록을 추가, 수정, 삭제합니다.
- 제목, 작가, RIDI/시리즈/카카오페이지 링크, 표지, 장르, 권수/회차 정보를 저장합니다.
- 주인공, 상대역, 관계성, 엔딩감, 분위기 키워드를 기록합니다.
- 요약, 스포 메모, 재탕 횟수, 발췌 이미지와 장면 메모를 저장합니다.
- 작품 등록 스크린샷을 첨부하고 OCR 텍스트를 검색 단서로 저장합니다.
- OpenAI Vision OCR이 가능한 환경에서는 작품 정보 초안을 자동으로 채우고, 실패하면 로컬 OCR과 수동 입력으로 이어집니다.
- 통합 검색, 태그 필터, 정렬 기능을 제공합니다.
- 작품 링크 기반 기본 정보 자동 채우기를 시도하고, 실패 시 수동 입력으로 보완합니다.
모바일에서 중요한 것
링크와 스크린샷 등록
RIDI, 네이버 시리즈, 카카오페이지 링크를 넣으면 가능한 기본 정보를 먼저 채우고, 링크 접근이 막히면 스크린샷 OCR로 초안을 만듭니다.
기억 단서 중심 기록
주인공, 상대역, 관계성, 엔딩감, 분위기 키워드처럼 다시 찾을 때 떠오르는 단서를 저장합니다.
검색과 태그 필터
제목을 몰라도 태그, 장면 메모, 인물명, 분위기로 이전 기록을 빠르게 다시 찾을 수 있게 설계했습니다.
시트와 뒤로가기
모바일에서 추가/상세/발췌 시트가 열린 상태를 history와 연결해 뒤로가기가 자연스럽게 동작합니다.
동작 흐름
RIDI 링크, 수동 입력, 스크린샷 OCR로 작품 기본 정보를 만듭 니다.
인물, 관계성, 분위기, 스포 메모와 발췌 이미지를 쌓습니다.
태그와 검색어로 기억나는 조각부터 작품을 찾아냅니다.
JSON export/import로 local-first 데이터의 유실 위험을 줄입니다.
Portfolio Signal
이 프로젝트는 개인적인 불편을 실제 사용 가능한 도구로 바꾸는 과정이 잘 드러납니다. local-first 구조로 시작해 데이터 소유권과 간단한 백업을 우선하고, 링크 수집이 막히는 예외는 스크린샷 OCR로 우회했습니다.
Implementation Notes
- 처음부터 계정/서버 저장소를 붙이지 않고 localStorage로 빠르게 사용성을 검증했습니다.
- 발췌 이미지는 브라우저 저장소에서 다루기 위해 IndexedDB 기반 media store를 붙였습니다.
- 작품 등록 스크린샷도 같은 media store에 저장하고, OCR 텍스트는 검색 대상에 포함했습니다.
- OpenAI Vision OCR은 Netlify Function으로 분리하고, 키 미설정/용량 초과/서버 실패 시 기본 OCR로 폴백합니다.
- PWA manifest와 service worker를 포함해 모바일에서 앱처럼 접근하는 사용성을 고려했습니다.
- JSON export/import를 넣어 local-first 구조의 데이터 유실 리스크를 줄였습니다.
- 외부 페이지 메타데이터 수집은 실패 가능성을 전제로 수동 입력 흐름과 중복 방지 흐름을 함께 설계했습니다.
Next
- 작품 기록 스키마 정리와 마이그레이션 전략 추가
- 태그 추천과 중복 태그 정리 기능 개선
- OCR 결과를 저장 전 비교할 수 있는 확인 UI 개선
- 서버 저장소를 붙일 경우에도 local-first 사용성을 유지하는 동기화 방식 검토