[윤현태] Solo Project Section 3

# 앱 만들어보기 - (feat.Show your way)

## API 선택. 내가 자유롭게 쓸 수 있는 지 확인해보기


앱을 만들기 시작한 첫날부터, 정말 많은 AP들을 봤는데, 일단 API 선택부터 해야할 것 같다. 여러가지 API를 찾아봤는데, 주관적인 점수를 매겨봤다.

### 1. twitter api (사용난이도: ★★☆☆☆ 활용정도:★★★★★ )

트위터의 악명(~~SNS는 인생의 낭비다~~)과는 다르게, 트위터의 API는 굉장히 쓰기 좋게 되어있다. 트위터 데이터를 통한 개발자가 되길 원하는 사람들은 약간의 자기소개를 곁드리면 곧바로 트위터에서 승인을 해서 트위터의 데이터를 사용할 수 있다. 처음하는 사람들이 사용하기에 가장 적합하다.

###2. oepnweather api (사용난이도: ★☆☆☆☆ 활용정도:★★☆☆☆ )

oepnweather api는 https://openweathermap.org/에서 사용할 수 있는데, 일단, 공짜다. 그리고 사용하기도 생각보다 간편했는데, 문제는 내가 이걸 어디에다가 써먹어야 할지 모르겠다는 점이다. 사용한 걸보면, 기상특보에서나 쓰는 정도...? 아직 내 수준에서는 어떻게 써야할지 감도 잡히지 안흔다.

###3. RapidAPI (사용난이도: ★★★☆☆ 활용정도:★★★★☆ )

공짜라고 하는데, 진짜로 공짜인 것들은 사용하기가 좀 애매한 것들이 많고, 공짜는 request를 하루에 100개가 기본으로 공짜, 그리고 그 외에 1건당 아~주 조금씩 돈을 요구한다. 돈에 대한 부담이 없다면 사용해보고 싶다.

###4. Coupang developer API (사용난이도: ★★★★★ 활용정도:★★★★★ )

제일 많이 사용해보고 싶었고, 잘하면 instacart 데이터 만큼 더 폭넓은 활용이 있을 거라고 기대했으나... 사업자 등록증이 필요하다는 말에 다른 것을 선택할 수 밖에 없었다. 나중에 시간이 있을 때 사업자 등록증을 얻어서 무언가를 해보기에는 가장 좋은 API인 것 같다.

###5, Google Map API (사용난이도: ★★★☆☆ 활용정도:★★★★★ )

정말로 정말로 사용을 해보고 싶었는데, 우선 가격이 조금 걸렸다. 그러나 가장 거대한 search engine 답게 활용도도 무궁무진하고, 사람들이 많이 사용해서 어떻게 사용할 수 있는지 가장 알아보기 쉽게 되어 있다.

###6. Naver open API (사용난이도: ★★★☆☆ 활용정도:★★★★★ )

기본적으로 네이버 아이디로 사용할 수 있게 해놓아서 접근성은 굉장히 좋았고, 활용도도 높았으나, 이때쯤 map API를 찾아보고 있었다. 아쉽게도 내가 가장 필요한 도보로 이동하는 최적의 경로는 제공하고 있지 않았기 때문에, 아쉽게 다른 걸 사용할 수 밖에 없었다.

###7. Mapbox open API (사용난이도: ★★★☆☆ 활용정도:★★★★★ )

이때쯤 되니, map api 를 쓰면 재밌을 꺼라는 생각이 들었다. 그리고 튜토리얼을 찾아보니, 정말 할 수 있는 것이 무궁무진했다!
무엇보다 굉장히 많은 데이터를 무료로 제공해준다는 점이 좋았다.

## 웹 어플리케이션 설계하기

###1.웹 어플리케이션 concept 정하기

사실 요즘에 내가 가장먼저 생각했던 건, codestates 동기들이 최근 건강으로 고생을 하고 있고, 이 문제를 극복하기 위해 운동을 하려고 하지만, 대 코로나 시대에 헬스장이나 기타 운동시설을 가는 것은 굉장히 부담스러운 일이다. 그렇다면 가장 간단하게 할 수 있는 운동이 뭔지 답은 이미 정해져 있다. 나가서 뛰는 것이다! 하지만, 운동을 할 때 가장 궁금한 건 내가 달린 거리가 얼마정도 되는지, 어디서부터 어디까지 뛰어야하는지를 정하는 것이다. 400m 경주용트랙에서 달리면 가늠이 굉장히 쉽게 되지만, 아쉽게도 우리가 달리는 일반 길들은 그런 것들을 알기가 쉽지 않다. 그래서, 나는 사용자 맞춤별 산책경로 추천 서비스를 만들어보기로 했다.

