책 들어왔어? (Is This Book In?)

알라딘 중고매장 페이지 키워드 검색결과 출력 및 알림 서비스 개발

제작 기간 : 2020/03/02 ~

프로젝트 기획 배경

알라딘 중고매장 페이지를 사용하면서 느꼈던 문제점 : PC에서는 알라딘 중고매장 검색어 내역을 저장해주지 않기 때문에 따로 키워드를 저장할 곳 필요. (모바일 앱에서는 검색 결과에 대해서 10개까지 저장) 특정 검색어를 검색하지 않아 책을 놓칠 때가 있었기 때문에 알림 서비스에 대한 니즈가 있었음.

솔루션

알라딘 중고매장 검색 키워드를 저장하고 저장한 키워드로 검색한 결과를 출력해주는 서비스, 동시에 사용자에게 정기적으로 알림을 보내주는 서비스 개발

알라딘 중고매장 오픈시간인 오전 9시 30분과 대부분의 고객이 퇴근하여 이동할 수 있는 6시에 알리미를 전송하도록 함. 고객은 키워드에 대한 중고매장 페이지 검색 결과(책 제목, 서지 정보, 보유 매장)를 통해서 원하는 책이 어디 지점에 있는지 지정된 시간에 알림받을 수 있음

프로토타입 설계 중 문제점

알림 채널 선정에 대한 고민 : 1안이었던 카카오톡(내 알림톡 서비스)과 문자(MMS)는 1건당 비용이 나가는 구조로 비용에 대한 문제가 있었음. 건당 10원의 알림을 50명의 고객에게 하루 2번씩 5개 키워드에 대해 보낸다고 하면, 하루에 5천원이 소요되며, 한 달 동안 서비스 운영 시 15만원이 나가게 됨. 2안이었던 메일이나 텔레그램 등은 활성 사용자가 많지 않고 채널에 대한 접근성이 떨어진다고 생각하여 배제. 3안이었던 페이스북 메시지나 인스타그램의 경우 공식적인 API를 제공하지 않음.

홈페이지 구성 시 지식의 부재로 발생하는 문제점 : Ajax 등 웹 Front-End에 대한 배경지식이 부족하여 짧은 시간내에 부분적으로 동적인 화면을 구성하지 못함.

프로토타입 설계 결과

알림 기능은 추후에 추가하는 것으로 하고 일단 웹 페이지를 기획, 제작하는 방향으로 피봇팅(Pivoting). 웹 페이지로 고객이 들어오면 가입 후 자신의 키워드를 등록하고, 저장된 검색어를 버튼으로 쉽게 검색할 수 있도록 유도. 초기 데이터베이스는 2개의 테이블로 구성(user_tb, keyword_tb)

내부 디렉토리 구조

itbi
┖ __pycache__
┖ static
  ┖ image
┖ templates
  ┖ error.html			# 각종 에러 메세지 출력
  ┖ firstGuide.html		# '처음 사용자를 위한 가이드' 출력
  ┖ joinOnPage.html		# 회원가입 페이지 구성
  ┖ joininPage.html		# 로그인 페이지 구성
  ┖ keywordPage.html	# 키워드 관리 페이지 구성
  ┖ mainPage.html		# 검색 페이지 구성
  ┖ storePage.html		# 알림받을 매장 페이지 구성
Procfile			# heroku ps 할당
app.py				# 플라스크 실행 파일 
app.yaml
instadm.py			# 인스타그램 DM 실행 파일
requirements.txt	# 필요한 라이브러리 모음
runtime.txt			# 실행파일 파이썬 버전

사용 프로그램

HTML5 : 홈페이지 프레임 제작 (로그인, 회원가입, 검색, 키워드 관리 페이지)
CSS3 : 구성요소 디자인, 미디어 쿼리를 통한 반응형 페이지 제작
Python (Flask) : 서버 연결 (Django보다 좀 더 가벼운 Flask 사용)
~~SQLite : 데이터 수집을 위한 DB구성 (사용자 정보 테이블, 키워드 테이블로 구성)~~
MySQL : heroku에 있는 ClearDB-MySQL을 DB로 사용. Flask-MySQL, Flask-RESTful 라이브러리를 사용하여 웹과 DB를 연동하였다.
Javascript : 버튼 클릭 등 동적인 기능 구성
협업 도구로는 깃허브(Github)와 노션(Notion)을 사용
초기 배포는 goorm과 ngrok을 이용한 localhost 외부접속, 최종 배포는 heroku를 사용
알림 서비스 : 파이썬 비공식 인스타그램 API를 사용

