Artifact 블록

/* 사용 예시 */
.card {
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
}

.highlight {
  color: var(--primary);
}

.subtle-text {
  color: var(--muted);
}

주요 변수: --primary, --foreground, --background, --border, --muted 등

Basecoat UI

미리 로드된 UI 컴포넌트 라이브러리입니다. class 기반으로 버튼, 카드, 테이블 등 기본 UI를 빠르게 구성할 수 있습니다.

<button class="bc-button">저장</button>

<div class="bc-card">
  <div class="bc-card-header">제목</div>
  <div class="bc-card-content">내용</div>
</div>

Suits SDK

window.suits 객체를 통해 데이터 접근, 워크플로우 실행 등 플랫폼 기능을 사용할 수 있습니다. 자세한 API는 Artifact SDK 문서를 참고하세요.

CDN 의존성

외부 JavaScript 라이브러리를 CDN으로 추가하여 사용할 수 있습니다. 에디터의 CDN 탭에서 URL을 등록합니다.

허용된 CDN 호스트

호스트
`cdn.jsdelivr.net`
`cdnjs.cloudflare.com`
`unpkg.com`
`cdn.tailwindcss.com`
`esm.sh`
`cdn.skypack.dev`
`d3js.org`
`cdn.d3js.org`

보안을 위해 위 호스트에서 제공되는 라이브러리만 사용할 수 있습니다.

데이터소스 연결

Artifact에서 데이터모델이나 통계 정의의 데이터에 접근하려면 데이터소스를 사전에 연결해야 합니다.

데이터소스 설정

항목	설명
타입	`datamodel` (데이터모델) 또는 `stat_definition` (통계 정의)
접근 권한	`read` (읽기 전용) 또는 `readwrite` (읽기/쓰기)
별칭 (alias)	코드에서 데이터소스를 참조할 이름

사용 예시

// 데이터소스에 등록한 데이터모델의 데이터 조회
const { rows } = await suits.fetchRows("dm_orders_id");

워크플로우 연결

Artifact에서 워크플로우를 실행하려면 사전에 허용할 워크플로우를 등록해야 합니다.

워크플로우 설정

항목	설명
워크플로우	실행할 워크플로우 선택
별칭 (alias)	코드에서 워크플로우를 참조할 이름

사용 예시

// 별칭 "processOrder"로 등록한 워크플로우 실행
const workflowId = suits.getWorkflowId("processOrder");
await suits.executeWorkflow(workflowId, { orderId: "12345" });

높이 설정

모드	설명
자동 (기본)	콘텐츠 크기에 맞게 자동 조절 (body 크기 변화를 감지)
고정	지정한 높이로 고정 (최소 32px)

보안

Artifact 블록은 다음과 같은 보안 정책으로 안전하게 실행됩니다.

정책	설명
Sandbox	`allow-scripts` 권한만 부여된 iframe에서 실행 (페이지 이동, 폼 제출 차단)
CDN 화이트리스트	허용된 도메인의 라이브러리만 로드 가능
데이터소스 제한	사전 등록된 데이터소스만 접근 가능
워크플로우 제한	사전 등록된 워크플로우만 실행 가능
Rate Limiting	API 호출에 속도 제한 적용

활용 예시

커스텀 대시보드

여러 데이터소스를 조합하여 맞춤형 대시보드를 구성합니다.

<div class="dashboard">
  <div class="kpi-row">
    <div class="bc-card" id="revenue-card"></div>
    <div class="bc-card" id="orders-card"></div>
    <div class="bc-card" id="customers-card"></div>
  </div>
  <div class="chart-area">
    <canvas id="trend-chart"></canvas>
  </div>
</div>

// 매출, 주문 데이터를 각각 조회하여 대시보드 구성
const { rows: revenue } = await suits.fetchRows("dm_monthly_sales_id");
const { rows: orders } = await suits.fetchRows("dm_recent_orders_id");

document.getElementById("revenue-card").textContent =
  `이번 달 매출: ${revenue[0].data.total.toLocaleString()}원`;

입력 폼

데이터를 입력받아 워크플로우를 실행하는 폼을 만듭니다.

<form id="order-form">
  <label>상품명</label>
  <input type="text" name="product" class="bc-input" />
  <label>수량</label>
  <input type="number" name="quantity" class="bc-input" />
  <button type="submit" class="bc-button">주문 요청</button>
</form>

document.getElementById("order-form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const workflowId = suits.getWorkflowId("createOrder");
  await suits.executeWorkflow(workflowId, {
    product: formData.get("product"),
    quantity: Number(formData.get("quantity")),
  });
});

데이터 시각화

CDN에서 Chart.js를 로드하여 고급 차트를 만듭니다.

// CDN 탭에 https://cdn.jsdelivr.net/npm/chart.js 추가 후 사용
const { rows: salesData } = await suits.fetchRows("dm_monthly_sales_id");

new Chart(document.getElementById("trend-chart"), {
  type: "line",
  data: {
    labels: salesData.map((d) => d.month),
    datasets: [{
      label: "월별 매출",
      data: salesData.map((d) => d.total),
      borderColor: "var(--primary)",
    }],
  },
});

복잡한 인터랙티브 UI가 필요하면 테일러에게 요청하세요. "주문 현황을 실시간으로 보여주는 대시보드를 만들어줘"처럼 자연어로 요청하면 됩니다.

다음 단계

Artifact SDK -- Suits SDK API 레퍼런스
데이터 블록 -- 통계 블록, 데이터모델 블록
워크플로우 -- 워크플로우 가이드

Artifact 블록

On this page