Claude Artifacts 사용법: 코딩 없이 계산기와 웹 도구 만들기

“할인 가격을 계산해 주는 작은 웹 도구를 만들고 싶은데, 코딩을 전혀 모르면 불가능할까요?” 직접 프로그램을 개발하려면 계산식뿐 아니라 입력창, 버튼, 화면 디자인과 오류 처리까지 신경 써야 합니다. 하지만 Claude의 Artifacts(아티팩트)를 이용하면 원하는 기능을 한국어로 설명해 작은 인터랙티브 도구의 초안을 만들고, 결과물을 대화하면서 수정할 수 있습니다. 이번 글에서는 가장 단순하면서도 쓸모 있는 예로 '할인가 계산기'를 만들겠습니다.

정가와 할인율을 입력하면 할인 금액과 최종 가격을 보여 주는 도구입니다. 계산기뿐 아니라 간단한 퀴즈, 학습 카드, 일정 점검표, 작은 시각화 도구를 만드는 원리도 같습니다. 처음 시작하는 분은 이 순서를 따라가면 됩니다. ① Artifacts 확인 → ② 요구사항 말하기 → ③ 계산기 미리보기 → ④ 수정 지시 → ⑤ 오류 테스트 → ⑥ 내보내기·공유 검토. 이 글은 2026년 10월 16일 기준 Claude 공식 도움말에 기초한 사용 안내입니다. 앱 화면·메뉴·템플릿·요금제는 업데이트될 수 있습니다. 실제 Claude 계정에서 만들어 확인한 사례가 아닌 교육용 따라 하기입니다.

이 글의 순서

1. Claude Artifacts는 무엇인가요?
2. 준비물과 계정 조건부터 확인하세요
3. 첫 작품: 할인 계산기의 기능을 한 문장으로 정해 봅시다
4. Claude에게 그대로 입력할 첫 프롬프트
5. 결과가 나오면 미리보기에서 무엇을 확인하나요?
6. 오류가 있거나 모양이 마음에 들지 않으면 이렇게 수정하세요
7. '코딩 없이 만들기'는 '검사 없이 쓰기'가 아닙니다
8. 계산기가 완성되면 어디에서 다시 찾나요?
9. 다른 사람에게 공유할 때 꼭 확인할 것
10. AI 기능이나 데이터 저장을 추가하고 싶다면?
11. 처음 사용할 때 자주 막히는 문제
자주 묻는 질문
마무리: 처음에는 작은 도구 한 개를 끝까지 점검하세요

1. Claude Artifacts는 무엇인가요?

Claude에서 질문하면 답변은 보통 채팅 메시지 안에 나타납니다. Artifacts는 그와 달리 답변을 독립적으로 보고, 수정하고, 다시 사용할 수 있는 결과물로 만드는 기능입니다. 예를 들어 “할인율 계산 공식 알려줘”라고 하면 채팅으로 설명을 받을 수 있습니다. “정가와 할인율을 입력하면 계산 결과가 나오는 작은 도구를 만들어줘”라고 요청하면, Claude가 이를 별도 결과물로 만들 수 있습니다. Artifacts로 다룰 수 있는 결과물에는 문서, 코드, 단일 페이지 웹 도구, 다이어그램, 디자인, 대시보드, 슬라이드 등이 있습니다. 모두 같은 기능을 갖춘 앱이라는 뜻은 아니며, 결과물 종류와 계정의 사용 권한에 따라 수정·내보내기 방식이 다릅니다.

알아둘 점: 2026년 Artifacts는 예전 영상과 다릅니다

2026년 9월 16일 이전 채팅에서 만들어진 일부 결과물은 공식 문서에서 '이전 버전(Legacy Artifacts)'이라고 구분합니다. 기존 작품은 계속 사용할 수 있지만, 새 결과물은 현재의 Artifacts 흐름으로 생성합니다. 오래된 영상에서 Publish 버튼을 눌러 공개하는 장면을 보더라도 지금 만든 결과물에서 같은 버튼이 보이지 않을 수 있습니다. 최신 결과물은 Share로 접근 권한을 설정하는 방법이 기본입니다.

