글 목록 애니메이션 구현

동기

인터랙션 디자인 기술을 공부하던 중, rauno의 프로젝트 페이지를 발견했습니다. 여기서 각 프로젝트를 렌더링할 때 사용되는 애니메이션 효과가 저에게 시각적으로 너무나 매력적으로 다가왔습니다.

이를 구현해보고 싶었고 이 애니메이션을 재현하는 과정과 그 과정에서 얻은 통찰, 그리고 직면한 도전 과제들을 공유하고자 합니다. 생각보다 디테일이 많이 들어간 애니메이션이었고 그만큼 구현하고 나서 해냈다는 보람이 커서 좋았습니다. :)

애니메이션 이해하기

이 애니메이션의 핵심은 점진적 문자 변환입니다. 각 문자가 무작위 문자에서 최종 문자로 순차적으로 변환되면서 자연스러운 타이핑 효과를 만들어냅니다:

첫 번째 시도

랜덤한 문자를 위해 jh3y-GRLKMPY의 GLYPHS 변수를 사용했습니다:

const GLYPHS = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ0123456789±!@#$%^&*()_+ABCDEFGHIJKLMNOPQRSTUVWXYZ';

각 요소(제목, 설명, 연도)의 텍스트를 문자열 배열로 변환하고, 각 문자를 GLYPHS에서 무작위로 선택한 문자로 대체하는 과정을 각 프레임마다 반복했습니다. 하지만 결과적으로 나온 애니메이션은 부자연스러워 보였습니다:

애니메이션 개선

추가 연구 끝에 Shuffle Text Effect With jQuery에서 영감💡을 얻어 몇 가지 중요한 통찰을 얻었습니다.

자연스러운 애니메이션을 위한 핵심 원칙

첫 번째 시도에서 부자연스러웠던 이유를 분석해보니 다음과 같은 원칙들이 중요했습니다:

1. 문자 유형 일관성 (Character Type Consistency)

각 문자의 원본 특성을 유지하면서 변환해야 합니다:

• 영어 소문자 → 영어 소문자 랜덤 생성
• 한글 → 한글 랜덤 생성
• 숫자 → 숫자 랜덤 생성
• 특수문자 → 특수문자 랜덤 생성

이렇게 해야 사용자의 눈이 “비슷한 형태”로 인식해서 자연스럽게 느껴집니다.

2. 공백 문자 보존 (Whitespace Preservation)

공백과 줄바꿈은 변환하지 않고 그대로 유지해야 텍스트의 구조가 깨지지 않습니다.

3. 최적의 타이밍 (Optimal Timing)

• iterations: 각 문자당 몇 번의 랜덤 변환을 거칠지 (기본값: 8)
• fps: 초당 몇 번 업데이트할지 (기본값: 30)

이 값들을 실험해볼 수 있는 자그마한 데모를 만들었습니다:

다양한 텍스트와 설정값을 시도해보면서 자연스러운 애니메이션을 만드는 원리를 이해할 수 있습니다:

한글 처리

한글 문자 생성에서 마주한 도전은 문자 집합의 크기였습니다:

문제 상황

• 영어: 소문자 26개, 대문자 26개 → 간단한 배열로 처리 가능
• 한글: 가능한 조합이 11,172개 → 배열로 저장하기엔 너무 방대함

유니코드 기반 해결책

완성형 한글은 유니코드에서 연속된 구간이므로 배열 대신 계산으로 생성합니다. 영어·숫자·특수문자는 작은 문자 풀에서 뽑고, 한글만 코드포인트 계산으로 만듭니다:

type CharType = 'space' | 'lowerCase' | 'upperCase' | 'digit' | 'symbol' | 'korean';
 
const charPools = {
  lowerCase: 'abcdefghijklmnopqrstuvwxyz',
  upperCase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  digit: '0123456789',
  symbol: '!@#$%^&*()_+-=[]{}|;:,.<>?',
};
 
function getRandomCharacterForType(charType: CharType): string {
  // 한글은 '가'(0xAC00)부터 연속된 11,172개 중 하나를 계산으로 생성
  if (charType === 'korean') {
    return String.fromCharCode(0xac00 + Math.floor(Math.random() * 11172));
  }
 
  const pool = charPools[charType];
  return pool[Math.floor(Math.random() * pool.length)];
}

한글 문자 감지 로직

한글 감지도 같은 원리입니다. 코드포인트가 연속 구간 안에 있는지 범위 비교 한 번으로 판별합니다:

function isKorean(char: string): boolean {
  const code = char.charCodeAt(0);
  return code >= 0xac00 && code <= 0xd7a3; // '가' ~ '힣'
}

애니메이션 구현하기

이제 자연스럽게 변환되는 애니메이션을 구현해 보겠습니다.

const charsArray = Array.from(element.textContent ?? '');
 
// 위치별 문자 유형
const charsTypes = charsArray.map(char => {
  if (/\s/.test(char)) return 'space';
  if (isKorean(char)) return 'korean';
  if (/[a-z]/.test(char)) return 'lowerCase';
  if (/[A-Z]/.test(char)) return 'upperCase';
  if (/[0-9]/.test(char)) return 'digit';
  return 'symbol';
});
 
