이전장에서 웹용을 만든 디자인을 윈도우 네이티브로 이식하는 무모한 실험도 함께 진행해보겠습니다. - 웹용으로 만든 AI생성 디자인이 WPF로 이식되는지 변종 테스트
|
이전장 : Pencil로 TechNews 디자인
펜슬로 디자인하기
- 초본이 가장 깔끔하게 나왔는데 개발자의 손을 타면 디자인을 훼손하는듯 - 디자인을 잘하느냐가 아닌 AI가 디자인한 결과물이 잘적용이 되냐가 목표이기에 최종생성물인 마지막장으로 수행진행
Blend WPF
https://visualstudio.microsoft.com/insiders/?rwnlp=ko
- Blend는 VS Insider에 포함되어있으며(인스톨시 선택) 코딩도 가능하지만 디자인에 특화된 툴입니다.
- 디자인 AI생성기능만 사용하지 않는다고하면 펜슬이 필요 없겠지만.. WPF의 Xaml을 이용해 디자인을 잘하기란 쉽지 않습니다. ( 그래서 보급 실패 )
프롬프트
- 펜슬 디자인은 피그마와같이 무한 캔버스이며 , 메인화면이라고 요청해도 메인화면이 무엇인지 찾아냄
- 더 구체적이게 하려면 해당 요소의 캔버스의 OverLay이름명을 직접 요청
- WPF 윈도우의 어플리케이션을 시작하면 빈 메인윈도우가 생성되어 , 메인윈도우는
생성결과
요소에 이름지정하기
- 이름을 지정하면 해당 이름을 사용하면 되기때문에 바이브시 명시적으로 지시를 할수 있습니다.
애니메이션
Blend의 특징중하나 컴포넌트 요소를 모두 애니메이션화할수 있습니다. ( 이동,회전,3D회전까지,확대축소)
TitleCaption 을 타임라인 애니메이션 , 페이지 로드시 왼쪽안보이는곳에서 출발해 지금 위치까지... Path와 회전을 적용해 나비가 날라오는 느낌의 애니를 적용 -애니메이션 타임라인을 Belnd툴에 제어하게끔 인라인 StoryBoard로 구현 |
- 키 프레임 애니메이션을 확인및 수정할수 있습니다. - 동영상 편집기에나 제공되는 애니메이션 기능을 콤포넌트에 적용
애니메이션 완성결과
디자인 초안은 펜슬로한후 최초 시안 사용 그리고 세부조정및 애니메이션등 추가 효과는 Belnd에서 가능해
WPF의 디자인이 어려웠던점을 펜슬을 이용해 커버하고 샘플이 어플리케이션에 맞추기힘든 웹기반에 사용할 디자인을 적용했지만
어플리케이션 실행
- dev모드라 디버깅을 툴이 캡션창에 있으며 , 리사이즈에 따른 반응형도 준수하게 지원
프리디자인이 어려웠던 어플리케이션 진영에 작은 변화를 가지고 오지않을까? 이상 펜슬xWPF 사용후기