✨ 서비스 바로가기 및 시연 영상

• CondiBook

---

🔗 GitHub 링크

• GitHub - condi-book/condibook: bookmark-share-service

---

1. 서비스 소개

condibook

: 당신의 편리한 북마크

❗ 목표

💡 AI를 활용한 편리한 북마크 관리 및 북마크 공유 서비스

• 양질의 정보가 담긴 다른 사람들의 북마크를 보고 싶은 사용자
• 공유된 링크를 한 곳에서 관리해서 능률을 높이고 싶은 사용자
• 북마크를 빠르고 편하게 정리하고 싶은 사용자

북마크의 한정된 기능으로 느꼈던 불편함을 Condibook으로 해결하세요!

❓ 기획 의도

🟦 눈에 띄지 않는 서포터, 북마크

• 북마크는 필요한 정보를 선별하여 습득할 수 있는 유용한 도구입니다.
• MS 블로그 에 의하면 사내 북마크 검색으로 27배의 시간 절약한 효과를 경험했다고 합니다.
• 사용자들은 브라우저 북마크 기능에 만족하지 않고, 편리한 정리와 공유 기능을 가진 북마크 서비스를 찾고 있습니다.

🟪 북마크 발전 포인트

• 북마크 대충 저장해서 다시 찾기 어려운 경우
• 양질의 콘텐츠를 빠른 시간에 찾고 싶은 경우
• 협업 때 공유한 링크를 찾는데 시간을 지체하는 경우

🟥 Condibook이 제시한 방법

• ⚡️ 15개의 카테고리로 AI가 사이트를 분류하여 추천
• 👀 커뮤니티로 다른 사람들의 북마크 조회
• 📚 팀 북마크 관리로 흩어진 링크들을 폴더로 관리

---

2. 기술 스택

💻 Frontend

---

• React
  : 컴포넌트 재사용 등으로 인한 유지보수가 쉽고 프론트엔드 웹 프레임 워크 중에서 가장 커뮤니티 활성화가 잘 되어있음
• TypeScript
  : 타입을 적어 줌으로써 Props, API연결에서 생기는 타입에러를 미리 막을 수 있음
• Styled-components
  : CSS in JS 로 관리 용이 및 자유로운 커스텀과 props로 스타일 구분 가능
• React-bootstrap
  : 간단한 사용방법으로 다양한 컴포넌트를 사용 가능
• Amazon S3
  : 이미지 업로드를 base64가 아닌 URL방식으로 s3에서 가져올 수 있도록 하였다.
• Axios
  : 브라우저 호환성 과 편의성을 제공

💾 Backend

---

• Node.js & Express
  : JS로 구축 가능한 서버 중 가장 대중적이고 쉬우며 유연한 웹 프레임워크 서버 조합
• JWT
  : 토큰 자체에 정보가 있으므로 별도의 인증 저장소가 필요 없는 편리성과 여러 디바이스에서 사용 가능한 호환성을 제공하는 토큰
• Sequelize
  : DBMS에 대한 종속성이 줄어 재사용 및 유지보수의 편리성이 증가하고 객체 지향적 코드로 더 직관적이고 비즈니스 로직에 더 집중 가능함
• docker
  : 컨테이너로 구분된 개발과 배포 환경으로 인해 독립된 개발환경을 보장하며 kernel이 포함되어 있지 않아 비교적 크기가 작으므로 좀 더 신속한 배포가 가능
• MySQL
  : NoSQL 대비 SQL은 RDBMS 사용 가능하며 엄격한 스키마와 관계를 통해 좀 더 복잡한 관계일 경우 수정이 좀 더 용이 한 장점이 있음, SQL 중 가장 대중적인 MySQL을 사용
• Amazon RDS
  : 대규모 관계형 데이터베이스 관리를 간편하게 클라우드에서 설정 및 운영이 가능 하도록 지원하는 서비스를 제공하여 MySQL의 RDBMS와 호환해 사용
• aws ec2
  : 하드웨어에 선 투자할 필요가 없어 더 빠르게 애플리케이션을 개발하고 배포 가능
• Logstash
  : Elasticsearch와의 긴밀한 통합, 강력한 로그 처리 능력, 사전 구축된 200개 이상의 오픈 소스 플러그인을 통해 데이터 인덱싱을 돕는 Logstash는 Elasticsearch에 데이터를 로드할 때 가장 많이 사용
• ElasticSearch
  : HTTP 웹 인터페이스와 스키마에서 자유로운 JSON 문서와 함께 분산 멀티테넌트 지원 전문 검색 엔진을 제공

🤖 AI

---

• Flask
  : AI 서버를 배포하기 위한 용도. 모델 자체에서 나온 정보를 재 가공하기 위해 사용
• Word2vec
  : 주어진 예비 키워드들로부터 설명과의 유사성을 측정하기 위한 모델 (메인 모델)
• Googletrans
  : input에서 한국어가 아닌 다른 언어가 들어갔을 때 번역을 위해 사용
• Konlpy
  : googletrans와 동시에 input 값으로부터 keyword 명사를 추출해주기 위해 사용
• Regex
  : 데이터를 전처리 및 input 값의 불용어들을 제거해주기 위해 사용

🌐 배포

---

• Nginx
  : HTTPS를 적용하고, 서버 분기를 위해 사용
• Docker, Docker-compose
  : 리눅스 서버에 간편하고 가볍게 배포하기 위해 사용

---

3. 서비스 기능

⚛ 크롬 확장 프로그램

---

: 사용자의 편의성을 고려하여 북마크 할 페이지에서 버튼 클릭 시 해당 URL에 대한 meta 정보를 기준으로 사용자에게 AI 추천 카테고리 제공

