🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

Thumbnail
상반기 결산 25% 할인 중(D-8)
개발 · 프로그래밍 프론트엔드

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발 대시보드

(5)
7개의 수강평 ∙  105명의 수강생
25% 99,000원 74,250원

월 14,850원

5개월 할부 시
지식공유자: 코딩의세계 한태재
총 63개 수업 (10시간 2분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, 인터랙티브 웹] 강의입니다.

React와 Three.js 를 한번에! 3D 기초부터 현업에 사용할 수 있는 프로젝트 그리고 최적화 팁 까지 !

✍️
이런 걸
배워요!
웹 3D의 기초에 대해 배우게 됩니다
React와 Three/js 를 한번에! R3F (react-three/fiber)를 배워요
다양한 예제를 통해 이해하고 응용하여 나만의 작업물을 만들어 가는 강의
직접 같이 한땀 한땀 코딩하면서 익히고 실력을 쌓을 수 있는 강의
눈에 띄는 개발자가 될 수 있는 3D 개념을 익히는 강의
어디에서도 찾을 수 없는 R3F 스택 학습, 더 쉽고 재미있게 구현하는 3D 웹
현직 개발팀장에게 배우는 실무 팁과 최적화 방법

강의 주제 📖

메타버스, XR(VR, AR), 웹(HTML5) 게임, 블록체인 등의 산업에 의해

화려한 인터렉션이 있는 2D/3D 웹 컨텐츠에 대한 수요가 급증하고 있습니다.

또한 취업시장에서도 프론트엔드 개발 + 웹 그래픽 엔지니어에 대한 수요가 급증하고 있습니다.

단순한 웹 사이트가 아닌 화려한 인터렉션이 있는 2D/3D 사이트에 대한 니즈는 지속될 것 입니다.

하지만 게임 개발자와 유니티 개발자에 대한 3D 강의는 많지만 웹 3D에 대한 강의는 너무 부족합니다.

당신은 React와 Three.js를 한번에 배우고 익힐 수 있는 R3F(React Three fiber)에 대해 배우게 됩니다.

어디에서도 찾을 수 없는 R3F 스택 학습으로 더 쉽고 재미있게 3D 웹사이트를 만들어 보아요!


수강 타겟/강의 목적 🙆‍♀️

이 강의는 누가 들으면 좋을까요?

  • 눈에 띄는 특별한 웹 사이트를 만들고 싶은 개발자/디자이너
  • 웹에서 3D를 구현하고 싶은 개발자
  • 남들과는 차별화 된 무기를 갖고 싶은 개발자
  • 웹에서 재미있는 시도를 시작해보고 싶은 개발자/디자이너

당신은 웹 사이트를 만드는 일이 즐거우신가요?

  • 웹 사이트 게시판을 만들고 팝업창을 개발하는 일 지겹지 않으신가요?
  • 당신은 남들과 차별화 된 웹 프로젝트를 만들고 싶으신가요?
  • 당신 회사에서 화려한 눈에 띄는, 남들과 다른 웹 사이트를 만들어보자고 하나요?
  • 이 웹사이트는 어떻게 만들었지? WOW한 사이트를 만들어 보고 싶나요?

이 강의를 들으면서 당신은

  • 웹 3D의 기초에 대해 배우게 됩니다
  • React와 Three/js 를 한번에! R3F (react-three/fiber)를 다루는 법을 배우게 됩니다
  • 직접 같이 한땀 한땀 코딩하면서 익히고 실력을 쌓을 수 있는 강의
  • 현직 개발팀장에게 배우는 실무 팁과 최적화 방법

강의 특징 ✨

React와 Three.js 를 한번에! React Three Fiber(R3F)
3D 기초부터 현업에 사용할 수 있는 프로젝트 그리고 최적화 팁 까지 !

  • Javascript 기초에 대해서 알고 계시다면 수강이 가능합니다.
  • React에 대한 기초 개념이 있으신 분이면 좋지만 없어도 괜찮습니다.
  • 웹 3D에 대한 지식은 전혀 없으셔도 괜찮습니다. 아무것도 모른다고 가정하고 기초 부터 설명해요.
  • 실무에서 바로 사용 할 수 있도록 Typescript로 강의를 진행하고 예제 코드를 공유합니다.
  • 각 섹션마다 이론위주의 중요한 기초 개념을 설명 (10~25%)
  • 각 섹션마다 한땀 한땀 같이 하는 실습위주의 강의 (75~90%)

학습 내용 📚

< 재미있는 3D 기초에 대한 설명 >

실제 촬영현장, 애니메이션을 만드는 세트와 비교하여 이해가 쏙쏙!

실제 환경과 똑같은 웹 3D 환경에 대한 이론 설명!

< Geometry, Material >

