이번에 구현해 볼 것은 한글 타이핑 효과이다. 영어라면 글자 타이핑 효과를 css 애니메이션과 키프레임을 통해 나타낼 수도 있지만... 한글의 경우 타이핑 할 때 자음 모음 이런 게 조합되어서 나오다 보니 조금 부자연스럽다. (다음에는 css와 키프레임을 통해 표현하는 방법도 포스팅해 보겠다..)
그래서 조금 찾아보니 한글 타이핑을 구현한 라이브러리가 있었다. 자바스크립트로 되어있었고, 이걸 리액트에서 사용하기 위해서 useEffect를 활용해 코드를 완성해 보도록 하겠다.
아래의 사이트가 제작자의 사이트이다.
https://sduck4.github.io/type-hangul/
type-hangul: ⌨️ 한글 타이핑 효과 라이브러리
한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러리입니다.
sduck4.github.io
아무튼 라이브러리를 사용하기 위해서 cdn을 이용할 건데 어떻게 하면 될지 알아보도록 하겠다.
1. CDN 사용하기
먼저 index.html 파일의 body내에 cdn을 추가해 준다.
<body>
...
<!--라이브러리 경로-->
<script src="https://unpkg.com/hangul-js"></script>
<script src="https://unpkg.com/type-hangul@latest/dist/type-hangul.min.js"></script>
<!--라이브러리 경로 끝-->
...
</body>
그러면 라이브러리는 불러와진다. 물론 스크립트를 직접 다운로드 받아서 불러오는 방법도 있다.
2. type-hangul 사용하기
2-1. 기본사용
이제 Hangul이라는 컴포넌트를 만들어 줄 것이다. src폴더에 Hangul 폴더를 생성하고 그 안에 Hangul.tsx 파일을 생성한다. 그런 다음 useEffect를 사용해서 한글 타이핑을 구현해 보도록 하겠다.
Hangul.tsx 파일에 아래의 코드를 입력한 다음 App.tsx에서 불러와 사용하면 되겠다.
import { useEffect, useState } from 'react';
import styled from "styled-components";
declare global {
interface Window {
TypeHangul: any
}
}
const Hangul = () => {
useEffect(() => {
window.TypeHangul.type('#target1')
})
return <div id='target1'>한글 타이핑 테스트 입니다.</div>
}
export default Hangul
cdn에서 불러온 스크립트를 사용하기 위해서는 window 객체를 사용해서 TypeHangul을 불러오도록 한다. 그러면 아래처럼 정상 작동하는 모습이 보인다.
2-1. 타이핑 효과 주기
그런데 뭔가 조금 밋밋하다. 텍스트를 입력하면 보통 세로줄이 있는데 여기에는 구현이 안되어있고 또 뭔가 입력할 때 속도가 딱딱하게 느껴진다. 여기서 조금 css를 추가해서 나타내 보도록 하겠다.
import { useEffect, useState } from 'react'
import styled, { keyframes } from 'styled-components'
declare global {
interface Window {
TypeHangul: any
}
}
const blinkingCursor = keyframes` 50% {
opacity:0;
}
`
const Hangul = () => {
useEffect(() => {
window.TypeHangul.type('#target1', {
intervalType: 100,
humanize: 0.5,
})
})
return <Target1 id='target1'>한글 타이핑 테스트 입니다.</Target1>
}
const Target1 = styled.div`
&:after {
content: '|';
right: 0;
animation: ${blinkingCursor} 0.8s infinite;
}
`
export default Hangul
코드를 보면 먼저 해당 라이브러리는 Typehangul.type(selector, [, options]) 이렇게 되어있는데 저 options 항목에 타이핑 사이 시간 간격과 실제 사람이 타이핑하는 것처럼 속도를 랜덤화 하는 옵션 등 여러 옵션이 있다.
자세한 내용은 공식 홈페이지 문서를 확인하고 여기서 해당 옵션을 사용해서 타이핑 속도를 사람처럼 표현할 수 있다.
다음으로 styled component를 활용해서 keyframe을 통해 세로줄이 나타나고 깜빡이는 효과를 구현할 수 있다.
아래는 구현된 화면이다.
추가로 일반적인 방법(br태그라던지..)으로 줄 바꿈을 할 수 있는 방법이 따로 없는 것 같다. 그래서 다음 포스팅에 줄 바꾸는 방법에 대해 작성해 보도록 하겠다.
'프론트엔드 개발 > React' 카테고리의 다른 글
| [React] framer motion으로 스크롤 애니메이션 구현하기 (1) | 2024.10.01 |
|---|---|
| [React] 카카오 지도 API 연동하기 (TS + Vite) (2) | 2024.09.02 |
| [React] D-Day 계산하기 (typescript) (0) | 2024.08.28 |
| [React] 갤러리 화면에서 이미지 모달창 기능 구현하기(Typescript) (0) | 2024.08.09 |
| [React] 간단한 갤러리 화면 구현하기(Typescript) (0) | 2024.08.08 |
