클로드코드로 코딩없이 방치형 RPG 웹게임 만들기

클로드코드 Vite + TypeScript + HTML5 Canvas를 활용하여 모바일 세로화면 방치형 RPG 게임을 처음부터 완성까지 제작합니다. 자동 전투, 가챠 시스템, 장비 강화 등 핵심 게임 시스템을 단계별로 구현하며, 추후 구글플레이 출시까지 가능한 실전 웹게임 개발 프로젝트입니다.

1명 이 수강하고 있어요.

난이도 중급이상

수강기한 무제한

수강 후 이런걸 얻을 수 있어요

  • TypeScript 기반 게임 아키텍처 설계 및 Canvas 렌더링 엔진 구현

  • 가챠·강화·방치보상 등 RPG 핵심 시스템의 데이터 모델링과 밸런싱

  • localStorage 기반 게임 상태 관리 및 Capacitor를 통한 모바일 앱 빌드


클로드코드로 방치형 RPG 웹게임 만들기?

코딩 없이
클로드코드(Claude Code)에게 말로 지시해서,

TypeScript + Phaser 3로 모바일 방치형 RPG 웹게임을 처음부터 끝까지 완성합니다.


기획부터 개발, 그리고 출시까지!

매력적인 게임 시스템 구현 방법을 배우고 싶으신가요?

자동 전투, 가챠, 강화 등 핵심 기능을 직접 만들어 보세요.

직접 코드를 한 줄씩 타이핑하지 않습니다. AI 코딩 에이전트 클로드코드에게 한국어로 요청하고, 나온 결과를 함께 검토·수정하며 실제 동작하는 게임을 만들어 갑니다.

자동 전투 루프 설계부터 가챠 확률 테이블, 장비 강화, 스킬 자동 시전, 퀘스트·던전·상점, 방치(오프라인) 보상까지 — 방치형 RPG의 핵심 시스템을 하나씩 직접 구현합니다. 여기에 캐릭터/몬스터 스프라이트 애니메이션, 3중 패럴랙스 배경, 코드로 합성한 사운드까지 입혀 완성도 있는 게임으로 마무리합니다.


클로드코드로 웹 방치형 RPG의 자동 전투, 가챠, 강화 시스템을
구현하는 방법을 배우고,플레이어와 몬스터 스프라이트,

배경, 사운드까지 직접 만들어봅니다.

이 강의가 끝나면 당신은


클로드코드로 나만의 웹 방치형 RPG 게임을 직접 완성할 수 있습니다.

  • 코딩 경험이 적어도 괜찮습니다. 클로드코드의 직관적인 인터페이스를 활용하여 게임 기획부터 자동 전투, 가챠 시스템, 장비 강화 등 RPG 핵심 로직까지 단계별로 구현하며 나만의 게임을 완성하는 경험을 하게 됩니다. 게임 개발의 전 과정을 직접 경험하며 결과물을 손에 쥐게 됩니다.


✔️

이 강의가 여러분의 방치형 RPG 웹게임 개발 꿈을 현실로 만들어 드립니다.

클로드코드로 만드는
나만의 방치형 RPG 웹게임

본 강의에서는 코딩 없이 클로드코드를 활용하여 TypeScript, Vite, HTML5 Canvas로 모바일 방치형 RPG 웹게임을 처음부터 완성까지 제작하는 과정을 상세히 다룹니다. 자동 전투, 가챠, 장비 강화 등 핵심 시스템 구현부터 구글플레이 출시까지 가능한 실전 경험을 쌓으실 수 있습니다.

TypeScript와 Canvas로 구현하는 RPG 핵심 시스템

TypeScript 기반 게임 아키텍처 설계와 Canvas 렌더링 엔진 구현을 직접 경험하며, 가챠, 강화, 방치 보상 등 RPG의 핵심적인 데이터 모델링과 밸런싱을 실습합니다. localStorage를 이용한 게임 상태 관리 및 Capacitor를 통한 모바일 앱 빌드까지, 실제 프로젝트에 바로 적용 가능한 기술들을 익히게 됩니다.

실전 프로젝트 완성 코드 및 리소스

강의에서 사용되는 모든 클로드코드 프로젝트 파일과 관련 리소스들을 제공합니다. 자동 전투, 가챠 시스템, 플레이어 및 몬스터 애니메이션, 배경 적용 등 완성된 게임의 전체 소스 코드를 통해 학습 내용을 심화하고, 자신만의 아이디어를 추가하여 게임을 발전시킬 수 있습니다.


📚

코딩 없이 완성하는
나만의 방치형 RPG 웹게임!

Section 1

방치형 RPG 웹게임 개발 시작하기

본 섹션에서는 클로드코드를 사용하여 방치형 RPG 웹게임 개발을 위한 기본 환경을 설정하고, 게임 기획부터 자동 전투, 가챠 시스템 구현까지 핵심 기능을 단계별로 학습합니다. 플레이어 및 몬스터 스프라이트 애니메이션 적용, 배경 삽입, 사운드 폴리싱 등 게임의 기본 완성도를 높이는 과정을 다룹니다.


이런 분들의 고민을
해결할 수 있어요!

📌

프론트엔드 개발자
TypeScript와 Canvas API를 활용하여 실감 나는 웹 게임을 직접 만들어보고 싶지만, 어디서부터 시작해야 할지 막막한 분


📌

게임 개발 입문자
코딩 경험은 있지만, 게임 엔진 없이 HTML5 Canvas와 TypeScript만으로 완성도 높은 모바일 웹 게임을 만드는 구체적인 과정을 배우고 싶은 분


