Claude Artifacts 활용 베스트 프랙티스: 인터랙티브 대시보드, 문서, 코드 미리보기 만들기

Claude Artifacts란 무엇이고 왜 중요한가

Claude Artifacts는 Anthropic이 Claude 대화 인터페이스에 도입한 기능으로, 대화 흐름과 별도로 독립적인 콘텐츠를 생성하고 미리보기할 수 있게 해준다. 일반적인 AI 챗봇은 텍스트 응답만 돌려주지만, Artifacts를 사용하면 React 컴포넌트, HTML 페이지, SVG 그래픽, Mermaid 다이어그램, 마크다운 문서, 그리고 실행 가능한 코드 스니펫까지 대화창 옆에 실시간으로 렌더링된다.

이 기능이 중요한 이유는 작업의 맥락이 크게 달라지기 때문이다. 기존에는 AI가 생성한 코드를 복사해서 로컬 환경에 붙여넣고, 의존성을 설치하고, 실행해봐야 결과를 확인할 수 있었다. Artifacts는 이 과정을 없앤다. 프롬프트 하나로 인터랙티브 대시보드를 만들고, 그 자리에서 바로 클릭하고 조작해볼 수 있다. 디자이너에게 보여줄 프로토타입이 필요하거나, 팀 회의에서 데이터를 시각화해야 하거나, 기술 문서에 들어갈 다이어그램을 빠르게 만들어야 할 때 Artifacts는 아이디어와 결과물 사이의 거리를 극적으로 줄여준다.

실무적으로 보면, Artifacts는 세 가지 핵심 가치를 제공한다. 첫째, 즉시 피드백이다. 코드를 작성하는 즉시 렌더링 결과를 확인할 수 있어 반복 속도가 빨라진다. 둘째, 공유 가능성이다. 생성된 Artifact는 링크로 공유하거나 다운로드할 수 있어 협업이 쉽다. 셋째, 자기 완결성이다. 외부 도구나 환경 설정 없이 Artifact 하나로 완결된 결과물을 만들 수 있다.

다만 Artifacts에도 제약이 있다. 외부 API 호출이 불가능하고, 서버 사이드 로직을 실행할 수 없으며, 사용할 수 있는 라이브러리가 제한적이다. 이런 제약을 이해하고 그 안에서 최대한의 결과를 뽑아내는 것이 이 가이드의 목표다.

만들 수 있는 Artifact 유형

Claude Artifacts는 여섯 가지 주요 유형을 지원한다. 각 유형의 기술적 특성과 적합한 용도를 정리한다.

React 컴포넌트: Tailwind CSS와 함께 사용하는 React 컴포넌트를 만들 수 있다. useState, useEffect 같은 훅을 활용한 상태 관리가 가능하며, Recharts 같은 내장 라이브러리도 사용할 수 있다. 인터랙티브 대시보드, 계산기, 폼, 데이터 테이블 등에 적합하다.

HTML 페이지: 순수 HTML, CSS, JavaScript로 구성된 단일 페이지를 만든다. 프레임워크 의존성이 없어 가볍고, iframe으로 렌더링되기 때문에 독립적으로 동작한다. 랜딩 페이지 프로토타입, 간단한 웹 앱, 이메일 템플릿 등에 적합하다.

SVG 그래픽: 벡터 그래픽을 직접 만들 수 있다. 로고, 아이콘, 인포그래픽, 기술 도해 등을 코드로 정밀하게 제어하면서 만들 수 있다. 해상도에 독립적이라 어디서나 선명하게 표시된다.

Mermaid 다이어그램: Mermaid 문법을 사용해 순서도, 시퀀스 다이어그램, 클래스 다이어그램, ER 다이어그램, 간트 차트 등을 만든다. 코드로 작성하기 때문에 버전 관리가 쉽고 수정이 간편하다.

마크다운 문서: 서식이 적용된 문서를 만든다. 기술 문서, 보고서, 제안서, 가이드 등에 적합하며, 표, 코드 블록, 리스트 등 마크다운의 모든 기능을 활용할 수 있다.

