부동산 경매 투자 웹앱 소개
부동산 경매 투자를 하면서 낙찰 물건별로 대출, 이자, 월세, 비용 등을 엑셀로 따로 관리하다 보니 한눈에 파악이 어려웠습니다. 전체 포트폴리오 수익성을 실시간으로 확인하고, 모바일에서도 언제든지 조회·입력할 수 있는 도구가 필요했습니다. 코딩 경험 없이 Claude Code만으로 실제 사용 가능한 웹앱을 만들 수 있는지 시도해봤습니다.
웹앱 개발 진행 방법
사용 도구: Claude Code (VSCode 익스텐션), Supabase (DB), Vercel (배포), GitHub (코드 관리)
Claude Code (VSCode 익스텐션)
AI에게 말로 설명하면 코드를 대신 작성해주는 도구입니다. "이런 기능을 만들고 싶다"고 대화하듯 요청하면 파일을 직접 생성하고 수정해줍니다. 코딩을 몰라도 됩니다.
GitHub (코드 관리)
작성된 코드를 인터넷에 저장하는 창고입니다. 구글 드라이브와 비슷하지만 코드 전용입니다. 언제 어떤 코드가 바뀌었는지 이력이 남고, 다른 도 구들과 연결하는 허브 역할을 합니다.
Supabase (DB)
앱에서 입력한 데이터를 저장하는 데이터베이스입니다. 프로젝트 정보, 비용, 수익 내역이 모두 여기에 저장됩니다. 엑셀 파일이 클라우드에 있다고 생각하면 이해하기 쉽습니다. 무료로 시작할 수 있습니다.
Vercel (배포)
만든 웹앱을 인터넷에 올려서 누구나 접속할 수 있게 해주는 서비스입니다. GitHub에 코드를 올리면 Vercel이 자동으로 감지해서 1~2분 안에 배포해줍니다. 별도 서버 지식 없이 무료로 사용 가능합니다.
4가지 도구의 흐름 요약
Claude Code → GitHub → Vercel → 웹앱 (모바일/PC 접속)
↕
Supabase (데이터 저장)Claude Code에게 원하는 기능을 대화하듯 요청하는 방식으로 진행했습니다. 별도로 코드를 작성하지 않았고, 요구사항을 설명하면 Claude가 파일을 직접 생성·수정했습니다.
주요 프롬프트 예시
"각 프로젝트를 들어가면 상단에 정보가 표시되도록 하고싶어. 표시하는 정보는 주소, 경매 낙찰일, 최저가, 낙찰가, 보증금, 대출액(대출율을 %로 표기), 이자율, 월이자금액, 보증금, 월세, 수익(월세-월이자금액으로) 표기하고 싶어"
"처음 접속을 하였을때 전체 프로젝트에 대한 요약과 각 항목들의 합산된 내역이 보이게 하고싶어"
구현된 기능
부동산 프로젝트별 경매 정보 관리 (낙찰가, 대출액, 이자율 등)
비용/수익 거래 내역 기록 및 기간별 조회
대출율, 월이자, 순수익 자동 계산
전체 포트폴리오 요약 대시보드
Supabase 연동으로 실시간 데이터 저장
Vercel 배포로 모바일에서도 접속 가능
한국사이트 스크린샷
대한항공 대한항공 대한항공 대한항공 대한항공 대한항공 대한항공
결과와 배운 점
배운 점
코딩 지식 없이도 요구사항을 구체적으로 설명하면 실제 동작하는 웹앱을 만들 수 있었습니다.
"모바일에서 접속하고 싶다"고 하면 반응형 레이아웃을 직접 수정해줬고, Vercel 배포 방법도 단계별로 안내해줬습니다.
시행착오
PowerShell 실행 정책 문제로
npm run dev가 안 돼서 Bash로 우회했습니다.Vercel 배포 시 TypeScript 타입 오류로 빌드가 두 번 실패했는데, 에러 로그를 그대로 붙여넣으니 Claude가 바로 원인을 찾아 수정해줬습니다.
모바일에서 레 이아웃이 깨졌을 때 스크린샷을 공유하니 문제를 정확히 파악하고 수정해줬습니다.
나만의 꿀팁
원하는 화면을 스크린샷으로 찍어 공유하면 훨씬 빠르게 수정됩니다.
Supabase SQL Editor에서 테이블 컬럼 추가할 때 Claude가 쿼리를 직접 작성해줘서 DB 지식 없이도 가능했습니다.
앞으로의 계획
매각 시 실현 수익률 계산 기능 추가
프로젝트별 서류/사진 첨부 기능
연간 세금 신고용 수익/비용 리포트 출력
