"서랍"의 두 판 사이의 차이

cdc wiki
이동: 둘러보기, 검색
(→‎프로토타입 사진 혹은 작동 장면)
(→‎프로토타입 사진 혹은 작동 장면)
 
(같은 사용자의 중간 판 3개는 보이지 않습니다)
317번째 줄: 317번째 줄:
 
<p>◇ <strong>로고</strong></p>
 
<p>◇ <strong>로고</strong></p>
 
[[파일:서랍로고.png]]
 
[[파일:서랍로고.png]]
−
<p>◇ <strong>로그인 및 회원가입</strong> 화면</p>
+
<p>◇ <strong>로그인 및 회원가입 화면</strong></p>
 
[[파일:서랍기능1.png]]
 
[[파일:서랍기능1.png]]
−
<p>◇ <strong>지역별 필터, 클럽 조회 및 클럽 가입</strong> 화면</p>
+
<p>◇ <strong>지역별 필터, 클럽 조회 및 클럽 가입 화면</strong></p>
 
[[파일:서랍기능2.png]]
 
[[파일:서랍기능2.png]]
−
<p>◇ <strong>가입한 클럽 목록 및 내 프로필</strong> 화면</p>
+
<p>◇ <strong>가입한 클럽 목록 및 내 프로필 화면</strong></p>
 
[[파일:서랍기능3.png]]
 
[[파일:서랍기능3.png]]
−
<p>◇ <strong>메인화면 - 책 둘러보기, 클럽 정보</strong> 화면</p>
+
<p>◇ <strong>메인화면 - 책 둘러보기, 클럽 정보 화면</strong></p>
 
[[파일:서랍기능4.png]]
 
[[파일:서랍기능4.png]]
−
<p>◇ <strong>진행상황 수정 및 목표 등록</strong> 화면</p>
+
<p>◇ <strong>진행상황 수정 및 목표 등록 화면</strong></p>
 
[[파일:서랍기능5.png]]
 
[[파일:서랍기능5.png]]
−
<p>◇ <strong>게시판 - 검색, 작성, 조회</strong> 화면</p>
+
<p>◇ <strong>게시판 - 검색, 작성, 조회 화면</strong></p>
 
[[파일:서랍기능6.png]]
 
[[파일:서랍기능6.png]]
−
<p>◇ <strong>게시판 - 댓글 기능, 게시글 수정</strong> 화면</p>
+
<p>◇ <strong>게시판 - 댓글 기능, 게시글 수정 / 삭제 화면</strong></p>
 
[[파일:서랍기능7.png]]
 
[[파일:서랍기능7.png]]
 +
<p>◇ <strong>앨범 - 목록, 조회, 작성 화면</strong></p>
 +
[[파일:서랍기능8.png]]
 +
<p>◇ <strong>앨범 - 작성 화면</strong></p>
 +
[[파일:서랍기능9.png]]
 +
<p>◇ <strong>에세이 - 목록, 조회, 작성 화면</strong></p>
 +
[[파일:서랍기능10.png]]
 +
<p>◇ <strong>에세이 - 카메라로 OCR 기능을 활용한 에세이 작성 화면</strong></p>
 +
[[파일:서랍기능11.png]]
 +
<p>◇ <strong>에세이 - 앨범 사진으로 OCR 기능을 활용한 에세이 작성 화면</strong></p>
 +
[[파일:서랍기능12.png]]
 +
<p>◇ <strong>에세이 - 좋아요 한 글 목록 화면</strong></p>
 +
[[파일:서랍기능13.png]]
 +
<p>◇ <strong>일정 - 목록, 등록 화면</strong></p>
 +
[[파일:서랍기능14.png]]
 +
  
−
<br>
 
 
<br>
 
<br>
  

2021년 6월 15일 (화) 05:24 기준 최신판

프로젝트 개요

기술개발 과제

국문 : 독서 모임 모바일 어플리케이션

영문 : Mobile Application for Book Club

과제 팀명

서랍

지도교수

유하진 교수님

개발기간

2021년 3월 ~ 2021년 6월 (총 4개월)

구성원 소개

서울시립대학교 컴퓨터과학부 20189200** 유*리(팀장)

서울시립대학교 컴퓨터과학부 20169200** 신*선

