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