bookswap — Product Deck

Product Overview

bookswap

폐쇄형 교환독서 관리 플랫폼
모임을 만들고, 책을 돌리고, 기록을 쌓으세요

Vanilla JS Supabase Vercel 네이버 책 API

🤖 Developed with Claude Code

bookswap-rose.vercel.app

서비스 개요

교환독서, 더 쉽게 관리하세요

소규모 독서 모임에서 책을 순서대로 돌려 읽는 문화, bookswap이 교환 주기 관리부터 기록까지 자동으로 처리해 드립니다.

🔄

자동 순환 관리

교환 주기가 되면 알림과 함께 한 번의 클릭으로 모든 책이 다음 사람에게 이동합니다.

🔑

초대 코드 시스템

6자리 코드 또는 링크로 모임에 초대합니다. 회원가입 없이 이름만 입력하면 바로 참여 가능합니다.

📚

도서 기록 아카이브

모임을 통해 읽은 모든 책이 내 기록에 자동 저장됩니다. 모임별 필터로 쉽게 탐색하세요.

홈 화면

참여 중인 모임을
한눈에

교환 임박 순서로 정렬된 모임 카드와 D-day 배지로 다음 교환일을 직관적으로 확인합니다.

D-day 배지: 2일 이내 빨강 / 7일 이내 노랑 / 여유 초록

멤버별 현재 소지 책 미리보기

다크 사이드바 + 상단 탑바 레이아웃

SF 읽기 모임 D-2

4명 · 4권 · 14일 주기

현아

파친코

지민

채식주의자

고전문학클럽 D-7

3명 · 3권 · 14일 주기

에세이 소모임 D-14

2명 · 2권 · 7일 주기

모임 만들기

5단계로
모임 완성

모임 이름, 인원, 주기, 내 이름, 책만 입력하면 초대코드가 자동 발급됩니다.

멤버 이름은 생성자만 입력, 나머지는 초대코드로 각자 등록

네이버 책 검색 API로 표지·저자 자동 입력

교환 주기(일) 설정으로 D-day 자동 계산

초대 시스템

코드 하나로
모임 합류

6자리 초대코드 또는 URL 링크를 공유하면, 상대방이 이름만 입력해서 즉시 참여할 수 있습니다.

초대코드는 모임 데이터 내 자동 생성 (DB 별도 저장 불필요)

?join=CODE URL 파라미터로 링크 직접 접근 가능

참여 시 이름 입력 → 즉시 멤버 등록 및 책 배정

초대 코드

A3K7BQ

🔗 링크

복사

모임 상세

누가 어떤 책을
갖고 있는지

순환 현황 다이어그램과 책 현황 테이블로 현재 교환 상태를 한눈에 파악합니다.

순환 다이어그램: 멤버 순서대로 화살표로 시각화

책 현황 테이블: 각 책의 현재 소지자 + 수정 버튼

교환 이력: 날짜 · 책 · 방향 타임라인

순환 현황

현아

파친코

→

지민

채식주의자

→

수진

아몬드

↩

책 현황

책 제목소지자 파친코현아수정 채식주의자지민수정 아몬드수진수정

교환 자동화

자동 + 수동,
두 가지 순환

주기 도달 시 배너로 자동 감지하거나, 생성자가 언제든 수동으로 순환할 수 있습니다.

자동: lastExchangeDate + cycleDays ≤ 오늘 감지 → 노란 배너 표시

수동: 생성자 헤더의 🔄 버튼으로 언제든 즉시 순환

멤버 배열 circular shift · 모든 이력 자동 기록

헤더 버튼 (생성자 전용)

🔄 순환하기

⚙️ 설정

교환 후 결과 예시

책이전이후 파친코현아지민 채식주의자지민수진 아몬드수진현아

생성자 전용 설정

모임 운영을
완전히 통제

생성자에게만 노출되는 ⚙️ 설정 버튼으로 모임의 모든 것을 관리합니다.

기본 정보 수정 — 모임 이름 · 교환 주기 변경

멤버 관리 — 이름 수정 · 강퇴 (생성자 강퇴 불가)

강퇴 시 해당 멤버의 책 → 생성자에게 자동 이동

모임 종료 (데이터 보존) · 모임 삭제 (완전 제거)

감상 메모

읽은 책 감상을
모임원과 나눠요

모임 상세 하단에서 책별로 탭을 전환하며 댓글 형식으로 감상을 기록합니다.

모임 내 책별 탭 전환 — 여러 책 동시 관리

아바타 + 이름 + 날짜 + 내용 댓글 형식

내 댓글만 삭제 가능 (MyMember localStorage 기반)

Cmd+Enter 빠른 등록 지원

파친코

채식주의자

아몬드

현

현아 2026.05.14

이민진 작가의 문체가 정말 좋았어요. 특히 2부가 인상 깊었습니다.

지

지민 2026.05.15

역사적 배경이 촘촘해서 몰입이 잘 됐어요!

감상을 남겨보세요...

등록

순서 수정 모달

순환 순서를
자유롭게 조정

↑↓ 버튼으로 멤버 순서를 바꾸면 다음 자동 순환에 즉시 반영됩니다. 마지막 멤버 다음은 다시 첫 번째로 순환합니다.

모임 상세 헤더의 "순서 수정" 버튼으로 진입

변경 시 순환 방향 화살표(→ / ↩)로 즉시 미리보기

저장 시 Supabase DB 즉시 업데이트

책 수정 모달

소지자 변경과
책 교체를 한 번에

책 현황 테이블의 "수정" 버튼을 누르면 해당 책의 소지자를 바꾸거나 다른 책으로 교체할 수 있습니다.

소지자 변경: 드롭다운에서 현재 멤버 선택

책 교체: 네이버 검색으로 새 책 선택 (선택 사항)

저장 즉시 순환 현황 및 모든 화면에 반영

내 기록

읽은 책을
한 곳에

모임을 통해 돌려 읽은 모든 책이 자동으로 아카이브됩니다. 모임별 필터로 특정 모임의 책만 골라 볼 수 있습니다.

웹: 5열 그리드 / 모바일: 3열 그리드

모임별 필터 칩으로 빠른 탐색

네이버 API 제공 실제 책 표지 이미지

전체 SF 읽기 모임 고전문학클럽

읽은 책 10권

기기 복원

기기가 바뀌어도
내 모임은 그대로

로그인 없이 8자리 고유 코드만으로 어떤 기기에서든 내 모임을 복원합니다.

앱 최초 접속 시 8자리 코드 자동 발급 (대소문자 혼동 없는 문자셋)

마이페이지에서 XXXX-XXXX 형식으로 확인 · 복사

새 기기에서 코드 입력 → Supabase 스캔 → 모임 자동 복원

멤버 데이터에 userCode 저장 — 별도 인증 테이블 불필요

내 고유 코드

LHXH-CXRR

복사

이 코드로 다른 기기에서 내 모임을 복원할 수 있어요.

Tech Stack

단일 파일, 제로 빌드

Frontend

Vanilla JS

단일 index.html
빌드 스텝 없음

Database

Supabase

PostgreSQL
JSONB 스키마

Deploy

Vercel

Static + Serverless
GitHub 자동 배포

API

Naver Books

책 검색·표지
Serverless 프록시

AI Dev Tool

🤖 Claude Code

기획·개발·배포
전 과정 AI 페어 코딩