2. 준비물과 계정 조건부터 확인하세요

가장 먼저 필요한 것은 Claude에 로그인할 수 있는 계정입니다. 공식 도움말에 따르면 채팅에서 Artifacts를 만드는 기본 기능은 Free, Pro, Max, Team, Enterprise에서 제공됩니다. 하지만 계정에 따라 사용 가능한 추가 기능이 다릅니다. 예컨대 연결 앱 접근이나 계속 남는 데이터 저장은 별도 조건이 있습니다. 무료 사용자에게 모든 고급 기능이 똑같이 제공되는 것은 아닙니다. 또한 Artifacts를 사용하려면 코드 실행·파일 생성 기능이 켜져 있어야 합니다. 개인 계정 확인 방법

Claude 설정을 엽니다.
Settings → Capabilities로 이동합니다.
Cloud code execution and file creation의 사용 가능 상태를 확인합니다.
꺼져 있다면 사용 목적과 권한을 이해한 후 활성화합니다. Team이나 Enterprise 계정은 조직 관리자의 설정이 적용될 수 있습니다. Artifacts 탭이 보이지 않거나 기능을 사용할 수 없더라도 무조건 앱 오류라고 생각하지 말고 계정 설정·관리자 권한·기능 제공 상태부터 확인하세요.

기능	2026년 공식 도움말 기준	처음 사용할 때 할 일
채팅에서 Artifacts 만들기	Free 포함 주요 계정 제공	설정에서 실행·파일 생성 허용 확인
문서·슬라이드·디자인 템플릿	주요 계정 제공	Artifacts 탭이나 Output 메뉴 확인
대시보드 템플릿	일부 유료 플랜의 베타	계정 표시 여부 확인
연결 앱 사용	Pro·Max·Team·Enterprise	앱별 권한 확인
지속적 데이터 저장	Pro·Max·Team·Enterprise	개인/공유 저장 범위 확인

이번에 만들 단순 할인가 계산기는 외부 사이트 접속이나 개인정보 수집, 데이터 보관을 요구하지 않습니다. 처음부터 복잡한 기능을 켜기보다 작은 작품으로 사용법을 배우는 편이 좋습니다.

자체 제작 개념도 · EMFLS AI

3. 첫 작품: 할인 계산기의 기능을 한 문장으로 정해 봅시다

먼저 계산기가 어떻게 움직여야 하는지 정합니다.

입력할 값: 정가(원), 할인율(%).
계산할 값: 할인 금액과 할인된 최종 가격.
보여 줄 결과: 원화 숫자를 읽기 쉽게 표시.
오류 처리: 할인율이 0%보다 작거나 100%보다 크면 안내.
기타 조건: 모바일에서도 입력창과 버튼이 겹치지 않아야 함. 계산 공식 자체는 어렵지 않습니다. 최종 가격 = 정가 × (1 - 할인율 ÷ 100) 입니다. 예를 들어 정가 10,000원에서 20%를 할인한다면 할인액은 2,000원이고 최종 가격은 8,000원입니다. 하지만 실제 도구라면 정가가 비어 있거나 할인율에 문자가 입력됐을 때도 안정적으로 반응해야 합니다. 이런 조건까지 처음부터 요청하면 단순히 보기 좋은 화면을 만드는 데 그치지 않고 실제로 사용할 수 있는 도구에 더 가까워집니다.

4. Claude에게 그대로 입력할 첫 프롬프트

Claude 웹 또는 데스크톱 앱에서 새 채팅을 열거나, Artifacts 탭에서 새 결과물을 시작하세요. 채팅에 아래 문장을 입력하면 됩니다.

코딩을 모르는 초보자용 할인 가격 계산기를 독립적인 인터랙티브 Artifact로 만들어줘. 사용자가 원화 정가와 할인율을 입력하면 할인 금액과 최종 가격을 바로 보여줘. 할인율은 0~100%만 받으며, 음수 가격·빈 칸·숫자가 아닌 입력은 오류를 친절하게 안내해줘. '계산하기'와 '초기화' 버튼을 넣고, 원화 금액은 천 단위 쉼표를 표시해줘. 휴대전화의 좁은 화면에서도 입력창과 버튼이 겹치지 않게 해줘. 외부 API 호출·로그인·개인정보 수집·데이터 전송·영구 저장은 필요 없어.

