매물 등록부터 상담 신청까지 — 공인중개사무소 홈페이지를 템플릿으로 만들었습니다

옥정리더스가든 부동산 첫 화면 — 「정직과 신뢰로 보답하는」 슬로건, GTX-C HOT ISSUE 배너, 상담문의 버튼
데모 사이트 첫 화면(leaders-garden-realestate.vercel.app) — 옥정·양주 공인중개사사무소

공인중개사무소를 열거나 이미 운영 중이신 분들께 "홈페이지는 어떻게 하시나요?"라고 여쭤 보면, 아직 없거나 예전에 만들어 둔 뒤 손을 못 댄 경우가 많습니다. 매물은 매일 바뀌는데 사이트는 예전 그대로인 거죠.

안녕하세요, 톱니바꿈입니다. 오늘은 제가 옥정·양주 지역의 리더스가든 부동산용으로 만들고, 다른 중개소에도 그대로 복제해 쓸 수 있게 템플릿으로 정리해 둔 공인중개사무소 홈페이지를 소개합니다. 이 글에는 공개 데모 사이트와 제 작업 문서·AI월드에 실제로 적혀 있는 내용만 옮겼습니다. 가격은 적지 않습니다.

1. 데모로 먼저 열어 보세요

공개 데모 주소는 leaders-garden-realestate.vercel.app입니다. 브라우저 탭 제목은 「리더스가든 부동산 | 옥정·양주 전문 공인중개사사무소」로 나옵니다.

첫 화면에서는 중개소 슬로건과 인사말, 추천 매물 카드, 영업시간·공지, 아래쪽 네이버 지도를 한눈에 볼 수 있게 잡아 두었습니다. 방문객이 전화하기 전에 "어떤 매물이 있고, 어디에 있는지"를 스스로 살펴볼 수 있게 하는 게 목표였습니다.

전체매물 카드 목록 — e편한세상 옥정 리더스가든 매매 매물 3건과 만료임박 표시
매물 목록 화면 — 카드로 가격·면적·등록 기간을 한눈에 봅니다

2. 방문객이 쓰는 기능

사용자 매뉴얼에 정리해 둔 흐름은 대략 이렇게 이어집니다.

  • 매물 검색·필터 — 건물 종류(아파트, 상가, 오피스텔, 빌라 등)와 거래 방식(매매·전세·월세)으로 바로 걸러 보고, 리스트 뷰와 카드 뷰를 바꿀 수 있습니다.
  • 매물 상세 — 사진 슬라이더, 면적·가격·층수·방·욕실 요약 표, 중개사가 적은 입지·학군·입주 가능일 설명을 붙였습니다.
  • 온라인 상담 신청 — 회원가입 없이 성함·연락처·문의 유형·희망 조건을 남기면, EmailJS로 중개사에게 알림이 갑니다.
  • 상담 내역 조회 — 신청할 때 쓴 이름과 휴대폰 번호로 「대기중 / 완료」 상태를 확인할 수 있습니다.
  • 교통·개발 정보 — 양주 옥정 쪽 GTX 등 교통 개발 정보를 별도 탭에서 볼 수 있게 해 두었습니다.

지도는 네이버 지도 API로 사무실 위치와 매물 위치를 붙였고, 배포는 Vercel에 올려 두었습니다.

오시는 길 — 네이버 지도와 주소·전화(단지내상가) 안내 카드
오시는 길 화면 — 지도와 사무실 연락처

🏠 데모 사이트 둘러보기 → 리더스가든 부동산 홈페이지

3. 중개사님이 쓰는 관리자 화면

코딩을 모르셔도 사이트를 고칠 수 있게, 주소 뒤에 /admin을 붙이면 관리자 화면으로 들어갑니다. 운영자 매뉴얼에 적힌 대로 대시보드에서 다룰 수 있는 것은 대략 다음과 같습니다.

  • 메인 비주얼·대표(명함) 이미지
  • 슬로건 문구
  • 평일·토·일·공휴일 영업시간
  • 명절 휴무 같은 특별 공지
  • 매물 등록·수정·추천·사진(최대 10장)
  • 상담 신청 목록과 대기중/완료 처리

아키텍처는 화이트라벨입니다. 프론트는 React(Vite) SPA이고, 백엔드 API 서버 없이 클라이언트가 Supabase(PostgreSQL)에 직접 붙는 서버리스 구조입니다. 관리자가 저장한 상호·영업시간·매물이 곧바로 공개 페이지에 반영됩니다. 통계 화면에서는 지역별 매물 분포, 매물 종류 비율, 월별 상담 유입을 차트로 보여 줍니다.

