목차
WalkBook은 AI 기반 도서 커버 이미지 생성 기능을 포함한 도서 관리 시스템입니다.
특히 AI 기술을 활용한 커버 이미지 자동 생성 기능을 통해 사용자는 도서의 내용과 분위기에 맞는 맞춤형 커버 이미지를 손쉽게 생성할 수 있습니다.
저희 플랫폼은 React 기반의 프론트엔드와 Spring Boot 기반의 백엔드, 그리고 AI 이미지 생성 API를 통합하여 도서 관리 서비스를 제공하며, 실시간 검색과 카테고리별 필터링, AI 커버 생성으로 사용자 경험을 강화했습니다.
AI로 나만의 도서 커버를 만드는 스마트 도서 관리 플랫폼 'WalkBook'
-
✏️ 도서 목록 조회
- 등록된 모든 도서를 한눈에 조회할 수 있어요.
- 카테고리별, 제목 및 작가명으로 실시간 검색이 가능해요.
- AI로 생성된 개성 있는 커버 이미지와 함께 도서를 확인할 수 있어요.
-
🎨 AI 커버 이미지 생성
- 도서의 제목, 저자, 장르, 내용 요약을 바탕으로 AI가 맞춤형 커버 이미지를 생성해요.
- 다양한 스타일(클래식, 모던, 미니멀, 일러스트 등)을 작성할 수 있어요.
- 기존 커버 이미지가 마음에 들지 않을 때 새로운 이미지로 교체가 가능해요.
-
🗂️ 카테고리 기반 필터링
- 소설, IT 전문서적, 에세이, 자기계발, 경제, 역사 등 다양한 카테고리로 분류해요.
- 백엔드 API에서 동적으로 카테고리 목록을 불러와 관리가 용이해요.
-
📋 도서 상세 정보
- 도서의 모든 정보를 상세하게 확인할 수 있어요.
- AI 생성 커버 이미지를 대형으로 감상할 수 있어요.
- ISBN, 출판사, 출간일, 페이지 수 등 체계적인 정보 관리가 가능해요.
-
📝 도서 등록 및 수정
- 새로운 도서를 간편하게 등록할 수 있어요.
- 등록과 동시에 AI 커버 이미지 생성을 요청할 수 있어요.
- 기존 도서 정보를 언제든지 수정할 수 있어요.
-
🗑️ 도서 삭제
- 불필요한 도서를 안전하게 삭제할 수 있어요.
- 삭제 전 확인 다이얼로그로 실수를 방지해요.
2025.05.29 ~ 2025.06.02
| 이성훈 | 권도윤 | 김승환 | 이원욱 | 박소연 | |
|---|---|---|---|---|---|
| 역할 | 조장, PM, 풀스택 | 프론트 개발 | 프론트 개발 | 프론트 개발 | 프론트 개발 |
| p.plue1881@gmail.com | ian661087@gmail.com | kimseunghwan7777@gmail.com | dldnjsdnr123@gmail.com | gumza9go@gmail.com | |
| GitHub | https://github.com/NextrPlue | https://github.com/doyooon | https://github.com/7sh7 | https://github.com/leewonwook | https://github.com/sorasol9 |
 |
 |
 |
 |
 |
