Claude Code로 Airbnb 숙소 비교 에이전트 만들기
탭 7개만 열어도 비교가 흐려집니다
에어비앤비 숙소를 고를 때 가장 귀찮은 순간은 후보가 3개쯤 모였을 때입니다. 가격만 보면 싸 보이는데 청소비가 붙고, 위치만 보면 괜찮은데 체크인 시간이 빡빡해서 마지막에 다시 처음으로 돌아가게 됩니다.
그래서 오늘은 Claude Code로 숙소 비교 화면을 하나 만듭니다. 완성본은 거창한 서비스가 아니라, 숙소 3개 정보만 붙여넣으면 1박 총액, 추가비용, 평점, 역까지 걷는 시간, 체크인 시간, 한 줄 메모를 카드로 바로 보여주는 로컬 페이지입니다. 여행 잡기 직전에 가장 많이 보는 항목만 남겨서 비교를 빨리 끝내는 쪽으로 가져가보겠습니다.
오늘은 /init과 CLAUDE.md만 잡아도 방향이 안 흔들립니다
이 주제에서는 화려한 기능보다 비교 기준을 먼저 못 박는 일이 더 중요합니다. Claude Code의 /init으로 시작하면 CLAUDE.md를 바로 만들 수 있어서 첫 방향을 정리하기 좋습니다. 여기서 가격을 어떻게 보여줄지, 추천 문구를 얼마나 절제할지, 첫 버전을 어디까지 만들지 짧게 적어두면 뒤에서 문장이 흔들리지 않습니다. Codex를 쓰는 분도 같은 흐름으로 옮길 수 있지만, 오늘 예시는 Claude Code 기준으로 적겠습니다. 길게 설명을 읽는 것보다 그대로 붙여넣는 편이 훨씬 빠릅니다.
이 프롬프트에서 먼저 챙길 부분은 소개문을 길게 늘리지 않고 숫자 기준을 분리하는 일입니다. 숙소 비교 화면은 결국 금액과 조건을 보는 도구라서 1박 총액과 추가비용이 섞이면 판단이 금방 흐려집니다. 처음부터 한국어 출력, 과장 없는 문장, index.html 한 파일이라는 범위를 정해두면 초보자도 수정 지점을 찾기 쉬워집니다.
첫 단계에서 파일을 쪼개지 않는 이유도 분명합니다. HTML, CSS, JS가 한 장에 모여 있으면 무엇이 바뀌었는지 바로 보이고 브라우저에서 열었을 때 결과도 즉시 확인할 수 있습니다. 입력 형식을 줄 단위로 고정한 것도 편합니다. 이름, 1박 총액, 추가비용, 평점, 도보 분, 체크인, 메모 순서만 맞추면 되기 때문입니다.
예시는 이렇게 넣으면 됩니다. 성수 Loft, 142000, 35000, 4.91, 7, 22:00, 세탁기 있음. 이 한 묶음을 숙소 하나로 보고 3칸에 나눠 붙여넣으면 카드가 바로 생성됩니다. 여행 메신저 방에서 받은 정보를 다시 표로 옮기지 않아도 되니 일정 잡을 때 손이 덜 갑니다.
여기서부터 화면이 꽤 실용적으로 바뀝니다. 카드 안에 가격, 위치, 체크인 편의를 각각 5점 만점으로 보여주면 대화가 빨라집니다. 같이 여행 가는 사람마다 우선순위가 다르기 때문에 탭 3개를 두는 방식이 잘 맞습니다. 누군가는 가성비를 먼저 보고, 누군가는 역까지 7분인지 12분인지에 민감하고, 누군가는 22:00 체크인이 가능한지만 봅니다. 카드 상단의 추천 한 줄은 이런 차이를 한 번에 정리해줍니다.
이쯤 오면 Airbnb 숙소 비교 에이전트라는 이름이 자연스럽습니다. 복잡한 백엔드 없이도 의사결정 속도를 올려주는 작은 도구가 되기 때문입니다. 모바일 폭 390px 조건까지 같이 적어두면 저장해둔 페이지를 휴대폰에서 열었을 때도 카드가 무너지지 않습니다.
마지막 단계에서는 욕심을 줄이는 편이 낫습니다. 첫 버전이 나왔는데 갑자기 구조를 갈아엎기 시작하면 손댈 곳만 늘어납니다. /review는 사용자가 바로 불편해할 부분만 좁게 보는 용도로 쓰면 충분합니다. 숫자 계산이 맞는지, 카드 문장이 튀지 않는지, 390px에서 줄바꿈이 어색하지 않은지 정도만 확인하면 됩니다. 이 정도면 숙소 3곳을 두고 망설일 때 바로 써먹을 수 있는 첫 버전이 나옵니다.
숫자가 깨질 때는 입력 예시부터 손보면 됩니다
NaN이 뜨는 경우는 대부분 입력값에 142,000원처럼 쉼표나 원 글자가 같이 들어가서 생깁니다. 이때는 placeholder를 142000처럼 숫자만 보이게 바꾸고, 파서에서 숫자 외 문자를 지우게 해달라고 다시 요청하면 정리됩니다.
추천이 어색한 경우는 점수 기준이 불명확해서 생기는 일이 많습니다. CLAUDE.md에 가성비는 1박 총액 60, 평점 20, 도보 20처럼 숫자를 적어두면 방향이 또렷해집니다. 가격을 더 중시하는 여행인지, 위치를 더 중시하는 여행인지도 같은 자리에서 바로 바꿀 수 있습니다.
휴대폰에서 카드가 무너지는 경우는 대개 간격과 글자 크기 문제입니다. 이럴 때는 레이아웃 전체를 다시 짜기보다 카드 최소 높이, 탭 줄바꿈, 버튼 간격만 조정하는 편이 빠릅니다. 비교 도구는 꾸미는 시간보다 다시 열었을 때 바로 읽히는 쪽이 더 낫습니다.
예약 직전의 망설임을 줄이는 화면
이 글에서 가져가면 좋은 포인트는 대형 서비스를 만드는 일이 아니라, Claude Code로 기준을 먼저 고정하고 index.html 한 장으로 숙소 비교 흐름을 만드는 일입니다. 다음 단계로는 공유 링크 저장이나 여행 일정표 연결을 붙일 수 있겠지만, 지금 버전만으로도 후보 3개를 놓고 고민하는 시간을 꽤 줄일 수 있습니다. 여행 계획은 정보가 많다고 쉬워지지 않습니다. 같은 기준으로 잘 정리될 때 결정도 빨라집니다.
이런 글도 있어요
관련 검색어
- 🔍 Claude Code 사용법
- 🔍 Claude Code 비교
- 🔍 Airbnb 숙소 비교 에이전트 사용법
- 🔍 Airbnb 숙소 비교 에이전트 비교
- 🔍 여행 숙소 비교
- 🔍 AI 코딩 사용법