다양한 모양의 오브젝트와 재질 그리고 빛과 그림자 까지!

<3D web E-commerce project>

실무에서 바로 사용할 수 있는 프로젝트, 그리고 최적화 팁 까지!


예상 질문 Q&A 💬

Q. 쌩 초보 비전공자입니다. 강의 듣고자하는데 저같은 비전공자도 강의를 들어도 이해가 될까요?
A. 안녕하세요! 제 생각에는 비전공자도 javascript의 기초를 아신다면 수업을 들으셔도 따라 오시는데 전혀 문제는 없을 것 같습니다. 만약 javascript를 모르신다면 후반부에 가면 조금 어려울 수도 있을것 같은데요. 이것도 역시 사람마다 다르겠지만 모르는 부분은 다른 무료강의나 구글에서 찾아가면서 배우시는 분도 보았습니다. 혹시나 모르시는 부분이 생기시면 주저말고 마구마구 질문 해주세요 ! 

Q. 강의를 수강할 때 미리 준비하거나 필요한 것이 있을까요?
A. 미리 준비하실 것은 강의를 들으면서 따라해보실 수 있는 컴퓨터(Mac or Window)입니다. 그 외에 필요한 툴은 모두 무료로 인터넷에서 다운 받을 수 있습니다. 크롬, vscode, npm, blender 등등 입니다. 그리고 필요한 자료나 리소스 그리고 강의에 사용된 코드는 모두 다운로드 받을 수 있도록 준비하고 있습니다.

Q. 왜 React Three Fiber(R3F)를 배워야 하나요? 
A. 현재 웹 개발은 React가 대세라고 할 수 있어요. 하지만 React만으로는 남들과 차별화 되지 못한다고 생각합니다. 그래서 요새, 앞으로도 계속 발전해 나갈 수 밖에 없는 웹 3D 라는 무기를 장착한다면 남들과 차별화 된 자신 만의 로드맵을 만들 수 있다고 생각해요! 또한 메타버스, XR(VR, AR), 웹(HTML5) 게임, 블록체인 등의 산업에 의해 화려한 인터렉션이 있는 2D/3D 웹 컨텐츠에 대한 수요가 급증하고 있습니다. 그래서 단순한 웹 사이트가 아닌 화려한 인터렉션이 있는 2D/3D 사이트에 대한 니즈는 지속될 것 입니다. 그에 따라 3D 웹 개발자의 수요도 점점 증가하고 있습니다.  눈에 띄는, 남들과 다른 웹 사이트를 함께 만들어 봐요!


수강 전 참고 사항 📢

실습 환경

  • 강의에서는 macOS - Apple 칩을 사용하지만 mac intel칩 혹은 window환경도 가능합니다.
  • 사용 프로그램 : 크롬, vscode, blender 등
  • PC 사양: CPU 2.0GHz 이상, RAM 8GB 이상, WebGL 지원 그래픽을 권장합니다

학습 자료

  • 각 섹션별 소스코드 압축 파일 제공 ( zip ) 
    • 0, 2, 3, 4, 5, 6, 7강 + 실무 프로젝트  
    • 신발 3D 모델링 파일 제공

선수 지식 및 유의사항

  • 자바스크립트 기초를 아시는 분이라면 가능합니다.
  • React에 대한 기초 개념이 있으신 분이면 좋지만 없어도 괜찮습니다.
  • 질문 해 주시는 내용은 빠르면 당일 늦어도 3일 이내에 답변 드리겠습니다.
  • 웹 3D 이커머스 프로젝트에 대한 내용이 지속해서 추가 업데이트 되고 있습니다.

지식공유자 소개 ✒️

안녕하세요. 10년차 웹 그래픽 엔지니어 한태재입니다. 저는 기본적으로 풀스택 개발자이지만 프론트앤드에 집중하여 작업합니다 :)

저는 Angular, React등의 프레임워크를 사용해 프론트엔드 개발을 해왔습니다. 하지만 역시 가장 좋아하는 작업은 Threejs, WebGL, D3js , Pixi.js 등 웹(HTML5)에서 2D/3D Canvas 그래픽스를 다루는 프로젝트들 입니다. 저는 새롭고 창의적인 유저경험(UX)를 만드는 인터렉티브한 웹 컨텐츠에 대한 열정이 가득합니다. 같이 재미있는 프로젝트 만들어봐요 !

이력 사항/포트폴리오/개인 영상

  • 10년차 인터렉티브 3D 프론트엔드 개발자
  • (현) 네오위즈 - HTML5 게임 개발자
  • (현) 모두의연구소 - Generative art 랩장
  • 위메이드 - Defi Frontend 개발 팀장
  • 다비오 - Three.js 개발 팀장
  • Dmajor - 시니어 프론트엔드 개발자
  • 모두의연구소 - Interactiver art of web 랩장
  • Addpac - 쥬니어 프론트엔드 개발자
  • NHN 네이버 재팬 - UX/UI 디자이너
  • 매드맨포스트 - CG Effect Artist
  • 국민대 - 공업디자인 전공

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
자바스크립트 기초를 아시는 분이라면 가능합니다.
React에 대한 기초 개념이 있으신 분이면 좋지만 없어도 괜찮습니다.
📚
선수 지식,
필요할까요?
Javascript

