typing-me


한글 자모 분해를 지원하는 React 타이핑 효과 라이브러리입니다. 실제 키보드로 타이핑하는 것처럼 초성, 중성, 종성이 순차적으로 조합되는 자연스러운 애니메이션을 제공합니다.

특징

- 한글 자모 단위 타이핑 효과 (ㅇ → 아 → 안 → 안ㄴ → 안녀 → 안녕)
- 복합 모음/자음 점진적 조합 (ㅗ → ㅘ, ㄱ → ㄳ)
- 영문, 숫자, 특수문자 지원
- 커서 깜빡임 애니메이션
- 루프, 일시정지, 콜백 기능
- React 17+ 호환

설치

``bash
npm install typing-me
`

`bash
yarn add typing-me
`

`bash
pnpm add typing-me
`

사용법

$3

`tsx
import { TypingMe } from 'typing-me';

function App() {
return 안녕하세요;
}
`

$3

`tsx
import { TypingMe } from 'typing-me';

function App() {
return (
speed={100}
delay={500}
cursor={true}
cursorChar="_"
loop={true}
loopDelay={3000}
onStart={() => console.log('타이핑 시작')}
onComplete={() => console.log('타이핑 완료')}
>
반갑습니다

);
}
`

$3

`tsx
import { TypingMe } from 'typing-me';

function App() {
return (
as="h1"
className="title"
style={{ color: 'blue', fontSize: '2rem' }}
>
환영합니다

);
}
`

$3

`tsx
import { useTypingMe } from 'typing-me';

function App() {
const { text, isTyping, isComplete, pause, resume, reset } = useTypingMe(
'안녕하세요',
{
speed: 80,
loop: false,
onComplete: () => console.log('완료'),
}
);

return (



);
}
`

API

$3

| Prop | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| children | string | (필수) | 타이핑할 텍스트 |
| speed | number | 80 | 타이핑 속도 (ms) |
| delay | number | 0 | 시작 전 대기 시간 (ms) |
| cursor | boolean | true | 커서 표시 여부 |
| cursorChar | string | \| | 커서 문자 |
| cursorBlinkSpeed | number | 500 | 커서 깜빡임 속도 (ms) |
| loop | boolean | false | 무한 반복 여부 |
| loopDelay | number | 2000 | 반복 전 대기 시간 (ms) |
| deleteSpeed | number | speed / 2 | 삭제 속도 (ms) |
| paused | boolean | false | 일시정지 상태 |
| onStart | () => void | - | 타이핑 시작 시 콜백 |
| onComplete | () => void | - | 타이핑 완료 시 콜백 |
| onCharacter | (char: string, index: number) => void | - | 문자 타이핑 시 콜백 |
| as | keyof JSX.IntrinsicElements | span | 렌더링할 HTML 요소 |
| className | string | - | CSS 클래스 |
| style | React.CSSProperties | - | 인라인 스타일 |

$3

| 옵션 | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| speed | number | 80 | 타이핑 속도 (ms) |
| delay | number | 0 | 시작 전 대기 시간 (ms) |
| loop | boolean | false | 무한 반복 여부 |
| loopDelay | number | 2000 | 반복 전 대기 시간 (ms) |
| deleteSpeed | number | speed / 2 | 삭제 속도 (ms) |
| onStart | () => void | - | 타이핑 시작 시 콜백 |
| onComplete | () => void | - | 타이핑 완료 시 콜백 |
| onCharacter | (char: string, index: number) => void | - | 문자 타이핑 시 콜백 |

$3

| 반환값 | 타입 | 설명 |
|--------|------|------|
| text | string | 현재 표시 중인 텍스트 |
| isTyping | boolean | 타이핑 진행 중 여부 |
| isDeleting | boolean | 삭제 진행 중 여부 |
| isComplete | boolean | 타이핑 완료 여부 |
| pause | () => void | 타이핑 일시정지 |
| resume | () => void | 타이핑 재개 |
| reset | () => void | 처음부터 다시 시작 |

한글 타이핑 원리

typing-me는 한글의 조합 특성을 활용하여 실제 타이핑처럼 보이는 효과를 구현합니다.

$3

한글 음절은 초성, 중성, 종성으로 분해됩니다:

`
"안" → ㅇ → 아 → 안
"녕" → ㄴ → 녀 → 녕
`

$3

복합 모음(ㅘ, ㅙ, ㅚ, ㅝ, ㅞ, ㅟ, ㅢ)은 점진적으로 조합됩니다:

`
"화" → ㅎ → 호 → 화
"쉬" → ㅅ → 수 → 쉬
`

$3

복합 종성(ㄳ, ㄵ, ㄶ, ㄺ, ㄻ, ㄼ, ㄽ, ㄾ, ㄿ, ㅀ, ㅄ)도 점진적으로 조합됩니다:

`
"삶" → ㅅ → 사 → 살 → 삶
"읽" → ㅇ → 이 → 일 → 읽
`

$3

"안녕"을 타이핑할 때의 시퀀스:

`
ㅇ → 아 → 안 → 안ㄴ → 안녀 → 안녕
`

유틸리티 함수

라이브러리에서 제공하는 유틸리티 함수도 직접 사용할 수 있습니다:

`tsx
import {
generateTypingSequence,
generateDeletingSequence,
isHangul,
isJamo,
decompose,
compose,
} from 'typing-me';

// 타이핑 시퀀스 생성
const sequence = generateTypingSequence('안녕');
// ['ㅇ', '아', '안', '안ㄴ', '안녀', '안녕']

// 한글 여부 확인
isHangul('가'); // true
isHangul('a'); // false

// 자모 여부 확인
isJamo('ㄱ'); // true
isJamo('가'); // false

// 한글 분해
decompose('한'); // { cho: 18, jung: 0, jong: 4 }

// 한글 조합
compose(18, 0, 4); // '한'
``

라이선스

MIT