안녕하십니까. 자전거 타는 좁밥입니다.


다름이 아니라 제가 작년 여름부터 개발해오던 웹 서비스가 드디어 유저분들을 맞이할 준비를 마치고 배포하게 되었습니다.

작년 여름에 열심히 개발하다가 이런 저런 일들 때문에 잠시 접어 두었던 걸 재정비해봤습니다.

대단한 실력도 아니고 허술한 부분도 많지만 잘 부탁드립니다.



서비스 소개

본 서비스의 이름은 'MileStone' 입니다. 표지석, 이정표 라는 뜻이죠.

유저분들이 자전거를 타면서 얼마나, 어디까지, 어느 정도 지나쳐왔는지 보여주는 서비스 이기에 이름을 이처럼 지었습니다.

여러분들도 많이들 사용하시는 애플리케이션 'Strava'를 이용해서 부가적인 서비스를 제공합니다.

주 기능은 여러분들의 라이드 데이터를 Strava로부터 가져와서 Google 지도 상에 라이딩한 기록들을 한눈에 보여줍니다.
(기술적인 부분을 얘기하자면 실제 GPX 파일을 가져와 랜더링 하는 것이 아니라 각 라이딩의 위치 기록을은 Polyline이라는 객체인데 이 객체의 지점 좌표들이 특수한 암호화 방식으로 인코딩되어있습니다. 이 객체를 받아 제 백엔드 서버단에서 디코딩하여 지도상에 표시합니다.)


이외에도 각 라이딩이 어떤 지역을 지나왔는지 좌표를 분석해 유저가 국내 어느 지역까지 가봤는지 시각화 하는 기능,

지금까지의 라이딩을 분석하여 자전거를 타면서 얼마나 이뤄냈는지를 보여주는 업적 기능,

서비스를 이용하는 유저들 사이에서 각 항목 별 상위 5명을 보여주는 리더보드 기능 등이 있습니다.



주의사항

사용자의 스트라바 데이터를 이용하는 만큼 백엔드 서버에 사용자 프로필 정보, 라이딩 정보 등이 저장되며 '리더보드' 기능에 노출될 수 있습니다. 이 점 고려하셔서 사용하시길 바랍니다.

그렇다고 제가 선생님들 스트라바 아이디로 뭘 할 수 있는건 아닙니다. 단지 공개된 데이터에 접근할 수 있을 뿐



또한 아래의 설명은 PC버전 기준으로 되어있으니 가급적 PC버전으로 부탁드립니다.


스마트폰 버전도 가능하긴 한데 쫌 덜 직관적이라 좆같습니다.



각 페이지 설명



7cf3c028e2f206a26d81f6e44f807c6547

우선 초기 화면입니다. 구구절절한 제 쓸데가리 없는 사연이 써져 있고요. 무시하고 시작하기 버튼을 누르시면 됩니다.





7ff3c028e2f206a26d81f6ed45837064f7


7ef3c028e2f206a26d81f6e146807c6a




시작하기 버튼을 누르시면 Strava에 로그인하라고 나옵니다. 로그인하시고



그 다음은 데이터에 접근할 수 있도록 허가해주셔야 하는데 원하시는 만큼 권한을 주시면 됩니다.


근데 프로필 전체보기는 주시는게 좋을거 같네요;;; 저거는 안하면 쫌 꼬일지도












79f3c028e2f206a26d81f6e44e82736f


승인을 누르시면 이제 백엔드 서버에서 Strava로부터 데이터를 가져오고 가공합니다.




사용자의 데이터 양에 따라서 시간은 천차만별입니다.


저 같은 경우 약 3.9만 km 누적거리의 972개 라이드 데이터가 있는데 1분 이상은 안 걸리는 것 같습니다.







78f3c028e2f206a26d81f6e34486716a77


PC 버전





7bf3c028e2f206a26d81f6e74185756b45



모바일 버전



7af3c028e2f206a26d81f6e34e847d6d



모바일 버전(Search 버튼)




메인 화면입니다.




지도상에 표시되는 선들은 전부 유저가 다녀온 라이딩 기록입니다.


오른쪽의 검색기능을 이용하여 특정 라이딩 기록을 찾을 수도 있으며 클릭하게 되면 해당 라이딩 기록을 한눈에 볼 수 있도록 확대하는 기능이 있습니다.

서비스를 요청한 시점까지의 데이터만을 보여주는 것이 아니라 실시간으로 스트라바에 업로드 되는 라이드 또한 서비스에 재 접속시 업데이트 하여 보여줍니다.


(주의: 확대 이후에 다시 모든 라이드를 표시하기 위해선 상단의 '전체보기' 버튼을 눌러야 함)



75f3c028e2f206a26d81f6e044827669


다음으로는 프로필 페이지 입니다.

단순하게 사용자 프로필 정보를 읽어와 표시합니다.


쫌 볼만한 건 전체 누적거리는 스트라바 앱에도 잘 나오지만 전체 누적 라이딩 시간은 직접 계산한 값입니다.

또 총 획득 따봉 수랑 스트라바를 시작한 날짜, 마지막 라이딩 날짜도 보여줍니다.



74f3c028e2f206a26d81f6e44381736ab0


다음으로 Location 페이지 입니다.


유저의 라이딩 정보에서 지나온 각 좌표들의 주소를 Kakao Local Api를 이용하여 받아와 각 라이드들이 국내 어느 시, 군, 구 까지 도달했는지 시각화 합니다.

최초에 서비스에 접속할 때 로직이 시작됩니다.


여기서 문제가 있습니다. 죄송합니다.

하나의 라이드는 100km 기준 약 300개 정도의 좌표 데이터를 가지고 있습니다.

이 각각의 좌표들을 전부 조회하게 되면 900개의 라이드 데이터를 가진 유저 기준 27만번의 조회가 필요합니다.


하지만 kakao api의 하루 최대 조회 가능 횟수가 20만회 이기에 이를 전부 조회할 수 없어 모든 좌표를 조회하지 않고 인접한 10개의 좌표들의 평균 중앙 좌표를 계산하여 해당 지점에 대해서 조회합니다.

이 덕에 약 1/10 수준으로 조회 횟수를 감소시킬 수 있었습니다.

당연히 이 과정 중에 데이터가 왜곡 될 수 있지만 제 체감상 실제로는 갔지만 안 갔다고 나오는 지역은 없었습니다.

데이터 처리 시간은 헤비유저 기준 약 5분이 소요됩니다. 담배한대 피고 다시와서 보시면 되겠네요


동시에 해당 로직을 이용하여 처리되는 유저는 '2명' 이며 나머지 요청들은 Queue에서 대기하게 됩니다.

많은 유저가 몰릴 때에는 대기시간이 길어질 수 있으니 천천히 보시는걸 추천드립니다.


근데 또 문제가 있습니다 죄송합니다.

초기 유저가 해당 서비스를 요청하게 되면 제 기준 약 2만회의 api조회가 발생합니다(헤비 유저의 경우)

즉 이런 미친놈이 10명만 있어도 벌써 API 조회 가능 횟수가 오버되어 다른 사람이 조회 할 수 없습니다.


API의 조회 가능 쿼터는 매일 밤 00시에 초기화 되며 해당 시간에 다시 요청한 유저들의 데이터 처리를 자동으로 시작합니다.

즉, Location 기능은 얼마나 걸릴지 모르니 그냥 나중에 '아 맞다' 하실 때 쯤 보시는 걸 추천드립니다.....




7ced9e36ebd518986abce895458270650680



다음으로 도전과제, Award 기능입니다.


해당 유저가 얼마나 자전거를 탓는지 쫌 촌스러운 도전과제 뱃지로 보여줍니다.

기준을 만족하는 유저는 해당 뱃지가 컬러로 나타나게 됩니다.






7cec9e36ebd518986abce89547827c6b8012

마지막으로 리더보드 기능입니다. 그냥 쉽게 랭킹 기능이죠


이 서비스를 이용하는 유저들의 데이터를 데이터베이스로부터 조회하여 각 항목별 Top5 유저를 보여줍니다.


이 부분에서 개인정보(프로필 사진, 이름)등이 다른 이용자에게 노출 될 수 있기 때문에 이 점 유의하시길 바랍니다.


랭킹의 실시간 반영은 브라우저 새로고침, 탭 닫기 등으로는 이루어지지 않으며 '창 닫기' 이후 다시 접속 해야 됩니다.







이상입니다.

솔직히 별거 없습니다. 어디서 본거 같은 서비스기도 하고요.

그냥 허접한 대학생이 만든 토이 프로젝트 수준이긴 하지만 나름 열심히 만들어 봤습니다.


그리고 설명해봐야 재미없는 개발 간에 문제들도 많았고 하면서 배운점도 정말 많았습니다.


지금까지는 저 혼자서 사용하면서 큰 문제가 없어 보였지만 웹서비스의 가장 큰 특징인 여러 불특정 다수가 동시에 사용할 때에 어떤 문제가 발생하는지를 아직 알 수가 없었습니다.



그래서 여러분들의 도움이 필요합니다. 한번만 써주세요.


배포 기념 이벤트.



맨입으로 해달라는 건 아닙니다.

제 서비스에 접속해주신 분들 중 2명을 추첨으로 '싸이버거 세트' 기프티콘 드리겠습니다.

죄송합니다 거지 대학생이라 돈이 없습니다.



서비스 이용 후 '메인화면'을 캡쳐하셔서 글 제목에 '마일스톤' 붙여서 글 써주시면 응모해주신 분들 중 2명 뽑아서 드리겠습니다. 상단의 사용자명은 가리셔도 됩니다.

귀찮으시겠지만 잘 부탁드립니다. DB에 있는 데이터로 추첨해도 되긴 하는데 추첨 결과를 갤에 올릴 때 이름을 깔수는 없어서 이런 방법을 채택했습니다.


버거 추첨 기간은 현 시점부터 돌아오는 수요일 12:00까지의 글 까지 추첨하겠습니다.



웹 사이트 주소

https://milestone-1.firebaseapp.com

MileStone BetaMileStone Betamilestone-1.firebaseapp.com





아무튼 여기까지 입니다. 읽어주셔서 감사합니다.



여담을 적자면 대표적인 문제들로 트랜잭션 경계라던지 멀티쓰레딩 관련해서 고민을 정말 많이 한 것 같습니다.

또 혼자서 개발한다고 해서 막무가내로 하면 진짜 나중에 개좆된다는 것도 배웠습니다.

아무리 아키텍쳐 설계를 처음에 치밀하게 한다고 하더라도 결국 기능이 확장되면서 뜯어고쳐야 할 부분들이 늘어나면서 힘들었습니다.




7cef9e36ebd518986abce89540877c6d043c


제가 실시간으로 로그들을 모니터링 하고 있으니 사용 간에 오류 발생은 말씀해주시면 바로 확인해보겠습니다.


여러분들의 트래픽이 제 피같은 경험이 됩니다. 잘 부탁드립니다







존나 무섭네 바로 터지는거 아닌가