쉽고 빠르게 만드는 다양한 이미지 이펙트!
깡코딩
자바스크립트와 CSS로 흩어진 이미지 조각을 하나의 이미지로 완성하는 다양한 패턴의 이미지 이펙트를 따라 만들고 랜덤으로 나타나도록 처리합니다. 이 수업을 응용한다면 수강생 여러분의 독창적인 이펙트를 만들 수 있을 거라 생각되네요!
초급
JavaScript, HTML/CSS, 인터랙티브 웹
언제까지 박스나 구체 뺑뺑이 도는 것만 배우시나요, 숲을 봐야지 나무만 보면 생각이 크지 않습니다. 완전 초보를 탈출하고 실무에 적용할 수 있으며, 최근 주목받고 있는 디지털-트윈에 한 역할을 담당할 Three.js의 파워를 느껴보세요. 홈페이지 뺑뺑이 용도가 아닌 업무 적용 수준입니다. 제조,국방,재난,운송 분야등 관련 모델(glb, glTF..)의 제작 역량을 보유하면 도메인 전문성이 한 층 업그레이드 됩니다. 개인 및 회사 서버에 On-Premises용 Node.js(Express) & Nest.js 각 서버도 개발합니다 본 강의를 조금만 변형 해도 파워풀한 서비스 제작과 더불어 IT 인재로 거듭날 것입니다. 여러분 쫄지 마시고, 도전하세요 그리 어렵지 않습니다.^^







라인 게임즈
에 관심있는 사람들도 듣는 중!





라인 게임즈
에 관심있는 사람들도 듣는 중!
Three.js를 활용한 도시를 만들고, 저장하고 오픈 합니다. 저장은 바이너리 형식입니다.(용량: 수백 Bytes ~ 2KB 수준, 가독성: 불가)
다국어(한글,영문,일본어...)도 바닐라 자바스크립트로 개발하여 다른 웹 프로젝트에도 사용 가능합니다.(웹 표준 규약을 준수합니다)
개발 후 Vite를 활용한 빌드와 Gulp로 css 압축 스크립트 만들어 보며, 압축된 min.css를 빌드된 index.html에 자동 치환해 줍니다. 또한 package.json에 적용하면 한 방에 빌드와 Netlify 배포까지 완료
개발 완성 및 빌드 후 Git 커밋과 Netlify 퍼블리싱 후 나만의 사이트 완성. 수정 보강시 자동 배포 적용됩니다
결과물을 On-Pemises 실행하기 위한 나만의 간단한 Node 서버와 최신 유행인 Nest 서버를 개발합니다.
최종적으로 CSS도 전체를 설명하고, 그 동안 개발한 코드에 대해 최적화를 해봅니다
답은 Three.js에 있습니다. 도시 모델, 제조 공정 모델, 재난 모델 등 Digital-Twin, VR 등 많은 분야에서 구현하기 위한 기술이 바로 Three.js 입니다.
본 강의에서 대부분 Three.js만으로 3D 서비스를 만들고 Git과 연동하여 Netlify에 자동 배포되어 나만의 사이트를 무료로 보유하게 될 것입니다. 물론 도메인이 있으면 연결만 하면 됩니다.
개인 및 회사 서버에서 실행하기 위한 Node.js 서버와 Nest.js 서버 두 개를 개발합니다.
다국어 서비스가 필요하다면 무거운 라이브러리 주입보다 같이 만들어 자신의 다국어 모듈을 써보세요. 모든 웹 프로젝트에 적용(웹-표준 준수) 가능합니다 .(섹션 4부터 다국어로 코딩)
기본 문법과 따라하기 예제로만 시간 보내는 것 보다 완성된 것으로 거꾸로 학습하세요. 그리고 내 관심사의 것으로 수정, 개선하고 적용해 보세요.
강사만 코딩하지 않게 직접 손 코딩하세요, 그래야 내 것이 되고 발전합니다.
📌 본 주제인 Three.js는 반드시 배워야 하는 클래스 중심의 구현 개발을 제공합니다
📌 Git에 소스를 관리하고, Netlify와 연동하여 무료 사이트에 실시간 반영 서비스 가능합니다.
📌 너무 가벼운 다국어 모듈을 직접 만들어 적용하고, 다른 웹-프로젝트에 적용 가능합니다.
📌 On-Premises 운영이 필요한 분을 위한 Node.js와 Nest.js 기반 Express 서버를 제공합니다.
💡Three.js + i18n(Internationalization) + Node.js & Nest.js Server & Git/Netlify.
문법 공부,따라하기 용도가 아니고, 실무 적용 가능하며, 면접 심사 위원도 놀랄 멋진 포트폴리오
Three.js를 기반으로 하지만, 실제 웹-서비스가 제공되기 위한 Fullstack Semi 과정 제공

