Next.js로 개발한 무료 독서 추적 웹 앱 Capybook을 소개합니다. 독서광의 불편함에서 시작된 사이드 프로젝트, 컨셉부터 완성까지의 이야기.

이런 경험 있지 않나요? 정말 좋은 책을 다 읽고, 누군가가 바로 세 권을 더 추천해줘요. "기억해둬야지"라고 생각하는데… 2주 후면 전부 잊어버려요. 제목, 작가, 추천해준 사람까지 — 전부요. 아니면 서점에 서서, 이 책을 이미 읽었는지 아닌지 기억이 안 나는 거예요.
저한테 정확히 이런 일이 계속 일어났어요. 몇 달 동안 노트, 폰 메모, 기존 앱들을 다 써봤는데 뭐 하나 딱 맞는 게 없었어요. 너무 복잡하거나, 핵심 기능이 빠져있거나, 인터페이스가 마음에 안 들거나.
그래서 생각했어요: 직접 만들면 어떨까?
그 결과물이 바로 Capybook이에요 — 독서가가 독서가를 위해 만든 무료 독서 추적 웹 앱이에요.
한 줄로 요약하면
Capybook은 독서를 추적하고, 서재를 정리하고, 책에 별점과 리뷰를 남기고, 새로운 추천을 받을 수 있는 무료 웹 앱이에요 — 깔끔하고 편한 인터페이스로요.
쉽게 말하면, 디지털 독서 친구예요. 지금 읽고 있는 책, 읽고 싶은 책, 이미 읽은 책을 전부 추가할 수 있어요. 진행 상황을 기록하고, 리뷰를 남기고, 목표를 세울 수 있어요. 그리고 독서는 나누는 것이기도 하니까, 커뮤니티 기능도 있어서 더 풍부한 경험을 할 수 있어요.

Capybook의 핵심은 내 서재예요. 내장된 검색 바로 어떤 책이든 찾아서 클릭 한 번으로 컬렉션에 추가할 수 있어요. 책들은 상태별로 정리돼요: 읽는 중, 읽을 예정, 완독.

