Claude나 ChatGPT로 대화형 견적 계산기 만들기

Ilya SpiridonovIlya Spiridonov
12분 소요

서비스 가격은 알고 있지만, 잠재 고객이 직접 계산해 볼 방법은 마땅치 않습니다. 패키지를 고르고 페이지 몇 장을 추가하면서 합계가 어떻게 변하는지 보려면 먼저 견적을 보내 주기를 기다려야 합니다.

Claude와 ChatGPT는 요금표로 이런 계산기를 만들 수 있습니다. 가격과 규칙을 제공하면 AI가 페이지를 작성합니다. 숫자를 검증하고 대화에서 실제로 작동하는 파일을 꺼내는 일은 직접 해야 합니다. 이 글에서는 붙여 넣을 프롬프트와 검증용 합계 여섯 개로 두 과정을 설명합니다.

먼저 완성된 예제를 써 보세요. 패키지를 고르고 추가 페이지 수를 바꾼 다음 부가 서비스를 켜거나 꺼 보세요.

프로젝트

랜딩 페이지 1장과 수정 1회.

페이지당 $150.00, 최대 10장. 5장부터 추가 페이지 항목에 5% 할인.

부가 서비스

예상 금액

기본 가격
$800.00
추가 페이지0 × $150.00
$0.00
수량 할인추가 5장부터
$0.00
카피라이팅
$0.00
일회성 합계
$800.00
월간 지원매월 청구
$0.00
첫 청구 예상액일회성 합계와 첫 달 지원비
$800.00

예시용 견적입니다. 세금은 별도입니다. 최종 작업 범위와 가격은 제안서에서 확정합니다. 금액 단위: USD.

가격은 소규모 웹 디자인 에이전시를 가정한 임의의 금액이며 세금은 제외했습니다. 구성을 이해한 뒤 자신의 요금으로 바꾸세요.

가격과 규칙 정리하기

프롬프트보다 먼저 숫자를 정리하세요. AI는 설명한 대로 만들기 때문에 요금표가 모호하면 계산기도 모호해집니다. 이 예제에는 가격 여섯 개와 할인 규칙 하나가 있습니다.

항목가격청구 방식
Basic 패키지$800일회성
Standard 패키지$1,200일회성
Plus 패키지$1,800일회성
추가 랜딩 페이지장당 $150, 0~10장일회성
카피라이팅 옵션$200, 선택 사항일회성
월간 지원$75, 선택 사항매월

여기에 세 가지 규칙을 더합니다.

  • 추가 페이지가 다섯 장 이상이면 추가 페이지 항목 전체에 5% 할인을 적용합니다. 패키지와 카피라이팅은 할인하지 않습니다.
  • 월간 지원은 일회성 합계에서 제외합니다. 매월 내는 요금과 제작비는 서로 다른 약정이기 때문입니다.
  • 첫 청구 예상액은 일회성 합계에 한 달 지원비를 더한 금액입니다.

초깃값은 Basic, 추가 0장, 두 옵션 모두 꺼짐입니다. 페이지 수가 비어 있거나 음수, 소수, 10 초과이면 입력란 옆에 오류를 표시하고 수정할 때까지 합계를 숨깁니다.

AI에 요청하기 전에 직접 답을 계산하세요. 모든 버전은 다음 여섯 가지를 통과해야 합니다.

  • 최소 구성. Basic, 추가 0장, 옵션 없음. 일회성 $800.00, 월간 $0.00, 첫 청구 $800.00.
  • 수량. Standard, 추가 2장, 옵션 없음. 일회성 $1,500.00, 월간 $0.00, 첫 청구 $1,500.00.
  • 부가 서비스. Standard, 추가 2장, 카피라이팅. 일회성 $1,700.00, 월간 $0.00, 첫 청구 $1,700.00.
  • 할인 기준 직전. Standard, 추가 4장, 카피라이팅. 일회성 $2,000.00, 월간 $0.00, 첫 청구 $2,000.00.
  • 할인 시작 수량. Standard, 추가 5장, 카피라이팅과 지원. 일회성 $2,112.50, 월간 $75.00, 첫 청구 $2,187.50.
  • 최대 구성. Plus, 추가 10장, 카피라이팅과 지원. 일회성 $3,425.00, 월간 $75.00, 첫 청구 $3,500.00.