서울시립대학교 컴퓨터과학부 20169200** 이*인

서울시립대학교 컴퓨터과학부 20189200** 정*희

서론

개발 과제의 개요

개발 과제 요약

◇ 비대면/대면 독서 모임의 효과적인 운영을 위한 모바일 모임 애플리케이션
◇ OCR을 통해 사진에서 텍스트를 추출해 책의 내용을 공유하는 기능 제공
◇ 독서 모임의 자료를 관리하는 게시판과 앨범을 제공하고 독서 모임 참여를 독려하기 위한 독서 진행 상황 공유, 일정 기능 제공


개발 과제의 배경

서랍독서실태조사.PNG

◇ 문화체육관광부와 통계청의 조사에 따르면 성인 독서 인구는 2013년 이후 계속 감소하는 추세였다(출처: 2019국민독서실태조사). 하지만 2021년 현재, 코로나19로 인해 실내 활동을 할 시간이 증가하면서 사람들의 책에 대한 관심이 높아지고 있다. 책을 읽고 토의를 진행하는 비대면/소규모 독서 모임의 수요도 증가해 독서 모임을 효과적으로 관리하는 것의 중요성 또한 대두되고 있다.

◇ 위의 이유와 함께, 실제 독서 모임을 운영하며 카카오톡 단톡방과 네이버 밴드를 이용했을 때 불편한 경험이 존재했다. 카카오톡 단톡방으로 독서 모임을 운영했을 때, 모임원들의 책 진행 상황이나 모임 시간, 모임 장소들이 대화에 휩쓸려서 모임이 제대로 진행되지 못했던 경험이 많았다. 토의 주제 같은 중요한 내용도 제대로 정리되지 못해 사용에 불편함이 존재했다. 네이버 밴드나 노션 등 다른 프로그램을 이용해 모임의 기록을 정리할 경우, 일정 관리 기능보다는 독서 모임 기록지처럼 사용하게 되어 나중에는 회원들이 글을 읽지 않는 경우도 있었다.

◇ 책에서 원하는 부분을 찍어 올리거나, 전자책 앱 내 캡처 사진으로 공유 시 사진들이 쌓여서 어느 책에서 발췌한 것인지 확인하지 못하는 경우가 발생했다.

◇ 다른 독서 관련 앱의 경우 '인스타그램' 형식으로 책 사진을 공유하고 글을 작성해 볼 수 있게 하는 기능이 주 기능이었기 때문에 모임 운영에는 맞지 않았다. 또한 오프라인 모임이 기준이 되는 경우가 많아 비대면으로 토의한 내용을 정리하고 공유하는 데에는 어려움이 있었다.

◇ 위와 같은 사용자의 불편함을 해소하고, 다른 앱과는 차별화된 기능을 제공하기 위해 '독서 모임 어플리케이션’을 제작하고자 한다.


개발 과제의 목표 및 내용

서랍개념목표.png

◇ 독서 모임의 자료를 공유
- 게시판을 통해 독서 모임 회의록, 토의 자료 등을 공유할 수 있도록 한다.
- 앨범을 통해 회의 사진, 감명 깊은 책 구절 사진 등을 공유할 수 있도록 한다.

◇ OCR 기능을 이용한 책의 내용 활용
- 감명 깊은 책 구절을 사진을 통해서만 공유하지 않고, OCR을 이용해 텍스트를 추출해 에세이를 작성함으로 사용자들의 의견 교환을 효과적으로 이루어질 수 있도록 한다.
- 기존 OCR API(Google Vision API)를 통해 추출한 텍스트를 맞춤법 검사, 줄 바꿈 수정 등의 후처리를 통해 사용자가 더 편리하게 어플을 이용할 수 있도록 한다.

◇ 독서 진행 상황 공유 기능을 통한 모임원 동기 부여
- 모임원 전체가 볼 수 있는 독서 진행 상황 공유 기능을 제공한다.
- 모임원이 현재의 독서 상황을 기록하여 편리한 독서 생활을 가능하게 한다.

◇ 독서 모임 내 편의 기능 제공
- 일정 기능을 통해 대면 모임의 시간과 장소 등을 공유한다.
- 도서 API를 통한 검색, 추천 시스템으로 진행할 책을 선정하는데 도움을 준다.


