Page History
| Table of Contents | ||||
|---|---|---|---|---|
|
| Info |
|---|
요약: WPF Blend가 30년간 축적한 애니메이션 정의 체계를 Pencil 디자인 도구에 이식하고, AI 하네스 시스템으로 조사→구현→평가 루프를 반복하여 37개 애니메이션 컴포넌트 템플릿을 자체 구축한 여정을 공유합니다. 대상 독자: UI/UX에 관심 있는 개발자, 디자인 시스템 관리자 첨부 파일: 디자인아이디어.pen (Pencil 디자인 파일) | index.html (AICC 데모 페이지) |
1. WPF Blend — MS의 디자이너-개발자 협업 도구
...
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 무한 애니메이션으로 선택 영역 표시). 섬세한 디테일이 전문성을 보여줍니다.
...
| Note |
|---|
다운로드
Pencil 앱에서 .pen 파일을 열어 각 카드를 확인하고, 필요한 컴포넌트를 자신의 프로젝트에 복사하여 사용할 수 있습니다. 이 스킬은 모던하고 심플한 애니메이션 효과를 지원합니다. |
...
애니메이션 리소스는 사서 쓰는 것만이 답이 아닙니다. 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