Claude로 바이브코딩하면 코드가 안 보여요 (화면만 나올 때 HTML 받는 법)

어떤 상황?

바이브코딩으로 웹앱(예: 학생용 오답노트)을 만들었는데, ChatGPT는 코드가 텍스트로 줄줄 나오는 반면 Claude는 곧바로 완성된 화면(미리보기)만 떠서, "그럼 코드는 도대체 어디서 받지?" 싶을 때가 있죠.

핵심 답변

결론부터요. Claude가 보여주는 그 화면도 사실은 코드(HTML)로 짜인 결과물입니다. ChatGPT는 코드를 글자로 보여주고, Claude는 그 코드를 바로 실행한 화면으로 보여주는 차이일 뿐이에요. 그래서 화면 뒤의 코드를 그대로 받아낼 수 있습니다.

클로드 사이트(claude.ai)에서 코드 받는 법

• 오른쪽에 뜬 결과물(아티팩트, Artifact) 화면 위쪽의 < > Code(코드) 보기로 전환하면, 실행 화면이 아니라 HTML 코드 전체가 보입니다.
• 거기서 복사하거나, 우측 상단 메뉴에서 다운로드하면 .html 파일 하나로 받을 수 있어요.
• 더 간단하게는, 대화창에 "이거 하나의 html 파일로 묶어서 줘" 또는 "다운로드할 수 있게 html 파일로 만들어줘" 라고 말로 요청해도 됩니다.

참고: 바이브코딩을 한 곳이 클로드 사이트(claude.ai) 인지 클로드 코드(Claude Code) 인지에 따라 받는 방식이 조금 달라요. 사이트에서 만들었다면 위처럼 아티팩트에서 코드·파일을 받으면 되고, 클로드 코드라면 애초에 파일로 저장돼 있습니다.

정리: Claude의 미리보기 화면 = 이미 코드입니다. 아티팩트의 Code 보기 → 복사·다운로드, 또는 "html 파일로 줘" 한마디면 코드를 손에 넣을 수 있어요. 받은 코드를 어디에 올리는지는 외부 서버(LMS)에 올리기 글을 보세요.