관련 기술의 현황

State of art

모바일 애플리케이션 개발

모바일 애플리케이션 개발의 경우 크게 아래와 같은 4가지 종류로 구분되어 개발을 진행할 수 있다.

◇ 네이티브 앱(Native App): 안드로이드 소프트웨어 개발 키트를 이용해 JAVA로 개발하거나, iOS 운영체제의 소프트웨어 개발 키트를 이용해 Swift로 개발하여 모바일 기기에 최적화시킨 앱. 기기의 고유 정보에 직접적 접근이 가능하다.
◇ 모바일 앱(Mobile App): PC에서 볼 수 있는 웹 등을 모바일 기기에 보기 쉽도록 사이즈를 맞게 변경한 웹사이트.
◇ 모바일 웹앱(Mobile WebApp): 모바일 앱과 비슷하나, 웹보다 모바일에 대해 최적화된 앱.
◇ 하이브리드 앱(Hybrid App): 모바일 웹과 모바일 웹앱의 단점을 보완한 것. 네이티브 앱과 비교하였을 때는 성능이 떨어지는 단점이 있다.
React(웹 프레임워크)

JavaScript 라이브러리의 하나로, 사용자 인터페이스(UI)를 만들 수 있다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지 보수되며, 싱글 페이지 애플리케이션, 모바일 애플리케이션 개발에 사용된다.

광학 문자 인식(Optical Character Recognition, OCR)

광학 문자 인식(Optical Character Recognition, OCR)이란 사람이 쓰거나 기계로 인쇄한 문자의 영상을 이미지 스캐너로 획득하여 기계가 읽을 수 있는 문자로 변환하는 것이다.

전통적인 OCR 기술은 텍스트 라인을 찾는 모듈, 문자를 분할하는 모듈 등 세분된 모듈로 동작하였다. 또한, 서로 다른 패턴을 인식하는 특징(feature)은 개발자가 직접 설계해야 했으므로 문자의 폰트, 크기, 스타일에 따라 각각 다른 특징의 정의가 필요했으며, 특히 한글의 경우 자음과 모음의 조합까지 모두 고려해야 했다. 따라서 스캐너로 촬영한 고품질 이미지에서만 제한적으로 동작하였으므로 이미지의 품질의 영향을 많이 받았고, 사람이 직접 작성한 손글씨 문서의 인식률이 상대적으로 좋지 못했다.

딥러닝 기반 OCR 기술은 CNN(Convolutional Neural Network)을 이용하여 대량의 데이터 학습을 통해 이미지에서 텍스트를 인식하는 규칙(feature extraction)을 스스로 만들어 낸다. 이는 일반적으로 이미지에서 텍스트 영역을 검출하는 부분과 텍스트 영역 내 텍스트를 개별적으로 인식하는 부분으로 이루어진다.


기술 로드맵

서랍기술로드맵.png

◇ React Native
리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크로, 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다.

◇ Firebase
React Native를 이용한 앱 개발을 진행할 때, Firebase로 애플리케이션 상태를 동기화하고 React Native로 상태 변경을 통한 애플리케이션 UI 플로우를 진행하는 것이 이상적인 앱 개발의 조합이다.

◇ 사용 API
- Google Vision API
구글에서 제공하는 오픈 소스 서비스로, 한국어를 포함한 다양한 언어를 제공한다. 요청과 응답에 JSON을 사용하는 REST API로도 제공되고, C#, Go, JAVA, Node.js, PHP, Python, Ruby에서 사용할 수 있는 클라이언트 라이브러리로도 제공된다.
- 알라딘 Open API
알라딘 검색 결과를 XML, JSON 형태로 출력해주며, 제목, 도서 상세 URL, ISBN, 상품설명, 도서 출간일, 상품 가격, 표지 이미지, 카테고리, 출판사, 고객 평점을 출력한다.


특허조사 및 특허 전략 분석

◇ 독서 모임 추천 방법 및 장치(Method for recommending book club and apparatus thereof) / 출원번호: 1021149130000

