claude code artifacts, 웹 미리보기 대신 파일로 남기는 실전 작업법

claude code artifacts를 찾는 분들이 가장 먼저 알아야 할 결론은 간단합니다. Claude Code에는 Claude 웹에서 보이는 ‘Artifacts 패널’이 그대로 들어있지 않습니다. 대신 프로젝트 폴더 안의 실제 파일을 만들고 수정하는 방식이라, 결과물을 artifacts/, docs/, prototype/ 같은 폴더에 남기면 거의 같은 목적을 더 개발자답게 해결할 수 있습니다.

Claude Code를 쓰고 있다면 다음 작업부터 artifacts 폴더와 changes.md를 함께 만들어 결과물을 잃어버리지 않게 관리해보세요.

즉, 빠른 UI 초안은 Claude 웹 Artifacts가 편하고, 실제 앱 코드·리팩터링·테스트 반영은 Claude Code가 낫습니다. 저는 로컬 Vite 프로젝트에서 Claude Code로 작은 대시보드 컴포넌트를 만들 때, 결과 HTML과 변경 로그를 별도 폴더에 저장하게 시키는 방식이 가장 덜 헷갈렸습니다.

Claude 웹 Artifacts와 Claude Code는 쓰임이 다릅니다

Claude 웹의 Artifacts는 채팅 옆에 HTML, React, SVG, 문서 초안을 따로 띄워주는 기능입니다. 눈으로 바로 확인하고 복사하기 좋습니다. 반면 Claude Code는 터미널 기반 코딩 에이전트라서, 결과물이 화면 패널이 아니라 Git 저장소의 파일 변경으로 남습니다.

이 차이를 모르고 “왜 Claude Code에서 Artifacts가 안 보이지?”라고 찾으면 시간을 낭비합니다. 이름은 비슷하게 검색되지만, 실제 워크플로는 ‘미리보기 패널’이 아니라 ‘파일 산출물 관리’로 잡는 게 맞습니다.

로컬에서 재현한 artifacts식 셋업

예를 들어 Vite + React 프로젝트에서 다음처럼 요청합니다.

mkdir -p artifacts
claude
"현재 대시보드 UI를 개선해줘. 수정한 파일 목록, 실행 방법, 남은 이슈를 artifacts/changes.md에 정리하고, 주요 컴포넌트 예시는 artifacts/component-preview.md에 남겨줘."

이렇게 하면 Claude Code는 실제 소스 파일을 고치고, 사람이 검토할 요약 문서를 별도 위치에 남깁니다. Claude 웹처럼 예쁜 패널은 아니지만, Git diff와 함께 볼 수 있어서 팀 작업에는 오히려 안전합니다.

언제 Claude 웹을 쓰고, 언제 Claude Code를 써야 하나

실전 예시: 작은 SaaS 설정 화면 만들기

가상의 예로, 알림 설정 화면을 만든다고 해보겠습니다. Claude 웹 Artifacts에는 “알림 설정 페이지를 Tailwind 기반 React 컴포넌트로 만들어줘”라고 요청해 레이아웃을 빠르게 확인합니다. 마음에 드는 구조가 나오면 그 코드를 그대로 붙여넣기보다, Claude Code에 프로젝트 맥락을 읽게 하는 편이 좋습니다.

Claude Code에서는 이렇게 지시합니다. “Claude 웹에서 만든 초안을 참고해서 src/pages/settings 구조에 맞게 구현하고, 기존 Button 컴포넌트를 재사용해줘. 접근성 문제와 모바일 깨짐 가능성도 확인해줘.” 이때 산출물 요약을 artifacts/settings-ui-notes.md에 남기게 하면 리뷰가 빨라집니다.

막혔던 지점은 미리보기입니다. Claude Code 자체가 브라우저 렌더링 화면을 항상 보여주는 도구는 아니기 때문에, npm run dev로 로컬 서버를 켜고 직접 확인해야 합니다. Cursor처럼 에디터 안에서 보는 경험을 기대하면 처음엔 답답할 수 있습니다.

이런 사람에게 추천합니다

Claude Code가 더 맞는 경우

이미 GitHub 저장소가 있고, 코드 품질·테스트·리팩터링까지 챙겨야 한다면 Claude Code를 쓰는 편이 낫습니다. 특히 MCP 서버, Supabase, Playwright, n8n 같은 도구와 엮어 자동화하려는 빌더라면 파일 기반 작업이 장기적으로 관리하기 쉽습니다.

Claude 웹 Artifacts가 더 맞는 경우

아직 저장소가 없고, 아이디어를 눈으로 빨리 확인하고 싶다면 웹 Artifacts부터 쓰세요. 블로그용 계산기, 간단한 SVG, 랜딩페이지 섹션처럼 ‘보여주기’가 중요한 작업은 웹 화면이 훨씬 빠릅니다.

흔한 실수: 결과물을 채팅 안에만 두는 것

가장 아까운 실수는 Claude가 만든 코드를 채팅 로그에만 남겨두는 겁니다. 며칠 뒤에는 어떤 버전이 최신인지 헷갈리고, 팀원에게 공유하기도 어렵습니다.

처음부터 artifacts/ 폴더를 만들고 다음 3가지를 남기게 하세요. 변경 요약, 실행 명령어, 확인해야 할 리스크. 이 작은 습관만으로 Claude Code 작업물이 일회성 답변이 아니라 프로젝트 자산이 됩니다.

FAQ

Claude Code에서 Artifacts 패널을 켤 수 있나요?

현재 일반적인 사용 흐름에서는 Claude 웹처럼 별도 Artifacts 패널을 켜는 방식이 아닙니다. Claude Code는 터미널에서 저장소를 읽고 파일을 수정하는 도구로 이해하는 게 정확합니다.

HTML 미리보기는 어떻게 확인하나요?

Vite, Next.js, Astro 같은 프로젝트라면 로컬 개발 서버를 실행해 브라우저에서 확인하세요. 단일 HTML이면 artifacts/preview.html로 저장한 뒤 브라우저로 열어도 됩니다.

Cursor와 같이 써도 되나요?

가능합니다. Cursor는 에디터 안에서 코드 탐색과 수정을 돕고, Claude Code는 터미널에서 큰 단위의 작업을 맡기기 좋습니다. 둘을 함께 쓸 때는 Git diff를 자주 확인하는 것이 안전합니다.

정리하면, claude code artifacts를 별도 기능명으로 찾기보다 “Claude Code에서 산출물을 파일로 관리하는 방식”으로 접근하세요. 오늘 바로 할 일은 간단합니다. 작업 전에 artifacts/ 폴더를 만들고, Claude에게 변경 요약과 실행 방법을 그 안에 남기라고 지시하는 것입니다.

관련 링크

• ai 코딩 구독 요금 비교: Claude Code·Cursor·Copilot, 빌드용으로 돈값 하는 조합
• claude code 추천 mcp: 실제 빌드에 먼저 붙일 서버 6개와 선택 기준
• 컨텍스트 엔지니어링 실전: AI 에이전트에 실제 문맥을 전달하는 3가지 패턴
• 관련 태그 더 보기
• 카테고리 더 보기
• 검색 결과 더 보기
• 참고 링크