Page History

Image Modified

1. WPF Blend — MS의 디자이너-개발자 협업 도구

...

WPF의 ResourceDictionary 체계는 스타일, 템플릿, 애니메이션을 별도 파일로 분리하여 프로젝트 전체에서 재사용할 수 있게 합니다. 이 메커니즘 덕분에 WPF 생태계에는 수십 년간 축적된 방대한 애니메이션 패턴 라이브러리가 존재합니다 — MaterialDesignInXAML, MahApps.Metro, WPF UI(Fluent) 등이 대표적입니다.

• 서치과정중 발견한 xaml 파일은 Blend for Studio를 이용해 애니메이션을 구현전에 확인및 조정할수도 있습니다.
  • 이 툴을 잘다룬다고하면 애니메이션을 정의하고 펜슬로 변환도 가능

...

2. Pencil — AI 시대의 디자인 협업

...

WPF 애니메이션을 조사하여 Pencil 디자인 카드로 시각화하는 작업을 3축으로 평가합니다:

Case W 평가: Pencil → HTML

Pencil에서 설계한 애니메이션을 실제 HTML/CSS/JS로 구현할 때의 품질을 측정합니다:

왜 셀프 업그레이드 방식인가

Figma 커뮤니티나 유료 애니메이션 라이브러리(LottieFiles, ProtoPie 등)를 구매하는 것도 방법입니다. 하지만 우리가 선택한 접근은 다릅니다:

...

...

4. 완성된 37개 애니메이션 템플릿 — 11개 카테고리 갤러리

두 차례의 조사→구현 사이클을 통해 11개 카테고리, 37개 WPF 애니메이션 컴포넌트를 Pencil 디자인 카드로 완성했습니다.

카테고리 전체 목록

...

#

...

카테고리

...

컴포넌트 수

...

대표 기법

아래는 Pencil에서 익스포트한 각 카테고리의 프레임 이미지와 컴포넌트 소개입니다.

원본 —

...

원본

WPF Blend Animation Ideas (5개)

...

5

...

Glass Button, Sidebar, Spinner, Panel, Color Control

...

⊕1

...

Data Input Controls

...

3

...

Floating Label, ComboBox, Toggle Switch

...

⊕2

...

Feedback & Notification

...

3

...

Toast, Progress Bar, Badge Pop

...

⊕3

...

Navigation & Transitions

...

3

...

Page Transition, Tab Slide, Hamburger Menu

...

⊕4

...

Decorative & Background

...

3

...

Gradient BG, Particles, Pulsing Glow

...

⊕5

...

3D Transform & Shape Morph

...

3

...

Flip Card 3D, Morphing Shape, Elastic/Spring

...

⊕6

...

Path & Trajectory

...

3

...

Path Follower, Parallax, Drag & Drop

...

⊕7

...

Text & Sequential

...

3

...

Typewriter, Marquee Ticker, Staggered List

...

⊕8

...

Interactive UI Controls

...

3

...

Ripple Button, Accordion, Animated Tooltip

...

⊕9

...

Data Visualization & Loading

...

3

...

Skeleton Shimmer, Circular Progress, Bar Chart

...

⊕10

...

Ambient & Decorative FX

...

3

...

Wave Ripple, Breathing Pulse, Marching Ants

...

⊕11

...

Celebration & Advanced

...

3

...

Confetti Burst, Zoom/Pinch, Animated Tooltip

Image Added

최초 조사에서 확보한 5개 핵심 애니메이션 패턴입니다. Glass Effect Button(MouseEnter 시 투명 오버레이 페이드인), Animated Sidebar Menu(ToggleButton으로 Width 65→230px 전환), Rotating Loading Spinner(RotateTransform 무한 회전), Sliding Expandable Panel(TranslateTransform 슬라이드), Color-Animated Content Control(ColorAnimation으로 상태별 색상 전환). 이 5개가 전체 라이브러리의 출발점이 되었습니다.

