Claude Artifacts 앱 만들기: 코딩 없이 시작하는 방법
Claude Artifacts를 사용하면 코드를 직접 작성하지 않고도 계산기, 업무 대시보드, 퀴즈와 AI 도우미 같은 웹 앱을 만들 수 있습니다. 만들고 싶은 문제와 사용 흐름을 자연어로 설명하면 Claude가 화면과 동작을 구현하고, 대화를 이어가며 수정할 수 있습니다. 이 글에서는 첫 앱을 기획하는 법부터 테스트·공개·공유까지 현재 Claude 공식 기능을 기준으로 설명합니다.
Claude의 Settings→Capabilities에서 Code execution and file creation을 켠 뒤, 사이드바의 Artifacts에서 해결할 문제와 사용자·입력·결과를 설명하세요. 첫 결과를 한 번에 완성하려 하지 말고 기능, 모바일 화면, 오류 처리를 차례로 수정합니다. Free·Pro·Max는 링크로 공개할 수 있고 Team·Enterprise는 조직 안에서 공유합니다. 공개 전에는 개인정보, 저장 방식과 외부 연결 권한을 반드시 확인해야 합니다.
Claude Artifacts란 무엇인가
Artifacts는 Claude 대화에서 만든 독립적인 문서, 웹 화면과 대화형 앱을 별도 창에서 실행하고 다듬는 기능입니다. 공식 도움말은 Markdown 문서, 코드, 단일 페이지 HTML, SVG, 다이어그램과 React 컴포넌트를 대표 예시로 안내합니다.
사용자는 자연어로 요구사항을 전달하지만 내부적으로 Claude가 실제 코드를 작성합니다. 따라서 ‘노코드’는 코드를 전혀 사용하지 않는다는 뜻이 아니라 사용자가 직접 문법과 개발 환경을 다루지 않아도 된다는 의미에 가깝습니다.
일반 Claude 대화와 Artifacts 앱의 차이
| 구분 | 일반 대화 | Artifacts 앱 |
|---|---|---|
| 결과 | 답변·설명 중심 | 별도 화면에서 실행되는 도구 |
| 수정 | 답변을 다시 생성 | 기존 앱을 대화로 반복 개선 |
| 활용 | 개인적인 일회성 작업 | 반복 사용·링크 공유·웹사이트 삽입 |
| 적합한 예 | 아이디어 질문, 초안 작성 | 계산기, 퀴즈, 대시보드, AI 도우미 |
Claude Artifacts 사용 전 설정
- Claude 웹 또는 데스크톱 앱에 로그인합니다.
- 왼쪽 아래 프로필에서 Settings→Capabilities로 이동합니다.
- Code execution and file creation을 활성화합니다.
- AI가 앱 안에서 답변하게 만들려면 계정에 표시되는 AI-powered artifacts 관련 설정도 확인합니다.
- 사이드바에서 Artifacts를 열거나 새 채팅에서 앱 제작을 요청합니다.
Anthropic 공식 도움말 기준 Artifacts 접근과 Claude 기반 Artifacts는 Free, Pro, Max, Team과 Enterprise에서 지원됩니다. 조직 계정은 소유자가 기능을 허용해야 하며 화면 명칭과 베타 기능은 계정별 배포 상태에 따라 다를 수 있습니다.
코딩 없이 첫 앱 만드는 7단계
- 한 문장으로 문제를 정합니다. “회의 시간을 계산하기 어렵다”처럼 해결할 문제를 먼저 씁니다.
- 사용자를 정합니다. 혼자 쓰는지, 고객이나 팀원이 쓰는지 알려줍니다.
- 입력과 결과를 명시합니다. 사용자가 무엇을 넣고 어떤 결과를 보는지 정합니다.
- 필수 기능을 3개 이하로 줄입니다. 첫 버전은 핵심 동작만 구현합니다.
- Claude에게 제작을 요청합니다. “이 요구사항으로 실행 가능한 Artifact를 만들어줘”라고 명시합니다.
- 실제 값으로 테스트합니다. 정상 값뿐 아니라 빈칸, 긴 문장과 잘못된 값도 넣습니다.
- 한 번에 한 종류씩 수정합니다. 기능을 먼저 고친 뒤 디자인과 문구를 다듬습니다.
바로 복사하는 Claude Artifacts 앱 제작 프롬프트
“[대상 사용자]가 [해결할 문제]를 처리하는 반응형 웹 앱을 Claude Artifact로 만들어줘.
사용자가 입력할 값: [입력 항목]
앱이 보여줄 결과: [결과 항목]
필수 기능: [기능 1], [기능 2], [기능 3]
화면 구성: 상단 설명, 입력 영역, 결과 카드, 초기화 버튼
디자인: 모바일에서도 읽기 쉬운 고급스러운 IT 서비스 스타일, 충분한 대비와 명확한 버튼
예외 처리: 빈칸과 잘못된 값에는 한국어 안내를 보여주고 앱이 멈추지 않게 해줘.
샘플 데이터를 포함하고, 먼저 작동하는 최소 버전을 만든 뒤 개선할 항목을 알려줘.”
예시: 콘텐츠 일정 관리 앱 만들기
처음부터 회원가입, 결제와 외부 데이터베이스까지 요구하면 문제 원인을 찾기 어렵습니다. 아래처럼 로컬에서 작동하는 작은 도구로 시작하면 결과를 빠르게 확인할 수 있습니다.
“1인 콘텐츠 운영자가 게시 일정을 정리하는 Artifact 앱을 만들어줘. 제목, 카테고리, 게시 예정일과 상태를 입력하면 표와 이번 주 요약을 보여줘. 검색, 상태 필터, 항목 수정·삭제와 전체 초기화를 넣어줘. 모바일에서는 카드 목록으로 바뀌게 하고 삭제 전 확인창을 표시해줘.”
첫 결과를 고치는 후속 프롬프트
- 기능: “날짜가 오늘보다 이전이면 ‘지연’ 배지를 자동으로 표시해줘.”
- 오류: “빈 제목으로 저장되지 않게 하고 입력칸 바로 아래에 이유를 알려줘.”
- 모바일: “너비 390px에서 가로 스크롤 없이 버튼을 누를 수 있게 바꿔줘.”
- 접근성: “키보드만으로 입력·저장·삭제가 가능하고 포커스가 보이게 해줘.”
- 디자인: “기능은 유지하고 여백과 글자 위계를 정리해 차분한 B2B SaaS 스타일로 바꿔줘.”
- 회귀 방지: “수정 전에 기존 기능 목록을 확인하고 모두 유지한 채 해당 문제만 고쳐줘.”
AI 기능을 넣는 방법
일반 Artifact는 입력값을 계산하거나 정리하는 도구에 적합합니다. 요약, 분류, 문장 생성처럼 실행 중 Claude의 판단이 필요하면 AI-powered artifact로 만들어야 합니다. 예를 들어 “입력한 고객 문의를 긴급도별로 분류하고 답변 초안을 제안하는 앱으로 만들어줘”라고 요청할 수 있습니다.
공식 도움말에 따르면 공유된 AI 기반 Artifact의 사용자는 자신의 Claude 계정으로 인증하며, 사용량은 제작자가 아니라 각 사용자의 Claude 이용 한도에 반영됩니다. 별도의 API 키를 나눠줄 필요는 없습니다.
외부 서비스와 연결할 때
지원되는 요금제의 Claude 웹·데스크톱에서는 MCP를 통해 Google Calendar, Slack, Asana 같은 외부 서비스 또는 설정한 MCP 서버에 연결할 수 있습니다. Artifact가 도구를 처음 사용할 때 사용자는 접근을 승인해야 하며, 공유받은 사람도 자신의 계정으로 각각 인증합니다.
연결 기능을 넣을 때는 “캘린더를 읽기만 하는지”, “일정을 새로 만드는지”처럼 권한과 실행 전 확인 단계를 프롬프트에 명시하세요. 조직 관리자는 Artifact의 MCP 사용 자체를 제한할 수 있습니다.
데이터를 계속 저장할 수 있나
Pro, Max, Team과 Enterprise의 웹·데스크톱에서는 게시된 Artifact에 영구 저장 기능을 사용할 수 있습니다. 개인 저장은 사용자마다 데이터를 분리하고, 공유 저장은 같은 Artifact 사용자가 데이터를 함께 봅니다. 공식 문서상 Artifact당 저장 한도는 20MB이며 텍스트만 저장할 수 있습니다.
개발·테스트 중에는 영구 저장 동작이 성공하지 않고 게시한 뒤 사용할 수 있습니다. 게시를 취소하면 연결된 개인·공유 저장 데이터가 영구 삭제되므로 중요한 기록의 유일한 보관 장소로 사용하지 않는 편이 안전합니다.
공개와 공유 방법
| 계정 | 방식 | 접근 범위 |
|---|---|---|
| Free·Pro·Max | Publish | 링크를 아는 누구나 열람·기본 기능 사용 |
| Team·Enterprise | Share | 로그인한 같은 조직 구성원 |
- 공개할 Artifact에서 올바른 버전인지 확인합니다.
- 오른쪽 위 Publish 또는 Share를 선택합니다.
- 생성된 링크를 복사해 시크릿 창이나 테스트 계정에서 확인합니다.
- 웹사이트에 넣으려면 게시 후 Get embed code를 선택하고 허용 도메인을 지정합니다.
공개 게시를 취소한 Artifact는 같은 항목을 다시 게시할 수 없어 새 Artifact를 만들어야 한다는 점도 주의해야 합니다. 다른 공개 Artifact를 바탕으로 만들 때는 현재 Remix 버튼 대신 코드를 복사해 새 채팅에 붙여 넣는 방식이 공식 안내입니다.
공개 전 테스트 체크리스트
핵심 기능이 모두 작동하는가? 빈 입력과 잘못된 값을 설명하는가? 새로고침 뒤 데이터 상태가 예상과 같은가? 모바일에서 잘리지 않는가? 키보드로 조작할 수 있는가? 버튼 이름이 행동을 설명하는가? 삭제 전 확인이 있는가? 개인·공유 저장을 구분했는가? 외부 연결은 최소 권한인가? 실제 공개 링크를 로그아웃 상태에서 테스트했는가?
Claude Artifacts로 적합한 앱과 한계
| 좋은 시작점 | 별도 개발 검토가 필요한 경우 |
|---|---|
| 계산기·진단 체크리스트 | 결제와 정교한 회원 권한 |
| 퀴즈·교육 도구 | 대규모 트래픽의 핵심 서비스 |
| 개인·팀용 대시보드 | 엄격한 감사·규제 요건 |
| AI 요약·분류 도우미 | 복잡한 백엔드와 대용량 파일 저장 |
| 아이디어 검증용 프로토타입 | 장기 유지보수와 세밀한 배포 통제가 필요한 제품 |
Artifacts는 아이디어를 빠르게 작동시키고 공유하는 데 강합니다. 하지만 실제 고객의 결제·민감정보·업무 핵심 데이터를 다루는 서비스라면 접근 통제, 백업, 로그, 장애 대응과 법적 요구사항을 별도로 검토해야 합니다.
개인정보와 보안 주의사항
- 공개 링크에는 실제 고객명, 연락처, 계약서와 인증 정보를 넣지 않습니다.
- 대화 첨부파일이 공유 범위에 포함될 수 있는지 게시 전에 확인합니다.
- 공유 저장을 쓰면 입력한 데이터가 다른 사용자에게 보일 수 있음을 화면에 알립니다.
- 외부에서 복사한 Artifact 코드는 신뢰할 수 있는 출처인지 먼저 검토합니다.
- MCP 연결은 꼭 필요한 읽기·쓰기 권한만 허용하고 중요한 변경은 확인 후 실행하게 합니다.
- AI 결과가 중요한 판단에 쓰이면 근거 표시와 사람의 최종 검토 단계를 둡니다.
편집부 정리: 좋은 노코드 앱은 기능 수보다 문제 정의가 선명하다
Claude Artifacts의 장점은 개발 용어를 많이 아는 것이 아니라 사용자가 겪는 문제를 빠르게 화면과 동작으로 확인하는 데 있습니다. 대상 사용자, 입력, 결과와 실패 조건을 먼저 정하고 작은 버전을 만든 뒤 실제 사용 장면을 보며 수정하세요. 첫 프롬프트에 모든 기능을 넣는 것보다 검증 가능한 한 가지 흐름을 완성하는 편이 안정적이고 오래 쓰는 앱으로 이어집니다.
Claude Artifacts 공식 문서 확인하기
자주 묻는 질문
Claude Artifacts 앱은 정말 코딩 없이 만들 수 있나요?
사용자는 자연어로 앱을 만들고 수정할 수 있습니다. Claude가 내부 코드를 생성하므로 간단한 도구와 프로토타입은 코드를 직접 쓰지 않아도 되지만, 복잡한 제품은 개발 검토가 필요합니다.
Claude 무료 요금제에서도 Artifacts를 사용할 수 있나요?
공식 도움말 기준 Free를 포함한 주요 Claude 요금제에서 접근할 수 있습니다. Code execution and file creation 기능을 켜야 하며 일부 저장·연결 기능은 유료 요금제에 제한됩니다.
만든 앱을 다른 사람에게 링크로 보낼 수 있나요?
Free·Pro·Max는 공개 링크를 만들 수 있고, Team·Enterprise의 Artifact는 같은 조직 안에서 공유합니다. 공개 범위와 첨부 자료를 확인한 뒤 링크를 전달하세요.
다른 사람이 앱을 쓰면 제작자에게 API 비용이 청구되나요?
AI 기반 Artifact는 사용자가 자신의 Claude 계정으로 인증하며 사용량이 각자의 이용 한도에 반영됩니다. 공식 안내상 제작자가 사용자의 API 비용을 부담하거나 API 키를 관리하지 않습니다.
Artifact에 입력한 데이터를 저장할 수 있나요?
지원되는 유료 요금제에서는 게시된 Artifact에 개인 또는 공유 영구 저장을 설정할 수 있습니다. 텍스트 전용 20MB 한도이며 게시 취소 시 데이터가 삭제됩니다.
Claude Artifacts로 만든 앱을 웹사이트에 넣을 수 있나요?
공개 후 제공되는 embed 코드를 복사하고 삽입을 허용할 웹사이트 도메인을 지정할 수 있습니다. 조직 전용 Artifact와 Claude Cowork의 live artifact는 공개 조건이 다릅니다.
Related Articles
이 주제를 더 깊게 읽어보세요
현재 기사와 연결되는 배경·기술·시장 분석을 골라 바로 이동할 수 있습니다.
