스파르타코딩클럽 로고
로그인
전체 강의
부트캠프
국비
커뮤니티
블로그
이벤트
수강생 작품
고객센터
기업 서비스
둘러보기
인텔리픽
신입 개발자 채용 공고를 한 곳에서
로그아웃

프론트엔드 개발자를 위한 인터랙티브 3D 웹 개발 실전

React와 R3F를 이용하여 만드는 3D 인터랙티브 웹!
3D 웹의 기초부터 포트폴리오 제작까지 함께해봅니다.

* 난이도: 상(React를 활용한 CRUD 프로젝트를 진행해본 취준생/개발자)

5주 수강

총 5시간 35분

국비지원 수강

49,000원

수료 시 환급 (내일배움카드 필수)

5주 수강

9월 23일 (월)

일반 수강

500,000원

5주 수강

9월 23일 (월)

인터랙티브 3D 웹을
직접 만들어보세요.

React와 R3F를 이용하여 만드는 3D 인터랙티브 웹!
3D 웹의 기초부터 포트폴리오 제작까지 함께해봅니다.
5주 수강
수강 기간
9/23(월)~10/27(일)
43
강의방식
43개 동영상
2
결과물
3D 인터랙티브 웹 사이트 2개
완강 혜택
강의 및 자료 평생소장

[기기 사양 확인법]
- 윈도우: 컴퓨터 설정 → 시스템 → 정보
- Mac: 화면 왼쪽 상단 Apple 로고 → 이 Mac에 관하여

[상세 사양]
- 윈도우 : 버전 10 이상 / RAM 8G 이상 / i5 이상 / 64bit 이상 - Mac : 11.7 (Big Sur) 이상

지금 보고 있는 강의

국비지원으로 수강할 수 있어요

일반 수강

500,000원

국비지원 수강

49,000원

수료 시 환급

강의 제목

프론트엔드 개발자를 위한 인터랙티브 3D 웹 개발 실전

강의 제목

[스킬업] 프론트엔드 개발자를 위한 인터랙티브 3D 웹 개발 실전

*일반 수강하는 강의와 제목만 다른 동일한 강의입니다.

환급 제도

완주 시 1만 포인트 환급

*다른 강의 결제 시 현금처럼 사용 가능

환급 제도

수료 시 상기 결제 금액 100% 환급

수료증

완주 시 수료증 발급

수료증

수료 시 NCS 수료증 발급

신청 및 결제 방법

스파르타코딩클럽 홈페이지에서 결제

신청 및 결제 방법

결제 후 HRD-Net에서 수강신청

*내일배움카드 필요

*수료 기준 : 진도율 80% 달성, 완주 기준 : 진도율 100% 달성

국비지원 정보와 훈련과정탐색표가 필요하다면?

다운받기

3D 인터랙티브 웹사이트,
왜 배워야 하나요?

디지털 트윈은 현실 세계를 가상으로 구현하는 것입니다. 메타버스, VR, AR 등이 트렌드가 되고 있습니다.
사용자의 행동에 따른 반응이 있는 인터랙티브 웹에 대한 수요는 급증하고 있지만, 웹 개발자에 대한 3D 강의는 부족합니다.
React 기초부터 3D 핵심까지 모두 습득하고, 나만의 3D 인터랙티브 웹사이트를 제작해보세요.

이 강의로
3D 인터랙티브 웹을
구현해야 하는 이유

01
핵심 위주로 학습합니다.
인터랙티브 웹에 꼭 필요한 개념들만 추려서 담았습니다.
타사 대비 절반 분량의 강의로 핵심만 학습하세요.
02
만들면서 이해합니다.
이론 위주의 강의가 아닙니다.
모든 건 직접 구현해보면서 이해해보세요.
03
구현에 필요한 모든 내용을 담았습니다.
React 기초부터 R3F 심화까지,
인터랙티브 웹에 필요한 모든 내용을 담았습니다.

실습 결과물 2개

