Page History
| Table of Contents | ||
|---|---|---|
|
| Info |
|---|
한줄 요약 — 디자이너가 상상한 애니메이션이 개발자의 코드를 만나면 왜 어색해질까? Pencil Creator는 WPF 애니메이션 정의를 Pencil 디자인 파일과 연결하여, 디자이너의 의도가 코드로 정확히 전달되는 파이프라인을 제공한다. 아직 걸음마 단계이지만, “재사용 가능한 애니메이션 설계 시스템”이라는 방향성만은 분명하다. 대상 독자: 디자이너 & 프론트엔드 개발자 | 작성 기준: 2026-03 | GitHub | Live Demo |
...
왜 이런 일이 반복될까? 근본 원인은 세 가지다.
| 문제 | 디자이너 관점 | 개발자 관점 |
|---|---|---|
| 수치 부재 | “톡톡 튀는 느낌으로” | “cubic-bezier(?, ?, ?, ?) 값이 뭐죠?” |
| 도구 불일치 | Figma의 easing preset은 CSS preset과 다름 | Figma Code 패널은 색상/간격만 내보내고 애니메이션 로직은 빠짐 |
| 어휘 격차 | “스냅피하게”, “바운시한 진입” | “키프레임 보간, 인터폴레이터, 렌더 성능” |
이 간극은 디자인 시스템이 성숙해도 쉽게 메워지지 않는다. 색상과 타이포그래피는 디자인 토큰으로 표준화되었지만, 애니메이션만큼은 여전히 “감”으로 전달되고 “감”으로 구현되는 영역으로 남아 있다.
...
Pencil Creator의 워크플로우는 세 가지 케이스(Case)로 나뉜다.
| 케이스 | 입력 | 출력 | 하는 일 |
|---|---|---|---|
| Case A 템플릿 보강 | 웹에서 WPF 예제 조사 | 애니메이션 카드 + .xaml 파일 | 새로운 애니메이션 기법을 조사하고 재사용 가능한 카드로 만든다 |
| Case B 프로젝트 설계 | 템플릿 카드 참조 | 정적 디자인 + 애니메이션 가이드 | 실제 프로젝트에 어떤 기법을 어디에 적용할지 설계한다 |
| Case W 웹 구현 | .pen 파일 + .xaml 참조 | HTML/CSS/JS | 설계된 애니메이션을 웹으로 변환한다 |
이 세 단계가 분리되어 있다는 점이 중요하다. Case A에서 만든 애니메이션 카드는 여러 프로젝트에서 재사용된다. 특정 프로젝트를 위해 만들고 버리는 것이 아니라, 라이브러리처럼 계속 쌓인다.
...
현재 wpf-animation.pen 파일에는 12개 카테고리, 40개 이상의 애니메이션 기법 카드가 정리되어 있다.
| 카테고리 | 예시 기법 | 활용 장면 |
|---|---|---|
| 데이터 입력 컨트롤 | Floating Label, Toggle Switch | 폼 입력 UX |
| 피드백 & 알림 | Snackbar Toast, Progress Bar | 사용자 피드백 |
| 내비게이션 | Page Transition, Tab Slide, Hamburger Morph | 화면 전환 |
| 장식 & 배경 | Gradient Background, Floating Particles | 시각적 풍부함 |
| 3D 변환 | Flip Card, Morphing Shape, Elastic Spring | 인터랙티브 요소 |
| 텍스트 & 순차 | Typewriter, Marquee, Staggered List | 콘텐츠 등장 |
| 인터랙티브 UI | Ripple Button, Accordion, Tooltip | 사용자 인터랙션 |
| 데이터 시각화 | Skeleton Shimmer, Circular Progress | 로딩 & 차트 |
| 자연 파티클 | Cherry Blossom Fall, Petal Scatter | 감성적 효과 |
각 카드에는 Before → After 시각 미리보기, XAML 코드 스니펫, 적용 대상 속성 설명이 포함된다. 디자이너는 시각적으로 어떤 움직임인지 확인하고, 개발자는 정확한 수치를 코드에서 가져갈 수 있다.
...
각 케이스마다 3축 100점 평가가 자동으로 실행된다.
| 케이스 | 축 1 | 축 2 | 축 3 |
|---|---|---|---|
| Case A (조사) | 리서치 신규성 (35점) | 시각화 표현력 (35점) | 기술 메타 완결성 (30점) |
| Case B (설계) | 요구사항 커버리지 (35점) | 애니메이션 가이드 풍부성 (35점) | 디자인 품질 & 분리 (30점) |
| Case W (구현) | 디자인 커버리지 (35점) | 애니메이션 충실도 (35점) | 독창적 확장 (30점) |
솔직히 지금 단계에서 이 평가가 완벽하다고 말하기는 어렵다. 하지만 “자동 검수가 존재한다”는 것 자체가 의미 있다. 평가 규칙이 마음에 들지 않으면 제거하거나 수정할 수 있고, 프로젝트가 성숙해지면 규칙도 함께 진화한다. v2.0에서 v2.2까지 세 번의 하네스 업그레이드가 이미 이루어졌다 — “.pen 파일만으로는 정밀도가 부족하다”는 관찰에서 “.pen + .xaml 이중 참조 필수”로 기준이 강화된 것이 대표적인 예다.
...
백 마디 설명보다 한 번 보는 것이 낫다. Four Seasons 데모 페이지에서 실제로 구현된 애니메이션 일부를 소개한다.
3.1 데모 구성: 사계절 테마
| 계절 | 카테고리 | 대표 기법 |
|---|---|---|
| 봄 | 자연 파티클, 장식 효과 | Cherry Blossom Fall, Floating Particles, Pulsing Glow |
| 여름 | 데이터 입력, 피드백, 인터랙티브 | Floating Label, Snackbar Toast, Ripple Button |
| 가을 | 내비게이션, 경로, 데이터 시각화 | Page Transition, Parallax Layers, Skeleton Shimmer |
| 겨울 | 3D 변환, 텍스트, 축제 | Flip Card 3D, Typewriter Text, Confetti Burst |
각 데모에는 WPF XAML 원본 코드가 함께 표시되어, “이 웹 애니메이션이 어떤 WPF 정의에서 변환되었는지”를 바로 확인할 수 있다. 일부 데모에는 인터랙티브 슬라이더가 있어서, 꽃잎 개수나 낙하 속도 같은 파라미터를 실시간으로 조절해 볼 수 있다.
...
WPF의 애니메이션 속성이 웹에서 어떻게 대응되는지, 몇 가지 예를 보면:
| WPF | Web 구현 |
|---|---|
DoubleAnimation TargetProperty="Y" | CSS transform: translateY() |
ScaleTransform | CSS transform: scale(x, y) |
RotateTransform | CSS transform: rotate(deg) |
SineEase EaseInOut | CSS ease-in-out |
ElasticEase | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
RepeatBehavior="Forever" | CSS animation-iteration-count: infinite |
| Canvas 파티클 시스템 | requestAnimationFrame + Canvas API |
모든 구현은 외부 라이브러리 없이 순수 HTML/CSS/JS로 이루어진다. 바닐라로 작성되어 있어 어떤 프레임워크에든 통합할 수 있다.
...