안녕하세요
코딩의세계 한태재 입니다.
코딩의세계 한태재의 썸네일

안녕하세요. 10년차 웹 그래픽 엔지니어 한태재입니다. 저는 기본적으로 풀스택 개발자이지만 프론트앤드에 집중하여 작업합니다 :)

저는 Angular, React등의 프레임워크를 사용해 프론트엔드 개발을 해왔습니다. 하지만 역시 가장 좋아하는 작업은 Threejs, WebGL, D3js , Pixi.js 등 웹(HTML5)에서 2D/3D Canvas 그래픽스를 다루는 프로젝트들 입니다.

저는 새롭고 창의적인 유저경험(UX)를 만드는 인터렉티브한 웹 컨텐츠에 대한 열정이 가득합니다. 같이 재미있는 프로젝트 만들어봐요 !

 

오프라인 모임 / 오픈 카카오톡 채팅방에 참여해서 질문과 작업 공유해요!

https://woc.taejaehan.com/

 

 

10년차 인터렉티브 3D 프론트엔드 개발자

-(현) 네오위즈 - HTML5 게임 개발자

-(현) 모두의연구소 - Generative art 랩장

-위메이드 - Defi Frontend 개발 팀장

-다비오 - Three.js 개발 팀장

-Dmajor - 시니어 프론트엔드 개발자

-모두의연구소 - Interactiver art of web 랩장

-Addpac - 쥬니어 프론트엔드 개발자

-NHN 네이버 재팬 - UX/UI 디자이너

-매드맨포스트 - CG Effect Artist

-국민대 - 공업디자인 전공