###2. Mapbox api 살펴보기

mapbox api는 굉장히 정리가 잘 되어있는데, https://docs.mapbox.com/ 에서 거의다 도움을 받았다. 그리고 실제로 어떻게 쓰이는 지는 https://docs.mapbox.com/help/tutorials/ 에서 직접 코드 구현을 하면서 따라해볼 수 있다. 내가 그중에서도 많이 사용한 건 directions api(https://docs.mapbox.com/api/navigation/directions/)이고, geojosn이라는 geography 맞춤형 json을 사용했다.

###3.ER diagram 정하기


우선 유저 정보를 가장 우선으로 하고, point gorup으로 points 를 관리한다. 하지만 traindata는 모든 point group에 적용되어야 하기 때문에, Point Group이 아닌 Users table에 종속된다.

## 웹 어플리케이션

###1. main page

먼저 유저를 선택하는 화면이 가장 기본으로 뜨게 된다. 여기서 let's roll 이라는 선택지를 누르면, 5번 path main page로 넘어가게 된다.

###2. Add user page

여기서는 유저들을 추가할 수 있는데, 나이, 성별, 키, 몸무게, 주소등을 입력해서 나중에 산책을 할 때 참고할 수 있는 데이터를 넣었는데... 4일의 시간밖에 없어서 사용을 못했다.

###3. modify user page

만약에 열심히 운동을 한다면 최소한 몸무게의 변화가 있을 것이고, 그것들을 바꾸기 위해서 이렇게 따로 수정 화면을 만들어두었다.

###4. delete user page

유저의 정보가 더이상 필요가 없다면, 여기서 유저의 정보와 그외 모든 데이터들을 지울 수 있다.

###5. path main page

여기서는 유저가 add pointgroup page에서 저장한 point group들을 보여준다. 만약에 아무것도 등록하지 않았다면, 빈 지도만 보인다.

###6. add pointgroup page

유저가 point group을 추가할 수 있다. point group은 비동기식으로 저장되고, 지도에 직접 클릭을 해서 깃발을 세운다음 이름을 적고, 저장버튼을 누르면 저장된다. 만약에 깃발들을 지우고 싶으면 지금은 어쩔 수 없이 add Points group 버튼을 한번 더 눌러 리셋시키는 방법밖에 없다.

###7. delete point group page

유저가 저장했던 point group이 필요없어지면 삭제할 수 있다.

###8. recommend the path page

유저에게 원하는 pointgroup의 경로를 추천해주는 화면이다. 화면 추천 방식은 다음과 같다.



## 개선해야할 점

###1. 로그인시스템

다른 동기들이 어떻게 하는지 봤더니, 단순히 사용자의 정보 뿐만 아니라 최소한의 보안수준을 요구했다. 아무리 교육용으로 만들었다고는 하지만, 이 부분을 신경쓰지 않은 것은 안타깝다.

###2. 주소와 지도의 시작점 동기화

지금은 강남구로 고정이 되어있지만, 다른 API를 써서 (mapbox는 한글 주소로 좌표찾기는 지원하지 않는다.) 이 부분까지 보완해준다면 조금더 멋진 앱이 될 것이다.

###3. 다른 추가 데이터들의 부재

이게 가장 아쉽다. 시간이 별로 없다보니 기능 구현에만 초점을 맞추었고, 원래 취지인 사용자의 운동을 도와준다는 점에서 굉장한 마이너스 요소이다. 다만 이 부분은 이미 API를 불러올 떄 geojosn에 값이 저장이 되어있으니, 값을 불러오기만 하면 될 것 같다. 이 부분은 나중에 웹 어플리케이션을 보완할 때 다시한번 해보고 싶다.

###4. 기능의 다양화

아직 완벽하게 mapbox api를 이해한 것은 아니어서, 거기에 있는 다양한 기능들을 잘 활용하지 못했다. 시간이 절대적으로 부족한 것은 맞지만, 이런 것들을 알아서 조금더 색다른 시도를 해보는 것도 좋았을 것이다.

## 맺으며

과제 말고 처음 내 마음대로 만들어본 앱이라서 굉장히 힘들었지만, 그만큼 보람도 있었다. 다만 내 능력을 너무 과대평가하고, 고집을 너무 부려서 API 해석과 JavaScript를 구현하는데 너무 많은 시간을 사용했다. 그리고 무엇보다, 기능도 중요하지만 비쥬얼도 굉장히 중요하다는 것을 알았고, 왜 프론트앤드 개발자가 따로 있는지를 이번에 확실하게 알았다.

github주소: https://github.com/hyuntae-yun/show-my-way
웹 어플리케이션 주소: https://show-your-way.herokuapp.com/