Three.js로 객체만 만드는데 그 이후가 궁금하신 분?
2/3D 모두 다 좋은데 이걸 어디에 어떻게 써야 하는지요. 매번 BoxGeometry 회전하는 게 대부분 인데, 어디에 활용하지요?
Three.js 입문자 / IT 사원

Three.js 저장/오픈 방법은 ?
new THREE.Scene() 객체를 toJSON()하면 되나? 이후에 어떻게 오픈하고 보여주지? 용량은 엄청나고(수십~백 M/GB), 아니면 Maximum call 오류 😰
Three.js 개발자 / IT 대리

웹의 처음부터 끝까지 궁금해?
Three.js면 더 좋고 아니어도, 간단한 풀-스택 없나? Node.js는 뭐고, Nest.js는 뭐야? 간단하게 구현하거나 알 수 없을까? ThreeJS로만 웹 구현이 되나? 궁금해 하시는 분
웹-프론트 개발자 / 전산실 대리
Three.js를 활용해서 glb,glTF 및 제반 Loader 기반 객체를 확대하여 나만의 솔루션을 만들 수 있어요
다국어를 지원해서 Linkedin등에 포트폴리오를 올려도 어깨에 힘들어 갑니다
풀-스택으로 로그인/아웃 처리만 하면, 기대 이상의 투자 포함한 많은 제안을 받을 수 있을 겁니다
Three.js를 홈페이지 용도 이상으로 기획하시고, 디지털-트윈 업체에 포트포리오를 제출,이직 하세요
자신감을 가지시고 매뉴얼을 조금만 더 봐서 기초를 챙기세요. 여러분의 연봉은 상승 할 것입니다.
Windows (11) 기준으로 설명 합니다. 개발은 macOS(12), window11 모두 테스트 하였습니다.
Cursor : 0.49.6 (winSurf: 25% 저렴, Vscode: 엄청 저렴, cline: Good)
ThreeJS: r176
Node.js : v22.15.0 LTS & v22.15.0 (ncu, ncu -u, npm i ; 교육 받으신 분들은 ? 😃)
Nest.js : v11.1.1 (@nestjs/core)
섹션별 진행 프로그램의 수업 자료 및 수업 노트에서 제공합니다.
실습 환경
운영 체제 및 버전(OS)
-.Front-End : Chrome b
rowser 지원 OS
-.Back-End : Node 지원 OS
사용 도구: Git, Netlify 모두 무료 입니다.(Netlify 유료도 있습니다)
선수 지식 및 유의 사항
자바스크립트 기본은 필요합니다.
Three.js 입문 수준은 필요합니다.
질문/답변은 ASAP이나 3일 이내를 목표로 하며, 현재 커리큘럼의 Three.js 버전을 매주 최신으로 맞춰 드릴 겁니다. 완전한 개정이 아닌 도움이 될 개정 및 추가 모듈은 업데이트 후 공지 될 것입니다.
강의 및 학습 자료 저작권은 복제, 유사 수준의 재 판매 및 Git Public 공개는 불허 합니다. 즉 Git Private 및 여러분들의 제품에 넣어서 변경, 활용, 배포 등은 모두 가능합니다.
(여러분 제품에 사용한 경우 판매 가능하고, 매출이 많으면 기부도 많이 하세요..^^)
일부 수업 영상은 음질이 균일하지 않은 점, 수강 시 참고 부탁드립니다.
학습 대상은
누구일까요?
Three.js 및 JS 기초만 하는 것 보다, 실무에 바로 적용 가능한 소스를 기반으로 학습하고 적용 발전하고 싶으신 분
3D는 모든 분야에 적용 가능하며, 최근 유행중인 Metabus, Digital Twin, AR, VR, ML, DL 등의 시각화 분야로 차별화를 원하는 엔지니어
일반적인 FE(Front-End)툴 만으로는 더 이상 차별화가 어렵다고 느끼시는 분
선수 지식,
필요할까요?
JS, Three.js 기초가 있으면 좋아요. 없다면 고생스럽지만 불가능하지 않습니다. 리버스 엔지니어링 패턴인 역공학 방식으로 이미 수준있는 완성 모듈을 역으로 해석 및 이해하는 방법론도 있습니다.
오랜 시간 동안 기술 변화에 맞추면서 보낸 시간이 많아, 이제 보유한 기술과 경험을 초,중급분들께 미약하지만 제 기술을 제공해서 빠르게 성장하는데 함께하고 싶습니다.
DB Modeling, C/S & Web 풀-스택 개발자
유튜브 https://www.youtube.com/channel/UCBiU3IgXYAQHK1tUMXq3isQ
-.Mono-Repo (Turbo: "^2.3.4"), FCM(Firebase Cloud Message), WebHook, Redis, MQTT
-. MUI-X, Material-UI 등 Next & React 생태계 UI
-.OCR(Naver), RIMS, Popbill, SNS Login(Google,Naver,Kakao)
-.Js, Vue/Nuxt (VueX, Pinia), AngularJS, React/Next (Redux,Zustand,Recoil), Svelt,
D3, Three (WebGL), C2i: 청와대 납품 BI 차트, echarts, Vuetify, Quasar, Telerick(Progress)
IndexedDB & SqlLite, css, scss, sass, Tailwind, Bootstrap...
-.Leaflet.js, Cesium.js, 다음 & 네이버 지도
-.WebRTC & WebSocket, MQTT, Silverlight(C#) & ASP.Net
-.Node, Nest, Spring Boot, Docker, Git, pm2
-.AWS, Azure, nCloud(Naver)
-.Oracle, PostgreSQL, MySQL, MariaDB, MS-SQL, MongoDB(mongoose), InfluxDB, Supabase
-.Python, Numpy/Scipy, Jupyter, Django(DRF: Django Rest Framework)/Flask,
-.TensorFlow, Keras, ScikitRun, LangChain
-.씨티-와우(City-Wow): 국토,국방,공공 및 병원,제조기업 등 3D 시뮬레이션 및
실시간 모니터링 서비스 ('23.10 ~ 현재; Three, Vanila.js)
-.씨유(SeeU): 업종별 화상 채팅 서비스(병원, 제조..)(구글-밋 + 크로마키, STT & TTS Chatting)
('23.02 ~ 23.10; WebRTC, WebSocket, Vue3 & Pinia, Quasar, Node, MySQL)
-.서베이-와우(Survey-Wow): 구글-폼, MS-폼 , 네이버-폼 설문 결과를 간단하게 분석하고
공유하는 데이터 분석 웹 서비스 ('22.03 ~ 23.01; Vue2 & VueX, Quasar, Node, MySQL)
-.데이터-와우(Data-Wow): xls, json,csv , API 연동 등 공공 데이터 자동 분석 시각화
('22.01 ~ 22.12; Vue2 & VueX, Vuetify, Node, MongoDB) - 행안부 공공데이터 포상
-.DDMV(Data-Dam Multi-Dimensional Vis-): 데이터-댐 다차원 탐색적 시각화 분석서비스
('20.01 ~ 20.08; Vue2 & VueX, Vuetify, Node, MongoDB) - 인천시 공공데이터 포상
-.씨투아이(C2i: Chart Inteiiligence Insights) 차트 컴포넌트: 차트 갤러리 메뉴
BI 기반 차트 (with D3.js): '15.04 ~ 현재 ; D3.js(v3.3 ~ v7.9) 기반의 BI 패턴의 차트 솔루션
(문재인 정부 일 자리 대시보드 청와대 납품, 몽골 재정관리 국책 프로젝트 남품. 다국어 지원)
-.(주)캐주얼-인사이트 (Casual-Insights) CTO
-.전 KISTI 연구원
-.전 LG-CNS Oracle Modeler, DBA & 선임 연구원
-.전 극동(현대) 정유 전산실 사원
**. 데이터 댐 다차원 시각화-.종합 소개(필수) : https://youtu.be/noZ9H7wftsI
-.소비상권-I(필수 : 백화점 매장 포스 데이터 - 일반 제조 유통업체) : https://youtu.be/ArL-Pv3U-40 -.소비/상권-II (한국 KDX, 식신 데이터 제공): https://youtu.be/Wcpu29gI53Y
-.보건의료 (한국 KDX, 온누리H&C 데이터 제공): https://youtu.be/I8WBqAFp9L4-
.공공 데이터 (경기 화성 시청 공공 데이터 제공) : https://youtu.be/2QCw_6aeRVE
*.D3 & ThreeJS 차트 갤러리 :https://gregory-han.github.io/chart/
전체
35개 ∙ (17시간 32분)
해당 강의에서 제공:
1. 전체 강의 소개
28:04
2. 강의 목표 및 산출물
11:32
3. 강의 준비물 및 초기 설정
11:50
4. 프로젝트 폴더 구성
02:40
5. 기본 따라 해보기
06:15
7. 샘플 뷰 by Blender
03:35
8. 최종 폴더 및 화일 생성
02:21
같은 분야의 다른 강의를 만나보세요!
인프런 썸머 블랙프라이데이 할인 중 (5일 남음)
₩38,500
30%
₩55,000