[Project, React] 타이핑 효과 적용하기

자기소개 웹 사이트를 구현할 때는 너무 과한 애니메이션을 넣는 것은 안 좋다고 들었기에 최대한 애니메이션을 생각하지 않고, 단순한 웹 구현을 하였다.

 

하지만 내가 구현한 웹사이트의 홈 화면은 나의 소개 멘트와 카메라 밖에 없었기 때문에 아무리 카메라의 크기가 크더라도, 무언가 비어보였다. 그래서 도입하려고 한 효과는 바로 타이핑 효과이다!   

 

💡타이핑 효과는 아래와 GIF처럼 키보드를 통해 실시간으로 타이핑하는 듯한 효과를 주는 것이다. 

출처: https://giphy.com/

 

 

다른 사람들이 만든 웹사이트를 구경해보면서 많이 보았던 효과이다. 너무 정적인 것 같은 나의 자기 소개 웹페이지의 Home 페이지에 타이핑 효과르 넣어줌으로써 생동감 있고, 동적이게 보일 것 같아 채택하였다. 

 

👏 타이핑 효과를 적용해보자!

 

1. 직접 구현하기

 

직접 구현하는 방법에 대해 조사해보니 어렵지 않고, 비교적 구현이 간단해보여 시도해보았다.

 

참고자료: https://hyoe-it.tistory.com/35

 

먼저, useState를 이용해 필요한 변수, 상태값을 선언한다.

1. 타이핑을 효과를 적용할 텍스트
2. 화면에 나올 텍스트 값을 담은 text 상태 값
3. 문자열이 다 출려되었음을 확인할 count 상태값

const IntroduceText = "안녕하세요. 프론트엔드 개발자 김민정입니다.";
const [text, setText] = useState("");
const [count, setCount] = useState(0);

 

그 후, useEffect를 통해서 타이핑 효과를 적용했다.

useEffect(() => {
  const interval = setInterval(() => {
    setText(text + IntroduceText[count]);
    setCount(count + 1);
  }, 100);
  if (count === IntroduceText.length) {
    clearInterval(interval);
  }
  return () => clearInterval(interval);
});

 

구현 결과는 다음과 같았다. 

 

 

라이브러리를 사용할 땐 문자열을 모두 출력 후, 다시 원상복구 되는 기능이 있었는데, 

직접 구현을 하고나니 내가 원했던 동작처럼 모두 출력을 한 후, 동작하지 않고 멈췄다.

 

그래서 내가 직접 구현한 코드를 들고 가야겠다~~생각하였다.

 

😭 하지만 문제가 발생하였다.

 

setInterval를 통해 100ms만큼의 인터벌 시간을 지정하여, 100ms마다 해당 콜백함수가 동작하게 하는 것이 전체적인 동작과정이다. 하지만 콜백함수가 실행되어 text와 count의 상태 값이 변화하면서 화면을 새로 재 렌더링 된다.

따라서 hover은 일시적으로 작업이 멈추고, 그 순간에 일시적으로 마우스 이벤트가 감지되지 못하는 것이다. 

 

따라서 setInterval를 통해 콜백 함수 내에서 상태 값을 업데이트하면, 새롭게 업데이트되어 재렌더링 될 때마다 순간적으로 작업 블로킹이 되는 것이다.

 

결국 이러한 이유로 원할한 마우스 이벤트 감지를 위해 라이브러리의 사용을 채택하였다.

 

2. Typewriter-effect

 

처음에 타이핑 효과를 react에 적용시키는 방법에 관해 구글링 해보았을 때 가장 먼저 발견했고, 간단해보였던 방식은 

"typewriter-effect" 라이브러리를 사용한 것이다. 

사용법도 굉장히 간단해보였기에 바로 사용해보았다!

 

💠사용 방법

먼저 typewriter-effect를 설치한 후, 

npm i typewriter-effect

 

해당 라이브러리로부터 Typewriter 컴포넌트를 import 한다. 

import Typewriter from 'typewriter-effect';

 

공식 문서를 통해 option에 원하는 효과를 넣어주면 된다. 

공식문서 : https://www.npmjs.com/package/typewriter-effect

<Typewriter
  options={{
     strings: ["안녕하세요. 프론트엔드 개발자 김민정입니다."],
     autoStart: false,
     loop: false,
     wrapperClassName: "text-5xl ml-l mb-28 Black tracking-widest",
  }}
/>

💡TIP 💡
만약 tailwind CSS를 사용 시 wrapperClassName이라는 속성을 통해 className으로 CSS 지정이 가능하다.

 

😭 하지만 문제가 발생하였다.

구현 도중 한 가지 문제가 생겼다. 그것은 한 번 시작하고 타이핑이 완료된 후에는 다시 글자가 지워지는 것이었다. 

 

 

아무리 라이브러리를 보아도, stop option을 통해 수동적으로 멈추는 방법만 존재할뿐, string이 모두 완성되면 자동으로 stop이 되지 않았다.

 

이 부분에 대해서는 아직 해결방안이 나지 못했다. 라이브러리를 사용할 경우 setInterval을 사용했을 때의 이벤트 감지 문제가 발생하지 않기 때문에 라이브러리에서 loop를 돌려 지웠다 썼다의 동작을 반복하도록 구현해두었다.

 

이 부분에 대해서는 최대한으로 구현한 결과와 내가 생각한 동작과 맞지 않아 아쉬운 부분도 있지만, setInterval을 사용과 블로킹 문제에 대해 공부할 수 있었다. 잃은 것도 있지만 얻는 것도 있기 때문에 긍정적으로 생각해보겠다.. 😭😭 😭😭

 

 

 

 

📚참고 자료

https://velog.io/@wejaan/event-loop