Claude Artifacts로 가계부 앱 직접 만들기 — 코딩 0줄 따라하기

요즘 "바이브 코딩"이라는 말이 자주 들립니다. 코드를 직접 치지 않고 AI에게 말로 시켜서 앱을 만드는 방식인데요. 막상 시작하려고 보면 터미널이니 깃허브니 알아야 할 게 많아서 비개발자에겐 진입장벽이 꽤 높습니다.

그런데 Claude Artifacts는 다릅니다. 채팅창에 "가계부 앱 만들어줘"라고만 쳐도 오른쪽 화면에서 바로 동작하는 앱이 뜹니다. 설치도, 명령어도 필요 없습니다.

이 글에서는 제가 직접 따라하며 만든 가계부 앱 사례를 단계별로 풀어드립니다. 프로그래밍을 한 번도 안 해본 분도 그대로 따라할 수 있게 썼습니다.

Claude Artifacts가 뭐길래

Claude Artifacts는 Anthropic이 만든 AI 챗봇 Claude의 부가 기능으로, 대화창 오른쪽에 실제로 작동하는 앱·문서·코드 결과물을 띄워주는 작업 공간입니다.

쉽게 말해 ChatGPT처럼 답변만 글로 받는 게 아니라, AI가 만든 결과물을 그 자리에서 클릭하고 입력해볼 수 있는 화면으로 보여주는 거죠. 가계부, 계산기, 퀴즈 앱 같은 간단한 웹 앱은 채팅 한두 번이면 완성됩니다.

항목	일반 ChatGPT 답변	Claude Artifacts
결과 형태	글·코드 텍스트	실제 동작하는 앱 화면
설치 필요	—	없음 (브라우저에서 바로)
수정 방법	코드 복사해 따로 작업	"여기 색 바꿔줘" 채팅으로 즉시
비개발자 친화도	낮음	높음

Anthropic 공식 소개에 따르면 Artifacts는 2024년 6월부터 제공된 기능이고, 글 작성 시점 기준 무료 플랜에서도 사용 가능합니다. 다만 무료는 하루 메시지 수에 제한이 있어서 복잡한 앱을 만들다 보면 중간에 막힐 수 있어요 (저도 두 번째 시도에서 한 번 막혔습니다).

가계부 앱 만들기 전 준비물

준비물은 사실상 없습니다. 인터넷이 되는 컴퓨터와 이메일 계정만 있으면 됩니다.

• [ ] claude.ai 접속해서 무료 계정 만들기 (구글 로그인 가능)
• [ ] 크롬·엣지·사파리 같은 최신 브라우저
• [ ] 약 20~30분의 여유 시간

스마트폰에서도 안 되는 건 아닌데, Artifacts는 화면이 좌우로 분할되기 때문에 PC나 태블릿 가로 화면이 훨씬 편합니다. 저는 13인치 노트북으로 작업했는데 답답함이 없었습니다.

💡 가입할 때 결제 정보는 안 넣어도 됩니다. 무료 플랜으로 충분히 따라할 수 있습니다.

첫 프롬프트: 뼈대부터 만들기

처음부터 욕심내서 "완벽한 가계부 만들어줘"라고 시키면 결과물이 산만해집니다. 원하는 기능을 항목으로 나눠서 알려주는 게 핵심입니다.

제가 실제로 처음 보낸 프롬프트는 이거였습니다.

간단한 가계부 웹 앱을 만들어줘. 다음 기능이 들어가면 좋겠어.

1. 날짜, 분류(식비/교통/쇼핑/기타), 금액, 메모 입력
2. 입력한 내역을 표로 보여주기
3. 각 항목 옆에 삭제 버튼
4. 화면 위쪽에 이번 달 총지출 합계 표시

디자인은 깔끔하고 모바일에서도 보기 좋게 해줘.
한국어로 만들어줘.