먼저 실행 가능한 미리보기를 만들고, 이후 수정하기 쉽게 구성해줘. 프롬프트가 길어 보이더라도 의미는 간단합니다. 무엇을 입력하고 → 어떤 결과가 나와야 하며 → 잘못 입력했을 때 어떻게 반응할지를 알려 주는 것입니다. 계산기를 만들라는 요청과 작동하는 계산기를 만들라는 요청은 다릅니다. 실제로 쓰려면 오류 처리와 입력 제한도 필요하기 때문입니다.

'한 번에 다 만들어줘'보다 좋은 점

처음부터 그래프, 회원가입, 저장 기능, 다른 사이트 연결까지 한꺼번에 요구하면 확인해야 할 부분이 많아집니다. 위 예제는 외부 서비스가 필요 없는 작은 독립 계산기라 결과를 검토하기 쉽습니다. 이 글의 프롬프트는 공식 기능을 바탕으로 만든 교육용 예시이며, 작성자가 실제 Claude에 입력해 성공 여부를 측정한 결과는 아닙니다.

5. 결과가 나오면 미리보기에서 무엇을 확인하나요?

Claude가 Artifact를 생성하면 결과물이 채팅 옆의 별도 영역이나 Artifacts 작업 화면에 나타날 수 있습니다. 화면 구성이 현재 버전과 다르더라도 결과물 열기 → 입력해 보기 → 틀린 부분 수정 요청하기라는 순서는 같습니다. 직접 사용해 볼 때는 다음 테스트 값을 넣어 보세요.

정가	할인율	기대 결과
10,000원	20%	할인액 2,000원, 최종 8,000원
10,000원	0%	최종 10,000원
10,000원	100%	최종 0원
10,000원	101%	범위 오류 안내
-10,000원	10%	가격 오류 안내
빈 입력	20%	필수 입력 안내
문자 입력	10%	숫자 입력 안내

이 표는 성공했다고 보고하는 테스트 결과가 아니라 독자가 확인할 기대값입니다. 실제 제작물이 다른 값을 보여 준다면 계산식이나 입력 처리에 문제가 있을 수 있습니다. 소수점 할인율과 큰 숫자도 추가로 확인하세요. 원화 반올림 방식이 필요하다면 “소수점 이하를 어떻게 처리할지”를 명시해야 합니다. 이 글에서는 소수 원 단위가 나오면 원 단위로 반올림하도록 추가 요청해 보겠습니다.

6. 오류가 있거나 모양이 마음에 들지 않으면 이렇게 수정하세요

첫 작품이 완벽하게 나오지 않는 것은 이상한 일이 아닙니다. 단순히 “다시 만들어줘”라고 하기보다 어느 부분이 왜 불편한지를 한 가지씩 알려 주면 좋습니다. 예를 들어 아래 문장을 사용할 수 있습니다.

방금 만든 계산기는 유지하고 다음 세 가지만 고쳐줘. (1) 할인율에 101을 입력하면 계산하지 말고 오류를 표시하기, (2) 원화 결과는 소수점을 원 단위로 반올림하기, (3) 스마트폰 화면에서 버튼 두 개가 줄바꿈 때문에 서로 겹치지 않게 세로로 배치하기. 다른 기능은 바꾸지 말아줘. 수정 후에는 원래 맞던 계산도 다시 확인해야 합니다. 버튼 위치를 고치는 과정에서 입력값이나 계산 기능이 예상치 못하게 바뀔 가능성이 있기 때문입니다.

생성한 화면에 오류 메시지가 나타난다면