복수 개의 독서 모임을 데이터베이스에 저장, 상기 독서 모임에 가입된 개별 회원들의 독서 성향 및 개인정보들을 결합하여 해당 독서 모임 고유의 특성 정보를 생성한다. 이후 사용자의 도서 추천 정보와 같은 선택 정보를 입력받아 데이터베이스 내 정보와 비교, 독서 모임 추천 후보를 생성, 제공한다. 해당 추천 방법은 컴퓨터에서 실행시킬 수 있도록 프로그램상으로 구현된다.

◇ 촬영 이미지 기반의 문자 인식 장치 및 방법(APPARUS AND METHOD FOR CHARACTER RECOGNITION BASED ON PHOTOGRAPH IMAGE) / 출원번호: 1020110133502

입력 이미지 내에서 이미지 분석을 위한 관심 영역을 선택하고, 선택된 관심 영역을 분석하여 상기 입력 이미지의 종류를 판단한다. 판단 결과 입력 이미지가 디스플레이 화면을 촬영한 디스플레이 화면 이미지인 경우, 입력 이미지에 디스플레이 화면 내 문자 영역과 배경 영역을 구분하기 위한 이미지 효과를 적용한 후 이미지 효과가 적용된 입력 이미지를 이진화하고, 이진화된 입력 이미지로부터 문자를 인식한다.

◇ 최적 문자 인식을 위한 모바일 문서 획득 지원(MOBILE DOCUMENT CAPTURE ASSIST FOR OPTIMIZED TEXT RECOGNITION) / 출원번호: 1020140099844

모바일 기기에 문자 영상을 개선하기 위한 시각적 정보를 제공하는 방법으로, 모바일 기기로 획득되는 영상의 정확한 광학 문자 인식 (OCR)을 위하여 최소 문자 크기를 결정하는 단계, 인쇄체의 영상 스트림을 수신하는 단계, 영상 스트림과 영상 스트림에 중첩되는 시각적 정보(최소 문자 크기)를 표시하는 단계로 구성된다. 또한, 상기 방법은 영상 스트림에 표시되는 문자가 적어도 최소 문자 크기일 때 모바일 기기 사용자에게 통지하는 단계를 포함한다.



시장상황에 대한 분석

  • 경쟁제품 조사 비교

서랍북플.png

서랍리더스.png

  • 마케팅 전략 제시

서랍swot.png

개발과제의 기대효과

기술적 기대효과

◇ 크로스 플랫폼 앱 개발을 이용한 개발 비용 및 시간 절감
◇ 모바일 중심 개발을 통해 독서 모임 커뮤니티 이용자들의 편의성 및 접근성 확대
◇ OCR 기술을 활용한 독서 모임 참여자 간 의견 공유 및 소통의 편리성 증진

경제적, 사회적 기대 및 파급효과

◇ 2013년 이후 계속 감소하는 성인 독서인구의 독서 의지 고취 및 독서 모임의 효과적 관리
◇ 코로나 19의 확산으로 인해 제한적으로 운영되는 대면 모임을 보완 및 대체하는 비대면 모임 플랫폼으로의 확장


기술개발 일정 및 추진체계

개발 일정

서랍개발일정.png

구성원 및 추진체계

◇ 유*리 (팀장) 

- OCR 후처리 API 및 책 추천(둘러보기) API 제작
- 앱 로고 및 아이콘 디자인
- 클라이언트 개발

◇ 신*선 

- 지원금 관리
- 데이터베이스 및 클라이언트 개발

◇ 이*인 

- 보고서 등 문서 작성
- 클라이언트 개발

◇ 정*희 

- UI 디자인 및 구현
- 클라이언트 개발

설계

설계사양

제품의 요구사항

서랍요구사항.png

설계 사양

서랍기능요구.png

개념설계안

서랍개념설계안.png 

◇ OCR 기술을 이용한 에세이 작성
: 사용자가 지정한 사진을 Google Vision API의 OCR 기술을 이용해 텍스트를 추출한다. 추출한 텍스트를 맞춤법 검사 등의 후처리를 진행하고, 사용자가 텍스트를 이용해 에세이를 작성할 수 있도록 한다.

◇ 진행상황 공유 기능
: 모임장은 메인(진행상황 확인)화면에서 책을 등록할 수 있다. 사용자는 독서 진행상황을 체크하고 다른 사용자와 공유할 수 있다. 이를 통해 사용자의 참여를 독려하고 모임의 활성화를 도모한다.