코드 스니펫: Python, JavaScript, SQL 등 다양한 언어의 코드를 하이라이팅과 함께 보여준다. 튜토리얼이나 코드 리뷰 자료를 만들 때 유용하다.

각 유형은 고유한 강점이 있으므로, 목적에 맞는 유형을 선택하는 것이 좋은 결과물의 시작점이다.

베스트 프랙티스 1: Artifact 요청 전 명확한 명세 작성하기

Artifacts의 품질은 프롬프트의 구체성에 정비례한다. 막연한 요청은 막연한 결과를 낳는다.

나쁜 프롬프트 (Before):

대시보드 하나 만들어줘.

이 프롬프트로는 Claude가 어떤 데이터를, 어떤 형태로, 누구를 위해 보여줘야 하는지 알 수 없다. 결과물은 임의의 샘플 데이터가 들어간 범용 대시보드가 될 것이다.

좋은 프롬프트 (After):

React Artifact로 SaaS 매출 대시보드를 만들어줘.

요구사항:
- 상단에 카드 4개: 월간 매출(MRR), 연간 매출(ARR), 활성 사용자 수, 이탈률
- 중앙에 최근 12개월 매출 추이를 보여주는 라인 차트 (Recharts 사용)
- 하단에 플랜별 사용자 분포를 보여주는 도넛 차트
- Tailwind CSS로 스타일링하고, 다크 모드 토글 포함
- 샘플 데이터는 현실적인 수치로 넣어줘

색상은 파란색 계열로 통일하고, 반응형으로 만들어서 모바일에서도 잘 보이게 해줘.

명세를 작성할 때 포함하면 좋은 요소는 다음과 같다.

• 목적: 이 Artifact가 해결하는 문제가 무엇인가
• 대상: 누가 이 결과물을 보거나 사용하는가
• 구성 요소: 어떤 UI 요소나 섹션이 필요한가
• 데이터: 어떤 종류의 데이터가 표시되어야 하는가
• 스타일: 색상, 레이아웃, 반응형 여부 등 시각적 요구사항
• 인터랙션: 클릭, 토글, 필터 등 사용자가 할 수 있는 동작

명세가 길어지는 것을 두려워할 필요 없다. Claude는 긴 프롬프트를 잘 처리하며, 상세한 명세일수록 수정 횟수가 줄어들어 오히려 시간을 절약할 수 있다.

베스트 프랙티스 2: 복잡한 컴포넌트는 반복적 개선으로 만들기

처음부터 완벽한 Artifact를 한 번에 만들려고 하면 오히려 결과가 나빠진다. 복잡한 결과물일수록 단계를 나눠서 점진적으로 만드는 것이 효과적이다.

1단계 - 골격 만들기:

React Artifact로 프로젝트 관리 칸반 보드의 기본 레이아웃을 만들어줘.
- 3개 컬럼: 할 일, 진행 중, 완료
- 각 컬럼에 샘플 카드 2-3개씩
- Tailwind CSS로 기본 스타일링
- 아직 드래그 앤 드롭은 필요 없어. 레이아웃만 잡아줘.

2단계 - 기능 추가:

좋아. 이제 여기에 기능을 추가해줘.
- 새 카드 추가 버튼과 입력 폼
- 카드에 우선순위 태그 (높음/중간/낮음) 표시
- 카드 클릭하면 상세 내용을 보여주는 모달

3단계 - 인터랙션 개선:

카드를 다른 컬럼으로 옮길 수 있는 버튼을 각 카드에 추가해줘.
화살표 버튼으로 좌우 컬럼으로 이동하는 방식이면 돼.
그리고 컬럼별 카드 개수를 헤더에 표시해줘.

4단계 - 시각적 완성도 높이기:

마지막으로 디자인을 다듬어줘.
- 카드에 호버 효과와 그림자 추가
- 우선순위별 색상 코딩 (높음: 빨강, 중간: 노랑, 낮음: 초록)
- 전체적으로 둥근 모서리와 부드러운 전환 애니메이션
- 빈 컬럼에는 안내 메시지 표시

