AI 북 동반자 (Book Companion) 프로젝트

<div align="center"> <br /> <a href="https://youtu.be/NiwawEe92Co" target="_blank"> <img src="public/readme/readme-hero-new.webp" alt="Project Banner"> </a> <br /> <div> <img src="https://img.shields.io/badge/-Next.js_16-000000?style=for-the-badge&logo=Next.js&logoColor=white" /> <img src="https://img.shields.io/badge/-ElevenLabs-FFFFFF?style=for-the-badge&logo=ElevenLabs&logoColor=black" /> <img src="https://img.shields.io/badge/-Vapi-62F6B5?style=for-the-badge&logo=Vapi&logoColor=black" /> <img src="https://img.shields.io/badge/-Clerk-6C47FF?style=for-the-badge&logo=Clerk&logoColor=white" /><br/> <img src="https://img.shields.io/badge/-MongoDB-47A248?style=for-the-badge&logo=MongoDB&logoColor=white" /> <img src="https://img.shields.io/badge/-Typescript-3178C6?style=for-the-badge&logo=Typescript&logoColor=white" /> <img src="https://img.shields.io/badge/-Tailwind-06B6D4?style=for-the-badge&logo=Tailwind-CSS&logoColor=white" /> <img src="https://img.shields.io/badge/-Shadcn/UI-000000?style=for-the-badge&logo=shadcnui&logoColor=white" /> </div> <h3 align="center">AI 북 동반자 (Book Companion) | Vapi, ElevenLabs</h3> <div align="center"> 이 프로젝트는 <a href="https://www.youtube.com/watch?v=XUkNR-JfHwo" target="_blank"><b class="JavaScript Mastery">JavaScript Mastery</b></a> 유튜브의 상세 튜토리얼을 통해 단계별로 구축할 수 있습니다. JSM 가족이 되어주세요! </div> </div>

📋 <a name="table">목차 (Table of Contents)</a>

✨ 소개
⚙️ 기술 스택 (Tech Stack)
🔋 기능 (Features)
🤸 빠른 시작 (Quick Start)
🔗 자산 (Assets)
🚀 더 알아보기 (More)

🚨 튜토리얼 (Tutorial)

이 저장소는 저희 YouTube 채널 <a href="https://www.youtube.com/@javascriptmastery/videos" target="_blank"><b class="JavaScript Mastery">JavaScript Mastery</b></a>에서 제공되는 심층 튜토리얼에 해당하는 코드를 담고 있습니다.

시각적 학습을 선호한다면 이 자료가 완벽합니다. 저희 튜토리얼을 따라 초보자도 쉽게 이러한 프로젝트를 단계별로 구축하는 방법을 배워보세요!

<a name="introduction">✨ 소개</a>

Bookified는 AI 기반 플랫폼으로, 책과 실시간 음성 대화를 나눌 수 있게 해줍니다. Next.js 16, Vapi, MongoDB를 사용하여 구축되었으며, PDF 파일을 자연스러운 음성 합성(natural voice synthesis)을 이용해 인터랙티브한 개체로 변환합니다. 커스텀 ElevenLabs 페르소나 중에서 선택하여 라이브러리와 대화하고, 요약본을 요청하며, 실시간 전사(live transcripts)를 확인할 수 있습니다. 이 모든 것이 Shadcn UI와 Clerk 인증으로 세련되게 포장되어 있습니다.

시작하는 단계이거나 도움이 필요하거나 버그가 발생하면, 50k+ 명 이상의 멤버가 있는 활발한 Discord 커뮤니티에 참여하세요. 이곳은 사람들이 서로 돕는 곳입니다.

<a name="tech-stack">⚙️ 기술 스택</a>

**Clerk**는 포괄적인 사용자 관리 및 인증 플랫폼입니다. 이메일 및 소셜 로그인을 위한 안전하고 미리 구축된 컴포넌트를 제공하여, 최소한의 설정으로 원활한 세션 관리와 보호된 경로를 가능하게 합니다.
**CodeRabbit**은 AI 기반 코드 리뷰 플랫폼으로, 풀 리퀘스트(pull requests)에 대한 상황별, 라인별 피드백을 제공합니다. 버그 식별, 최적화 제안, 코딩 표준 준수 확인 등을 통해 검토 프로세스를 자동화함으로써 개발자의 수동 노력을 크게 줄이고 코드 품질을 향상시킵니다.
**ElevenLabs**는 생생한 텍스트 음성 변환(text-to-speech)을 제공하는 고급 AI 오디오 플랫폼입니다. Bookified의 음성 미리 보기 기능을 구동하여, 사용자가 대화를 시작하기 전에 다양한 자연스러운 사운드의 AI 페르소나를 듣고 선택할 수 있게 합니다.
**MongoDB**는 확장성과 개발자 편의성을 위해 설계된 유연한 문서 기반 NoSQL 데이터베이스입니다. Mongoose와 결합하여 사용자 라이브러리, 도서 메타데이터, 대화 기록의 핵심 저장소 역할을 합니다.
**Next.js**는 풀스택 웹 애플리케이션을 구축하기 위한 강력한 React 프레임워크입니다. 핵심 애플리케이션 로직, 서버 측 렌더링(server-side rendering), API 라우트를 처리하여 Bookified 플랫폼에 빠르고 반응성이 좋은 인터페이스를 구현합니다.
**Shadcn UI**는 Tailwind CSS와 Radix UI로 구축된 재사용 가능하고 접근성 높은 컴포넌트 모음입니다. 커스터마이징과 테마 지정이 쉬운 깨끗하고 모듈화된 전문적인 사용자 인터페이스를 만들 수 있게 해줍니다.
**TypeScript**는 정적 타이핑(static typing)을 추가하여 JavaScript의 상위 집합(superset)이며, 더 나은 툴링, 코드 품질 및 오류 감지를 제공합니다. 이는 코드베이스가 확장됨에 따라 애플리케이션이 유지보수 가능하고 견고하게 유지되도록 보장합니다.
**Vapi**는 실시간 저지연(low-latency) 대화형 오디오를 구현하는 전문 음성 AI 플랫폼입니다. Bookified의 주요 엔진 역할을 하며, 사용자가 업로드한 콘텐츠와 원활하게 주고받는 구두 상호작용을 할 수 있도록 합니다.

