typing-me

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

특징

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

설치

npm install typing-me

yarn add typing-me

pnpm add typing-me

사용법

기본 사용

import { TypingMe } from 'typing-me';

function App() {
  return <TypingMe>안녕하세요</TypingMe>;
}

옵션 설정

import { TypingMe } from 'typing-me';

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

스타일 적용

import { TypingMe } from 'typing-me';

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

Hook 사용

import { useTypingMe } from 'typing-me';

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

  return (
    <div>
      <p>{text}</p>
      <button onClick={pause} disabled={!isTyping}>일시정지</button>
      <button onClick={resume}>재개</button>
      <button onClick={reset}>처음부터</button>
    </div>
  );
}

API

TypingMe Props

| 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 | - | 인라인 스타일 |

useTypingMe Options

| 옵션 | 타입 | 기본값 | 설명 | |------|------|--------|------| | 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 | - | 문자 타이핑 시 콜백 |

useTypingMe Return

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

한글 타이핑 원리

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

기본 분해

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

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

복합 모음

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

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

복합 종성

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

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

전체 예시

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

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

유틸리티 함수

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

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