이 합계들은 계산기와 별도로 산출했으며 위 계산기는 여섯 결과와 모두 일치합니다. 요금표, 세 규칙, 여섯 결과를 프롬프트에 넣고, 나중에 검증할 때 쓸 결과를 보관하세요.

Claude에서 만들기

주된 방법은 Claude를 이용하는 것입니다. 대화 옆에 실제로 작동하는 도구인 대화형 아티팩트를 만들 수 있기 때문입니다. Anthropic은 Free, Pro, Max, Team, Enterprise에서 아티팩트를 제공한다고 안내하며, 코드 실행 및 파일 생성 설정이 켜져 있어야 합니다.

프롬프트 붙여 넣기

claude.ai나 데스크톱 앱에서 새 대화를 여세요. 첫 문장을 외부 리소스 없이 하나로 완결되는 독립형 대화형 아티팩트로 만들어 주세요.로 시작하세요. 대화 속 일시적인 시각 자료 대신 계속 쓸 수 있는 아티팩트를 받기 위한 지시입니다. 이어서 아래 프롬프트를 넣고 마지막에 표시된 자리에 요금표, 세 규칙, 여섯 예상 결과를 붙이세요.

소규모 웹 디자인 에이전시를 위한 실제로 작동하는 대화형 견적 계산기를 만들어 주세요.
아래에 요금표와 가격 규칙을 제공합니다. 해당 값을 정확히 사용하세요.
규칙이 없거나 서로 모순되면 임의로 정하지 말고 먼저 질문하세요.

결과물은 하나로 완결되는 독립형 아티팩트입니다. 미리보기와 함께
quote-calculator.html이라는 완전한 다운로드 파일 하나를 제공하세요.
HTML, CSS, JavaScript를 그 파일 안에 넣고 외부 글꼴, 이미지, 스크립트 등을
불러오지 마세요. 설치, 외부 라이브러리, AI 호출, 서버 없이
브라우저에서 파일을 여는 것만으로 작동해야 합니다.

패키지 선택 메뉴, 추가 페이지 수 입력란, 카피라이팅과 월간 지원 체크박스를
넣으세요. 입력이 바뀌면 예상 금액을 갱신하세요. 기본 가격, 추가 페이지 요금,
할인, 카피라이팅, 일회성 합계, 월간 지원, 첫 청구 예상액을 각각 이름과 함께
분리해 표시하세요. USD 금액을 소수점 두 자리로 표시하세요.

'예시용 견적입니다. 세금은 별도입니다. 최종 작업 범위와 가격은 제안서에서
확정합니다.'라는 안내와 초기화 버튼을 넣으세요.

추가 페이지 수는 0~10 사이의 정수여야 합니다. 비어 있거나 유효하지 않으면
입력란 옆에 오류를 표시하고 수정할 때까지 합계를 숨기세요.
Basic, 0장, 옵션 꺼짐으로 시작하세요.

명확한 레이블, 눈에 보이는 키보드 포커스, 휴대폰에서 읽기 쉬운 조작부를 사용하세요.
고정 ID는 package, extra-pages, copywriting, monthly-support, reset입니다.
요금은 이름을 붙인 설정 블록에 모으세요.
연락처 수집, 주문 전송, 선택 저장, 결제는 하지 마세요.
추적 코드를 넣지 마세요. 호스팅과 추적은 별도입니다.

전달하기 전에 제공된 예상 결과 표와 대조하세요.
수정 사항을 보고하고 최종 HTML 파일을 주세요.

요금표, 공식, 예상 결과:
[여기에 제공된 표를 붙여 넣으세요.]

