Claude Artifacts를 써보셨나요? Claude에게 “계산기 만들어줘”라고 하면, 실제로 작동하는 계산기가 바로 화면에 나타납니다. 코드를 한 줄도 쓰지 않았는데요. Claude Artifacts 사용법을 알면 이런 게 가능해요.
이 글에서는 Claude Artifacts로 실제로 만들 수 있는 것들과, 잘 쓰는 방법을 정리합니다.
Claude Artifacts가 뭔가요
Claude Artifacts는 Claude가 만든 코드를 바로 실행해서 보여주는 기능입니다. 대화창 오른쪽에 미리보기 화면이 뜨고, 거기서 직접 클릭하고 입력할 수 있어요.
일반적으로 AI에게 “웹페이지 만들어줘”라고 하면 코드 텍스트가 나오잖아요. Artifacts는 그 코드를 실행해서 완성된 화면을 보여줍니다.
- HTML/CSS/JavaScript로 만들 수 있는 건 대부분 가능해요
- React 컴포넌트도 지원합니다
- SVG 그래픽, 차트, 다이어그램도 만들 수 있어요
- 무료 계정에서도 사용 가능합니다
Claude Artifacts 사용법 — 기본 흐름
사용법은 간단합니다.
- claude.ai에 접속합니다
- 만들고 싶은 걸 자연어로 설명합니다
- Claude가 코드를 만들고, 오른쪽에 실행 결과가 표시됩니다
- 수정이 필요하면 “색상 바꿔줘”, “버튼 추가해줘”라고 하면 됩니다
코딩 지식이 전혀 없어도 됩니다. “뭘 만들고 싶은지”만 설명하면 돼요.
Claude Artifacts로 만들 수 있는 것들
1. 실용 도구
| 요청 예시 | 결과 |
|---|---|
| “환율 계산기 만들어줘” | 금액 입력하면 원화↔달러 변환되는 도구 |
| “포모도로 타이머 만들어줘” | 25분/5분 타이머 + 시작/정지 버튼 |
| “BMI 계산기” | 키와 체중 입력 → BMI + 판정 표시 |
| “할 일 목록 앱” | 추가/삭제/완료 체크가 되는 투두 앱 |
2. 데이터 시각화
| 요청 예시 | 결과 |
|---|---|
| “이 데이터로 막대 차트 만들어줘” | 인터랙티브 차트 (hover 시 수치 표시) |
| “월별 매출 추이를 꺾은선 그래프로” | 라인 차트 + 범례 |
| “조직도를 그려줘” | 트리 구조 다이어그램 |
3. 학습/교육용
| 요청 예시 | 결과 |
|---|---|
| “영어 단어 플래시카드 만들어줘” | 앞면(영어)/뒷면(한국어) 카드 넘기기 |
| “구구단 퀴즈 앱” | 랜덤 문제 + 정답 확인 + 점수 |
| “주기율표를 인터랙티브하게” | 원소 클릭 시 상세 정보 표시 |
4. 게임
| 요청 예시 | 결과 |
|---|---|
| “테트리스 만들어줘” | 실제로 플레이 가능한 테트리스 |
| “숫자 맞추기 게임” | 1~100 사이 숫자를 맞추는 게임 |
| “타자 연습 프로그램” | 문장 표시 + 타이핑 + 속도 측정 |
Claude Artifacts 잘 쓰는 팁
팁 1: 구체적으로 설명하세요
❌ "대시보드 만들어줘"
✅ "매출 데이터를 보여주는 대시보드 만들어줘.
상단에 총매출/전월대비 카드 3개,
중간에 월별 매출 꺾은선 차트,
하단에 제품별 매출 비율 파이차트.
다크 테마로."팁 2: 단계적으로 다듬으세요
처음부터 완벽하게 요청하지 않아도 됩니다. 기본형을 먼저 만들고, “색상 바꿔줘”, “버튼 크기 키워줘”, “애니메이션 넣어줘”처럼 하나씩 수정하면 돼요.
팁 3: 저장하고 공유하세요
마음에 드는 Artifacts는 “Publish” 버튼으로 공유 링크를 만들 수 있습니다. 다른 사람에게 URL만 보내면 바로 사용할 수 있어요.
Claude Artifacts의 한계
- 데이터 저장이 안 됩니다 — 페이지를 새로고침하면 입력한 데이터가 사라져요. 서버가 없으니까요
- 외부 API 호출이 제한적입니다 — 실시간 환율, 날씨 같은 외부 데이터를 가져오기 어려워요
- 복잡한 앱은 한계가 있습니다 — 간단한 도구나 프로토타입에는 좋지만, 본격적인 앱 개발 도구는 아닙니다
- 모바일에서는 좀 불편합니다 — PC 브라우저에서 쓰는 게 편해요
Artifacts vs Claude Code, 뭐가 다른가요
| 항목 | Artifacts | Claude Code |
|---|---|---|
| 실행 환경 | 브라우저 내 미리보기 | 내 컴퓨터 터미널 |
| 결과물 | 화면에서 바로 작동 | 파일로 저장됨 |
| 용도 | 간단한 도구, 시각화, 프로토타입 | 파일 관리, 데이터 분석, 보고서 |
| 저장 | 공유 링크로 게시 | 로컬 파일로 저장 |
간단하게 말하면, Artifacts는 “빠르게 만들어서 바로 보기”, Claude Code는 “파일로 만들어서 저장하기”에 맞습니다.
정리하면
Claude Artifacts 사용법의 핵심은 “만들고 싶은 걸 말하면 된다”는 것입니다. 코딩을 몰라도 계산기, 차트, 게임, 학습 도구를 만들 수 있어요.
본격적인 앱 개발 도구는 아니지만, “이런 거 하나 있으면 편하겠다” 싶은 간단한 도구를 만들 때 놀라울 정도로 유용합니다. claude.ai에서 무료로 바로 써볼 수 있으니, 한번 시도해보세요.
※ Claude Artifacts는 claude.ai 웹과 데스크톱 앱에서 사용할 수 있습니다. 2026년 6월 기준.