생활밀착 지도 프로그램 (Life Map Navigator, LMN)

============================================================================

프로그램명 : 생활밀착 지도 프로그램 (Life Map Navigator, LMN)

프로그램 한 줄 소개 : 설치 없이 웹에서 내 위치 확인, 목적지 탐색, 주변 생활 시설 조회, 길찾기 연결까지 빠르게 수행하는 실전형 지도 서비스

문서 버전 : v0.2-spec 문서 기준일 : 2026-07-04 프로젝트 상태 : 기획 고도화 단계

============================================================================

기능 정리

• 핵심 기능 :

1. 웹 접속 즉시 지도 사용 (설치/회원가입 필수 아님)
2. 내 위치 탐색 및 지도 중심 이동
3. 목적지 검색과 마커 표시
4. 외부 길찾기 서비스 연동
5. 주변 생활 시설 탐색 (병원, 약국, 편의점)

• 부가 기능 :

1. 검색 결과 목록/거리 정렬
2. 모바일/PC 반응형 화면
3. 빠른 도움말 및 사용 안내
4. 한국어 우선 UI + 영어 확장 준비

프로젝트 목표 :

• 초보자도 3분 안에 길찾기 완료 가능
• 자주 쓰는 생활 시설을 10초 내 탐색 시작
• 복잡한 설정 없이 즉시 사용 가능한 지도 환경 제공

정량 목표 (MVP 기준) :

• 첫 화면 로딩 목표: 3초 이내 (일반 와이파이 환경)
• 목적지 검색 응답 목표: 2초 이내
• 주변 시설 조회 응답 목표: 4초 이내
• 모바일 화면 대응 폭: 360px 이상

============================================================================

사용자 페르소나

• A. 초보 사용자

  • 지도 앱 사용 경험이 적음
  • 목표: 내 위치와 목적지 빠르게 확인

• B. 이동 중 사용자

  • 낯선 지역에서 병원/약국/편의점 즉시 필요
  • 목표: 현재 위치 기준 가까운 시설 우선 확인

• C. 경량 서비스 선호 사용자

  • 앱 설치/로그인 번거로움을 싫어함
  • 목표: 브라우저만으로 즉시 사용

기대 효과 : 진입 장벽이 낮아 누구나 쉽게 접근 가능하고, 사용자는 이동 중 필요한 위치 정보를 빠르게 확인하여 시간 손실을 줄일 수 있다.

============================================================================

계기

기존 지도 서비스는 기능이 많아 초보자에게 복잡할 수 있고, 필요한 기능만 빠르게 쓰기 어려운 경우가 많음. 따라서 생활 필수 기능만 모은 단순하고 빠른 지도 도구를 만들게 됨.

============================================================================

핵심 화면

┌─────────────────────────────────────────────────────────────────────┐
│ 1. 홈/지도 화면 (Main Map Screen) - 레이아웃 요약                       │
├─────────────────────────────────────────────────────────────────────┤
│ 데스크톱: [제어 35%] | [지도 65%]  (좌우 분할)                         │
│ 모바일:   [제어 50%] (상단) + [지도 50%] (하단)  (상하 분할)            │
│ 전환점:   뷰포트 ≤ 768px 시 모바일 레이아웃 적용                       │
└─────────────────────────────────────────────────────────────────────┘

