builbook

웹소설 집필 에디터. 레퍼런스는 스크리브너이되, 입문 작가도 5분 안에 쓸 수 있게 진입장벽을 낮춘 도구입니다.

문서 트리(바인더) · 집중 글쓰기 에디터 · 자동저장을 갖춘 로컬 우선(local-first) 앱으로, 로그인이나 서버 없이 모든 데이터를 브라우저 IndexedDB에 보관합니다.

핵심 기능

• 작품(Project) 관리 — 대시보드에서 작품을 만들고 열고 삭제. 새 작품에는 "1화" 문서가 준비된다.
• 바인더(문서 트리, 옵시디언 참고) — 새 문서는 "N화"로 즉시 생성 후 그 자리에서 이름 편집. 더블클릭/F2 이름 변경, 우클릭 메뉴, 폴더 접기, 정렬, 키보드 이동, 드래그 재정렬. 삭제는 바인더 맨 아래 휴지통으로(펼쳐서 복원·영구 삭제).
• 집중 글쓰기 에디터 — Tiptap(ProseMirror) 단일 컬럼. 최소 툴바, 찾기·바꾸기(Ctrl/⌘+F), 제목 인라인 수정, 집중 모드.
• 자동저장 — 입력이 멎으면 800ms 뒤 저장(debounce). 저장 상태 배지, 실패 시 localStorage 백업, 같은 문서를 다른 탭에서 열면 경고.
• 스크리브너식 구조 작업 — 폴더를 고르면 회차들을 한 화면에 이어서 편집(스크리브닝), 라벨·상태(초고/퇴고/완료)·문서 메모, 헤더 목표 바(마감일까지 하루 분량, 누르면 모든 목표를 정하는 목표 창), Ctrl/⌘+P 빠른 열기, 인물·설정 카드 템플릿.
• 분량은 글자 수 기준 — 공백 포함(기본)/공백 제외/단어 수 중 선택. 헤더·목표·집필 현황이 같은 단위를 쓴다.
• 연재 도구 — 회차 분량표(플랫폼 프리셋), 오늘 쓴 분량·연속 집필일, 독자 뷰 미리보기, 고유명사 사전·표기 흔들림 검사·문장 진단, 코르크보드·연표, 스냅샷(버전), 인물·설정 카드.
• 줄바꿈은 연재처 기준 — Enter 한 번 = 다음 줄, Enter 두 번 = 빈 줄 하나. 복사해 노벨피아·문피아·네이버 시리즈에 붙여도, TXT로 내보내도 같은 줄로 들어간다(밖으로는 글자와 줄바꿈만, 에디터끼리 복사하면 서식 유지).
• 내보내기·백업 — TXT·마크다운·DOCX(회차별/작품 전체). 컴파일 옵션(회차 범위·구분선·제목 포함)과 프리셋 저장(작품 데이터라 백업 JSON에 함께 담긴다). 전체 백업 JSON 내보내기·복원.
• 본문 표시 설정 — 툴바 "Aa"에서 글자 크기·줄 간격·본문 폭, 집중 모드에서는 타이프라이터 스크롤. 탭을 닫아도 마지막 입력은 백업돼 다음에 되살아납니다. 휴지통으로 보낸 문서는 토스트의 "되돌리기"로 바로 복구.
• 영감 서랍 — 막히면 30초 안에 다음 한 걸음. 장르별 상황 카드 3장 뽑기(6장르 × 60장, 오프라인), 질문 카드, 인물 × 설정 × 사건 조합기, 아이디어 메모(회차에 붙음). AI 발상은 작가 본인의 Anthropic API 키로 브라우저에서 직접 호출(서버 없음) — 다음 전개 3안·반전·묘사 다듬기·대사 대안·제목 후보·인물 심문. 보낼 내용을 미리 보고 동의한 뒤에만 전송, 결과는 메모로만 저장(본문에 자동으로 넣지 않음). 키는 기본적으로 이 탭에서만 기억.
• 인물 관계도 — 헤더의 "관계" 보기. 바인더의 인물 카드가 노드로 나타나고, 끌어서 배치하고, 노드 오른쪽 손잡이에서 다른 인물로 끌면 관계선이 생긴다. 관계에는 종류(가족·연인·적·동료·스승·라이벌 또는 직접 입력)와 방향별 한 줄(A→B, B→A), 메모, 회차별 변화("3화에서 동맹이 된다"). 선은 종류별 색(작가가 종류마다 바꿀 수 있음), 노드에는 인물 카드의 라벨 색 띠, 노드 폭은 이름 길이에 맞춤, 라벨이 겹치면 자동으로 비켜나고 점선 안내선으로 제자리를 가리킴. 도표/목록(표) 전환, "시점" 선택(회차 또는 회차에 연결된 연표 사건)으로 어느 시점까지의 관계인지 보기, "이미지 저장"으로 컬러 또는 흑백(인쇄용) PNG 내려받기. 인물 카드 인스펙터에 "이 인물의 관계" 요약. 배치와 관계는 작품에 저장되고 백업에 담긴다. 라이브러리 없이 SVG로 그린다.
• 작업실 헤더 — 휴대폰 폭에서는 오른쪽 도구가 "⋯" 하나로 모인다. 본문/카드/관계 전환, "패널" 메뉴(연표·현황·점검·검색·영감 — 검색 결과를 누르면 본문의 그 위치로, 작품 전체 바꾸기는 스냅샷을 남기고), 인스펙터, "더 보기"(미리보기·내보내기, 테마 전환은 작품 목록에), 집중 모드.
• 단축키 — Ctrl/⌘+Shift+1~8 패널 열고 닫기, Ctrl/⌘+P 빠른 열기, Alt+S 진행 상태 순환, Ctrl/⌘+F 찾기·바꾸기, F2 제목 편집. 에디터 툴바의 "?"에서 전체 목록.
• 바인더 다중 선택·라벨 필터 — Ctrl/Shift 클릭으로 여러 문서를 골라 한 번에 휴지통·이동. 바인더와 코르크보드를 라벨로 걸러 보기, 코르크보드는 고른 폴더만 보기.
• PWA — 홈 화면 설치, 오프라인에서도 열림(프로덕션 빌드). 저장 공간 보호 요청.
• 다크/라이트 테마 토글.