이론적 계산 및 시뮬레이션

OCR 추출 API 및 텍스트 후처리

에세이 게시판에서 사용하는 OCR 기능을 사용하고 추출한 텍스트를 후처리를 통해 사용자가 사용하기 쉽게 만들기 위해 API를 구현하고 이를 배포, 적용했다. 텍스트 후처리의 경우, 줄 바꿈이 문장 기준으로 일어날 수 있도록 하고, 맞춤법 검사를 통해 오류를 검출할 수 있도록 했다.

◇ API 내부 원리
- Flask 웹 서버 사용
- 한글: py-hanspell이라는 네이버 맞춤법 교정기 기반 라이브러리 사용
 ① 보통 책 한 페이지 기준 인식하는 글자수가 1000자가 되기 어려우므로, 500자 기준으로 한 번 끊어서 인식할 수 있도록 500자 제한을 둠
 ② 각각의 맞춤법 검사 실행
- 영문: Python 기본 함수 사용
 ① 단어 중간에 줄 바꿈이 일어나지 않도록 수정

POSTMAN 테스트 결과
- 국문
서랍포스트맨한글.png
- 영문
서랍포스트맨영문.png

앱에 API를 적용한 스크린샷 (에세이 작성)
서랍에세이실험.png

Content-based filtering 책 둘러보기(추천) 시스템

앱의 특성 상 user와 item 간의 관계를 분석하기 어려우므로, 제한적이지만 content 자체의 feature을 이용하는 Content-based filtering 방법을 사용했다. 데이터는 YES24 같은 온라인 서점 사이트에서 크롤링 후 전처리를 통해 도출했고, API로 구현해 배포, 앱에 적용했다.

API 내부 원리

◇ AWS EC2 웹 서버 사용

◇ 크롤링
YES24에서 제공하는 국내도서의 카테고리 중 주간베스트 리스트를 각 카테고리 당 600권 씩 크롤링했다. 카테고리 목록과 크롤링한 항목의 종류는 아래와 같다.
- 카테고리: 소설/시/희곡, 에세이, 인문, 역사, 예술, 사회 정치, 자연과학, 경제 경영, 자기계발
- 항목: title(책 이름), author(저자&역자), rating(별점), category(속한 모든 카테고리), tag(서점 지정 태그), overview(책 소개글), image(썸네일 url)

◇ 전처리 & feature 추출
- overview(책 소개글) 전문을 이용할 수 없으므로 ‘KRWordRank’와 ‘konlpy’ 라이브러리를 사용해 키워드를 추출하고, 공백을 사용해 한 문자열로 묶은 후 keyword(키워드) 컬럼을 새로 생성했다.
- 각 카테고리 당 크롤링한 결과 dataframe을 하나로 합친 후, 아래 순서대로 전처리를 진행해 총 4,244권을 얻었다.

1. title, author 없을 시 제거
2. rating이 존재할 시, 값이 8.5 미만이면 제거
3. 여러 카테고리에서 나타나 중복되는 row 제거
4. category에 모임 진행에 어울리지 않다고 판단할 수 있는, 읽는 책이 아닌 도서 제거
  (악보집, 일러스트, 스케치, 화보집, 아트북, 만화, 대학교재, 라이트노벨 등)

- feature 칼럼을 생성해 author, category, tag, keyword를 공백으로 연결한 문자열을 넣어줬다.

- 최종 dataframe을 ‘book_info_total.pkl’로 저장해 AWS EC2에 소스코드와 함께 배포했다.

◇ TF-IDF & Cosine Similarity
scikit-learn 라이브러리에서 제공하는 TfidfVectorizer와 cosine_similarity를 사용해, feature 컬럼을 기준으로 서로간의 코사인 유사도를 계산했다. 코사인 유사도가 클수록 비슷한 item임을 알 수 있다.

◇ 함수 설명 및 개선점 - similar_books_by_title(title, n=10): 책 제목 기반 추천 (상위 10개)

- 사용자가 관심이 있던 책의 제목을 검색어로 입력하면 그 책과 유사한 책들을 추천한다.

- 책 제목의 띄어쓰기가 잘못 되도 영향이 없도록 구현했으며, 제목 전체가 아닌 포함되는 일부 단어를 입력해도 검색을 진행한다. 검색 결과는 아래와 같은 세 가지 경우로 나뉜다.

