중개사무소 홈페이지, 코딩 몰라도 AI로 직접 만든 과정

중개사무소 홈페이지를 코딩 없이 AI에게 말로 시켜 만든 기록입니다. AI가 한 일과 사람이 정한 일, 법정 표시 항목, 지시문 견본을 정리했습니다.

부동산 하프로공인중개사약 15분
이 글의 차례

중개사무소 홈페이지는 코딩을 몰라도 AI 코딩 도구에게 말로 시켜서 만들 수 있습니다.

지금 이 글이 올라간 사이트 hapro.kr이 그렇게 만들어졌습니다. 코드를 직접 짜 본 적 없는 공인중개사가 AI 코딩 도구 Claude Code에게 한국어로 지시하고, 결과 화면을 보고 고칠 곳을 다시 말하는 방식이었습니다. 2026년 9월 12일 첫 작업을 저장했고, 닷새째인 9월 16일 도메인을 연결했습니다.

아래 내용은 이 사이트의 작업 저장 기록과 결정 문서에 남은 사실만 근거로 정리했습니다. 바이브 코딩이라는 말이 막연하게 들렸다면, 실제로 어떤 순서였는지부터 보시면 됩니다.

중개사무소 홈페이지를 AI로 만든 4단계 흐름: 지시, 작성, 확인, 공개

중개사무소 홈페이지, AI에게 맡기면 사람은 무엇을 하나?

AI는 코드를 쓰고, 사람은 무엇을 만들지와 무엇을 공개할지를 정합니다. 코딩을 몰라도 되는 대신 판단까지 넘길 수는 없다는 뜻입니다. 중개사무소 홈페이지를 만들 때도 이 구분은 같습니다.

Claude Code 공식 문서는 이 도구를 코드베이스를 읽고, 파일을 고치고, 명령을 실행하는 에이전트형 코딩 도구라고 설명합니다(2026년 10월 기준). 쉽게 말해 컴퓨터 안의 프로젝트 폴더를 직접 열어 보고, 파일을 만들고, 검사 명령까지 스스로 돌려 보는 도구입니다. 터미널, 편집기, 데스크톱 앱, 브라우저에서 사용할 수 있다고 안내합니다.

이 사이트에서 실제로 나뉜 역할은 다음과 같습니다.

일AI가 한 것사람이 정한 것
사이트 주소후보 주소가 이미 등록됐는지 실제로 조회hapro.kr 구입 결정
저자 표시저자 소개 화면과 검색엔진용 정보 작성필명 '부동산 하프로' 사용
디자인색·글자 크기 규칙을 문서로 만들고 적용행간·이미지 폭을 실물로 보고 확정
법정 페이지개인정보처리방침 등 4종 초안문구 확정
계정 작업어디서 무엇을 눌러야 하는지 안내호스팅·데이터베이스 화면에서 직접 실행

마지막 줄이 생각보다 중요합니다. 호스팅과 데이터베이스 계정 화면의 작업은 대부분 사람이 브라우저에서 직접 했습니다. 계정이 두 갈래로 나뉘어 있어서 AI가 명령어로 처리하면 계정이 엉킬 수 있다는 판단이 문서에 남아 있습니다.

사실 확인도 사람 몫이었습니다. 처음 만든 저자 소개에 '현직'이라는 표현이 들어가 있었는데, 실제 상태와 달라서 지웠습니다. 자격증 번호와 발급기관도 공개 의무가 없고 사칭에 쓰일 수 있다는 이유로 빼고, 합격 회차와 연도만 남겼습니다. AI는 그럴듯한 문장을 쓰지만 그 문장이 나에게 맞는지는 알지 못합니다.

만들기 전에 표의 오른쪽 칸, 즉 사람이 정할 항목부터 종이에 적어 두는 것이 순서입니다.

중개사무소 홈페이지 제작에서 AI가 한 일 4가지와 사람이 정한 일 4가지 비교

바이브 코딩으로 만든 이 사이트의 재료 네 가지

바이브 코딩은 코드를 직접 쓰지 않고 AI에게 말로 설명해 프로그램을 만드는 방식을 부르는 말입니다. 재료 이름이 영어라 어렵게 들리지만 하는 일은 단순합니다. hapro.kr은 아래 네 가지를 조합했습니다.

재료쉬운 말로이 사이트에서 맡은 일
Next.js화면을 만드는 틀글 목록, 글 본문, 관리자 화면
Supabase글과 사진을 보관하는 창고(데이터베이스)글 본문, 카테고리, 이미지 파일
Vercel사이트를 인터넷에 올려 두는 곳(호스팅)접속 처리, 주소 연결
Tailwind CSS디자인 규칙 모음색, 글자 크기, 여백

