지역화폐 가맹점을 지도로 쉽게! Softr로 웹서비스 만들기 도전기

https://www.xn--hq1bj85a5xcba399jnud.info/

소개

시도하고자 했던 것과 그 이유를 알려주세요.

지역화폐를 사용하면 여행 경비나 생활비를 절약할 수 있다는 사실, 알고 계셨나요? 😎 하지만 막상 어디서 쓸 수 있는지 확인하는 건 쉽지 않았어요. 대부분 시·군 홈페이지에 엑셀이나 PDF로 정리된 리스트만 있고, 직관적인 지도 기반 검색은 거의 없더라고요.

그래서! 지역화폐 가맹점을 지도로 보여주는 웹 서비스를 만들어보기로 했습니다 💡

그런데 그냥 서비스만 만들기는 동기부여가 안되니까 공모전도 함께 참여해보려고 합니다.

https://www.data.go.kr/suc/preliminaryRound.do

공모전이라면 누구나 공감할 비전이 필요하니까 이 서비스의 목표는

"지역화폐 사용촉진을 통한 지역사회 경제활성화!!"


진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

Gpt와의 대화를 통해 서비스 기획을 하고 기획한 대화내용을 기반으로 서비스 개발에 필요한 툴과 방법을 제안받았습니다.

🚀 실행 가능한 MVP 구축 계획 (노코드 기반)
📌 1단계: 적합한 노코드 도구 선정 (추천)
사용자님의 상황에 가장 잘 맞는 도구는 다음과 같습니다.

