패스트캠퍼스 환급챌린지 20일차 미션 (2월 20일) : 초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas 강의 후기

오늘은 이어서 Part3 [Three.js]의 Chapter04 인터렉티브 카드 강의를 들었습니다.(09~10강)

 

그럼 오늘 강의에서 배운 내용들과 느낀점을 간략하게 작성해 볼게요!

 

🔎01. 카드 색상 변경 버튼 추가하기

오늘은 위 이미지처럼 색상 버튼을 클릭하면 애니메이션이 실행되면서 카드 색상이 변경되는 효과를 추가해보았습니다.

우선 main.js에서 컬러 배열을 추가해주시고, 카드 객체의 기본색도 컬러배열의 첫번째 값으로 변경해주었습니다.

  const COLORS = ["#ff6e6e", "#31e0c1", "#006fff", "#ffd732"];
  const card = new Card({
    width: 10,
    height: 15.8,
    radius: 0.5,
    color: COLORS[0],
  });

 

컬러 리스트 UI를 만들기위해 index.html에 하단 코드를 추가하고

    <div class="container"></div>

container 요소에 색상별 버튼을 추가하기 위해 main.js에서 아래 코드를 추가해주었습니다.

  const container = document.querySelector(".container");

  COLORS.forEach((color) => {
    const button = document.createElement("button");
    button.style.backgroundColor = color;
    container.append(button);
  });

이렇게하면 아래 화면처럼 좌측 상단에 4개의 색상버튼이 추가된 것을 확인할 수 있는데요, css 코드를 추가해서 좀더 예쁘게 보이도록 수정해보겠습니다. button에 추가된 리셋 css는 아래 사이트에서 복붙해왔습니다.

https://gist.github.com/MoOx/9137295

reset-button.css

.container {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 16px;
}
.container button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.container button:not(:first-child) {
  margin-left: 16px;
}
button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;

  background: transparent;

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
}

 

그리고 버튼이 클릭되면 색상이 변경될 수 있게 클릭 이벤트를 추가해줍니다. 이때도 저번강의 처럼 'mesh'의 material 속성에서 color값을 변경해주시면 됩니다.

 button.addEventListener("click", () => {
      card.mesh.material.color = new THREE.Color(color);
    });

 

이렇게 코드를 작성하고 나면 아래와 같은 결과물을 확인하실 수 있습니다.

 

🔎02. GSAP을 이용한 애니메이션 구현

카드가 돌아가는 애니메이션을 추가하기위해 강의에서는 GSAP 라이브러리를 사용했습니다.

아래처럼 패키지를 설치해 주시고 main.js에서 gsap을 import 해주세요

npm install gsap

import { gsap } from 'gsap';

gsap에서는 to 메서드를 사용해서 애니메이션 효과를 추가할 수 있습니다. 첫번째 인자로 대상객체를 두번째 인자로 애니메이션 옵션을 추가해주세요. 강의에서는 y축 기준으로 시계방향으로 2바퀴 회전할 수 있도록 아래 코드를 추가하였습니다.

*위 내용에 대한 자세한 설명은 하단에 추가해두었습니다!

  gsap.to(card.mesh.rotation, {y:-Math.PI * 4})

자세한 내용은 하단 문서를 참고해주세요

https://gsap.com/docs/v3/GSAP/gsap.to()

gsap.to() | GSAP | Docs & Learning

그리고 부드러운 애니메이션을 위해 duration과 ease함수 속성을 추가해주었습니다.

  gsap.to(card.mesh.rotation, {
    y: -Math.PI * 4,
    duration: 2.5,
    ease: "back.out(2.5)",
  });

Ease 관련 자세한 내용은 아래 문서를 확인해주세요!
https://gsap.com/resources/getting-started/Easing

Easing | GSAP | Docs & Learning

마지막으로 카드를 클릭할 때에도 애니메이션이 적용되게 코드를 수정하였습니다.

    button.addEventListener("click", () => {
      card.mesh.material.color = new THREE.Color(color);
      gsap.to(card.mesh.rotation, {
        y: card.mesh.rotation.y - Math.PI / 2, // 현재 회전각도를 기준으로 90도 만큼 돌아가게
        duration: 1,
        ease: "back.out(2.5)",
      });
    });

 

✨오늘의 결과물

 

gsap을 들어보기는 했으나,,사용해본적이 없어서 애니메이션 주는 부분이 좀 헷갈렸던 것 같습니다. gsap 문서에서는 to 메서드의 첫번째 값으로 클래스명을 넘기는 것 같은데 강의에서는 mesh의 rotation 속성을 넘기고 있어서 첫번째 인자의 타입이 궁금해져 찾아보았습니다.

target 파라미터로 클래스명이나 아이디값을 넘기면 GSAP 내부에서 셀렉터에 맞는 요소를 반환하는 메서드를 사용하고, 그외로 직접 요소나 객체, 객체 배열을 넘길 수 있다고합니다. card.mesh.rotation은 Three.js에서 사용되는 Euler 객체이며, 이 객체는 x, y, z 세 개의 속성을 가지고 있습니다. 따라서 gsap.to의 첫 번째 인자로 전달된 객체는 x, y, z 속성을 가진 객체이고, gsap이 이 값을 두번째 파라미터에 맞게 변경함에 따라 물체에 애니메이션이 적용될 수 있었습니다!

https://threejs.org/docs/index.html?q=mesh#api/en/math/Euler

three.js docs

애니메이션을 사용할 일이 있을 때 기본 css(transition, keyframe) 가 아닌 라이브러리를 사용할 경우 보통 framer-motion이나 react transition group을 사용했고 react-spring, animated 를 한 두번 사용해본 경험이 있는데 이번 강의를 통해 새로운 라이브러리를 하나 알아간 것 같습니다.  찾아보니 요소들이 연달아 움직이는 동작들의 속도, 가속, 감속, 경로등을 모두 세세하게 설정할 수 있어서 많은 개발자들에게 각광받는 라이브러리라고하네요..! 제가 자주 사용하는 react에서도 useGSAP이라는 이름의 Hook으로 사용할 수 있을 것 같구요.

 

(찾아보니 js 프레임워크에 구애받지 않는 라이브러리라고 하네요 호오..)

https://gsap.com/resources/React/

React & GSAP | GSAP | Docs & Learning

다음 프로젝트에서는 Gsap을 사용해서 애니메이션을 적용해봐야겠습니다 ㅎㅎ

(p.s GSAP이 'GreenSock Animation Platform'의 약자라는데, 초록양말이 도대체 무슨의미일까요..?)

✨오늘의 학습 인증 샷

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://fastcampus.co.kr/event_online_challenge_2401_mission

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스

https://bit.ly/48sS29N