Claude, 아티팩트, Claude Code, 바이브코딩

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

Claude 채팅 안에서 뚝딱 만들어지는 미리보기, 진짜 서비스로 옮기려면 막혀요. 아티팩트의 한계와 Claude Code의 차이를 짚어드려요.

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

그런데 막상 실제로 쓰려고 하면 막혀요. 미리보기는 데모지, 서비스가 아니에요. 왜 그런지 차분히 풀어드릴게요.

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

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

아티팩트는 분명 신기해요. 코드 한 줄도 안 적었는데 진짜 같은 웹페이지가 뜨니까요. 그런데 신기함의 안쪽에는 몇 가지 결정적인 제약이 숨어 있어요.

아티팩트에서 항목을 추가해보세요. 그리고 페이지를 새로고침해보세요. 방금 입력한 데이터가 전부 사라져요.

이유는 단순해요. 아티팩트에는 데이터를 저장할 데이터베이스가 없어요. 모든 데이터는 그 순간 브라우저 메모리에만 있어요. 새로고침하면 메모리도 같이 날아가고 빈 화면으로 돌아가요.

다른 사람이 같은 링크로 들어와도 마찬가지예요. 본인 화면도 비어 있고, 친구 화면도 비어 있어요. 서로 공유하는 데이터가 없어요. 서비스라기엔 너무 휘발적이에요.

진짜 서비스에는 외부로 손을 뻗는 부분이 많아요. 결제 모듈, 이메일 전송, OpenAI API, 슬랙 연동 같은 것들이요. 이런 건 다 비밀값(API 키)이 있어야 동작해요.

아티팩트에는 비밀값을 안전하게 넣어둘 곳이 없어요. 코드 안에 그대로 적으면 누구나 볼 수 있고, 그렇다고 따로 숨길 방법도 없어요. 그래서 결제도, 이메일도, 외부 API 호출도 실질적으로 못 해요.

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

아티팩트 안의 데이터·외부 호출은 Claude가 만들어 둔 더미예요. 예를 들면 이런 식이에요.

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

겉으로는 사용자 데이터를 다루는 것처럼 보이지만, 사실은 코드 안에 박아둔 가짜 배열이에요. 진짜 데이터베이스를 가리키고 있지 않아요.

복사해 와도 이 더미들을 하나하나 실제 연결로 직접 바꿔야 해요. 데이터베이스 연결, 결제 모듈, 이메일 전송. 이게 의외로 만만치 않아요.

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

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

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

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

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

아티팩트는 데모예요. 빠르게 아이디어를 시각화하고, "이런 게 가능하구나"를 확인하는 데는 정말 좋아요. 그 자체로 충분히 가치 있어요.

하지만 사용자가 쓰는 진짜 서비스를 만들려면 한 단계 더 가야 해요. 그게 Claude Code의 자리예요.

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