이 접근법의 장점은 각 단계에서 결과를 확인하고 방향을 조정할 수 있다는 것이다. 첫 단계의 레이아웃이 마음에 들지 않으면 그때 바로 수정하면 된다. 모든 기능을 한꺼번에 요청했다가 전체를 다시 만들어야 하는 상황보다 훨씬 효율적이다.

한 가지 주의할 점은, 이전 대화에서 만든 Artifact를 수정할 때 “위에서 만든 것을 수정해줘”라고 하면 된다는 것이다. Claude는 대화 내 이전 Artifact를 기억하고 있으므로 이어서 작업할 수 있다.

베스트 프랙티스 3: React와 Tailwind로 인터랙티브 대시보드 만들기

React Artifact는 가장 강력한 유형이다. 상태 관리, 이벤트 처리, 조건부 렌더링 등 React의 핵심 기능을 모두 활용할 수 있기 때문이다. 여기에 Tailwind CSS를 결합하면 별도의 스타일 파일 없이 깔끔한 UI를 만들 수 있다.

효과적인 대시보드를 만들기 위한 프롬프트 전략을 살펴보자.

React Artifact로 개인 재무 대시보드를 만들어줘.

구조:
1. 상단 헤더: 사용자 이름과 현재 날짜 표시
2. 요약 카드 행: 총 자산, 이번 달 수입, 이번 달 지출, 저축률 (각각 아이콘 포함)
3. 메인 영역 (2열 그리드):
   - 왼쪽: 최근 6개월 수입/지출 추이 바 차트 (Recharts의 BarChart)
   - 오른쪽: 카테고리별 지출 비율 파이 차트 (Recharts의 PieChart)
4. 하단: 최근 거래 내역 테이블 (날짜, 설명, 카테고리, 금액)

기능 요구사항:
- 월별 필터 드롭다운으로 기간 선택 가능
- 테이블에서 카테고리별 정렬 가능
- 수입은 초록색, 지출은 빨간색으로 구분
- 금액은 한국 원화 형식으로 표시 (예: 1,500,000원)

스타일:
- Tailwind CSS 사용
- 흰색 배경에 카드는 약간의 그림자
- 모바일에서는 2열이 1열로 변경

React Artifact에서 자주 쓰이는 패턴을 몇 가지 정리한다.

탭 네비게이션: useState로 활성 탭을 관리하고 조건부 렌더링으로 콘텐츠를 전환하는 패턴이다. 하나의 Artifact 안에 여러 뷰를 담을 수 있어 정보 밀도를 높일 수 있다.

검색과 필터: 입력값에 따라 데이터를 실시간으로 필터링하는 패턴이다. useMemo를 활용하면 성능도 챙길 수 있다.

폼과 유효성 검증: 사용자 입력을 받아 처리하는 패턴이다. 계산기, 설문조사, 데이터 입력 도구 등을 만들 때 핵심이 된다.

모달과 팝오버: 상세 정보를 오버레이로 보여주는 패턴이다. 테이블 행을 클릭하면 상세 내용이 나타나는 식이다.

핵심은 Claude가 사용할 수 있는 도구의 범위를 이해하고, 그 안에서 최대한 풍부한 인터랙션을 설계하는 것이다.

베스트 프랙티스 4: Recharts와 SVG로 데이터 시각화 만들기

데이터 시각화는 Artifacts가 특히 강력한 영역이다. Recharts 라이브러리가 내장되어 있어 별도 설치 없이 다양한 차트를 만들 수 있고, SVG를 직접 작성해서 맞춤형 그래픽도 가능하다.

Recharts 활용 프롬프트 예시:

React Artifact로 분기별 영업 실적 리포트를 만들어줘.

차트 구성:
1. 복합 차트: 월별 매출은 바 차트로, 목표 달성률은 라인 차트로 동시에 표시
   - X축: 1월~12월
   - 좌측 Y축: 매출 (억 원 단위)
   - 우측 Y축: 달성률 (%)
   - ResponsiveContainer로 감싸서 반응형 처리

2. 영역 차트: 제품군별 매출 추이를 AreaChart로 표시
   - 3개 제품군을 서로 다른 색상으로 구분
   - 투명도를 줘서 겹치는 부분이 보이게