서비스 구성 및 제작 과정

프로토타입 설계 : 최소한의 웹 페이지 기획과 알림 채널 탐색

알림 채널 알아보기, 웹 페이지 구성으로 피봇팅
프로젝트 계획 구상 (Notion)

크롤링 코드 작성 : 알라딘 중고매장 검색 결과를 크롤링 할 수 있는 코드 작성

Requests , BeautifulSoup을 통한 html 파싱
urlencode 를 통해 검색 결과 url 자동 접속
각 (검색어) 페이지 당 최대 7권의 도서 검색 결과(제목, 서지정보, 보유지점) 크롤링

로그인 페이지 : 사이트 접속 시 가장 먼저 랜딩되는 페이지

로그인 정보(유저 ID, 휴대전화번호)를 입력할 수 있도록 UI 구성
아이디와 패스워드가 맞지 않을 경우 에러 메시지 출력 (SQL 활용)
세션(session)을 활용하여 로그인 후 로그아웃 이전까지 유저ID 유지
로그인 시 유저가 등록한 모든 키워드에 대한 키워드에 대한 크롤링 실시
초기 사용자를 위한 가이드 안내 (키워드 관리 페이지 가이드와 동일)

회원가입 페이지 : 최초 사용자를 위한 회원가입 페이지

회원가입 정보를 받아 DB에 저장(유저 테이블에 저장할 유저ID, 휴대전화번호, 성별, 연령대)
~~아이디에 영문 또는 숫자가 아닌 특수문자 등을 사용하거나, 기존에 동일한 아이디가 있을 경우 가입이 되지 않고 에러 메시지를 출력하도록 함~~ 실제 사용 중인 인스타그램 ID로 회원가입을 유도하여 인스타그램 DM 알림 서비스에 사용
~~휴대전화번호를 010으로 시작하지 않거나 11자리에 맞지 않을 경우 가입이 되지 않고 에러 메시지를 출력하도록 함~~ 초기 휴대전화번호를 비밀번호로 수집 후 알림서비스에 활용하려 하였으나 알림 서비스를 인스타그램으로 피봇팅한 후에는 생년월일로 간소화 하여 개인정보 입력 최소화
성별과 연령대도 Radio로 구성하여 입력하지 않을 경우에 에러 메시지를 출력하도록 함
모든 데이터를 제대로 입력한 후 가입하기 버튼을 누를 경우 회원가입이 완료되고 정보가 DB(유저 테이블)에 저장
회원 가입 시 관심 분야를 선택할 수 있도록 함
알림받을 매장을 선택하여 알림받을 수 있도록 함

검색 페이지 : 고객이 실제로 검색 결과를 볼 수 있는 페이지

키워드 관리에서 고객이 등록한 키워드만 뽑아서 화면에 버튼으로 표시
버튼을 누르면 키워드에 맞춰 크롤링한 결과 추출
사용자가 선택한 매장에 대해서만 결과를 추출하며 선택 외 매장에만 있는 경우 "책이 선택하지 않은 매장에 있습니다"라는 메시지 출력

키워드 관리 페이지 : 키워드를 등록하고 삭제할 수 있는 페이지

초기 사용자를 위한 가이드 만들기
자신이 원하는 키워드를 입력하고 '등록하기' 버튼을 클릭하여 등록
기존 키워드 중 필요 없어진 키워드는 클릭하여 삭제할 수 있도록 함
'메인으로' 버튼을 통해 검색 페이지로 돌아갈 수 있도록 한다.

DB구성 : 유저 테이블(user_tb), 키워드 테이블(keyword_tb) 2가지로 구성

유저 테이블
- idx (인덱스) : PK(Primary Key). auto_increment. 코드에서는 ID로 식별하므로 따로 사용하지 않는다.
- userid (ID) : 인스타그램 ID
- password (생년월일)
- gender (성별) : 남성, 여성, LGBTQ를 각각 1, 2, 3 의 Int 형태로 저장
- age (연령대) : 10대부터 60대까지 1 ~ 6의 Int 형태로 저장
- joinDate (가입일) : yyyy-mm-dd의 Date형태로 저장
- 키워드 테이블
  - key_idx (인덱스) : PK(Primary Key). auto_increment (idx의 끝에 2, 12, 22, 32 ... 식으로 2가 붙는 것은 ClearDB 자체의 Strategy라고 한다)
  - userid (ID) : FK(Foreign Key)
  - keyword (키워드) : varchar(string)의 형태로 저장
  - keyAddDate (추가 날짜) : yyyy-mm-dd의 Date형태로 저장
  - actDeact (등록 상태) : 키워드 추가시 Default값은 1이며, 키워드를 삭제하면 0으로 변경

