클로드 채팅으로 만든 웹페이지는 왜 진짜 서비스가 못 되나요

클로드 채팅에 "투두 리스트 웹페이지 만들어줘"라고 하면 오른쪽에 진짜 작동하는 화면이 떠요. 무언가 입력하면 리스트에 그대로 들어가고, 체크박스도 잘 눌리고, 디자인도 그럴듯해요. "어? 이거 그냥 서비스로 써도 되겠는데?" 싶었던 분들이 많을 거예요.

지금의 아티팩트는 단순한 미리보기를 넘어 데이터를 저장하고 외부 도구와 연결할 수도 있습니다. 작은 개인용 도구나 팀 내부 도구라면 그대로 써도 돼요. 그래도 불특정 고객이 가입하고 결제하는 서비스를 만들 때는 다른 구조가 필요합니다. 어디에서 경계가 갈리는지 차분히 풀어드릴게요.

이 결과물의 이름은 '아티팩트'

클로드 채팅이 만들어주는 미리보기 화면을 아티팩트(Artifact)라고 불러요. 채팅창 옆에 떠 있는 박스가 아티팩트예요. 우리가 본 "오 작동하네" 했던 화면이에요.

아티팩트는 분명 신기해요. 코드 한 줄도 안 적었는데 진짜 같은 웹페이지가 뜨니까요. 다만 저장 방식과 사용자 인증, 외부 연결에는 실제 웹 서비스와 다른 제약이 있어요.

제약 1: 저장소가 운영 데이터베이스와 달라요

저장 기능을 붙이지 않은 아티팩트는 새로고침하면 입력한 내용이 사라집니다. 하지만 현재는 게시한 아티팩트에 개인 저장소나 공유 저장소를 붙일 수 있어요.

개인 저장소는 사용자마다 자기 데이터만 보고, 공유 저장소는 같은 아티팩트를 쓰는 사람이 하나의 데이터를 함께 봅니다. 다만 Anthropic 공식 안내 (새 탭에서 열림)에 따르면 저장소는 다음 조건을 가집니다.

• Pro·Max·Team·Enterprise 요금제의 웹과 데스크톱에서 사용할 수 있습니다.
• 아티팩트 하나당 20MB까지 텍스트만 저장합니다.
• 게시한 뒤에만 저장 기능이 작동합니다.
• 게시를 취소하면 개인·공유 저장 데이터가 함께 영구 삭제됩니다.

운동 기록이나 팀 투표에는 충분할 수 있습니다. 주문, 계약과 고객 계정처럼 사라지면 곤란한 데이터는 별도 운영 데이터베이스에 두는 편이 안전해요. 현재 아티팩트로 만들 수 있는 범위는 클로드 아티팩트로 만들 수 있는 것에서 더 자세히 정리했습니다.

제약 2: 외부 연결은 사용자별 인증을 사용해요

아티팩트는 MCP를 통해 Slack, Google Calendar와 Asana 같은 외부 서비스에 연결할 수 있습니다. 게시한 아티팩트를 다른 사람이 사용할 때는 그 사람이 자기 계정으로 MCP 서버에 인증해요. 만든 사람의 권한이나 비밀 키를 여러 사용자에게 나눠주는 구조가 아닙니다.

아티팩트 안에서 클로드를 호출하는 기능도 사용할 수 있습니다. API 키는 필요 없지만 AI 기능을 쓰는 사람은 클로드 계정으로 로그인하고 자기 사용량을 씁니다. 기본적인 계산기와 상호작용 화면은 계정 없이도 열 수 있어요.

이 방식은 각자가 자기 Slack이나 캘린더를 연결하는 도구에는 잘 맞습니다. 서비스 운영자의 비밀 키로 결제 금액을 승인하거나 고객 전체에게 이메일을 발송하는 백엔드와는 구조가 달라요. 결제·이메일·외부 API처럼 서버 비밀 키를 다루는 기능은 별도 서버에 두어야 합니다.

"그럼 코드를 복사해 오면 되지 않나요?"

자주 듣는 질문이에요. 아티팩트의 코드를 복사해서 내 컴퓨터에 붙여넣으면 진짜 서비스가 되지 않을까? 그것도 잘 안 돼요. 두 가지 이유 때문이에요.