자신의 프롬프트로 바꾸더라도 세 부분은 유지할 만합니다. 규칙이 없을 때 질문하게 하면 고객보다 먼저 가격 규칙의 빈틈을 찾습니다. 외부 리소스 없는 단일 파일을 요구하면 계산기를 어디든 옮겨 쓸 수 있습니다. 마지막 표 대조는 첫 검증이며 직접 하는 검증을 대신하지는 않습니다.

붙여 넣기보다 파일이 편하다면 + 버튼의 Add files or photos를 이용하거나 채팅에 끌어 놓아 rate-card.csv를 첨부하세요. Anthropic은 CSV를 지원 문서 형식으로 안내합니다.

파일에는 가격, 규칙, 합계 공식이 들어 있습니다. 프롬프트의 마지막 두 줄을 다음 지시로 바꾸고 그 아래에 여섯 예상 결과만 붙이세요.

요금과 규칙은 첨부한 rate-card.csv에 있습니다. 읽어 낸 요금과 규칙을 확인한 다음,
외부 리소스 없이 하나로 완결되는 독립형 파일로 계산기를 만들어 주세요.

첫 버전 살펴보기

패키지 메뉴, 추가 페이지 수 입력란, 옵션 체크박스 두 개, 초기화 버튼, 일곱 개의 개별 금액이 보여야 합니다. 기본 가격, 추가 페이지, 할인, 카피라이팅, 일회성 합계, 월간 지원, 첫 청구 예상액입니다. 입력을 바꾸면 버튼을 누르지 않아도 계산이 갱신되어야 합니다.

수정 요청하기

합계가 틀리면 사람에게 설명하듯 어떤 경우가 잘못되었고 얼마를 기대했는지 알려 주세요.

잘못된 합계마다 원인이 되는 규칙이 있습니다. Standard, 추가 5장, 카피라이팅과 지원이면 $2,112.50이어야 합니다. 일회성 합계가 $2,042.50이면 추가 페이지만이 아니라 전체 합계에 할인한 것입니다. $2,150.00이면 할인을 빠뜨린 것입니다.

페이지 수를 지웠는데 이전 합계가 남거나 NaN이 보인다면 직접 요청하세요. '추가 페이지 수가 비어 있으면 입력란 옆에 오류를 표시하고 합계를 숨겨 주세요. 외부 리소스 없는 독립형 파일 하나를 유지하세요.' 한 메시지에서 한 가지씩 바꾸고 실패했던 경우를 다시 검증하세요.

파일 내보내기

숫자가 맞으면 대화에서 파일을 꺼내세요. Claude의 Design 템플릿으로 만들었다면 Export 버튼에서 독립형 HTML을 선택합니다. Anthropic의 아티팩트 안내는 템플릿 아티팩트의 조작을 Export로 부르며, Claude Design 도움말은 독립형 HTML을 내보내기 형식으로 안내합니다.

HTML 옵션이 없다면, 외부 리소스 없이 하나로 완결되는 quote-calculator.html 파일로 전체 계산기를 만들어 다운로드할 수 있게 해 달라고 요청하세요.

기존 요금표를 Claude Cowork에서 사용하기

Cowork는 CSV 첨부 대신 폴더를 활용하는 작업 방식을 제공합니다. Claude가 컴퓨터의 폴더에서 파일을 읽고 완성한 계산기를 같은 곳에 저장하므로 업로드나 다운로드가 필요 없습니다. Anthropic은 연결한 폴더에서 로컬 파일 읽기와 쓰기가 가능하다고 설명합니다.

rate-card.csv를 폴더에 넣고 Claude 데스크톱 앱에서 연결하세요. Cowork는 유료 플랜에서 제공되며 Pro, Max, Team, Enterprise가 해당합니다.

동일한 프롬프트와 첫 문장을 사용하되, 요금표를 붙이라는 마지막 두 줄을 다음 지시로 바꾸세요. 가격과 규칙은 파일에 있으므로 그 아래에는 여섯 예상 결과만 붙입니다.