Claude 도움말은 일부 Artifact 오류 화면에서 “Try fixing with Claude” 버튼으로 오류 내용을 Claude에 전달할 수 있다고 안내합니다. 버튼이 있다면 이를 이용해 문제를 설명할 수 있습니다. 다만 AI가 자동으로 오류를 수정해 주는 것은 보장되지 않습니다. 같은 오류가 반복되면 어떤 값에서 실패하는지, 화면에 어떤 메시지가 표시되는지를 함께 알려 주세요. 비밀번호나 개인 정보가 담긴 화면 전체를 무심코 공유하지 않는 것도 중요합니다.

자체 제작 개념도 · EMFLS AI

7. '코딩 없이 만들기'는 '검사 없이 쓰기'가 아닙니다

Claude가 대신 코드를 생성한다면 사용자에게는 코딩 경험이 거의 없어도 됩니다. 그러나 만들어진 프로그램 내부에 코드가 없다는 의미는 아닙니다. 특히 금액을 다루는 도구라면 다음 항목을 확인해야 합니다. 첫째, 계산 정확성입니다. 정상적인 값뿐 아니라 0%·100%·잘못된 값도 시험해 보세요. 둘째, 화면 사용성입니다. 휴대전화에서 입력창이 보이는지, 숫자 키패드가 나타나는지, 버튼을 누를 수 있는지 확인하세요. 작은 화면에서 텍스트가 잘려서는 안 됩니다.

셋째, 데이터 사용 범위입니다. 이번처럼 단순한 계산기는 외부 데이터 연동이나 사용자 정보 저장이 필요하지 않습니다. 가입·외부 앱 연결·API 키 입력을 요청한다면 원래 요구사항과 맞는지 살펴보세요. 넷째, 기능 간섭입니다. 디자인을 수정한 후 계산 결과가 바뀌지 않았는지 다시 테스트해야 합니다. AI가 만들었다는 이유만으로 보안과 정확성이 자동 검증되는 것은 아닙니다. 외부에 배포하거나 중요한 금전 판단에 활용할 때는 더 엄격한 검토가 필요합니다.

8. 계산기가 완성되면 어디에서 다시 찾나요?

Claude의 최신 안내에 따르면 생성한 결과물은 사이드바의 Artifacts 탭에서 다시 찾아볼 수 있습니다. 필요한 경우 기존 채팅으로 돌아가 수정 요청을 이어 가거나, 결과물을 열어 새 버전을 검토할 수 있습니다. 다만 결과물 종류에 따라 편집 방식이 다릅니다. 문서라면 텍스트를 직접 수정하는 방식이 있을 수 있고, 디자인이나 슬라이드 템플릿은 해당 전용 편집 화면을 제공합니다. 내보내기(Export)도 모든 결과물에서 동일하지 않습니다.

예를 들어 공식 안내는 템플릿 기반 문서가 Word·PDF·Markdown 등으로, 디자인은 HTML·ZIP 등으로 내보낼 수 있음을 설명합니다. 계산기 작품에 반드시 동일한 파일 형식이 나타난다고 보장하지는 않습니다. 내보낼 때는 화면에 제공되는 실제 옵션을 확인하고, 다른 곳에서 사용할 목적이라면 독립적으로 실행되는지 테스트하세요.

9. 다른 사람에게 공유할 때 꼭 확인할 것

혼자 사용한다면 결과물을 공개할 필요가 없습니다. Artifacts는 기본적으로 비공개로 시작합니다. 누군가에게 보여 주고 싶다면 결과물에서 Share를 열어 접근 권한을 확인하세요. 최신 Artifacts에서는 계정과 조직 정책에 따라 링크를 가진 사람에게 공개하거나, 특정 사용자에게만 접근을 허용하는 방식이 제공될 수 있습니다. 예전 영상과 메뉴가 다른 이유 2026년 9월 16일 이전 만들어진 레거시 Artifact에는 Publish 또는 Share & copy link 같은 예전 버튼이 남아 있을 수 있습니다.

