[Django + Vue.js] 1. AI API 기반 도서 추천 및 실시간 모임 서비스 앱 <BOOKLUV> - 프로젝트 명세서 및 주요 서비스 설명

안녕하세요!
제가 Django + Vue.js 로 AI API 기반 도서 추천 및 실시간 모임(채팅) 서비스 앱을 개발하였습니다..

일단 메인 페이지부터..

 

개발 기간은 2025.12.19 ~ 2025.12.26까지 총 일주일로 진행이 되었는데, (물론 이 글을 작성하는 오늘까지 에러 및 미흡한 구현을 수정하였습니다.. 고치려고 한다면 끝도 없음 ^^)
짧은 기간이었지만 처음으로 나름의 성과를 만들어낸 플젝이라 생각하여 글로 기록합니다.

 

잔말 말고 바로

 

들어가기에 앞서.. 프로젝트 기획 배경 짧게 설명

같이 수업듣는 친구들끼리 교환독서(책 한권으로 서로 나눠 읽으면서 책에 간단한 메모 남기며 읽고 교류하는 독서)를 하게 되었는데, 독서 모임을 좀 더 가볍고 쉽게 가질 수 없을까? 란 생각이 들었습니다.
오프라인에서 독서 모임을 찾아보면 양질의 진지한 독서 모임을 찾기가 힘들기도 하고, 정해진 책을 읽어야 하는 경우도 있고, 또 시간을 맞춰서 내기가 어렵기도 하잖아요? 
그래서 온라인 서비스로 가볍게 채팅으로 책 모임을 가지는 서비스를 만들어보자!란 생각을 했습니다.
빠르게 모이고 빠르게 흩어지는 그런.. 모임.. 부담이 훨씬 덜하기도 하겠죠?

 

---

0. 프로젝트 개요 및 서비스 특징, 주요 기능

⭐ 프로젝트 개요

• 설명 : AI API 기반 도서 추천 및 실시간 모임 서비스
• 기간 : 2025.12.19 - 2025.12.26
• 목표 서비스 : 카카오 api 기반 로그인+ AI API 기반 도서 추천 기능 + 실시간 채팅+실시간 알림 + 자유게시판 및 댓글알라딘 api 기반의 양질 데이터셋 실제 구현 정도
• 추가적인 성과 : Netlify+Railway 기반의 풀스택 배포 / SQLite에서 PostgreSQL로 마이그레이션해서 DB 안정성 높임

 

⭐서비스

카카오 api 기반 로그인+ AI API 기반 도서 추천 기능 + 실시간 채팅+실시간 알림 + 자유게시판 및 댓글알라딘 api 기반의 양질 데이터셋 실제 구현 정도

 

⭐ 주요 기능

• Kakao API 기반 소셜 로그인
• ChatGPT 4o mini 기반 도서 및 모임 추천
• WebSocket 및 Django Channels, Redis 기반 실시간 채팅
• WebSocket, Django Channels, Django Selery 기반 알림 및 채팅방 생성
• 자유 게시판 및 댓글 CRUD

 

>> 기능 관련해서는 아래에 다시 써보겠음

 

 

현재 ssafy에 다니고 있어서 해당 프로젝트는 기본적으로 2인 1조로 진행되어야 하는데, 저는 3인 1조로 진행하게 되었습니다. 보통 이렇게 되면 백 2명 프론트 1명으로 가는것이 맞기 때문에 

프론트 혼자 했어요.

기능별로 나눠서 구현해볼까 하다가, 백-프론트 딱 나눠서 진행해보는 경험도 중요하다고 생각하기도 했고 이렇게 또 해보면서 사람이 성장한다고 믿(었)기 때문에 일단 했어요.. ㅎㅎ

 

1. 기술 스택 및 전체 서비스 구조

 

기술 스택과 서비스 구조도를 보면 아시겠지만 실시간 모임 서비스를 제공하고자 했기 때문에 

WebSocket + Redis + Django Channels >> 실시간 채팅 기능
WebSocket + Django Channels + Celery(<< 실시간 알람을 위해 추가) >> 알림 및 채팅방 생성 기능 

이 기술 스택을 활용하여 개발하였습니다.