// 공백을 제외한, 애니메이션 대상 인덱스 목록
const charsPositions = charsArray.reduce<number[]>((acc, char, index) => {
  if (!/\s/.test(char)) acc.push(index);
  return acc;
}, []);
 
// 입력이 "Hi 월드 1"이라면:
// charsArray     → ['H', 'i', ' ', '월', '드', ' ', '1']
// charsTypes     → [대문자, 소문자, 공백, 한글, 한글, 공백, 숫자]
// charsPositions → [0, 1, 3, 4, 6]

function renderStep(step: number) {
  const result = [...charsArray]; // 항상 원본에서 시작
 
  for (let i = Math.max(step, 0); i < charsPositions.length; i++) {
    const pos = charsPositions[i];
    if (i < step + iterations) {
      result[pos] = getRandomCharacterForType(charsTypes[pos]); // ② 끓는 중인 구간
    } else {
      result[pos] = ''; // ③ 아직 도달하지 않은 구간
    }
  }
  // i < step인 위치는 복사본 그대로 → ① 원본으로 안정화된 구간
 
  element.textContent = result.join('');
}

const stepDuration = 1000 / fps; // step 하나가 차지하는 시간(ms)
let step = -iterations; // 음수에서 시작해 첫 글자도 같은 횟수만큼 끓도록
let lastStepTime: number | null = null;
let rafId: number;
 
function tick(now: number) {
  // now: 브라우저가 매 프레임 전달하는 타임스탬프
  if (lastStepTime === null) lastStepTime = now;
 
  const elapsed = now - lastStepTime;
  if (elapsed >= stepDuration) {
    // 프레임 드랍으로 누락된 step은 한 번에 따라잡는다
    step = Math.min(step + Math.floor(elapsed / stepDuration), charsPositions.length);
    lastStepTime = now - (elapsed % stepDuration);
    renderStep(step); // 마지막 step은 원본 전체를 복원
 
    if (step >= charsPositions.length) {
      onComplete(element);
      return; // 다음 프레임을 예약하지 않으면 루프 종료
    }
  }
 
  rafId = requestAnimationFrame(tick);
}
 
renderStep(step);
rafId = requestAnimationFrame(tick);
 
return () => cancelAnimationFrame(rafId); // cancel — 호출 시 애니메이션 중단

최종 결과와 성능 최적화

모든 개선사항을 적용한 최종 애니메이션입니다:

프로덕션 레벨 최적화

실제 사용을 위해 추가로 구현한 최적화 기법들:

1. 성능 최적화

• 인터섹션 옵저버 활용: useInView 훅으로 뷰포트에 보이는 요소만 애니메이션 실행
• rAF 기반 스케줄링: 여러 요소가 동시에 셔플돼도 DOM 변경이 프레임 경계에 정렬되고, 백그라운드 탭에서는 자동 정지
• 메모리 관리: 컴포넌트 언마운트 시 cancel 함수로 예약된 프레임을 정리해, 분리된 DOM을 계속 변경하는 누수 방지
• 배치 업데이트: step당 textContent 1회 변경으로 DOM 조작 최소화

2. 사용자 경험 개선

• ESC 키 중단: 진행 중인 애니메이션을 언제든 중단 가능
• 즉시 복원: 중단 시 원본 텍스트로 즉시 복원
• 상태 관리: isAnimating 상태로 중복 실행 방지

3. 시각적 완성도

• 선 애니메이션: scaleX 변환으로 왼쪽에서 오른쪽으로 자연스럽게 확장
• 투명도 조절: opacity 값으로 부드러운 페이드인 효과
• 타이밍 튜닝: 적절한 iterations, fps 값 설정

실제 사용 흐름

shuffleLetters는 시작과 동시에 cancel 함수를 반환합니다. 컴포넌트가 언마운트될 때 cancel을 호출해 진행 중인 애니메이션을 정리하세요:

const cancel = shuffleLetters(element, {
  iterations: 8, // 글자당 끓는 횟수
  fps: 30, // step 전진 속도
  onComplete: el => {
    // 완료 시 처리
  },
});
 
// 라우트 이동 등으로 컴포넌트가 언마운트될 때
cancel();

회고와 배운 점

기술적 성과

rauno의 텍스트 애니메이션을 재현하면서 생각했던 것보다 재밌게 고민할 수 있던 부분이 많았습니다. 특히:

1. 자연스러운 애니메이션을 위한 문자 유형별 일관성 구현
2. 한글 처리를 위한 유니코드 활용

개발 과정에서의 인사이트

• 첫 시도의 부자연스러움 → 문자 유형 분류의 필요성 발견
• 한글 문자 → 효율적인 유니코드 기반 해결책 도출
• 단순한 랜덤 교체 → 파도 효과를 통한 시각적 완성도 향상
• 글 목록에서 요소 수십 개 동시 실행 → setTimeout 체인의 프레임 비정렬 한계 발견, rAF 타임스텝으로 전환

이 작업을 통해 기술적 구현과 디자인적 완성도 사이의 균형을 맞추는 것이 얼마나 중요한지 다시 한번 느낄 수 있었습니다.

연구할수록 자연스러워지는 애니메이션 동작을 볼 때마다 보람찼고, 최종적으로 원하던 결과를 얻어 좋았습니다.

참고 자료

• rauno-projects
• georapbox-shuffle-lettersjs