웹과 DB 연동하기

~~SQLAlchemy 라이브러리를 사용하여 2개의 테이블을 웹과 연동~~ (pymysql로 연동)
GCP(PaaS), VM Instance(IaaS), heroku(PaaS) 를 통해 배포하려 하였으나 SQLite를 지원하지 않아 MySQL을 사용하는 것으로 선회
heroku에 있는 ClearDB-MySQL사용

서버를 통해 배포

초기 테스트를 위해 구름(goorm)의 무료 서비스를 통해 서버에 올림(잦은 끊김 발생)
- ngrok을 이용하여 Localhost 서버에 외부 접속이 가능하도록 하여 테스트
본격적으로 heroku를 통해 배포

버그 리포팅

~~키워드 관리 페이지에서 삭제 후 새로고침을 하면 에러가 발생~~ (해결)
~~등록되지 않은 아이디를 사용하여 접속하려고 하면 에러가 발생~~ (해결)
유저가 9 ~ 10개의 키워드를 입력한 경우. '로그인'이나 '메인으로'를 클릭하여 검색 페이지로 넘어가면서 30초 이상 걸려 heroku에서 H12에러를 발생시키는 현상. 크롤링을 하는 데 30초 내외가 걸리기 때문에 서버 상태에 따라 에러가 발생할 때도 있고 아닐 때도 있음. (최대 키워드를 7개로 제한하는 것으로 수정. 추후 Ajax를 통해 키워드의 개수를 제한없이 늘릴 예정)

추후 발전 과제

CSS 수정
- ~~현재 검색 결과 출력시 화면 칸이 깨지는 경우가 있어 추후 수정~~
Ajax를 통해서 키워드 클릭시에 검색이 될 수 있도록 수정
- 현재는 검색 결과 페이지 접속(로그인 또는 키워드 관리 페이지에서 '메인으로' 클릭) 시, 모든 키워드에 대한 크롤링이 자동으로 되도록 되어있음. 추후 Ajax를 통해 특정 키워드 버튼을 클릭 시 해당 키워드에 대한 검색 결과만 크롤링되는 방향으로 수정 계획.
- 로그인 등 메인 페이지로 이동하는 시간 향상. 페이지로 넘어갈 때 30초 이상 걸리는 경우 heroku에서 발생하는 에러방지.
~~회원가입 시 관심분야를 수집할 수 있도록 하고 DB에 저장~~
- ~~회원 가입 페이지에서 관심 분야를 중복 선택할 수 있도록 설정~~
- ~~관심분야 테이블을 따로 만들어 유저의 관심 분야를 저장하도록 함~~
- 회원가입 시 관심분야를 수집할 수 있도록 함
~~자신이 선택한 매장만 볼 수 있는 기능구현~~
- 회원가입 시 매장을 선택할 수 있도록 하고
~~텔레그램 등 알림채널 알아보기 + 연동~~ (인스타그램API를 활용하여 DM을 보내는 것으로 변경)
- ~~기존에 자세히 알아보지 못했던 알림 채널(텔레그램 등)을 알아보고 적정 채널을 찾아 원래 목표인 알림 기능 구현.~~
- 비공식 인스타그램 API 를 사용하여 DM으로 전송
- ~~회원가입시 받았던 휴대전화번호로 알림 발송~~ 회원가입시 인스타그램에서 사용하는 이름을 입력하도록 변경하고 휴대전화번호 대신 생년월일을 입력하도록 한다. 생년월일이 겹칠 수 있으므로 해당 Column의 Unique 속성을 제외
- 인스타그램 API와 apscheduler(crontab)를 연동하여 알림 서비스 구성. 해당 파일을 heroku로 배포
- 로컬 컴퓨터의 스케줄러 또는 라즈베리 파이를 이용하여 DM 자동으로 발송

Yngie-C / Is_this_book_in