사이트 접속 : http://web.mobeomsimineuna.com.s3-website.ap-northeast-2.amazonaws.com/
프로젝트 관련 경험 ≪경기도 지역화폐 가맹점 찾기 : 모범시민≫
-
프로젝트 개요 지역화폐로 지급된 재난지원금과 지역 경제 상생을 위한 목소리가 높아지며 지역화폐의 대중성이 높아지고 있습니다. 하지만 오프라인 위주 가맹점 정책으로 지역화폐 결제가 가능한지 가게에 직접 문의해야 하는 불편함이 있습니다. 지역화폐가 활성화된 경기도(http://www.gmoney.or.kr/) 마저 가맹점 지도를 제공하지 않았습니다. 저희는 생활밀착형 사용자 경험과 요구분석에 기반하여 지역화폐 지도 및 길찾기, 가맹점 추천, 지역화폐 결제와 챗봇 서비스를 제공합니다.
-
공통사항
-
프론트엔드 : React.js의 함수형 컴포넌트와 React Hook을 사용합니다. state, props에 대한 이해를 바탕으로 지역 상태 관리와 컴포넌트 라이프사이클은 useState, useEffect를 이용했습니다. React Router로 SPA를 구현하고 useHistory와 router-match로 응용했습니다. 컴포넌트 간 전역 상태 관리엔 Context API를 useContext로 구현했습니다. RestFul API를 위해 서버와 통신은 Axios를 사용했습니다. 코딩컨벤션은 duck 타입을 기본으로 한 뒤 공통 컴포넌트는 atomic 패턴으로 공유했습니다.
-
백엔드 : SpringBoot로 프로젝트를 생성한 뒤 ORM 라이브러리는 JPA를 선택했습니다. JPA 내장 메소드와 QueryDsl의 커스텀 메소드로 필요한 데이터를 MariaDB에서 추출했습니다. 몇몇 메소드는 JUnit과 Mockito 라이브러리로 테스트를 실행했습니다.
-
데이터 처리 : 공공데이터 제공 사이트인
경기데이터드림,경기지역경제포털에서 가맹점과 총소비내역 데이터를 구했습니다. 파이썬 pandas 라이브러리로 데이터 csv 파일을 데이터프레임화해 전처리 했습니다. -
AWS : 프로젝트 완성 뒤 아마존 AWS에서 RDS, EC2, S3 서버를 올렸습니다. 그 외 IAM으로 탄력적 IP, CloudFront로 HTTP→HTTPS 리다이렉트를 썼습니다.
-
형상관리 및 협업도구 : GitHub에 Git Bash, GitHubDesktop으로 pull-request를 하여 형상관리를 했습니다. slack과 notion으로 의사소통과 파일전송, 일정관리를 했습니다.
- 주요 기능
- 가맹점 지도, 길찾기 서비스
- react-google-maps/api와 google geocode 라이브러리를 사용해 회원의 좌표를 구하고 좌표를 가진 가맹점을 지도상에 표현했습니다. QueryDsl 커스텀 메소드로 인기, 별점 높은 가맹점으로 한정해 가맹점을 제안했습니다.
- 회원이 가맹점에 들려 집에 귀가하는 시나리오 하에 경유 길찾기 서비스를 제공합니다. 외판원 알고리즘과 피타고라스 삼각함수로 최적 경로와 최단 거리를 구했습니다.
- 가맹점 상세정보 확인, 지역화폐 미사용 가맹점 신고, 즐겨찾기와 리뷰하기, 네이버 길찾기로 이동하기 등을 덧붙였습니다.
2) 가맹점 추천 서비스 : 맡은 파트
- 가맹점 추천 방식 중 apache mahout 머신러닝 라이브러리로 협업 필터링 추천의 사용자 및 아이템 기반 추천이 있습니다. 회원이 아이템인 가맹점에 (리뷰) 별점주는 행위를 선호도를 잡아 협업 필터링의 기반을 닦았습니다. 사용자 기반 추천은 유저와 비슷한 가맹점 선호를 가진 다른 유저를 찾아 가맹점을 추천합니다. 아이템 기반 추천은 유저가 최근 리뷰한 가맹점과 유사한 가맹점을 찾아 추천합니다. 두 추천에 공통되는 유사도 계산 방식은 피어슨 상관계수를 택했습니다. 유의미한 관련성을 위해 유사도를 0.7 이상으로 설정했습니다.
- 실 데이터에 근접하고자 머신러닝 실습 사이트인 Kaggle의 영화 평점 데이터를 별점 테이블로 차용했습니다. 파이썬 pandas 라이브러리로 읽어드린 후 의정부시 출신 유저와 의정부 가맹점 테이블과 inner join하여 별점 데이터를 생성했습니다.
- 유저의 연령, 성별에 따른 인기 업종별 가맹점을 추천했습니다. 2019년 9월 마지막 주 경기도 지역화폐 총소비 데이터를 사용하여 경기도 시민의 성별, 연령별 업종 소비 순위를 뽑아냈습니다. 데이처 전처리 시 파이썬 pandas 라이브러리로 52만개 row를 400개 row로 축소해 필요한 요소만 추출했습니다.
- 생활밀착 서비스(지역화폐 구매하기, 챗봇)
- 지역화폐 구매 편이성을 높이고자 온라인 결제를 도입했습니다. I`mPort 라이브러리로 카카오페이 PG사 결제를 진행했습니다.
- 챗봇을 화면 우측 하단에 위치시켜 빠른 기능 접근을 도왔습니다. 챗봇 시나리오 중 지역화폐로 제공되는 지원금정책 확인이 있습니다. 회원 정보를 불러내 맞춤 지원금정책의 확인 문답을 단축시켰습니다.
- 관리자 페이지, 회원 CRUD, 게시판 CRUD
- 회원, 가맹점, 매출 통계를 chart.js로 시각화해 표현했습니다. 한 페이지 내 복수 통계, 기간 내 검색, 세부 통계를 위해 Collection, TreeMap, Enum들을 썼습니다.
- 기본적인 회원, 게시판 CRUD를 구현했습니다. 게시글 작성에 위지윅스 에디터로 React-Quill을 사용했습니다. 페이지네이션은 QueryDsl의 limit, offset을 사용했습니다.