클로드로 웹 게임 만들고 배포까지 — 코딩 몰라도 되는 단계별 가이드

코딩을 한 줄도 몰라도 클로드(Claude)와 대화만으로 나만의 웹 게임을 만들고, 인터넷에 공개된 링크로 다른 사람과 공유할 수 있습니다. 첫 게임을 만들어 공유 링크까지 얻는 데는 30분 정도면 충분합니다. 이 글에서는 클로드의 아티팩트(Artifacts) — 대화 중 클로드가 만들어 주는 독립 실행 결과물 기능으로 게임을 만드는 방법부터, 더 다듬고 싶을 때 Claude Code — 터미널(명령줄 화면)에서 코드를 직접 다루는 클로드의 개발자용 도구로 확장하는 법, 그리고 무료로 배포하는 방법까지 순서대로 안내합니다.

클로드 아티팩트란 무엇인가요?

아티팩트는 클로드와 대화하는 중에 만들어지는 코드·문서·앱 같은 독립적인 결과물로, 대화창 옆의 별도 패널에서 바로 실행하고 확인할 수 있습니다. 게임처럼 어느 정도 분량이 있고 눈으로 직접 보면서 다뤄야 하는 콘텐츠를 클로드가 만들면, 자동으로 이 패널에 열립니다. 웹 게임을 만들 때는 HTML·CSS·자바스크립트로 이루어진 하나의 웹페이지 형태로 만들어지며, 슬라이더·버튼·키보드 입력 같은 상호작용도 그대로 동작합니다.

다만 아티팩트는 백엔드(서버) — 데이터를 저장하고 여러 사용자 요청을 처리하는 뒷단 서버 없이 브라우저 안에서만 동작하는 정적인 페이지입니다. 즉 퀴즈·퍼즐·슬라이딩 게임처럼 한 사람이 즐기는 형태의 게임에는 잘 맞지만, 여러 사람이 실시간으로 함께 하는 멀티플레이나 서버에 저장되는 전체 순위표 같은 기능은 만들 수 없습니다.

시작 전 준비물

• 클로드 계정 — 아티팩트 화면은 Free(무료)·Pro·Max 플랜에서 이용할 수 있습니다(모바일 앱에서는 아직 제공되지 않습니다).
• 웹 브라우저로 claude.ai 접속(로그인 상태)
• 설정에서 코드 실행 관련 기능이 켜져 있어야 합니다 — 왼쪽 아래 이름(이니셜)을 클릭해 설정으로 들어간 뒤, 코드 실행·파일 생성과 관련된 항목이 꺼져 있다면 켜 주세요. 정확한 문구는 업데이트로 바뀔 수 있으니 화면에 보이는 이름을 기준으로 찾으면 됩니다.

용어 빠른 풀이

• Artifact(아티팩트) — 클로드가 대화 중에 만들어 주는, 독립적으로 실행되는 코드·문서·앱 결과물
• Publish(퍼블리시, 게시) — 아티팩트를 다른 사람도 볼 수 있는 웹 주소(링크)로 공개하는 기능
• Claude Code(클로드 코드) — 터미널(글자로 명령을 입력하는 화면)에서 클로드가 실제 코드 파일을 직접 만들고 고쳐 주는 개발자용 도구
• CLI — Command Line Interface(명령줄 인터페이스)의 줄임말로, 마우스 클릭 대신 글자 명령으로 프로그램을 조작하는 화면을 뜻합니다

1단계 — 대화로 웹 게임 설계하기

먼저 클로드에게 만들고 싶은 게임을 말로 설명하는 것부터 시작합니다. 화면 왼쪽의 Artifacts 메뉴로 들어가거나, 그냥 평소처럼 새 대화를 시작해도 됩니다. 클로드는 곧바로 코드를 쓰기 전에 규칙이나 화면 구성처럼 애매한 부분을 먼저 되물어보는 경우가 많으니, 질문에 답하면서 원하는 그림을 구체화하면 결과물이 더 정확해집니다.

예를 들어 이렇게 요청해 볼 수 있습니다.

숫자 맞추기 게임을 만들어줘.
- 1~100 사이 숫자를 컴퓨터가 무작위로 정하고
- 사용자가 숫자를 입력하면 "더 큰 수예요" / "더 작은 수예요"라고 알려주고
- 정답을 맞히면 몇 번 만에 맞혔는지 보여줘
- 배경은 따뜻한 색감으로 꾸며줘

요청을 보내면 잠시 후 대화창 오른쪽에 새 패널이 열리면서 게임이 바로 실행됩니다. 이 패널에서 게임이 클릭·입력에 반응하며 정상적으로 동작하면 1단계는 성공입니다. 처음 만든 결과물은 초안이라고 생각하고, 이어지는 대화로 계속 다듬어 나가면 됩니다.