- 도서 목록 조회
- AI 커버 이미지 생성
- 실시간 검색
- 카테고리 필터링
- 도서 상세 정보
- 도서 삭제
- 도서 등록/수정
| 기능 | 설명 |
|---|---|
| 도서 목록 조회 | 백엔드 API 연동으로 실시간 도서 목록을 불러옵니다. AI 생성 커버 이미지와 함께 도서를 시각적으로 표시합니다. 반응형 그리드 레이아웃으로 데스크톱, 태블릿, 모바일에서 최적화된 UI를 제공합니다. |
| AI 커버 이미지 생성 | 도서 정보를 바탕으로 AI가 맞춤형 커버 이미지를 자동 생성합니다. 다양한 스타일(클래식, 모던, 미니멀, 판타지 등)을 선택할 수 있습니다. 생성된 이미지 중 마음에 드는 것을 선택하거나 재생성을 요청할 수 있습니다. |
| 실시간 검색 | 도서명과 저자명으로 실시간 검색이 가능합니다. 검색어 입력 시 즉시 결과가 필터링되어 사용자 경험을 향상시킵니다. AI 생성 커버 이미지도 함께 검색 결과에 표시됩니다. |
| 카테고리 필터링 | 백엔드에서 동적으로 카테고리 목록을 불러와 필터링을 제공합니다. 각 카테고리별로 AI가 적합한 스타일의 커버 이미지를 추천합니다. 소설, IT 전문서적, 에세이, 자기계발, 경제, 역사 등 다양한 카테고리를 지원합니다. |
| 도서 상세 정보 | 도서의 모든 상세 정보를 체계적으로 표시합니다. AI 생성 커버 이미지를 대형으로 감상할 수 있습니다. ISBN, 출판사, 출간일, 페이지 수, 카테고리, 상세 설명 등을 포함합니다. |
| 도서 삭제 | 선택한 도서를 안전하게 삭제할 수 있습니다. 삭제 전 확인 다이얼로그로 실수를 방지하고, 백엔드 API를 통해 실제 데이터를 삭제합니다. 생성된 AI 커버 이미지도 함께 삭제되어 저장공간을 효율적으로 관리합니다. |
| 도서 등록 | 새로운 도서를 등록할 수 있는 폼 페이지입니다. 등록과 동시에 AI 커버 이미지 생성을 요청할 수 있습니다. 유효성 검사를 통해 정확한 정보 입력을 보장하고, 다양한 이미지 스타일 옵션을 제공합니다. |
| 도서 수정 | 기존 도서 정보를 수정할 수 있는 기능입니다. 기존 데이터를 불러와서 폼에 표시하고, 수정된 내용만 업데이트합니다. AI 커버 이미지 재생성 기능도 포함되어 있습니다. |
| 커버 이미지 스타일 커스터마이징 | 생성된 커버 이미지의 스타일을 세부적으로 조정할 수 있습니다. 색상, 테마, 분위기, 레이아웃 등을 사용자가 직접 선택할 수 있습니다. 여러 버전의 이미지를 생성하여 비교하고 선택할 수 있습니다. |
Header, BookCard, SearchBar, CategoryDropdown 등 공통 컴포넌트를 재사용 가능하도록 설계했습니다.
AI 이미지 생성 중 로딩 애니메이션, 진행 상태 등을 표시하여 사용자가 기다리는 동안의 경험을 개선했습니다.
실시간 피드백: 검색어 입력 시 즉시 결과 필터링으로 빠른 반응성을 제공합니다.
AI 생성 이미지를 다양한 디바이스에서 최적으로 표시할 수 있도록 반응형 이미지 갤러리를 구현했습니다.
안정적인 기능 제공을 위한 기반을 마련하기 위해 테스트 코드 작성하였습니다.
반복적인 수동 테스트를 줄이고, 기능 변경 시 기존 기능의 이상 유무를 빠르게 검증할 수 있습니다.
label과 input의 올바른 연결, role 속성 등 시맨틱 마크업을 검증했습니다.
| 기획 | 디자인 | 개발 |
|---|---|---|
| 회의록 | 와이어프레임 | 프론트엔드 깃허브 |
| API 문서 | 백엔드 깃허브 |
GET /api/categories- 카테고리 목록 조회GET /api/categories/{categoryId}- 특정 카테고리 조회
GET /api/books- 도서 목록 조회GET /api/books/{bookId}- 특정 도서 조회POST /api/books- 새 도서 등록PUT /api/books/{bookId}- 도서 정보 수정DELETE /api/books/{bookId}- 도서 삭제
Requirements: Node.js 18+, npm 8+
백엔드 연동을 위해서는 Spring Boot 서버가 localhost:8080에서 실행되어야 합니다.
AI 이미지 생성을 위해서는 AI API Key가 필요합니다.
git clone [프로젝트 저장소 URL]
cd WalkBook_FrontEndnpm installnpm start- React 19: 사용자 인터페이스 라이브러리
- React Router Dom 6: 클라이언트 사이드 라우팅
- Axios 1.9.0: HTTP 클라이언트
- OpenAI DALL-E 3 API: AI 이미지 생성
- Fetch API: AI API 통신
- Spring Boot: RESTful API 서버
- Java: 백엔드 프로그래밍 언어
- H2: 데이터베이스
- Node.js: 개발 환경
- npm: 패키지 매니저
- Git: 버전 관리