이 프롬프트를 보내고 약 1분쯤 기다리니 오른쪽 화면에 가계부 앱이 떴습니다. 입력칸을 채우고 "추가" 버튼을 누르면 아래 표에 행이 추가되고, 합계도 자동으로 계산됐습니다.

여기서 한 가지 짚을 점은, 이 앱의 데이터는 영구 저장이 아닙니다. 새로고침하면 다 사라집니다. Artifacts의 한계인데, 뒤에서 보완 방법을 다루겠습니다.

수정하고 살 붙이기

뼈대가 나왔으면 이제 채팅으로 살을 붙입니다. Artifacts의 진짜 강점이 여기에 있는데, 새 채팅을 쓸 필요 없이 같은 대화창에서 "이렇게 바꿔줘"라고만 말하면 됩니다.

제가 실제로 던진 추가 요청들입니다.

1. 분류에 "주거", "문화생활" 두 개 추가해줘
2. 표 아래에 분류별 지출 비율을 원형 차트로 보여줘
3. 입력하면 자동으로 오늘 날짜가 채워지게 해줘
4. 색감을 좀 더 따뜻한 베이지 톤으로 바꿔줘

네 가지를 한꺼번에 보냈는데, Claude가 모두 반영해서 새 버전을 만들어 줬습니다. 차트도 정말 깔끔하게 들어갔습니다 (recharts라는 시각화 라이브러리를 자동으로 가져다 쓴 듯합니다).

[이전 버전 화면]              [수정 후 화면]
┌─────────────┐              ┌─────────────┐
│ 입력 폼      │              │ 입력 폼(베이지)│
│             │              │             │
│ 내역 표      │      →       │ 내역 표      │
│             │              │             │
│             │              │ 원형 차트 🍩 │
└─────────────┘              └─────────────┘

다만 한 번에 너무 많은 요청을 던지면 일부가 누락되기도 합니다. 저는 두 번째 시도에서 "차트 색깔을 분류 색이랑 똑같이 맞춰줘"라는 요청이 무시돼서, 따로 한 번 더 보내야 했습니다.

데이터를 저장하는 법

앞서 말했듯 Artifacts 앱은 새로고침하면 데이터가 날아갑니다. 해결 방법이 두 가지 있습니다.

방법 1: localStorage 요청하기

다음 프롬프트를 추가로 보내면 됩니다.

입력한 내역을 브라우저에 자동 저장해서,
페이지를 새로고침해도 사라지지 않게 해줘.

localStorage는 브라우저가 컴퓨터 한 켠에 작은 메모장처럼 데이터를 보관해 주는 공간입니다. Claude가 알아서 이 기능을 코드에 넣어줍니다. 단, 같은 브라우저·같은 PC에서만 데이터가 유지됩니다. 다른 기기에선 못 봅니다.

방법 2: CSV로 내보내기 버튼 추가

여러 기기에서 쓰고 싶다면 이 방법이 현실적입니다.

화면 아래에 "엑셀로 내보내기" 버튼을 추가해줘.
누르면 모든 내역이 CSV 파일로 다운로드되게.

이렇게 하면 가계부 입력은 Artifacts에서 하고, 백업은 엑셀이나 구글 시트에 보관하는 식으로 쓸 수 있습니다. 저는 이 방식이 가장 실용적이었습니다.

저장 방식	장점	단점
localStorage	자동 저장, 빠름	같은 PC에서만
CSV 내보내기	영구 보관, 어디서나	매번 수동 다운로드
둘 다 적용	평소엔 자동, 가끔 백업	약간 복잡

저는 결국 둘 다 적용해 달라고 요청했고, 잘 작동했습니다.

자주 막히는 부분과 해결법

직접 따라하면서 제가 부딪힌 문제들입니다. 같은 곳에서 막힐 가능성이 높아 미리 적어둡니다.

오른쪽 미리보기 화면이 안 뜰 때

채팅창 입력란 아래쪽에 "Artifacts" 토글이 꺼져 있을 수 있습니다. 보통 기본값은 켜져 있는데, 가끔 꺼지는 경우가 있어요. 새 채팅을 열어 다시 시도하면 대부분 해결됩니다.