3. 수평 바 차트: 영업 담당자별 실적 순위

모든 차트에 툴팁을 넣어서 마우스 오버 시 상세 수치가 보이게 해줘.
범례는 차트 하단에 배치하고, 클릭하면 해당 데이터를 숨기거나 보여주는
토글 기능을 유지해줘.

SVG 직접 작성이 적합한 경우도 있다. 네트워크 토폴로지, 건축 도면, 플로어 플랜, 커스텀 아이콘 세트처럼 정형화된 차트 라이브러리로 표현하기 어려운 시각화에는 SVG Artifact가 낫다.

SVG Artifact로 마이크로서비스 아키텍처 다이어그램을 만들어줘.

구성:
- 중앙에 API Gateway (큰 사각형)
- 주변에 5개 서비스 노드: 인증, 사용자, 주문, 결제, 알림
- 각 서비스에서 사용하는 데이터베이스를 원통 모양으로 연결
- 서비스 간 통신은 점선 화살표, DB 연결은 실선
- 각 노드에 서비스 이름과 기술 스택 레이블 표시 (예: Node.js, PostgreSQL)
- 전체적으로 깔끔한 기술 문서 스타일

색상: 서비스는 파란 계열, DB는 회색 계열, Gateway는 보라색

데이터 시각화에서 흔히 저지르는 실수는 데이터를 먼저 정의하지 않고 차트 형태부터 요청하는 것이다. 어떤 데이터를, 어떤 관점에서, 누구에게 보여줄지 먼저 정하고, 그에 맞는 차트 유형을 선택해야 한다.

베스트 프랙티스 5: 연결된 Artifact로 다단계 워크플로우 구축하기

하나의 큰 결과물을 하나의 Artifact로 만들려고 하면 복잡도가 급격히 올라간다. 대신, 여러 Artifact를 논리적으로 연결해서 다단계 워크플로우를 구성하는 것이 효과적이다.

예시: 프로젝트 기획부터 발표까지의 워크플로우

1단계 프롬프트:
마크다운 Artifact로 신규 모바일 앱 프로젝트 기획서를 만들어줘.
- 프로젝트 개요, 목표, 대상 사용자, 핵심 기능 5가지, 기술 스택,
  일정 개요, 예상 리소스를 포함해줘.
- 피트니스 트래킹 앱이고, 타겟은 20-30대 직장인이야.

2단계 프롬프트:
위 기획서의 기술 스택과 아키텍처를 기반으로 Mermaid Artifact로
시스템 아키텍처 다이어그램을 만들어줘.
- 프론트엔드, 백엔드, 데이터베이스, 외부 API 연동을 모두 포함
- 데이터 흐름 방향을 화살표로 표시

3단계 프롬프트:
같은 프로젝트에 대해 React Artifact로 앱의 메인 화면 프로토타입을
만들어줘.
- 기획서에 나온 핵심 기능 5가지를 탭으로 접근할 수 있는 구조
- 모바일 앱 느낌이 나도록 max-width를 400px로 제한하고 가운데 정렬
- 하단 탭바 네비게이션 포함

4단계 프롬프트:
이 프로젝트를 경영진에게 발표할 HTML Artifact를 만들어줘.
- 슬라이드 형식으로 좌우 화살표나 키보드로 넘길 수 있게
- 5장 구성: 문제 정의, 솔루션, 시장 기회, 기술 전략, 로드맵
- 각 슬라이드에 핵심 수치나 시각적 요소 포함
- 깔끔하고 전문적인 디자인

이렇게 하면 기획서, 아키텍처 다이어그램, 프로토타입, 발표 자료가 모두 일관된 내용으로 연결된다. 각 Artifact는 독립적으로 공유할 수도 있고, 전체를 이어서 보여줄 수도 있다.

핵심은 각 단계에서 이전 단계의 결과를 참조하도록 프롬프트에 명시하는 것이다. “위 기획서를 기반으로”, “같은 프로젝트에 대해”와 같은 표현이 Artifact 간의 일관성을 유지시킨다.

베스트 프랙티스 6: Mermaid로 기술 다이어그램과 흐름도 만들기

Mermaid 다이어그램은 기술 문서화에서 가장 가성비 높은 Artifact 유형이다. 텍스트 기반이라 수정이 쉽고, 여러 종류의 다이어그램을 하나의 문법 체계로 만들 수 있다.

순서도 (Flowchart) 예시 프롬프트:

Mermaid Artifact로 사용자 회원가입 프로세스 흐름도를 만들어줘.

포함할 단계:
1. 이메일 입력 -> 중복 확인
2. 중복이면 -> 로그인 페이지로 안내
3. 중복 아니면 -> 비밀번호 설정
4. 비밀번호 강도 검증 -> 약하면 재입력 요청
5. 강하면 -> 프로필 정보 입력 (선택)
6. 이메일 인증 발송
7. 인증 완료 -> 가입 완료 -> 온보딩 시작
8. 인증 미완료 -> 24시간 후 재발송 -> 72시간 후 데이터 삭제

조건 분기는 마름모로, 처리 단계는 사각형으로, 시작/끝은 둥근 사각형으로
표현해줘.

시퀀스 다이어그램 프롬프트:

Mermaid Artifact로 OAuth 2.0 Authorization Code Flow의
시퀀스 다이어그램을 만들어줘.

참여자: 사용자 브라우저, 클라이언트 서버, 인증 서버, 리소스 서버

전체 흐름을 표시하되, 각 단계에서 전달되는 핵심 파라미터도
메시지에 포함해줘. (예: redirect_uri, authorization_code, access_token)

토큰 만료 시 리프레시 토큰으로 갱신하는 흐름도 alt 블록으로 추가해줘.

ER 다이어그램 프롬프트:

Mermaid Artifact로 이커머스 플랫폼의 ER 다이어그램을 만들어줘.

테이블: 사용자, 상품, 주문, 주문상세, 카테고리, 리뷰, 배송
- 각 테이블의 주요 컬럼과 타입을 표시
- 관계 (1:N, N:M)를 정확하게 표현
- 배송은 주문과 1:1 관계

Mermaid에서 주의할 점은 다이어그램이 너무 복잡해지면 가독성이 떨어진다는 것이다. 노드가 15개를 넘으면 여러 다이어그램으로 분리하는 것을 고려하자. 또한 Mermaid의 레이아웃 엔진이 자동 배치를 하기 때문에, 노드 순서와 방향 지정(LR, TB)을 잘 활용해야 원하는 배치를 얻을 수 있다.

베스트 프랙티스 7: 공유와 임베딩을 위한 Artifact 최적화

Artifact를 만드는 것 자체가 목적인 경우는 드물다. 대부분은 누군가에게 보여주거나 다른 곳에 활용하기 위해 만든다. 공유와 재사용을 고려한 최적화 전략을 알아보자.

공유 가능한 Artifact 만들기:

Claude에서 생성된 Artifact는 “공유” 버튼을 통해 링크로 공유할 수 있다. 이때 받는 사람이 Claude 계정이 없어도 볼 수 있다. 따라서 Artifact 자체가 맥락을 충분히 담고 있어야 한다.

React Artifact로 분기 실적 보고서 대시보드를 만드는데,
공유받는 사람이 별도 설명 없이도 내용을 이해할 수 있도록 해줘.

- 상단에 보고서 제목, 기간, 작성일 표시
- 주요 지표 옆에 전 분기 대비 변동률 표시
- 차트에는 반드시 제목, 축 레이블, 단위 표시
- 하단에 데이터 출처와 주석 영역 포함
- 인쇄 시에도 깨지지 않도록 인쇄용 CSS 포함

다운로드와 재사용을 고려한 설계:

HTML Artifact는 다운로드해서 독립적으로 사용할 수 있다. 이를 위해 몇 가지를 고려해야 한다.

• 외부 CDN 의존성을 최소화하고 인라인 스타일을 활용하면 오프라인에서도 동작한다
• 반응형 레이아웃을 적용하면 다양한 환경에서 잘 보인다
• 시맨틱 HTML을 사용하면 접근성과 SEO가 개선된다

코드 재사용을 위한 구조화:

React Artifact를 실제 프로젝트에 가져가 쓸 계획이라면 처음부터 그에 맞게 요청하자.

React Artifact를 만들되, 나중에 실제 프로젝트에 복사해서 쓸 수 있도록
다음 사항을 지켜줘:
- 컴포넌트를 기능 단위로 분리해서 주석으로 구분
- props로 데이터를 받는 구조로 설계 (하드코딩된 데이터 대신)
- Tailwind 클래스 대신 CSS 변수로 테마 색상 관리
- TypeScript 타입 주석을 JSDoc 형태로 포함

흔한 실수와 해결 방법

Artifacts를 사용하면서 반복적으로 발생하는 문제들과 그 해결 방법을 정리한다.

1. 너무 많은 기능을 한 번에 요청하기

문제: “대시보드를 만들어줘. 차트 5개, 테이블 3개, 필터 10개, 다크 모드, 다국어, 인쇄 기능까지 넣어줘”처럼 요청하면 Claude가 일부 기능을 누락하거나 전체적인 품질이 떨어진다.

해결: 핵심 기능부터 시작해서 점진적으로 추가한다. 한 번의 요청에는 주요 기능 2-3개 정도가 적절하다.

2. Artifact 유형을 지정하지 않기

문제: “다이어그램 만들어줘”라고만 하면 Claude가 SVG, Mermaid, React 중 무엇으로 만들지 자의적으로 판단한다.

해결: “Mermaid Artifact로 만들어줘” 또는 “React Artifact로 만들어줘”처럼 유형을 명시한다.

3. 외부 API 호출을 기대하기

문제: Artifacts는 샌드박스 환경에서 실행되므로 fetch나 외부 API 호출이 차단된다.

해결: 샘플 데이터를 Artifact 내부에 정의하거나, 데이터를 입력받는 폼을 만들어서 사용자가 직접 데이터를 넣을 수 있게 한다.

4. 복잡한 상태 관리를 시도하기

문제: Redux나 Zustand 같은 외부 상태 관리 라이브러리는 사용할 수 없다.

해결: useState와 useReducer로 충분히 복잡한 상태도 관리할 수 있다. Context API 패턴을 활용하면 컴포넌트 간 상태 공유도 가능하다.

5. 라이브러리 호환성 문제

문제: 사용하려는 라이브러리가 Artifact 환경에서 지원되지 않는다.

해결: Artifact에서 사용 가능한 라이브러리를 확인하고, 지원되지 않는 경우 대안을 찾는다. 예를 들어, D3.js 대신 Recharts를, Styled Components 대신 Tailwind를 사용한다.

6. 긴 텍스트 콘텐츠에서 잘림 현상

문제: 매우 긴 Artifact를 생성하면 중간에 내용이 잘리는 경우가 있다.

해결: 하나의 매우 긴 Artifact보다 여러 개의 적절한 길이로 나누는 것이 안정적이다. 또는 탭이나 아코디언으로 콘텐츠를 분리하면 하나의 Artifact 안에서도 관리가 가능하다.

실전 활용 사례

실무에서 Artifacts를 활용하는 구체적인 사례를 소개한다. 각 사례에는 실제 사용할 수 있는 프롬프트를 포함했다.

사례 1: 프로젝트 제안서

마크다운 Artifact로 클라이언트에게 보낼 웹 리뉴얼 프로젝트 제안서를 작성해줘.

포함 항목:
- 프로젝트 배경과 목적
- 현재 사이트 문제점 분석 (성능, UX, 모바일 대응)
- 제안 솔루션: Next.js 마이그레이션, 디자인 시스템 구축, 성능 최적화
- 단계별 진행 계획 (3개월)
- 예상 비용 범위
- 기대 효과 (수치 포함)

톤은 전문적이되 지나치게 딱딱하지 않게. 클라이언트는 기술 비전공자인
마케팅 임원이야.

사례 2: 영업 대시보드

React Artifact로 B2B 영업팀 대시보드를 만들어줘.

