독서기록 웹사이트 개발

인원 : 1인 프로젝트
기간 : 2023.02 ~ 2023.04

회원가입 시 수집하는 개인정보는 구글 이메일, 이름, 프로필 이미지 입니다.

✨개발 동기

Next.js와 Prisma를 공부하던 중 React-Query로 실시간 정보 업데이트가 가능하고 Open API를 활용한 프로젝트를 만들고 싶었다.

평소 즐겨 사용하던 독서 기록 어플 '북적북적'이 떠올랐고,
'북적북적'과 같이 독서 기록활동이 주된 목적이지만 부가적인 기능으로
유저들간의 책 추천/한줄평이 이루어 질 수 있는 웹사이트를 만들어 보고 싶었다.

---

✨사용 기술

• Next.js
• Typescript
• Tailwind CSS

• React-Query
• React-Chart
• Date-Picker

• Prisma
• MySQL
• Docker
• Firebase-admin

---

✨기획단계 - Figma

책 API 선정 조건은 JSON을 제공할 것, 책 쪽수를 제공할 것(동기부여 이벤트 사용 예정)이었기에 알라딘 API로 선정했고, 다른 독서 기록 프로그램에 대한 정보들을 수집하였다.

당장 개발해보고 싶은 마음이 커서 기획단계에서 다른 독서 프로그램들이 가지고 있는 기본적인 기록 기능부터 완성 후 살을 붙여 나가기로 했다. 그래도 나름 기획 단계와 큰 차이 없이 완성 된듯 하다.

기획 단계에서 구상한 기능

• 내 기록함에 책 저장
• 저장한 책에 독서 정보 입력 / 기록
• 알라딘 API에서 제공하는 정보로 통계/분석 도표 제작

왓챠피디아, 북적북적을 참고하여 디자인하였다.
피그마를 사용해서 대략적인 레이아웃과 색상, 컴포넌트를 구상했다.
진행이 거의 끝나갈 때 쯤 왓챠피디아의 코멘트 기능이 이 프로젝트와도 어울리는 듯 하여추가했는데 지금보니 색상까지 왓챠피디아 판박이인거같다.

책 리스트 나열, 기록 CRUD만 가능하다면 재미가 없을 것 같아 어떻게 만들면 좋을지 고민했는데,
동기부여가 되는 활동을 넣자는 결론을 냈다.

알라딘 책 API에서는 책 페이지 수를 제공하는데, 이걸 사용해서 내가 읽은 책 페이지수를 마라톤에 비유해서 동기부여를 주려 했지만, 예상 밖으로 페이지 수가 제공되지 않는 책이 대다수였고, 노선을 틀어 기록 횟수를 통해 사용자 랭킹을 내는 기능과 월별 기록 카운트 기능을 만들었다.

읽은 책 페이지 두께에 따라 동기부여가 되는 북적북적의 경우 이러한 문제를 사용자가 직접 페이지 수를 입력 할 수 있도록 하여 개선하였다.

일주일 단위로 기록 현황을 보여주는 도표를 구상하였지만 일주일마다 횟수를 카운트 하면 동기부여보다는 매일매일 기록해야 할 것 같은 압박감 혹은 부담감이 들 것 같아 월별 카운트로 변경하였다.

---

✨1. 주요 페이지 설명

1-1. 메인페이지

도서 추천 / 랭킹

• 알라딘 Open API를 통해 얻은 베스트셀러/신작 추천
• 사용자들의 저장 많은 순/별점 높은 순 책 랭킹
• 기록 활동 카운트에 따른 사용자 랭킹
• 사용자 랭킹에서 클릭 시 해당 사용자의 기록 페이지로 이동

1-2. 책 정보 조회 페이지

책 정보 조회

• 책 정보 조회 페이지로 이동시 알라딘에서 제공하는 책 정보 (제목, 지은이, 장르, 설명) 조회
• 자세히 보기 클릭 시 알라딘 페이지로 이동

---

독자들의 코멘트

• 사용자들이 입력한 책 코멘트 조회(코멘트가 없는 경우 샘플 코멘트 출력)
• 코멘트 작성 / 수정 / 삭제 /좋아요 기능 구현

1-3. 나의 기록 페이지

독서 및 기록 활동 분석/통계

• 가장 많이 저장된 책의 장르를 통계로 출력
• 월별로 기록 활동 횟수를 나타내어 사용자의 동기부여 장려

---

저장한 책 목록 조회

• 다 읽은 책 / 읽고 있는 책 / 찜한 책 상태별로 책을 분류하여 조회
• 다 읽은 책과 읽고 있는 책을 클릭 시 나의 기록 페이지로 이동, 찜한 책은 책 정보 조회 페이지로 이동

---

저장한 키워드 / 최근 기록 목록

• 최근 기록을 클릭하면 나의 기록 페이지 > 해당 책 페이지로 이동

1-4. 둘러보기 페이지, 검색 페이지

둘러보기 페이지

• 사용자가 즐겨 읽는 장르의 책 사용자의 저장 순, 별점 순으로 추천
• 알라딘 추천 신간 조회

---

검색 페이지

• 알라딘 API 요청 결과 출력

---

✨2. 주요 기능

2-1. 책 저장 및 기록

책 정보, 독서 정보 저장

• 책을 선택하였을 때 정보 조회 페이지(1-2. 책 정보 조회 페이지)로 이동
• 상태에 따라 (찜하기 / 다 읽은 책 / 읽고 있는 책) 나의 기록 페이지에 저장

---

독서 감상 기록

• 나의 기록에 저장된 페이지에서 사용자의 독서 정보 (읽은 기간과 별점, 기록 내용) 출력
• 저장된 페이지의 기록하기 버튼을 누르면 키워드와 함께 기록

2-2. 독서정보 기록

독서 정보 수정

• 다 읽은 책 / 읽고 있는 책 상태와 읽은 날짜, 별점을 변경 가능합니다.
• 나의 기록 DB에서 책을 삭제 가능

---

기록 추가 / 수정 / 삭제

• 한 권의 책에 여러 기록이 가능하게 구현
  똑같은 책을 읽더라도 언제 읽는가에 따라 감상이 다를 수 있기 때문에, 과거에 읽었던 감상과 현재의 감상을 비교할 수 있도록 구성

✨후기

빨리 개발해보고 싶은 마음에 기획 단계를 너무 급하게 끝내버린게 아닌가 아쉬움이 남는다.

계속 개발하면서 사용이 익숙한 나에게는 이용이 편하다고 느껴질 수 있지만 사용자 입장에서는 어렵게 느껴진다는 피드백(독서 기록장이 아닌 전자책 독서 사이트로 인식된다는 피드백도 있었다)을 받았는데 기획 단계부터 이 부분을 조금 더 신경 써서 검토하고 보완했으면 더 좋은 결과가 나지 않았을까 싶다.