Page History

...

• 벚꽃 파티클 놀이터 — 인터랙티브 슬라이더로 파라미터를 조절해 보세요
• 사계절 쇼케이스 — 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종합 분석 애니메이션 기법파악 )