⛽ React와 Supabase로 만든 크로스플랫폼 연료 찾기: 인디 개발자의 여정

출처: Dev.to

길거리 여행을 사랑하는 사람으로서, 주유소를 찾고, 주행 거리를 기록하고, 다음 구간에 충분한 현금이 있는지 계산하기 위해 다섯 개의 서로 다른 앱을 전환하는 데 지쳤습니다. 그래서 개발자라면 당연히… 직접 만들었습니다.
이 글에서는 제가 혼자서 지도 앱을 만들면서 사용한 기술 스택, “아하!” 순간, 그리고 “왜 나 자신에게 이런 짓을 했지?” 하는 도전 과제들을 공유하고자 합니다.
실제 서비스는 여기에서 확인할 수 있습니다: findmyfuel.site

혼자 개발할 때는 반복 속도가 전부입니다. 저는 속도는 빠르면서도 파워를 포기하지 않는 스택을 선택했습니다:

• 프론트엔드: React (Vite) + TypeScript + Tailwind CSS.
• UI 컴포넌트: shadcn/ui (깔끔한 미학을 위한 절대적인 게임 체인저).
• 지도: Leaflet + OpenStreetMap & Overpass API.
• 백엔드/인증: Supabase. “그냥 작동하는” 인증과 데이터베이스가 필요했기에 기능 구현에 집중할 수 있었습니다.
• 모바일: Capacitor. 하나의 코드베이스로 웹과 Android에서 실행.
• 애니메이션: Framer Motion (프리미엄 느낌의 전환 효과).

우리는 모두 Google Maps API 청구서를 본 적이 있습니다. 인디 프로젝트라면 비용을 최소화하고 싶죠. 그래서 저는 OpenStreetMap과 Overpass API를 선택했습니다.

주변 주유소를 가져오는 것은 간단한 Overpass 쿼리로 처리합니다:

const buildOverpassQuery = (latValue, lonValue, radiusMeters) => {
  return `
    [out:json];
    (
      node
        ["amenity"="fuel"]
        (around:${radiusMeters},${latValue},${lonValue});
    );
    out center;
  `;
};

빠르고, 무료이며, 놀라울 정도로 정확합니다. 유일한 단점은 파싱을 직접 처리해야 한다는 점인데, 독립성을 위해 감수할 수 있는 작은 대가입니다!

단순한 주유소 찾기 앱에 그치고 싶지 않았습니다. 길 위의 동반자가 되고 싶었죠.

• 연료 기록: 주유할 때마다 가격, 양, 현재 주행 거리를 기록할 수 있습니다. 앱은 시간에 따라 연료 효율(리터당 비용)을 계산합니다.
• 여행 비용 계산기: 내장 도구를 통해 거리와 차량 연비를 기준으로 다음 여행 비용을 추정합니다.
• 다국가 지원: 미국(마일/갤런)이나 인도(KM/리터) 등 어느 나라에 있든 단위와 통화를 자동으로 맞춥니다.

가장 좋은 선택 중 하나는 Capacitor를 사용한 것이었습니다. Kotlin이나 Swift를 배울 필요가 없었고, Vite 빌드만 감싸면 바로 Android 앱이 완성되었습니다.

가장 만족스러운 순간은 Leaflet 지도가 네이티브 터치 제스처와 부드럽게 동작하는 모습을 보았을 때였습니다. 아직 Capacitor를 써보지 않았다면, 웹 개발자가 앱 스토어에 진출하고 싶을 때 완전한 구세주가 될 겁니다.

• 위치 정보는 까다롭다: 브라우저와 모바일 OS는 위치 권한에 대해 (당연히) 엄격합니다. “사용자가 접근을 거부함” 상태를 우아하게 처리하는 것이 UI 작업의 50%를 차지합니다.
• 데이터 일관성: 여러 국가를 지원하면 우편번호 표기법이 얼마나 다양한지 알게 됩니다. Nominatim의 구조화된 검색이 큰 도움이 되었습니다.
• 인디 개발자 마인드셋: 완벽함은 출시의 적입니다. 핵심 지도 기능이 사람들에게 진짜로 중요한 것이라는 걸 깨닫기 전까지 “완벽한” 로고에 너무 많은 시간을 쏟았습니다.

FindMyFuel는 현재 라이브 상태이며, 로드맵은 아직 깁니다:

• 실시간 연료 가격 (지역 API 활용)
• 오프라인 지도 캐시 (외딴 산길을 위해)
• 연료 소비 추세를 위한 고급 차트

레포지토리는 여기에서 확인하세요: jicoing/FuelFinder

여러분의 생각을 듣고 싶어요! 최근에 지도 API를 사용해 무언가 만든 적 있나요? 인디 개발자를 위한 팁이 있다면 공유해 주세요.
댓글로 이야기해요! 👇

webdev #javascript #react #supabase #indiedev #showdev