Page History

...

왜 이런 일이 반복될까? 근본 원인은 세 가지다.

이 간극은 디자인 시스템이 성숙해도 쉽게 메워지지 않는다. 색상과 타이포그래피는 디자인 토큰으로 표준화되었지만, 애니메이션만큼은 여전히 “감”으로 전달되고 “감”으로 구현되는 영역으로 남아 있다.

...

Pencil Creator의 워크플로우는 세 가지 케이스(Case)로 나뉜다.

이 세 단계가 분리되어 있다는 점이 중요하다. Case A에서 만든 애니메이션 카드는 여러 프로젝트에서 재사용된다. 특정 프로젝트를 위해 만들고 버리는 것이 아니라, 라이브러리처럼 계속 쌓인다.

...

현재 wpf-animation.pen 파일에는 12개 카테고리, 40개 이상의 애니메이션 기법 카드가 정리되어 있다.

각 카드에는 Before → After 시각 미리보기, XAML 코드 스니펫, 적용 대상 속성 설명이 포함된다. 디자이너는 시각적으로 어떤 움직임인지 확인하고, 개발자는 정확한 수치를 코드에서 가져갈 수 있다.

...

각 케이스마다 3축 100점 평가가 자동으로 실행된다.

솔직히 지금 단계에서 이 평가가 완벽하다고 말하기는 어렵다. 하지만 “자동 검수가 존재한다”는 것 자체가 의미 있다. 평가 규칙이 마음에 들지 않으면 제거하거나 수정할 수 있고, 프로젝트가 성숙해지면 규칙도 함께 진화한다. v2.0에서 v2.2까지 세 번의 하네스 업그레이드가 이미 이루어졌다 — “.pen 파일만으로는 정밀도가 부족하다”는 관찰에서 “.pen + .xaml 이중 참조 필수”로 기준이 강화된 것이 대표적인 예다.

...

• Sample 00: 벚꽃 파티클 애니메이션 놀이터 (4개 데모, 인터랙티브 슬라이더)
• Sample 01: 사계절 WPF 쇼케이스 (12 카테고리, 36개 기법 전체 데모)

Image Added

Pencil Creator 랜딩 페이지 — 두 개의 데모 카드가 디자이너 친화적인 크림톤 UI로 배치되어 있다.

3. 실제로 어떻게 보이나

백 마디 설명보다 한 번 보는 것이 낫다. Four Seasons 데모 페이지에서 실제로 구현된 애니메이션 일부를 소개한다.

3.1 데모 구성: 사계절 테마

각 데모에는 WPF XAML 원본 코드가 함께 표시되어, “이 웹 애니메이션이 어떤 WPF 정의에서 변환되었는지”를 바로 확인할 수 있다. 일부 데모에는 인터랙티브 슬라이더가 있어서, 꽃잎 개수나 낙하 속도 같은 파라미터를 실시간으로 조절해 볼 수 있다.

3.2 Sample 00: 벚꽃 파티클 놀이터

Image Added

Cherry Blossom Petal Fall 데모. 슬라이더로 꽃잎 개수, 낙하 속도, 바람 표류를 실시간 조절할 수 있다. 하단에는 이 애니메이션의 원본 WPF XAML 코드가 함께 표시된다. QuadraticEase로 자연스러운 가속 낙하를, RotateTransform으로 회전하는 꽃잎을 구현했다.

3.3 Sample 01: 사계절 WPF 쇼케이스

Image Added

Four Seasons Animation Showcase 히어로 영역. 보라빛 그라데이션 배경 자체가 ColorAnimation + GradientStop으로 구현된 WPF 기법이다. Spring, Summer, Autumn, Winter 네 계절 버튼으로 36개 데모를 탐색할 수 있다.

Image Added

Summer 섹션의 인터랙티브 UI 컴포넌트들. Floating Label, ComboBox, Toggle Switch 같은 실무에서 바로 쓸 수 있는 데이터 입력 컨트롤부터, Snackbar Toast, Progress Bar, Badge Counter 같은 피드백 컴포넌트, Ripple Button, Accordion 같은 인터랙티브 요소까지 — 각 카드 하단에 WPF 애니메이션 속성이 한 줄로 요약되어 있어 디자이너와 개발자가 동일한 언어로 소통할 수 있다.