재료를 고를 때 사람이 내린 큰 결정이 하나 있었습니다. 글을 파일이 아니라 데이터베이스에 저장한다는 것입니다. 이런 블로그는 글 하나를 파일 하나로 두고, 글을 고칠 때마다 사이트 전체를 다시 올리는 방식이 흔합니다. 그렇게 하면 관리자 화면에서 글을 고칠 수 없고, 고칠 때마다 AI를 다시 불러야 합니다. 데이터베이스에 두면 관리자 화면에서 저장 버튼을 누르는 것으로 바로 반영됩니다. 이 사이트는 실제로 사이트를 다시 올리는 작업 없이 글을 발행합니다.

두 번째 결정은 비용 쪽이었습니다. 데이터베이스 서비스에 이미 사용하던 프로젝트가 있었고, 새 프로젝트를 만들면 추가 비용이 붙는 상황이었습니다. 그래서 기존 프로젝트 안에 이 사이트 전용 구역을 따로 나눠 함께 사용하기로 했습니다. 다른 앱의 데이터와 섞이지 않도록 권한도 그 구역에만 걸었습니다.

중개사무소 홈페이지라면 재료를 똑같이 맞출 필요는 없습니다. 다만 AI에게 시킬 때 "글과 매물은 관리자 화면에서 내가 직접 고칠 수 있게"라는 조건은 처음부터 넣어야 합니다. 이 조건이 빠지면 매물 하나 바꿀 때마다 AI를 다시 불러야 하는 홈페이지가 됩니다. 중개사무소 홈페이지에 매물 사진을 많이 올릴 계획이라면 사진을 보관할 곳과 용량도 명세서에 함께 적어 두세요.

중개사무소 홈페이지 재료 4가지 Next.js·Supabase·Vercel·Tailwind 역할 표

홈페이지 직접 만들기, 날짜별로 무엇을 했나?

작업 저장 기록을 날짜순으로 보면 첫날 뼈대를 세우고 닷새째에 도메인을 연결했습니다. 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에게 맡기기 전에 한 쪽짜리 명세서부터 써 두는 것이 좋습니다. 무엇을 만들지, 누가 볼지, 절대 하면 안 되는 것 세 가지만 적어도 충분합니다. 중개사무소 홈페이지라면 여기에 매물 목록 화면과 문의 칸이 더해지므로 위 표보다 단계가 늘어난다고 보고 계획하는 것이 좋습니다.

홈페이지 직접 만들기 날짜별 기록: 9월 12일 첫 작업부터 9월 26일 검색 등록까지

중개사무소 홈페이지에 매물을 올리면 지켜야 할 표시 항목

블로그와 달리 중개사무소 홈페이지에 매물을 올리는 순간 공인중개사법의 표시·광고 규정이 적용됩니다. AI는 이 조건을 알아서 챙겨 주지 않으므로 지시문에 직접 넣어야 합니다.

공인중개사법 제18조의2 제1항은 개업공인중개사가 의뢰받은 중개대상물을 표시·광고할 때 중개사무소와 개업공인중개사에 관한 사항을 명시하도록 하고, 중개보조원에 관한 사항은 명시하지 못하게 합니다. 제2항은 인터넷으로 광고할 때 소재지, 면적, 가격 등을 더 적게 합니다. 구체적인 항목은 시행령 제17조의2에 있습니다.

구분명시할 항목 (시행령 제17조의2)
사무소·중개사중개사무소 명칭, 소재지, 연락처, 등록번호, 개업공인중개사 성명
인터넷 광고 공통소재지, 면적, 가격, 중개대상물 종류, 거래 형태
건축물이면 추가총 층수, 사용승인일 등, 방향, 방·욕실 개수, 입주가능일, 주차대수, 관리비

같은 조 제4항은 부당한 표시·광고를 금지합니다. 존재하지 않는 매물, 가격 등을 거짓으로 적거나 과장한 광고가 여기에 해당하고, 시행령은 중개할 의사가 없는 매물이나 선택에 중요한 사실을 빠뜨린 광고도 포함합니다. 세부 기준은 국토교통부장관이 고시로 정합니다. 중개사무소 홈페이지의 매물 입력 화면을 위 표의 항목 그대로 칸으로 만들어 두면 빠뜨리는 일이 줄어듭니다. 매물 설명에 중개대상물 확인·설명서의 내용을 옮겨 적는다면 확인·설명서에서 먼저 볼 칸도 함께 확인해 두는 것이 좋습니다.

