웹에서 3D를 구현하는 방법을 배워봅니다. 단순히 기능별 튜토리얼 따라하기에 그치지 않고, 실제 프로젝트에 적용 가능한 예제들을 만들어 보면서 3D 웹개발을 직접 할 수 있도록 공부합니다.
₩165,000
30% 할인
11개 남음•전체 구매 적용쿠폰 받기
로드맵 코스
웹에서 3D를 구현하고 싶다면?
가장 인기있는 자바스크립트 라이브러리, Three.js
예제로 재미있게! 1분코딩 Three.js 로드맵
👉 로드맵을 통해 모든 강의를 30% 묶음할인으로 수강할 수 있습니다.
1분코딩 웹사이트에 ‘직접’ 사용해본 Three.js 핵심 기술 대공개!
2022년, Three.js를 종합적으로 학습할 수 있는 첫 강의를 오픈했어요. 제 웹사이트도 Three.js를 이용해서 만들었는데, 만드는 방법을 물어보시는 분들이 많더라고요.
그래서 이번에는 제 웹사이트를 개발할 때 사용한 핵심 기술을 담은 두 번째 강의를 만들었습니다. 생각보다 웹에서 구현하는 3D에 관심있는 분들이 많이 계셔서, 앞으로도 계속 Three.js와 웹 3D 관련 콘텐츠를 만들어 볼 계획이에요.
✅ 학습 목표
- 수강생 여러분이 Three.js를 이용해 '내가 원하는 무언가'를 만들 수 있도록 하는 게 목표입니다.
- Three.js의 방대한 기능을 백과사전 읽듯 하나하나 다 공부하지는 않아요.
- 그보다는 원리를 익혀서 공부한 내용을 제대로 알고 응용하실 수 있도록 하는 방향으로 강의를 만들고 있어요.
😊 누가 들으면 좋을까요?
웹에서 3D 콘텐츠를 만들고 싶은 모든 분들이 유용하게 배울 수 있어요.
유니크한 포트폴리오를 만들고 싶은 디자이너/개발자
자바스크립트로 웹에서 동작하는 3D 콘텐츠를 만들어야 하는 분
이목을 사로잡을 멋진 웹사이트를 비즈니스에 활용하고 싶은 분
📚 이런 내용을 배워요!
Step 1. Three.js로 시작하는 3D 인터랙티브 웹
- Three.js의 기본 개념들을 충분한 시간을 들여 자세히 다루고, 여러 예제들을 공부할 수 있는 종합 강의입니다.
- 단순히 기능별 튜토리얼 따라하기에 그치지 않고, 실제 프로젝트에 적용 가능한 예제들을 만들어 보면서 3D 웹을 직접 개발할 수 있도록 공부합니다.
- 블렌더(Blender)로 3D 모델을 만들고 애니메이션을 적용하는 방법도 함께 배울 수 있어요.
Step 2. Three.js로 1인칭 3D 웹사이트 만들기
- Three.js 기초를 빠르게 훑어본 다음 ‘1인칭 3D 공간 구현 원리’를 집중적으로 다루는 강의입니다.
- 'Three.js로 시작하는 3D 인터랙티브 웹' 강의에서 자세히 공부했던 내용들을 다시 한번 빠르게 복습하고, 1인칭 시점의 3D 웹사이트를 구현하는 원리를 배웁니다.
- 앞 강의에서 배웠던 블렌더를 활용해 직접 제작한 3D 모델을 배치해 보시면 더 재밌을 거예요. 한 땀 한 땀 직접 코드를 치면서 공간을 만들어가는 재미를 느껴보세요!
📌 1,100개 이상의 수강평! ‘믿고 듣는’ 1분코딩
1분코딩 강의를 듣고 직접 남겨주신 별점 만점 수강평을 확인해보세요!
★★★★★
Three.js의 기본을 알 수 있는 정말 멋진 강의입니다. 해외의 3D 웹 등에서 어떻게 구현하지? 라고 생각했던 것들의 원리를 정리해서 쉽게 알려주시고, Three.js뿐만 아니라 블렌더 사용 방법과 웹에서 물리가 적용되는 방식, 인터랙션에 대한 간단한 이해까지 더해져서 저에게 이 수업은 1+1 그 이상이었습니다. 간결한 설명들과 멋진 예제들로 좋은 강의를 만들어주신 선생님께 정말 감사합니다!
★★★★★
Three.js 강의 올려주셔서 정말정말 너무 감사합니다... 한국어 강의가 없어서 어쩌나 하다 좋아하던 1분코딩님 강의가 올라와서 넘 기뻤어요 ㅎㅎ 설명 너무 잘해주셔서 이해가 잘되고, 정말 꼼꼼히 알려주셔서 잘 응용하고 있습니다! 들은 지는 좀 됐는데, 감사하다는 말 꼭 전하고 싶어 평 남겨봅니다 ㅎㅎ 정말 강의료가 아깝지 않고 오히려 이 가격에 이런 강의 감사하다고 하고 싶은 강의는 처음이에요. 지식공유 넘 감사합니다 1분코딩님!
★★★★★
역시는 역시입니다... 라이브 자바스크립트 강의를 듣고 알게 되어 인프런까지 따라왔네요. 라이브 강의 때 느꼈지만, 선생님께서는 입문자들도 알아듣기 쉽게끔 설명을 참 잘해주시고, 무엇보다 수강생 이해를 돕기 위해 노력하시는 세세한 모습들이 보여서 너무 좋습니다ㅎㅎ 인터랙티브 웹은 쌤만 믿고 따라가겠습니다 :) 인터랙티브웹 장인 한번 되어보겠습니다!
★★★★★
함수 작동 원리, 값을 구하고 그 값을 활용하는 방법, 중간중간 스크립트 메소드나 변수 작성 시 저 같은 초보들이 모를 수 있는 부분들을 콕콕 집어서 알려주셨습니다. 솔직히 이해가 가지 않는 부분도 많았지만, 스스로 코드를 지속적으로 반복해서 작성하다 보면 언젠가 제 것으로 만들 수 있을 것 같은 자신감이 생겼어요! 비전공자인데 강의를 바탕으로 저만의 포폴을 만들어 취업 준비를 해보렵니다!
★★★★★
웹에서 애니메이션을 만들고자 할 때 정말 핵심적인 내용들을 아주 친절하게 설명해 주는 강의입니다. 일분이 캐릭터와 함께 쉽게 설명해주는 부분이 이 강의의 매력인 것 같아요!
★★★★★
유투브도 인프런 강의도 잘 보고 있어요! 강의 나올때 마다 수강해서 듣고 있는데, 막힘없이 술술 볼 수 있다는게 큰 장점이예요! 이번 강의도 이론부터 실전 활용 팁까지 잘 얻어갑니다! 앞으로도 재밌는 강의 계속 내주시길 바랍니다 👍
“Hey You did it!” 반갑습니다, 1분코딩입니다! 😎
안녕하세요, 1분코딩을 운영하고 있는 유준모입니다. 이번 Three.js 로드맵을 통해 오로지 자바스크립트만으로 3D 애니메이션과 공간 효과를 자유롭게 구현해보는 방법을 전해드리려고 해요.
단순히 따라 만드는 게 아닌, 구현 원리를 확실하게 이해하고 여러분의 손을 거쳐 코드를 ‘직접’ 만들 수 있게 되게끔 도와드릴 거예요. 그럼, 강의에서 곧 뵙겠습니다! 😊
로드맵 상세보기
총 2개 코스
https://studiomeal.com같은 1인칭 3D 웹사이트를 만들어 봅니다. 단순히 따라만들기가 아니라, 3차원 공간에서의 움직임 원리를 이해할 수 있습니다. 강의에서 만드는 프로젝트를 기반으로, 웹상에 나만의 3D 공간을 만들어 보세요.
₩88,000
30% 할인
11개 남음•전체 구매 적용쿠폰 받기