Page History
...
Pencil Creator 랜딩 페이지 — 두 개의 데모 카드가 디자이너 친화적인 크림톤 UI로 배치되어 있다.
3. 실제로 어떻게 보이나
백 마디 설명보다 한 번 보는 것이 낫다. Four Seasons 데모 페이지에서 실제로 구현된 애니메이션 일부를 소개한다.
...
각 데모에는 WPF XAML 원본 코드가 함께 표시되어, “이 웹 애니메이션이 어떤 WPF 정의에서 변환되었는지”를 바로 확인할 수 있다. 일부 데모에는 인터랙티브 슬라이더가 있어서, 꽃잎 개수나 낙하 속도 같은 파라미터를 실시간으로 조절해 볼 수 있다.
3.2 Sample 00: 벚꽃 파티클 놀이터
Cherry Blossom Petal Fall 데모. 슬라이더로 꽃잎 개수, 낙하 속도, 바람 표류를 실시간 조절할 수 있다. 하단에는 이 애니메이션의 원본 WPF XAML 코드가 함께 표시된다. QuadraticEase로 자연스러운 가속 낙하를, RotateTransform으로 회전하는 꽃잎을 구현했다.
3.3 Sample 01: 사계절 WPF 쇼케이스
Four Seasons Animation Showcase 히어로 영역. 보라빛 그라데이션 배경 자체가 ColorAnimation + GradientStop으로 구현된 WPF 기법이다. Spring, Summer, Autumn, Winter 네 계절 버튼으로 36개 데모를 탐색할 수 있다.
Summer 섹션의 인터랙티브 UI 컴포넌트들. Floating Label, ComboBox, Toggle Switch 같은 실무에서 바로 쓸 수 있는 데이터 입력 컨트롤부터, Snackbar Toast, Progress Bar, Badge Counter 같은 피드백 컴포넌트, Ripple Button, Accordion 같은 인터랙티브 요소까지 — 각 카드 하단에 WPF 애니메이션 속성이 한 줄로 요약되어 있어 디자이너와 개발자가 동일한 언어로 소통할 수 있다.
3.4 WPF → Web 변환의 실제
WPF의 애니메이션 속성이 웹에서 어떻게 대응되는지, 몇 가지 예를 보면:
...