방문자 문의를 받는 칸이 있다면 개인정보 보호법 제30조도 적용됩니다. 처리 목적, 보유 기간, 파기 방법, 보호책임자 연락처, 쿠키처럼 자동으로 수집하는 장치의 설치와 거부 방법 등을 담은 처리방침을 정해 공개해야 합니다. 이 사이트는 처리방침에 실제로 사용하지 않는 분석 도구가 적혀 있던 것을 10월 1일에 바로잡았습니다. AI가 쓴 초안은 실제 사이트와 한 줄씩 대조해야 합니다.

인터넷 매물 광고 때 중개사무소 홈페이지에 명시할 항목 7줄 체크리스트

AI가 틀린 곳과 고친 방법

AI는 빠르게 만들지만 틀린 것을 완료했다고 보고할 때도 있습니다. 작업 기록에 남은 실수 가운데 중개사무소 홈페이지를 만들 때도 똑같이 생길 만한 것을 골랐습니다.

증상원인 (쉬운 말로)고친 방법
저자 소개 수정이 성공했다는데 화면은 그대로찾아 바꾸기 명령이 찾을 문구가 달라 아무것도 바꾸지 않음확정 문구로 통째로 덮어쓰고 화면에서 확인
휴대폰에서 첫 메뉴가 안 보임메뉴를 오른쪽 끝에 붙이자 앞 항목이 화면 밖으로 밀림휴대폰에서는 로고와 메뉴를 두 줄로
목차를 눌러도 해당 제목에 멈추지 않음그림 크기를 적지 않아 그림이 늦게 뜨며 글을 밀어냄그림마다 가로·세로 크기를 미리 기록
배너 클릭 수가 계속 0건서버는 받았다고 답했지만 실제 저장은 실패저장된 줄이 생겼는지 직접 세는 점검 추가
휴대폰에서 표가 화면보다 넓음표 제목 칸이 줄을 바꾸지 않게 설정됨줄바꿈 허용, 실제 화면 캡처로 재확인

공통점은 하나입니다. AI의 완료 보고를 그대로 믿지 않고 결과를 직접 확인한 순간에 문제가 드러났다는 것입니다. 첫 번째 사례는 명령이 오류 없이 끝났고 사람도 실행했다고 했지만, 실제로 바뀐 것은 없었습니다. 그 뒤로 이 사이트의 문서에는 화면에서 값을 확인한 다음에만 적용됐다고 적는다는 규칙이 들어갔습니다.

배너 사례는 더 오래 걸렸습니다. 배너 디자인을 다섯 번 고치는 동안 클릭 수를 근거로 삼으려 했는데, 수를 세는 기능이 처음부터 저장을 하지 못하고 있었습니다. 서버의 응답 신호만 보면 정상이어서 겉으로는 문제가 없어 보였습니다.

표 사례에서는 반대 방향의 실수도 있었습니다. 넘치는 표의 개수를 0으로 만드는 설정을 넣었더니 숫자는 좋아졌지만 '단계'가 '단/계'처럼 낱말 중간에서 끊겼습니다. 측정값만 보고 끝냈다면 그대로 나갔을 화면이라 설정을 되돌렸습니다.

AI가 완료했다고 하면 휴대폰으로 직접 들어가 화면을 확인해야 합니다. 몇 초면 끝나는 일인데 이 단계를 건너뛰면 잘못된 화면이 그대로 공개됩니다.

중개사무소 홈페이지 제작 중 AI가 틀린 5가지 증상과 고친 방법 표

따라 하는 순서와 그대로 써도 되는 지시문

순서는 여섯 단계입니다. 명세서, 뼈대, 관리자 화면, 법정 페이지, 도메인, 검색엔진 등록 순입니다. 지시문은 짧을수록 좋지만 조건은 빠짐없이 들어가야 합니다. 아래는 예를 들어 이렇게 쓸 수 있다는 견본입니다. 그대로 붙여 넣어도 되고, 사무소 사정에 맞게 고쳐 사용해도 됩니다.

1단계: 우리 중개사무소 홈페이지를 만들려고 해. 코딩은 몰라. 바로 만들지 말고, 내가 답해야 할 질문을 10개 이내로 물어본 다음 한 쪽짜리 명세서로 정리해 줘.

3단계: 매물과 글은 관리자 화면에서 내가 직접 쓰고 고칠 수 있게 해 줘. 로그인은 나만 되게 하고, 저장하면 사이트에 바로 반영돼야 해.

매물 화면: 매물 상세 화면에 공인중개사법 시행령 제17조의2의 명시 항목이 빠지면 저장되지 않게 해 줘. 중개보조원 이름은 화면 어디에도 나오지 않게 해 줘.

확인할 때: 방금 바꾼 것이 실제 사이트에 적용됐는지 화면을 열어 값을 직접 확인한 결과로 보고해 줘. 명령이 성공했다는 것만으로 완료라고 하지 마.

