하네스로 애니메이션 스킬업 — WPF에서 Pencil, 그리고 웹까지

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

Microsoft의 Blend for Visual Studio는 WPF(Windows Presentation Foundation) 생태계에서 디자이너와 개발자를 연결하는 핵심 도구입니다. 2006년 WPF와 함께 등장한 이래, XAML이라는 공통 언어를 중심으로 두 역할이 같은 파일을 서로 다른 관점에서 편집하는 워크플로우를 제공해 왔습니다.

XAML — 디자이너와 개발자의 공통 언어

XAML(eXtensible Application Markup Language)은 UI의 구조, 스타일, 애니메이션을 모두 선언적으로 정의합니다. 디자이너는 Blend의 비주얼 에디터에서 드래그&드롭으로 요소를 배치하고, 개발자는 같은 .xaml 파일을 Visual Studio에서 코드로 편집합니다. 결과물은 동일한 파일이므로 버전 충돌 없이 협업이 가능합니다.

Storyboard — 시각적 타임라인 애니메이션

Blend의 가장 강력한 기능은 Storyboard 타임라인 에디터입니다. 디자이너가 키프레임을 찍고 속성 변화를 시각적으로 편집하면, Blend가 이를 XAML Storyboard 코드로 자동 변환합니다.

<Storyboard>
  <DoubleAnimation
    Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
    From="1.0" To="1.08" Duration="0:0:0.3">
    <DoubleAnimation.EasingFunction>
      <CubicEase EasingMode="EaseOut"/>
    </DoubleAnimation.EasingFunction>
  </DoubleAnimation>
</Storyboard>

ResourceDictionary — 애니메이션 자산의 공유

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

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

MCP를 통한 AI-디자이너 협업

Pencil은 .pen 파일 형식으로 디자인을 관리하는 모던 디자인 도구입니다. 핵심적인 차별점은 MCP(Model Context Protocol)를 통해 AI와 직접 협업할 수 있다는 것입니다. AI가 batch_design 명령으로 프레임, 텍스트, 도형을 배치하고, get_screenshot으로 결과를 시각적으로 검증하는 — 마치 디자이너가 캔버스에서 작업하는 것과 같은 워크플로우가 가능합니다.

정적 디자인의 한계와 애니메이션 표현의 도전

그러나 Pencil은 본질적으로 정적 디자인 도구입니다. Blend처럼 타임라인 에디터나 Storyboard가 없습니다. 애니메이션의 “Before → After” 상태를 나란히 배치하거나, 화살표로 전환을 암시하는 것이 최선입니다.

이것은 모든 정적 디자인 도구(Figma, Sketch 포함)가 공유하는 근본적 한계입니다. 애니메이션 이펙트를 위한 리소스는 보통 유료 플러그인이나 별도 프로토타이핑 도구(ProtoPie, Principle)에 의존합니다.

아이디어 — WPF의 30년 애니메이션 자산을 활용하면?

여기서 발상의 전환이 시작됩니다. WPF 생태계가 수십 년간 축적한 애니메이션 패턴 — Storyboard, EasingFunction, Transform 조합들을 Pencil의 디자인 카드로 변환하면 어떨까요?

• WPF의 DoubleAnimation + ScaleTransform → Pencil에서 “작은 상태 → 큰 상태” 나란히 배치

• WPF의 ColorAnimation → Pencil에서 3단계 그라데이션 카드

• WPF의 RotateTransform → Pencil에서 회전 호(arc) 표시

정적 이미지로도 애니메이션의 의도와 메커니즘을 충분히 전달할 수 있습니다. 그리고 이 정적 카드들이 모이면, 웹 개발 시 참조할 수 있는 애니메이션 컴포넌트 라이브러리가 됩니다.

3. 하네스 루프 — 조사→구현→평가의 자가 개선 사이클

아이디어를 실행에 옮기기 위해, BloomLabs Content Harness의 평가 시스템을 디자인 워크플로우에 확장 적용했습니다.

Case P 평가: WPF → Pencil

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

Case W 평가: Pencil → HTML

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

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

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

1. WPF의 공개 자료를 조사하여 애니메이션 패턴을 수집

2. Pencil로 시각화하여 디자인 카드 형태로 축적

3. 하네스로 평가하여 품질을 정량화하고 개선점을 식별

4. 다시 조사하여 부족한 영역을 보강

이 루프를 반복하면 외부 의존 없이 자체적으로 애니메이션 자산을 확보할 수 있으며, 평가 시스템 덕분에 품질이 측정 가능합니다.

4. 완성된 37개 애니메이션 템플릿

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

카테고리 전체 목록

디자인 카드 구조

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

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

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

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

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

5. 실전 적용 — AICC 전화상담 랜딩페이지

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

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

13개 이펙트를 단일 페이지에 적용한 결과, Pencil에서 정적으로 설계한 애니메이션 의도가 실제 CSS/JS 애니메이션으로 충실하게 변환될 수 있음을 확인했습니다.

6. 마무리 — 다음 스텝

이번 여정을 통해 확인한 것들:

1. WPF의 애니메이션 체계는 웹에도 유효합니다. Storyboard/Easing/Transform의 개념은 CSS @keyframes/transition/transform과 1:1 대응됩니다.

2. Pencil + MCP는 AI 시대의 디자인 협업 모델입니다. 정적 디자인의 한계를 “상태 전환 카드” 패턴으로 극복할 수 있습니다.

3. 하네스의 평가 루프는 디자인에도 적용 가능합니다. Case P/W 평가로 품질을 측정하고 개선 방향을 식별합니다.

4. 셀프 업그레이드 방식은 외부 의존을 줄입니다. 유료 리소스 없이도 37개 템플릿을 구축했습니다.

다음 단계로는:

• 2차 조사에서 확보한 20개 컴포넌트의 .xaml 샘플 파일 생성 (독립 실행 가능한 WPF Window)

• Pencil 디자인 카드를 재사용 가능한 컴포넌트(reusable)로 전환하여 다른 .pen 파일에서 참조 가능하게 개선

• 더 많은 실전 랜딩페이지에 적용하여 Case W 평가 루프를 반복

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

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