기술 스택

영역	선택
프레임워크	Next.js 15 (App Router) · React 19
저장소	브라우저 IndexedDB (idb) — 백엔드·DB·로그인 없음
데이터 페칭	SWR (IndexedDB를 fetcher로)
에디터	Tiptap (ProseMirror) + StarterKit
스타일	Tailwind CSS + 원티드 디자인 토큰(CSS 변수 SSOT) · Pretendard
테스트	Vitest(단위) · Playwright(E2E) · GitHub Actions CI
내보내기	docx(DOCX), Blob 다운로드(TXT·MD)

시작하기

npm install
npm run dev        # 개발 서버 → http://localhost:3000

스크립트	설명
npm run dev	개발 서버
npm run build	프로덕션 빌드
npm start	빌드 결과 실행
npm run lint	ESLint
npm test	Vitest 단위 테스트
npm run test:e2e	Playwright E2E 테스트
node scripts/make-icons.mjs	PWA 아이콘·OG 이미지 재생성(sharp)

배포 시 NEXT_PUBLIC_SITE_URL에 실제 도메인을 넣으면 OG·robots·sitemap이 그 주소를 쓴다.

데이터는 브라우저 IndexedDB에만 저장됩니다. 다른 브라우저·기기·시크릿 창에서는 데이터가 공유되지 않습니다.

아키텍처 (Feature-Sliced Design)

Next app/은 라우팅 전용 얇은 래퍼이고, 화면 로직은 모두 src/의 FSD 레이어에 있습니다.

app/                  라우팅 (page.tsx) — src/views로 위임
  dashboard/          /dashboard      → 작품 목록
  projects/[id]/      /projects/:id   → 집필 워크스페이스
src/
  views/              화면 조립 (landing · dashboard · workspace)
  widgets/            복합 UI (binder · editor · inspector)
  features/           단위 기능 (autosave-document · reorder-document · toggle-theme)
  entities/           도메인 모델 + 데이터 훅 (project · document)
  shared/             공용 (db/IndexedDB 래퍼 · ui 컴포넌트)

별칭: @views @widgets @features @entities @shared @app

데이터 흐름

IndexedDB (shared/db)  ←→  entities 훅 (SWR)  ←→  views/widgets

• 컬렉션은 SWR 키로 캐시하고, 변경 후 mutate()로 재검증.
• 필드명은 저장소→훅→UI 전 구간 camelCase 통일.

라우트

경로	화면
/	랜딩 (시작하기 → 대시보드)
/dashboard	작품 목록
/projects/[id]	바인더 + 에디터 + 인스펙터

범위

로그인·서버 동기화는 만들지 않습니다(로컬 우선 원칙). 온디바이스 AI 문답은 실용성 부족으로 제거했습니다(2026-09). 변경 이력은 CLAUDE.md, 상세 기록은 docs/worklogs/를 보세요.