단계AI에게 맡길 것손으로 확인할 것
1. 명세서질문 목록, 명세서 정리빠진 결정이 없는지
2. 뼈대화면 틀, 데이터베이스휴대폰 화면
3. 관리자 화면로그인, 글쓰기, 사진 올리기직접 글 1편 써 보기
4. 법정 페이지처리방침·이용약관 초안실제와 다른 문구
5. 도메인연결 설정 안내주소 구입과 결제
6. 검색 등록소유 확인 태그 넣기구글·네이버 화면에서 제출

하나 더 있습니다. AI와 새 대화를 열면 앞의 대화 내용이 이어지지 않습니다. 이 사이트는 현재 상태와 다음 할 일, 이미 내린 결정, 밟았던 실수를 한 문서에 적어 두고 새 대화마다 그 문서를 먼저 읽게 했습니다. 그 문서는 AI가 작업을 마칠 때마다 직접 고치게 했습니다. 같은 논의를 되풀이하지 않는 가장 확실한 방법이었습니다. 중개사무소 홈페이지를 만들 때도 이 문서 하나는 첫날부터 만들어 두세요.

중개사무소 홈페이지 따라 하는 6단계와 단계마다 손으로 확인할 것

자주 묻는 질문

코딩을 정말 하나도 몰라도 되나요?

코드를 직접 쓸 일은 거의 없습니다. 대신 화면을 보고 무엇이 이상한지 말로 설명할 수 있어야 하고, 계정 화면에서 버튼을 누르는 일은 직접 해야 합니다. 화면이 이상하면 캡처를 붙이고 이 부분이 이렇게 보인다고 말하면 됩니다. 이 사이트도 호스팅과 데이터베이스 계정 작업은 대부분 사람이 브라우저에서 했습니다.

얼마나 걸리나요?

이 사이트는 첫 작업부터 도메인 연결까지 5일이 걸렸고, 2026년 10월 10일까지 작업한 날은 16일입니다. 다만 시작 전에 명세서가 있었고, 같은 기간에 글 29편도 함께 썼습니다. 사무소마다 필요한 기능이 달라서 기간도 달라집니다. 중개사무소 홈페이지는 매물 화면이 더해지므로 이 사이트의 기간을 그대로 기준으로 삼지 않는 것이 좋습니다.

비용은 얼마나 드나요?

이 글에서는 금액을 적지 않습니다. AI 도구 요금제와 호스팅 요금은 자주 바뀌므로 각 서비스의 공식 요금 페이지에서 확인해야 합니다. 이 사이트는 이미 사용하던 데이터베이스 프로젝트를 함께 사용해 새 프로젝트 비용을 늘리지 않았습니다. 도메인은 구입일로부터 1년 뒤 만료일이 정해져 있어서 갱신 날짜를 따로 챙겨야 합니다.

매물 정보를 AI가 대신 채워도 되나요?

화면을 만드는 일은 맡겨도 되지만 매물 내용은 중개사가 직접 확인해 입력해야 합니다. 가격이나 면적이 사실과 다르면 공인중개사법 제18조의2 제4항의 부당한 표시·광고에 해당할 수 있습니다. 홈페이지에 중개보수 안내를 올린다면 중개보수 상한요율 계산법과 숫자가 맞는지도 확인해야 합니다.

홈페이지를 만들면 검색에 저절로 나오나요?

저절로 나오지 않습니다. 구글 Search Console과 네이버 서치어드바이저에 사이트를 직접 등록하고 사이트맵을 제출해야 합니다. 이 사이트는 도메인 연결 다음 날 Search Console에 등록했고, 9월 26일에는 네이버와 Bing에도 등록했습니다.

홈페이지 직접 만들기 자주 묻는 질문 4가지와 이 사이트 기록 기준 답변

정리

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

AI가 홈페이지 작업을 끝냈다고 할 때 손으로 확인할 5가지 체크리스트

참고한 자료

이 글은 2026년 10월 기준입니다. 법령과 AI 도구의 기능은 바뀔 수 있으므로 원문과 공식 페이지로 확인하시기 바랍니다.

이 글을 쓴 사람

부동산 하프로

공인중개사 · 중개사무소 운영 4년 · 주거/상업/토지

  • 공인중개사 · 제32회

공인중개사 자격을 취득한 뒤 중개사무소를 직접 4년간 운영했습니다. 경기도 광주에서 공장·창고와 토지를, 서울 강남구에서 아파트·오피스텔·상가를 중개했습니다. 그 현장 경험을 바탕으로 공인중개사뿐 아니라 부동산 계약 당사자에게도 도움이 되는 글을 씁니다. 현재는 중개사를 위한 업무 도구 "중개프로"를 만들며, 실무자가 실제로 쓰는 절차만 정리해 공유합니다.

함께 보면 좋은 글