중개사무소 홈페이지는 코딩을 몰라도 AI 코딩 도구에게 말로 시켜서 만들 수 있습니다.
지금 이 글이 올라간 사이트 hapro.kr이 그렇게 만들어졌습니다. 코드를 직접 짜 본 적 없는 공인중개사가 AI 코딩 도구 Claude Code에게 한국어로 지시하고, 결과 화면을 보고 고칠 곳을 다시 말하는 방식이었습니다. 2026년 9월 12일 첫 작업을 저장했고, 닷새째인 9월 16일 도메인을 연결했습니다.
아래 내용은 이 사이트의 작업 저장 기록과 결정 문서에 남은 사실만 근거로 정리했습니다. 바이브 코딩이라는 말이 막연하게 들렸다면, 실제로 어떤 순서였는지부터 보시면 됩니다.

중개사무소 홈페이지, AI에게 맡기면 사람은 무엇을 하나?
AI는 코드를 쓰고, 사람은 무엇을 만들지와 무엇을 공개할지를 정합니다. 코딩을 몰라도 되는 대신 판단까지 넘길 수는 없다는 뜻입니다. 중개사무소 홈페이지를 만들 때도 이 구분은 같습니다.
Claude Code 공식 문서는 이 도구를 코드베이스를 읽고, 파일을 고치고, 명령을 실행하는 에이전트형 코딩 도구라고 설명합니다(2026년 10월 기준). 쉽게 말해 컴퓨터 안의 프로젝트 폴더를 직접 열어 보고, 파일을 만들고, 검사 명령까지 스스로 돌려 보는 도구입니다. 터미널, 편집기, 데스크톱 앱, 브라우저에서 사용할 수 있다고 안내합니다.
이 사이트에서 실제로 나뉜 역할은 다음과 같습니다.
| 일 | AI가 한 것 | 사람이 정한 것 |
|---|---|---|
| 사이트 주소 | 후보 주소가 이미 등록됐는지 실제로 조회 | hapro.kr 구입 결정 |
| 저자 표시 | 저자 소개 화면과 검색엔진용 정보 작성 | 필명 '부동산 하프로' 사용 |
| 디자인 | 색·글자 크기 규칙을 문서로 만들고 적용 | 행간·이미지 폭을 실물로 보고 확정 |
| 법정 페이지 | 개인정보처리방침 등 4종 초안 | 문구 확정 |
| 계정 작업 | 어디서 무엇을 눌러야 하는지 안내 | 호스팅·데이터베이스 화면에서 직접 실행 |
마지막 줄이 생각보다 중요합니다. 호스팅과 데이터베이스 계정 화면의 작업은 대부분 사람이 브라우저에서 직접 했습니다. 계정이 두 갈래로 나뉘어 있어서 AI가 명령어로 처리하면 계정이 엉킬 수 있다는 판단이 문서에 남아 있습니다.
사실 확인도 사람 몫이었습니다. 처음 만든 저자 소개에 '현직'이라는 표현이 들어가 있었는데, 실제 상태와 달라서 지웠습니다. 자격증 번호와 발급기관도 공개 의무가 없고 사칭에 쓰일 수 있다는 이유로 빼고, 합격 회차와 연도만 남겼습니다. AI는 그럴듯한 문장을 쓰지만 그 문장이 나에게 맞는지는 알지 못합니다.
만들기 전에 표의 오른쪽 칸, 즉 사람이 정할 항목부터 종이에 적어 두는 것이 순서입니다.