<a name="features">🔋 기능 (Features)</a>

👉 PDF 업로드 및 처리(Ingestion): 자동 텍스트 추출, 지능형 청킹(chunking), 고차원 임베딩(high-dimensional embeddings)을 통해 PDF 도서를 원활하게 업로드하고, 정확한 컨텍스트 검색을 수행합니다.

👉 음성 우선 대화 (Voice-First Conversations): 업로드된 도서와 자연스러운 실시간 음성 대화를 나누며, Vapi를 통해 질문하거나 복잡한 개념을 구두로 탐색할 수 있습니다.

👉 AI 음성 페르소나 (Voice Personas): 다양한 개별 AI 성격 중 하나를 선택하고, ElevenLabs가 제공하는 즉각적이고 고음질의 미리보기를 통해 완벽한 독서 동반자를 찾아보세요.

👉 스마트 요약 및 인사이트 (Smart Summaries & Insights): 어떤 챕터든 핵심 내용을 빠르게 추출하거나 심층적인 요약을 요청하여, 장문의 콘텐츠를 더욱 접근하기 쉽고 소화하기 쉽게 만듭니다.

👉 세션 기록 (Session Transcripts): 모든 음성 상호작용을 자동 생성된 텍스트 기록으로 완전히 보관하여, 논의 과정에서 얻은 핵심 인사이트를 절대 놓치지 않도록 합니다.

👉 라이브러리 관리 (Library Management): 고성능 검색 인터페이스를 통해 개인 업로드 또는 글로벌 컬렉션을 손쉽게 정리하고 검색할 수 있습니다.

👉 인증 및 구독 (Auth & Subscription): 이메일 및 소셜 로그인을 통해 사용자 접근을 안전하게 보호하며, 프리미엄 기능과 플랫폼 구독을 관리하는 강력한 결제 시스템을 갖추고 있습니다.

그리고 코드 아키텍처와 재사용성을 포함하여 훨씬 더 많은 기능들이 있습니다.

<a name="quick-start">🤸 빠른 시작 (Quick Start)</a>

다음 단계를 따라 로컬 환경에 프로젝트를 설정하세요.

사전 준비 사항 (Prerequisites)

다음 항목들이 시스템에 설치되어 있는지 확인하세요:

Git
Node.js
npm (Node Package Manager)

저장소 클론하기 (Cloning the Repository)

git clone https://github.com/adrianhajdin/jsm_bookified.git
cd jsm_bookified

설치 (Installation)

npm을 사용하여 프로젝트 종속성을 설치하세요:

npm install

환경 변수 설정 (Set Up Environment Variables)

프로젝트 루트에 .env라는 새 파일을 만들고 다음 내용을 추가하세요:

NODE_ENV='development'
NEXT_PUBLIC_BASE_URL=

...

플레이스홀더 값들을 실제 자격 증명으로 교체하세요. 이 정보들은 다음 사이트들에서 가입하여 얻을 수 있습니다: Clerk, Vercel, MongoDB, Vapi, Google AI Studio, ElevenLabs.

프로젝트 실행 (Running the Project)

npm run dev

브라우저에서 http://localhost:3000을 열어 프로젝트를 확인하세요.

<a name="links">🔗 에셋 (Assets)</a>

프로젝트에 사용된 에셋과 스니펫은 **비디오 키트(video kit)**에서 찾을 수 있습니다.

<a name="more">🚀 더 알아보기 (More)</a>

Next.js Pro Course로 실력 향상시키기

이 프로젝트를 만드는 것이 즐거웠나요? 더욱 풍부한 학습 경험을 위해 PRO 코스에 깊이 빠져보세요. 이 코스는 상세한 설명, 멋진 기능, 그리고 여러분의 실력을 높여줄 연습 문제들로 가득합니다. 한번 도전해 보세요!