2단계 — 다듬기: 기능 추가와 오류 수정

게임을 다듬는 방법은 대화를 이어 가는 것뿐입니다. "배경색을 바꿔줘", "점수 표시를 추가해줘", "모바일 화면에서도 잘 보이게 해줘"처럼 원하는 것을 문장으로 요청하면 클로드가 같은 아티팩트를 다시 수정합니다. 실행 중 오류가 생기거나 원하는 대로 동작하지 않을 때는 화면에 나타나는 Fix with Claude(클로드로 고치기) 같은 옵션을 이용하거나, "버튼을 눌러도 반응이 없어" 처럼 증상을 구체적으로 설명하면 클로드가 원인을 찾아 고쳐 줍니다.

주의할 점: 아티팩트는 외부 서버에 요청을 보내거나 이미지·폰트 파일을 외부에서 불러오는 것이 제한되어 있습니다. 그래서 "이 이미지 파일을 게임에 넣어줘"보다는 "도형과 색으로 캐릭터를 표현해줘"처럼 코드로 직접 그릴 수 있는 방식으로 요청하는 편이 안정적으로 동작합니다.

3단계 — Publish로 게시해 링크 공유하기

게임이 마음에 들면 아티팩트 패널 위쪽의 Publish(게시) 버튼을 눌러 누구나 열어 볼 수 있는 공개 링크를 만듭니다. 게시를 확인하면 공개 주소가 만들어지고, 함께 표시되는 링크 복사 버튼으로 주소를 복사해 메신저나 문자에 붙여 넣어 보내면 공유 끝입니다. 버튼 이름과 위치는 업데이트로 조금씩 달라질 수 있으니, 패널 주변에서 게시·공유를 뜻하는 버튼을 찾으면 됩니다. 로그아웃 상태의 방문자도 로그인 없이 바로 게임을 플레이할 수 있고, 클로드 계정으로 로그인한 사람은 여기서 한 걸음 더 나아가 결과물을 자기 계정에 복사해 직접 수정해 볼 수도 있습니다.

새로 만든 아티팩트는 처음에는 나만 볼 수 있는 상태입니다. Team·Enterprise(팀·기업) 플랜에서는 같은 조직 구성원에게만 공유할 수도 있고, Free·Pro·Max 플랜을 포함해 누구나 공개 링크를 만들면 로그인 없이도 인터넷 전체에 공개할 수 있습니다.

주의할 점: 한 번 Unpublish(게시 취소)를 하면 같은 아티팩트를 다시 Publish할 수 없습니다. 잠깐 비공개로 돌렸다가 나중에 다시 공개하려는 경우라면 이 점을 꼭 기억해 두세요.

더 다듬고 싶다면 — Claude Code로 확장하기

아티팩트만으로도 완성도 있는 미니 게임을 만들 수 있지만, 여러 파일로 나눠 구조를 잡거나 GitHub 저장소로 버전을 관리하고 싶다면 Claude Code가 다음 단계입니다. Claude Code는 터미널에서 직접 코드 파일을 만들고 고치는 클로드의 개발자용 도구로, 아티팩트보다 더 큰 규모의 프로젝트를 다룰 수 있습니다.

주의할 점: Claude Code는 Free(무료) 플랜에서는 사용할 수 없고, Pro 이상의 유료 플랜이나 별도의 API 사용량 결제 계정이 필요합니다.

터미널 설치가 부담스럽다면, 현재 연구 프리뷰(테스트 단계) 기능으로 브라우저에서 바로 쓸 수 있는 claude.ai/code 버전도 있습니다. 다만 이 웹 버전은 GitHub 저장소 연결이 필요해 별도의 GitHub 계정 준비가 필요합니다. 터미널을 직접 설치하려면 macOS·Linux·WSL은 아래 명령어를 사용합니다.

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell에서는 다음 명령어를 사용합니다.

irm https://claude.ai/install.ps1 | iex

설치 후 터미널에 claude --version을 입력했을 때 버전 번호와 함께 "(Claude Code)" 문구가 나오면 설치가 끝난 것입니다. 이어서 claude를 입력하면 로그인 절차가 안내되며, 이후 코딩 프로젝트 폴더 안에서 게임 코드를 요청하면 여러 파일로 구성된 더 큰 규모의 게임도 만들 수 있습니다.

무료로 배포하는 방법 정리

웹 게임을 무료로 배포하는 방법은 상황에 따라 세 가지 정도로 나눌 수 있습니다.

세 번째 방법인 별도 정적 웹 호스팅 서비스는 클로드의 공식 기능이 아니라 일반적으로 널리 쓰이는 방식이며, 화면 구성과 절차가 서비스마다 다르고 자주 바뀌므로 실제로 이용할 때는 해당 서비스의 공식 안내를 그대로 따르는 것이 안전합니다.