바이브 코딩으로 만든 이 사이트의 재료 네 가지
바이브 코딩은 코드를 직접 쓰지 않고 AI에게 말로 설명해 프로그램을 만드는 방식을 부르는 말입니다. 재료 이름이 영어라 어렵게 들리지만 하는 일은 단순합니다. hapro.kr은 아래 네 가지를 조합했습니다.
| 재료 | 쉬운 말로 | 이 사이트에서 맡은 일 |
|---|---|---|
| Next.js | 화면을 만드는 틀 | 글 목록, 글 본문, 관리자 화면 |
| Supabase | 글과 사진을 보관하는 창고(데이터베이스) | 글 본문, 카테고리, 이미지 파일 |
| Vercel | 사이트를 인터넷에 올려 두는 곳(호스팅) | 접속 처리, 주소 연결 |
| Tailwind CSS | 디자인 규칙 모음 | 색, 글자 크기, 여백 |
재료를 고를 때 사람이 내린 큰 결정이 하나 있었습니다. 글을 파일이 아니라 데이터베이스에 저장한다는 것입니다. 이런 블로그는 글 하나를 파일 하나로 두고, 글을 고칠 때마다 사이트 전체를 다시 올리는 방식이 흔합니다. 그렇게 하면 관리자 화면에서 글을 고칠 수 없고, 고칠 때마다 AI를 다시 불러야 합니다. 데이터베이스에 두면 관리자 화면에서 저장 버튼을 누르는 것으로 바로 반영됩니다. 이 사이트는 실제로 사이트를 다시 올리는 작업 없이 글을 발행합니다.
두 번째 결정은 비용 쪽이었습니다. 데이터베이스 서비스에 이미 사용하던 프로젝트가 있었고, 새 프로젝트를 만들면 추가 비용이 붙는 상황이었습니다. 그래서 기존 프로젝트 안에 이 사이트 전용 구역을 따로 나눠 함께 사용하기로 했습니다. 다른 앱의 데이터와 섞이지 않도록 권한도 그 구역에만 걸었습니다.
중개사무소 홈페이지라면 재료를 똑같이 맞출 필요는 없습니다. 다만 AI에게 시킬 때 "글과 매물은 관리자 화면에서 내가 직접 고칠 수 있게"라는 조건은 처음부터 넣어야 합니다. 이 조건이 빠지면 매물 하나 바꿀 때마다 AI를 다시 불러야 하는 홈페이지가 됩니다. 중개사무소 홈페이지에 매물 사진을 많이 올릴 계획이라면 사진을 보관할 곳과 용량도 명세서에 함께 적어 두세요.

홈페이지 직접 만들기, 날짜별로 무엇을 했나?
작업 저장 기록을 날짜순으로 보면 첫날 뼈대를 세우고 닷새째에 도메인을 연결했습니다. 2026년 10월 10일까지 저장 기록은 152건, 실제로 작업한 날은 16일입니다.
| 날짜 | 한 일 |
|---|---|
| 9월 12일 (1일째) | 사이트 뼈대, 저자 소개, 고정 페이지 4종, 디자인 기준 문서, 관리자 로그인과 글쓰기 |
| 9월 13일 | 엔터 한 번으로 줄바꿈, 이미지 올리기, 보이는 대로 쓰는 편집기로 교체 |
| 9월 14일 (3일째) | 관리자 화면 실사용 확인, 첫 글 3편 발행, 필명 확정 |
| 9월 16일 (5일째) | 글 29편 작성 완료, hapro.kr 구입과 연결 |
| 9월 17일 | 구글 Search Console 등록 |
| 9월 26일 | Bing·네이버 검색엔진 등록, 발행 즉시 검색엔진에 알리는 기능 |
| 10월 1일 | 방문 통계 연결, 개인정보처리방침 정정 |
첫날 한 일이 유난히 많아 보이는 데는 이유가 있습니다. 작업을 시작하기 전에 무엇을, 어떤 순서로 만들고, 무엇은 절대 하지 말지를 적은 명세서를 먼저 만들어 AI에게 건넸습니다. 명세서에는 저자 정보가 처음부터 필수라는 점, 광고는 정해진 자리로만 넣는다는 점 같은 규칙이 들어 있었습니다. 기준이 문서로 있으면 AI가 중간에 판단할 일이 생겼을 때 그 문서로 돌아갑니다.
또 하나 눈여겨볼 점은 작업 사이에 사람이 직접 써 보는 날이 끼어 있다는 것입니다. 9월 12일 관리자 화면을 만든 뒤 다음 할 일로 적힌 것은 사용자 로그인 확인이었습니다. 직접 들어가 글을 써 보고 나서야 엔터 한 번으로 줄이 바뀌지 않는다는 것, 본문 사이에 이미지 주소가 길게 섞여 글을 읽을 수 없다는 것이 드러났습니다. 둘 다 다음 날 고쳤습니다.
AI에게 맡기기 전에 한 쪽짜리 명세서부터 써 두는 것이 좋습니다. 무엇을 만들지, 누가 볼지, 절대 하면 안 되는 것 세 가지만 적어도 충분합니다. 중개사무소 홈페이지라면 여기에 매물 목록 화면과 문의 칸이 더해지므로 위 표보다 단계가 늘어난다고 보고 계획하는 것이 좋습니다.