• 세부 기능

  • 대부분의 url에서 AI를 통한 15개의 카테고리 별 폴더 추천 기능 제공

  • 저장 폴더를 직접 입력 하거나 이미 저장된 카테고리로도 저장 가능

  • 북마크 저장 시 해당 페이지로 이동하여 확인 가능

  • 크롬 확장 프로그램 다운로드 링크

    → Chrome 웹 스토어

⚛ 메인 페이지

---

: 서비스와 관련된 정보 제공, 실 서비스 이용 페이지와 연결해주는 페이지

• 세부 기능
  • CondiBook 서비스 및 개발자 소개
  • 크롬 확장 프로그램
    • 클릭 시 크롬 웹 스토어 새 탭 이동
  • 로그인 / 회원가입
    • 클릭 시 소셜 로그인 (구글 & 카카오) 페이지로 이동
    • 이미 로그인한 유저의 경우, 클릭 시 마이 페이지로 이동

⚛ 프로필 창

---

• 사용자 정보 확인
• 수정 버튼 클릭 시 닉네임 설정 및 프로필 소개글 입력 기능
• 로그아웃 기능

⚛ 나의 북마크 페이지

---

: 나의 북마크, 폴더 관리 및 북마크 상세 정보 제공 페이지

• 세부 기능
  • 북마크 폴더 생성 & 수정 & 삭제 & 즐겨찾기 기능
  • 북마크 추가 & 정렬(드래그 앤 드랍) & 이동 & 삭제 기능
  • 미리보기(iframe) 기능
    • 미리보기가 불가능한 url일 경우 새탭으로 열기 버튼 클릭 시 볼 수 있음
  • 스크랩한 북마크 탭에서 좋아요한 게시글 모아보기 기능

⚛ 커뮤니티 페이지

---

: 다양한 사용자가 제공하는 북마크 정보를 확인하고 서로 공유하는 페이지

• 세부 기능
  • 게시글 상세 정보 확인
  • 게시글 추가 & 수정 & 삭제 기능
  • 좋아요 기능
  • 댓글 추가 & 수정 & 삭제 기능
  • 조회수, 좋아요, 최신순 정렬 기능
  • 북마크 첨부 기능 (10개 제한)
  • Markdown 문법 제공
  • 링크 클립보드 복사 기능
    • 오른쪽 아래 추가 버튼 클릭하여 링크 클립보드 붙여넣기 기능
    • 나의 북마크에 해당 링크 추가 기능 ( + AI 폴더 추천 기능)
  • 미리보기(iframe) 기능
    • 미리보기가 불가능한 url일 경우 새탭으로 열기 버튼 클릭 시 볼 수 있음
  • 검색 기능
    • 제목 + 내용

⚛ 그룹(팀) 북마크 페이지

---

: 그룹(팀)별로 그룹, 북마크, 폴더 관리 및 북마크 상세 정보 제공 페이지

• 세부 기능
  • 그룹 생성 및 그룹 간 북마크 공유 기능
  • 그룹(팀) 생성, 정보 수정 기능
  • 유저 정보 확인
  • 매니저 권한 기능
    • 그룹(팀) 관리가 원활하게 이루어지게 하기 위함
    • 유저 초대 및 추방 기능
    • 폴더 및 북마크 삭제 기능
  • 북마크 폴더 생성 & 수정 & 즐겨찾기 기능
  • 북마크 추가 & 정렬(드래그 앤 드랍) & 이동
  • 미리보기(iframe) 기능
    • 미리보기가 불가능한 url일 경우 새탭으로 열기 버튼 클릭 시 볼 수 있음

⚛ 통합 검색 페이지

---

: 커뮤니티 게시판, 나의 폴더, 팀 폴더에 대한 통합 검색 기능 제공 페이지

• 세부 기능
  • 나의 북마크 페이지, 그룹 북마크 페이지에 오른쪽 하단의 검색 버튼 클릭 시 나타남
  • 필터 기능 (전체, 내 폴더, 팀 폴더)
  • 검색 결과 선택 시 해당 상세 페이지로 이동

⚛ 설정 창

---

• 크롬 확장프로그램 다운로드 클릭 시 크롬 웹스토어로 이동
• 로그아웃 버튼 클릭 시 메인페이지로 이동

---

4. 팀원 역할 분담

이름	역할	담당 부분
강주희	팀장, 프론트엔드	▪ WIKI 작성 ▪ 와이어프레임 제작 및 디자인 총괄 ▪ 메인, 사이드바, 통합 검색, 나의 북마크 페이지 구현 ▪ 크롬 익스텐션
김하영	프론트엔드	▪ 와이어프레임 제작 ▪ 아키텍쳐 구조도 제작 ▪ 팀 페이지 구현 ▪ 커뮤니티 페이지 구현 ▪ iframe 미리보기 분기 구현
서형준	AI	▪ 인공지능 모델 설계 ▪ 데이터 전처리 ▪ 발표
엄혜진	백엔드	▪ ER-diagram 설계 ▪ 백엔드 API 설계 및 구현 ▪ Redis로 웹사이트 파싱 정보 및 키워드 조회 시간 단축 ▪ docker-compose로 리눅스 서버에 HTTPS 배포
한우성	백엔드	▪ 크롬 익스텐션 배포 및 AI 연결 ▪ 백엔드 API 설계 및 구현 ▪ ElasticSearch로 커뮤니티 검색 기능 강화 ▪ Mysql DB 구축 (AWS RDS)
ALL		▪ 기획 ▪ 발표 및 소개 자료 준비 ▪ QA

---

5. 프로젝트 구성도

• 기획서
• 와이어프레임
• API 명세서
• 프로젝트 구조도

• 페이지 구조도

• ER Diagram

• AI 플로우