기본 개념과 장점

Segment.js는 SVG의 <path> 요소를 사용해 선형 애니메이션을 생성하고 제어할 수 있도록 도와주는 가벼운 자바스크립트 라이브러리입니다. 이 도구는 경로의 일부만을 점차적으로 그려내는 방식으로, 마치 선이 '그려지는 것'처럼 보이게 하는 시각 효과를 제공합니다. 특히 D3.js의 다양한 easing 함수 와 결합하면 자연스럽고 다이나믹한 움직임을 구현할 수 있습니다.

설치 및 준비

먼저 프로젝트를 로컬에 복제하거나 직접 스크립트를 포함하세요:

<script src="https://cdn.jsdelivr.net/npm/d3-ease@1.0.1/dist/d3-ease.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/segment@latest/dist/segment.min.js"></script>

기초 사용법: 기본 경로 애니메이션 설정

HTML에서 다음과 같이 경로를 정의합니다:

<svg width="500" height="200">
  <path id="animated-line"
        d="M10 100 C 40 200, 130 200, 160 100 S 280 0, 310 100 S 430 200, 460 100"
        stroke="#3498db"
        stroke-width="12"
        fill="none" />
</svg>

JavaScript로 애니메이션을 시작합니다:

const pathElement = document.getElementById('animated-line');
const animator = new Segment(pathElement);

animator.draw('20%', '80%', 1.5, {
  easing: d3.easeCubicOut,
  delay: 0.3,
  callback: () => console.log('애니메이션이 완료되었습니다.')
});

고급 옵션: 맞춤형 애니메이션 제어

다음은 다양한 애니메이션 특성을 조절할 수 있는 예시입니다:

• 시작 위치: 문자열 형식("15%") 또는 픽셀 값("40px") 가능
• 종료 위치: 전체 길이의 일부 또는 특정 지점
• 지연 시간: 애니메이션 시작 전 대기 시간
• 이징 함수: D3.js에서 제공하는 다양한 보간 함수 사용 가능

예시: 유연한 이징 적용

animator.draw(
  '0%',
  '100%',
  2,
  {
    easing: d3.easeElasticInOut(0.5, 0.5),
    delay: 0.5,
    callback: () => {
      console.log('경로 그리기가 완료됨');
    }
  }
);

지원되는 이징 함수 목록 (D3.js 기반)

• d3.easeLinear – 일정 속도로 진행
• d3.easeQuadIn – 서서히 시작
• d3.easeCubicOut – 서서히 멈춤
• d3.easeSinInOut – 부드러운 진동 효과
• d3.easeBounceOut – 튀는 느낌
• d3.easeElasticIn – 탄성 반사 효과

주요 메서드 안내

실제 활용 사례

• 데이터 시각화에서 데이터 흐름 표현
• 로딩 화면에서 아이콘 그리기 애니메이션
• 스크롤 감지 기반의 경로 동작 (Scroll-triggered animation)
• 인터랙티브 지도에서 경로 이동 시각화
• 버튼 클릭 시 경로가 점차 나타나는 효과

Segment.js는 최소한의 코드로 강력한 시각적 피드백을 제공하며, 특히 D3.js와의 호환성 덕분에 고급 애니메이션을 쉽게 구현할 수 있습니다.