커리큘럼 총 63 개 ˙ 10시간 2분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개
강의 소개 미리보기 01:32 Html Dom과 Canvas 그리고 SVG 미리보기 30:30
개발 라이브러리 종류 소개 (React, Pixi.js, Three.js ... ) 13:35
웹 인터렉티브 예제 사이트 소개 첫번째! 08:01
웹 인터렉티브 예제 사이트 소개 두번째!! 미리보기 06:29
섹션 1. 개발환경 세팅
크롬, vscode, iterm2 설치 미리보기 03:23
nvm ( npm / node ) 설치 05:09
vite로 프로젝트 만들기 08:37
모듈 단위 컴포넌트 import하는 법 07:14
js와 ts / typescript로 강의하는 이유 03:50
r3f, drei 설치 02:32
섹션 2. R3F 설명
섹션 소개 / 소스코드 다운로드
R3F Canvas 만들기 미리보기 09:44 3D기초 - 구성요소 알아보기 미리보기 11:37
Renderer ( useFrame ) 17:09
Camera ( Perspective, Orthographic ) 08:44
Scene ( Mesh - Geometry + Material ) 08:34
Controls, Helper ( axesHelper, gridHelper ) 14:01
GUI Control ( leva ) 08:47
섹션 3. Object 3D
섹션 소개 / 소스코드 다운로드
transformation 위치, 크기, 회전 09:36
Object3d 개념 - ( Scene, Group, Mesh ) 10:58
그룹으로 움직이기 ( World, Local 좌표계 ) 10:00
섹션 4. Geometry
섹션 소개 / 소스코드 다운로드
geometry와 모델링 개념f 09:52
R3F에서 mesh 추가3가지 방법 08:18
wireFrame, geometry 공유, boxGeometry 옵션 설명 13:40
기본 geometry 종류, circleGeometry 옵션 설명 09:30
섹션 5. Material
섹션 소개 / 소스코드 다운로드 미리보기 01:15
material (wireframe, basic, lambert) 16:16
material (phong, normal) 13:49
material (standard, physical, depth) 11:33
material (matcap, toon) 08:52
섹션 6. Light / Env / Shadow
LIght ( Ambient, Hemisphere ) / 소스코드 다운로드 14:02
LIght ( Directional, Point, Spot ) 11:19
envrinonment 03:42
3가지 LIght와 shadow 08:21
섹션 7. Interaction & event / raycaster
섹션 소개 / 소스코드 다운로드 00:40
r3f interaction event 종류들 및 오브젝트 변경 10:17
오브젝트 클릭 이벤트 전달 막기, raycaster 설명 05:49
raycaster로 intersect object 받아와서 처리하기 11:38
섹션 8. [프로젝트] 이커머스 신발 만들기 프로젝트 세팅
섹션 소개 / 소스코드 다운로드
개발환경, 프로젝트 세팅 15:11
alias 설정 09:58
섹션 9. [프로젝트] 신발 3D 모델링 파일 넣어보기
신발 3D 모델링 파일 준비하기 08:24
OBJ, FBX 파일 불러오고 확인하기xr 08:56
블렌더로 신발 모델링 파일 수정하고 GLB로 저장하고 불러오기 11:54
신발을 클릭하고 각 파트별로 색상 바꾸기 21:40
섹션 10. [프로젝트] 카메라 컨트롤
모델링 & 이미지 파일 정리, 코드 정리 05:03
카메라 컨트롤즈 라이브러리 사용하기 08:47
Zoom vs Dolly의 차이점과 사용방법 07:00
카메라 부드럽게 이동하기 14:14
Sin & Cos으로 턴테이블 효과 만들기 08:23
카메라 컨트롤즈의 이벤트 받아서 사용하기 ( control, sleep ... ) 13:38
신발을 파는 것처럼 디스플레이 하기 06:20
빛과 그림자를 추가해서 현실감 더하기 ( ContactShadows ) 13:31
섹션 11. [프로젝트] React UI와 연동하기
생성 AI 미드저니를 활용해서 신발 이커머스 웹 사이트 UI 디자인하기 10:51
React MUI를 사용해서 상단메뉴Bar 만들기 15:43
Color List 만들기 1 - Constants, SCSS 파일 추가하기 13:35
Color List 만들기 2 - React MUI로 컬러 선택 리스트 만들기 07:38
Color List 만들기 3 - Recoil 전역상태에 컬러 추가하고, 신발 컬러 바꾸기 16:04
Color List 만들기 4 - Recoil 전역상태에 오브젝트 Name 추가하고, 신발 컬러 바꾸기 14:45
Color List 만들기 5 - 오브젝트 emissive 컬러 변경 / default 선택된 오브젝트 추가 12:26
강의 게시일 : 2024년 02월 02일 (마지막 업데이트일 : 2024년 03월 10일)
수강평 총 7개
수강생분들이 직접 작성하신 수강평입니다.
5
7개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
전임하 thumbnail
5
항상 3D에 대해 관심만 갖고 있었는데 같이 따라하면서 조금씩 감이 잡히네요. 재미있는것 많이 만들수 있을것 같아요 좋은 강의 감사합니다 !
2024-02-03
지식공유자 코딩의세계 한태재
임하님 좋은 리뷰와 좋은 평가 감사합니다 ! 감이 조금씩 잡히신다니 다행이네요 ㅎㅎ 혹시 질문있으시면 편하게 남겨주세요 :>
2024-02-03
John Lee thumbnail
5
어려운 개념을 알기 쉽게 설명해줘서 감사합니다. 강의를 들을수록 나도 할 수 있을 것 같다는 기대가 생깁니다. 나중에 심화 과정도 개설해 주시면 좋을듯합니다. 사람들에게 추천 많이 하고 싶은 강의 입니다. ^^
2024-02-05
SOYOUNG HAN thumbnail
5
처음에는 유투브에서 강사님을 보고 강의를 등록하게 되었는데 듣길 잘 했다는 생각이 들어요. 디테일하게 알려주시니 좋아요. 여러가지 자료나 예시를 들려고 노력하셔서 이해가 잘 되니 좋습니다. 예시 외에도 다른 것들은 만들고 싶을때는 어떻게 해야하는지 공식문서를 보면서 설명해주시니까 좋은 것 같아요. 물고기도 주지만, 직접 물고기를 잡는? 방법도 설명해주시니 좋습니다… ㅎㅎ 그런데 중간에 말이 끊기거나 ‘음~’ 이라고 생각 하시는 부분도 가끔 있어서 강의가 조금은 어색하신 것 같지만, 저에게는 그런 부분이 방해되진 않습니다. 힘내세요! 감사합니다 !
2024-02-03
yeonsoon park thumbnail
5
강사님이 재미있게? 흥미롭게? 강의를 하셔서 저도 재미있게? 되는 것 같아요. 처음에는 좀 어려웠는데 계속 들어보고 직접 코딩 해보니까 자신감과 흥미를 얻고 있어요 감사합니다. 너무 좋습니다. 혹시 중급 강의나 추가 강의를 제작하실 생각도 있으신가요? 감사합니다!
2024-02-03
최대범 thumbnail
5
Three.js 공부중에 보물같은 강의가 나왔네요. JS로 작업되었던 Three.js 예제들을 Typescript로 타입지정하면서 공부했었는데요, 타입스크립트로 작성된 예제들과 적재적소에 노하우가 녹아든 설명이 일품입니다.
2024-02-08
채널톡 아이콘