1-A. 제어 패널 상세 (Control Panel) - 5개 섹션 구성

   섹션 A: 위치 정보 (🗺️ 내 위치)
   ├─ 상태 표시: "(위도, 경도)" | "확인 중..." | "권한 거부됨"
   ├─ 버튼: [내 위치 찾기]
   └─ 스펙: 배경 #4CAF50, 100% × 44px

   섹션 B: 목적지 검색 (🔍 목적지 검색)
   ├─ 입력필드: 플레이스홀더 "서울역, 강남역, 병원..."
   ├─ 버튼: [검색] | [검색 초기화] (선택)
   ├─ 결과 표시: 최상단 1개 결과 + 마커 표시
   └─ 스펙: 입력창 40px, 검색 버튼 #2196F3

   섹션 C: 길찾기 (🗺️ 길찾기)
   ├─ 버튼: [길찾기 열기]
   ├─ 활성화 조건: currentPosition && destination 모두 필수
   ├─ 비활성화 UI: 커서 not-allowed, 배경 #CCCCCC
   └─ 스펙: 배경 #FF9800 (활성), 100% × 44px

   섹션 D: 주변 시설 (🏥 주변 시설 탐색)
   ├─ 버튼 3개 (각 31% × 44px, 간격 1%)
   │  ├─ [🏥 병원 찾기] (#F44336)
   │  ├─ [💊 약국 찾기] (#9C27B0)
   │  └─ [🏪 편의점 찾기] (#FF5722)
   └─ 결과: "조회 중..." → 지도 마커 + 목록 업데이트

   섹션 E: 상태 메시지 (Status Bar)
   ├─ 높이: 고정 60px
   ├─ 샘플:
   │  ├─ 처리 중: ⏳ "검색 중입니다..." (#FFF3E0)
   │  ├─ 성공: ✓ "목적지를 찾았습니다." (#E8F5E9)
   │  └─ 에러: ⚠️ "위치 권한이 필요합니다..." (#FFEBEE)
   └─ 폰트: 13px, 색상 #333

1-B. 지도 영역 (Map Area)

   * 라이브러리: Leaflet.js
   * 기본 중심: 서울 시청 (37.5665, 126.9780), 줌 12
   * 타일: OpenStreetMap (Mapnik)
   * 마커 체계:
     - 내 위치: 파란색 원형 + 반경 표시
     - 목적지: 빨간색 핀
     - 시설: 노란색 + 아이콘 (병원/약국/편의점 구분)
   * 상호작용: 마커 클릭 시 팝업 (시설명, 거리), 줌 조정 가능

┌─────────────────────────────────────────────────────────────────────┐
│ 2. 결과 목록 영역 (Results Panel)                                     │
├─────────────────────────────────────────────────────────────────────┤
│ 활성화: 주변 시설 탐색 클릭 후 결과 수신 시                           │
│ 초기: 숨김 또는 "결과를 보려면 주변 시설을 클릭해 주세요"            │
└─────────────────────────────────────────────────────────────────────┘

   구조:
   ├─ 헤더: "결과 목록 (5개 발견)"
   ├─ 컬럼: [순번 | 시설명 | 거리 | 카테고리]
   ├─ 정렬: 거리 오름차순 (가까운 순)
   ├─ 아이템 높이: 44px
   └─ 최대 표시: 10개 (스크롤 활성화)

   예시 결과:
   1. 가나다약국 | 0.42km | 약국 (좌측 보더 #9C27B0)
   2. 라마바약국 | 0.58km | 약국
   3. 서울시병원 | 0.75km | 병원 (좌측 보더 #F44336)
   4. CU 강남점 | 0.89km | 편의점 (좌측 보더 #FF5722)
   5. GS25 역삼점 | 1.02km | 편의점

   상호작용:
   └─ 아이템 클릭 → 지도 중심 이동 + 팝업 표시

3. 상태 표시 체계 (State & Message System) | 상태 | 아이콘 | 배경색 | 예시 메시지 | |------|--------|--------|-----------------------------------| | 처리 중 | ⏳ | #FFF3E0 | 검색 중입니다... | | 성공 | ✓ | #E8F5E9 | 목적지를 찾았습니다. | | 경고 | ⚠️ | #FFF9C4 | 위치 권한이 필요합니다. | | 에러 | ✗ | #FFEBEE | 요청이 실패했습니다. 다시 시도해 주세요. |

4. 반응형 레이아웃 (Responsive Breakpoints)

뷰포트	조건	레이아웃 구성
데스크톱	≥ 769px	좌측 35% (제어) | 우측 65% (지도) 패딩 16px, 제어 최대 400px
태블릿	481~768px	좌측 40% (제어) | 우측 60% (지도) 제어 최대 320px
모바일	≤ 480px	상단 50% (제어) + 하단 50% (지도) 패딩 12px, 터치 영역 최소 44×44px

버튼 너비: └─ 데스크톱/태블릿: 100% (제어 패널 내) └─ 모바일: 100% 또는 3등분 (주변 시설 버튼)

┌─────────────────────────────────────────────────────────────────────┐
│ 5. 디자인 원칙 및 스펙 (Design Guidelines)                          │
├─────────────────────────────────────────────────────────────────────┤

   5-1. 색상 팔레트 (Color Palette)
   ├─ 기본 배경: #FFFFFF (메인) / #F5F5F5 (보조)
   ├─ 텍스트: #333333 (본문) / #666666 (보조)
   ├─ 기능별 강조:
   │  ├─ 내 위치: #4CAF50 (녹색)
   │  ├─ 검색: #2196F3 (파란색)
   │  ├─ 길찾기: #FF9800 (주황색)
   │  ├─ 병원: #F44336 (빨간색)
   │  ├─ 약국: #9C27B0 (보라색)
   │  └─ 편의점: #FF5722 (주황빨강)
   └─ 비활성화: #CCCCCC 배경, #999999 텍스트

   5-2. 타이포그래피 (Typography)
   ├─ 폰트군: sans-serif (Noto Sans 권장)
   ├─ 사이즈: 본문 14px, 제목 16px, 헤더 18px
   └─ 라인높이: 1.5 (텍스트), 1.2 (헤더)

   5-3. 접근성 (Accessibility)
   ├─ 모든 버튼에 aria-label 추가
   ├─ 색상 + 아이콘/텍스트 병행 (색상만으로 정보 전달 금지)
   ├─ 명도 대비: WCAG AA 4.5:1 이상 (본문 vs 배경)
   └─ 포커스 인디케이터: 파란색 테두리 2px

   5-4. 상호작용 원칙 (Interaction)
   ├─ 핵심 흐름: 3회 이상 클릭 방지
   │  ├─ 예1: [내 위치] 클릭 → 자동 표시 (1회)
   │  ├─ 예2: [목적지 입력] + [검색] → 표시 (2회)
   │  └─ 예3: [시설 카테고리] → 결과 표시 (1회)
   ├─ 버튼 문구: 동사 + 아이콘 조합 (예: [🔍 검색], [🏥 병원 찾기])
   ├─ 로딩: 스피너 + 메시지 표시
   └─ 오류: 재시도 버튼 + 에러 코드 (예: LMN-005)

└─────────────────────────────────────────────────────────────────────┘

============================================================================

기능 명세 (MVP)

FR-01. 지도 로드

• 입력: 페이지 접속
• 처리: OpenStreetMap 타일 렌더링
• 출력: 기본 중심 좌표(서울 시청 기준) 지도 표시
• 실패 처리: 타일 로드 실패 시 재시도 안내 메시지

FR-02. 내 위치 찾기

• 입력: 내 위치 찾기 버튼 클릭
• 처리: 브라우저 Geolocation 권한 요청
• 출력: 현재 좌표 마커 표시, 지도 중심 이동
• 실패 처리: 권한 거부/시간 초과 시 대체 안내 표시

FR-03. 목적지 검색

• 입력: 목적지 텍스트 (예: 서울역)
• 처리: Nominatim 검색 API 호출
• 출력: 상위 결과 1개 좌표 마커 표시
• 실패 처리: 결과 없음/요청 실패 메시지 표시

FR-04. 길찾기 연결

• 입력: 현재 위치 + 목적지 확보 상태에서 버튼 클릭
• 처리: 외부 길찾기 URL 생성
• 출력: 새 탭에서 길찾기 페이지 오픈
• 실패 처리: 위치 정보 불충분 시 선행 단계 안내

FR-05. 주변 시설 탐색

• 입력: 현재 위치 기준 반경 1.5km
• 처리: Overpass API로 시설 조회
• 출력: 지도 마커 + 목록(가까운 순)
• 실패 처리: API 오류 시 재시도 안내

============================================================================

비기능 요구사항

NFR-01. 성능

• 검색 요청은 사용자 입력 후 즉시 실행
• 같은 기능 버튼 연속 클릭 시 중복 요청 방지

NFR-02. 사용성

• 모바일 1열, 데스크톱 2열 레이아웃 자동 전환
• 키보드 Enter로 검색 가능

NFR-03. 접근성

• 버튼/입력 요소에 명확한 라벨 제공
• 상태 메시지 영역으로 현재 처리 상태 표시

NFR-04. 신뢰성

• 외부 API 실패 시 앱 자체는 중단되지 않아야 함
• 각 기능은 독립적으로 실패/복구 가능해야 함

============================================================================

기술 설계

1. 프론트엔드

• HTML + CSS + JavaScript (바닐라)
• 지도 라이브러리: Leaflet

2. 외부 데이터 소스

• 타일: OpenStreetMap
• 지오코딩: Nominatim
• 주변 시설: Overpass API
• 경로 페이지: OpenStreetMap Directions

3. 데이터 저장

• MVP: 서버 DB 미사용
• 차기: 최근 검색/즐겨찾기 localStorage 저장
• 향후: 계정 연동 시 서버 DB(PostgreSQL) 도입 검토

============================================================================

보안

1. 입력 검증

• 검색어 길이 제한 (권장 1~80자)
• 비정상 공백/제어 문자 제거

2. 요청 제어

• 기능별 연속 호출 제한 (간단 rate-limit)
• 실패 반복 시 짧은 대기 후 재시도 권장

3. 개인정보 보호

• 위치 정보는 브라우저 권한 기반으로만 사용
• 위치 정보 서버 저장 금지 (MVP 원칙)

4. 운영 확장 시 필수 항목

• API 프록시 서버 도입
• 비정상 트래픽 방어 (WAF, 분산 rate-limit)
• 감사 로그 및 이상 징후 탐지

============================================================================

사용자 예상 시나리오

1. 프로그램 접속
2. 위치 권한 허용 여부 확인
   • a. 허용: 내 위치 즉시 표시
   • b. 거부: 검색 중심 모드로 진행
3. 목적지 입력 후 검색
4. 길찾기 열기 또는 주변 시설 찾기 실행
5. 결과 목록에서 가까운 시설 우선 확인
6. 이동 후 앱 종료

성공 시나리오 완료 기준

• 내 위치 표시 성공
• 목적지 검색 성공
• 길찾기 탭 열림 또는 시설 목록 확인

============================================================================

현재 프로토타입 구현 상태 (2026-07-04)

1. 문서화 상태

• 프로젝트 비전, 기능 범위, 시나리오 정의 완료
• MVP 요구사항 및 확장 계획 문서화 완료

2. 구현 상태

• 현재 저장소 기준 코드 파일은 미포함 상태
• 다음 단계에서 화면/기능 코드 재구성 필요

3. 즉시 착수 우선순위

• P1: 지도 표시 + 내 위치 + 목적지 검색
• P2: 주변 시설 조회 + 거리 정렬
• P3: 길찾기 연결 + 모바일 UX 개선

============================================================================

개발 일정 (제안)

1주차

• 기본 화면 뼈대 구성
• 지도 렌더링 및 내 위치 기능

2주차

• 목적지 검색 및 결과 표시
• 길찾기 URL 연동

3주차

• 주변 시설 탐색 및 거리 정렬
• 예외 처리 및 상태 메시지 개선

4주차

• 반응형 UI 품질 개선
• 사용자 테스트 및 버그 수정

============================================================================

테스트 체크리스트

기능 테스트

• 위치 권한 허용/거부 모두 정상 처리되는가?
• 빈 검색어 입력 시 안내가 정확한가?
• 검색 결과 없음 케이스가 정상 안내되는가?
• 주변 시설 0건/다건 상황에서 UI가 깨지지 않는가?

호환성 테스트

• Chrome, Edge 최신 버전에서 동작하는가?
• 모바일 해상도(360px~430px)에서 버튼 사용성이 유지되는가?

안정성 테스트

• 외부 API 응답 지연 시 앱이 멈추지 않는가?
• 반복 클릭 시 중복 요청이 과도하게 발생하지 않는가?

============================================================================

실행 방법 (코드 추가 이후 기준)

1. 프로젝트 루트에서 로컬 서버 실행

Python: python -m http.server 5500

Node.js: npx serve .

2. 브라우저에서 http://localhost:5500 접속

============================================================================

프로젝트 파일 구성 (목표)

• README.md : 프로젝트 설명 문서
• index.html : 화면 구조
• style.css : 스타일 및 반응형 레이아웃
• app.js : 지도/위치/검색/주변시설 로직

============================================================================

다음 버전 목표 (v0.3)

1. 즐겨찾기(집/회사) 저장
2. 최근 검색 자동완성
3. 시설 카테고리 확장 (ATM, 주유소, 화장실)
4. 한국어/영어 UI 전환
5. 서버 프록시 기반 API 안정화

장기 목표 (v1.0)

1. 사용자 계정 및 클라우드 동기화
2. 실시간 교통/사고/공사 정보 연동
3. 개인화 추천 경로 및 장소 제안

============================================================================

상세 명세 부록 A. 화면 단위 요구사항

A-1. 메인 화면 (Map Home)

• 목적: 사용자가 1개 화면에서 핵심 동작을 끝낼 수 있도록 제공
• 필수 컴포넌트
  • 검색 입력창
  • 내 위치 버튼
  • 길찾기 버튼
  • 주변 시설 버튼
  • 상태 메시지 영역
  • 결과 목록 영역
• UI 규칙
  • 버튼 최소 터치 영역: 44x44px 이상
  • 본문 기본 폰트 크기: 14px 이상
  • 주요 대비 비율: WCAG 기준 4.5:1 이상 목표

A-2. 모바일 화면

• 360px~430px 폭에서 1열 레이아웃
• 지도 높이 최소 55vh 보장
• 스크롤 시 컨트롤 패널이 먼저 보이도록 상단 배치

A-3. 상태 메시지 문구 정책

• 처리 시작: "검색 중입니다..."
• 처리 성공: "목적지를 찾았습니다."
• 처리 실패: 원인 + 다음 행동 제시
  • 예: "위치 권한이 필요합니다. 브라우저 권한 설정을 확인해 주세요."

==============================================================================

상세 명세 부록 B. API 호출 스펙 (외부 API)

B-1. Nominatim (목적지 검색)

• Method: GET
• Endpoint: https://nominatim.openstreetmap.org/search
• Query
  • q: string (검색어)
  • format: json
  • limit: 1 (MVP)
  • addressdetails: 1
• 타임아웃 권장: 6초
• 성공 기준: lat, lon, display_name 존재

요청 예시 https://nominatim.openstreetmap.org/search?q=서울역&format=json&limit=1&addressdetails=1

B-2. Overpass (주변 시설)

• Method: POST
• Endpoint: https://overpass-api.de/api/interpreter
• 반경 기본값: 1500m
• 시설 필터
  • amenity: hospital, pharmacy, clinic
  • shop: convenience
• 타임아웃 권장: 10초

쿼리 예시:

[out:json][timeout:20];
(
   node["amenity"~"hospital|pharmacy|clinic"](around:1500,37.5665,126.9780);
   node["shop"="convenience"](around:1500,37.5665,126.9780);
);
out body;

B-3. Directions URL 생성 규칙

• Base: https://www.openstreetmap.org/directions
• Params - engine=fossgis_osrm_car (기본 차량) - route={lat1},{lon1};{lat2},{lon2}
  • engine=fossgis_osrm_car (기본 차량)
  • route={lat1},{lon1};{lat2},{lon2}

==============================================================================

상세 명세 부록 C. 데이터 모델

C-1. 클라이언트 상태 객체 (예시):

{
   "currentPosition": {
      "lat": 37.5665,
      "lon": 126.9780
   },
   "destination": {
      "label": "서울역",
      "lat": 37.5547,
      "lon": 126.9706
   },
   "nearbyResults": [
      {
         "name": "가나다약국",
         "type": "pharmacy",
         "lat": 37.56,
         "lon": 126.97,
         "distanceKm": 0.42
      }
   ],
   "lastUpdatedAt": "2026-07-04T10:30:00+09:00"
}

C-2. localStorage 키 설계 (v0.3 계획):

lmn-settings
   language: ko | en
   radiusMeters: number

lmn-recent-searches
   ["서울역", "강남역", "인천공항"]

lmn-favorites
   [{"name":"집","lat":...,"lon":...}, {"name":"회사","lat":...,"lon":...}]

==============================================================================

상세 명세 부록 D. 상태 전이 (State Flow)

D-1. 초기 상태

S0: READY

D-2. 위치 찾기

S0 -> S1(LOCATING) -> S2(LOCATED) 또는 E1(LOCATION_DENIED)

D-3. 목적지 검색

S0/S2 -> S3(SEARCHING) -> S4(DESTINATION_SET) 또는 E2(NO_RESULT) 또는 E3(API_ERROR)

D-4. 주변 시설 조회

S2 -> S5(NEARBY_LOADING) -> S6(NEARBY_READY) 또는 E3(API_ERROR)

D-5. 길찾기

조건: currentPosition && destination 존재 시에만 실행
실패 상태: E4(PREREQUISITE_MISSING)

{ "currentPosition": { "lat": 37.5665, "lon": 126.9780 }, "destination": { "label": "서울역", "lat": 37.5547, "lon": 126.9706 }, "nearbyResults": [ { "name": "가나다약국", "type": "pharmacy", "lat": 37.56, "lon": 126.97, "distanceKm": 0.42 } ], "lastUpdatedAt": "2026-07-04T10:30:00+09:00" }

C-2. localStorage 키 설계 (v0.3 계획)

• lmn-settings
  • language: ko | en
  • radiusMeters: number
• lmn-recent-searches
  • ["서울역", "강남역", "인천공항"]
• lmn-favorites
  • [{"name":"집","lat":...,"lon":...}, {"name":"회사","lat":...,"lon":...}]

==============================================================================

상세 명세 부록 D. 상태 전이 (State Flow)

D-1. 초기 상태

• S0: READY

D-2. 위치 찾기

• S0 -> S1(LOCATING) -> S2(LOCATED) 또는 E1(LOCATION_DENIED)

D-3. 목적지 검색

• S0/S2 -> S3(SEARCHING) -> S4(DESTINATION_SET) 또는 E2(NO_RESULT) 또는 E3(API_ERROR)

D-4. 주변 시설 조회

• S2 -> S5(NEARBY_LOADING) -> S6(NEARBY_READY) 또는 E3(API_ERROR)

D-5. 길찾기

• 조건: currentPosition && destination 존재 시에만 실행
• 실패 상태: E4(PREREQUISITE_MISSING)

==============================================================================

상세 명세 부록 E. 에러 코드 표준

코드	에러 타입	원인	사용자 메시지
LMN-001	LOCATION_PERMISSION_DENIED	위치 권한 거부	위치 권한을 허용하면 내 위치 기반 기능을 사용할 수 있습니다.
LMN-002	LOCATION_TIMEOUT	GPS 응답 지연	위치 확인이 지연되고 있습니다. 다시 시도해 주세요.
LMN-003	DESTINATION_EMPTY	검색어 미입력	목적지를 입력해 주세요.
LMN-004	GEOCODE_NO_RESULT	검색 결과 없음	검색 결과가 없습니다. 다른 키워드를 입력해 주세요.
LMN-005	EXTERNAL_API_FAILURE	외부 API 장애/차단/과다요청	일시적으로 조회가 어렵습니다. 잠시 후 다시 시도해 주세요.
LMN-006	ROUTE_PRECONDITION_FAIL	출발/도착 좌표 미확보	내 위치와 목적지를 먼저 설정해 주세요.

==============================================================================

상세 명세 부록 F. 보안/운영 정책 상세

F-1. 입력 정책:

* 검색어 최대 길이: 80자
* 허용 문자: 일반 텍스트 + 숫자 + 공백 + 기본 구두점
* 스크립트 삽입 패턴 발견 시 입력 무효 처리

F-2. 요청 제어 정책 (MVP 권장):

* 목적지 검색: 700ms 디바운스
* 주변 시설 조회: 동일 위치 10초 내 재호출 차단
* 버튼 중복 클릭: 처리 중 비활성화

F-3. 장애 대응:

* 외부 API 5xx 또는 timeout 발생 시 최대 1회 재시도
* 재시도 실패 시 fallback 메시지 + 수동 재시도 버튼 노출

F-4. 향후 서버 도입 시:

* API Key는 서버 비공개 저장
* 클라이언트는 프록시 엔드포인트만 호출
* 로그에 정밀 좌표 전체 저장 금지(소수점 절삭/익명화)

==============================================================================

상세 명세 부록 G. 테스트 시나리오 (상세)

G-1. 정상 흐름:

1. 내 위치 찾기 클릭
2. 목적지 "서울역" 입력 후 검색
3. 길찾기 열기 클릭
4. 기대결과: 외부 경로 탭 열림

G-2. 위치 거부 흐름:

1. 위치 권한 거부
2. 목적지만 검색
3. 기대결과: 검색은 가능, 길찾기는 선행 조건 메시지 출력

G-3. API 오류 흐름:

1. 네트워크 차단 또는 응답 timeout 유도
2. 주변 시설 찾기 실행
3. 기대결과: 앱 다운 없이 실패 메시지 출력

G-4. 반복 클릭 흐름:

1. 주변 시설 버튼 연속 5회 클릭
2. 기대결과: 중복 요청 제한, UI 멈춤 없음

==============================================================================

상세 명세 부록 H. 릴리스 기준 (Definition of Done)

MVP 릴리스 조건:

핵심 기능 FR-01~FR-05 전부 동작
주요 에러 코드 LMN-001~LMN-006 처리
모바일 360px 환경에서 기능 사용 가능
Chrome/Edge 최신 버전 수동 테스트 통과
README 실행 방법만으로 팀원이 재현 가능

1. 핵심 기능 FR-01~FR-05 전부 동작
2. 주요 에러 코드 LMN-001~LMN-006 처리
3. 모바일 360px 환경에서 기능 사용 가능
4. Chrome/Edge 최신 버전 수동 테스트 통과
5. README 실행 방법만으로 팀원이 재현 가능

==============================================================================

상세 명세 부록 I. 작업 분해 (권장 태스크)

태스크 ID	제목	산출물	우선순위
FE-001	지도 기본 렌더링	지도 로드, 기본 중심 좌표 표시	P1
FE-002	위치 권한 처리	성공/실패/timeout UI 분기	P1
FE-003	목적지 검색	검색 API 연동, 마커 표시	P1
FE-004	주변 시설 조회	Overpass 조회, 정렬, 목록 렌더링	P2
FE-005	길찾기 연동	URL 생성, 새 탭 연결	P1
FE-006	예외/상태 메시지 체계화	코드별 사용자 메시지 표준화	P2
FE-007	모바일 UI 개선	360px 기준 레이아웃 검증	P3

==============================================================================

상세 명세 부록 J. 향후 확장 아키텍처 (요약)

J-1. 현재:

Browser -> External APIs 직접 호출

J-2. 확장형:

Browser -> Backend Proxy -> External APIs

장점:
- API 키 보호
- 캐시/레이트리밋 중앙 통제
- 에러 모니터링 일원화

• Browser -> External APIs 직접 호출

J-2. 확장형

• Browser -> Backend Proxy -> External APIs
• 장점
  • API 키 보호
  • 캐시/레이트리밋 중앙 통제
  • 에러 모니터링 일원화

==============================================================================