1. 검색어가 책 제목에 일부 포함되는 경우

① 검색어와 완전히 일치하는 책 제목은 없으나, 검색어가 포함된 책 제목들이 하나 이상 존재하는 경우를 의미한다. 따라서 추천의 기준이 되는 책을 한 권만 골라야 한다.
② 검색 시 고정적인 인덱스로 접근한다면 계속해서 같은 책이 추천의 기준이 되어 추천 결과가 동일해진다. 따라서 random 라이브러리를 이용해 검색어를 포함하는 책 제목들 중 하나를 랜덤하게 선택한다. 선택된 책을 추천의 기준으로 삼아 한정적인 추천을 하지 않도록 시스템을 개선했다.
③ 사용자는 책의 제목을 모르는 채로 검색어를 입력했기 때문에, 추천의 기준이 되는 책을 알지 못한다. 따라서 코사인 유사도가 가장 큰 책부터 10권의 책을 출력한다.

2. 검색어가 책 제목과 완전히 일치하는 경우

① 검색어로 해당 책 제목이 들어간다. 코사인 유사도가 가장 큰 책은 기준이 되는 책 자신이므로 (유사도 1.0), 코사인 유사도가 두 번째로 큰 책부터 10권을 출력한다.
② 사용자가 이미 알고 있는 책이므로 입력한 제목의 책은 추천 결과에서 제외한다.

3. 데이터셋에 검색어와 관련된 책 제목이 아예 없는 경우

"해당 도서는 데이터셋에 존재하지 않습니다. 다른 도서나 키워드로 다시 검색해주세요." 라는 메시지를 사용자에게 출력한다.

◇ 함수 설명 및 개선점 - similar_books_by_keyword(keyword, n=10): 저자, 카테고리, 키워드 기반 추천 (상위 10개)

- 사용자가 관심이 있던 저자 이름이나 카테고리(장르), 혹은 키워드를 입력하면 그 검색어를 feature에 포함하는 책들을 추천한다. 대부분의 경우 파악되는 책의 개수가 여러 권이므로, random 라이브러리를 이용해 검색어를 포함하는 책 제목들 중 하나를 랜덤하게 선택한다. 선택된 책을 추천의 기준으로 삼아 한정적인 추천을 하지 않도록 시스템을 개선했다.

- 사용자는 책의 제목을 모르는 채로 검색어를 입력했기 때문에, 추천의 기준이 되는 책을 알지 못한다. 따라서 코사인 유사도가 가장 큰 책부터 10권의 책을 출력한다.

- 여러 단어를 공백으로 연결해 검색할 수 있으나, 단어의 순서와 띄어쓰기에 영향을 받기 때문에 가급적으로 한 단어 내지 두 단어를 사용하는 것을 권장한다.

- 일반적인 책 검색과의 차이점

① 일반적인 책 검색의 경우, 저자 이름이나 카테고리(장르), 키워드를 입력하면 그 검색어가 feature에 무조건 포함된 책만을 결과로 보여준다.
② 우리가 사용하는 추천(검색) 시스템의 경우, 저자 이름이나 카테고리(장르), 키워드를 입력하면 검색어를 feature에 포함하는 책들 중 한 권을 랜덤하게 선택해 추천의 기준으로 삼는다. 기준이 결정되면, 기준으로 삼은 책과 비슷한 책을 추천해 일반적인 책 추천보다 폭 넓은 추천 범위를 제공한다.

- 키워드로는 온라인 서점 YES24에서 생성한 태그와 책 소개에서 뽑아낸 키워드를 사용했다. 태그의 종류로는 책을 방영한 방송 프로그램의 이름이나 책을 선정, 추천한 언론사도 존재한다. 카테고리로는 YES24에서 책을 구분하는 카테고리를 사용했다.

- 검색어가 feature에 포함되는 책이 아예 없는 경우: 책 제목 기반 추천과는 다르게 본 추천 기능은 띄어쓰기에 취약하므로, 사용자에게 보내는 메시지에 띄어쓰기를 확인하라는 메시지를 담았다. 메시지는 다음과 같다.