연결한 폴더의 rate-card.csv를 읽어 주세요. 읽어 낸 요금과 규칙을 확인하세요.
외부 리소스 없이 하나로 완결되는 독립형 HTML 계산기를 만들고,
그 폴더에 quote-calculator.html로 저장하세요. 원본 요금표는 바꾸지 말고
결과를 어디에 저장했는지 알려 주세요.

Cowork 작업은 클라우드에서 실행되며 폴더에는 데스크톱 앱을 통해 접근합니다. 작업 중에는 앱을 열어 두세요.

일부 계정에는 아직 Chat과 Cowork 선택이 따로 있습니다. 이런 경우 Cowork를 고르세요. Anthropic은 둘을 하나의 대화로 통합하고 있으며 Pro와 Max부터 순차 적용합니다. 통합된 계정은 일반 대화에서 같은 작업을 요청하고 이전처럼 데스크톱 앱에서 폴더를 연결하면 됩니다.

ChatGPT로 만드는 경우

요금표, 프롬프트, 여섯 검증 항목은 같고 생성과 다운로드 절차만 다릅니다. 같은 프롬프트, 요금, 규칙, 예상 결과를 ChatGPT에 넣으세요. 결과물도 외부 리소스 없는 독립형 quote-calculator.html 다운로드 파일입니다.

OpenAI 문서에 따르면 생성된 HTML 파일은 HTML 미리보기가 지원되는 화면에서 대화형 미리보기로 열 수 있으며, 미리보기와 검토 도구는 사용하는 화면에 따라 다릅니다. 웹의 ChatGPT Work에서는 채팅에서 파일을 살펴보고 필요할 때 다운로드하라고 안내합니다.

ChatGPT는 파일 대신 Site, Canvas, HTML 미리보기 형태로 페이지를 제시하기도 합니다. ChatGPT로 만든 HTML 웹사이트 공유 가이드에서 각 경우를 설명합니다. 미리보기가 없으면 파일을 다운로드해 브라우저에서 여세요.

어느 경우든 공유할 버전은 다운로드 파일이므로 미리보기가 아닌 그 파일을 검증하세요.

내보낸 계산기 검증하기

보기에는 맞아도 계산이 틀릴 수 있습니다. 고객 앞에서 잘못된 합계가 나오면 돈이나 신뢰를 잃습니다. AI 대화를 닫고 다운로드한 파일에서 다음을 확인하세요.

  1. 두 번 클릭해 여세요. 로그인, 인터넷, 실행 중인 Claude 없이 브라우저에서 작동해야 합니다.
  2. Standard, 추가 2장, 카피라이팅을 선택하세요. 일회성 합계가 $1,700.00이어야 합니다.
  3. 4장으로 바꾸면 할인 없이 $2,000.00입니다. 5장으로 바꾸고 월간 지원을 켜면 일회성 $2,112.50, 월간 $75.00, 첫 청구 $2,187.50이며 할인 항목은 -$37.50이어야 합니다.
  4. 페이지 입력을 지우고 -1, 2.5, 11도 넣어 보세요. 모두 입력란 옆에 오류가 뜨고 고칠 때까지 합계가 숨겨져야 합니다.
  5. 초기화를 누르세요. Basic, 0장, 두 옵션 꺼짐으로 돌아가 $800.00이 보여야 합니다.
  6. 여섯 경우 중 나머지도 확인하세요. 마지막으로 Plus, 10장, 두 옵션을 켜면 $3,425.00, $75.00, $3,500.00입니다.
  7. 브라우저를 휴대폰 폭으로 좁히거나 휴대폰에서 파일을 여세요. 가로 스크롤이 없어야 하고 조작부를 쉽게 누를 수 있어야 합니다.
  8. 마우스 대신 키보드를 쓰세요. Tab으로 모든 조작부에 이동하고 포커스 테두리가 보여야 하며, Space로 체크박스를 전환할 수 있어야 합니다. Mac의 Safari에서는 키보드 설정의 키보드 탐색이 켜져 있어야 Tab이 버튼과 다른 조작부에 도달합니다.