4. 새 중개소에 복제할 때 — 템플릿 5단계

한 중개소만 쓰는 사이트로 끝내면, 다음 고객이 올 때마다 처음부터 다시 깔아야 합니다. 그래서 프론트와 DB를 각각 템플릿으로 묶어 두었습니다. 제 작업 문서 「톱니바꿈의 홈페이지 주소」에 적어 둔 순서는 이렇습니다.

  1. GitHub에서 Use this template으로 새 저장소 만들기 (원본: ParkJinHee67/leaders-garden-realestate)
  2. 새 Supabase 프로젝트를 만들고 complete_schema.sql을 한 번에 실행하기
  3. Vercel에 새 프로젝트를 만들고 그 GitHub 저장소를 연결하기
  4. Vercel 환경 변수에 새 Supabase URL·Anon Key 넣기
  5. 발급된 주소를 네이버 클라우드에 웹 서비스 URL로 등록하기(지도용)

문서에는 "앞으로 새로운 사이트를 만드실 때는 아래 방법을 사용하시면 10분 안에 세팅이 끝납니다"라고 적어 두었습니다. 세팅이 끝나면 /admin에서 영업시간·이미지·매물만 채우면 됩니다. 업소마다 소스와 DB를 완전히 분리해 두어서, 한곳의 로고·색·메뉴를 고쳐도 다른 사이트에는 영향이 없습니다.

5. 언제 만들었고, 어디에 올려 두었나

매뉴얼 기준 개발 기간은 2026년 5월~6월입니다. 버전 1.0 이후 중개소 관리 기능·동적 푸터·네이버 지도 패치를 반영한 1.1 마이너 업데이트까지 이어졌습니다. 고객사는 옥정 리더스가든 부동산입니다.

같은 샘플을 제 제품 허브에도 올려 두었습니다. AI월드 외주 탭의 「부동산 홈페이지」 카드에는 이렇게 적혀 있습니다.

공인중개사 맞춤형 홈페이지를 합리적인 비용으로 제작해 드립니다. 매물 등록부터 고객 문의까지 한 번에 해결하는 스마트한 부동산 웹사이트를 경험해 보세요.

동문회·소모임 홈페이지 샘플도 같은 외주 탭에 함께 있습니다. 비슷한 사이트가 필요하시면 데모를 보신 뒤 AI월드 아래쪽 문의 창구로 연락해 주시면 됩니다.

데모 · 외주 창구

은퇴 후에도 "현장에서 쓰는 시스템"을 만들고 싶었습니다. 중개사님이 매물을 올리고 상담을 받는 하루 일과가, 홈페이지에서도 그대로 이어지게 만드는 일이었습니다. 데모를 열어 보시고 궁금한 점은 댓글로 남겨 주세요.

함께 읽으면 좋은 글

댓글

댓글 쓰기

이 블로그의 인기 게시물

AI로 인생 업그레이드: 디지털 노마드를 위한 5가지 방법

이미지
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 인기상품보기 AI로 인생 업그레이드: 디지털 노마드를 위한 5가지 방법 🚀 직장생활 속에서 꿈꿔왔던 자유로운 삶,  AI와 함께라면  이제  현실 이 될 수 있습니다! 🚀   상상 만 하던 디지털 노마드의 삶, 더 이상 꿈이 아니에요! 이 글은 단순한 기술 이야기가 아닙니다. 디지털 노마드로 거듭나고 싶은 분들께, 삶을 더 풍요롭게 만들  AI 활용법 을 살짝 소개해드릴게요. 특히 개발자나 IT 종사자라면 놓치기 아쉬운 팁! 업무 효율과 삶의 질을 한층 높여줄  5가지 방법 을 준비했으니, 함께 알아볼까요?   목차 1. AI와 디지털 노마드의 만남 2. AI 코딩 어시스턴트로 생산성 극대화하기 2.1 최신 AI 코딩 도구 살펴보기 2.2 개발 워크플로우 최적화 전략 3. 자동화된 콘텐츠 생성으로 시간 확보하기 3.1 콘텐츠 제작을 위한 AI 도구 3.2 고품질 콘텐츠 유지 전략 4. AI 기반 데이터 분석으로 의사결정 강화하기 5. 언어 장벽 없는 글로벌 생활과 업무 6. AI 개인 비서로 일상 최적화하기 7. AI 도구 비교 분석 8. 자주 묻는 질문 (FAQ) 9. 결론: AI와 함께하는 디지털 노마드 라이프 AI와 디지털 노마드의 만남 디지털 노마드 라이프스타일이 대세로 자리잡은 지금, AI 기술 은 이를 더욱 풍요롭게 만들어주는 강...
자세한 내용 보기