반면 최신 Artifact는 기본 Share 대화상자에서 공개 범위와 권한을 설정합니다. 무료·유료 플랜, 팀·기업 계정, 관리자 정책에 따라 외부 공유가 허용되는 범위가 달라집니다. 따라서 “무료 사용자도 무조건 링크를 발급해 누구나 사용할 수 있다”고 단정하면 안 됩니다. 공유 전에는 결과물에 실제 사용자 데이터나 민감한 내용을 남기지 않았는지 확인하세요. 다른 사람의 Artifact는 코드를 포함할 수 있으므로 출처가 불분명한 결과물을 무심코 복사하는 일도 조심해야 합니다.

10. AI 기능이나 데이터 저장을 추가하고 싶다면?

할인 계산기가 익숙해졌다면 “문장에 맞는 예시를 자동 생성하는 학습 카드”처럼 Claude의 AI 기능을 사용하는 작은 도구도 만들 수 있습니다. Claude는 일부 Artifact에서 AI 기능을 직접 사용할 수 있도록 지원합니다. 공식 도움말에 따르면, 사용자는 자기 Claude 계정으로 로그인해 관련 사용량을 사용하며, 제작자가 개인 API 키를 모두에게 나눠 줄 필요는 없습니다. AI 사용량은 각각의 사용자에게 적용되는 이용 한도에 따라 달라질 수 있습니다. 또한 일부 유료 플랜에서는 연결된 앱을 Artifact와 함께 사용하거나, 사용자가 입력한 텍스트 데이터를 다음 세션까지 저장하도록 구성할 수 있습니다. 여기에는 중요한 구분이 있습니다.

기능	추가로 살펴볼 것
기본 할인 계산기	외부 앱·영구 저장 없이 동작하도록 요청 가능
AI가 카드·문장을 만드는 도구	각 사용자의 로그인·AI 사용 한도
연결 앱을 읽거나 쓰는 도구	유료 플랜 조건·앱별 권한·최초 승인
입력 내용을 보관하는 도구	개인 저장과 공동 저장의 차이

공식 안내에 따르면 Artifacts의 지속 저장에는 작품당 20MB의 텍스트 데이터 제한이 있고, 이미지·첨부파일·바이너리를 저장하는 용도로 설계된 것은 아닙니다. 또한 공동 저장 기능은 여러 사용자가 같은 내용을 볼 수 있는 구조일 수 있습니다. 일기나 고객 기록처럼 민감한 내용을 입력하기 전에 개인 저장인지 공동 저장인지 반드시 확인해야 합니다.

11. 처음 사용할 때 자주 막히는 문제

Artifacts 메뉴가 없어요

계정 설정에서 Cloud code execution and file creation이 활성화됐는지 확인하세요. 조직 계정이라면 관리자 설정도 영향을 줄 수 있습니다. 메뉴 이름은 업데이트로 바뀔 수 있으므로 현재 도움말과 실제 화면을 함께 보세요.

계산기 화면은 만들어졌는데 버튼이 작동하지 않아요

화면 모양이 아니라 버튼을 누르면 어떤 계산이 실행돼야 하는지를 다시 설명하고 오류가 나는 입력값을 첨부해 수정 요청하세요. 변경 후에는 이전에 잘되던 입력도 재검증해야 합니다.

다른 사람에게 보낼 링크가 없어요

새 버전의 Share 메뉴와 계정의 공유 권한을 확인하세요. 오래된 튜토리얼의 Publish 버튼만 찾으면 현재 UI와 맞지 않을 수 있습니다.

휴대전화에서 글자가 잘려요

“320px 정도의 좁은 화면에서 버튼이 세로로 쌓이고, 입력창이 화면 밖으로 나가지 않게 수정해줘”처럼 발생한 문제와 목표 상태를 함께 입력하세요. 실제 기기에서도 확인해야 합니다.

자주 묻는 질문

Q1. Artifacts를 만들려면 프로그래밍 언어를 알아야 하나요?

기본적인 도구나 디자인의 초안을 만들 때는 한국어로 기능을 설명할 수 있습니다. 다만 복잡한 계산·보안·외부 서비스 연동은 코드를 이해하는 검토자나 충분한 테스트가 필요할 수 있습니다.

Q2. 무료 계정에서도 계산기를 만들 수 있나요?