기능:
- 파이프라인 퍼널: 리드 -> 미팅 -> 제안 -> 협상 -> 계약 (각 단계별 건수와 금액)
- 영업 담당자별 실적 테이블 (정렬 가능)
- 이번 달 목표 대비 달성률 게이지 차트
- 최근 성사된 딜 타임라인
- 분기 기준 필터

사례 3: 대출 상환 계산기

React Artifact로 대출 상환 계산기를 만들어줘.

입력 항목:
- 대출 금액 (슬라이더 + 직접 입력)
- 연이율 (%)
- 상환 기간 (년)
- 상환 방식 선택: 원리금 균등, 원금 균등, 만기 일시 상환

출력:
- 월 상환금액
- 총 상환금액
- 총 이자 금액
- 상환 스케줄 테이블 (월별 원금, 이자, 잔액)
- 원리금 균등 vs 원금 균등 비교 차트

금액은 한국 원화 형식으로 천 단위 콤마 표시해줘.

사례 4: 인터랙티브 프레젠테이션

HTML Artifact로 제품 로드맵 프레젠테이션을 만들어줘.

구성 (8슬라이드):
1. 표지: 제품명, 부제, 발표일
2. 비전: 한 줄 미션 스테이트먼트와 주요 목표 3가지
3. 지금까지의 성과: 주요 수치 4개를 카드로 (DAU, 매출, NPS, 시장점유율)
4. 사용자 피드백: 인용문 3개를 캐러셀로
5. Q1 계획: 타임라인 형태
6. Q2 계획: 기능 목록과 우선순위
7. 기술 로드맵: 인프라 개선 사항
8. Q&A: 연락처

좌우 화살표 키로 슬라이드 전환, 하단에 진행 표시기,
현재 슬라이드 번호 표시. 슬라이드 전환 시 부드러운 페이드 효과.

사례 5: API 문서

React Artifact로 REST API 문서 뷰어를 만들어줘.

기능:
- 좌측 사이드바: 엔드포인트 목록 (카테고리별 그룹)
- 우측 메인: 선택한 엔드포인트의 상세 정보
  - HTTP 메서드 뱃지 (GET=초록, POST=파랑, PUT=노랑, DELETE=빨강)
  - URL 패턴
  - 파라미터 테이블 (이름, 타입, 필수 여부, 설명)
  - 요청/응답 JSON 예시 (코드 하이라이팅)
  - 상태 코드별 응답 설명
- 상단 검색바로 엔드포인트 필터링

샘플로 사용자 관리 API (CRUD) 5개 엔드포인트를 넣어줘.

사례 6: 팀 회고 보드

React Artifact로 스프린트 회고 보드를 만들어줘.

3개 컬럼: 잘한 점, 개선할 점, 시도할 점
- 각 컬럼에 카드를 추가할 수 있는 입력 폼
- 카드에 투표 버튼 (좋아요 카운트)
- 투표 수 기준으로 자동 정렬
- 카드 삭제 기능
- 상단에 스프린트 번호와 날짜 입력 필드
- 전체 요약: 카드 수, 총 투표 수 통계

Artifacts vs Canvas vs Custom GPTs 기능 비교

Claude Artifacts, ChatGPT Canvas, Custom GPTs는 모두 AI를 활용한 콘텐츠 생성 도구이지만 지향점이 다르다. 각각의 특성을 비교한다.

Claude Artifacts의 강점:

• React 컴포넌트를 실시간 렌더링할 수 있는 유일한 환경이다
• Recharts, Tailwind 등 프론트엔드 라이브러리가 내장되어 있다
• 생성된 콘텐츠를 즉시 인터랙티브하게 조작할 수 있다
• 코드와 렌더링 결과를 동시에 볼 수 있다
• 링크 공유로 비개발자도 결과물에 접근 가능하다

ChatGPT Canvas의 강점:

• 긴 문서의 부분 편집에 최적화되어 있다
• 문서 내 특정 부분을 선택해서 수정을 요청할 수 있다
• 글쓰기와 코딩 모드를 전환할 수 있다
• 읽기 수준 조절, 길이 조절 등 문서 특화 기능이 있다

Custom GPTs의 강점:

