Claude Code의 신기능 Artifacts로 AI가 만든 HTML 문서를 초고속 공유!

대상 독자: Claude Code를 사용하면서, AI가 만든 문서나 조사 결과를 "더 제대로 보여주고 싶다/공유하고 싶다"라고 생각하는 사람

이 기사에서 말하고자 하는 핵심은 크게 3가지입니다.

• Claude Code에 HTML을 출력하게 하여 문서를 만드는 방식이 유행하고 있었으나, 그 결과물을 공유하는 데 장벽이 있었다
• 신기능인 Artifacts는 Claude Code 상에서 생성한 HTML을 그대로 claude.ai 상의 URL로 공개·공유할 수 있는 공식 메커니즘으로, 이 장벽을 메워준다 - 단, "Team/Enterprise 플랜 필수", "조직 내에서만 공유 가능"과 같은 전제 조건이 있으므로 사용처를 선택해야 한다

조금 전부터 Claude Code에 Markdown이 아닌 HTML을 출력하게 하여 문서를 만드는 방식이 확산되고 있었습니다. 그 계기 중 하나가 Anthropic 공식 블로그의 기사 "the unreasonable effectiveness of HTML"입니다. 요점을 간단히 말하자면, "복잡한 정보를 전달하고 싶다면 이제 Markdown보다 HTML이 더 낫다"라는 주장이었습니다.

확실히 사양서도, 조사 보고서도, 코드 리뷰도, 텍스트로 애쓰는 것보다 한 페이지의 웹 페이지로 만드는 것이 더 잘 전달되는 상황이 많습니다.

하지만 여기에 무시할 수 없는 장벽이 있었습니다. 바로 공유입니다.

Claude Code에 요청하면 로컬에 report.html과 같은 파일이 출력됩니다. 하지만 그 파일을 어떻게 공유해야 할까요?

GitHub나 Slack, Google Drive는 HTML 프리뷰(Preview)를 지원하지 않기 때문에, 한 번 다운로드하여 브라우저로 열어야 합니다. 그렇다고 정적인 문서를 공유하기 위해 직접 웹 서버(Web Server)를 구축하는 것도 과합니다.

저는 지금까지 생성된 HTML을 한 번 브라우저로 열고, PDF로 출력한 뒤 공유하는 흐름을 취해왔습니다. 이 방법으로도 공유는 가능하지만, HTML의 인터랙티브(Interactive)한 요소는 상실되며, 공유한 데이터를 편집할 수도 없습니다.

애초에 HTML 출력의 장점은 무엇일까요? 대략 다음과 같습니다.

• 표, 색상 구분, SVG 도표, 레이아웃을 그대로 그릴 수 있다 (Markdown은 표현력이 낮다).
• 제목(Heading)이나 탭(Tab)으로 구조화할 수 있다.
• 슬라이더나 토글(Toggle)을 넣어 읽는 사람이 값을 움직이며 테스트해 볼 수 있다.

사람이 읽는 것을 전제로 한 문서나 보고서는 텍스트뿐만 아니라 시각적인 요소도 중요합니다. HTML은 그 점에서 Markdown보다 뛰어나며, 복잡한 정보를 알기 쉽게 전달하는 데 적합합니다. 약점은 공유의 난이도뿐이었습니다.

그때 등장한 것이 이번의 Artifacts입니다. Claude Code가 생성한 HTML/Markdown을 그대로 claude.ai 상의 한정 공개 URL(Private URL)로 공개하여 공유할 수 있는 공식 기능입니다!

artifact란, Claude Code가 세션의 결과물을 claude.ai 상의 라이브 웹 페이지(Live Web Page)로서 한정 공개 URL에 공개한 것입니다. 지금까지는 "docs 폴더에 문서를 저장해줘"라고 부탁하여 로컬에 Markdown이나 HTML로 저장했다면, 이제는 "artifact로 저장해줘"라고 부탁하는 형태로 바뀌며, 생성된 HTML이 그대로 claude.ai 상의 URL로 공개되는 이미지입니다.

만드는 방법은 간단합니다. "~한 artifact를 만들어줘"라고 부탁하거나, 출력이 페이지에 적합하다고 Claude가 스스로 판단하여 만듭니다. Claude가 프로젝트 내에 HTML/Markdown 파일을 작성하고 공개하려고 시도합니다. 처음에는 다음과 같은 확인 창이 뜨는데,

Yes

를 선택하면 공개되며, URL이 표시되고 브라우저가 열립니다. 자동으로 브라우저를 열고 싶지 않다면 환경 변수 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0을 설정하여 억제할 수 있습니다. 또한, 터미널에서 Ctrl+]를 누르면 최근의 artifact를 언제든 다시 열 수 있습니다.

작성된 페이지는 다음과 같은 모습입니다.

[IMG:1]

페이지 상단에는 제목, 공유 버튼 등이 나열되어 있고, 하단에는 생성된 내용이 표시됩니다.

[IMG:2]

공개 직후의 artifact는 본인에게만 보입니다. 공유하려면 페이지 우측 상단의 Share에서 조직 내의 특정 인물 혹은 전체를 선택합니다. 공유 대상에게는 작성자의 이름도 표시됩니다.