"해당 키워드는 검색이 불가능합니다. 다른 도서나 키워드, 카테고리, 저자명으로 다시 검색해주세요. 여러 개의 키워드를 입력하였다면 개수를 줄여주세요."

Title을 이용한 검색 화면 (Jupyter Notebook 상의 dataframe 형태 캡처)

- 검색어가 책 제목과 완전히 일치하는 경우

서랍타이틀1.png

- 검색어가 책 제목에 일부 포함되는 경우

서랍타이틀2.png

- 데이터셋에 검색어와 관련된 책 제목이 아예 없는 경우

서랍타이틀3.png

Keyword를 이용한 검색 화면 (Jupyter Notebook 상의 dataframe 형태 캡처)

- 저자명을 검색하는 경우

서랍키워드1.png

- 카테고리(장르)를 검색하는 경우

서랍키워드2.png

- 키워드를 검색하는 경우

서랍키워드3.png

- 검색어가 Feature에 포함되는 책이 아예 없는 경우

서랍키워드4.png

상세설계 내용

소프트웨어 설계

서랍소설.png

◇ 모듈별로 분리하여 나타낸 그림

◇ 개인 모듈: 회원가입과 로그인에 필요한 정보를 서버(Google Firebase)에서 가지고 있으며, 가입한 모임의 정보도 확인할 수 있다.</p>

◇ 모임 모듈: 모임에 관한 정보와 모임이 진행 중인 책 등의 정보, 각 게시판의 게시물 등의 정보를 Google Firebase에 저장한다. 모임 정보의 변경이 일어날 경우 데이터베이스에 즉시 반영된다.

◇ 책 검색 및 추천 시스템: 온라인 서점 책 API(알라딘 API)를 이용하여 책을 검색할 수 있고, 크롤링한 데이터를 기반으로 작성한 API를 이용해 책을 추천한다. 사용자는 이를 진행할 책을 선정하는 과정에 활용 가능하다.

◇ OCR 모듈: 에세이 게시판의 글을 작성할 때 사용한다. Google Vision API를 이용해 사진에서 텍스트를 추출한 후, 직접 작성한 API를 이용해 후처리를 진행한다. 사용자는 줄 바꿈, 맞춤법 검사가 진행된 텍스트로 좀 더 편리하게 글을 작성할 수 있다.

UI

UI Flow

◇ 로딩~로그인 UI

서랍UIF1.png

◇ 클럽 관련 UI (로그인~클럽 선택)

서랍UIF2.png

◇ 메인화면 UI

서랍UIF3.png

◇ 게시판 UI

서랍UIF4.png

◇ 앨범 UI

서랍UIF5.png

◇ 에세이 UI

서랍UIF6.png

◇ 일정 UI

서랍UIF7.png

메뉴 구성

서랍메뉴구성.png

화면 흐름도

◇ 클럽 선택까지의 화면 흐름도 (로그인~클럽 선택)

서랍흐름도1.png

◇ 메인화면 흐름도

서랍흐름도2.png

◇ 게시판, 앨범 흐름도

서랍흐름도3.png

◇ 에세이, 일정 흐름도

서랍흐름도4.png

유스케이스 다이어그램

◇ 로그인 & 모임관리 System

서랍유스1.png

◇ 게시판 & 앨범 System

앨범은 글 수정 기능이 존재하지 않으나 편의상 같이 표시했습니다.

서랍유스2.png

◇ 에세이 System

서랍유스3.png

◇ 진행상황 System

서랍유스4.png

◇ 일정 System

서랍유스5.png

데이터베이스 설계

◇ Users 컬렉션: user들의 집합

서랍디비1.png

◇ Clubs 컬렉션: 모든 클럽들이 저장되는 최상위 컬렉션

서랍디비2.png

◇ Album 컬렉션: 앨범 게시판 컬렉션

서랍디비3.png

◇ Essay 컬렉션: 에세이 게시판 컬렉션

서랍디비4.png

◇ Schedule 컬렉션: 일정 관련 컬렉션

서랍디비5.png

◇ 독서 진행상황 관련 Attribute: book_now, book_completed, members[list]

서랍디비6.png

◇ 모임 관리 관련 Attribute

서랍디비7.png

결과 및 평가

완료 작품의 소개

프로토타입 사진 혹은 작동 장면