3.4 WPF → Web 변환의 실제

WPF의 애니메이션 속성이 웹에서 어떻게 대응되는지, 몇 가지 예를 보면:

모든 구현은 외부 라이브러리 없이 순수 HTML/CSS/JS로 이루어진다. 바닐라로 작성되어 있어 어떤 프레임워크에든 통합할 수 있다.

...

• 벚꽃 파티클 놀이터 — 인터랙티브 슬라이더로 파라미터를 조절해 보세요
• 사계절 쇼케이스 — 36개 애니메이션 기법을 한 페이지에서 확인

이전 작성글

• 하네스로 애니메이션 스킬업 — WPF에서 Pencil, 그리고 웹까지
  • 이 디자인 생성 시스템에 적용된 하네스 기법을 더 알고싶으면

참고 자료

1. psmon/pencil-creator — GitHub 리포지토리 (MIT License, 2026-03)
2. 5 Steps for Including Motion Design in Your System — designsystems.com
3. Including Animation In Your Design System — Smashing Magazine
4. Material Design 3 Motion Tokens — Google, 2026
5. 왜 디자이너와 개발자의 협업은 이토록 힘이 들까? — Brunch
6. Animation/Motion Design Tokens — Oscar Gonzalez, Medium

...

추가아티컬 - 피스몬의 NPC 수행능력 인간 피드백

WPF를 탐색 1차 아이템 선정이유

Image Added

• 플래시진영이 살아있다고 하면 과거 웹에서 애니메이션 강자였던 소스를 참고했을텐데 사장기술이라 제외
• 이 기술이 유행을 타고 있는것은 아니지만 태생 자체가 디자인x개발 현업을 고려한 설계여서 정의파일 획득하면 컨버트에 용이하며 몇번 돌려보았더니 실제로 AI로 컨버트 해도 잘작동
  • 누적 정의파일들이 인터넷에 상당히 있어서 빠르게 조사하고 획득가능 ( webfetch만으로)
• Claude 조사단-크레에이터-하네스상점(규칙업그레이드요청) 3개
  • claude --dangerously-skip-permissions :  옵션주면 안물어봄 ( auto-mode는 개인에게 아직 안풀림)
  • 조사단 :  ON 안키면 조사할때마다 a,b,c,d,e,f 도메인 접근할까요 물어봄
  • 크리에이터 : ON 창작물이 조사단의 내용이 잘작성되나 창작능력시험이니 ON하고 진행 ( 피드백이 자동 작동됨으로 이상하면 하네스 상점에 이상하다고 하면 개선해줌)
  • 하네스 상점 : OFF - 규칙을 조정하고 업그레이드하는것이기때문에 꼼꼼히 봐야 다음에 업그레이드됨 ( 확률적으로 하네스 규칙을 잘못설정하면 퀄리티 다운그레이드 될수 있음)

조사단평가

Image Added

• 이 하네스는 창작만 핵심이 아니고.. 조사단부터 평가함 
  • 몬스터헌터에서 조사단x헌터 조사를 잘수행해야 헌터도 잘수행한다란 모티브를 따옴
    • 사실 지어냄 이겜 플레이시간이 많아서 아이디어를 하네스도입하고 뒤에 이게 고거구나 깨우침

조사단의 획득물

Image Added

• 이펙트와 관련된 많은 소재를 모아서 정리 사실 무슨말인지 모르고 헌터에게 "사이버펑크 HUB패널 만들어달라고 예정"
• 이것은 만든 이유는 단한가지 , 애니전문가가 아닌이상 애니메이션 이펙트 이름자체를 몰라 요청을 못함
  • 여기 표시 되는 이름(한글상관없음) 을 만들어 달라고 요청하는게 핵심