다만, 공유할 수 있는 범위는 조직 내부까지입니다. 외부 사람에게는 전달할 수 없으므로, 사외에 공유하고 싶을 때는 Claude에게 HTML 파일을 받아서 직접 보내는 방식을 사용해야 합니다. 공유받은 상대방은 읽기 전용(View-only)이며, 편집할 수 있는 사람은 작성자뿐입니다.

또한, 자신이 작성한 artifact는 claude.ai의 갤러리(claude.ai/code/artifacts)에서 목록으로 확인 및 관리할 수 있습니다.

내용을 수정하고 싶다면, "이 부분을 수정해서 다시 공개해줘"라고 요청하기만 하면 됩니다. Claude가 원본 파일을 편집하여 동일한 URL에 다시 공개해 줍니다. 페이지를 열고 있는 사람의 화면도 그 자리에서 즉시 업데이트됩니다.

그리고 공개할 때마다 그 시점이 하나의 버전(Version)으로 남습니다. 과거 버전으로 되돌아갈 수 있으며, Share에는 "항상 최신 버전 공유(Always share latest version)" 토글이 있어, 최신 버전을 계속 보여줄지 아니면 특정 버전에 고정할지를 선택할 수 있습니다.

참고로, 다른 세션에서 수정하고 싶을 때는 해당 artifact의 URL을 전달하면 됩니다. 반대로 URL을 전달하지 않으면 업데이트가 아닌 새로운 artifact가 생성되므로 이 점만 주의해 주세요.

공식 문서에서는 다음과 같은 활용 사례를 제시하고 있습니다.

• PR(Pull Request)의 설계 의도나 소견을 차이점(Diff) 옆에 색상별로 나열하기
• 레이아웃, API 설계, 구현 플랜의 대안을 나란히 놓고 비교하기
• 슬라이더나 토글을 사용하여 값을 즉석에서 테스트하기
• "Copy as prompt"와 같은 버튼을 통해 조작 결과를 지시 사항(Prompt)으로 되돌리기
• 장시간 작업의 진행 상황을 체크리스트로 시각화하기

"하나의 자기 완결적인 페이지"이기 때문에, 제약 사항도 어느 정도 존재합니다.

제약 사항	내용
외부 요청 금지	엄격한 CSP(Content Security Policy)에 의해 외부 스크립트, CSS, 폰트, 이미지 로딩 및 fetch / XHR / WebSocket이 차단됩니다. CSS/JS는 인라인(Inline)화되어야 하며, 이미지는 data URI로 임베드(Embed)되어야 합니다
파일 형식	.html / .htm / .md만 가능 (Markdown은 정렬된 HTML로 표시됨)
크기 상한	렌더링 후 16MiB 이하. 실패할 경우 용량이 큰 임베드 이미지가 원인인 경우가 많음

또한, 같은 내용이라도 터미널에 텍스트로 출력하는 것보다 장식된 페이지로 출력하는 것이 토큰(Token) 소모가 더 많습니다 (인라인 CSS/JS, 특히 data URI로 임베드하는 이미지가 주요 요인입니다). SVG나 CSS로 도형을 그리거나, 불필요한 인터랙션을 생략하고, 큰 데이터는 요약하는 방식으로 가볍게 만들 수 있습니다.

서두에서도 언급했듯이, Artifacts는 아래 조건을 모두 충족해야 사용할 수 있습니다. 하나라도 누락되면 로컬에 HTML이 작성될 뿐이거나, 공개할 수 없다는 응답이 돌아옵니다.

요구 사항	이용 가능 조건
플랜	Team 또는 Enterprise (Team은 기본적으로 ON, Enterprise는 Admin이 활성화 필요)
인증	/login을 통해 claude.ai에 로그인 (API 키, 게이트웨이 토큰, 클라우드 제공업체 자격 증명으로는 불가)
모델 프로바이더	Anthropic API (Amazon Bedrock / Google Vertex AI / Microsoft Foundry에서는 불가)
조직 정책	CMEK, HIPAA, Zero Data Retention이 비활성화되어 있을 것
이용 환경	Claude Code CLI 또는 데스크톱 버전 1.13576.0 이상

• HTML 출력은 "전달하기, 보여주기, 만져보기" 중 어떤 측면에서도 강력하지만, 약점은 공유였다.
• Artifacts는 그 부분을 공식적으로 해결하는 기능이다. 생성하고, 프라이빗 URL(Private URL)에 공개하고, 조직 내에서 공유하는 과정이 단 한 단계로 끝난다.
• 단, Team/Enterprise 플랜과 claude.ai 로그인이 필수이며, 공유는 조직 내 폐쇄적(Closed)으로 이루어진다.

지금까지 "Claude Code로 HTML을 뽑아내면 편리하지만, 공유가 아쉽다..."라고 느꼈던 분들에게 Artifacts는 가려운 곳을 정확히 긁어주는 기능이었습니다. 현재 beta 버전이라 플랜 제약도 있지만, 대상이 되는 분들은 꼭 평소의 리뷰나 조사 보고서를 artifact로 만들어 보세요. 아마 다시는 텍스트로 돌아가지 못할 것입니다.

여기까지 읽어주셔서 감사합니다!