<aside> 🗣 발표 자료 구성 가이드라인
3분
5분
3분
북마크
로그인페이지
레스토랑 정보 → 환전 기능
구글맵, 구글리뷰
리뷰, 댓글 (작성, 수정, 삭제)
근처 레스토랑
안녕하세요. 3팀의 발표를 맡게된 선민경입니다. 저희 팀이 개발한 웹 서비스 ‘미슐랭 먹을랭’을 소개하겠습니다.
기술 스택 및 라이브러리 저희의 기술 스택은 다음과 같습니다.
시연 [메인 페이지] section1) 저희 서비스의 메인 페이지입니다. 첫 페이지에는 미슐랭 지도 페이지로 이동할 수 있는 미슐랭 찾아보기 버튼이 있고, 상단의 네비게이션 바에도 같은 버튼이 있습니다. section2) 다음 페이지부터는 웹 서비스 기획 의도에 부합하는 그래프 자료를 볼 수 있습니다. 코로나 확진자 수 증감결과와 section3) 백신 접종률 그래프를 살펴볼 수 있습니다. section4) 마지막 페이지는 저희의 메인기능을 간단히 소개하고 있습니다.
[서비스 소개 페이지] section1) 서비스 소개 페이지에는 좀 더 자세한 설명들이 있습니다. 첫페이지에는 36개 국가에서 최근 3달간의 코로나 확진자 수 가 감소했다는 결과를 보여주고 있습니다. 세계 각국이 해외입국자에 대한 자가격리 의무를 폐지했고, 여행객의 수도 증가하고 있다는 내용도 담고 있습니다. section2) 다음페이지에서는 여행에서 음식이 얼마나 중요한지를 살펴볼 수 있습니다. 구글 리뷰를 기반으로 한 장소별 여행 선호도 조사에서 음식점이 2위를 했음을 보여주는 그래프를 나타내었고, 코로나 19 이후 가장 하고 싶은 활동 1위가 맛집 탐방이었다는 설문조사 내용이 있습니다. 이러한 결과를 바탕으로 맛집탐색을 도와주는 서비스를 제공하겠다는 미슐랭먹을랭의 기획의도를 나타내었습니다. section3) 마지막 페이지에, 미슐랭 가이드에 대한 간단한 소개과 별점시스템에 대한 설명이 있고, 대륙별로 얼마나 많은 미슐랭 레스토랑이 있는지 그래프로 보여줍니다. 그리고 미슐랭 가이드에서 제공하는 데이터를 기반으로 저희 서비스가 약 6500개의 레스토랑의 정보를 제공한다는 소개 내용이 있습니다.
이제 저희 서비스의 메인기능을 소개하겠습니다.
[세계지도 페이지] 미슐랭 찾아보기 버튼을 누르면, 이렇게 세계지도가 나타납니다. 각 마커에 마우스를 올리면 국가명과 해당 국가에 있는 미슐랭 레스토랑의 수를 볼 수 있습니다. 마우스 휠을 이용해 확대도 가능합니다. 국가 페이지로 이동하기 위해 마커를 클릭해도 되고, 오른쪽 하단의 검색 버튼을 통해 국가명을 입력해 해당 국가 페이지로 이동할 수 있습니다.
[국가 페이지] 이 페이지에서는 해당 국가에 있는 미슐랭 레스토랑의 목록을 살펴볼 수 있습니다. 목록의 상단에는 검색창이 있고, 음식점 이름, 주소, 도시, 요리종류, 미슐랭등급에 따라 검색이 가능합니다. 예를 들어, 음식점 이름을 선택하고 kitchen이라고 검색하면 관련된 레스토랑들이 나타납니다. 화살표 버튼을 클릭하거나 지도 위의 마커를 클릭하면 해당 레스토랑에 대한 간단한 정보를 볼 수 있습니다. 그리고 상세 정보 바로가기 버튼을 클릭해서 상세페이지로 이동할 수 있습니다.
[상세 페이지] 상세 페이지에서는 먼저 북마크 기능을 이용할 수 있습니다. 저희 서비스의 메인 기능들은 로그인 없이 이용 가능하지만 북마크와 리뷰는 로그인 필요하기 때문에, 먼저 로그인을 하겠습니다.
[로그인 페이지] 이메일 주소와 비밀번호를 입력하여 로그인할 수 있고, 카카오 로그인도 가능합니다. 비밀번호를 잊었을 때는 임시비밀번호 발급을 메일로 받을수 있습니다. 로그인을 하고 다시 상세페이지로 돌아가면
[상세 페이지] 이렇게 북마크 기능을 사용할 수 있습니다. 그 다음 레스토랑에 대한 정보를 볼 수 있습니다. 가격의 경우 레스토랑이 위치한 국가의 화폐단위에서 한국의 화폐단위로 환전한 가격을 볼 수 있고 오른쪽의 버튼을 클릭해서 다른 국가의 화폐단위로 환전할 수도 있습니다. 레스토랑의 위치를 구글 지도로 확인할 수도 있고 오른쪽에서 구글 리뷰도 간단히 볼 수 있습니다. 아래쪽에서는 미슐랭먹을랭 서비스를 이용하는 사람들의 리뷰를 살펴볼 수 있고, 리뷰를 남길 수도 있습니다. 수정과 삭제가 가능하고, 리뷰에 대한 댓글도 남길 수 있습니다. 페이지의 가장 하단에서는 이 레스토랑으로부터 30km 이내에 있는 또 다른 레스토랑의 목록이 나열되어 있습니다. 카드를 클릭하면 해당 레스토랑의 상세페이지로 이동합니다.
[마이 페이지] 마지막으로 마이페이지입니다. 이 페이지에서는 북마크한 레스토랑들과, 남겨 놓은 리뷰들을 모아서 볼 수 있습니다. 삭제도 가능합니다. 그리고 회원 정보 수정 버튼을 통해 이메일 주소, 비밀번호, 이름을 변경할 수 있습니다. 마지막으로 회원탈퇴까지 할 수 있습니다.
시연을 마치고 발표를 계속 진행하겠습니다.
프로젝트 구조도
어려웠던 기능 및 해결 방법 프로젝트를 진행하면서 어려웠던 점은 레스토랑의 place Id를 구하는 것이었습니다. 구글맵과 구글리뷰를 보여주기 위해 구글의 place API를 사용할 때 place id가 필요합니다. 저희는 파이썬 스크립트를 짜서 가지고 있는 데이터의 음식점 이름, 주소, 좌표를 통해 DB에 해당 place id를 저장하였습니다. 또 다른 어려움은 cors에러가 있었습니다. 프론트에서 구글 api를 요청하면 cors 때문에 데이터를 사용할 수 없었습니다. 저희는 백엔드에서 대신 요청해 프론트로 데이터를 넘기는 방식으로 해결하였습니다.
공유하고 싶은 팁 저희팀의 공유하고 싶은 팁입니다. 프론트의 팁으로는 캐싱과 관련된 내용입니다. 브라우저에는 BFCache라는 개념이 있습니다. 브라우저 내에서 뒤로가기/앞으로가기를 했을 때 이전 페이지를 전체 캐싱해서 복구를 훨씬 빠르게합니다. 다만 캐싱으로 인해 오히려 서비스 이용에 문제가 발생하기도 합니다. 이때, 요청 header에 Cache-Control: no-cache를 줌으로써 캐싱을 이용하지 않을 수 있습니다. 백엔드의 팁으로는 transaction이 있습니다. 여러 모델에 접근해 데이터를 동시에 업데이트 해야 할 때, transaction을 사용하면 좋습니다. transaction은 하나라도 업데이트가 실패하면 db에 업데이트 하지 않기 때문에 데이터 관리에 유용합니다.
팀원 소개 및 소감