중개사무소 홈페이지에 매물을 올리면 지켜야 할 표시 항목
블로그와 달리 중개사무소 홈페이지에 매물을 올리는 순간 공인중개사법의 표시·광고 규정이 적용됩니다. AI는 이 조건을 알아서 챙겨 주지 않으므로 지시문에 직접 넣어야 합니다.
공인중개사법 제18조의2 제1항은 개업공인중개사가 의뢰받은 중개대상물을 표시·광고할 때 중개사무소와 개업공인중개사에 관한 사항을 명시하도록 하고, 중개보조원에 관한 사항은 명시하지 못하게 합니다. 제2항은 인터넷으로 광고할 때 소재지, 면적, 가격 등을 더 적게 합니다. 구체적인 항목은 시행령 제17조의2에 있습니다.
| 구분 | 명시할 항목 (시행령 제17조의2) |
|---|---|
| 사무소·중개사 | 중개사무소 명칭, 소재지, 연락처, 등록번호, 개업공인중개사 성명 |
| 인터넷 광고 공통 | 소재지, 면적, 가격, 중개대상물 종류, 거래 형태 |
| 건축물이면 추가 | 총 층수, 사용승인일 등, 방향, 방·욕실 개수, 입주가능일, 주차대수, 관리비 |
같은 조 제4항은 부당한 표시·광고를 금지합니다. 존재하지 않는 매물, 가격 등을 거짓으로 적거나 과장한 광고가 여기에 해당하고, 시행령은 중개할 의사가 없는 매물이나 선택에 중요한 사실을 빠뜨린 광고도 포함합니다. 세부 기준은 국토교통부장관이 고시로 정합니다. 중개사무소 홈페이지의 매물 입력 화면을 위 표의 항목 그대로 칸으로 만들어 두면 빠뜨리는 일이 줄어듭니다. 매물 설명에 중개대상물 확인·설명서의 내용을 옮겨 적는다면 확인·설명서에서 먼저 볼 칸도 함께 확인해 두는 것이 좋습니다.
방문자 문의를 받는 칸이 있다면 개인정보 보호법 제30조도 적용됩니다. 처리 목적, 보유 기간, 파기 방법, 보호책임자 연락처, 쿠키처럼 자동으로 수집하는 장치의 설치와 거부 방법 등을 담은 처리방침을 정해 공개해야 합니다. 이 사이트는 처리방침에 실제로 사용하지 않는 분석 도구가 적혀 있던 것을 10월 1일에 바로잡았습니다. AI가 쓴 초안은 실제 사이트와 한 줄씩 대조해야 합니다.

