[ThreeJs] 개인 포트폴리오 제작기 #1

// 이 포트폴리오는 개발하는 정대리님의 유튜브 영상을 참고하여 제작하였습니다.

 

 

 

 

이번에 vite를 통해 포트폴리오 사이트를 배포했습니다.

'최대한 많은 기술들을 사용해보고 수많은 오류를 경험해보자!' 라는 생각으로 프로젝트에 다양한 기술들을 사용해봤습니다.

NextJs, ThreeJs, NotionAPI,TypeScript,Tailwind 등 많은 기술들을 사용해봤습니다.


그 중에 가장 신기하고 인터렉티브한 경험을 준 ThreeJs에 대해 이야기해볼까합니다.

 

Three.js 가 뭘까요??

 

Three.js는 3D 그래픽을 생성하고 렌더링하기 위한 JavaScript 라이브러리로, 

웹 브라우저에서 강력하고 직관적인 3D 그래픽을 개발할 수 있게 도와주는 역할을 합니다.


ThreeJs에는 다양한 요소들이 있는데,

기본적으로 카메라(camera), 씬(scene), 조명(lighting), 랜더러(renderer)등이 있습니다.

이 외에도 텍스쳐, 지오메트리, 애니메이션 같은 요소들도 있습니다.

Three Js를 왜 사용했을까요??

포트폴리오 초안 모습

 

 

개발하는 정대리님의 포트폴리오를 따라 제작하고 난 뒤,

'내가 봐도 딱딱해보이는데.. 나에 대해 궁금해서 방문한 다른 사람들의 호기심, 흥미를 유지시킬 수 있을까?' 라는 생각을 갖게 되었습니다.

다른 프론트엔드 개발자분들은 어떻게 사람들의 마우스가 창닫기로 안가게 만들었을까? 그 호기심으로 많은 정보를 찾아봤습니다.

잘 만든 사이트, 유저를 붙잡아둘 수 있는 명분이 있는 페이지는 공통적으로 사용자의 호기심을 자극하고 있었습니다.

전 제 포트폴리오에 사용자와 호기심을 자극할 수 있는 무기로 평면적인 화면에 입체를 더해주는 ThreeJs를 선택했습니다.

 

 

 

Three Js를 어떻게 사용했을까요??

 

기존에 있던 lottiePlayer를 제거하고

ThreeJs를 사용하여 3D computer 모델을 렌더링하고 애니메이션으로 카메라 이동을 넣어봤습니다.

기존에 딱딱하고 평면적으로 보였던 페이지가 threeJs를 통해 좀더 입체적이고 인터랙티브하게 보이게 되었습니다.

 

computer gltf 렌더링

 

 

이에 더해,  background에도 threeJs를 사용하여 마우스 스크롤 이벤트를 인지하고 카메라 위치의 동적변화를 넣어봤습니다.

페이지의 스크롤을 따라 배경이 움직이는 요소는 확실히 재미있는 요소로 다가왔습니다.

 

 

스크롤에 따라 카메라 이동

 

 

이렇게 사용자와 상호작용할 수 있는 요소를 하나하나 늘려나갔습니다.

이 threeJs를 적용해보며 '왜 이 기술을 사용했지?' 라는 생각을 갖는 것이 얼마나 좋은지 배울 수 있었습니다.


현재는 3D computer model을 제외시키고 또 다른 마우스 상호작용 요소를 넣어놨습니다.

완성된 포트폴리오는 아래 링크를 올려둘테니 관심있으시면 방문하셔서 확인해보시고

남기고 싶으신 의견이 있다면 페이지 하단에 연락요소로 많은 피드백과 응원 부탁드립니다!





주니어 프론트엔드 개발자 장찬영 포트폴리오 :

https://next-portfolio-delta-virid.vercel.app/

 

프론트엔드 장찬영 포트폴리오

 

 

 

긴 글 읽어주셔서 감사합니다.