그다음 텍스트 편집기로 파일을 여세요. 요금이 이름 있는 블록 한 곳에 모여 한 번만 나타나야 합니다. 나중에는 이 블록을 직접 바꾸거나 AI에 수정을 요청합니다.

비공개 숫자는 파일에서 제외하세요

파일을 여는 누구나 코드를 볼 수 있으므로 내부 원가, 마진, 승인 기준액을 넣지 마세요. 수신자가 자기 파일을 편집할 수 있으므로 브라우저 계산으로 승인된 가격을 강제할 수도 없습니다.

고객과 계산기 공유하기

파일 대신 링크를 보내세요. 이메일과 클라우드 저장소는 HTML을 소스 코드로 보여 주거나 차단하는 경우가 많습니다. 고객에게 HTML 파일 공유하기 가이드가 자세한 이유를 설명합니다.

Claude에서도 아티팩트를 공유할 수 있으며 선택지는 플랜과 조직 설정에 따라 다릅니다. Anthropic의 공유 문서에 따르면 새로 공유된 아티팩트를 열려면 Claude 계정이 필요합니다. 예전에 채팅에서 게시한 아티팩트는 예외입니다. Claude를 쓰는 동료에게는 적합하지만 계정이 없는 고객에게는 한 단계가 추가됩니다.

누구나 열 수 있는 링크가 필요하면 내보낸 파일을 HTML 제공이 가능한 호스트에 올리세요. 저희 제품 HummingDeck이 이를 지원하며 HTML 공유 페이지에 자세한 내용이 있습니다.

단일 HTML 파일은 무료 플랜에서도 사용할 수 있습니다.

  1. 문서 라이브러리에서 문서 추가를 선택하고 quote-calculator.html을 고르세요. 파일은 HTML 업로드 요구 사항을 충족해야 합니다.
  2. 처리가 끝나면 새 링크를 누르고 개인 링크를 선택하세요. 먼저 자신용 링크를 만들고 테스트임을 알 수 있게 이름을 붙입니다.
  3. 고객이 하듯 비공개 창에서 테스트 링크를 열고 검증을 반복하세요. 뷰어는 격리된 프레임에서 파일을 실행하므로 로컬에서 통과했다고 수신자 링크도 작동하는 것은 아닙니다.
  4. 같은 방식으로 고객의 개인 링크를 만들고 보내세요. 테스트 방문은 테스트 링크에만 남으므로 고객 링크는 기록 없이 시작합니다. 고객이 열면 문서의 링크 영역에서 해당 링크의 조회 기록을 확인하세요.

문서가 여러 개라면 계산기, 고정 제안서, 사례 연구를 딜룸에 함께 두세요. 고객은 링크 하나만 열면 됩니다. 무료 플랜에서는 문서 최대 세 개를 담은 룸 하나를 쓸 수 있으며, 웹 디자인 제안서 템플릿을 고정 제안서로 사용할 수 있습니다.

예상 금액과 활동 기록이 알려 주는 것

계산기와 제안서의 역할은 다릅니다. 계산기는 구매자가 옵션과 예상 금액을 살펴보는 도구이고, 약속하는 가격은 직접 발행하는 고정 제안서에 담습니다.

고객이 제안서에 응답하도록 하려면 Pro와 Business의 제안서 링크로 수락, 변경 요청, 거절을 기록할 수 있습니다. 이는 제안서 문서에 연결된 업무 응답 기록이며 서명이나 계산기 화면의 금액을 수집하지 않습니다.

무료 플랜의 문서 페이지에는 총 조회 수, 고유 방문자, 체류 시간, 평균 완료율이 표시됩니다. Starter 이상에서는 페이지별 분석과 지원되는 클릭도 제공합니다. HTML 페이지에 분석 추가하기 가이드에서 분석 스크립트와 비교합니다. 계산기의 버튼, 체크박스, 드롭다운, 숫자 입력란을 클릭하면 링크 클릭으로 집계하며 방문자와 세션별 횟수를 확인할 수 있습니다.