AI가 틀린 곳과 고친 방법
AI는 빠르게 만들지만 틀린 것을 완료했다고 보고할 때도 있습니다. 작업 기록에 남은 실수 가운데 중개사무소 홈페이지를 만들 때도 똑같이 생길 만한 것을 골랐습니다.
| 증상 | 원인 (쉬운 말로) | 고친 방법 |
|---|---|---|
| 저자 소개 수정이 성공했다는데 화면은 그대로 | 찾아 바꾸기 명령이 찾을 문구가 달라 아무것도 바꾸지 않음 | 확정 문구로 통째로 덮어쓰고 화면에서 확인 |
| 휴대폰에서 첫 메뉴가 안 보임 | 메뉴를 오른쪽 끝에 붙이자 앞 항목이 화면 밖으로 밀림 | 휴대폰에서는 로고와 메뉴를 두 줄로 |
| 목차를 눌러도 해당 제목에 멈추지 않음 | 그림 크기를 적지 않아 그림이 늦게 뜨며 글을 밀어냄 | 그림마다 가로·세로 크기를 미리 기록 |
| 배너 클릭 수가 계속 0건 | 서버는 받았다고 답했지만 실제 저장은 실패 | 저장된 줄이 생겼는지 직접 세는 점검 추가 |
| 휴대폰에서 표가 화면보다 넓음 | 표 제목 칸이 줄을 바꾸지 않게 설정됨 | 줄바꿈 허용, 실제 화면 캡처로 재확인 |
공통점은 하나입니다. AI의 완료 보고를 그대로 믿지 않고 결과를 직접 확인한 순간에 문제가 드러났다는 것입니다. 첫 번째 사례는 명령이 오류 없이 끝났고 사람도 실행했다고 했지만, 실제로 바뀐 것은 없었습니다. 그 뒤로 이 사이트의 문서에는 화면에서 값을 확인한 다음에만 적용됐다고 적는다는 규칙이 들어갔습니다.
배너 사례는 더 오래 걸렸습니다. 배너 디자인을 다섯 번 고치는 동안 클릭 수를 근거로 삼으려 했는데, 수를 세는 기능이 처음부터 저장을 하지 못하고 있었습니다. 서버의 응답 신호만 보면 정상이어서 겉으로는 문제가 없어 보였습니다.
표 사례에서는 반대 방향의 실수도 있었습니다. 넘치는 표의 개수를 0으로 만드는 설정을 넣었더니 숫자는 좋아졌지만 '단계'가 '단/계'처럼 낱말 중간에서 끊겼습니다. 측정값만 보고 끝냈다면 그대로 나갔을 화면이라 설정을 되돌렸습니다.
AI가 완료했다고 하면 휴대폰으로 직접 들어가 화면을 확인해야 합니다. 몇 초면 끝나는 일인데 이 단계를 건너뛰면 잘못된 화면이 그대로 공개됩니다.

따라 하는 순서와 그대로 써도 되는 지시문
순서는 여섯 단계입니다. 명세서, 뼈대, 관리자 화면, 법정 페이지, 도메인, 검색엔진 등록 순입니다. 지시문은 짧을수록 좋지만 조건은 빠짐없이 들어가야 합니다. 아래는 예를 들어 이렇게 쓸 수 있다는 견본입니다. 그대로 붙여 넣어도 되고, 사무소 사정에 맞게 고쳐 사용해도 됩니다.
1단계: 우리 중개사무소 홈페이지를 만들려고 해. 코딩은 몰라. 바로 만들지 말고, 내가 답해야 할 질문을 10개 이내로 물어본 다음 한 쪽짜리 명세서로 정리해 줘.
3단계: 매물과 글은 관리자 화면에서 내가 직접 쓰고 고칠 수 있게 해 줘. 로그인은 나만 되게 하고, 저장하면 사이트에 바로 반영돼야 해.
매물 화면: 매물 상세 화면에 공인중개사법 시행령 제17조의2의 명시 항목이 빠지면 저장되지 않게 해 줘. 중개보조원 이름은 화면 어디에도 나오지 않게 해 줘.
확인할 때: 방금 바꾼 것이 실제 사이트에 적용됐는지 화면을 열어 값을 직접 확인한 결과로 보고해 줘. 명령이 성공했다는 것만으로 완료라고 하지 마.
| 단계 | AI에게 맡길 것 | 손으로 확인할 것 |
|---|---|---|
| 1. 명세서 | 질문 목록, 명세서 정리 | 빠진 결정이 없는지 |
| 2. 뼈대 | 화면 틀, 데이터베이스 | 휴대폰 화면 |
| 3. 관리자 화면 | 로그인, 글쓰기, 사진 올리기 | 직접 글 1편 써 보기 |
| 4. 법정 페이지 | 처리방침·이용약관 초안 | 실제와 다른 문구 |
| 5. 도메인 | 연결 설정 안내 | 주소 구입과 결제 |
| 6. 검색 등록 | 소유 확인 태그 넣기 | 구글·네이버 화면에서 제출 |
하나 더 있습니다. AI와 새 대화를 열면 앞의 대화 내용이 이어지지 않습니다. 이 사이트는 현재 상태와 다음 할 일, 이미 내린 결정, 밟았던 실수를 한 문서에 적어 두고 새 대화마다 그 문서를 먼저 읽게 했습니다. 그 문서는 AI가 작업을 마칠 때마다 직접 고치게 했습니다. 같은 논의를 되풀이하지 않는 가장 확실한 방법이었습니다. 중개사무소 홈페이지를 만들 때도 이 문서 하나는 첫날부터 만들어 두세요.

