ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko en en en en ko en nb en ko ko zh ko en ko ko ko ko ko ko ko fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#02 Three 설치하는 방법(Cdn, npm, boilerplate, webpack) – Three.js 강좌 | 디자인베이스
안녕하세요. three.js를 사용하기 위해서 필요한 파일들을 설치해서 사전 준비를 하는 시간입니다. three.js를 다운로드해서 사용하는 방법은 크게 3가지가 있어요. 직접 파일을 설치하는 방법, NPM으로 설치하는 방법, 마지막은 보일러 플레이트를 활용하는 방법입니다. 이 세 가지 방법을 다 알려드릴 텐데, 여러분이 편하신 방법으로 사용하시면 됩니다. 근데 저는 맨 마지막을 기준으로 설치한 환경으로 이번 three.js 강좌를 끝까지 진행할 예정이니까 참고 부탁드립니다. 추가로 알아두면 좋은 개념은 Webpack, 터미널 사용법, Git clone 입니다. (설치가 조금 복잡할 수 있지만, 이번 영상까지만 참으면 됩니다..!)
*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
npm이란, node package manager의 약자로 말그대로 node.js 개발자분들이 패키치 설치 및 관리를 쉽게 도와주는 관리 도구입니다. 그래서 node.js를 먼저 설치를 해줘야합니다.
사실상 웹사이트가 만들어질때는 지금 배우려는 three.js외에도 html,css, js, sass, gsap 등 다양한 언어나 라이브러리를 혼합해서 사용하기 때문에, 웹 최적화를 위해 webpack을 사용하는 것을 추천드립니다.
웹팩이라는건 자바스크립트 정적 모듈 번들러라고 하는데요, 다양한 파일을 Static한 에셋으로 컴파일할 때 사용하는 도구입니다.
작업 효율을 위해 사용한 다양한 자바스크립트 오픈소스나 Sass 등 을 실제 웹사이트에 배포할때는 최적화된 파일로 변환해서 만들어야하는데 그때 도움이 되는 것이 바로 웹팩입니다.
기초 골격을 통으로 찍어내는 플레이트로 매번 반복적인 코드를 짤 필요없이 최소한의 기본 구조를 제공한 코드를 말합니다. 즉, 시작하기 딱 좋게 코드를 만들어 준 소스를 boilerplate라고 합니다.
디자이너 입장에서 보면, 무료나 스톡 에셋을 다운받고, 포토샵 + 플러그인을 설치해주는 단계라고 생각해주면 편합니다. 이 과정에서 필요한 지식은 필요할때마다 공부하시면 됩니다!
이번 THREE.js 강좌에서는 three.js를 webpack 환경에 맞게 세팅되어 있는 웹팩 전용 보일러 플레이트를 설치 해주고 활용할 예정입니다.
#2 뒤로가기 히스토리 100단계로 늘리는 방법 – 포토샵 꿀팁
#9 프로퍼티 개념 완벽하게 이해하기 – 프로토파이 강좌
11. 자와 가이드로 그리드 만들기 – 일러스트레이터 기초 강좌
디자인 입문자가 꼭 참고해야 할 사이트
디자이너에게 가장 힘든 클라이언트 유형은?
클릭 한 번으로 웹사이트 화면 캡쳐뜨는 방법(크롬 확장 프로그램)
서피스 프로 isometric 뷰 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.