CAT1 — Data Input Controls 데이터 입력 컨트롤 (3개)

Image Added

사용자 입력 시 발생하는 마이크로 인터랙션입니다. Floating Label TextBox(포커스 시 라벨이 위로 올라가며 축소 + 색상 변화), Animated ComboBox(드롭다운 ScaleY 0→1 펼침 + Opacity 페이드), Material Toggle Switch(노브 TranslateX 이동 + 트랙 색상 전환). 폼 UI의 완성도를 높이는 필수 애니메이션들입니다.

CAT2 — Feedback & Notification 피드백 & 알림 (3개)

Image Added

시스템 상태를 사용자에게 전달하는 패턴입니다. Snackbar/Toast(하단에서 슬라이드 업 + 3초 후 자동 퇴장), Animated Progress Bar(Indeterminate 슬라이딩 + Value 기반 스무스 필), Badge Counter Pop(값 변경 시 Scale 1→1.3→1.0 ElasticEase 바운스). 사용자 피드백 UX의 기본기입니다.

CAT3 — Navigation & Transitions 네비게이션 & 전환 (3개)

Image Added

화면 간 이동의 자연스러움을 담당합니다. Page/Content Transition(Old=왼쪽 슬라이드아웃+페이드, New=오른쪽 슬라이드인), Tab Control Slide(방향에 따른 좌/우 슬라이드 + Opacity 0.3→1), Hamburger→X Morph(3줄 아이콘의 RotateTransform + TranslateTransform으로 X자 변환). SPA 네비게이션에 직접 적용 가능합니다.

CAT4 — Decorative & Background 장식 & 배경 (3개)

Image Added

페이지의 분위기를 결정하는 배경 효과입니다. Animated Gradient BG(GradientStop 색상/오프셋 순환 + AutoReverse), Particle/Floating Dots(다수 Ellipse의 staggered 부유 애니메이션), Pulsing Glow Effect(DropShadowEffect BlurRadius/Opacity 호흡 펄스). 랜딩페이지의 시각적 임팩트를 크게 높입니다.

CAT5 — 3D Transform & Shape Morph (3개)

Image Added

2차 조사에서 새로 도입한 3D 변환 패러다임입니다. Flip Card 3D(ScaleTransform.ScaleX 1→-1 + 90° 지점에서 Visibility 교체), Morphing Shape(BezierSegment의 PointAnimation으로 사각형→원형 보간), Elastic/Spring(ElasticEase Oscillations=3으로 오버슈트 바운스). 기존 카테고리에 없던 완전히 새로운 차원의 애니메이션입니다.

CAT6 — Path & Trajectory 경로 & 궤적 (3개)

Image Added

오브젝트의 이동 궤적을 다루는 패턴입니다. Path Follower(DoubleAnimationUsingPath로 베지어 곡선 따라 이동 + DoesRotateWithTangent), Parallax Scrolling(배경/중경/전경 3개 레이어에 각각 0.2x/0.5x/1.0x 속도 적용), Drag & Drop(마우스 추적 TranslateTransform + 놓을 때 BounceEase 스냅백). 공간감과 인터랙션 깊이를 더합니다.

CAT7 — Text & Sequential 텍스트 & 순차 (3개)

Image Added

텍스트와 리스트의 등장 연출입니다. Typewriter Text(StringAnimationUsingKeyFrames로 한 글자씩 타이핑 + 깜빡이는 커서), Marquee Ticker(TranslateTransform.X를 캔버스 너비만큼 무한 루프), Staggered List Entrance(ItemContainerStyle에서 BeginTime을 인덱스×0.05s로 오프셋하여 순차 등장). 콘텐츠 발견 경험을 극적으로 개선합니다.

CAT8 — Interactive UI Controls 인터랙티브 컨트롤 (3개)

Image Added