• 특정 용도에 맞게 사전 설정된 AI 에이전트를 만들 수 있다
• 외부 API와 연동이 가능하다 (Actions 기능)
• GPT Store를 통해 다른 사용자와 공유할 수 있다
• 파일 업로드와 검색 기능이 내장되어 있다

용도별 추천:

핵심은 “어떤 도구가 더 좋은가”가 아니라 “어떤 작업에 어떤 도구가 맞는가”다. 인터랙티브한 결과물이 필요하면 Artifacts, 긴 문서 작업이면 Canvas, 반복적인 워크플로우 자동화면 Custom GPTs를 선택하면 된다.

자주 묻는 질문

Q: Artifacts를 사용하려면 유료 플랜이 필요한가?

무료 플랜에서도 Artifacts를 사용할 수 있다. 다만 무료 플랜은 사용량 제한이 있어 하루에 생성할 수 있는 Artifact 수가 제한될 수 있다. Pro 플랜 이상에서는 더 넉넉한 사용량이 제공된다.

Q: 생성된 Artifact의 코드를 다운로드할 수 있나?

가능하다. Artifact 상단의 코드 보기 버튼을 클릭하면 소스 코드를 확인할 수 있고, 이를 복사해서 로컬 프로젝트에 사용할 수 있다. HTML Artifact의 경우 파일로 직접 다운로드할 수도 있다.

Q: Artifact에서 외부 이미지를 불러올 수 있나?

HTTPS URL을 통한 외부 이미지 로드는 가능한 경우가 있으나, 안정적이지 않을 수 있다. 확실한 방법은 SVG를 인라인으로 작성하거나, Base64로 인코딩된 이미지를 사용하는 것이다.

Q: React Artifact에서 사용할 수 있는 라이브러리는 어떤 것이 있나?

Recharts (차트), Lucide React (아이콘), Tailwind CSS (스타일링)가 기본 제공된다. lodash 같은 유틸리티 라이브러리도 사용 가능한 경우가 있다. 다만 모든 npm 패키지를 자유롭게 설치할 수는 없으며, 사용 가능한 라이브러리는 Anthropic이 사전에 구성한 것으로 제한된다.

Q: Artifact 안에서 localStorage나 sessionStorage를 사용할 수 있나?

Artifact는 iframe 내부에서 실행되므로 기본적인 웹 API를 사용할 수 있다. localStorage와 sessionStorage도 동작하지만, 세션이 끝나면 데이터가 유지되지 않을 수 있다. 영구적인 데이터 저장이 필요하다면 Artifact 외부의 별도 저장소를 고려해야 한다.

Q: 하나의 대화에서 여러 Artifact를 만들 수 있나?

가능하다. 하나의 대화에서 여러 개의 Artifact를 만들 수 있고, 각각 독립적으로 관리된다. 이전에 만든 Artifact를 참조하면서 새로운 것을 만들 수도 있어 연결된 결과물을 구축할 수 있다.

Q: Artifact의 크기나 복잡도에 제한이 있나?

명시적인 크기 제한은 없지만, 너무 크거나 복잡한 Artifact는 생성 중 잘리거나 렌더링 성능이 저하될 수 있다. 경험적으로 하나의 Artifact는 500줄 이내의 코드로 유지하는 것이 안정적이다. 그 이상이 필요하면 여러 Artifact로 나누는 것을 권장한다.

Q: Artifact를 수정할 때 전체를 다시 생성하나?

수정 요청 시 Claude는 이전 Artifact를 기반으로 변경된 부분만 반영한 새 버전을 생성한다. 다만 내부적으로는 전체 코드를 다시 출력하는 방식이므로, 대화가 길어지면 이전 맥락이 흐려질 수 있다. 중요한 수정 사항이 있다면 명확하게 지정해주는 것이 좋다.

Q: Artifact를 팀원과 실시간으로 함께 편집할 수 있나?

현재 Artifacts는 실시간 공동 편집을 지원하지 않는다. 한 사람이 Artifact를 만들어 공유 링크를 보내면 다른 사람은 결과물을 볼 수만 있다. 공동 편집이 필요하면 코드를 내보내서 GitHub이나 CodeSandbox 같은 협업 도구에서 작업하는 것이 현실적이다.