Glide (https://www.glideapps.com/):
Google Sheets와 쉽게 연동 가능, 모바일 친화적 인터페이스, 지도 기능이 기본 제공됨. 가장 낮은 학습 곡선을 보이며, 초기 MVP 구축에 탁월.

Softr (https://www.softr.io/):
Airtable과 쉽게 연동 가능, 사용하기 쉬운 UI, 반응형 모바일 웹사이트 구축에 최적화.

👉 추천 도구: Glide를 가장 먼저 추천 (쉬운 사용성, 모바일 친화성, 지도 기능 내장)

📌 2단계: MVP 제작 흐름 정의
구축 단계는 크게 3가지로 나눌 수 있습니다.

① 데이터 수집
공공데이터포털(https://www.data.go.kr/)에서 전라북도 지역화폐 가맹점 데이터를 API로 가져오기.

JSON 데이터를 Google Sheets로 자동 연결 설정(Zapier 또는 Make.com 활용 가능).

② 지도 시각화 및 검색
Glide에서 Google Sheets 연동 후, 데이터의 주소 정보를 자동으로 지도에 표시.

Glide의 내장된 검색 기능을 활용하여 사용자 편의성 제공.

③ 리뷰 크롤링 및 AI 요약
Bardeen.ai(https://www.bardeen.ai/): 코딩 없이도 웹사이트 리뷰를 간단히 크롤링 가능한 노코드 도구.

Zapier(https://zapier.com/) 또는 Make(https://www.make.com/): 자동화 도구로 Bardeen을 Glide와 연결.

ChatGPT나 OpenAI API를 활용하여 리뷰 요약 기능 자동화.

📌 3단계: 필요한 리소스 및 예시 템플릿
Glide 공식 지도 기반 앱 템플릿:
https://www.glideapps.com/templates

Google Sheets 데이터 자동 업데이트 방법 (API 연동 가이드):
https://zapier.com/apps/google-sheets/integrations

Bardeen 웹 크롤링 튜토리얼:
https://www.bardeen.ai/tutorials/web-scraper

📌 4단계: 액션 아이템 체크리스트 ✅
🎯 1주차
 공공데이터 포털에서 전라북도 지역화폐 가맹점 API 확보 및 데이터 형식(JSON) 확인.

 Google Sheets에 API 데이터를 자동 연동(Zapier 또는 Make 사용).

🎯 2주차
 Glide에 Google Sheets 연결하여 지도 기반 가맹점 표시 기능 구현.

 Glide에서 검색 및 필터링 기능 구현 및 간단한 테스트 진행.

🎯 3주차
 Bardeen으로 네이버, 카카오, 구글의 리뷰 데이터 수집 간단 테스트.

 ChatGPT API를 이용한 리뷰 AI 요약 기능 연동(Zapier로 자동화).

🎯 4주차
 서비스 전체 MVP 프로토타입 통합 완성.

 실제 사용자(친구 또는 지인 대상)를 통해 피드백 수집 및 수정.
흰색 배경에 한국어 텍스트
아주 중요한 포인트를 짚으셨습니다.
2만 개 이상의 데이터를 다루기 위해서는 단순 노코드 툴을 넘어서 약간의 “바이브코딩”이나 하이브리드 구조”를 써야 현실적으로 운영이 가능합니다.

✅ 결론부터 말씀드리면:
가능합니다.
단, "모든 데이터를 한 번에 불러오는 구조"는 피하고,
**"필터링, 검색 시점에 필요한 데이터만 호출하는 방식"**으로 설계해야 합니다.

🔧 방법 1. Airtable + Softr + Pagination or Filter 구조
Airtable은 최대 100,000개 행까지 저장 가능 (기본 플랜도 5,000행, 상위 플랜으로 확장 가능)

Softr와 연결하여 카테고리, 지역, 키워드로 필터링한 결과만 보여주기로 해결

Softr는 필터링/검색 시 필요한 부분만 노출하는 방식이라 퍼포먼스 저하가 덜함

👉 “전주 음식점”, “군산 숙박업소”처럼 조건을 좁히는 방식으로 페이지별 설계

🔧 방법 2. Glide + Google Sheets + Query API 구조
Glide 자체는 수천~수만 행에 부하가 큼 → 대신 Google Sheets에서 QUERY 함수 또는 Apps Script로 필터링

Glide 앱은 사용자가 입력한 검색 조건에 따라 Google Sheets의 특정 시트(결과 시트)만 불러오도록 설정

👉 예: 전주에서 “맛집”을 검색하면 → 시트에서 해당 조건에 맞는 데이터만 표시 → Glide에는 몇백 개만 전달됨

🔧 방법 3. Xano + Frontend Builder (Noloco, WeWeb, Bubble 등)
Xano는 백엔드 전용 노코드 도구로 10만 건 이상 대용량 데이터도 안정적으로 처리 가능

프론트엔드는 WeWeb이나 Bubble로 설계

검색/필터 시, Xano API가 조건에 맞는 50~100개만 추출해서 전달

👉 가장 확장성 높은 구조
👉 향후 상용화 대비에 적합 (사용자 수 늘어나도 부하 적음)

🔧 방법 4. 바이브코딩: Firebase + React/Next + Leaflet/Mapbox
Firebase Firestore는 수만 건 데이터를 실시간으로 검색/필터 가능

프론트는 Next.js, React + Leaflet 또는 Mapbox

API 호출 시 쿼리 조건만 넣고 서버는 제한된 수의 데이터만 반환

👉 중급 이상의 웹 구조지만, 구글의 무료 티어 내에서 상당히 운영 가능

📌 요약 – 2만 건 이상의 데이터 활용 전략 비교
방법	최대 처리 데이터	난이도	장점	단점
Airtable + Softr	수만 건 (상위 플랜 시)	쉬움	직관적 필터링/검색	요금제 한계
Glide + Google Sheets	몇천 건까지 안정	쉬움~중간	구현 속도 빠름	퍼포먼스 제한
Xano + WeWeb	10만 건 이상	중간	확장성 탁월	구조 설계 필요
Firebase + Next.js	10만 건 이상	중~고급	완전한 자유도	개발 지식 필요

🧩 추천 전략 (지금 상황 기준)
MVP 시기: Glide or Softr 기반으로 전라북도 내 특정 업종만 필터링하여 500~2,000건 내외로 압축

1차 확장 시기: Airtable 또는 Google Sheets + 검색조건 필터링 방식 도입

중장기 확장: Xano 기반 API 백엔드 + 프론트엔드 선택적 연결


첫 번째 방법이 가장 단순해보여서 첫 번째 방법에 대한 설명을 요청하였습니다.

흰색 배경에 한국의 글쓰기 사진
🚀 1차 MVP 실행 계획: Airtable + Softr 기반 지도 서비스
📌 목표
전라북도 지역화폐 가맹점 중 일부 업종/지역 필터링 →
Airtable에 저장 → Softr를 통해 지도 기반 웹서비스 제공

✅ 1단계: 데이터 수집 및 전처리 (1일 차)
⏳ 예상 시간: 2~3시간

🛠 할 일
공공데이터포털에서 "지역화폐 가맹점 현황" API or CSV 다운로드

https://www.data.go.kr 접속

"지역사랑상품권 가맹점 정보" 검색

전라북도 필터링 (예: 전주, 군산 등)

필요 항목만 정리

상호명, 업종, 주소, 위도/경도, 전화번호 등

데이터를 CSV 또는 Excel 파일로 저장

✅ 2단계: Airtable 테이블 구축 (1~2일 차)
⏳ 예상 시간: 2시간

🛠 할 일
Airtable 계정 생성 (https://airtable.com)

“지역화폐_가맹점” 이름의 베이스 생성

앞서 정리한 CSV 파일 업로드

필드 정리:

텍스트: 상호명, 업종, 주소

번호: 전화번호

위치: 위도, 경도 (혹은 Address를 기반으로 자동 지도 표시 가능)

✅ 참고: Airtable은 무료 플랜에서도 최대 1,000개 행, 5개의 테이블을 제공

✅ 3단계: Softr로 지도 서비스 만들기 (3~4일 차)
⏳ 예상 시간: 4시간

🛠 할 일
Softr 계정 생성 (https://www.softr.io)

“List + Map” 템플릿 선택 (지도 포함된 템플릿)

Airtable과 Softr 연동

API Key 입력 → 테이블 연결

리스트 항목 커스터마이징

상호명, 주소, 업종 표시

지도 위에 위치 표시

주소 또는 위도/경도를 기반으로 마커 생성

검색바와 필터 추가

“업종”이나 “지역명”으로 필터링 기능 구현

✅ 4단계: 리뷰 요약 기능 설계 (5~6일 차, 연동은 MVP 이후 고려 가능)
⏳ 예상 시간: MVP 이후 선택 사항

🛠 초기 설계
Bardeen.ai 또는 Browse.ai로 네이버/카카오 리뷰 자동 수집 테스트

수집된 리뷰를 Google Sheet에 저장

OpenAI API를 사용하여 요약 자동화 (Zapier, Make 연동 가능)

현재는 “기존 플랫폼 리뷰 요약 기능”은 후속 단계로 기획만 하고 MVP에는 생략 가능

✅ 5단계: 퍼블리싱 및 테스트 (7일 차)
⏳ 예상 시간: 2시간

🛠 할 일
Softr에서 웹사이트 도메인 생성 (예: 지역화폐지도.softr.app)

모바일에서 최적화 확인

지인들에게 테스트 요청 및 피드백 수집

테스트 마친 후 간단한 설문 링크 배포

📝 액션 체크리스트 요약
단계	항목	완료 여부
1단계	공공데이터 다운로드 및 정리	☐
2단계	Airtable 테이블 생성 및 데이터 업로드	☐
3단계	Softr로 리스트/지도 앱 생성	☐
4단계	리뷰 요약 자동화 기능 설계 (후속 단계)	☐
5단계	MVP 테스트 및 피드백 수집	☐

1단계 : 공공 데이터 포탈에서 포항의 지역화폐 가맹점 CSV 파일을 받았습니다.

2단계 : 1단계에서 받은 데이터를 Airtable에 업로드 했습니다.

한국어 화면의 스크린 샷

3단계 : Softr라는 노코드 툴을 활용해 서비스 구축을 시작했습니다.

메시지가있는 화면 스크린 샷

softr는 템플릿도 있고, 프롬프트 기반으로도 서비스 구축을 할 수 있는데 200자가 제한이라 많은 내용을 담을 수는 없습니다.

gpt에게 프롬프트를 요청했고, 영어 프롬프트가 나을 것 같아 영어 프롬프트를 요청했습니다.

A mobile-friendly map app to find local merchants accepting regional currency. Includes search, filters by category and location, and Airtable integration for data.

서비스 ui가 완성되었고 gpt가 시키는대로 softr와 airtable을 연동하여 데이터를 불러오는 것에 성공했습니다. (사실 UI가 마음에 들진 않지만 일단 해보기로 합니다..)

전자 상거래 웹 사이트의 스크린 샷

검색창에 키워드를 입력하면 키워드가 포함된 데이터가 표에 불러와집니다.

삼성 갤럭시 S9 삼성 갤럭시 S9 삼성 갤럭시 S9 SAM

페이지의 하단에 지도가 들어갈 페이지를 만들어 주었는데 Google map api만 사용할 수 있다는 문제점이 있습니다.

위치가 다른지도

Gpt와의 대화와 직접 알아본 바로는 지도 API는 주소->좌표, 좌표->주소 로 변환하는 기능을 지원하고 좌표값을 알아야 지도에 위치를 표시할 수 있는 것 같습니다.

그런데 문제는 Softr 에서는 좌표로 변환해주는 API기능을 지원하지 않는다네요.. ㅎㅎ

Gpt는 Make에 Airtable, 좌표변환 API를 사용해서 데이터셋에 위도와 경도를 포함시키는 방법을 추천해줍니다.

🧩 추가 팁: 자동 좌표 변환을 하고 싶다면?
Airtable + Make.com 조합으로 주소 → 위도/경도 자동 변환 가능

주소를 넣으면 Google Geocoding API로 위경도 필드 자동 생성

이후 Softr에서는 위경도 필드를 지도에 바로 활용

필요하시면 자동 위경도 변환 흐름도 도와드릴 수 있어요.

그런데 Google Geocoding API는 무료 한도가 10,000번인데 비해 데이터는 훨씬 많아서 너무 부족합니다. 반면 Kakao map API는 100,000번, 네이버 지도는 300,000번이고 어차피 국내 사용자를 대상으로 서비스 할 것이기 때문에 더 유리하지 않을까? 하는 생각이 들어서 Softr를 이용한 서비스 개발은 접어두고 lovable, V0, stitch 등으로 ui 부터 다시 개발해보려고 합니다.

결과와 배운 점

데이터도 다 있고 그냥 지도에 띄우면 되는거 아닌가?! 했지만 말처럼 단순하지 않네요 ㅎㅎ

Softr는 템플릿도 제공하고 있어서 마음에 드는 템플릿과 데이터가 있다면 간단한 서비스 배포는 좋을 것 같습니다.

다음으로는 lovable, V0, stitch 등으로 마음에 드는 ui를 뽑아보고 그 위에 데이터를 연결하는 방법을 찾아보도록 하겠습니다.

도움 받은 글 (옵션)

참고한 지피터스 글이나 외부 사례를 알려주세요.

(내용 입력)

4
1개의 답글

👉 이 게시글도 읽어보세요