코딩 모르는 기획자도 30분 만에 웹앱 시안을 받는 법
먼저, 결과물부터 보자
이 글은 Anthropic의 Web Artifacts Builder라는 AI 코딩 스킬 설명서를 뜯어보는 리뷰다. 설명서 이야기만 하면 딱딱할 수 있으니, 먼저 이 스킬이 어디까지 가능한지 결과물부터 보여드리겠다.
프롬프트 64자. 파일 1개. 더블클릭하면 대시보드가 뜬다. 서버를 따로 띄우지 않아도 되고, 메신저로 파일을 보내면 상대도 바로 열어볼 수 있다. 이 글에서는 그 결과물이 어떤 방식으로 나오는지, 그리고 왜 초보자에게도 흥미로운 도구인지 차근차근 살펴본다.
💡 이 글에는 React, Vite 같은 이름이 조금 나옵니다. 다 외울 필요는 없어요. 여기서 중요한 건 기술 이름보다, AI가 복잡한 준비 과정을 얼마나 대신해주느냐입니다.
이 글의 핵심은 두 가지다. 왜 이 스킬이 초보자에게 특히 유리한지, 그리고 왜 결과물이 bundle.html 파일 하나로 끝나는지가 중심이다.
”코드는 나오는데, 이걸 어떻게 실행하지?”
2026년에는 AI에게 “대시보드 하나 만들어줘”라고 말하는 일이 이제 낯설지 않다. ChatGPT도, Claude도, Gemini도 코드를 빠르게 내놓는다. 문제는 그다음이다.
AI가 준 코드는 종종 조각난 상태로 온다. HTML, CSS, JavaScript가 따로 있고, 실행 환경은 사용자가 맞춰야 한다. 초보 개발자나 개발에 흥미가 있는 비개발자에게 가장 어려운 지점이 바로 여기다. 코드는 얼핏 나온 것 같은데, 막상 브라우저에서 돌려보려면 갑자기 터미널과 설치 명령어의 세계로 들어가야 한다.
나는 매일 AI 에이전트와 코드를 짠다. 비개발자 동료인 기획팀 민지(가명)에게 “이거 한번 써봐요”라고 권할 때마다, 실제로 막히는 건 코드 작성이 아니라 환경 세팅이었다.
그래서 눈에 들어온 게 Anthropic의 Web Artifacts Builder다. 이 도구가 정말로 그 장벽을 낮춰주는지, 설명서부터 직접 뜯어보기로 했다.
Web Artifacts Builder — Anthropic이 직접 만든 스킬
Web Artifacts Builder는 Claude를 만든 Anthropic이 공식 배포하는 스킬이다.
스킬이란 쉽게 말해, AI 코딩 도우미에게 주는 작업 설명서다. 사람에게 “이 업무는 이런 순서로 처리하세요”라는 가이드를 주는 것처럼, AI에게도 작업 지침을 텍스트로 주는 셈이다. AI는 이 파일을 읽고 어떤 순서로 일해야 할지 판단한다.
이 스킬이 눈에 띄는 이유는 만든 주체가 개인이 아니라 Claude의 제조사 본인이라는 점이다. 자기 도구를 가장 잘 아는 팀이 직접 작성한 레시피라는 뜻이다.
물론 이름값만으로 품질이 보장되지는 않는다. 그래서 이 글에서는 “Anthropic이 만들었으니 좋겠지”라고 넘기지 않고, 설명서 내용이 실제로 설득력 있는지 하나씩 확인해본다.
설명서를 열어봤다 — 겨우 70줄?
SKILL.md를 열어보고 가장 먼저 든 생각은 이것이었다. 생각보다 짧다. 겨우 70줄 정도다.
짧다는 건 장점이자 한계다. AI가 빠르게 파악하기는 좋다. 반면 예외 상황이나 오류 처리 지침은 얇을 가능성이 크다. 숙련 개발자는 빈 구멍을 메울 수 있지만, 초보자에게는 “왜 안 되지?”에서 멈출 수 있는 구조일 수도 있다.
먼저 원문을 직접 보고 싶은 분을 위해 전문을 올려둔다. 아래에서 중요한 블록만 쉽게 해석할 테니, 지금 당장 전부 읽지 않으셔도 괜찮다.
📄 SKILL.md 원문 전체 보기 (70줄)
---
name: web-artifacts-builder
description: Suite of tools for creating elaborate, multi-component claude.ai HTML
artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
Use for complex artifacts requiring state management, routing, or shadcn/ui
components - not for simple single-file HTML/JSX artifacts.
license: Complete terms in LICENSE.txt
---
# Web Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
1. Initialize the frontend repo using `scripts/init-artifact.sh`
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
4. Display artifact to user
5. (Optional) Test the artifact
**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
## Design & Style Guidelines
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using
excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
## Quick Start
### Step 1: Initialize Project
Run the initialization script to create a new React project:bash scripts/init-artifact.sh <project-name>
cd <project-name>This creates a fully configured project with:
- ✅ React + TypeScript (via Vite)
- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
- ✅ Path aliases (`@/`) configured
- ✅ 40+ shadcn/ui components pre-installed
- ✅ All Radix UI dependencies included
- ✅ Parcel configured for bundling (via .parcelrc)
- ✅ Node 18+ compatibility (auto-detects and pins Vite version)
### Step 2: Develop Your Artifact
To build the artifact, edit the generated files.
See **Common Development Tasks** below for guidance.
### Step 3: Bundle to Single HTML File
To bundle the React app into a single HTML artifact:bash scripts/bundle-artifact.shThis creates `bundle.html` - a self-contained artifact with all JavaScript,
CSS, and dependencies inlined.
**Requirements**: Your project must have an `index.html` in the root directory.
**What the script does**:
- Installs bundling dependencies (parcel, @parcel/config-default,
parcel-resolver-tspaths, html-inline)
- Creates `.parcelrc` config with path alias support
- Builds with Parcel (no source maps)
- Inlines all assets into single HTML using html-inline
### Step 4: Share Artifact with User
Finally, share the bundled HTML file in conversation with the user
so they can view it as an artifact.
### Step 5: Testing/Visualizing the Artifact (Optional)
Note: This is a completely optional step.
Only perform if necessary or requested.
To test/visualize the artifact, use available tools
(including other Skills or built-in tools like Playwright or Puppeteer).
In general, avoid testing the artifact upfront as it adds latency
between the request and when the finished artifact can be seen.
Test later, after presenting the artifact, if requested or if issues arise.
## Reference
- **shadcn/ui components**: https://ui.shadcn.com/docs/components설명서는 크게 네 덩어리로 읽힌다. 이 네 가지만 이해하면 전체 그림이 잡힌다.
📋 1. 메타데이터 — “이 도구는 어디에 쓰는가”
name: web-artifacts-builder
description: Suite of tools for creating elaborate,
multi-component claude.ai HTML artifacts...이 부분은 AI 에이전트에게 “나는 어떤 작업에 적합한 도구인가”를 알려준다.
핵심 문장은 이것이다. not for simple single-file HTML/JSX artifacts. 즉, 아주 단순한 HTML 한 장보다는 상태 관리, 라우팅, UI 부품이 필요한 조금 더 본격적인 화면에 어울린다는 뜻이다.
여기서 독자가 기억하면 좋은 포인트는 하나다. 이 스킬은 만능 도구가 아니라, 복잡한 프론트엔드 시안을 빠르게 만드는 데 초점이 맞춰져 있다는 점이다.
🔄 2. 5단계 워크플로우 — 설명서의 핵심
설명서의 중심은 5단계 작업 순서다.
init-artifact.sh로 프로젝트 초기화- 생성된 코드 수정
bundle-artifact.sh로 단일 HTML 파일 생성- 사용자에게 결과 공유
- 필요할 때만 테스트
이 순서가 중요한 이유는, AI가 무엇을 먼저 해야 하는지 명확하게 정리해 둔 레시피이기 때문이다.
특히 인상적인 건 마지막 단계다. 테스트가 기본이 아니라 선택이다. 설명서의 메시지는 분명하다. 먼저 보여주고, 문제가 생기면 나중에 고쳐라. 프로토타입 도구다운 철학이다.
완벽한 결과물을 한 번에 만드는 것보다, 빠르게 시안을 보여주는 것이 우선이라는 뜻이다. 초보자 입장에서도 이 철학은 이해하기 쉽다. 처음부터 모든 걸 완성하려고 하면 시작이 너무 무거워지기 때문이다.
🧰 3. 기술 스택 — 이름보다 역할만 알면 된다
설명서에 적힌 스택은 이렇다.
React 18 + TypeScript + Vite + Parcel + Tailwind CSS + shadcn/ui
처음 보면 어려워 보일 수 있다. 하지만 이 글에서 외워야 할 건 이름이 아니라 역할이다.
- React — 화면을 부품처럼 나눠서 조립하는 도구
- TypeScript — 코드 실수를 줄여주는 검사기
- Vite — 개발 중 변경 사항을 빠르게 보여주는 도구
- Parcel — 여러 파일을 하나로 묶어주는 포장기
- Tailwind CSS — 화면 스타일을 빠르게 붙이는 도구
- shadcn/ui — 버튼, 테이블, 팝업 같은 완성형 UI 부품 모음
여기서 독자가 기억할 건 하나다. 원래는 꽤 손이 많이 가는 세팅을, 이 스킬은 한 번에 깔아주려 한다는 점이다.
🎨 4. 디자인 가이드라인 — 짧지만 실전적인 규칙
설명서에서 가장 눈에 띈 문장은 이것이었다.
“VERY IMPORTANT: 과도한 중앙 정렬, 보라색 그라데이션, 획일적인 둥근 모서리, Inter 폰트 사용을 피하라.”
AI로 화면을 만들어본 사람이라면 왜 이런 문장이 들어갔는지 바로 이해할 수 있다. AI는 종종 비슷비슷한 화면을 만든다. 보라색 그라데이션, 둥근 카드, 중앙 정렬이 반복되는 이른바 AI 슬롭 스타일이다.
재밌는 건, “이렇게 만들어”보다 **“이건 피하라”**는 금지 규칙이 더 강하게 작동한다는 점이다. 짧은 한 줄이지만, 실전에서 많이 부딪혀본 사람이 넣은 규칙처럼 보였다.
그래서 구체적으로 어떻게 작동하는가?
여기서는 이 스킬이 실제로 어떤 흐름으로 작동하는지, 사용자가 무엇을 하고 AI가 무엇을 대신하는지 정리해보겠다.
사용자가 “만들어줘”라고 말하면
가장 먼저 짚고 넘어갈 건 이것이다. 사용자가 모든 명령어를 하나하나 직접 입력하는 구조는 아니다.
AI 에이전트는 대화를 시작할 때 지정된 위치에 스킬 파일이 있으면 그 내용을 읽고 작업 순서를 참고한다. 쉽게 말해, 시작 전에 레시피를 읽고 들어가는 셈이다.
그래서 사용자는 “대시보드 만들어줘”처럼 결과 중심으로 요청할 수 있다. 그러면 AI는 설명서에 적힌 순서를 따라 프로젝트 초기화, 코드 생성, 번들링 같은 작업을 이어서 진행한다.
다만 여기에는 중요한 단서가 있다. AI 에이전트 설치와 최초 환경 준비까지 완전히 사라지는 것은 아니다. 처음 한 번은 사용자가 그 벽을 넘어야 한다. 이 스킬이 없던 벽을 없애는 게 아니라, 벽의 높이를 많이 낮춰주는 쪽에 가깝다. 즉, 웹앱을 혼자 완성해주는 마법이라기보다, 초보자가 가장 자주 막히는 준비 과정을 크게 줄여주는 도구에 가깝다.
AI가 알아서 부품을 고른다
요청이 들어오면 AI는 화면에 어떤 요소가 필요한지 스스로 판단한다.
예를 들어 “대시보드”라는 말을 들으면, 테이블이 필요할지, 차트가 필요할지, 드롭다운이 필요할지를 추론한다. 그다음 shadcn/ui 같은 준비된 부품을 조합해 결과물을 만든다.
이때 중요한 건 사용자가 “테이블 컴포넌트 넣어줘” 같은 세부 지시를 꼭 알 필요는 없다는 점이다. 사용자는 원하는 화면을 말하고, AI는 그에 맞는 부품을 골라 조립한다.
물론 한계도 있다. 이 생태계는 기본적으로 React 중심이라, Vue나 Svelte를 쓰는 사람에게는 그대로 맞지 않을 수 있다. 하지만 이 글의 타깃인 초보 개발자나 입문자는 우선 “AI가 이런 방식으로 부품 단위 화면을 만든다” 정도만 이해해도 충분하다.
결과물은 파일 하나로 포장된다
보통 웹앱은 파일이 여러 개다. 그래서 다른 사람에게 보여주려면 서버를 띄우거나, 배포를 하거나, 별도 공유 환경을 준비해야 한다.
이 스킬은 그 과정을 bundle.html 파일 하나로 압축해 버린다. Parcel이 여러 파일을 분석해서 HTML 하나에 넣어주는 방식이다.
- 📂
bundle.html하나만 있으면 됨 - 💬 파일 첨부로 바로 공유 가능
- ☁️ 서버 없이 로컬에서 열 수 있음
이 지점이 초보자에게 특히 강력하다. 개발 지식이 적어도, **“파일 하나를 더블클릭하면 된다”**는 경험은 바로 이해할 수 있기 때문이다. 반대로 말하면, 이 글에서 가장 중요한 포인트는 React를 배웠느냐가 아니라 결과물을 얼마나 쉽게 확인하고 공유할 수 있느냐다.
하지만 이 장점은 동시에 한계이기도 하다. 여기 들어가는 건 화면이다. 로그인, 회원가입, 데이터 저장, 결제처럼 서버가 필요한 기능은 bundle.html만으로 해결되지 않는다. 그래서 이 도구는 완성된 서비스보다는 동작하는 시안에 더 가깝다.
나의 솔직한 인상
설명서를 읽고 난 뒤의 결론은 분명했다.
이 스킬은 “비개발자도 마법처럼 모든 웹앱을 만든다”는 도구가 아니다. 더 정확히 말하면, 복잡한 환경 세팅과 화면 제작의 첫 단계를 많이 줄여주는 자동화 도구다.
이 차이는 중요하다. 과장해서 보면 실망할 수 있고, 정확히 이해하면 꽤 유용하다.
정리하면 이렇다.
- 환경 세팅 — 많이 줄여준다. 하지만 최초 준비는 필요하다
- UI 부품 — 풍부하다. 다만 React 중심이다
- 결과물 —
bundle.html하나로 공유 가능하다 - 서버 기능 — 포함되지 않는다
- 디자인 — AI 슬롭을 피하라는 실전 규칙이 들어 있다
즉, 이 스킬의 핵심 가치는 **“처음 결과물을 꺼내는 속도”**에 있다. 코드 한 줄 한 줄의 마법보다, 해보려다가 포기하게 만들던 준비 과정을 확 줄여주는 쪽이다.
그리고 이건 생각보다 큰 차이다. 원래 30분 걸리던 준비가 3분이 되면, 사람은 훨씬 더 자주 시도하게 된다.
다음 편 — 진짜로 돌려본다 🔥
여기까지는 설명서를 읽고 구조를 해석한 것이다. 이제 남은 질문은 하나다. 정말로 이 레시피가 실제 작업에서도 통하는가?
다음 편에서는 직접 실행해본다.
init-artifact.sh를 실제로 돌려 프로젝트를 만들고- “대시보드 만들어줘” 한마디로 어디까지 나오는지 보고
- 완성된 결과물을 파일 하나로 열어본다
즉, 1편이 설명서 해설이라면 2편은 실전 검증이다.
🖥️ bundle.html — 내가 만든 대시보드 직접 열어보기
설치는 미리 해두자
2편을 바로 따라가고 싶은 분을 위해 설치 방법만 정리해둔다. 아래 명령어는 “이 스킬 설명서를 내 AI 에이전트가 읽을 수 있는 곳에 복사한다”는 뜻이다.
Claude Code
git clone https://github.com/anthropics/skills.git /tmp/skills
mkdir -p .claude/skills
cp -r /tmp/skills/skills/web-artifacts-builder .claude/skills/Antigravity (Gemini 기반)
git clone https://github.com/anthropics/skills.git /tmp/skills
cp -r /tmp/skills/skills/web-artifacts-builder \
~/.gemini/antigravity/skills/Gemini CLI
mkdir -p .gemini/skills
cp -r /tmp/skills/skills/web-artifacts-builder .gemini/skills/OpenAI Codex
mkdir -p .codex/skills
cp -r /tmp/skills/skills/web-artifacts-builder .codex/skills/
echo "웹 아티팩트 생성 시 .codex/skills/web-artifacts-builder/SKILL.md를 참조하라." \
>> AGENTS.md관련 링크
- Web Artifacts Builder GitHub (공식 저장소) — 스킬 원본 파일과 초기화·번들링 스크립트
- shadcn/ui 공식 문서 — 기본 탑재된 UI 부품 목록
- Anthropic Skills Repository — Anthropic 제공 전체 스킬 모음
- AI 슬롭 방지 매뉴얼 — frontend-design 스킬 — 42줄짜리 안티-슬롭 가드레일. 이 스킬과 같은 디자인 규칙을 공유하지만, 프레임워크 무관하게 적용 가능
설명서만 보고 감탄하는 건, 영화 예고편만 보고 별점 주는 것과 비슷하다. 다음 편에서 본편을 상영한다.