coastdigitalgroup/coastai-skills

매장 찾기 시스템 (Store Locator System)

목적

매장 찾기 시스템은 물리적 위치를 발견하는 인터페이스(지점 찾기, 소매점 찾기, 딜러 네트워크, 의료 클리닉 찾기 등)를 설계하기 위한 방법론을 제공합니다. 이 시스템은 디지털 검색과 물리적 목적지를 연결하는 데 필요한 공간 구성, 반응형 적응, 상호 작용 동기화, 접근성 가드레일을 정의합니다. 사용자가 인지적 과부하, 레이아웃 불안정성, 접근성 차단 없이 주변 위치를 찾고, 매장 세부 정보를 평가하며, 길을 찾을 수 있도록 보장합니다.

사용 사례

• 소매 및 딜러 네트워크: 고객을 실제 매장, 파트너 소매점, 공인 서비스 센터로 안내합니다.
• 의료 기관 및 클리닉: 환자가 근처 응급 진료소, 병원, 전문 의료 사무소를 찾도록 돕습니다.
• 금융 기관: ATM 네트워크와 특정 서비스(예: 드라이브스루, 공증인)가 가능한 지점 위치를 표시합니다.
• 레스토랑 및 식품 체인: 고객이 근처 매장을 찾고, 실시간 영업 상태를 확인하며, 픽업/배달 주문을 시작하도록 지원합니다.

사용하지 말아야 할 경우

• 단일 지점 비즈니스: 회사에 물리적 사무실이 하나 또는 두 개만 있는 경우 전체 매장 찾기 인터페이스는 과합니다. 정적 지도가 포함된 간단한 연락처 페이지면 충분합니다(site-navigation-system 또는 연락처 페이지 가이드라인 참조).
• 순수 디지털/전자상거래 브랜드: 물리적 존재나 물리적 픽업 지점이 없는 비즈니스.
• 동적 물류 및 경로: 고급 승차 공유 또는 실시간 배송 추적 애플리케이션은 지속적인 GPS 추적과 동적 경로 지정이 필요하며, 이는 전문 GIS/실시간 운송 시스템에 속합니다.

입력

1. 위치 메타데이터 인벤토리: 좌표 세트(위도/경도), 실제 주소, 연락처 정보(전화, 이메일), 운영 시간, 특정 위치 기능 또는 서비스(패싯).
2. 사용자 위치 신호: 지리적 위치 API 사용 가능 여부, 사용자가 입력한 우편 번호/도시/주 텍스트 입력.
3. 지도 플랫폼 기능: 기본 지도 제공업체(예: Google Maps API, Mapbox GL JS, Leaflet)의 제약 사항 및 사용자 정의 스타일링 매개변수.
4. 사용자 주요 목표: 사용자가 주로 즉시 방문(길 안내 및 시간 필요), 위치에 연락(전화 필요), 또는 재고 확인(인벤토리 연결 필요)을 원하는지 여부.

출력

1. 공간 레이아웃 청사진: 반응형 공간 레이아웃 사양(데스크톱 분할 창 비율 대 모바일 누적 탭 패널).
2. 구성 요소 사양: 위치 카드, 검색/필터 헤더, 지도 마커의 상세 설계.
3. 상호 작용 및 상태 맵: 마커 클릭 동기화, 호버 상태, 목록 로딩 표시기, 카드/마커 상관 관계에 대한 정의된 동작.
4. 접근성 랜드마크 및 키보드 맵: 세부 정보 보기에 대한 포커스 트랩 메커니즘, 스크린 리더 aria-live 알림, 비시각적 지도 탐색 경로를 정의합니다.

워크플로우

1. 공간 구성 설정

지도와 위치 목록 간의 공간 관계를 설계합니다.

• 데스크톱 레이아웃 (분할 창): 분할 화면 디자인을 사용합니다.
  • 사이드바 창 (너비 35%~40%): LTR 언어의 경우 왼쪽에 배치하여 읽기 계층 구조의 시작점으로 설정합니다. 메인 페이지와 독립적으로 스크롤되어 검색 입력과 위치 목록에 항상 접근 가능해야 합니다.
  • 지도 창 (너비 60%~65%): 오른쪽에 고정된 영구 요소로 설정합니다.
• 모바일 레이아웃 (전환 가능한 탭): 좁은 뷰포트에서는 지도와 목록을 나란히 배치할 수 없으므로 화면 상단 또는 하단에 토글 바를 구현합니다.
  • "목록 보기" 탭: 검색 입력과 세로 카드 목록을 표시합니다. 기본 탭으로 권장됩니다.
  • "지도 보기" 탭: 전체 화면 지도를 표시합니다.
  • 액션 레이어: 부동 컨트롤(예: "이 영역 검색" 버튼 또는 위치 핀)이 탐색을 가리지 않고 지도 위에 편안하게 위치하도록 합니다.

2. 위치 카드 구성 요소 정의

위치 카드는 주요 정보 단위입니다. 인지적 스캔 우선순위에 따라 요소를 정렬합니다.

+-------------------------------------------------------------+
|  [카테고리 태그]                              [거리: 0.8마일] |
|  **위치 제목 / 지점 이름**                                |
|  [별점 / 리뷰 (선택 사항)]                                |
|                                                             |
|  123 물리적 거리 주소, 시, 주 우편번호                      |
|  상태 표시기: [영업 중 / 영업 종료] (오후 8:00에 마감)      |
|                                                             |
|  [버튼: 길찾기]     [버튼: 전화]    [링크: 상세 정보]       |
+-------------------------------------------------------------+

• 1차 계층: 위치 이름과 검색 중심으로부터의 거리. 거리는 실시간으로 계산되어야 하며 매우 잘 보여야 합니다(오른쪽 상단).
• 2차 계층: 거리 주소와 실시간 영업/폐업 상태(색상 코드와 텍스트를 함께 사용, 예: 영업 중은 녹색, 폐업은 빨간색).
• 3차 계층: 터치 친화적인 CTA 버튼(예: "길찾기", "전화", "상세 정보 보기")으로서의 기본 작업.

3. 검색 및 패싯 필터링 설계

사이드바 헤더 섹션에 매우 직관적인 쿼리 및 필터링 도구를 제공합니다.

• 검색 입력: 우편 번호, 도시 이름, 거리 주소를 지원하는 결합 입력으로, 자동 완성 메뉴가 포함됩니다.
• 내 위치 트리거: 표준 "십자선" 아이콘으로 표시되는 눈에 띄고 접근 가능한 지리적 위치 버튼으로, 스크린 리더에 적절하게 레이블이 지정됩니다(aria-label="내 현재 위치 근처 매장 찾기").
• 반경 필터: 사용자가 검색 반경을 조정할 수 있는 드롭다운(예: 5, 10, 25, 50마일).
• 패싯 드롭다운: 매장별 기능에 대한 빠른 필터(예: "드라이브스루", "휠체어 접근 가능", "24시간"). 필터 버튼에 배지를 사용하여 선택된 개수를 표시합니다.

4. 양방향 상호 작용 동기화 구현

지도 마커와 목록 카드는 통합 시스템으로 동작해야 합니다. 명확한 대화형 관계를 설정합니다.

• 목록 카드 호버/포커스 -> 지도 마커: 목록 카드를 호버하거나 포커스하면 해당 지도 마커의 시각적 상태가 변경되어야 합니다(예: 확대, 색상 변경, z-index 조정으로 전면으로 가져오기).
• 지도 마커 클릭 -> 목록 카드: 지도 마커를 클릭하면 다음이 수행되어야 합니다.
  • 사이드바 목록을 자동으로 스크롤하여 해당 카드를 보이게 합니다.
  • 짧은 전환 애니메이션(예: 미묘한 배경 펄스)으로 카드를 강조 표시합니다.
  • 마커 위에 매장 이름, 거리, "길찾기" 링크가 포함된 지도 "정보 창"(팝업)을 엽니다.
• 이 영역 검색 (지도 드래그): 사용자가 초기 검색 중심에서 지도를 이동하거나 확대/축소할 때에만 지도 창 상단 중앙에 표시되는 "이 영역 검색" 부동 버튼을 제공합니다.

5. 모바일 터치 및 지도 적응 설정

모바일 장치에서의 상호 작용을 관리하여 불편을 방지합니다.

• 스크롤 하이재킹 방지: 기본적으로 모바일 지도에서 제스처 기반 확대/축소를 비활성화합니다(이동 또는 확대/축소하려면 두 손가락 드래그 필요). 이렇게 하면 사용자가 페이지를 아래로 스크롤하려고 할 때 지도에 "갇히는" 것을 방지할 수 있습니다.
• 부동 컨트롤: 지도 오른쪽 하단에 부동 확대/축소(+ / -) 컨트롤과 지리적 위치 버튼을 배치하고, 대비가 높은 그림자와 최소 터치 대상 44x44px로 스타일링합니다.
• 카드 캐러셀 오버레이: 모바일 지도 보기에서 뷰포트 하단에 활성 위치 또는 가장 가까운 위치 하나를 보여주는 스와이프 가능한 가로 카드 캐러셀을 제공하여 지도 탐색과 세부 정보를 통합합니다.

결정 규칙

• "기본 검색" 규칙: 검색어나 지리적 위치 권한 없이 매장 찾기 페이지가 로드될 때:
  • 빈 지도를 표시하지 않습니다.
  • IP 지리적 위치를 기반으로 가장 가까운 위치를 기본으로 표시하거나, 모든 위치를 알파벳순/우선순위별로 정렬하여 표시합니다.
• "결과 없음" 복구 규칙: 사용자가 위치가 없는 지역을 검색하는 경우:
  • 가장 가까운 사용 가능한 위치를 표시하도록 지도를 축소합니다.
  • 사이드바 목록에 도움이 되는 메시지를 표시합니다(예: "[검색어]에서 25마일 이내에 위치를 찾을 수 없습니다. 가장 가까운 위치는 다음과 같습니다:").
  • "모든 위치 보기" 링크를 제공합니다.
• 팝업 대 세부 정보 패널 규칙:
  • 위치에 메타데이터가 최소인 경우(주소 및 영업 시간만), 모든 정보를 지도 마커의 정보 창 팝업 안에 표시합니다.
  • 위치에 광범위한 메타데이터(재고, 팀 목록, 사진)가 있는 경우, "상세 정보 보기"를 클릭하면 사이드바 내에서 전체 깊이의 세부 정보 패널이 슬라이드되어 나와야 하며, 키보드 포커스를 그곳에 가두고 명확한 "목록으로 돌아가기" 버튼을 제공해야 합니다.

제약 사항

• 접근성 (키보드 내비게이션):
  • 키보드 사용자는 지도를 직접 사용하지 않고도 전체 검색 흐름과 위치 목록을 탐색할 수 있어야 합니다.
  • 지도 마커는 키보드로 포커스 가능해야 하거나(tabindex="0"), 접근 가능한 목록 대안으로 표현되어야 합니다.
  • 검색 결과가 업데이트되면 aria-live="polite" 요소(예: "시애틀, WA 근처에서 3개 위치를 찾았습니다")를 사용하여 스크린 리더에 변경 사항을 알립니다.
• 터치 대상 크기: 모든 버튼, 지도 마커, 필터 컨트롤은 WCAG 2.2 SC 2.5.8(최소 24x24px, 주변 간격 포함)을 충족해야 하며, 카드의 기본 작업 트리거와 부동 컨트롤은 엄지손가락 편의를 위해 44x44px로 크기를 조정해야 합니다.
• 시각적 대비: 고대비 지도가 선호됩니다. 표준 마커와 활성 마커 레이블은 지도 배경에 대해 최소 3:1의 대비 비율을 가져야 합니다. 카드 및 팝업 내부의 텍스트는 WCAG AA(4.5:1)를 충족해야 합니다.
• 레이아웃 이동 방지: 활성 검색 중 사이드바에 스켈레톤 카드를 사용하여 로딩 상태를 위한 세로/가로 공간을 확보하여 누적 레이아웃 이동(CLS)을 방지합니다.

일반적인 실패 패턴

• 모바일 스크롤 트랩: 사용자가 모바일 화면에서 스크롤할 때 지도만 이동/확대되어 지도 구성 요소를 지나 스크롤할 수 없어 페이지에 갇히게 됩니다.
• 깨진 양방향 동기화: 지도 마커를 클릭하면 팝업이 열리지만 사이드바의 일치하는 카드로 스크롤되거나 강조 표시되지 않아 사용자가 수동으로 이름을 일치시켜야 합니다.
• "블라인드 맵" (키보드 배제): 지도 마커를 포커스 불가능한 SVG 모양 또는 캔버스 요소로 구현하여 스크린 리더 및 키보드 전용 사용자가 물리적 위치에 완전히 접근할 수 없게 만듭니다.
• 쿼리 없음 빈 막다른 골목: 초기 페이지 로드 시 완전히 빈 화면과 조용한 지도를 표시하여 사용자가 먼저 검색해야 한다고 추측하도록 요구합니다.
• 느린 지도 드래깅: 모든 작은 지도 드래그 시 실시간으로 수백 개의 마커를 가져오고 렌더링하려고 시도하여 인터페이스가 멈춥니다. 지도 경계 변경에 디바운스(250~400ms)를 구현하고 가까운 마커를 클러스터링합니다.

검증 기준

• 데스크톱(분할 화면 사이드바)과 모바일(전환 가능한 목록/지도 탭) 모두에 대한 공간 레이아웃이 정의되었습니다.
• 양방향 동기화가 지정되었습니다(마커 클릭 시 카드 강조/스크롤; 카드 호버/포커스 시 마커 강조).
• 모바일 제스처 확대/축소가 기본적으로 비활성화되어(두 손가락 스크롤 필요) 모바일 스크롤 하이재킹을 방지합니다.
• 검색 쿼리 업데이트 시 레이아웃 이동(CLS)을 방지하기 위해 로딩 상태(스켈레톤)가 설계되었습니다.
• 접근 가능한 대안이 정의되었습니다: 키보드 사용자는 마우스로 지도 캔버스 항목을 호버할 필요 없이 모든 위치를 탐색하고, 세부 정보를 읽고, 길 안내를 받을 수 있습니다.
• 검색 결과 업데이트 시 스크린 리더가 설명적이고 정중한 aria-live 알림을 수신합니다.
• 모든 대화형 카드 요소, 마커, 확대/축소 버튼의 터치 대상이 최소 WCAG 2.2 24x24px를 충족합니다(주요 CTA의 경우 44x44px 선호).
• 위치 카드 및 지도 팝업 내부의 텍스트 대비가 WCAG AA(4.5:1)를 충족합니다.
• 결과 없음 검색 및 위치 권한 거부에 대한 명확한 대체 흐름이 설계되었습니다.