All About Saigon 프로젝트를 시작하다

Chapter 1. 기획안

by 앨리스

지난 글에 썼던 것처럼 나는 코딩 수업을 듣고 'All About Saigon'이라는 프로젝트를 준비했었다. 하지만 내 배움이 부족했는지 프로젝트는 미완으로 끝났고, 다시 용기를 내서 '스파르타 코딩 클럽' 웹 개발 과정을 다시 듣고 있는 중. 그리고 마침 타이밍 좋게 개인 프로젝트 튜터링 프로그램을 진행한다고 해서 재빠르게 손을 들었다. 올해 내에는 (= 베트남을 떠나기 전에) 꼭 이 프로젝트를 마쳐야겠다는 의지를 불태우면서.



About 'All About Saigon'



placesinhcmc.PNG @placesinhcmc (2020년 11월 11일)


나의 프로젝트는 내가 운영하는 인스타그램 @placesinhcmc 에서 출발했다. 예전에 브런치에도 썼지만, 이 인스타그램의 출발은 거창한 게 아니라 그저 내가 다니는 곳들을 기록해두려는 용도였다. 꾸준히 올리다 보니 지금 팔로워가 약 5,000명 가까이 되고 포스트 반응도 나쁘지 않은 편이다. 이제는 약간의 사명감(!)이 더해져서 더욱 열정적으로 새로운 곳을 찾아다니긴 하지만...


Slide2.PNG

하지만 인스타그램, 업로드는 정말 편하지만 정작 나도 내 피드에서 다시 정보를 찾기는 쉽지 않았다.


가끔 지인들이 '괜찮은 피자집 어디야?', '근처에 일하기 좋은 카페 알아?'라고 물어볼 때가 있다. 처음에야 내가 다녀온 장소 수가 얼마 되지 않으니까 성능 좋은 컴퓨터처럼 바로바로 답변이 나왔지만 이제 나도 여기 생활한 지 2년 반이 됐고 인스타그램에 포스팅한 장소 수도 400개가 넘다 보니 이런 질문을 받으면 뇌 용량에 한계가 와서 결국 내 인스타그램 스크롤을 한참 내려야만 한다.


단순히 '맛집', '카페' 말고 사람들이 많이 찾는 키워드는 내가 정리해 줄 수 있지 않을까. 그리고 네이버 카페, 단톡방을 오가는 수많은 반복 질문도 플랫폼으로 해결해 줄 수 있을 거라는 생각이 들었다.


참, 그리고 프로젝트 네이밍이 All About Saigon인 이유는 (실제 네이밍은 변경될 수도 있음...) 내 인스타그램 피드가 그랬던 것처럼 정보의 유형을 맛집, 카페와 같은 핫플에 국한시키고 싶지 않았기 때문이다. 여기 살다 보니 시계 배터리 갈아야 할 때도 있고, 오토바이를 고쳐야 할 때도 있다. 여하튼, 여기 사는 사람들에게 유용한 서비스를 만들고 싶다. 코로나 19가 끝나면 호치민을 찾는 관광객, 출장자들에게도!




Slide4.PNG

1) 특정 목적에 맞는 장소를 찾을 수 있도록 해보자

인스타그램에서는 보통 해시태그로 검색을 하는데 이 단어가 매우 포괄적이라 (#호치민맛집 #호치민카페 등) 구체적인 니즈에 맞는 장소를 찾기가 어려웠다. 예를 들어 일하기 좋은 카페, 10명 이상 모이기 좋은 식당, 혼밥하기 좋은 곳 등. All About Saigon에는 내가 다녀온 곳들만 올려두고 각 장소마다 태그를 달아두려고 한다.


<예시: 장소특성> #일하기좋은 #비즈니스 #데이트 #회식 #인증샷 #혼밥 #조용한 #에어컨

<예시: 위치> #타오디엔 #푸미흥 #2군 #1군 #7군

<예시: 장소유형> #파인다이닝 #카페 #베이커리 #한식 #오토바이수리 #핸드폰수리


2) 지도에서 볼 수 있게 하자

각종 장소 후기는 대부분 페이스북, 인스타그램과 같은 소셜미디어, 한국인들의 경우 네이버 블로그 또는 카페에 올라온다. 하지만 결국 위치를 확인하기 위해 구글맵에서 또 검색하게 되는데 처음부터 지도로 보여주면 편하지 않을까 하는 생각이 들었다. 내 인스타그램이 호치민의 장소 정보를 제공하는 것이니만큼 지도는 뗄레야 뗼 수 없는 것.

airbnb2.PNG
airbnb.PNG 예시: 에어비앤비


서비스 레이아웃

(기본 기능만 넣어둠)


Slide5.PNG
Slide6.PNG
Slide7.PNG

이 중에 몇 가지는 빠지거나 바뀔 수 있지만 핵심은 메인에서 키워드(해시태그)를 선택하면 지도 위에 그 키워드에 맞는 장소를 보여주는 것. 그리고 키워드 리스트에서 필터를 추가하거나 삭제하면 지도 상에 마커가 변동되는 것이다.


개발해야 하는 기능들


지난번 코딩 수업에서 완성한 기능은 푸른색으로, 구현해야 할 기능은 붉은색으로 표시. 하지만 이번에 튜터링 받으면서 새롭게 고쳐야 할지도...


<프론트엔드>


1) 메인

- HTML/CSS로 메인 프레임 구성

- 입력된 해시태그 전체 리스트업

- django 어드민에서 입력한 article 최신 3개만 노출

- 키워드 클릭 시 결과페이지로 이동

- 인스타그램 위젯


2) 결과

- 클릭 시 해당 해시태그에 맞는 장소 지도 상에 전부 노출 (구글맵 연동, 다중 마커 표시)

- 키워드 클릭에 따라 필터 추가, 삭제

- 개별 장소의 상세페이지 (구글 infowindow)

ㄴ 인스타그램 게시글 임베드 (가능 여부 확인 필요)


3) 아티클

- django 어드민에서 입력한 article 전부 리스트업

- 페이징 처리


<백엔드>


1) 장소, article 정보 유형 정의

ㄴ 장소(place): 이름(name), 상세정보(desc), 게시글URL(url), 작성일(published), 태그(tag), 위도(lat), 경도(lng )

ㄴ 컨텐츠(article): 제목(title), 내용(content), 썸네일(img)


2) 데이터 연동

- 인스타그램에 작성한 장소 정보, 직접 지정한 태그를 엑셀 파일에 정리해 두었다. 연동 필요...


<API 설계>


1) 장소 정보 입력

- Method: POST

- URL: api/place

- data: { 'name' : name, 'desc' : desc, (* 상세 정보를 인스타그램 컨텐츠로 대체할 수 있을지?) 'url' : url, 'tag': tag, (* 태그는 리스트 형태) 'lat': lat, 'lng': lng }

- 반환값: 장소 정보 데이터 (* 관리자만 입력 가능)


2) 서비스 내에 전체 해시태그 리스트 조회

- Method: GET

- URL: /api/tags

- 반환값: 태그 리스트


3) 특정 태그에 연결된 장소 목록 조회

- Method: GET

- URL: /api/place

- 반환값: 특정 태그가 포함된 장소 리스트


(--- 우선순위 낮음 ---)

4) article 작성

- Method: POST

- URL: api/article

- data: { 'title' : title, 'content' : content, 'img' : img}

- 반환값: article에 입력한 데이터 (* 에디터 쓸 수 있다면 그 방식으로 + 관리자만 입력 가능)


5) article 조회

- Method: GET

- URL: api/article

- 페이징처리 가능할 지 확인 필요



데이터 소스


1) 구글맵 마커 표시 API

https://developers.google.com/maps/documentation/javascript/adding-a-google-map


2) 구글맵 infowindow

https://developers.google.com/maps/documentation/javascript/infowindows


3) 인스타그램 디스플레이 API

https://developers.facebook.com/docs/instagram-basic-display-api/overview


4) 인스타그램 임베드 API

https://developers.facebook.com/docs/instagram/oembed





이번에 꼭 제대로 마무리할 수 있기를 바라며....! 밀린 코딩 수업 들으러 가야지....