Claude Artifacts, 이제 실시간 데이터를 위해 사용자의 MCP 커넥터를 호출할 수 있습니다
요약
Claude Artifacts가 MCP(Model Context Protocol) 커넥터를 통해 실시간 데이터를 가져오고 작업을 수행할 수 있는 기능을 업데이트했습니다. 이제 정적인 스냅샷을 넘어, 사용자의 커넥터를 활용해 개인별 맞춤형 실시간 데이터 확인 및 운영 콘솔 역할을 수행할 수 있습니다.
핵심 포인트
- MCP 커넥터를 통한 실시간 데이터 연동 및 작업 수행 가능
- 뷰어의 권한에 따라 읽기 및 쓰기(Write) 작업 지원
- 공개 공유 링크, 에디터 역할, Claude Tag 세션 생성 기능 추가
- 백엔드 구축 없이도 개인화된 실시간 대시보드 구현 가능
-
게시된 Claude artifacts는 사용자가 페이지를 열 때 각 뷰어(viewer)의 자체 MCP 커넥터를 통해 실시간 데이터를 가져올 수 있습니다.
-
공유된 페이지는 읽는 사람의 커넥터를 읽기 때문에, 하나의 artifact가 백엔드(backend) 없이도 사람마다 서로 다른 실시간 수치를 보여줄 수 있습니다.
-
이번 업데이트에는 공개 공유 링크, Team 및 Enterprise 플랜의 에디터(editor) 역할, 그리고 Claude Tag 세션에서 생성된 artifacts 기능이 함께 추가되었습니다.
-
1인 스튜디오 입장에서 이는 제가 예전에 구축했다가 잊어버리곤 했던 일회성 내부 대시보드(internal dashboards)라는 카테고리 전체를 대체합니다.
이번 주에 실제로 출시된 기능
Claude Code의 29주 차 요약(7월 13일17일, 버전 2.1.2072.1.212)은 artifact의 정의를 바꾸는 한 문장으로 시작합니다: 게시된 artifact는 사용자가 페이지를 열 때 각 뷰어(viewer)의 자체 MCP 커넥터를 통해 실시간 데이터를 가져오고 작업을 수행할 수 있습니다.
이 문장을 두 번 읽어보세요. 지금까지 artifact는 스냅샷(snapshot)이었습니다. 세션을 실행하면 claude.ai에 라이브 페이지가 생성되었고, 그 페이지는 빌드(build) 시점에 세션이 보았던 내용을 보여주었습니다. 유용하지만 고정된 상태였습니다. 기반이 되는 수치가 움직이는 순간, 페이지는 오래된 정보가 되었고 누군가 세션을 다시 실행해야 했습니다.
이제 페이지는 그것을 보고 있는 사람과 연결됩니다. 뷰어가 artifact를 열면, 그것은 사용자의 커넥터에 접근하여 현재 데이터를 가져오고 사용자를 대신하여 작업을 수행할 수 있습니다. 빌드 세션이 더 이상 데이터를 소유하지 않습니다. 읽는 사람이 소유합니다.
'작업을 수행한다(Take actions)'라는 문구에 주목해야 합니다. 이것은 단순히 읽기(read) 기능만이 아닙니다. 만약 뷰어의 커넥터가 쓰기(write)가 가능하다면, artifact는 단순히 수치를 보고하는 차트가 아니라 사용자의 도구에서 무언가를 실행하는 버튼을 제공할 수 있습니다. 페이지가 작은 운영 콘솔(operations console)이 될 수 있는 것입니다. 현재 상태를 확인하고, 바로 조치를 취할 수 있습니다. 이 모든 것이 5분 전에는 자체 백엔드조차 없었던 페이지 안에서 이루어집니다. 이는 문서(document)와는 다른 범주의 객체입니다. 문서는 무언가를 알려주지만, 이것은 실행하는 사람의 범위 내에서 무언가를 수행할 수 있습니다.
이번 릴리스는 공유에 중요한 세 가지 요소를 추가하여 이를 완성했습니다. 첫째, 로그인 절차 없이도 아티팩트(artifact)를 다른 사람에게 전달할 수 있는 공개 공유 링크(public sharing links), 둘째, Team 및 Enterprise 플랜에서 여러 명이 페이지를 함께 구성할 수 있는 편집자 역할(editor roles), 셋째, Claude Tag 세션에서 즉시 생성되어 방금 논의하던 내용이 그 자리에서 바로 라이브 페이지가 되는 아티팩트입니다.
아티팩트가 어떻게 시작되었는지에 대한 배경이 궁금하시다면, 제가 이번 달부터 사용하기 시작한 Claude Code 기능들에 대해 작성한 글을 참고해 주세요. 이번 주는 이 기능이 데모(demo) 단계를 넘어 도구(tool)로 졸업하는 주간입니다.
라이브 커넥터가 형태를 바꾸는 이유
정적인 아티팩트는 "이것을 만들었을 때 수치가 어떠했는가"에 답합니다. 커넥터(connector) 기반의 아티팩트는 "지금 당신에게 수치가 어떻게 보이는가"에 답합니다.
사람들이 실제로 묻는 질문은 바로 두 번째 질문입니다. 주간 운영(ops) 페이지는 생성된 다음 날이면 가치가 없어집니다. 하지만 사용자가 페이지를 열 때마다 자신의 데이터를 읽어오는 페이지는 아무도 손대지 않아도 최신 상태를 유지합니다.
사용자별(per-viewer)로 작동한다는 점이 영리한 부분이자 사람들이 혼동하기 쉬운 부분입니다. 아티팩트는 사용자의 데이터를 하나로 묶어 모두에게 전송하는 것이 아닙니다. 아티팩트는 로직(logic)과 레이아웃(layout)을 전달하며, 각 독자의 커넥터를 빌려와 값을 채웁니다. 두 사람이 동일한 URL을 열더라도, 각자 허용된 범위 내의 서로 다른 라이브 뷰(live view)를 보게 됩니다. 그 누구의 데이터도 타인의 페이지로 유출되지 않습니다.
가장 지루한 버전을 상상해 보더라도 이 방식은 여전히 유효합니다. 각자가 열었을 때 자신에게 할당된 미결 사항(open items)만을 보여주는 팀 런북(runbook), 모든 이해관계자에게 자신이 담당하는 요소들의 실시간 상태를 보여주는 런칭 페이지(launch page), 그리고 화요일에 내보내서 이메일로 보낸 복사본이 아니라 클라이언트가 직접 연결한 데이터를 반영하는 클라이언트 뷰(client view) 같은 것들 말입니다. 이 중 그 어느 것도 저의 데이터베이스를 필요로 하지 않았습니다. 이들에게 필요했던 것은 레이아웃과 로직, 그리고 페이지가 열려 있는 30초 동안 독자의 커넥터(connector)를 빌려 쓸 수 있는 권한뿐이었습니다. 이 지루한 예시들은 과거에는 각각 구현하는 데 주말 내내 배관 작업(plumbing)을 해야 했지만, 이제는 단 한 세션이면 충분합니다.
저는 이 작업을 너무나 많이, 일회성 버전으로 만들어 왔습니다. 빠른 내부 대시보드, 이를 새로고침하기 위한 크론(cron) 작업, 적절한 사람만 볼 수 있도록 하는 인증(auth) 확인, 배포, 도메인 설정, 그리고
두 번째는 협업자를 위한 공유 뷰(shared view)였습니다. 편집자(Editor) 역할 덕분에 제가 모든 문구 수정의 병목 현상(bottleneck)이 되지 않고도, 작업물을 넘겨주어 그들이 레이아웃을 조정할 수 있게 할 수 있었습니다. 공개 공유 링크(public sharing link)를 통해, 제 플랜(plan) 외부에 있는 사람에게 계정을 먼저 생성해 주지 않고도 읽기 전용(read-only) 버전을 보낼 수 있었습니다.
이번 주에 얻은 몇 가지 현장 노트입니다. 페이지의 역할을 작게 유지하세요: 하나의 명확한 질문, 최신 데이터, 그리고 12개의 위젯이 늘어선 괴물 같은 형태를 피해야 합니다. 페이지가 기대하는 커넥터(connector)의 이름을 페이지에 바로 명시하여, 빈칸을 보는 독자가 그 이유를 알 수 있게 하세요. 그리고 아티팩트(artifact)를 데이터베이스(database)가 아닌 인터페이스(interface)로 취급하세요. 데이터는 연결된 도구들에 존재합니다. 아티팩트는 단지 창(window)일 뿐입니다.
초기에 저를 괴롭혔던, 주의 깊게 살펴볼 만한 점이 하나 있습니다. 저는 페이지를 여는 모든 사람이 저와 동일한 커넥터를 가지고 있다고 가정하고 페이지를 만들었습니다. 하지만 독자의 절반은 그렇지 않았기 때문에 빈칸을 보게 되었습니다. 해결책은 기술적인 것이 아니라 레이블(label)이었습니다. 페이지 상단에 어떤 커넥터를 읽는지, 그리고 값이 비어 보일 경우 무엇을 연결해야 하는지를 적은 평범한 한 줄을 추가하는 것이었습니다. 커넥터가 없는 상태를 오류(error)가 아닌 디자인의 일급 시민(first-class part)으로 취급하세요. 그러면 전체적인 결과물이 고장 난 것이 아니라 세심하게 고려된 것으로 읽힙니다. 의도적으로 빈 상태(empty state)를 설계하는 이 한 가지 습관은, 해피 패스(happy path)를 아무리 다듬는 것보다 이러한 페이지들이 전달되는 방식에 더 큰 영향을 미쳤습니다.
올해 초 커넥터들이 어떻게 창작 및 제작 도구에 접근했는지 알고 싶다면, Claude 커넥터가 이제 Adobe, Blender, Ableton, Affinity, Fusion에 연결됩니다라는 동반 기사를 참고하세요. 방향성은 일관적입니다: 모델은 단순한 채팅창(chat box)을 벗어나, 여러분이 이미 비용을 지불하고 있는 도구들 사이를 잇는 배선(wiring)이 되기 시작했습니다.
누가 가장 먼저 이것을 사용해야 하는가
소규모 팀을 위해 내부 도구(internal tooling)를 운영하고 있다면, 이것은 이번 릴리스에서 가장 레버리지가 높은 기능입니다. 수동으로 관리되는 모든 대시보드가 대상이 될 수 있습니다. 데이터가 오래되어 신뢰도가 가장 낮은 것을 골라, 커넥터 기반의 Artifact로 다시 구축해 보세요. 그 과정에서 크론 잡(cron job)과 배포(deploy) 프로세스를 삭제하게 될 수도 있습니다.
클라이언트를 위해 구축하는 경우라면, 공유 및 에디터(editor) 변경 사항은 실시간 데이터만큼이나 중요합니다. 클라이언트에게 라이브 페이지를 전달하고, 그들이 문구를 수정하고 싶어 한다면 에디터 권한을 부여하면서도 기반이 되는 로직은 본인의 것으로 유지할 수 있습니다. 이는 스크린샷이 아니라 하나의 제품처럼 느껴집니다.
만약 대상이 불특정 다수의 대중이라면, 흥분을 가라앉히십시오. 실시간 데이터 경로는 독자가 커넥터(connectors)를 가지고 있다는 것을 전제로 합니다. 이러한 가정이 깨지는 공개 마케팅 페이지의 경우에는 정적 Artifact(static artifact)를 사용하는 것이 여전히 올바른 선택입니다. 독자가 연결되어 있는지 여부에 따라 패턴을 맞추십시오.
시기적인 관점에서의 논거도 있습니다. 라이브 페이지로서의 Artifact는 6월 중순에야 Team 및 Enterprise 플랜에서 베타에 도달했으므로, 이 커넥터 계층은 아직 초기 단계의 인터페이스에 도입되는 것입니다. 지금이 바로 패턴이 정립되고 모두의 기대치가 굳어지기 전에 숙련도를 쌓아야 할 시점입니다. 기능이 출시된 첫 달에 이를 이해하는 사람들은 그 기능이 어떻게 사용될지를 정의하는 경향이 있으며, 이 기능은 출시된 지 겨우 한 달 남짓되었습니다. 비즈니스의 전부를 여기에 걸 필요는 없습니다. 하지만 패턴이 성숙해졌을 때 이미 그 언어를 구사할 수 있도록, 실제 페이지를 하나쯤은 만들어 두어야 합니다.
만약 MCP 인터페이스를 한 번도 구축해 본 적이 없다면, 더 작은 것부터 시작하십시오. From Notion to MCP server: I rebuilt 4 workflows in a weekend는 진입 방법을 안내합니다. 신뢰할 수 있는 커넥터를 하나 확보하고 나면, 그 위에 라이브 Artifact를 구축하는 것은 짧은 도약에 불과합니다.
요점 (Bottom Line)
헤드라인은 작지만 그 결과는 작지 않습니다. 과거의 Artifact는 데이터의 사진에 불과했습니다. 이제 그것은 데이터로 통하는 창(window)이 될 수 있으며, 그 앞에 서 있는 누구에게나 맞춰 스스로를 재구성합니다.
1인 스튜디오에게 실질적인 승리는 '덜어내는 것'에서 옵니다. 더 적은 서버, 더 적은 새로고침 작업, 그리고 잊힌 탭 속에서 부식되어 가는 더 적은 대시보드(dashboards)를 의미합니다. 예전에는 방치되어 썩어가던 페이지들이 이제는 매번 실시간 데이터를 읽어오기 때문에 최신 상태를 유지합니다.
이미 유지 관리하고 있는 무언가를 교체하는 것부터 시작하세요. 각 페이지가 하나의 질문만을 가리키도록 유지하고, 독자들이 해당 페이지에 필요한 커넥터(connectors)를 가지고 있는지에 대해 솔직해지십시오. 만약 독자들이 이를 가지고 있다면, 여러분은 운영하는 것조차 즐겁지 않았던 인프라(infrastructure)의 한 조각을 방금 삭제한 것입니다. 만약 이 모든 것의 이면에 있는 더 넓은 패턴을 알고 싶다면, 제가 작성한 올해 내가 만든 MCP 서버들과 그것들이 대체한 것들이 그 맥락을 관통하는 핵심이며, 이번 주의 업데이트는 그 흐름의 다음 연결 고리입니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기