헌터출격 - 조사내역으로 실제 사냥감을 포획에 나섬 ( 컨텍츠 제작)

Image Added

• 헌터 출격 레어급으로 잡아와~

획득물평가

Image Added

• 디자인 평가할 입장도 아니고 뭐 잘되었다고 하니 그냥 전시장에 출시

획득물전시 하기

빌드 배포도 귀찮아 이미자동화해둠( 이소스를 받으면 스킬에 포함되었으니 github이용하면 활용가능) - CICD라 불리는 영역인데..이것을 CDPR 이라 부르기로함

• 배포준비해 : 상위 랜딩페이지에 링크연결 + 푸시 작업이력 남김 
• 퍼블리싱해 : 태깅달고 실제 배포진행 

CDPR의 기원

• CD Projekt Red (CDPR)
• CDPR = Continuous Delivery & Publishing Review

사펑같은 느낌 만들어주기도 해서 이 자동화를 그냥 CDPR이라고 부르기로함 ..다음에는 CDPR수행 한방으로 묶기가능(나눠하기 조차 입력하기 귀찮은경우)

Image Added

• 싫은데 퍼블리싱 해 라고 할거임...

Image Added

• AI가 코드개발에 자동관여(자동푸시) 하는경우 모델명과 함께 이런 아이콘 딱지가 붙음
  • v1.0.x 는 깃헙액션의 배포관리 패턴의 하나로 배포/퍼블리시 까지 한방 자동수행

작품의 최종평가는 제작자가 아닌 관람자에게

Image Added

• https://psmon.github.io/pencil-creator/
  • 배포완료되면 URL정리도 해달라고 주입해둠 - 클릭해서 접근
    • 과거 : 야  배포주소모름 배포주소 알려죠 -  이거 한번 더 안하려고

Blend for VisualStudio

Image Added

• https://visualstudio.microsoft.com/insiders/?rwnlp=ko
  • WPF-XAML 방식을 디자인정의 채택한것은 성능좋은 MS제공 디자인 툴을 이용할수 있다란점
    • 하네스가 설명가능한 애니메이션으로 다시한번 작성해줍니다.
      • 용도 : Path처리및 세밀한 애니메이션효과 조정을 직접하고자할때 - 커스텀한후 이파일을 웹에반영해 애니적용해 가능

Image Added

• 이건 의도한기능이 아니긴하나.. 조사한 애니컨트롤을 윈도우앱에서도 애니적용 컴포넌트 볼수가 있습니다.
  • 본연의 기능은 웹프론트에서 작동구현

하네스상점

Image Added

• 디자인 시스템을 만들었다기보다 좋은 디자인툴을 채택해 상호 운영하는 디자인 시스템을 변종으로 제공하는 스킬셋트 - 펜슬하네스 였습니다
• 이 툴의 의존포인트
  • 이제막 출시해 핫한 pencil.dev 가 안망해야함  - 구글이 이상하게 이거랑 똑같은거 최근 출시( 프리이고 다른툴 연동제약없으면 전환가능 - 하지만 구글의 행보는 자신들의 플랫폼에서 작동가능하게 만들어 체크필요)
  • MS VisualStudio ( VS CODE의 조상격 )가 Blend를 안버려서 채택 거의 20년전? WPF 누적된 디자인 소스를 활용할수 있다란것이 장점 

해외에는 이툴을 사용하는 전문디자이너가 간간히 있는듯하며, 국내에는 잘활용되지 않지만 이툴을 사용하는 디자이너가 만든 영상소개 - 여기설명보다 이 유튭보는게 이해가 빠를것같습니다.

• 이 툴의 카피대상이 위 영상에 소개되는 애니메이션 산출물 파일이 정의가능한  .xaml 파일로 출발
  • 유튭영상 분석해서 애니및 구도를 파악 애니요소를 txt 추출할수 있는 장치가 있다고하면 제보도 부탁합니다. -Vision AI ML 영역 어딘가에 있거나 나중에 등장할것으로 예상 ( 사물인식이 아닌 path종합 분석 애니메이션 기법파악 )