읽고 있는 책마다 어디까지 읽었는지 기록할 수 있어요. 진행 바가 채워지는 걸 보면 뿌듯하고, 계속 읽고 싶은 동기부여가 돼요. 부담 없이, 판단 없이 — 그냥 내 진행 상황을 시각적으로 보여주는 거예요.
책을 다 읽으면 별점을 매기고 리뷰를 남길 수 있어요. 시간이 지나면 진짜 독서 히스토리가 쌓여요 — 이번 달에 몇 권 읽었는지, 올해는 몇 권인지, 어떤 장르를 좋아하는지 통계로 볼 수 있어요.
더 열심히 읽고 싶은 사람들을 위해 Capybook은 독서 챌린지를 제공해요 — 독서를 더 재밌게 만드는 목표들이에요. 그리고 매일 맞춤 추천을 받을 수 있어서 읽을 책이 떨어질 걱정이 없어요.
독서는 보통 혼자 하는 활동이지만, 다른 독서가들과 발견을 나누면 훨씬 더 즐거워요. Capybook에는 책에 대해 소통할 수 있는 소셜 기능이 있어요.
독서 추적 앱을 꽤 많이 써봤어요. Goodreads가 업계에서 제일 크지만, 인터페이스가 오래됐고 사용자 경험이 아쉬워요. 다른 앱들은 예쁘긴 한데 너무 제한적이거나, 필요 없는 기능으로 가득 차서 중요한 걸 찾기 어려웠어요.
제가 원했던 건 간단하고, 빠르고, 쾌적한 도구 — 독서 기록을 업데이트하려고 열고 싶은 앱이지, 또 하나의 귀찮은 일이 아닌 거였어요.
개발자로서, 매일 직접 사용하는 도구를 만드는 것만큼 보람 있는 일은 없어요. Capybook의 모든 기능은 실제 필요에서, 개인적인 불편함에서 태어났어요. "있어 보이려고" 넣은 쓸데없는 기능은 하나도 없어요 — 모든 요소에 이유가 있어요.
기술적으로 성장하는 데도 최고의 방법이에요. 개발자이자 사용자일 때, 아무것도 그냥 넘어가지 않거든요. 모든 버그가 개인적으로 짜증나고, 모든 개선이 직접적인 기쁨이에요.
마스코트가 왜 카피바라인지 궁금할 수 있어요. 답은 간단해요: 카피바라는 동물의 왕국에서 가장 여유로운 동물이에요. 차분하고, 느긋하고, 천천히 움직여요. 이 앱에 딱 원했던 분위기예요 — 독서는 편안하고 여유로운 시간이지, 시간과의 싸움이 아니거든요.
솔직히 말해서, 책 읽는 카피바라는 그냥 너무 귀여워요.
개발자를 위한 조언: 자기 자신을 위해 만드세요
사이드 프로젝트 아이디어를 찾고 있다면, 자신이 매일 겪는 문제부터 시작하세요. 가장 까다로운 테스터가 바로 자신이 될 거고, 요구사항을 완벽하게 알고, 정말 쓰고 싶으니까 끝까지 완성할 동기부여가 생겨요. 그게 최고의 사이드 프로젝트의 비결이에요.
기술 섹션
여기서부터는 개발자를 위한 내용이에요. 코드에 관심 없으시면 바로 마무리로 넘어가셔도 돼요 — Capybook은 뒤에 뭐가 있는지 몰라도 잘 작동해요!
Capybook은 Next.js (App Router)로 만들었어요. 뛰어난 SEO와 부드러운 사용자 경험을 가진 성능 좋은 웹 앱을 만들 수 있거든요. PWA (Progressive Web App)이기도 해서 폰에 네이티브 앱처럼 설치할 수 있어요.
Next.js 선택은 자연스러웠어요: 클라이언트 측 인터랙티비티가 필요 없는 페이지에는 Server Components, 백엔드에는 API Routes, 그리고 아키텍처를 크게 단순화하는 파일 기반 라우팅 시스템.
핵심 기능 중 하나가 책 검색이에요. 책 제목을 입력하면 표지, 작가, 설명과 함께 바로 찾을 수 있어야 한다는 게 목표였어요.
// 책 검색 간소화 예시
async function searchBooks(query: string) {
const response = await fetch(
`https://www.googleapis.com/books/v1/volumes?q=${encodeURIComponent(query)}&maxResults=10`
);
const data = await response.json();
return data.items?.map((item: GoogleBookItem) => ({
title: item.volumeInfo.title,
author: item.volumeInfo.authors?.join(", "),
cover: item.volumeInfo.imageLinks?.thumbnail,
description: item.volumeInfo.description,
pageCount: item.volumeInfo.pageCount,
})) ?? [];
}많은 공을 들인 부분이 반응형 디자인이에요. Capybook은 모바일에서도 데스크탑에서도 동일하게 쾌적해야 해요 — 실제로 대부분의 사용자가 폰으로 쓰는데, 독서 세션 직후에 진행 상황을 업데이트하는 경우가 많거든요.
PWA라서 편의성이 더해져요: 홈 화면에 설치되고, 네이티브 앱처럼 실행되고, 서비스 워커 덕분에 제한된 연결에서도 작동해요.
가장 큰 도전은 단순함과 기능 사이의 균형을 찾는 거였어요. 기능을 계속 추가하고 싶은 유혹이 있지만, 추가할 때마다 인터페이스가 복잡해지고 사용자 경험이 흐려질 수 있어요. 좋은 아이디어라도 거절하는 법을 배웠어요 — 앱을 핵심에 집중시키기 위해서요.
또 다른 도전은 책 데이터 관리였어요. 책 API가 완벽하지 않거든요: 표지 누락, 불완전한 메타데이터, 중복… 가끔 혼란스러운 데이터에도 깔끔한 경험을 제공하기 위해 꽤 많은 로직을 구현해야 했어요.
일주일에 세 권을 읽든, 한 달에 한 권을 읽든 — Capybook은 여러분을 위한 앱이에요. 무료이고, 간단하고, 매일 직접 사용하는 사람이 정성을 담아 만들었어요.
복잡한 가입 절차 없고, 성가신 광고 없고, 데이터 판매 없어요. 그냥 독서 생활을 조금 더 체계적으로, 훨씬 더 즐겁게 만들어주는 도구예요.
Raphaël Raclot is a French full stack developer passionate about cybersecurity and modern web technologies. He specializes in React, Next.js, and TypeScript, and shares his discoveries, projects, and insights here.
Learn more about Raphaël
개발자 포트폴리오와 별도로 Astro와 Tailwind CSS를 사용하여 여행 블로그 Pixora를 만든 이유. 47개국, 156개 글, 30,000장 이상의 사진과 여행자를 위한 실용적인 팁.

앱과 소셜 미디어가 도파민 시스템을 어떻게 악용하는지, 그리고 통제력을 되찾기 위한 구체적인 전략을 알아보세요.

내 블로그의 첫 번째 글입니다. 개발, 사이버보안, 스포츠, 여행, 심리학, 사진, 일상, 언어에 대한 이야기를 공유하겠습니다.