📌

인디 게임 개발자
방치형 RPG 장르의 매력에 빠져 나만의 게임을 직접 기획하고 구현하고 싶지만, 코딩의 장벽으로 아이디어를 현실로 옮기지 못하고 있는 분


이 강의에서 만드는 것

  • Phaser 3 전투 화면 + DOM/CSS 메뉴 하이브리드 구조 (모바일 9:16 세로 화면)

  • 자동 전투 루프: 등장 → 자동 공격 → 처치 → 다음 적, 데미지 숫자/크리티컬 연출

  • 가챠(무기 소환): 등급별 확률, 10연차, 중복 → 강화석 환원

  • 장비·강화: 강화석 소모, 성공/실패 확률, 공격력 증가

  • 스킬 시스템: 6슬롯, 쿨다운·마나, 자동 시전, AOE/도트/버프/힐

  • 성장: 레벨업, 영구 능력치 육성

  • 콘텐츠: 반복 퀘스트, 일일 던전, 상점, 방치 보상(최대 24시간)

  • 재화 표기: 만·억·조 한국식 단위 + 인플레이션 대응

  • 스프라이트 애니메이션: 플레이어/몬스터 idle·attack·hurt·death, 프레임 분석과 앵커 정렬

  • 연출: Autumn Forest 패럴랙스 배경 + 타일셋 바닥, Web Audio 합성 SFX/BGM

  • 저장: localStorage 자동 저장 (IndexedDB로 교체 가능한 추상화)


💡 이 강의만의 강점 — "실전 디버깅"

강의가 happy path만 보여주지 않습니다. 실제로 터졌던 버그를 클로드코드와 함께 진단·수정하는 과정을 그대로 담았습니다 — 한 방에 죽는 몬스터로 인한 NullPointer 크래시, 방치 보상 후 화면 멈춤, 스프라이트 앵커 어긋남, 타일 격자 이음매 등. AI에게 어떻게 문제를 설명하고 원인을 좁혀가는지 가 진짜 핵심 역량입니다. 원테이크 편집없는 강의입니다.

이런 분께 추천

  • 클로드코드 같은 AI 코딩 도구로 실제 결과물을 만들어보고 싶은 분

  • 방치형 RPG를 직접 기획·구현해보고 싶은 인디 게임 입문자

  • Phaser 3 + TypeScript로 2D 웹게임 구조를 익히고 싶은 프론트엔드 개발자

선수 지식 (있으면 도움, 필수 아님)

  • HTML/CSS/JavaScript를 본 적 있으면 결과 검토가 수월합니다

  • TypeScript는 몰라도 따라올 수 있게 진행하지만, 기본 개념을 알면 더 빠릅니다

  • 코드를 직접 쓰는 게 아니라 클로드코드에 지시·검토하는 방식이라, 코딩 경험이 적어도 괜찮습니다





수강 전 참고 사항


실습 환경

  • 운영체제: Windows, macOS, Linux 모두 사용 가능합니다.

  • 필수 도구: VS Code (Visual Studio Code) 코드 에디터가 필요합니다.

  • PC 사양: 원활한 개발을 위해 8GB RAM 이상을 권장합니다.

선수 지식 및 유의사항

  • 웹 개발 경험이 있다면 큰 도움이 됩니다.

  • TypeScript와 JavaScript 기본 내용을 이해하면 좋습니다.

  • 객체 지향 프로그래밍 개념을 이해하면 좋습니다.

학습 자료

  • 최종프로젝트파일 제공합니다.

  • 클로드코드 사용법 관련 자료를 참고할 수 있습니다.



이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 웹 개발 경험이 있으며 게임 개발에 도전하고 싶은 프론트엔드 개발자

  • TypeScript와 Canvas API를 활용한 실전 프로젝트를 원하는 중급 개발자

  • 방치형 RPG 장르의 게임 메커니즘을 직접 구현해보고 싶은 게임 기획자 및 개발자

선수 지식,
필요할까요?

  • JavaScript/TypeScript 기본 문법과 ES6+ 모듈 시스템 이해

  • HTML5 Canvas API 기초 또는 2D 그래픽 렌더링 경험

  • Vite 또는 Webpack 같은 모던 빌드 도구 사용 경험

안녕하세요
코사트입니다.

커리어인증

1,025

수강생

57

수강평

53

답변

4.3

강의 평점

20

강의

코딩 사관학교 하드 트레이닝

직장인/학생/인디개발자들이 모여서 공부합니다.

저는 주로 자바 or 게임프로그래밍 포트폴리오 과정들을 강의 하고 있습니다.

블록체인거래소, 증권거래소 ,게임서버 ,게임클라 회사및 외주개발

게임 개발 및 게임 교육 회사 대표

학원 강의 및 프리랜서 외주 인디개발

(유니티 코리아 대한상공회의소 에티버스러닝) 유니티 부트캠프 오프라인 강의

Unity Certified Instructor

 콘텐츠인재캠퍼스(홍릉) 유니티 강의 등 다수 개발및 강의 경력

현업 개발자및 인디개발자와 코사트팀 연구개발강의 활동

 Unity Certified Professional: Programmer

 멋쟁이사자 교육 강사

코사트인디팀 수강생3인팀

111퍼센트,30억 지원 ‘슈퍼패스트 배치’

2기 우승

 

새로운 인디팀2기 모집시작

 

 

더보기

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

코사트님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

얼리버드 할인 중

₩19,250

50%

₩38,500