르탄이 타로/트럼프 덱
React
R3F
Interaction
3D Object
Object 3D 에셋을 활용하여 귀여운 르탄이 캐릭터가 그려진 타로/트럼프 카드 덱을 만들어봅니다.
3D 인터랙티브 동물원
React
R3F
react-three-rapier
Animation
물리엔진이 적용된 3D 인터랙티브 동물원 웹 사이트를 만들어 디지털 트윈을 구현해봅니다.
리액트는 조금 할 줄 아는데,
흔하지 않은 프로젝트를 만들어 보고 싶어요.
개발자 꿈나무
나만의 전시회장, 포트폴리오를
3D 인터랙티브 웹으로 구현해보고 싶어요.
프론트엔드 취준생
3D 강의를 찾고있는데 너무 양이 많아서,
핵심만 쏙쏙 배우고 싶어요.
웹 개발자

핵심 스킬 3가지

핵심 3D Object 개념 습득하기
R3F에서 사용하는 3D Object 개념(Canvas, Scene, Mesh, Light, Geometry)을 핵심 위주로 쏙쏙 습득합니다.
3D 인터랙티브 웹사이트 구현하기
나만의 3D 객체, 공간을 구축하고 사용자와 원활히 상호작용하는 3D 인터랙티브 웹을 제작해봅니다.
React 기초 개념
R3F로 인터랙티브 웹을 구현하기 위해 필요한 React 필수 개념만 빠르게 학습해봅니다.
튜터 소개
3D 인터랙티브, 어렵지 않다는 걸 보여드릴게요!
이재상
현) 주식회사 라잉스내커즈 Founder
현) 스파르타 코딩클럽 ReactTrack 튜터 (2기~)
전) 무신사 29CM FrontEnd 개발
전) AI 스타트업 FrontEnd 개발
닫기
커리큘럼
5주 과정
웹사이트 2개
사용 기술
React, R3F, JavaScript
구현 기능
Object 3D 에셋을 활용하여 귀여운 르탄이 타로/트럼프 카드 덱을 만들어봅니다. 물리엔진이 적용된 3D 인터랙티브 동물원 웹 사이트를 만들어 디지털 트윈을 구현해봅니다.
10강
총 1시간 1분
1-1
이번에 우리가 배울 것
1-2
3D 인터렉티브가 뭘까?
1-3
프로젝트 세팅하기
1-4
프로젝트 기본 요소 설치하기
1-5
3D 기본 요소 알아보기
1-6
3D Canvas 만들기
1-7
Camera 배우기
1-8
Scene을 구성하는 요소
1-9
3D 개발을 도와주는 도구들
1-10
GUI Controller 추가하기
8강
총 1시간 7분
2-1
이번에 우리가 배울 것
2-2
R3F Canvas
2-3
Geometry
2-4
Material & Texture
2-5
Object 3D + Transform
2-6
Light & Shadow
2-7
Camera
2-8
Interaction (Event)
10강
총 1시간 36분
3-1
이번에 우리가 배울 것
3-2
React란?
3-3
프로젝트 세팅하기
3-4
JSX
3-5
State
3-6
Event Handling
3-7
Component
3-8
React로 사고하기
3-9
useEffect & useRef
3-10
useContext
8강
총 1시간 2분
4-1
이번에 우리가 배울 것
4-2
프로젝트 세팅하기
4-3
오브젝트 불러오기
4-4
오브젝트 위치
4-5
물리 엔진 추가하기
4-6
변경 모드 (Edit Mode) 만들기 - 1
4-7
변경 모드 (Edit Mode) 만들기 - 2
4-8
변경 모드 (Edit Mode) 만들기 - 3
7강
총 47분
5-1
이번에 우리가 배울 것
5-2
모델 불러오기
5-3
르탄이 움직임 만들기
5-4
르탄이 자연스럽게 움직이기
5-5
카메라 추가하기
5-6
빛, 후처리
5-7
배포하기
완강까지 책임지는 학습 관리 시스템
강의 완강 혜택
FAQ