Page History
| Table of Contents | ||||
|---|---|---|---|---|
|
| Info |
|---|
요약: WPF Blend가 30년간 축적한 애니메이션 정의 체계를 Pencil 디자인 도구에 이식하고, AI 하네스 시스템으로 조사→구현→평가 루프를 반복하여 37개 애니메이션 컴포넌트 템플릿을 자체 구축한 여정을 공유합니다. 대상 독자: UI/UX에 관심 있는 개발자, 디자인 시스템 관리자 첨부 파일: 디자인아이디어.pen (Pencil 디자인 파일) | index.html (AICC 데모 페이지) |
1. WPF Blend — MS의 디자이너-개발자 협업 도구
...
WPF의 ResourceDictionary 체계는 스타일, 템플릿, 애니메이션을 별도 파일로 분리하여 프로젝트 전체에서 재사용할 수 있게 합니다. 이 메커니즘 덕분에 WPF 생태계에는 수십 년간 축적된 방대한 애니메이션 패턴 라이브러리가 존재합니다 — MaterialDesignInXAML, MahApps.Metro, WPF UI(Fluent) 등이 대표적입니다.
| Widget Connector | ||
|---|---|---|
|
- 서치과정중 발견한 xaml 파일은 Blend for Studio를 이용해 애니메이션을 구현전에 확인및 조정할수도 있습니다.
- 이 툴을 잘다룬다고하면 애니메이션을 정의하고 펜슬로 변환도 가능
...
2. Pencil — AI 시대의 디자인 협업
...
WPF 애니메이션을 조사하여 Pencil 디자인 카드로 시각화하는 작업을 3축으로 평가합니다:
평가축 | 만점 | 핵심 기준 |
|---|---|---|
P1. 리서치 신규성 | 35 | 기존 .pen 파일과 중복 없이 새로운 기법을 추가했는가 |
P2. 시각화 표현력 | 35 | Before→After 상태 전환을 직관적으로 표현했는가 |
P3. 메타 완결성 | 30 | XAML 스니펫과 출처가 정확하게 기록되었는가 |
Case W 평가: Pencil → HTML
Pencil에서 설계한 애니메이션을 실제 HTML/CSS/JS로 구현할 때의 품질을 측정합니다:
평가축 | 만점 | 핵심 기준 |
|---|---|---|
W1. 디자인 커버리지 | 35 | .pen의 컴포넌트를 얼마나 많이 HTML에 반영했는가 |
W2. 애니메이션 충실도 | 35 | 정적 디자인을 동적 애니메이션으로 정확히 변환했는가 |
W3. 독창적 확장 | 30 | 디자인에 없는 창의적 인터랙션을 추가했는가 |
왜 셀프 업그레이드 방식인가
Figma 커뮤니티나 유료 애니메이션 라이브러리(LottieFiles, ProtoPie 등)를 구매하는 것도 방법입니다. 하지만 우리가 선택한 접근은 다릅니다:
...
| Tip |
|---|
RPG 보너스: Case P와 Case W를 연속 실행하면 양쪽 모두 60점 이상일 때 XP 1.3배 파이프라인 보너스가 적용됩니다. |
...
4. 완성된 37개 애니메이션 템플릿 — 11개 카테고리 갤러리
...
CAT10 — Ambient & Decorative FX 앰비언트 효과 (3개)
배경의 생동감을 더하는 고급 효과입니다. 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 무한 애니메이션으로 선택 영역 표시). 섬세한 디테일이 전문성을 보여줍니다.
...
특수 상황의 연출 효과입니다. Confetti Burst(Canvas에 다수 Rectangle 스폰 + 랜덤 색상/회전/속도 + 중력 KeyFrames), Zoom/Pinch(MouseWheel.Delta로 ScaleTransform 스무스 줌 + CubicEase 300ms), Animated Tooltip(ToolTip.Opened 이벤트 기반 Opacity+TranslateY 진입 + DropShadow). 사용자 경험의 감성적 완성도를 높이는 고급 기법입니다.
...
| Note |
|---|
다운로드: 전체 37개 컴포넌트가 포함된
Pencil 앱에서 .pen 파일을 )을 첨부했습니다. Pencil 앱에서 열어 각 카드를 확인하고, 필요한 컴포넌트를 자신의 프로젝트에 복사하여 사용할 수 있습니다. 이 스킬은 모던하고 심플한 애니메이션 효과를 지원합니다. |
...
5. 실전 적용 —
...
노리의 여행 에필로그 홈페이지
축적한 애니메이션 템플릿의 실전 활용을 검증하기 위해, “AICC 전화상담 도입” 테마의 랜딩페이지를 “여행하는 노리의 에필로그” 테마의 개인 홈페이지를 제작했습니다. Pencil 디자인 파일을 참조하여 가능한 한 많은 컴포넌트와 애니메이션 효과를 적용하는 것이 목표였습니다.
...
파일의 22개 애니메이션 이펙트를 하나의 페이지에 적용하는 것이 목표였습니다.
Hero — 첫인상의 모든 것
첫 화면에서 6가지 이펙트가 동시에 작동합니다: Animated Gradient BG(배경 그라디언트 흐름), Floating Particles(컬러 파티클 25개 부유), Rotating Spinner(3중 회전 링), Pulsing Glow(“노리” 이름 펄스), Typewriter Text(여행 문구 타이핑), Glass Effect Button(CTA 2종).
About — 아코디언과 컬러 필
Accordion Sections(CAT8)로 자기소개를 3단 접기/펼치기로 구현하고, Color-Animated Pills(CAT1)로 스킬 태그가 자동 순환하며 하이라이트됩니다. 스크롤 시 Scroll Reveal과 Elastic/Spring(CAT5) 진입 애니메이션이 적용됩니다.
Travels — 3D 플립 카드
Flip Card 3D(CAT5)가 핵심입니다. 4개 여행지 카드에 마우스를 올리면 Y축 180° 회전하며 뒷면의 여행 스토리가 나타납니다. CSS perspective + backface-visibility로 구현했으며, Elastic/Spring 진입 애니메이션과 결합됩니다.
Gallery — 순차 등장 그리드
Staggered List Entrance(CAT7)로 6개 사진 카드가 스크롤 시 순차적으로 등장합니다. IntersectionObserver로 뷰포트 진입을 감지하고, 각 아이템에 index×80ms 지연을 적용하여 캐스케이드 효과를 만듭니다.
Statistics — 원형 차트와 바 차트
데이터 시각화 카테고리(CAT9)의 3가지를 모두 적용했습니다: Circular Progress(SVG stroke-dashoffset으로 원형 진행률 4개), Animated Bar Chart(대륙별 방문 횟수 5개 바 캐스케이드), Parallax Scrolling(CAT6, 배경 레이어 0.15x 속도 차이).
Journey — 타임라인 슬라이드
Sliding Expandable Panel(원본 CAT)을 타임라인에 적용했습니다. 각 연도 아이템이 스크롤 시 왼쪽에서 슬라이드인하며, 색상이 다른 Breathing Pulse(CAT10) 도트가 시간의 흐름을 표현합니다.
Contact — 플로팅 라벨과 축하 효과
Floating Label TextBox(CAT1)로 3개 입력 필드를 구현하고, 전송 시 Toast/Snackbar(CAT2)가 우하단에서 슬라이드인합니다. 동시에 Confetti Burst(CAT11)가 60개 컬러 파티클을 터뜨려 축하 효과를 연출합니다.
적용된 22개 애니메이션 매핑
# | .pen 이펙트 | HTML 적용 위치 | 카테고리 |
|---|---|---|---|
1 | Animated Gradient BG | 전체 배경 그라디언트 흐름 | CAT4 |
2 | Floating Particles | 배경 25개 컬러 파티클 부유 | CAT4 |
3 | Rotating Spinner | Hero 3중 회전 링 | 원본 |
4 | Pulsing Glow | “노리” 이름 펄스 이펙트 | CAT4 |
5 | Typewriter Text | Hero 여행 문구 타이핑 | CAT7 |
6 | Glass Effect Button | Hero CTA |
(primary + glass |
) |
Rotating Spinner
Hero 배경 3중 회전 링
원본 | |||
7 | Ripple Effect | 버튼 클릭 시 ripple | CAT8 |
8 | Marquee Ticker | 여행 명언 무한 스크롤 | CAT7 |
9 | Accordion | About Me 3단 접기/펼치기 | CAT8 |
10 |
Sliding Expandable Panel
Color-Animated |
4단계 프로세스 필(pill) 자동 순환
Floating Label TextBox
CTA 폼 입력 필드
Material Toggle Switch
구축 탭 내 전환 토글
Snackbar/Toast
“데모 신청” 클릭 시 슬라이드인 알림
Animated Progress Bar
통계 섹션 & AI 정확도 바
Badge Counter Pop
숫자 카운트업 애니메이션
Tab Control Slide
도입과정 탭 슬라이더
Animated Gradient BG
전체 배경 그라디언트 애니메이션
Floating Particle Dots
배경 파티클 30개 부유
Pulsing Glow
Hero 태그라인 키워드 펄스 이펙트
Pills | 스킬 태그 순환 하이라이트 | 원본 | |
11 | Flip Card 3D | 여행지 4개 카드 뒤집기 | CAT5 |
12 | Staggered List | 갤러리 사진 순차 등장 | CAT7 |
13 | Circular Progress | 여행 통계 원형 차트 4개 | CAT9 |
14 | Animated Bar Chart | 대륙별 방문 횟수 바 차트 | CAT9 |
15 | Parallax Scrolling | 통계 섹션 배경 패럴랙스 | CAT6 |
16 | Elastic/Spring | 카드/통계 엘라스틱 등장 | CAT5 |
17 | Sliding Expandable | 타임라인 아이템 슬라이드 | 원본 |
18 | Breathing Pulse | 네비 온라인 도트 + 타임라인 도트 | CAT10 |
19 | Floating Label | 컨택트 폼 3개 필드 | CAT1 |
20 | Toast/Snackbar | 메시지 전송 시 슬라이드인 알림 | CAT2 |
21 | Confetti Burst | 폼 전송 시 축하 파티클 | CAT11 |
22 | Scroll Reveal | 모든 섹션 스크롤 진입 애니 | 공통 |
11개 카테고리 중 9개 카테고리의 이펙트가 단일 페이지에 적용되었습니다. 기존 원본(4개) + CAT1~11에서 18개를 활용하여 총 22개 애니메이션이 자연스럽게 통합됩니다13개 이펙트를 단일 페이지에 적용한 결과, Pencil에서 정적으로 설계한 애니메이션 의도가 실제 CSS/JS 애니메이션으로 충실하게 변환될 수 있음을 확인했습니다.
| Tip |
|---|
데모 확인: 첨부된 index nori-homepage.html 파일을 브라우저에서 열면 모든 애니메이션을 직접 확인할 수 있습니다. |
...
애니메이션 리소스는 사서 쓰는 것만이 답이 아닙니다. WPF라는 거인의 어깨 위에 서서, AI와 함께 디자인하고, 하네스로 평가하면 — 스스로 성장하는 디자인 시스템 을 만들 수 있으며 설명가능한 애니메이션 효과를 통해 학습할수있습니다.
여기서 소개된 펜슬xWPF 하네스 스킬세트 다운받기
| View file | ||||
|---|---|---|---|---|
|
- 하네스로 조사된 여기서 소개된 애니메이션 셋트 포함
- 하네스 이용법을 참고 애니메이션을 리서치하고 보강하는 기능포함
- 자신에게 맞는 하네스 업데이트하는 기능도 포함되어 자신만의 하네스로 업그레이드할수 있습니다.
- 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