[javascript] Storybook과 자바스크립트 애니메이션 효과 구현

27 Nov 2023

javascript

Storybook은 웹 개발자들에게 UI 컴포넌트를 테스트하고 문서화하는 툴입니다. 이제 Storybook을 사용하여 자바스크립트 애니메이션 효과를 구현하는 방법에 대해 알아보겠습니다.

Storybook 설정

Storybook을 사용하기 위해 먼저 프로젝트에 Storybook을 설치해야 합니다. 아래 명령어를 사용하여 설치할 수 있습니다.

npm install -g @storybook/cli

설치가 완료되면 프로젝트 폴더에서 아래 명령어를 실행하여 Storybook을 설정할 수 있습니다.

npx sb init

이제 프로젝트에 Storybook이 설정되었습니다. src 폴더 내에 .stories.js 파일을 생성하여 각 컴포넌트의 스토리를 작성할 수 있습니다.

애니메이션 효과 구현

애니메이션 효과를 구현하기 위해 자바스크립트 라이브러리를 사용할 수 있습니다. 여기서는 anime.js 라이브러리를 사용하여 예시를 작성하겠습니다.

먼저, 프로젝트에 anime.js를 설치합니다.

npm install animejs

다음으로, 애니메이션을 적용할 컴포넌트를 작성합니다.

import React from 'react';
import anime from 'animejs';

export default function AnimatedButton() {
  const handleClick = () => {
    anime({
      targets: '.button',
      translateX: 250,
      duration: 1000,
      easing: 'easeInOutQuad'
    });
  };

  return (
    <button className="button" onClick={handleClick}>
      Click Me
    </button>
  );
}

위의 예시 코드에서는 anime() 함수를 사용하여 버튼을 클릭하면 translateX 속성을 250px 만큼 애니메이션으로 이동시킵니다. duration 속성은 애니메이션의 시간을 조절하고, easing 속성은 애니메이션의 속도 곡선을 조절합니다.

이제 스토리 파일에 컴포넌트를 추가하고 Storybook에서 확인해보세요.

import React from 'react';
import { storiesOf } from '@storybook/react';
import AnimatedButton from './AnimatedButton';

storiesOf('Components', module).add('AnimatedButton', () => <AnimatedButton />);

마무리

이제 Storybook을 사용하여 자바스크립트 애니메이션 효과를 구현하는 방법을 알아보았습니다. Storybook을 통해 컴포넌트의 동작을 시각화하고 테스트할 수 있으므로 개발자들에게 매우 유용한 도구입니다.