공식 도움말은 채팅에서 Artifacts를 만드는 기능을 무료 계정에도 제공한다고 안내합니다. 실제 사용량·앱 권한·템플릿 제공 범위는 별도 조건을 확인해야 합니다.

Q3. Artifacts와 Claude Code는 같은 건가요?

아닙니다. Artifacts는 대화에서 독립적으로 보고 수정할 수 있는 결과물 기능이고, Claude Code는 코드와 저장소 작업에 집중하는 별도 도구입니다. Claude Code에서 Artifact를 만드는 기능도 있지만, 두 작업 환경 전체가 동일한 것은 아닙니다.

Q4. 다른 사람이 내 계산기를 사용하면 내가 API 비용을 내나요?

Claude의 지원되는 AI 기반 Artifacts는 이용자가 자신의 Claude 계정과 사용 한도로 AI 기능을 이용하도록 안내합니다. 다만 외부 서비스를 추가로 연결한 경우에는 그 서비스의 요금과 권한을 별도로 확인해야 합니다.

Q5. 만든 도구를 블로그에 바로 넣을 수 있나요?

작품 유형과 실제 제공되는 공유·내보내기 형식에 따라 다릅니다. 디자인 템플릿의 HTML 내보내기와 레거시 Artifacts의 임베드 기능을 모든 새 도구에 그대로 적용할 수는 없습니다. 블로그에 넣을 목적이라면 현재 작품의 실제 내보내기 옵션과 게시 플랫폼의 허용 방식을 각각 확인하세요.

Q6. 계산기 내용을 나중에도 저장할 수 있나요?

일부 유료 플랜에서는 데이터 보관 기능을 이용할 수 있습니다. 기본 계산기에는 보관이 없어도 되며, 지속 저장을 추가하면 개인/공유 범위와 저장 한도를 검토해야 합니다.

Q7. 다른 사람에게 공유하면 편집도 할 수 있나요?

공유 설정과 결과물 유형에 따라 보기·댓글·편집 권한이 다를 수 있습니다. 링크를 제공하기 전에 누가 볼 수 있고 무엇을 바꿀 수 있는지를 확인하세요.

Q8. AI가 만든 계산 결과를 믿어도 되나요?

계산 방식은 검증할 수 있어야 합니다. 정상 값뿐 아니라 0%, 100%, 범위 밖 입력, 빈 값, 소수점 처리 등을 시험해 보세요. 금융·세금처럼 중요한 용도에는 추가 검증이 필요합니다.

Q9. Artifacts를 게시하지 않으면 다른 사람은 못 보나요?

새 결과물은 기본 비공개로 시작합니다. 실제 공유나 연결 앱의 권한에 따라 접근 범위가 바뀔 수 있으므로 결과물별 설정을 확인하세요.

Q10. 만들어진 코드나 화면에 오류가 나오면 어떻게 하나요?

오류 메시지와 문제가 발생한 동작을 구체적으로 정리하고 Claude에 수정 요청하세요. 공식 도움말에 안내된 Try fixing with Claude 기능이 있다면 사용할 수 있지만, 자동 복구가 성공한다고 보장할 수는 없습니다.

마무리: 처음에는 작은 도구 한 개를 끝까지 점검하세요

Claude Artifacts를 잘 활용하는 첫걸음은 복잡한 앱을 단번에 만드는 것이 아닙니다. 입력할 값, 기대 결과, 잘못 입력했을 때의 반응을 명확하게 알려 주는 연습이 더 중요합니다. 이번 할인가 계산기에서 기억할 순서는 간단합니다. 목표 적기 → 프롬프트 입력 → 화면 확인 → 오류 조건 테스트 → 필요한 부분만 수정 → 공유 권한 확인. 이 과정을 경험한 뒤에는 퀴즈, 학습 카드, 간단한 표 시각화 등으로 조금씩 확장해 보세요. 그리고 완성된 작품을 다른 사람에게 공개하기 전에는 기능이 실제로 맞게 동작하는지, 데이터와 접근 권한이 안전한지를 반드시 검토하세요.

이 블로그 검색