사용자 조작에 즉각 반응하는 컨트롤입니다. Ripple Effect Button(클릭 지점에 Ellipse 스폰 + ScaleTransform 0→50 확산 + Opacity 페이드), Accordion Sections(LayoutTransform ScaleY로 레이아웃 리플로우 + 화살표 RotateTransform 180°), Animated Tooltip(Opened 이벤트 시 Opacity+TranslateY 슬라이드인 + DropShadowEffect). Material Design 느낌의 풍부한 피드백을 제공합니다.

CAT9 — Data Visualization & Loading 데이터 시각화 (3개)

Image Added

데이터를 시각적으로 전달하는 패턴입니다. Skeleton Shimmer(LinearGradientBrush의 GradientStop.Offset을 -1→2로 스위핑하는 로딩 플레이스홀더), Circular Progress(Ellipse의 StrokeDashOffset으로 원형 진행률 표시 + RotateTransform -90°로 12시 시작), Animated Bar Chart(Rectangle.Height를 0→목표값까지 staggered BeginTime으로 캐스케이드). 대시보드 UI에 필수적인 데이터 애니메이션입니다.

CAT10 — Ambient & Decorative FX 앰비언트 효과 (3개)

Image Added

배경의 생동감을 더하는 고급 효과입니다. Wave Ripple BG(ShaderEffect HLSL로 sin(X×Frequency)×Amplitude 물결 + Phase 애니메이션), Breathing Pulse(ScaleTransform 1.0→1.15 AutoReverse + SineEase로 유기적 호흡), Marching Ants Border(StrokeDashOffset 0→6 무한 애니메이션으로 선택 영역 표시). 섬세한 디테일이 전문성을 보여줍니다.

CAT11 — Celebration & Advanced 축하 & 고급 (3개)

Image Added

특수 상황의 연출 효과입니다. Confetti Burst(Canvas에 다수 Rectangle 스폰 + 랜덤 색상/회전/속도 + 중력 KeyFrames), Zoom/Pinch(MouseWheel.Delta로 ScaleTransform 스무스 줌 + CubicEase 300ms), Animated Tooltip(ToolTip.Opened 이벤트 기반 Opacity+TranslateY 진입 + DropShadow). 사용자 경험의 감성적 완성도를 높이는 고급 기법입니다.

...

디자인 카드 구조

각 컴포넌트는 동일한 카드 형식으로 설계되어 있습니다:

1. 번호 + 제목 (JetBrains Mono, cyan 악센트)

2. WPF 속성 설명 (핵심 Animation/Transform/Easing 정보)

3. 시각적 미리보기 (Before → After 상태 전환)

4. XAML 코드 스니펫 (핵심 속성 2줄)

...

5. 실전 적용 —

...

노리의 여행 에필로그 홈페이지

Image Removed

축적한 애니메이션 템플릿의 실전 활용을 검증하기 위해, “AICC 전화상담 도입” 테마의 랜딩페이지를 “여행하는 노리의 에필로그” 테마의 개인 홈페이지를 제작했습니다. Pencil 디자인 파일을 참조하여 가능한 한 많은 컴포넌트와 애니메이션 효과를 적용하는 것이 목표였습니다.

...

파일의 22개 애니메이션 이펙트를 하나의 페이지에 적용하는 것이 목표였습니다.

Hero — 첫인상의 모든 것

Image Added

첫 화면에서 6가지 이펙트가 동시에 작동합니다: Animated Gradient BG(배경 그라디언트 흐름), Floating Particles(컬러 파티클 25개 부유), Rotating Spinner(3중 회전 링), Pulsing Glow(“노리” 이름 펄스), Typewriter Text(여행 문구 타이핑), Glass Effect Button(CTA 2종).

About — 아코디언과 컬러 필

Image Added

Accordion Sections(CAT8)로 자기소개를 3단 접기/펼치기로 구현하고, Color-Animated Pills(CAT1)로 스킬 태그가 자동 순환하며 하이라이트됩니다. 스크롤 시 Scroll Reveal과 Elastic/Spring(CAT5) 진입 애니메이션이 적용됩니다.