자주 막히는 지점 & 해결

• 증상: 친구에게 링크를 보냈는데 게임이 안 보인다고 한다 → 원인: Publish로 만든 공개 링크가 아니라 브라우저 주소창의 대화 주소를 복사해 보냈을 가능성이 큽니다. 대화 주소는 본인만 열 수 있습니다 → 조치: 아티팩트 패널에서 Publish를 누른 뒤 나오는 공개 링크를 복사해 다시 보내 주세요.
• 증상: 아티팩트 패널에 Publish 버튼이 보이지 않는다 → 원인: 코드 실행 관련 기능이 꺼져 있을 가능성이 큽니다 → 조치: 왼쪽 아래 이름(이니셜) 클릭 → 설정에서 코드 실행·파일 생성 관련 항목을 켭니다.
• 증상: 게임이 열리긴 하는데 버튼을 눌러도 반응이 없다 → 원인: 코드 일부가 의도와 다르게 생성됐을 가능성이 큽니다 → 조치: "어떤 버튼을 눌렀을 때 어떤 반응이 없는지" 최대한 구체적으로 설명하며 다시 요청합니다.
• 증상: Claude Code에서 "게시할 수 없다"는 응답이 나온다 → 원인: Free 플랜이거나, 로그인이 안 되어 있거나, Claude Code 버전이 오래됐을 가능성이 있습니다 → 조치: 플랜을 확인하고, 세션 안에서 /login을 입력해 로그인 상태를 확인합니다.

응용 및 다음 단계

기본 게임이 완성되면 난이도 단계 추가, 효과음 대신 화면 애니메이션 넣기, 점수를 브라우저에만 저장하는 기록 기능 추가처럼 한 단계씩 기능을 늘려 가 보세요. 게임에 클로드와 대화하는 캐릭터처럼 AI 기능을 직접 넣고 싶다면, 아티팩트 안에서 클로드 API를 호출하는 기능도 지원됩니다. 이 경우 별도의 API 키 설정 없이도 동작하지만, 다른 사람이 여러분의 게임을 플레이하며 이 기능을 쓸 때는 그 사람 자신의 클로드 사용량으로 계산된다는 점을 알아 두면 좋습니다.

자주 묻는 질문

Q. 만든 게임은 나중에 어디서 다시 열 수 있나요?
게임을 만들었던 대화를 다시 열면 아티팩트 패널도 그대로 다시 나타납니다. 왼쪽 대화 목록에서 해당 대화를 찾아 열고, 이어서 수정 요청을 하면 같은 게임을 계속 다듬을 수 있습니다.

Q. 코딩을 전혀 몰라도 웹 게임을 만들 수 있나요?
네, 가능합니다. 클로드 아티팩트는 대화로 원하는 내용을 설명하면 클로드가 코드를 자동으로 작성해 주므로, 코드를 직접 쓸 줄 몰라도 됩니다.

Q. 무료 플랜(Free)에서도 게임을 만들어 다른 사람과 공유할 수 있나요?
네, 가능합니다. 아티팩트 화면 자체가 Free·Pro·Max 플랜에서 모두 제공되고, Publish로 만드는 공개 링크도 Free 플랜에서 이용할 수 있습니다. 다만 Claude Code는 Free 플랜에서는 사용할 수 없습니다.

Q. Claude Code는 꼭 써야 하나요?
아니요, 필수는 아닙니다. 아티팩트만으로도 간단한 게임을 만들고 배포하기에 충분하며, 여러 파일로 구조를 나누거나 코드를 직접 세밀하게 관리하고 싶을 때만 Claude Code로 넘어가면 됩니다.

Q. 게시한 게임에 순위표나 로그인 기능처럼 서버가 필요한 기능도 넣을 수 있나요?
아니요, 어렵습니다. 아티팩트는 서버 없이 브라우저 안에서만 동작하는 정적인 페이지라서, 데이터를 서버에 저장하거나 여러 사용자가 실시간으로 함께 하는 기능은 만들 수 없습니다.

관련 글

• Claude 주요 기능 가이드: Projects, Artifacts, Memory 제대로 쓰기
• Claude 프롬프트 작성법: 공식 문서 기반 핵심 원칙 6가지
• 클로드 아티팩트(Artifacts) 사용법 — 생성·편집·공개(Publish)까지
• Claude 코워크(Cowork)란? — 파일을 직접 다루는 AI 작업 모드
• Claude 디자인(Design)이란? — 채팅으로 만드는 AI 디자인 도구
• Claude로 웹 게임 만들어서 서비스하는 방법 — 입문자 가이드
• Claude로 웹소설 '딸깍' 가능할까 — 현실적으로 되는 것과 안 되는 것