◇ 로고

서랍로고.png

◇ 로그인 및 회원가입 화면

서랍기능1.png

◇ 지역별 필터, 클럽 조회 및 클럽 가입 화면

서랍기능2.png

◇ 가입한 클럽 목록 및 내 프로필 화면

서랍기능3.png

◇ 메인화면 - 책 둘러보기, 클럽 정보 화면

서랍기능4.png

◇ 진행상황 수정 및 목표 등록 화면

서랍기능5.png

◇ 게시판 - 검색, 작성, 조회 화면

서랍기능6.png

◇ 게시판 - 댓글 기능, 게시글 수정 / 삭제 화면

서랍기능7.png

◇ 앨범 - 목록, 조회, 작성 화면

서랍기능8.png

◇ 앨범 - 작성 화면

서랍기능9.png

◇ 에세이 - 목록, 조회, 작성 화면

서랍기능10.png

◇ 에세이 - 카메라로 OCR 기능을 활용한 에세이 작성 화면

서랍기능11.png

◇ 에세이 - 앨범 사진으로 OCR 기능을 활용한 에세이 작성 화면

서랍기능12.png

◇ 에세이 - 좋아요 한 글 목록 화면

서랍기능13.png

◇ 일정 - 목록, 등록 화면

서랍기능14.png



포스터

서랍포스터1.png 서랍포스터2.png

서랍포스터3.png 서랍포스터4.png

관련사업비 내역서

서랍내역서.png

완료작품의 평가

서랍평가.png

향후계획

어려웠던 내용들

◇ 초창기 기휙 단계에서, 다른 주제(OCR을 이용한 스크린샷 관리 어플리케이션)로 완전한 네이티브 앱을 제작하기로 했으나 핵심 기능 구현에 한계가 존재했기 때문에 주제를 변경했다.

◇ 커뮤니티 앱 특성 상 구현해야 할 화면과 기능이 생각 이상으로 많았다. 기획하면서 기능들이 늘어나서, 초창기 계획보다 앱의 규모가 커져 어려운 점이 많았다. 특히, 초반 설계에서 구조적 변경사항이 있었기 때문에 푸시알림 등의 기능을 추가하기 어려웠다.

◇ React Native, Javascript가 생소했다. 특히 React Native에 관한 국문 자료가 많지 않아 참고할 예제가 부족했다.

◇ React Native 내비게이션 구조가 기존의 웹 페이지와는 다른 개념이라, 내비게이션을 통해 컴포넌트와 페이지 간에 변수(데이터)를 주고받는 통신 구조를 이해하는 것이 어려웠다.

◇ NoSQL 사용 경험이 없었기 때문에, 안정성과 데이터 신뢰성을 지키기 위해 DB(트랜잭션)를 디자인하고 설계하는 것이 생소해 어려움이 있었다.

◇ OCR 후처리 기능, 책 추천(둘러보기) 기능을 API 형식으로 구현해 배포할 때 어려움이 있었다. 배포 경험이 없어 플랫폼 선택이나 배포 도중, 이후 발생하는 문제점을 해결하는 데 많은 시간이 소요됐다.

◇ OCR 후처리 API를 설계할 때, 한글 텍스트를 처리하기 위한 목적에 맞는 라이브러리를 찾기 어려웠고, 결국 맞춤법 검사기를 활용해 API를 구현했다.

차후 구현할 내용

◇ 기존에 계획했던 동적 푸시 알림 기능 구현 (일정 생성 등)

◇ 누적된 클럽별 데이터를 이용해 실제로 유저에게 맞는 책을 추천하는 알고리즘 구현

◇ 기본적으로 제공하는 게시판, 앨범, 에세이를 제외한 유저 커스텀 게시판 기능

◇ 추후 OCR API 이용 요금의 발생을 대비해 프리미엄 회원 기능을 추가해 유료 구독을 받아 이익을 얻을 수 있도록 구현

서랍요금제.png

◇ 서점과 연계해 책 둘러보기나 책 검색 페이지에서 구매 페이지로 이동하는 기능
- 서점에 일정량 로열티를 받아 이익을 얻을 수 있도록 구현

원본 주소 "https://capstone.uos.ac.kr/cdc/index.php?title=서랍&oldid=6019"