무료 한도 초과 메시지가 뜰 때

"You've reached your usage limit"이라는 영문 메시지가 뜨면 무료 한도를 다 쓴 상태입니다. 글 작성 시점 기준 약 5시간 뒤에 다시 풀립니다. 급하면 유료 플랜(월 20달러)으로 올려야 하는데, 가계부 정도라면 굳이 결제할 필요는 없다고 봅니다.

한국어가 깨져 보일 때

가끔 차트 라벨이나 버튼 글자가 영어로 나오는 경우가 있습니다. "버튼과 라벨 모두 한국어로 바꿔줘"라고 한 번 더 명확히 요청하면 해결됩니다.

앱이 갑자기 작동을 멈출 때

수정 요청을 여러 번 반복하다 보면 어느 순간 오류가 뜨면서 화면이 멈춥니다. 이때는 "방금 수정 전 버전으로 되돌려줘"라고 하거나, Artifacts 화면 위쪽의 버전 히스토리 버튼으로 이전 버전을 골라 다시 시작합니다. 처음부터 만들 필요는 없습니다.

솔직한 한계

좋은 점만 적으면 광고가 되니, 직접 만들어 본 사람으로서 아쉬운 점도 적습니다.

첫째, 본격적인 가계부 앱을 대체하긴 어렵습니다. 뱅크샐러드나 토스 같은 앱처럼 카드 내역 자동 연동, 알림, 통계 같은 기능은 안 됩니다. Artifacts로 만든 앱은 어디까지나 "직접 손으로 입력하는 단순 가계부"입니다.

둘째, 다른 사람과 공유가 어렵습니다. Artifacts 자체는 링크 공유 기능이 있긴 한데, 그 링크를 받은 사람도 Claude 계정이 있어야 합니다.

셋째, 모바일에서 매일 쓰기엔 번거롭습니다. 매번 claude.ai에 접속해서 대화창을 열고 Artifacts를 띄워야 하니, 휴대폰 홈 화면 아이콘처럼 바로 켜지진 않습니다.

그래서 저는 이 가계부 앱을 "한 달짜리 실험"이나 "특정 프로젝트 지출 추적용"으로 추천드립니다. 평생 쓸 가계부보다는, "AI로 앱이 진짜 만들어지네"를 체험하는 입문 프로젝트로 더 가치 있다고 느꼈습니다.

마무리

여기까지 따라오셨다면 이미 코드 한 줄 없이 자기만의 작은 앱 하나를 가진 셈입니다. 30분 전과 비교하면 꽤 큰 변화죠.

저도 처음엔 "AI가 만든 앱이 진짜 쓸 만하겠어?"라고 의심했는데, 직접 입력칸을 채우고 차트가 도는 걸 보니 생각이 바뀌었습니다. 완벽하진 않지만 "내 손으로 뭔가 만들 수 있다"는 감각이 생기는 게 가장 큽니다.

다음 단계로는 같은 방식으로 할 일 관리 앱, 운동 기록 앱, 독서 노트 앱 같은 걸 만들어 보시길 권합니다. 프롬프트 패턴이 거의 비슷해서, 이번 가계부를 한 번 만들어 봤다면 두 번째 앱부터는 10분 안에 나옵니다.

혹시 만들다 막히는 부분이 생기면, "방금 만든 가계부 코드에서 ○○ 부분만 바꿔서 다른 앱으로 변형해줘"라고 요청해 보세요. 0에서 시작하는 것보다 훨씬 깔끔하게 나옵니다.

함께 보면 좋은 글

• Claude Artifacts 예시 7가지 — 직접 만들어본 미니앱
• Claude Artifacts 사용법 10가지, 코딩 몰라도 앱처럼 쓰기
• Claude Fable 사용법과 보안 논란, 비개발자가 꼭 알아야 할 점