활동 기록이 보여 주는 범위

  • 조회는 링크가 요청되어 보기 세션이 시작되었다는 뜻입니다. 누가 열었는지 확인하는 것은 아니며 링크는 전달될 수 있습니다.
  • 클릭 수는 조작부가 얼마나 사용됐는지를 나타냅니다. HummingDeck은 선택한 옵션이나 화면의 합계를 보여 주지 않습니다. 숫자를 입력하거나 키보드로 드롭다운을 바꾸는 것은 클릭으로 집계하지 않습니다.
  • 어느 신호도 구매 의사를 증명하지 않습니다. 언제 후속 연락이 도움이 될지 판단하는 데 쓰세요.

CPQ는 configure, price, quote의 약자로, 계산기와는 다른 도구입니다. Salesforce는 제품 구성, 가격 규칙 적용, 할인과 승인 관리, 견적 생성, CRM·ERP 통합을 지원하는 소프트웨어라고 설명합니다.

이 계산기는 단순한 요금표 하나의 구성 선택과 가격 계산을 맡습니다. 견적 저장, 비공개 카탈로그, 할인 승인이 필요하면 견적 시스템을 사용해야 합니다.

자주 묻는 질문

견적 계산기를 만들려면 Claude Cowork가 필요한가요?

일반 Claude 대화면 충분합니다. 요금표를 붙이거나 rate-card.csv를 첨부하세요. Cowork는 연결된 폴더에서 파일을 읽고 완성된 계산기를 그곳에 저장하는 방식을 추가합니다. 폴더에 접근하려면 유료 Claude 플랜과 열린 상태의 데스크톱 앱이 필요합니다.

Excel이나 Google Sheets 가격표로 만들 수 있나요?

가격표를 CSV로 내보내 첨부하거나 표를 프롬프트에 붙이세요. 만들기 전에 읽어 낸 모든 요금과 규칙을 AI가 다시 말하게 하세요. 원본 시트와 대조하고 시트에서 직접 계산한 합계로 완성된 계산기를 검증하세요.

고객에게 대화형 견적 계산기를 어떻게 보내나요?

파일 대신 링크를 보내세요. 무료 플랜의 HummingDeck 링크처럼 HTML을 제공하는 호스트에 올리거나, 고객에게 Claude 계정이 있다면 아티팩트를 공유하세요. 먼저 자신의 별도 링크로 테스트해 테스트 방문이 고객 링크에 기록되지 않게 하세요.

견적 계산기는 CPQ 소프트웨어와 같은가요?

계산기는 고정 가격표로 예상 금액을 보여 줍니다. CPQ는 가격 규칙과 할인 승인 적용, 견적 생성, CRM·ERP 통합도 수행합니다. 계산기로 옵션을 살펴보게 한 뒤 약속하는 가격은 고정 제안서로 보내세요.

나중에 가격을 어떻게 바꾸나요?

파일의 이름 있는 요금 블록을 수정하거나 AI에게 같은 독립형 파일을 바꾸도록 요청한 뒤 여섯 검증을 반복하세요. 이후 HummingDeck 문서의 교체 기능을 쓰면 기존 링크가 유지됩니다. 활성 제안서 링크가 있으면 교체할 수 없으므로 먼저 그 링크를 취소하세요.

계산기가 견적을 이메일로 보내거나 고객 선택을 저장할 수 있나요?

이 글의 버전은 브라우저에서 계산하는 데까지만 동작합니다. 이메일 발송, 선택 저장, 결제에는 페이지 뒤의 폼 서비스, 데이터베이스, 견적 시스템이 필요합니다. 계산기에서는 제외하고 약속할 가격을 고정 제안서로 보내세요.

작성자 소개

Ilya Spiridonov는 HummingDeck 창업자입니다. HummingDeck은 독립형 HTML 파일을 추적 가능한 링크로 외부 수신자에게 제공하는 문서 공유 플랫폼입니다.

출처

견적 계산기를 링크로 공유하세요

관련 글: