지역화폐 가맹점 지도 kakao map api와 Cursor로 만들기

다음은 Lovable, Stitch, v0와 같은 UI 디자인 툴에서 **지역화폐 가맹점 검색 지도 서비스**를 위한 UI 디자인을 요청할 때 사용할 수 있는 명확하고 구체적인 프롬프트입니다:

---

## 📌 **UI 디자인 요청 프롬프트 (한글)**

**프로젝트 목적**
국내 여행자들이 지역화폐를 사용하는 가맹점을 지도에서 쉽게 찾고, 가맹점 정보를 직관적으로 확인할 수 있는 모바일 우선 웹서비스 제작.

**필요한 화면 구성**

1. **메인 화면 (지도 기반)**

   * Naver Map, Google Map과 유사한 레이아웃 (제공된 사진 참고)
   * 전체 화면의 70% 이상을 차지하는 지도 영역
   * 지도 위에 가맹점 위치를 나타내는 직관적이고 깔끔한 마커 디자인 필요
   * 왼쪽 또는 상단에 위치 검색 및 필터 기능 제공

     * 검색 필터: 지역(시·군), 업종(카페, 식당, 숙박 등), 키워드
     * 검색창 입력 즉시 결과 업데이트 및 지도에 표시
   * 사용자가 지도의 마커 클릭 시 해당 가맹점 간략 정보(이름, 업종, 평점 등) 표시 팝업 또는 사이드 패널 디자인
   * 상세정보 클릭 유도를 위한 버튼 제공 ("상세 보기")

2. **가맹점 상세 정보 화면 (별도 화면 또는 팝업)**

   * 가맹점의 상세정보 (상호명, 주소, 전화번호, 영업시간, 간단한 소개 등)
   * 외부 리뷰 사이트(네이버, 구글, 카카오)로 이동할 수 있는 버튼 또는 링크 제공
   * 모바일 화면에서도 직관적이고 빠르게 정보를 확인할 수 있는 간결한 레이아웃 필수

**참고할 디자인 예시**

* 제공된 첨부 이미지 (Naver Map, Google Map) 스타일 참고
* 전체적으로 깔끔하고 직관적인 디자인 (색상은 여행 또는 가성비 소비 느낌 강조)

**최종 디자인 활용 계획**

* 디자인을 export 하여 Bubble.io 플랫폼으로 임포트해 개발 예정
* 프론트엔드: Bubble.io, 지도 API: Kakao Maps API, 데이터 출처: 공공데이터포털

**추가 요구사항**

* UI는 모바일 화면에서의 최적화를 반드시 우선 고려할 것
* 불필요한 복잡한 요소 배제, 최소한의 탭과 버튼으로 높은 직관성 유지
* 디자인 Export 시 Bubble.io와 호환 가능한 포맷으로 제공 (SVG, PNG, 컬러코드 등)

---

## 📌 **UI 디자인 요청 프롬프트 (영문 버전 - 필요 시)**

```
Objective:
Design a mobile-first web app for finding local merchants accepting regional currency, providing an intuitive map-based search interface.

Screen Requirements:
1. Main Screen (Map-based):
   - Similar UI layout as Naver Map or Google Map (refer to attached screenshots).
   - Large interactive map (covering at least 70% of the screen).
   - Clear markers indicating merchant locations.
   - Search bar with filters (location, business category, keyword).
   - Clickable map markers showing brief merchant info (name, category, rating), and "View Details" button/link.

2. Merchant Detail Screen:
   - Merchant's detailed info (name, address, phone, hours, description).
   - Links or buttons redirecting to external review pages (Naver, Google, Kakao).

Design Reference:
- Attached screenshots (Naver Map, Google Map) style.
- Clean, intuitive, minimal design focusing on usability.

Implementation Plan:
- UI will be exported and integrated into Bubble.io.
- Frontend: Bubble.io, Map API: Kakao Maps, Data Source: Korea public data portal.

Additional Requirements:
- Mobile-optimized layout must be prioritized.
- Export design assets compatible with Bubble.io (SVG, PNG, color codes).
```

---

이 프롬프트로 명확한 가이드를 제공하면,
UI 디자인 툴에서 원하는 결과를 효율적으로 얻으실 수 있을 것입니다.

추가적인 내용이 필요하면 말씀해주세요!