이유 1: 관리형 연결은 코드와 함께 옮겨지지 않아요

아티팩트가 제공하는 저장소, 클로드 호출과 MCP 연결은 Anthropic 환경에서 작동합니다. 화면 코드를 복사해도 이 관리형 기능까지 내 프로젝트로 따라오지는 않아요.

저장 기능을 붙이지 않은 데모에는 다음처럼 코드에 넣어둔 예시 데이터가 있을 수도 있습니다.

const users = [
  { name: "홍길동", email: "hong@example.com" },
  { name: "김철수", email: "kim@example.com" },
];

이 경우에는 겉으로 사용자 데이터를 다루는 것처럼 보여도 실제 데이터베이스를 가리키지 않습니다.

프로젝트로 옮길 때는 예시 데이터와 관리형 연결을 내 데이터베이스, 인증, 결제와 이메일 서비스로 바꿔야 해요. 화면 코드를 복사하는 일과 운영 구조를 만드는 일은 별개의 작업입니다.

이유 2: 코드가 한 파일에 몰려 있어요

아티팩트는 보통 페이지 하나, 파일 하나에 모든 코드가 들어 있어요. 화면이 한두 개일 때는 괜찮은데, 화면을 추가하거나 기능을 확장하려는 순간 손댈 자리가 없어요.

실제 서비스의 코드는 보통 여러 파일·폴더에 나눠 담아요. 각 화면, 기능, 데이터 처리를 따로 떼어두면 한 부분을 고쳐도 다른 부분이 망가지지 않아요. 아티팩트의 한 덩어리 코드에는 그런 구조가 없어요.

진짜 서비스가 되려면 필요한 것

아티팩트가 못 채우는 빈자리들을 정리하면 이래요.

• 내 코드 — 한 파일 덩어리가 아니라 확장 가능한 구조로 정리된 코드.
• 배포 — 내 도메인과 운영 환경이 있는 주소.
• 비밀값 관리 — 결제·이메일·외부 API 키를 안전하게 보관.
• 데이터베이스 — 고객 계정과 운영 데이터를 오래 보관할 저장소.

이 네 가지가 다 있어야 사용자가 쓰는 서비스가 돼요.

클로드코드는 다르게 동작해요

같은 클로드라도 클로드코드(Claude Code)는 처음부터 다른 방식이에요. 채팅 안 미리보기가 아니라, 내 컴퓨터의 실제 파일을 직접 만지고 실제 환경에 올려요.

• 내가 만든 코드가 내 컴퓨터에 실제 파일로 남아요.
• 여러 파일·폴더로 적절히 나눠서 만들어요.
• 데이터베이스, 외부 API, 결제 같은 실제 연결을 직접 붙일 수 있어요.
• 그대로 Vercel 같은 서비스에 올리면 사용자가 쓰는 진짜 서비스가 돼요.

정리: 쓰는 사람과 데이터가 경계를 정해요

아티팩트는 화면을 빠르게 시험하는 데모이면서 작은 개인·팀 도구가 될 수도 있습니다. 기본 기능은 계정 없이 공유할 수 있고, 게시한 뒤에는 텍스트 데이터를 저장하거나 사용자별 MCP 연결도 사용할 수 있어요.

고객 계정, 결제, 서버 비밀 키, 내 도메인과 장기 보관할 운영 데이터가 필요해지면 프로젝트로 옮길 시점입니다. 그때부터는 클로드코드로 실제 파일과 서버 구조를 만들 수 있어요.

뚝딱뚝딱 만든 결과물을 진짜 서비스로 끌어올리고 싶다면, 데모와 서비스의 경계를 한 번 넘어보세요. 거기서 비로소 "내 프로젝트"가 시작돼요.

뚝딱의 오프라인 바이브코딩 강의도 바로 이 경계를 다룹니다. 강남 수업에서 각자 만든 데모를 실제 파일 구조, 데이터베이스와 배포 주소가 있는 서비스로 확장하고, 연결 과정에서 생기는 에러는 강사와 함께 확인합니다.