View Source

이전장에서 웹용을 만든 디자인을 윈도우 네이티브로 이식하는 무모한 실험도 함께 진행해보겠습니다.

Akka > Pencil with WPF > image-2026-3-8_9-50-16.png

Blend WPF

Akka > Pencil with WPF > image-2026-3-8_9-12-48.png

Blend는 VS Insider에 포함되어있으며(인스톨시 선택) 코딩도 가능하지만 디자인에 특화된 툴입니다.
디자인 AI생성기능만 사용하지 않는다고하면 펜슬이 필요 없겠지만.. WPF의 Xaml을 이용해 디자인을 잘하기란 쉽지 않습니다. ( 그래서 보급 실패 )

펜슬 디자인의 메인 화면을 메인윈도우에 적용

펜슬 디자인은 피그마와같이 무한 캔버스이며 , 메인화면이라고 요청해도 메인화면이 무엇인지 찾아냄
- 더 구체적이게 하려면 해당 요소의 캔버스의 OverLay이름명을 직접 요청
WPF 윈도우의 어플리케이션을 시작하면 빈 메인윈도우가 생성되어 , 메인윈도우는

Akka > Pencil with WPF > image-2026-3-8_9-39-29.png

Akka > Pencil with WPF > image-2026-3-8_9-31-59.png

Akka > Pencil with WPF > image-2026-3-8_9-37-2.png

Blend의 특징중하나 컴포넌트 요소를 모두 애니메이션화할수 있습니다. ( 이동,회전,3D회전까지,확대축소)

TitleCaption 을 타임라인 애니메이션 , 페이지 로드시 왼쪽안보이는곳에서 출발해 지금 위치까지... Path와 회전을 적용해 나비가 날라오는 느낌의 애니를 적용

-애니메이션 타임라인을 Belnd툴에 제어하게끔 인라인 StoryBoard로 구현

Akka > Pencil with WPF > image-2026-3-8_9-39-7.png

Akka > Pencil with WPF > image-2026-3-8_9-48-35.png

Akka > Pencil with WPF > image-2026-3-8_9-56-28.png

Akka > Pencil with WPF > image-2026-3-8_10-0-25.png

디자인 초안은 펜슬로한후 최초 시안 사용 그리고 세부조정및 애니메이션등 추가 효과는 Belnd에서 가능해

WPF의 디자인이 어려웠던점을 펜슬을 이용해 커버하고 샘플이 어플리케이션에 맞추기힘든 웹기반에 사용할 디자인을 적용했지만

프리디자인이 어려웠던 어플리케이션 진영에 작은 변화를 가지고 오지않을까? 이상 펜슬xWPF 사용후기