[Claude 활용 24회 — AI에게 일을 위임하는 법] 16/24화: Claude 아티팩트 활용 4단계 — 살아있는 대시보드 만들기
지난달, 팀 공유용으로 만든 분석 보고서를 다시 찾으려 했다. 30분을 뒤졌다. 이메일 첨부, 클라우드 드라이브 폴더 세 곳, 메신저 파일함. 결국 찾았는데, 데이터가 두 달 전 것이었다. 처음부터 다시 만들었다. 또 3시간.
이게 나만의 문제가 아니라는 걸 안다. 산출물을 ‘만드는’ 데 들이는 시간은 줄었다. 13화에서 다뤘듯이 Cowork에 지시 하나면 엑셀 보고서가 나오고, 15화에서 예약 작업까지 걸어뒀다. 그런데 그 결과물을 ‘다시 열어보는’ 순간에서 모든 게 무너진다. Claude 아티팩트는 이 문제를 구조적으로 해결한다 — 만들고 끝이 아니라, 살아서 갱신되고, 찾을 수 있고, 공유할 수 있는 산출물. 오늘은 그 실전을 다룬다.
산출물이 사라지는 3가지 패턴
20년 동안 시스템을 운영하면서, 산출물이 쓸모없어지는 경로가 정확히 세 가지라는 걸 체감했다. AI가 아무리 좋은 결과물을 만들어줘도, 이 세 가지 중 하나에 걸리면 ‘없는 것’이나 마찬가지다.
패턴 1 — 일회용 파일 증후군
CSV를 받아서 분석하고, 결과를 PDF로 뽑고, 메일로 보낸다. 이 흐름에서 산출물의 수명은 ‘수신자가 읽는 순간’까지다. 다음 주에 같은 분석이 필요하면? 처음부터. 13화에서 Cowork로 엑셀·PPT를 자동 생성하는 법을 다뤘는데, 그 결과물도 대부분 이 패턴에 빠진다. 파일은 만들어지는 순간부터 죽기 시작한다.
패턴 2 — 스냅샷 고착
대시보드를 만들어서 팀에 공유했다. 이번 달 매출 현황, 프로젝트 진행률, KPI 달성도. 공유한 날엔 반응이 좋다. 문제는 다음 주다. 숫자가 그대로다. 아무도 갱신하지 않는다. 스냅샷은 사진이지 거울이 아니다. 현재를 비추지 못하는 대시보드는 벽에 걸린 작년 달력과 같다.
패턴 3 — 검색 불가
분명 만들었다. 어딘가에 있다. 하지만 이름이 분석_최종_v3_수정본(2).xlsx이고, 어떤 폴더에 넣었는지 기억나지 않는다. 클라우드 드라이브의 검색은 파일 내용을 제대로 인덱싱하지 못하고, 메신저로 보낸 파일은 대화 히스토리에 묻힌다. 산출물이 존재하지만 접근 비용이 재생산 비용을 넘는 순간, 그건 사라진 것이다.
이 세 패턴의 공통점이 있다. 산출물을 ‘파일’로 취급한다는 것이다. 파일은 만들어진 순간의 상태에 고정되고, 파일 시스템이라는 위치에 종속되고, 갱신하려면 원본을 찾아서 열어서 고치고 다시 저장해야 한다. Claude 아티팩트는 이 모델을 뒤집는다.
Claude 아티팩트 — 다시 열 수 있는 산출물의 조건
Anthropic의 공식 문서에서 아티팩트(Artifact)를 설명하는 방식은 단순하다. 대화 중에 만들어진, 독립적으로 존재할 수 있는 콘텐츠. 하지만 실무에서 이게 의미하는 바는 훨씬 크다.
아티팩트가 파일과 다른 3가지
첫째, 아티팩트는 대화와 함께 산다. 엑셀 파일을 만들면 그 파일이 어떤 맥락에서 만들어졌는지 사라진다. 아티팩트는 ‘이 데이터로 주간 트렌드를 보여줘’라는 지시와 함께 존재한다. 다음에 열 때 그 맥락이 살아 있으므로 ‘지난주 대비 변화율을 추가해줘’라고 바로 이어갈 수 있다.
둘째, 아티팩트는 실행 가능하다. HTML 아티팩트는 브라우저에서 곧바로 돌아간다. 차트가 인터랙티브하고, 필터가 작동하고, 입력 폼이 계산을 수행한다. PDF 보고서에서는 불가능한 일이다. 이 실행 가능성이 ‘대시보드’, ‘트래커’, ‘계산기’라는 산출물 유형을 가능하게 한다.
셋째, 아티팩트는 공유 가능하다. 링크 하나로 누구에게나 보여줄 수 있다. 파일을 첨부하고, 상대가 맞는 프로그램을 설치했는지 걱정할 필요가 없다. 브라우저만 있으면 된다.
실무에서 쓸 만한 아티팩트 4가지 유형
Claude 아티팩트로 만들 수 있는 산출물을 실무 활용도 순으로 정리하면 이렇다.
- 대시보드 — 지표를 시각화하고 인터랙티브하게 탐색. 매출 현황, 프로젝트 진행률, 개인 KPI 추적기. 이번 회차의 메인 실습 대상이다.
- 트래커 — 상태를 추적하고 이력을 남기는 도구. 업무 체크리스트, 습관 기록표, 독서 기록. 입력 → 저장 → 조회의 CRUD 루프가 돌아간다.
- 계산기 — 반복적인 계산을 자동화. 견적 시뮬레이터, 세금 계산기, 포인트 환산기. 입력값을 바꾸면 결과가 즉시 바뀐다.
- 보고서 — 마크다운이나 HTML 형태의 정형 문서. 13화에서 다룬 Cowork 산출물의 발전형. 차이는 ‘갱신 가능하다’는 점.
핵심은 이 네 유형 모두 ‘다시 열었을 때 쓸모가 있는가’를 기준으로 설계한다는 것이다. 한 번 보고 끝날 자료라면 아티팩트로 만들 이유가 없다.
갱신형 아티팩트 vs 스냅샷 아티팩트
아티팩트를 설계할 때 가장 먼저 결정할 것은 이것이다 — 이 산출물은 한 번 만들고 끝인가, 아니면 반복적으로 데이터가 바뀌는가.
스냅샷 아티팩트는 단순하다. 분기 보고서, 프레젠테이션 초안, 일회성 분석 결과. 만들고, 확인하고, 필요하면 약간 수정하고, 내보낸다. 이것도 파일보다는 낫다. 대화 맥락이 남아서 수정이 쉽기 때문이다.
갱신형 아티팩트는 진짜 가치가 있는 쪽이다. 매주 숫자가 바뀌는 대시보드, 매일 상태가 갱신되는 트래커. 이걸 15화에서 다룬 예약 작업과 연결하면 ‘내가 손대지 않아도 살아있는’ 산출물이 된다. 이번 회차에서 집중적으로 실습할 부분이다.
실습: 개인 지표 대시보드를 아티팩트로 만들기
실습 주제는 구체적으로 정했다. 개인 지표 대시보드 — 1인 사업이든 부업이든 사이드 프로젝트든, 자기 활동의 핵심 숫자를 한눈에 보는 판이다. 추적할 지표는 세 가지: 수입, 구독자 수, 콘텐츠 발행 수. 이걸 매주 자동으로 갱신되게 만든다.
1단계 — 지표 정의서 쓰기
아티팩트를 만들기 전에 지표 정의서부터 쓴다. 4화에서 강조한 ‘작업 지시서’의 원칙이 여기서도 그대로 적용된다. 지표가 모호하면 대시보드도 모호해진다.
## 개인 지표 대시보드 — 지표 정의서
### 1. 수입 (Revenue)
- 단위: 원 (₩)
- 수집 주기: 주 1회 (매주 월요일)
- 데이터 소스: 수동 입력 (향후 계좌 연동 검토)
- 표시 형태: 월별 막대 차트 + 누적 추이선
- 비교 기준: 전월 동기 대비 증감률
### 2. 구독자 수 (Subscribers)
- 단위: 명
- 수집 주기: 주 1회
- 데이터 소스: 뉴스레터 플랫폼 CSV 내보내기
- 표시 형태: 주별 추이 꺾은선 그래프
- 비교 기준: 주간 순증
### 3. 콘텐츠 발행 수 (Published Content)
- 단위: 건
- 수집 주기: 주 1회
- 데이터 소스: 블로그 RSS 또는 수동 기록
- 표시 형태: 주별 막대 + 월간 목표 달성률
- 목표: 주 2건이 정의서가 대시보드의 설계도다. Claude에게 ‘대시보드 만들어줘’라고만 하면 14화에서 다룬 커넥터 연결 이전에 무엇을 보여줄지조차 정해지지 않은 산출물이 나온다. 산출물 품질은 지시서 품질을 절대 넘지 않는다 — 13화에서 한 말이지만, 아무리 반복해도 부족하지 않다.
2단계 — 아티팩트 생성 지시
지표 정의서를 작성했으면, Cowork(또는 Claude 대화)에서 아티팩트를 생성한다. 아래는 실제로 내가 사용하는 지시 구조다.
아래 지표 정의서를 기반으로 개인 지표 대시보드를 HTML 아티팩트로 만들어주세요.
[지표 정의서 전문 붙여넣기]
## 요구사항
1. 단일 HTML 파일로, 외부 CDN 의존성 없이 동작할 것
2. CSS는 다크 모드 기본, 라이트 모드 토글 가능
3. 데이터는 상단 JSON 블록에서 관리 (갱신 시 이 블록만 교체)
4. 차트는 Canvas API 또는 인라인 SVG로 직접 그릴 것
5. 반응형: 모바일에서도 카드가 세로로 정렬
6. 각 지표 카드에 전 기간 대비 증감 화살표 표시
## 데이터 구조 예시
```json
{
"lastUpdated": "2026-08-17",
"revenue": {
"monthly": [
{"month": "2026-03", "amount": 450000},
{"month": "2026-04", "amount": 520000},
{"month": "2026-05", "amount": 610000},
{"month": "2026-06", "amount": 580000},
{"month": "2026-07", "amount": 720000},
{"month": "2026-08", "amount": 350000}
]
},
"subscribers": {
"weekly": [
{"week": "2026-W28", "count": 1240},
{"week": "2026-W29", "count": 1285},
{"week": "2026-W30", "count": 1310},
{"week": "2026-W31", "count": 1378},
{"week": "2026-W32", "count": 1402},
{"week": "2026-W33", "count": 1455}
]
},
"content": {
"weekly": [
{"week": "2026-W28", "count": 2},
{"week": "2026-W29", "count": 1},
{"week": "2026-W30", "count": 3},
{"week": "2026-W31", "count": 2},
{"week": "2026-W32", "count": 2},
{"week": "2026-W33", "count": 1}
],
"weeklyGoal": 2
}
}
```
완료 조건: 브라우저에서 열었을 때 세 지표가 카드 형태로 보이고,
각 카드에 추이 차트와 증감 표시가 동작해야 합니다.이 지시에서 핵심은 세 가지다.
- 데이터와 뷰의 분리: 상단 JSON 블록에 데이터를 모아둔다. 갱신할 때 HTML 전체를 고칠 필요 없이 JSON만 바꾸면 된다. 이 설계가 3단계 자동 갱신의 전제 조건이다.
- 외부 의존성 제거: CDN에서 Chart.js나 D3를 불러오면 오프라인에서 깨진다. 아티팩트는 자급자족해야 한다.
- 완료 조건 명시: 4화 원칙. ‘대시보드 만들어줘’와 ‘세 지표 카드 + 추이 차트 + 증감 표시가 동작해야 합니다’의 차이가 결과물의 품질을 결정한다.
3단계 — 생성된 아티팩트 검증과 반복
Claude가 만들어준 아티팩트를 처음부터 완벽하게 기대하지 않는다. 중요한 건 반복 가능한 구조로 만들었느냐다. 아티팩트의 강점은 바로 이 반복에 있다.
## 첫 번째 피드백 (실제 사용한 지시)
수입 차트의 Y축 레이블이 "450000"으로 표시되는데,
"45만"처럼 한국어 단위로 바꿔주세요.
구독자 차트의 꺾은선 아래 영역을 연한 색으로 채워주세요.
마지막 업데이트 일시를 우측 상단에 "2026-08-17 갱신" 형태로 표시해주세요.
## 두 번째 피드백
전체 글꼴을 Pretendard로 바꾸되,
웹폰트 로드 실패 시 system-ui로 폴백하세요.
모바일에서 카드 간격이 너무 좁습니다.
padding을 1.5rem으로 늘려주세요.이 과정이 파일 기반 작업과 근본적으로 다른 점이다. 엑셀 파일을 AI에게 수정해달라고 하면 ‘새 파일’이 나온다. 아티팩트는 ‘같은 것’이 진화한다. 버전 히스토리가 대화 안에 남아 있어서, “아까 바꾼 Y축 레이블 스타일을 원래대로 돌려줘”라는 지시가 통한다.
검증 체크리스트를 공유한다. 나는 아티팩트를 만들 때마다 이 다섯 가지를 확인한다.
## 아티팩트 검증 체크리스트
□ 브라우저에서 단독 실행되는가? (CDN 의존성 없이)
□ 모바일 뷰포트(375px)에서 레이아웃이 깨지지 않는가?
□ 데이터 블록을 교체하면 차트가 정상 갱신되는가?
□ 다크 모드 / 라이트 모드 전환이 동작하는가?
□ 마지막 갱신 일시가 표시되는가?
실제 대시보드 코드 구조
Claude가 만들어주는 대시보드의 전형적인 구조를 보여주겠다. 전체 코드를 다 싣진 않지만, 뼈대를 이해하면 커스터마이징이 쉽다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>개인 지표 대시보드</title>
<style>
:root {
--bg: #0f172a;
--card-bg: #1e293b;
--text: #e2e8f0;
--accent: #38bdf8;
--positive: #4ade80;
--negative: #f87171;
}
[data-theme="light"] {
--bg: #f8fafc;
--card-bg: #ffffff;
--text: #1e293b;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Pretendard', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
padding: 2rem;
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
}
.card {
background: var(--card-bg);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.metric-value {
font-size: 2rem;
font-weight: 700;
}
.trend-up { color: var(--positive); }
.trend-down { color: var(--negative); }
canvas { width: 100%; height: 160px; }
</style>
</head>
<body>
<!-- ═══ 데이터 블록: 갱신 시 이 부분만 교체 ═══ -->
<script id="dashboard-data" type="application/json">
{
"lastUpdated": "2026-08-17",
"revenue": {
"monthly": [
{"month": "2026-03", "amount": 450000},
{"month": "2026-04", "amount": 520000},
{"month": "2026-05", "amount": 610000},
{"month": "2026-06", "amount": 580000},
{"month": "2026-07", "amount": 720000},
{"month": "2026-08", "amount": 350000}
]
},
"subscribers": {
"weekly": [
{"week": "W28", "count": 1240},
{"week": "W29", "count": 1285},
{"week": "W30", "count": 1310},
{"week": "W31", "count": 1378},
{"week": "W32", "count": 1402},
{"week": "W33", "count": 1455}
]
},
"content": {
"weekly": [
{"week": "W28", "count": 2},
{"week": "W29", "count": 1},
{"week": "W30", "count": 3},
{"week": "W31", "count": 2},
{"week": "W32", "count": 2},
{"week": "W33", "count": 1}
],
"weeklyGoal": 2
}
}
</script>
<div class="dashboard-header">
<h1>📊 개인 지표 대시보드</h1>
<span id="last-updated"></span>
</div>
<div class="card-grid">
<div class="card" id="revenue-card">
<h2>수입</h2>
<div class="metric-value" id="revenue-value"></div>
<canvas id="revenue-chart"></canvas>
</div>
<div class="card" id="subscriber-card">
<h2>구독자</h2>
<div class="metric-value" id="subscriber-value"></div>
<canvas id="subscriber-chart"></canvas>
</div>
<div class="card" id="content-card">
<h2>콘텐츠 발행</h2>
<div class="metric-value" id="content-value"></div>
<canvas id="content-chart"></canvas>
</div>
</div>
<script>
// 데이터 로드
const data = JSON.parse(
document.getElementById('dashboard-data').textContent
);
// 갱신일 표시
document.getElementById('last-updated').textContent
= data.lastUpdated + ' 갱신';
// 숫자 포맷 (450000 → "45만")
function formatKRW(n) {
if (n >= 10000) return (n / 10000).toFixed(0) + '만';
return n.toLocaleString();
}
// 증감 계산
function trendArrow(current, previous) {
const diff = current - previous;
const pct = ((diff / previous) * 100).toFixed(1);
const cls = diff >= 0 ? 'trend-up' : 'trend-down';
const arrow = diff >= 0 ? '▲' : '▼';
return `<span class="${cls}">${arrow} ${Math.abs(pct)}%</span>`;
}
// 간단한 막대 차트 (Canvas)
function drawBarChart(canvasId, values, labels) {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext('2d');
canvas.width = canvas.offsetWidth * 2;
canvas.height = 320;
const max = Math.max(...values) * 1.2;
const barWidth = (canvas.width - 80) / values.length;
values.forEach((v, i) => {
const h = (v / max) * 260;
const x = 40 + i * barWidth + barWidth * 0.15;
const w = barWidth * 0.7;
ctx.fillStyle = i === values.length - 1
? '#38bdf8' : '#475569';
ctx.fillRect(x, 300 - h, w, h);
ctx.fillStyle = '#94a3b8';
ctx.font = '20px system-ui';
ctx.textAlign = 'center';
ctx.fillText(labels[i], x + w / 2, 316);
});
}
// 렌더링
const rev = data.revenue.monthly;
const lastRev = rev[rev.length - 1].amount;
const prevRev = rev[rev.length - 2].amount;
document.getElementById('revenue-value').innerHTML
= '₩' + formatKRW(lastRev) + ' ' + trendArrow(lastRev, prevRev);
drawBarChart(
'revenue-chart',
rev.map(r => r.amount),
rev.map(r => r.month.slice(5))
);
// (구독자, 콘텐츠 차트도 동일 패턴으로 렌더링)
</script>
</body>
</html>이 코드에서 주목할 부분은 <script id="dashboard-data" type="application/json"> 블록이다. 모든 데이터가 이 한 곳에 모여 있다. 갱신할 때 이 JSON만 바꾸면 차트가 자동으로 다시 그려진다. 이 분리 구조가 다음 단계, 자동 갱신의 핵심 전제다.
4단계 — 자동 갱신 연결 (15화 콜백)
15화에서 예약 작업을 다뤘다. 매일 아침 6시에 관심 키워드를 수집하는 자동화를 만들었다. 그 패턴을 그대로 대시보드 갱신에 적용한다.
흐름은 이렇다.
## 주간 대시보드 갱신 — 예약 작업 설계
### 트리거
- 매주 월요일 오전 9시 (KST)
- Cowork 예약 작업 또는 로컬 스케줄러
### 수집 단계
1. 수입 데이터: Google Sheets에서 이번 주 행 읽기 (MCP 연결)
2. 구독자 수: 뉴스레터 플랫폼 API 또는 CSV 내보내기
3. 콘텐츠 발행: 블로그 RSS 피드에서 이번 주 발행 건수 카운트
### 갱신 단계
4. 기존 대시보드 아티팩트의 JSON 데이터 블록에 이번 주 데이터 추가
5. lastUpdated 필드를 현재 날짜로 변경
6. 아티팩트 저장
### 결과 알림
7. "대시보드 갱신 완료. 수입 ₩72만(+24%), 구독자 1,455명(+53명)"
→ 이메일 또는 메신저로 한 줄 요약 전송여기서 핵심은 ‘수집’과 ‘갱신’이 분리되어 있다는 것이다. 대시보드 자체는 JSON만 교체하면 되므로, 데이터 수집 로직이 바뀌어도 대시보드 코드를 건드릴 필요가 없다. 14화에서 다룬 커넥터(데이터 소스 연결)와 15화의 예약 작업이 조합되는 지점이다.
Cowork에서 이 예약 작업을 설정하는 실제 지시를 보자.
매주 월요일 오전 9시에 다음을 실행하세요:
1. 첨부한 Google Sheet(지표 기록)에서 가장 최근 행을 읽어오세요.
2. 읽어온 값으로 대시보드 아티팩트의 JSON 데이터를 갱신하세요.
- revenue.monthly 배열에 새 월 데이터 추가 (기존 월이면 금액 갱신)
- subscribers.weekly 배열에 이번 주 데이터 추가
- content.weekly 배열에 이번 주 발행 건수 추가
- lastUpdated를 오늘 날짜로 변경
3. 갱신이 끝나면 이전 주 대비 변화를 한 줄로 요약해서 알려주세요.
※ 실패 시: 3회 재시도 후 "갱신 실패" 알림만 보내세요.
데이터가 없으면 이전 주 값을 유지하고 "데이터 미수집" 표시.이 지시에서 마지막 두 줄이 중요하다. 15화에서 강조했듯이, 무인 작업은 실패 경로를 반드시 명시해야 한다. 데이터를 못 가져왔는데 대시보드에 0이 찍히면 그건 잘못된 정보를 보여주는 것이다. 차라리 ‘미수집’이라고 표시하는 편이 정직하다.
갱신형 아티팩트 운영법 — 팀 공유부터 브라우저 자동화까지
대시보드를 혼자 쓰면 절반의 가치다. 팀이나 이해관계자와 공유하고, 데이터 수집을 자동화하면 진짜 살아있는 산출물이 된다.
아티팩트 공유 3가지 패턴
패턴 A — 링크 공유
Claude에서 만든 아티팩트는 ‘공유’ 버튼으로 URL을 생성할 수 있다. 가장 단순하고 빠르다. 받는 사람은 Claude 계정 없이도 볼 수 있다. 다만 한 가지 제약이 있다 — 공유된 버전은 그 시점의 스냅샷이다. 내가 아티팩트를 갱신해도 이미 공유된 링크의 내용이 자동으로 바뀌지는 않을 수 있다. 공유 시점을 갱신 직후로 맞추거나, 갱신할 때마다 새 링크를 보내는 운영이 필요하다.
패턴 B — HTML 파일 직접 호스팅
아티팩트를 HTML 파일로 내보내서 자체 서버, GitHub Pages, Netlify 같은 정적 호스팅에 올린다. 이 경우 갱신 자동화가 훨씬 유연해진다. 예약 작업이 JSON 데이터 파일만 교체하면 되므로, HTML 본체는 건드리지 않고 데이터만 바꿔치기한다. 개발자에게는 이 패턴이 가장 강력하다.
## HTML 호스팅 시 데이터 분리 구조
dashboard/
├── index.html # 대시보드 본체 (변경 거의 없음)
├── data.json # 지표 데이터 (매주 갱신)
└── style.css # 스타일 (선택적 분리)
# index.html에서 외부 JSON 로드
fetch('./data.json')
.then(r => r.json())
.then(data => renderDashboard(data));아까 실습에서 HTML 안에 JSON을 내장한 것과 비교하면, 이 구조는 갱신이 data.json 파일 하나를 교체하는 것으로 끝난다. Git으로 관리하면 데이터 이력까지 남는다.
패턴 C — 임베드
사내 위키, 노션, 컨플루언스 같은 협업 도구에 HTML을 iframe으로 심는다. 이 패턴은 ‘대시보드를 보러 따로 가지 않아도 되게’ 만든다. 팀원이 일상적으로 여는 페이지에 지표가 자연스럽게 노출된다. 다만 CSP(Content Security Policy) 제약으로 iframe이 차단되는 환경이 있으므로 사전 테스트가 필요하다.
브라우저 자동화로 데이터 채우기
모든 데이터 소스가 API를 제공하면 좋겠지만, 현실은 다르다. 통계 페이지에 로그인해서 숫자를 눈으로 읽어야 하는 경우가 태반이다. 이때 브라우저 자동화가 답이 된다.
Cowork에서 브라우저 자동화를 사용하는 시나리오를 하나 보자. 뉴스레터 플랫폼의 구독자 수를 가져오는 경우다.
## 브라우저 자동화 지시 — 구독자 수 수집
다음 단계로 구독자 통계를 수집해주세요:
1. 브라우저로 [뉴스레터 관리 페이지]에 접속
2. 대시보드의 "총 구독자" 숫자를 읽어오기
3. "이번 주 신규" 숫자를 읽어오기
4. 두 값을 JSON 형태로 반환:
{"total": 1455, "newThisWeek": 53, "collectedAt": "2026-08-17T09:00:00+09:00"}
주의:
- 로그인이 필요하면 저장된 자격 증명을 사용
- 페이지 로딩을 충분히 기다린 후 숫자를 읽을 것
- 숫자에 쉼표가 포함되어 있으면 제거하고 정수로 변환이 자동화가 15화의 예약 작업과 결합되면, 매주 월요일 아침 브라우저가 열리고, 데이터를 수집하고, 대시보드를 갱신하고, 알림이 오는 파이프라인이 완성된다. AI가 코드를 짜주는 시대가 아니라, AI에게 일을 위임하는 시대다. 매주 반복되는 이 수집-갱신 루프를 사람이 하면 30분, AI에게 위임하면 0분이다.
아티팩트 버전 관리
갱신형 아티팩트를 운영하면서 빼먹기 쉬운 것이 버전 관리다. 두 달 전 대시보드가 어떤 상태였는지 볼 수 있어야 분기 리뷰 때 쓸 수 있다.
방법은 세 가지다.
- Claude 대화 이력 활용: 아티팩트를 갱신한 대화 자체가 변경 이력이 된다. 다만 대화가 길어지면 이전 버전을 찾기 어려워진다.
- Git으로 관리 (추천): HTML 파일 호스팅(패턴 B)을 사용하면
data.json의 변경 이력이 자연스럽게 남는다.git log --oneline data.json으로 언제 어떤 데이터가 들어왔는지 추적 가능. - 아카이브 폴더 운영: 매 갱신 시 이전 데이터를
archive/2026-W33.json형태로 백업. 가장 원시적이지만 비개발 환경에서도 통한다.
어떤 방법이든 ‘이번 주 숫자가 이상한데, 지난주엔 얼마였지?’라는 질문에 30초 안에 답할 수 있으면 충분하다.
함정 — Claude 아티팩트에 절대 굽지 말아야 할 것
아티팩트의 편리함이 만드는 함정이 있다. ‘다 넣어도 되겠지’라는 생각이다. 아티팩트가 파일보다 공유가 쉽다는 것은, 동시에 의도하지 않은 사람에게 노출될 가능성도 높다는 뜻이다.
절대 아티팩트에 하드코딩하지 말 것 — 3가지
1. API 키와 인증 토큰
대시보드에서 직접 외부 API를 호출하고 싶은 유혹이 있다. “어차피 나만 보는 건데, API 키를 JavaScript에 넣어도 되지 않나?” — 안 된다. 아티팩트를 공유하는 순간, 브라우저 개발자 도구를 열면 모든 코드가 보인다. OWASP Top 10에서 꾸준히 경고하는 민감 데이터 노출 문제가 바로 이것이다.
// ❌ 절대 이러지 마세요
const API_KEY = 'sk-live-abc123...';
fetch(`https://api.example.com/stats?key=${API_KEY}`)
// ✅ 대신 이렇게
// 데이터 수집은 서버/예약작업에서 하고,
// 아티팩트에는 결과 JSON만 넣는다
const data = JSON.parse(
document.getElementById('dashboard-data').textContent
);2. 개인 식별 정보
실명, 전화번호, 이메일, 계좌번호. ‘나만 보는’ 대시보드에 수입 데이터와 함께 계좌번호를 넣어뒀다가, 팀 공유할 때 그 JSON을 깜빡 지우지 않는 사고가 실제로 일어난다. 데이터에 넣을 필드를 정할 때 ‘이 아티팩트가 공개된다면?’이라는 질문을 한 번 던져라.
3. 사내 시스템 URL과 인프라 정보
대시보드에 데이터 소스를 주석으로 남기는 습관이 있다면 조심해야 한다. <!-- 데이터 출처: https://internal.회사.co.kr/admin/stats --> 같은 주석이 아티팩트에 남아 있으면, 공유 시 사내 시스템 구조가 노출된다. 주석은 의미만 남기고 URL은 지운다.
아티팩트 위생 관리 습관
정기적으로 확인해야 할 것들을 정리했다.
## 아티팩트 위생 점검 — 월 1회
□ 사용하지 않는 아티팩트 목록 정리 (3개월 미갱신 → 아카이브)
□ 공유된 아티팩트의 접근 범위 확인 (공개 → 링크 가진 사람만)
□ JSON 데이터에 민감 필드가 추가되지 않았는지 검토
□ 자동 갱신 예약 작업이 정상 동작하는지 로그 확인
□ 데이터 소스 접근 권한이 최소 권한으로 유지되는지 확인6화에서 다룬 권한·샌드박스·훅의 원칙이 아티팩트에도 그대로 적용된다. 편의와 보안은 트레이드오프가 아니라 설계의 문제다. 처음부터 데이터와 뷰를 분리하고, 민감 정보를 아예 넣지 않는 구조로 만들면, 보안 때문에 공유를 포기할 필요가 없다.
아티팩트 너머 — 산출물을 자산으로 전환하는 관점
이번 회차에서 다룬 것은 기술적으로는 ‘HTML 파일 만들기’에 불과하다. 하지만 관점을 바꾸면 이것은 ‘작업 결과물을 재사용 가능한 자산으로 전환하는 방법’이다.
13화에서 Cowork로 보고서를 만들었다. 14화에서 데이터 소스를 연결했다. 15화에서 예약 작업으로 자동화했다. 그리고 이번 16화에서 그 모든 것의 결과를 ‘다시 열어볼 수 있는 형태’로 남기는 법을 다뤘다. PART 4(Cowork — 코드 밖 업무 자동화)가 여기서 완결된다.
이 네 회차를 관통하는 하나의 원칙이 있다. 산출물은 만드는 것보다 유지하는 것이 어렵다. 유지가 쉬운 구조로 만들어야 비로소 ‘자산’이 된다. 파일은 자산이 아니다. 열 수 있고, 갱신할 수 있고, 공유할 수 있는 시스템이 자산이다.
위임할 줄 아는 사람이 하나의 회사가 된다. 대시보드 하나 만든 것 같지만, 실제로는 데이터 수집 → 정리 → 시각화 → 공유 → 갱신이라는 다섯 단계 업무 전체를 AI에게 위임한 것이다. 이 위임의 결과물이 눈에 보이고 매주 살아 움직인다면, 그건 더 이상 ‘도구를 쓰는 것’이 아니라 ‘시스템을 운영하는 것’이다.
리드 수집 — 대시보드 템플릿과 아티팩트 운영 체크리스트
이번 회차에서 사용한 대시보드 HTML 템플릿(다크/라이트 모드 지원, JSON 데이터 분리 구조)과 아티팩트 위생 점검 체크리스트를 정리한 자료를 준비 중입니다. 시리즈 뉴스레터를 구독하시면 발행 즉시 받아보실 수 있습니다. 템플릿은 지표 정의서만 채우면 바로 커스터마이징해서 쓸 수 있는 구조입니다.
이번 회차의 수익화 지점
개인 지표 대시보드를 ‘남에게 팔 수 있는 형태’로 바꾸는 방법은 직관적이다. 프리랜서, 1인 사업자, 소규모 팀이 공통으로 추적하는 지표 세트가 있다 — 매출, 고객 수, 콘텐츠 발행, 비용. 이번 실습의 대시보드 구조를 업종별로 커스터마이징한 ‘대시보드 팩’을 만들 수 있다. 이를테면 ‘프리랜서 수익 대시보드’, ‘콘텐츠 크리에이터 성장 트래커’, ‘소규모 쇼핑몰 일간 현황판’. JSON 데이터 구조와 차트 유형만 바꾸면 되므로 한 번 만든 뼈대를 반복 활용할 수 있다. Skill로 굳히면(9화) 주문받는 형태도 가능하고, 12화에서 다룬 플러그인으로 패키징하면 마켓플레이스에 올릴 수도 있다. 핵심은 ‘나를 위해 만든 것’을 ‘같은 고민을 가진 사람을 위한 것’으로 일반화하는 한 걸음이다.
다음 회 예고
PART 5 — 실전 운영이 시작된다. 17화에서는 레거시 코드에 AI를 투입하는 법을 다룬다. 테스트가 0%인 코드베이스에서, AI에게 ‘고쳐줘’라고 시키기 전에 반드시 해야 할 일이 있다. 특성화 테스트(characterization test)를 먼저 만들게 하는 것. 20년차가 가장 진하게 느꼈던 교훈이 PART 5에 응축된다.
관련 회차:
- 13화: Cowork 업무 자동화 5단계 — 엑셀·PPT를 지시 하나로
- 15화: AI 예약 작업 3단계 — 자는 동안 돌아가는 시스템 만들기
- 9화: Claude Skills 3단계 — 반복 업무 한 번만 가르치기
- 12화: Claude 플러그인 만들기 5단계 — 만든 도구를 묶고 파는 법
◀ 이전 15화 (다음 차수는 아직 게시되지 않았습니다)
자주 묻는 질문
Claude 아티팩트가 일반 파일(엑셀, PDF)과 다른 점은 무엇인가요?
Claude 아티팩트는 파일과 달리 세 가지 차별점이 있습니다. 첫째, 대화 맥락과 함께 존재하므로 이전 지시를 이어받아 바로 수정할 수 있고, 둘째, HTML 기반으로 브라우저에서 실행 가능해 인터랙티브 차트나 필터가 작동하며, 셋째, 링크 하나로 별도 프로그램 설치 없이 누구에게나 공유할 수 있습니다.
산출물이 쓸모없어지는 패턴에는 어떤 것들이 있나요?
본문에서는 세 가지 패턴을 제시합니다. 일회용 파일 증후군(만든 즉시 수명이 끝남), 스냅샷 고착(공유 후 아무도 갱신하지 않아 데이터가 과거에 머무름), 검색 불가(파일이 존재하지만 찾는 비용이 다시 만드는 비용을 넘어섬)입니다. 이 세 패턴의 공통 원인은 산출물을 ‘파일’로 취급하기 때문입니다.
Claude 아티팩트로 만들 수 있는 실무 산출물에는 어떤 유형이 있나요?
실무 활용도 순으로 대시보드(매출 현황, KPI 등 지표 시각화), 트래커(업무 체크리스트, 습관 기록 등 상태 추적), 계산기(반복 계산 자동화) 등의 유형이 있습니다. 특히 대시보드는 인터랙티브하게 탐색 가능한 살아있는 산출물로, 본문의 메인 실습 대상입니다.
[…] 시리즈: Claude 활용 24회 — AI에게 일을 위임하는 법 (총 24화 중 17화)◀ 이전 16화 (다음 차수는 아직 게시되지 […]