[Svelte 시리즈 9편] 전환과 애니메이션으로 리듬 만들기

구조가 갖춰졌다면 이제 움직임으로 집중도를 조절할 차례입니다. 짧고 명확한 전환은 정보의 우선순위를 눈으로 느끼게 만듭니다.

이번 글에서 새로 나오는 용어

1. 전환(transition): 요소가 나타나거나 사라질 때 적용하는 애니메이션으로 transition:fly처럼 붙여 씁니다.
2. animate
   : 리스트가 재정렬될 때 각 항목의 위치를 자연스럽게 바꿔 주는 Svelte 내장 지시자입니다.
3. 모션 스토어: 숫자 값을 부드럽게 보간하는 특수 스토어로 spring 함수가 대표적입니다.
4. 스프링 파라미터: stiffness, damping 값으로 움직임 탄성과 감속을 조절하는 숫자입니다.

개념

전환(transition)은 요소가 나타나고 사라질 때의 움직임입니다. transition:fade, transition:fly 같은 지시자를 쓰면 등장과 퇴장을 동시에 제어할 수 있습니다. 애니메이션(animation)은 이미 화면에 있는 요소가 위치나 크기를 바꾸는 움직임입니다. animate:flip이 대표 예시입니다. 모션 스토어는 숫자 값을 부드럽게 보간해 주는 특수 스토어입니다. spring 함수가 값을 천천히 따라가도록 만들어 커서 추종이나 그래프 이동에 적합합니다.

코드

패널 토글, 리스트 재정렬, 스프링 모션을 한꺼번에 살펴봅니다.

<script>
  import { fade, fly } from 'svelte/transition';
  import { flip } from 'svelte/animate';
  import { spring } from 'svelte/motion';

  let isOpen = false;
  let items = [
    { id: 1, name: '알고리즘', score: 87 },
    { id: 2, name: 'UI 설계', score: 93 }
  ];

  const pointer = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });

  function sortByScore() {
    items = [...items].sort((a, b) => b.score - a.score);
  }
  function move(x, y) {
    pointer.set({ x, y });
  }
</script>

<button on:click={() => (isOpen = !isOpen)}>알림 패널</button>
{#if isOpen}
  <aside transition:fly={{ x: 40, duration: 200 }}>
    <p transition:fade>다음 일정</p>
  </aside>
{/if}

<button on:click={sortByScore}>점수순 정렬</button>
<ul animate:flip>
  {#each items as item (item.id)}
    <li>{item.name} — {item.score}</li>
  {/each}
</ul>

<div class="pointer" style:transform={`translate(${$pointer.x}px, ${$pointer.y}px)`}></div>
<button on:click={() => move(120, 20)}>메뉴</button>
<button on:click={() => move(280, 160)}>콘텐츠</button>

조건부 블록에 있는 패널은 열고 닫을 때마다 fly와 fade가 동시에 적용됩니다. 리스트는 animate:flip 덕분에 재정렬 시 위치를 자연스럽게 바꿉니다. 마지막으로 spring 스토어가 pointer 위치를 따라가며 부드러운 추종 움직임을 만들어 줍니다.

왜 중요한가

학교 행사 관리 앱이나 실험 프로젝트에서 데이터를 자주 새로 고쳐 보여줄 때, 갑자기 값이 바뀌면 사용자가 헷갈립니다. 짧은 전환은 어떤 영역이 바뀌었는지 알려 주고, 리스트 애니메이션은 순위 변경을 시각적으로 강조합니다. 또 스프링 모션을 사용하면 그래프나 포인터가 자연스럽게 이동해 학습 자료를 보여줄 때 집중도가 높아집니다.

실습

• 따라 하기: 위 예제를 작성해 패널 전환, 리스트 재정렬, 포인터 이동을 모두 실행해 본다.
• 확장하기: animate:flip 리스트에 필터 버튼을 추가해 항목이 사라졌다가 다시 나타나는 흐름을 만든다.
• 디버깅: 효과가 보이지 않으면 {#if} 블록과 each 블록에 키가 있는지, 지시자가 올바른 요소에 붙었는지 확인한다.
• 완료 기준: 세 가지 움직임이 각각 200ms 안팎의 길이로 부드럽게 실행된다.

마무리

전환과 애니메이션은 정보를 강조하기 위한 도구입니다. 필요할 때만 짧게 적용하면 레이아웃과 데이터 흐름을 해치지 않고 리듬을 만들 수 있습니다. 다음 편에서는 폼 액션과 검증을 다뤄 전환된 흐름을 깨지 않는 UX를 이어가겠습니다.