ChatGPT 4o mini 모델을 활용하여 알라딘 api 도서 데이터를 활용하여 설문을 통해 사용자에게 맞는 도서를 추천해주고 
하단에 해당 도서로 만들어진 모임이 뜨게 했습니다.
그래서 책을 찾고 -> 모임을 생성하거나 가입하여 실시간 채팅(모임)에 참여할 수 있는 서비스로 이어지게 했습니다.
기획 단계에서도 최대한 이 부분에서 UX를 고려하여 설계하였구요! (이후 포스팅에서 페이지 관련 설명 진행할 예정)

그리고 일반 로그인/로그아웃이 아닌 카카오 api 기반 로그인을 구현해서 가입에 부담을 줄였고,
자유게시판을 따로 두어 게시판 및 댓글 CRUD도 구현하였습니다.

 

2. 개발환경 및 프로젝트 구조, ERD

🔗 Frontend

• vue.js 3.5.25
• vite 7.2.7
• vue-router 4.6.3
• pinia 3.0.4
• pinia-plugin-persistedstate 4.7.1
• axios 1.13.2
• swiper 12.0.3
• @vitejs/plugin-vue 6.0.2
• vite-plugin-vue-devtools 8.0.5
• Netlify

🔗 Backend

• django 4.2.27
• WebSocket 25.5.0
• Redis 5.0.1
• Daphne 4.0.0
• docker 29.1.3
• docker compose 2.40.3

 

frontend/
├── node_modules/
├── public/
├── App.vue
├── main.js
└── src/                     # 프론트엔드 메인 소스 디렉터리
    ├── api/                 # 백엔드 API 통신 모듈
    ├── assets/              # 이미지, 스타일 등 정적 리소스
    ├── components/          # 공통 컴포넌트
    ├── router/              # Vue Router 설정
    ├── stores/              # 상태 관리 (Pinia/Vuex)
    └── views/               # 페이지 단위 컴포넌트

backend/
├── klub_chat/ # 채팅 기능 관련 앱
├── klub_talk/ # 도서 관련 기능 앱
├── klub_user/ # 사용자 관리 기능 앱
├── klub_recommend/ # 추천 시스템 관련 앱
└── manage.py # Django 관리 명령어 실행을 위한 파일

AI 도서 추천 서비스와 실시간 채팅서비스 이 두가지가 메인 서비스로 나가는 것이었기 때문에
klub_talk 안에서 테이블들이 저렇게 이루어지게 되었습니다.
채팅 생성 시 책에 관련된 퀴즈를 출제해야 하는데, 퀴즈를 맞춘 사람만이 채팅에 참여할 수 있게 했고 퀴즈를 맞출 기회는 총 3번이 주어집니다! (3번 다 틀리면 해당 채팅은 참여 불가능) 그래서 테이블을 meeting 기준으로 보시면 이해가 더 되실 것 같습니다 (저도 개발에 함께 했지만 최종 erd는 다른 팀원이 하여,,)
그리고 모임에 기준이 되는 책의 정보도 가져와야 하기 때문에 meeting 테이블에서 책 정보들도 다 받아오고 있슴다!

---

 

일단 여기까지 프로젝트 기술 스택 및 서비스들과 개발 환경, 간단한 기획배경까지 작성해보았습니다.. 
이 프로젝트는 개발 기간이 짧았는데 구현을 해내야하는 것이 많았고, 팀원들과 정말 삽질하면서 개발했습니다.. 원래 실 개발기간동안 배포는 생각도 못해보았는데 프로젝트를 발표해야하는 자리가 있어 실시간 채팅을 꼭 보여주고 싶다는 강한 의지로 배포까지 어쩌다가 해냈슴다.. 그래서 원래 django에서 sqlite3로 db를 사용했는데 railway로 백 배포를 하게 되어 PostgreSQL로 옮기게 되었고 redis도 레일웨이에 함께 배포 올려야한다는 것도 알게되었고,, 아무튼 정말 많은 일이 있었던 프로젝트였습니다..

이후 포스팅으로는 제가 맡은 프론트엔드 개발에 대해 이어서 작성해보겠습니다.

그럼 이만..

 

p.s 댓글 환영