[토이 프로젝트 발표] 코스 추천 앱을 만들었어요 🏃

Об этом предложении

집 근처에서 5km만 뛰고 싶은데, 어디로 뛰어야 할지 모르겠더라고요. 인터넷에 "둔산동 런닝 코스"를 쳐봐도 마땅한 게 안 나왔어요. 지도 앱은 A에서 B로 가는 길만 알려줘요. 그런데 러너가 궁금한 건 "여기서 출발해서 5km 돌고 다시 여기로 오는 길" 이거든요. 같은 5km라도 오르막이 있는지, 횡단보도에서 몇 번 서야 하는지에 따라 뛰는 맛이 완전히 달라지고요. 그래서 출발점과 거리만 넣으면 돌아오는 코스 3개를 알아서 골라주는 웹앱 , 루프런을 만들었어요. 타슈에 이어서 또 제가 불편한 걸 앱으로 만들어버렸네요 ᄏᄏ 목표 5km를 넣으면 성격이 다른 코스 3개가 나와요. 지도 색은 경사(초록 평지, 노랑 완만, 빨강 언덕)예요 📱 이렇게 써요 쓰는 법은 단순해요. 출발점을 정하고(현재 위치, 지도에 핀 찍기, 장소 검색) 목표를 정하면 끝이에요. 목표는 두 가지 방식으로 넣을 수 있어요. 그냥 거리(0.5~30km) 를 넣거나, 페이스 × 시간 을 넣으면 거리로 바꿔줘요. 예를 들어 6:00/km로 40분 뛰고 싶으면 6.67km 코스를 찾아줘요. 왼쪽은 거리로, 오른쪽은 페이스와 시간으로 목표를 정하는 화면이에요 도착지를 따로 정하면 출발점으로 돌아오는 대신 편도 코스를 만들어줘요. 🧭 루프 코스는 이렇게 만들어요 처음 부딪힌 문제는 길찾기 API가 "돌아오는 길"을 모른다 는 거였어요. 제가 쓴 TMAP 보행자 API도 A→B만 돼요. 대신 경유지를 넣을 수 있어서 경유지를 잘 찍어주면 출발→경유지→출발로 한 바퀴를 만들 수 있어요. 그래서 출발점을 지나는 원을 하나 그리고 그 원 위에 경유지 2개를 정삼각형 모양으로 찍어요. 이걸 4방향(북·동·남·서)으로 하고 사이사이 2방향으로는 목표의 절반만큼 갔다가 같은 길로 돌아오는 반환 코스를 만들어요. 후보 6개를 병렬로 요청해요. 직선으로 이은 경유지 배치예요. 실제 경로는 TMAP이 도로를 따라 그려서 이것보다 구불구불해져요 원의 반지름은 "삼각형 둘레 × 도로 굴곡 보정값 k = 목표 거리"가 되도록 정해요. 도로는 직선보다 길어서 k를 1.3으로 시작했고 5km면 반지름이 약 740m가 나와요. // web/src/lib/course/lib.ts const sides = waypointCount + 1; // 경유지 2개 + 출발점 = 정삼각형 const radius = targetDistanceM / detourFactor / (2 * sides * Math.sin(Math.PI / sides)); const center = destinationPoint(start, headingDeg, radius); 거리가 안 맞으면 딱 한 번만 다시 동네마다 길 모양이 달라서 k=1.3이 늘 맞진 않아요. 그래서 받아온 경로가 목표 ±10% 밖이면 k를 √(실제/목표)만큼 고쳐서 한 번만 다시 요청해요. 제곱근을 씌운 건 한 번에 너무 크게 고치지 않으려고요. 재시도는 한 번까지만 해요. 무료 API 호출 수가 정해져 있어서 정확도를 조금 내주고 호출 수를 아꼈어요. 대신 처음 받은 경로와 재시도 경로를 둘 다 후보로 남겨서 고를 때 같이 비교해요. 📊 세 코스는 이렇게 골라요 후보가 모이면 코스마다 러너가 신경 쓰는 걸 숫자로 뽑아요. 항목 어떻게 세나 횡단보도·계단 TMAP 응답의 turnType 코드 (횡단보도 211~217, 계단 127·129) 오르막 고도가 기준점보다 2m 이상 바뀌어야 오르막으로 인정 (고도 데이터 잡음 거르기) 겹침 30m 격자 기준으로 같은 길을 다시 지나간 비율 예상 시간 거리 × 내 페이스 (TMAP 소요 시간은 걷기 기준이라 안 써요) 이걸 가중치를 곱해 더한 점수로 바꾸고(낮을수록 좋은 코스) 역할별로 하나씩 뽑아요. 1 종합 점수 1등, 2 오르막이 제일 적은 코스, 3 횡단보도가 제일 적은 코스예요. 같은 코스가 두 군데서 1등을 하면 앞 슬롯이 가져가고 뒤 슬롯에는 2등을 보여주면서 그 이유를 한 줄 적어둬요. 경사는 지도 타일 "이미지"에서 읽어요 고도는 AWS Terrain Tiles를 써요. 처음엔 Open-Meteo 고도 API를 썼는데 요청 한도(429)에 자꾸 걸려서 바꿨어요. Terrain Tiles는 키도 한도도 없고 고도가 PNG 이미지의 RGB 값 에 들어 있어요. // Terrarium PNG 한 픽셀 → 고도(m) elevation = R * 256 + G + B / 256 - 32768; z13 타일 한 장이 약 3.9km 범위라서 한 장 받아두면 주변 코스를 거의 다 처리할 수 있어요. 캐시 효율이 좋아요. 코스를 100m 간격으로 찍어서 고도를 읽고 구간마다 경사율로 색을 칠해요. 1%까지는 평지, 3%부터 완만, 6% 넘으면 언덕이에요. 고도 차트를 누르면 그 지점이 지도에 표시돼요. 마음에 드는 코스는 '내 코스'에 저장해 둘 수 있어요 💸 월 0원으로 굴리기 개인 프로젝트라 운영비 0원 을 처음부터 조건으로 잡았어요. 구성 쓴 것 서버·배포 Next.js Route Handler + Vercel Hobby 경로 TMAP 보행자 API (무료 하루 1,000건) 고도 AWS Terrain Tiles (키·한도 없음) 저장 로그인 없이 브라우저 localStorage 걸리는 건 TMAP 한도예요. 코스 요청 한 번에 TMAP을 6~10번 부르거든요. 그래서 IP당 10분에 6번으로 요청을 막아두고 한반도 밖 좌표처럼 말이 안 되는 입력은 API를 부르기 전에 걸러요. 아쉬운 점도 있어요. 공개 고도 데이터라 도심에서는 건물이나 고가도로가 오르막처럼 잡히기도 해요. 평지에 고도 오차만 섞어 시뮬레이션해 봤더니 5km에 수십 m짜리 가짜 오르막이 나오더라고요. 그래서 절대 숫자 대신 평지 / 완만 / 언덕 등급으로만 보여줘요. 신호 데이터도 없어서 "신호등 N개"가 아니라 "횡단보도 N개"라고 적었어요. 🙌 한번 써보세요 "둔산동 런닝 코스"로 검색해도 안 나오던 동네 코스, 이제는 출발점이랑 5km만 넣으면 바로 3개가 나와요. 한국 지역만 되고 모바일 화면 기준이에요. 여러분 동네에서도 한번 돌려보시고 이상한 코스가 나오면 알려주세요 🙂 👉 루프런 써보기 — loop-run-eight.vercel.app