Claude Artifacts로 업무용 견적 계산기 만들기 — 코드 없이 5단계
Claude Artifacts 업무용 계산기는 코드를 한 줄도 쓰지 않고 만들 수 있으며, 다섯 가지 지시문만으로 입력 오류까지 막는 견적 도구를 완성할 수 있습니다.
완성본은 여러 품목의 할인과 부가세를 계산하고 잘못된 값이 들어오면 그 자리에서 오류를 띄웁니다.
이 실습은 Claude 웹이나 데스크톱에서 진행하며, 시작하기 전에 필요한 기능을 켜야 합니다.
무엇을 만들까요
이번에 만들 결과물은 품목별 금액과 최종 합계를 한 화면에서 보여주는 업무 견적 계산기입니다.
각 행에 품목명·수량·단가·할인율을 넣고 부가세 포함 여부를 고르면 됩니다.
계산기는 공급가액과 할인액, 부가세, 최종 금액을 원 단위로 나눠 보여줍니다.
외부 API나 로그인, 서버, 데이터베이스를 연결하지 않은 단일 화면 도구입니다.
전체 구조는 다섯 번의 대화로 완성됩니다
Artifact는 일반 답변과 분리된 창에서 열리는 독립형 결과물입니다.
첫 단계에서는 화면부터 만들지 않고 입력값과 계산 규칙을 먼저 정해 둡니다.
그다음 첫 화면을 만든 뒤 여러 품목을 다루는 기능을 차례로 붙입니다.
입력 오류까지 막고 나면 내려받기와 공유로 마무리하면 끝입니다.
시작 전에 무엇을 준비해야 할까요
준비물은 Claude 웹이나 Claude Desktop을 사용할 수 있는 계정 하나면 충분합니다.
Anthropic의 2026년 7월 22일 표기 안내에 따르면 Artifact는 Free·Pro·Max·Team·Enterprise에서 지원됩니다.
Free·Pro·Max에서는 Settings > Capabilities의 Code execution and file creation을 켜야 합니다.
Claude Code의 Artifact는 조건이 다르므로 무료 실습은 웹이나 데스크톱에서 하세요.
실제 고객명과 계약 단가 대신 공개해도 괜찮은 시험용 값으로 시작하는 편이 안전합니다.
단계별 프롬프트를 그대로 넣어봅니다
아래 지시문은 순서를 바꾸지 말고 같은 대화에 이어서 넣으세요.
매번 새 화면을 만들기보다 현재 Artifact를 수정해 달라고 해야 작업 흐름이 이어집니다.
1단계. 계산 규칙부터 설계합니다
첫 요청에는 코드를 만들지 말라고 분명히 적어 계산 규칙에만 집중하도록 합니다.
제가 반복하는 견적 계산 업무를 작은 도구로 바꾸고 싶습니다. 품목명, 수량, 단가, 할인율, 부가세 포함 여부를 입력하면 최종 견적을 계산하는 도구입니다. 아직 코드는 만들지 말고, 필요한 입력값과 계산식, 결과값, 실수하기 쉬운 조건을 표로 설계해 주세요.답변을 받으면 필요한 입력값과 결과값이 빠지지 않았는지 먼저 살펴봅니다.
품목 금액은 수량과 단가를 곱하고 할인액은 품목 금액에 할인율을 곱한 값입니다.
공급가액에서 할인액을 빼고 부가세를 선택하면 공급가액의 10%를 더합니다.
2단계. 첫 번째 Artifact를 만듭니다
계산 규칙이 맞다면 단일 페이지 HTML 형태의 Artifact를 요청할 차례입니다.
방금 정한 규칙으로 ‘업무 견적 계산기’를 Artifact로 만들어 주세요. 하나의 단일 페이지 HTML 파일로 구성하고 외부 API, 로그인, 서버, 데이터베이스는 사용하지 마세요. 처음 버전에는 품목명, 수량, 단가, 할인율, 부가세 포함 여부 입력란을 넣어 주세요. 품목 금액, 할인액, 공급가액, 부가세, 최종 금액을 원 단위와 천 단위 쉼표로 보여 주세요. 입력값을 바꾸면 결과가 즉시 갱신되고, 코딩을 모르는 사람도 이해할 수 있는 한국어 화면으로 만들어 주세요. 모바일에서도 입력하기 편하게 구성해 주세요.첫 버전에는 품목 하나의 입력 화면과 계산 결과가 함께 보여야 합니다.
수량이나 단가를 바꿨을 때 결과가 즉시 달라지는지도 확인해 보세요.
모바일 화면에서 입력칸이 겹치면 다음 요청에서 폭과 간격을 고쳐 달라고 하면 됩니다.
3단계. 여러 품목을 입력하게 만듭니다
한 품목만 계산되면 실제 견적 업무에서 금방 답답해집니다.
현재 Artifact를 수정해 주세요. 품목을 여러 개 입력할 수 있도록 ‘항목 추가’ 버튼을 만들고, 각 행에는 품목명·수량·단가·할인율 입력란과 삭제 버튼을 넣어 주세요. 행마다 공급가액을 표시하고, 화면 아래에는 전체 공급가액·전체 할인액·전체 부가세·최종 합계를 따로 보여 주세요. 기존 디자인과 계산 규칙은 유지해 주세요.각 행에는 입력란과 삭제 버튼, 해당 품목의 공급가액이 함께 보여야 합니다.
화면 아래에는 전체 공급가액과 할인액, 부가세, 최종 합계가 구분되어야 합니다.
항목을 두 개 추가한 뒤 한 행을 삭제하고 합계가 다시 잡히는지 시험해 보세요.
4단계. 잘못된 입력을 막습니다
입력 검사는 계산식 앞에 세우는 안전 난간이자 이번 완성본의 핵심입니다.
현재 계산기에 입력 검사를 추가해 주세요. 수량은 1 이상의 정수만, 단가는 0 이상의 숫자만, 할인율은 0부터 100까지만 받게 해 주세요. 빈칸, 음수, 문자, 소수 수량, 100을 넘는 할인율은 계산에 반영하지 말고 해당 입력란 바로 아래에 이해하기 쉬운 한국어 오류 문구를 보여 주세요. 잘못된 값이 하나라도 있으면 최종 합계를 확정값처럼 표시하지 마세요. NaN이나 Infinity가 화면에 나타나지 않게 막아 주세요. 수량 2개, 단가 100000원, 할인율 10%, 부가세 포함일 때 공급가액 180000원, 부가세 18000원, 최종 금액 198000원이 나오는지도 확인하고 틀리면 수정해 주세요.수량은 1 이상의 정수만 받고 단가에는 0 이상의 숫자만 들어가야 합니다.
빈칸과 음수, 문자, 소수 수량, 100을 넘는 할인율은 합계에 넣지 않습니다.
제시한 시험값에서는 공급가액 180000원과 최종 금액 198000원이 나와야 합니다.
값이 다르거나 NaN이 보이면 계산식과 오류 처리를 같은 Artifact에서 다시 고쳐 달라고 하면 됩니다.
5단계. 내려받기 전에 정리합니다
공유할 계산기에는 시험값과 외부 전송 기능을 남기지 않는 편이 좋습니다.
공유하기 전에 현재 Artifact를 최종 정리해 주세요. 예시 입력값은 모두 비우고 ‘전체 초기화’ 버튼을 추가해 주세요. 외부 전송 코드, 분석 도구, 광고, 추적 스크립트는 넣지 마세요. 화면 아래에는 ‘입력한 값은 자동으로 장기 저장되지 않습니다’라는 안내를 표시해 주세요. 전체 코드를 다시 점검하고 단일 HTML 파일로 내려받아 사용할 수 있는 형태인지 확인해 주세요.완성한 파일은 Artifact 창 오른쪽 아래에 있는 다운로드 기능으로 내려받을 수 있습니다.
Free·Pro·Max의 Publish는 비공개 저장이 아니라 링크로 공개하는 게시 기능입니다.
Team·Enterprise의 Share는 같은 조직 계정으로 로그인한 구성원에게 공유하는 방식입니다.
자주 막히는 부분
Artifact가 열리지 않으면 기능 설정부터 확인한 다음 독립된 도구로 만들어 달라고 다시 요청합니다.
공식적으로 정해진 무료 생성 횟수는 없고 대화 길이와 사용하는 기능에 따라 한도가 달라집니다.
숫자가 틀리면 디자인보다 먼저 4단계의 시험값으로 계산식부터 다시 봅니다.
내려받은 HTML이 오프라인에서 완전히 실행된다는 보장은 없으므로 파일을 직접 열어 시험해야 합니다.
무료 플랜에서는 입력값을 영구 저장하는 기능이 확인되지 않았으므로 새로고침 뒤에도 유지된다고 가정하면 안 됩니다.
견적 계산기는 어디까지 확장할 수 있을까요
계산 규칙이 안정되면 수수료 계산기나 일정 산출 도구도 같은 방식으로 만들 수 있습니다.
입력 내역을 다음 접속 때도 보관하려면 영구 저장에 필요한 조건을 따로 따져야 합니다.
개인적으로는 화면 꾸미기보다 잘못된 값을 거절하도록 설계하는 일이 먼저라고 봅니다.
먼저 다섯 지시문을 같은 대화에 차례로 붙여 넣어 빈 계산기를 완성해 보세요.
그다음 정상값과 빈칸, 음수, 경계값을 넣어 오류 문구와 합계를 각각 확인합니다.
공유하기 전에는 실제 업무 정보를 모두 지우고 빈 계산기 파일을 따로 내려받습니다.
