강의소개
1. 이 강의를 한 문장으로
"코드를 몰라도, AI와 대화하며 3D 웹페이지와 게임을 직접 만든다."
몇 년 전까지 브라우저에서 돌아가는 3D 화면은 전문 개발자의 영역이었습니다. Three.js라는 기술을 배우려면 JavaScript부터 3D 수학까지 공부할 게 많았거든요. 지금은 다릅니다. AI에게 "회전하는 정육면체를 띄워줘"라고 말하면 됩니다. 이 강의는 그 방법을 처음부터 끝까지, 결과물 3개를 만들며 알려드립니다.
2. 무엇을 만들게 되나요?
강의가 끝나면 여러분 손에는 인터넷에 공개된 결과물 3개가 남습니다.
| 결과물 | 만드는 곳 | 이런 걸 배웁니다 |
|---|---|---|
| 3D 자기소개 페이지 | Part 2 | 첫 바이브 코딩, 3D 화면의 기본 구조 |
| 3D 상품 소개 페이지 | Part 2 | 실무형 페이지 제작, 인터넷에 배포하기 |
| 나만의 3D 게임 | Part 3 | AI로 캐릭터·음악까지 만들어 게임 완성 |
포트폴리오에 링크로 넣을 수 있고, 친구에게 "이거 내가 만들었어"라고 보여줄 수 있는 진짜 결과물입니다.
3. 이런 분을 위한 강의입니다
- 코딩을 배운 적 없지만, 내 아이디어를 웹으로 만들어보고 싶은 분
- AI 도구(ChatGPT, Claude 등)를 써봤지만 "개발"에 활용하는 법이 궁금한 분
- 개발자이지만 Three.js와 AI 협업 방식을 빠르게 훑고 싶은 분
- 3D 웹, 인터랙티브 웹에 관심 있는 디자이너·기획자
4. 코딩을 몰라도 정말 되나요?
됩니다. 이 강의에서 여러분이 코드를 한 줄씩 타이핑하는 일은 거의 없습니다.
대신 바이브 코딩(Vibe Coding) 방식으로 만듭니다. 만들고 싶은 것을 AI에게 설명하고, AI가 만든 결과를 확인하고, 마음에 들 때까지 다듬는 방식입니다. 코드를 "쓰는" 능력 대신 원하는 것을 "설명하는" 능력과 결과를 "판단하는" 눈을 기릅니다. 자세한 이야기는 바로 다음 챕터에서 합니다.
물론 강의를 따라가다 보면 코드가 눈에 익고, "아 이 부분이 카메라구나" 정도는 자연스럽게 읽게 됩니다. 그거면 충분합니다.
5. 준비물
| 준비물 | 비고 |
|---|---|
| 컴퓨터 (macOS 또는 Windows) | 사양은 크게 중요하지 않습니다 |
| 크롬(Chrome) 브라우저 | 결과물을 확인하는 화면입니다 |
| Claude 유료 구독 (Pro 이상) | 강의 전체가 Claude 기준으로 진행됩니다 |
| 구글 계정, GitHub 계정 | 배포 챕터에서 사용합니다. 다음 챕터에서 함께 준비합니다 |
주의
AI 도구 구독료가 부담될 수 있지만, 이 강의에서 가장 중요한 준비물입니다. 한 달만 구독해도 강의 전체를 완주할 수 있습니다.
6. 강의 200% 활용법
- 영상을 멈추고 직접 하세요. 보기만 하면 "할 수 있을 것 같은 기분"만 남습니다. 같은 프롬프트를 직접 입력해 보세요.
- AI의 결과가 강의와 달라도 정상입니다. AI는 매번 조금씩 다르게 만듭니다. 오히려 그 차이를 다듬는 과정이 진짜 연습입니다.
- 에러를 겁내지 마세요. 에러 메시지는 AI에게 그대로 붙여넣으면 됩니다. "고쳐줘"가 이 강의에서 가장 많이 쓰는 말입니다.
- 예제를 내 것으로 바꾸세요. 자기소개 페이지엔 진짜 내 소개를, 상품 페이지엔 내가 좋아하는 물건을 넣으세요. 결과물이 진짜가 됩니다.
7. 다음 챕터에서는
바이브 코딩이 무엇인지, 그리고 강의 내내 사용할 도구 4가지(Claude Desktop, VS Code + Claude Code, GitHub, Commands)를 설치하고 세팅합니다.