클로드 아티팩트로 만들 수 있는 것 — 채팅창 옆에 뜨는 작은 프로그램
계산기, 체크리스트, 간단한 게임, 표 정리 도구. 설치 없이 무료 플랜에서 됩니다. 어디까지 되고 어디서부터 Claude Code인지.
claude.ai에서 "계산기 만들어 줘"라고 하면 답이 글로 오지 않습니다. 채팅창 옆에 실제로 눌러 볼 수 있는 화면이 뜹니다. 이걸 아티팩트(Artifact)라고 부릅니다. 바이브코딩의 첫 경험이 대부분 여기서 시작됩니다. 설치 없음, 무료 플랜에서 됨.
만들 수 있는 것
| 종류 | 예 |
|---|---|
| 계산기 | 회식비 N분의 1, 부가세 포함 견적, 근태 수당 |
| 정리 도구 | 붙여 넣은 데이터를 표로, 합계·정렬·필터 |
| 체크리스트·양식 | 행사 준비 체크리스트, 점검표 |
| 안내 화면 | 한 장짜리 소개 페이지 초안, 메뉴판 |
| 작은 게임 | 지뢰찾기, 퀴즈 — "코딩 안 했는데 게임이 돌아간다"를 체감하는 용도 |
| 문서 | 보고서·기획서 초안을 편집 가능한 문서로 |
| 그림·도표 | 흐름도, 조직도, 간단한 차트 |
수업 1주차에 만드는 것이 이것입니다. 말 한마디 → 화면 → 하나 고치기. 이 반복이 바이브코딩의 전부이고, 아티팩트가 가장 짧은 길입니다.
시작 — 30초
회식비 N분의 1 계산기를 만들어 줘. 총액과 인원을 넣으면 1인당 금액이 크게 나오게.
뜬 화면에 숫자를 넣어 봅니다. 그리고 하나만 고칩니다. "1인당 금액을 100원 단위로 올림해 줘." 다시 눌러 봅니다. 여기까지가 바이브코딩의 기본 단위입니다.
잘 시키는 법 — 채팅 프롬프트와 같습니다
역할·맥락·출력형식. 화면을 만들 때는 출력형식이 곧 화면 설명입니다.
너는 소규모 행사 담당자를 돕는 도구를 만들어. 행사 준비 체크리스트를 만들어 줘. - 항목: [장소 예약, 명단 확인, 다과, 현수막, 마이크] - 각 항목 옆에 담당자 이름 칸과 완료 체크 - 완료된 항목은 회색으로 - 위에 "완료 3/5"처럼 진행률 표시 - 폰에서 한 손으로 체크할 수 있게 크게
고칠 때는 "어디를 · 어떻게 · 나머지는 그대로". "진행률 글자를 두 배로, 나머지는 그대로."
한계 — 여기서부터 Claude Code
아티팩트는 채팅창 안에 사는 화면입니다. 그래서 세 가지가 안 됩니다.
- 저장이 안 남습니다. 화면에 입력한 값은 대화를 닫으면 사라집니다. 기록이 필요하면 "결과 복사 버튼"을 달거나, 파일로 내려받습니다
- 내 컴퓨터에 파일이 안 생깁니다. 화면을 파일로 받아 쓸 수는 있지만, 여러 파일로 된 홈페이지를 만들고 사진을 넣고 고쳐 가기엔 벅찹니다
- 인터넷 주소가 없습니다. 공유 링크로 보여 줄 수는 있지만, 내 주소로 공개하고 동료가 계속 쓰게 하려면 GitHub·Vercel이 필요합니다
이 셋이 필요해지는 순간이 Claude Code로 넘어가는 순간입니다. 채팅 Claude는 말까지, 아티팩트는 화면까지, Claude Code는 파일과 주소까지. 수업의 3주차가 그 경계입니다.
아티팩트를 잘 쓰는 순서
- 먼저 아티팩트로 만듭니다. 15분 안에 화면이 뜹니다. 내 업무 규칙이 맞는지 여기서 확인합니다
- 실제 숫자를 넣어 봅니다. 지난달 견적 2건. 맞으면 규칙이 맞는 것
- 쓸 만하면 Claude Code로 옮깁니다. "이 계산기를 index.html 파일 하나로 만들어줘. 설치 없이 더블클릭으로 열리게." 그 파일을 폴더에 넣고 GitHub·Vercel로 공개
아티팩트는 시제품, Claude Code는 제품입니다. 시제품에서 규칙을 확인하고 제품으로 옮기면, 제품 단계에서 헤매는 시간이 줄어듭니다.
정리
계산·정리·체크·안내처럼 "저장 없이도 쓸모 있는 것"은 아티팩트로 오늘 바로 됩니다. 무료 플랜, 설치 없음. 저장·파일·주소가 필요해지면 Claude Code. 처음 시작하는 분은 여기서 시작하세요. 말 한마디에 화면이 뜨는 걸 한 번 보면 다음이 궁금해집니다.
같이 읽기
- 바이브코딩이란 — 비개발자가 이해하는 한 줄 정의코드를 쓰는 대신 말로 시키고, 결과를 보고, 다시 말로 고치는 방식. 개발자의 코딩과 무엇이 같고 무엇이 다른지 정리합니다.기초
- 코딩 경험 없이 바이브코딩이 되나요 — 정직한 답됩니다. 다만 "코딩이 필요 없다"는 말은 반만 맞습니다. 되는 것과 안 되는 것, 그리고 막히는 지점을 있는 그대로 적었습니다.기초 · 수업
- 챗GPT와 클로드 — 뭐가 다르고 언제 뭘 쓰나우열이 아니라 역할입니다. 일상 질문은 쓰던 도구로, 일을 맡기고 만드는 건 Claude로. 그리고 중요한 답은 둘 다에게 물어봅니다.기초