Tankpreis — 내 주변 독일 주유 가격

주유소 앞에서 한 손으로 3초 안에 "어디가 제일 싼가" 를 판단하는 모바일 우선 PWA. 독일 공식 실시간 가격(MTS-K, Tankerkönig API)으로 주변을 비교하고, "지금 넣을까, 기다릴까" 와 "지금 가격이 평소·이웃 나라보다 싼가" 까지 알려줍니다.

• 내 주변 최저가 카드: 가격판 스타일의 큰 숫자(바뀌면 부드럽게 카운트), 거리, 주변 평균 대비 절약액(€), 탭 한 번 길안내
• 지금 넣을까?
• 독일은 2026년 4월 1일부터 주유소가 하루 한 번, 12시에만 가격을 올릴 수 있습니다(인하는 언제든). "아침 비쌈, 저녁 저렴"은 그 이전 패턴이라 쓰지 않습니다.
• 미래 가격 숫자는 보여주지 않습니다. 규칙 덕분에 방향(12시 전엔 오르지 않음, 12시 이후엔 내려감)은 믿을 만하지만 폭은 날마다·주유소마다 달라서, 시간대 그래프는 방향(▼ 내려감 · ━ 비슷 · ▲ 오를 수 있음)만, 금액은 범위로만 표시합니다(예: "50L에 약 1,50–3,00 €").
• 12시 인상 폭의 상한은 ADAC 2026년 5월 분석의 하루 최고·최저가 차이 평균(Super E10 14,6ct · Diesel 18,4ct)을 씁니다.
• 처음에는 전형적 곡선으로, 이 기기에서 실제 가격을 3일 이상 보고 예상 방향 적중률이 60% 이상이면 그 동네 기록으로 바꿉니다. 화면에 "내 기록 n일 · 방향 적중 x%"로 근거를 보여줍니다. 기록은 2주 보관, 샘플 데이터는 기록하지 않습니다.
• 끄는 스위치: 규칙이 폐지·변경되면 Vercel 환경변수 NEXT_PUBLIC_FUEL_TIMING=off + Redeploy로 기능 전체를 숨깁니다.

디자인·접근성

• 가격 숫자: 고정폭 대신 굵은 Pretendard + 표 정렬 숫자(Toss식). 주유기 관습대로 마지막 자리는 위첨자.
• 가격 구간: 현재 결과의 33/67 분위수. 색 + 모양(▼ ━ ▲) + 글자. 노랑은 흰 배경 대비 1.8:1이라 지도 핀·막대에는 진한 테두리를 둡니다.
• 글자 크기: 모든 글자를 rem으로, iOS에서는 -apple-system-body로 시스템 글자 크기를 따릅니다. 커지면 가격이 이름 아래로 내려가는 2줄 배치.
• 스크린리더: 리스트 행은 보이는 글자 + 숨긴 연결어로 "Aral Heidelberger Str., 1,2 km, Super E10 1,739 유로, 주변 최저가"처럼 한 문장(보이는 글자가 이름에 포함, WCAG 2.5.3).
• 움직임: 가격 카운트 400ms, 시트 260ms. 동작 줄이기 설정이면 즉시.
• 포인트 색은 파랑 하나(누를 수 있는 것). 초록·노랑·빨강은 가격 구간 전용.
• 데스크톱(1024px+): 주변 탭은 리스트(440px) + 지도 2단, 비교 탭은 카드 2열.

다국어

• 한국어가 원문, 독일어·영어는 초안. 기기 언어를 따르고(ko/de/en 외에는 영어) 설정에서 바꿀 수 있습니다.
• 첫 화면을 그 언어로 바로 그리기 위해 /ko·/de·/en 정적 페이지를 만들고 proxy.ts가 / 요청을 쿠키(설정에서 고른 언어) 또는 Accept-Language로 연결합니다. 주소는 계속 /. (Vercel이 아닌 CDN 뒤에 둘 때는 /를 언어별로 캐시하지 않게 해야 합니다.)
• 숫자는 모든 언어에서 독일 주유소 표기(1,739)를 유지합니다. 주유소 이름·주소·연료명은 번역하지 않습니다.

그 밖에

• 위치는 첫 실행에서만 버튼으로 요청하고, 한 번 허용하면 다음부터 자동. 거부 상태면 집 위치로 대체.
• 위치 검색은 Nominatim(키 불필요). 이용 정책상 자동완성 금지라 검색 버튼으로만 조회, 초당 1회 + 24시간 캐시.
• 서비스워커 직접 작성. API 응답은 SW가 아니라 앱이 마지막 결과를 보관해 시각과 함께 보여줍니다.
• Fleet Card 할인 기능은 범용 앱에서 제외했습니다.
• 요청 제한(실데이터일 때만): IP당 분당 60회, 서버 인스턴스당 Tankerkönig 호출 분당 120회. 넘으면 429 + "요청이 많아요". 서버리스 인스턴스끼리 메모리를 공유하지 않아 완벽한 전체 한도는 아니고, 한 사람이 키를 소진시키는 것을 막는 용도입니다.
• 개인정보 안내: 설정 탭 "개인정보"(ko/de/en). Vercel 환경변수 NEXT_PUBLIC_CONTACT(예: 문의용 이메일)를 넣고 Redeploy하면 문의처 줄이 나타납니다.

다음에 할 수 있는 것

• 한국과 비교: 오피넷 API(무료 키) + 환율. 키를 받으면 비교 탭에 같은 방식으로 추가 가능.
• 경로상 주유: openrouteservice(무료 키, 일일 한도)가 현실적인 선택지.
• 가격 알림: iOS 16.4+ 홈 화면 앱만 웹 푸시 가능. 서버의 주기 확인과 구독 저장(Vercel Cron + KV 등)이 필요해 "서버 DB 없음" 결정을 바꿔야 합니다.