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

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

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

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

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

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

기능 정리

핵심 기능 :

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

부가 기능 :

검색 결과 목록/거리 정렬
모바일/PC 반응형 화면
빠른 도움말 및 사용 안내
한국어 우선 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 | 편의점

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

상태 표시 체계 (State & Message System) | 상태 | 아이콘 | 배경색 | 예시 메시지 | |------|--------|--------|-----------------------------------| | 처리 중 | ⏳ | #FFF3E0 | 검색 중입니다... | | 성공 | ✓ | #E8F5E9 | 목적지를 찾았습니다. | | 경고 | ⚠️ | #FFF9C4 | 위치 권한이 필요합니다. | | 에러 | ✗ | #FFEBEE | 요청이 실패했습니다. 다시 시도해 주세요. |
반응형 레이아웃 (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 실패 시 앱 자체는 중단되지 않아야 함
각 기능은 독립적으로 실패/복구 가능해야 함

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

기술 설계

프론트엔드

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

외부 데이터 소스

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

데이터 저장

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

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

보안

입력 검증

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

요청 제어

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

개인정보 보호

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

운영 확장 시 필수 항목

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

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

사용자 예상 시나리오

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

성공 시나리오 완료 기준

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

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

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

문서화 상태

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

구현 상태

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

즉시 착수 우선순위

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

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

개발 일정 (제안)

1주차

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

2주차

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

3주차

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

4주차

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

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

테스트 체크리스트

기능 테스트

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

호환성 테스트

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

안정성 테스트

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

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

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

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

Python: python -m http.server 5500

Node.js: npx serve .

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

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

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

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

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

다음 버전 목표 (v0.3)

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

장기 목표 (v1.0)

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

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

상세 명세 부록 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 실행 방법만으로 팀원이 재현 가능

핵심 기능 FR-01~FR-05 전부 동작
주요 에러 코드 LMN-001~LMN-006 처리
모바일 360px 환경에서 기능 사용 가능
Chrome/Edge 최신 버전 수동 테스트 통과
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 키 보호
- 캐시/레이트리밋 중앙 통제
- 에러 모니터링 일원화

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

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
README.md		README.md
desktop-main.html		desktop-main.html
index.html		index.html
mobile-main.html		mobile-main.html
mobile-profile.html		mobile-profile.html
mobile-results.html		mobile-results.html
mobile-saved.html		mobile-saved.html
mobile-search.html		mobile-search.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

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

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

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

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages