Claude Code로 원룸 비교 보드 만들기
부동산 앱 탭 여러 개보다 한 화면이 더 낫다
원룸을 볼 때 헷갈리는 지점은 가격 하나가 아니라 조합입니다. 보증금은 낮은데 관리비가 높고, 역은 가까운데 옵션이 비고, 사진은 괜찮은데 메모가 흩어져 있죠. 그래서 오늘은 Claude Code로 방 비교 화면을 만드는 흐름을 정리해보겠습니다. 부동산 앱에서 복붙한 매물 4~5개만 넣으면 보증금, 월세, 관리비, 역까지 시간, 메모를 한 번에 놓고 볼 수 있는 방식입니다. 목표도 분명합니다. 첫 화면을 5분 안에 띄우고, 숫자 정렬과 모바일 읽기까지 같이 맞추는 겁니다.
오늘 도구는 Claude Code로 갑니다. Codex를 쓰는 분도 프롬프트 구조는 거의 그대로 가져가면 됩니다. 차이는 순서에 있습니다. 빈 폴더에서 `/init`으로 기준 문서를 만들고, 기능을 늘리기 전에 `/plan`으로 손댈 범위를 먼저 보고, 마지막에 `/review`로 숫자와 화면을 읽기 전용으로 점검합니다. 이 순서를 잡아두면 처음 만드는 사람도 중간에 덜 흔들립니다.
처음 세팅은 디자인보다 기준이 먼저다
코드를 많이 몰라도 괜찮습니다. 빈 폴더 하나와 터미널만 있으면 출발할 수 있습니다. 여기서 먼저 해야 할 일은 멋진 카드 UI를 만드는 게 아니라 비교 기준을 고정하는 일입니다. 방 비교는 항목이 금방 늘어납니다. 처음 지시가 흐리면 옵션, 사진 설명, 주변 정보까지 계속 붙으면서 화면이 무거워집니다. 처음부터 무엇을 보여주고 무엇을 뺄지 정해두면 뒤 수정이 짧아집니다.
터미널에서 먼저 `/init`을 한 번 입력하세요. `CLAUDE.md`가 생기면 바로 아래 프롬프트를 보냅니다.
첫 프롬프트는 욕심을 줄이는 쪽이 좋습니다. 저장 기능, 공유 기능, 지도 연동까지 한 번에 넣으려 하면 처음 보는 사람 입장에서는 구조가 갑자기 복잡해집니다. 반대로 `index.html` 한 장으로 시작하면 카드가 보이고 입력칸이 열리는 순간부터 이미 쓸 수 있는 상태가 됩니다. 월세 비교 도구는 출발이 빨라야 다음 수정도 편합니다.
매물 4개를 숫자로 바꾸는 순간 판단이 빨라진다
여기서 중요한 건 사람이 읽는 문장과 계산에 쓰는 숫자를 같이 두는 겁니다. 보증금 1000, 월세 72, 관리비 7이 텍스트로만 들어가 있으면 정렬이 흔들릴 수 있습니다. 숫자 필드를 따로 두면 월세가 낮은 순, 역이 가까운 순, 총월부담이 작은 순 같은 정리가 바로 붙습니다. 부동산 앱 메모를 다시 읽느라 시간을 쓰기보다 비교 기준이 먼저 서는 구조죠.
숫자를 한 화면에 모아두면 판단도 훨씬 빨라집니다. 월세 7만 원 차이면 1년에 84만 원입니다. 역까지 5분 차이도 출근이 반복되면 무시하기 어렵습니다. 사진만 볼 때는 지나쳤던 값이 이렇게 정리해두면 다시 눈에 들어옵니다. 그래서 이 단계가 방 비교 보드에서 가장 실용적인 구간입니다.
기능 추가는 바로 시키지 말고 먼저 범위를 읽는다
`/plan`을 붙이는 이유는 수정 전에 범위를 먼저 보기 위해서입니다. 초보일수록 이 단계가 꽤 유용합니다. 파일을 새로 늘리는지, 기존 카드 구조만 손보는지, 필터 상태를 어디에 둘지 먼저 읽어보면 내가 원하는 방향인지 바로 판단할 수 있습니다. 월세 70 이하, 역 10분 이하, 엘리베이터 있음처럼 조건이 생활 언어로 또렷할수록 계획도 짧고 분명하게 나옵니다.
이 단계는 마무리 검수에 가깝습니다. 비교 화면은 계산 실수 하나만 있어도 믿고 쓰기 어려워집니다. 그래서 바로 고치게 하기보다 먼저 읽기 전용으로 보고, 숫자가 뒤섞였는지, 모바일에서 카드가 잘리는지, 빈 상태 문구가 어색하지 않은지 확인하는 편이 좋습니다. 특히 390px 근처에서 카드가 한 장씩 편하게 읽히는지 보는 습관이 있으면 나중에 손볼 일이 줄어듭니다.
숫자와 화면이 어긋날 때는 이 세 가지만 정리하면 된다
첫째. 월세 낮은 순이 이상하게 섞여 보이면 금액이 문자열로 들어갔을 가능성이 큽니다. 이럴 때는 프롬프트에 숫자로도 저장해달라고 다시 적고, `deposit`, `monthlyRent`, `maintenanceFee` 같은 계산용 값을 따로 두라고 말하면 됩니다.
둘째. 카드 정보가 너무 많아지면 비교보다 읽는 일이 더 힘들어집니다. `보여줄 항목은 6개만`, `설명은 한 줄만`, `비교에 안 쓰는 값은 숨겨줘`처럼 잘라 말하면 화면이 금방 정리됩니다. 이 도구에서는 정보량보다 우선순위가 중요합니다.
셋째. 모바일에서 카드가 옆으로 밀리거나 버튼이 겹치면 데스크톱 폭 기준으로 짜인 경우가 많습니다. `모바일 390px 기준으로 다시 정렬해줘`, `카드는 세로 1열`, `필터는 접히는 영역으로`라고 적으면 수정 방향이 선명해집니다.
새 매물이 생길 때마다 같은 기준으로 다시 본다
여기까지 만들면 다음에 새 방을 보러 갈 때도 흐름이 단순합니다. 부동산 앱에서 매물 4~5개를 복붙하고, 숫자형 데이터가 들어갔는지 확인한 뒤, 필터만 켜서 바로 비교하면 됩니다. 더 붙이고 싶다면 `/loop`를 써서 세션이 켜진 동안 새 매물 텍스트를 계속 다시 읽게 만들 수도 있습니다. 오늘은 비교판까지 만들고, 다음에는 찜 목록이나 메모 정렬처럼 한 단계만 더 붙이면 충분합니다.
이런 글도 있어요
관련 검색어
- 🔍 Claude Code 사용법
- 🔍 Claude Code 비교
- 🔍 방 비교
- 🔍 월세 비교
- 🔍 부동산 자동화 사용법
- 🔍 부동산 자동화 비교
