Claude Artifacts 데이터 시각화 사용법: KPI 표를 검토 대시보드로 만드는 법
TL;DR
Claude Artifacts는 대화와 분리된 창에 독립적인 앱·도구·콘텐츠를 만드는 기능입니다. Anthropic 공식 도움말은 visualizations와 Interactive React components를 대표 결과물로 안내합니다. 검토를 마친 비민감 KPI 표를 붙이고 필터·차트·상세 표가 있는 Artifact를 요청하면, 숫자를 읽는 순서를 한 화면에 정리할 수 있습니다.
다만 차트가 보인다고 숫자가 검증된 것은 아닙니다. 원표의 모든 행과 단위가 들어갔는지 확인합니다. Artifact 창에서는 underlying code를 열어 정적 데이터와 계산 규칙을 대조해야 합니다. 이번 흐름은 내부 preview 검토본에서 끝냅니다. Publish·공유·persistent storage·외부 연결은 별도 승인 전까지 사용하지 않습니다.
핵심 3줄 요약
이 글에서 다룰 내용
- Claude Artifacts로 만들 데이터 시각화의 범위
- 대시보드에 넣을 KPI 표를 정리하는 기준
- 그대로 복사해 쓸 Artifact 생성 프롬프트
- 차트와 underlying code를 원표에 대조하는 순서
- Publish와 공유를 첫 완료 범위에서 제외하는 이유
Claude Artifacts 데이터 시각화란
Claude Artifacts는 Claude가 만든 독립적인 결과물을 대화 오른쪽의 전용 창에서 보여 줍니다. 결과물을 수정하거나 다시 쓸 수도 있습니다. 공식 도움말은 문서, 코드, 단일 페이지 HTML, SVG, 다이어그램, Interactive React components를 예로 듭니다. 필요한 도구와 visualizations를 설명만으로 만들 수 있다고 안내합니다.
이 글에서 만드는 결과물은 승인된 KPI 표를 정적 데이터로 포함한 내부 검토 대시보드입니다. KPI 카드, 비교 차트, 필터, 상세 표를 한 화면에 두되, 원표에 없는 수치나 원인을 새로 만들지 않습니다. 대시보드는 의사결정 결과가 아니라 이상한 숫자와 누락 행을 찾기 위한 검토 인터페이스입니다.
이 흐름이 맞는 상황
월간 콘텐츠 성과, 프로젝트 진행률, 고객 문의 처리 현황처럼 작은 KPI 표를 여러 사람이 같은 순서로 검토해야 할 때 적합합니다. 스프레드시트에서 행을 오가며 목표·실적·단위·근거를 찾는 대신 차트에서 이상 구간을 고르고 같은 화면의 상세 행으로 내려갈 수 있습니다.
이미 BI 도구에서 권한과 계산식을 관리하거나, 실시간 운영 데이터를 직접 연결해야 하는 업무라면 이 흐름을 대체재로 쓰지 않습니다. 이번 글은 승인된 축약 표를 Artifact 안의 정적 데이터로 옮겨 내부 검토본을 만드는 작업만 다룹니다.
시작 전 준비
Claude와 Claude Desktop에서 Artifacts를 쓰려면 Code execution and file creation이 켜져 있어야 합니다. 개인 Free·Pro·Max 계정은 Settings > Capabilities에서, Team·Enterprise는 Owner가 Organization settings > Capabilities에서 확인합니다. 조직 정책으로 꺼져 있다면 우회하지 않고 관리자에게 사용 가능 여부를 확인합니다.
입력 표에는
기간 | 지표 | 목표 | 실적 | 단위 | 근거 이름 | 검증 상태
열을 둡니다. 개인정보, 고객 비밀, 계정 식별자, 공개 권한이 없는 원본 데이터는 제외합니다. 이번 작업에는 내부 공유를 승인받은 축약 값과 짧은 근거 이름만 씁니다.
완료 기준도 먼저 적습니다. 모든 입력 행이 상세 표에 있어야 합니다. 카드와 차트의 값·단위·기간은 원표와 같아야 하며 underlying code에는 외부 요청·미승인 데이터·persistent storage가 없어야 합니다. Publish와 외부 공유는 완료 기준에 포함하지 않습니다.
KPI 표를 검토 대시보드로 만드는 6단계
1단계: 원표의 행과 단위를 고정합니다
먼저 스프레드시트에서 검토할 행만 복사해 별도 표로 만듭니다. 기간과 지표 이름을 합쳐 각 행을 구분합니다. 금액·건수·비율처럼 계산 방식이 다른 값은
단위
열에 명시합니다. 빈칸은 0으로 바꾸지 말고
미집계
,
해당 없음
,
확인 필요
처럼 실제 상태를 적습니다.
표를 붙이기 전에 행 수를 기록합니다. 이후 Artifact의 상세 표와 underlying code가 같은 행 수를 갖는지 확인할 때 이 값이 기준이 됩니다.
2단계: 표시 규칙과 금지 작업을 정합니다
어떤 지표를 카드로 볼지, 어떤 축으로 비교할지, 필터를 어디에 둘지 정합니다. 상승이 좋은 지표와 하락이 좋은 지표를 구분합니다. 상태는 색상만이 아니라 텍스트와 수치로 함께 표시하도록 요청합니다.
외부 API, 웹 검색, MCP, connector, persistent storage는 사용하지 않는다고 명시합니다. 입력 표에 없는 원인·예측·목표를 만들지 않습니다. 계산할 수 없는 값은
확인 필요
로 남기는 규칙도 넣습니다.
3단계: Interactive React Artifact를 요청합니다
승인된 표와 아래 프롬프트를 Claude에 전달합니다. 결과물은 대화 오른쪽의 Artifact 창에서 확인합니다. 첫 버전이 일반 답변이나 정적 문서로 나오면, 같은 데이터와 범위를 유지한 채 Interactive React Artifact로 보여 달라고 수정 요청합니다.
화면에는 요약 카드, 지표·기간 필터, 비교 차트, 선택한 항목의 상세 표를 둡니다. 상세 표는 시각화 뒤에 숨겨진 원자료를 다시 확인하는 통로이므로 생략하지 않습니다.
4단계: 화면 값과 원표를 대조합니다
디자인보다 숫자를 먼저 봅니다. 원표와 상세 표의 행 수를 비교합니다. 각 행의 기간·지표·목표·실적·단위·근거 이름이 같은지도 확인합니다. 필터를 바꾼 뒤 카드·차트·상세 표가 같은 범위를 가리키는지도 봅니다.
차트 축과 툴팁에는 단위가 있어야 합니다. 비율과 금액을 같은 축에 섞거나,
미집계
를 0으로 그리거나, 없는 기간을 이어 그렸다면 수정 요청을 남깁니다.
5단계: underlying code와 버전을 검토합니다
Artifact 창 오른쪽 아래에서 underlying code를 볼 수 있습니다. 입력 표가 정적 데이터로 그대로 들어갔는지 확인합니다. 외부 URL이나 네트워크 요청이 추가되지 않았는지, persistent storage를 쓰는 코드가 없는지도 봅니다. 계산식이 있다면 어떤 열을 사용하고 빈칸을 어떻게 처리하는지 원표 기준과 대조합니다.
수정을 요청한 뒤에는 version selector로 이전 버전과 새 버전을 비교합니다. 수정 과정에서 행이 빠지거나 단위가 바뀌지 않았는지 다시 확인합니다. 코드가 익숙하지 않다면 Claude에게 데이터 배열, 계산 함수, 외부 호출 부분만 구분해 설명하게 한 뒤 원표와 직접 대조합니다.
6단계: 내부 검토본을 승인하고 종료합니다
모든 행과 표시 규칙이 맞으면 검증 일시와 검토자를 별도 기록에 남깁니다. 공식 도움말에 따라 Artifact 창에서 파일을 다운로드할 수 있습니다. 다운로드가 필요한 경우에도 먼저 사람이 승인합니다.
이번 작업은 Claude 안의 내부 preview 검토본 승인에서 끝납니다. Publish를 누르면 대화에서 만든 Artifact를 Artifacts 영역에 추가하는 별도 동작이므로 자동으로 진행하지 않습니다. 공유, 외부 배포, 실시간 데이터 연결은 각각 별도의 권한·보안 검토 뒤 결정합니다.
그대로 복사해 쓸 프롬프트
목표: 아래 승인된 KPI 표만 사용해 내부 검토용 Interactive React Artifact를 만든다.
허용 입력: 사용자가 이 메시지에 붙인 기간, 지표, 목표, 실적, 단위, 근거 이름, 검증 상태 열의 표.
제외 입력·금지 작업: 외부 웹, API, MCP, connector, 다른 대화나 파일, persistent storage를 사용하지 않는다. 표에 없는 수치, 원인, 예측, 목표, 기간을 만들지 않는다. Publish, 공유, 외부 전송, 원본 수정은 실행하지 않는다.
출력 형식: 상단에는 KPI 요약 카드, 가운데에는 지표·기간 필터와 비교 차트, 하단에는 필터가 적용된 상세 원표와 데이터 정의 영역을 둔다. 상태는 색상뿐 아니라 텍스트와 수치로 표시한다.
완료 기준: 입력 행이 하나도 빠지지 않고 상세 표에 나타난다. 카드·차트·상세 표의 값, 단위, 기간, 근거 이름이 입력 표와 일치한다. underlying code에는 입력 표의 정적 데이터와 표시용 코드만 있다.
추정 금지: 계산하거나 확인할 수 없는 값은 확인 필요로 표시한다. 상관관계를 원인으로 바꾸거나, 표에 없는 성과 설명을 만들지 않는다.
승인 지점: 먼저 preview만 보여 준다. 사용자가 원표와 underlying code를 대조한 뒤 수정 여부를 승인한다. Publish, 다운로드, 공유는 각각 별도로 사람이 승인한다.
실전 활용 팁
대시보드를 한 번에 완성하려 하지 않습니다.
데이터 행 확인 → 단위 확인 → 차트 확인 → 코드 확인
순서로 검토하세요. 화면 배치 수정과 데이터 수정을 한 요청에 섞으면 어느 단계에서 값이 달라졌는지 찾기 어렵습니다.
Artifact는 수정 요청을 받고 version selector로 버전을 오갈 수 있습니다. 따라서 수정 이유를 짧게 남기면 이전 화면과 새 화면을 비교하기 쉽습니다. 예를 들어
3월 전환율 단위 수정
,
미집계 행을 차트에서 제외하고 상세 표에는 유지
처럼 사실 단위로 기록합니다.
주의할 점
- Artifacts를 사용하려면 Code execution and file creation이 켜져 있어야 합니다. 조직에서 꺼 둔 기능을 우회하지 않습니다.
- visualizations와 Interactive React는 검토 인터페이스입니다. 표시된 수치가 자동으로 정확해지는 것은 아닙니다.
- 개인정보, 고객 비밀, 원본 운영 데이터는 넣지 않습니다. 승인된 축약 표만 사용합니다.
- 차트의 색상·높이만 보고 판단하지 않습니다. 단위, 기간, 툴팁, 상세 행을 함께 확인합니다.
- underlying code에서 외부 요청·미승인 데이터·persistent storage가 없는지 봅니다.
- 대화에서 만든 Artifact는 자동으로 Artifacts 영역에 나타나지 않습니다. Publish는 별도 동작이므로 첫 완료 범위에서 제외합니다.
- 다운로드·공유·외부 배포·실시간 연결은 사람 승인 뒤 진행합니다.
자주 묻는 질문
Claude Artifacts가 표의 숫자를 자동으로 검증해 주나요?
아닙니다. Artifact는 숫자를 보기 좋게 배치하고 탐색하게 돕습니다. 하지만 정확성을 보장하지는 않습니다. 원표의 모든 행과 단위를 상세 표 및 underlying code와 대조해야 합니다.
꼭 Interactive React로 만들어야 하나요?
필터와 상세 행 선택이 필요한 검토 흐름에는 적합합니다. 단순한 고정 차트 한 장이면 SVG나 다른 Artifact 형태로도 충분할 수 있습니다. 이 글은 지표·기간 필터와 원표 대조가 필요한 내부 검토 화면을 기준으로 합니다.
underlying code에서 무엇을 먼저 봐야 하나요?
입력 데이터 배열의 행 수·값·단위, 계산 함수, 빈칸 처리, 외부 URL과 네트워크 요청, persistent storage 사용 여부를 확인합니다. 화면에 보이는 대표 숫자만 맞는지 보는 것으로 끝내지 않습니다.
검토가 끝나면 바로 Publish해도 되나요?
아닙니다. 공식 도움말에서 Publish는 대화에서 만든 Artifact를 Artifacts 영역에 추가하는 별도 동작입니다. 이번 흐름은 내부 preview 승인에서 끝냅니다. Publish·다운로드·공유는 각각 권한과 배포 범위를 검토한 뒤 사람이 결정합니다.
출처
마무리
Claude Artifacts로 KPI 대시보드를 만들 때 중요한 것은 차트의 화려함이 아니라 원표로 돌아갈 수 있는 검토 구조입니다. 승인된 표를 정적 데이터로 넣습니다. 요약 카드·차트·상세 표는 같은 값을 가리켜야 합니다.
마지막에는 underlying code에서 행과 계산 규칙을 다시 확인합니다. 사람이 원표 대조를 끝낸 내부 preview만 승인하고 Publish와 공유를 다음 결정으로 남기면, 데이터 시각화를 검증 가능한 업무 결과로 마칠 수 있습니다.