자주 묻는 질문
코딩을 정말 하나도 몰라도 되나요?
코드를 직접 쓸 일은 거의 없습니다. 대신 화면을 보고 무엇이 이상한지 말로 설명할 수 있어야 하고, 계정 화면에서 버튼을 누르는 일은 직접 해야 합니다. 화면이 이상하면 캡처를 붙이고 이 부분이 이렇게 보인다고 말하면 됩니다. 이 사이트도 호스팅과 데이터베이스 계정 작업은 대부분 사람이 브라우저에서 했습니다.
얼마나 걸리나요?
이 사이트는 첫 작업부터 도메인 연결까지 5일이 걸렸고, 2026년 10월 10일까지 작업한 날은 16일입니다. 다만 시작 전에 명세서가 있었고, 같은 기간에 글 29편도 함께 썼습니다. 사무소마다 필요한 기능이 달라서 기간도 달라집니다. 중개사무소 홈페이지는 매물 화면이 더해지므로 이 사이트의 기간을 그대로 기준으로 삼지 않는 것이 좋습니다.
비용은 얼마나 드나요?
이 글에서는 금액을 적지 않습니다. AI 도구 요금제와 호스팅 요금은 자주 바뀌므로 각 서비스의 공식 요금 페이지에서 확인해야 합니다. 이 사이트는 이미 사용하던 데이터베이스 프로젝트를 함께 사용해 새 프로젝트 비용을 늘리지 않았습니다. 도메인은 구입일로부터 1년 뒤 만료일이 정해져 있어서 갱신 날짜를 따로 챙겨야 합니다.
매물 정보를 AI가 대신 채워도 되나요?
화면을 만드는 일은 맡겨도 되지만 매물 내용은 중개사가 직접 확인해 입력해야 합니다. 가격이나 면적이 사실과 다르면 공인중개사법 제18조의2 제4항의 부당한 표시·광고에 해당할 수 있습니다. 홈페이지에 중개보수 안내를 올린다면 중개보수 상한요율 계산법과 숫자가 맞는지도 확인해야 합니다.
홈페이지를 만들면 검색에 저절로 나오나요?
저절로 나오지 않습니다. 구글 Search Console과 네이버 서치어드바이저에 사이트를 직접 등록하고 사이트맵을 제출해야 합니다. 이 사이트는 도메인 연결 다음 날 Search Console에 등록했고, 9월 26일에는 네이버와 Bing에도 등록했습니다.

정리
- 중개사무소 홈페이지는 AI 코딩 도구에게 말로 시켜 만들 수 있고, 이 사이트는 닷새째에 도메인을 연결했습니다.
- AI는 코드를 쓰고, 사람은 주소·필명·디자인·법정 문구를 정합니다.
- 매물을 올린다면 시행령 제17조의2 명시 항목을 지시문에 넣어야 합니다.
- AI의 완료 보고는 휴대폰 화면에서 확인한 뒤에 믿습니다.

참고한 자료
- 공인중개사법 제18조의2(중개대상물의 표시·광고)
- 공인중개사법 시행령 제17조의2(중개대상물의 표시·광고)
- 개인정보 보호법 제30조(개인정보 처리방침의 수립 및 공개)
- 개인정보보호위원회
- Claude Code 공식 문서
이 글은 2026년 10월 기준입니다. 법령과 AI 도구의 기능은 바뀔 수 있으므로 원문과 공식 페이지로 확인하시기 바랍니다.