Travels — 3D 플립 카드

Image Added

Flip Card 3D(CAT5)가 핵심입니다. 4개 여행지 카드에 마우스를 올리면 Y축 180° 회전하며 뒷면의 여행 스토리가 나타납니다. CSS perspective + backface-visibility로 구현했으며, Elastic/Spring 진입 애니메이션과 결합됩니다.

Gallery — 순차 등장 그리드

Image Added

Staggered List Entrance(CAT7)로 6개 사진 카드가 스크롤 시 순차적으로 등장합니다. IntersectionObserver로 뷰포트 진입을 감지하고, 각 아이템에 index×80ms 지연을 적용하여 캐스케이드 효과를 만듭니다.

Statistics — 원형 차트와 바 차트

Image Added

데이터 시각화 카테고리(CAT9)의 3가지를 모두 적용했습니다: Circular Progress(SVG stroke-dashoffset으로 원형 진행률 4개), Animated Bar Chart(대륙별 방문 횟수 5개 바 캐스케이드), Parallax Scrolling(CAT6, 배경 레이어 0.15x 속도 차이).

Journey — 타임라인 슬라이드

Image Added

Sliding Expandable Panel(원본 CAT)을 타임라인에 적용했습니다. 각 연도 아이템이 스크롤 시 왼쪽에서 슬라이드인하며, 색상이 다른 Breathing Pulse(CAT10) 도트가 시간의 흐름을 표현합니다.

Contact — 플로팅 라벨과 축하 효과

Image Added

Floating Label TextBox(CAT1)로 3개 입력 필드를 구현하고, 전송 시 Toast/Snackbar(CAT2)가 우하단에서 슬라이드인합니다. 동시에 Confetti Burst(CAT11)가 60개 컬러 파티클을 터뜨려 축하 효과를 연출합니다.

적용된 22개 애니메이션 매핑

11개 카테고리 중 9개 카테고리의 이펙트가 단일 페이지에 적용되었습니다. 기존 원본(4개) + CAT1~11에서 18개를 활용하여 총 22개 애니메이션이 자연스럽게 통합됩니다13개 이펙트를 단일 페이지에 적용한 결과, Pencil에서 정적으로 설계한 애니메이션 의도가 실제 CSS/JS 애니메이션으로 충실하게 변환될 수 있음을 확인했습니다.

...

애니메이션 리소스는 사서 쓰는 것만이 답이 아닙니다. WPF라는 거인의 어깨 위에 서서, AI와 함께 디자인하고, 하네스로 평가하면 — 스스로 성장하는 디자인 시스템 을 만들 수 있으며 설명가능한 애니메이션 효과를 통해 학습할수있습니다.

여기서 소개된 펜슬xWPF 하네스 스킬세트 다운받기

• 하네스로 조사된 여기서 소개된 애니메이션 셋트 포함
  • 하네스 이용법을 참고 애니메이션을 리서치하고 보강하는 기능포함 
  • 자신에게 맞는 하네스 업데이트하는 기능도 포함되어 자신만의 하네스로 업그레이드할수 있습니다. 
    • ex> 평가기준 변경, 스킬이용 순서및 역할조정등

위 zip파일은 초기 깡통버전이니 다운받아서 업그레이드가능

디벨롭 버전 : 실제 웹사이트를 만들면서 , 디자인스킬을 하네스로 업데이트 합니다. ( 개발스킬은 여기서 취급안함 - 프롬프트로만 취급 )

• https://github.com/psmon/pencil-creator
  • 여기 추가된 모든리소스는 공개되어 다운로드 가능합니다.(하네스 포함)
• https://psmon.github.io/pencil-creator/
  • 하네스 업그레이드중 자동 퍼블리셔 기능이 추가되어 , 이 하네스가 만든 샘플사이트를 구경할수 있습니다.

...

작성일: 2026-03-28 | BloomLabs Content Harness v0.8.0 | Pencil Design Skill v1.3.0