돈의 두 얼굴: 줄어드는 돈, 줄지 않는 돈, 디지털 노마드를 위한 첫걸음

이미지
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 톱니바꿈과 놀자 인기상품보기 돈의 두 얼굴: 줄어드는 돈, 줄지 않는 돈, 디지털 노마드를 위한 첫걸음 디지털 노마드를 꿈꾸는 친구들!   매일 노동으로 시간을 갈아 넣으며 점점 줄어드는 통장을 보고 어떤 생각을 하고 있나요?  나도 그랬던 시절이 있었지만, 이제는 다르게 살아가고 있습니다. 이 글은 단순한 재테크 팁이 아닙니다. 디지털 노마드로 세상 어디서든 자유롭게 일하며 돈이 나를 따라오게 만드는 진짜 방법을 알려드리겠습니다.  돈의 본질을 깨닫고, 우리 함께 진정한 자유를 향해 한 걸음 나아가는 계기가 되기를 바랍니다! 목차 1. 돈의 두 얼굴: 기본 개념 이해하기 2. 줄어드는 돈: 소비와 지출의 함정 2.1 소비성 지출의 특징 2.2 줄어드는 돈의 위험성 3. 줄지 않는 돈: 자산과 투자의 힘 3.1 자산의 종류와 특성 3.2 수동적 수입 창출 방법 4. 디지털 노마드와 돈의 관계 4.1 경제적 자유와 위치적 독립 4.2 디지털 노마드를 위한 재정 계획 5. 디지털 노마드의 첫걸음 5.1 필요한 스킬과 ...
자세한 내용 보기

둘이 어디서 맞고 어디서 부딪힐까 — 스텔라사주 연인·동업 궁합을 만든 이유

이미지
"우리는 왜 어떤 사람은 유난히 잘 맞고, 어떤 사람과는 같은 말을 해도 자꾸 어긋날까?" 연인이든, 함께 일을 도모하는 사이든, 그 질문은 오래전부터 제 머릿속에 있었습니다. 혼자 보는 사주도 궁금하지만, 정작 일상에서 더 자주 부딪히는 문제는 '둘'의 결이었습니다. 안녕하세요, 톱니바꿈입니다. 지난 글에서는 AI와 함께 스텔라사주 를 만든 이야기를 나눴는데요. 오늘은 그중에서도 연인·비즈니스 궁합 페이지를 따로 만든 이유를, 있는 그대로 적어 보려 합니다. 스텔라사주 궁합 페이지 — 연인 궁합과 비즈니스 궁합을 선택할 수 있습니다 혼자 보는 사주로는 부족한 순간 사주를 처음 만들 때는 '내 기둥을 알기 쉽게 보여 주는 것'이 목표였습니다. 그런데 서비스를 만지다 보면, 질문을 받는 지점이 조금씩 달라집니다. "나와 이 사람은 어디서 맞고, 어디서 부딪힐까?" "같이 사업을 해도 될까?" 같은 말들입니다. 그래서 스텔라사주에는 혼자 보는 만세력과 별도로, 연인·비즈니스 궁합 무료 분석 페이지를 두었습니다. 같은 '궁합'이라도 연인과 동업은 보는 결이 다르다고 생각했기 때문에, 모드를 연인 궁합 과 비즈니스 궁합 으로 나누었습니다. 입력은 두 사람, 버튼 하나는 「상생 궁합 도출하기」 사용 방법은 단순합니다. 본인과 파트너의 이름, 성별, 양력/음력, 생년월일을 넣고, 출생시간은 모르시면 「모름」으로 두셔도 됩니다. 입력을 마친 뒤 「상생 궁합 도출하기」를 누르면 됩니다. 상대방 정보가 들어가다 보니, 개인정보 처리도 페이지에 분명히 적어 두었습니다. 파트너의 사주 정보는 일시적 궁합 연산과 결과 저장용으로만 쓰이며, 동의 없이 수집하거나 마케팅에 쓰지 않습니다. 입력 후 「상생 궁합 도출하기」를 누르면 궁합 분석이 시작됩니다 💞 연인·비즈니스 궁합, 먼저 한 번 눌러 보세요 로그인 없이 본인·파트너 생년월일을 넣고 「상생 궁합...
자세한 내용 보기