Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일
 

응용 프로그램 디자인 스케치 도구 - SketchFlow

그동안 말로만 들어왔던 SketchFlow를 검토하게 되었습니다.

SketchFlow 개요
; https://docs.microsoft.com/ko-kr/previous-versions/visualstudio/design-tools/expression-studio-4/ee341449(v=expression.40)

오호~~~ 짧은 검토 결과 일단 마음에 듭니다. ^^ 형상 관리 서버와의 연동도 자연스럽고 '응용 프로그램'에서 자주 쓰이는 '컨트롤' 요소들도 기본 제공하고 애니메이션 효과 및 실제 스케치한 그림을 넣어서 표현하기에도 무리가 없습니다.

혹시나, 아직도 모르고 계시는 분들은 이번 기회에 한번 눈여겨 봐두시는 것도 좋을 듯 싶습니다.

먼저, 이것이 어떤 것인가에 대한 데모는 다음의 영상을 통해 알 수 있습니다.

Expression and SketchFlow Demo Mix09 
(제 판단으로는, 여기 나오는 데모 수준은 전문적인 디자이너와 수준 있는 개발자가 협업해야 가능한 정도 같습니다.)
; http://vimeo.com/5533794

그리고, 교육용으로 제작된 것인데 아래의 5분짜리 비디오도 전체적인 기능 이해를 도와줍니다.

Introducing SketchFlow with Expression Blend 3 
(여기 나오는 데모 수준은… 누구나 가능할 수 있습니다.)
; http://www.youtube.com/watch?v=DOGxOQO8qA8&feature=mfu_in_order&list=UL




실제로 뚝딱거리고 싶은 분들은 다음의 비디오들을 한 번씩 쭉 보는 것도 좋겠습니다. (위에서 소개한 ‘Introducing SketchFlow with Expression Blend 3’에 대한 How-to 시리즈라고 보면 됩니다.) 한 편당 9분 정도 내외의 내용이라서 골라서 보시면 빠른 시간 내에 이해가 되실 것입니다.

Building Basic Layout in SketchFlow with Expression Blend 3 (기초 도구 사용법)
; http://www.youtube.com/watch?v=NUuUtXll16E&feature=mfu_in_order&list=UL

Using SketchStyle Controls to Enhance a SketchFlow Layout with Expression Blend 3 (부가 컨트롤 추가하기)
; http://www.youtube.com/watch?v=hYKvR3c2aBw&feature=mfu_in_order&list=UL

Working with Components in a SketchFlow Project with Expression Blend 3 (별개의 컨트롤로 분리하는 방법)
; http://www.youtube.com/watch?v=Ca955dOBwIY&feature=mfu_in_order&list=UL

Adding Navigation to Buttons in SketchFlow with Expression Blend 3 (화면 내의 컨트롤에 다른 화면으로 전환하는 기능 부여)
; http://www.youtube.com/watch?v=xWiNkaljeCI&feature=mfu_in_order&list=UL

Working with States in SketchFlow with Expression Blend 3 (레이어 윈도우 효과)
; http://www.youtube.com/watch?v=jxu210ol4aE&feature=autoplay&list=ULf5ieT23i78U&index=18&playnext=1

Working with the SketchFlow Animation Panel with Expression Blend 3 (애니메이션 효과)
; http://www.youtube.com/watch?v=UdZSM7b74aM&feature=autoplay&list=ULf5ieT23i78U&index=19&playnext=1

Working with Behaviors in SketchFlow with Expression Blend 3 (Behavior에 대한 이해)
; http://www.youtube.com/watch?v=faEcmh_ESmI&feature=BF&list=ULf5ieT23i78U&index=20

Using Sample Data in SketchFlow with Expression Blend 3 (데이터 바인딩)
; http://www.youtube.com/watch?v=WHYyfTHzuVY&feature=mfu_in_order&list=UL

Adding Feedback and Annotations in the SketchFlow Player with Expression Blend 3 (피드백 첨언하기)
; http://www.youtube.com/watch?v=uoXvf_E2UZg&feature=BF&list=ULf5ieT23i78U&index=22 

Exporting your SketchFlow project with Expression Blend 3 (html/XAP 파일로 내보내기, 오피스 워드로 내보내기
; http://www.youtube.com/watch?v=3R7r02niqEw&feature=BF&list=ULf5ieT23i78U&index=23

**** 위에서 SketchFlow에 대한 프로젝트 생성 방법이 빠져 있는데요. 이에 대해서는 다음의 비디오를 보시면 됩니다.

SketchFlow (Sketch Flow 프로젝트 생성 방법부터, 간략한 방법)
; http://www.youtube.com/watch?v=kJtu5mjOYrU&feature=related




실습하기 위해서는 Expression Blend라는 제품이 필요한데 다음의 URL에서 60일 평가판을 다운로드 할 수 있습니다.

Microsoft Expression Studio 4 Ultimate 60일 평가판 
; http://www.microsoft.com/downloads/ko-kr/details.aspx?FamilyID=04438F30-CC6D-4E10-80A3-3B3DCE129E88

설치 후, 서비스 팩 1을 다시 설치하시는 것이 권장되고.

Microsoft Expression Blend 4 SP1(서비스 팩 1) 
; http://www.microsoft.com/downloads/ko-kr/details.aspx?FamilyID=17872A3A-4620-4B87-9D62-F29173D12625



[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]







[최초 등록일: ]
[최종 수정일: 7/17/2021]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 



2011-03-30 10시32분
[spike] 현재는 4 버전이 나와있습니다. 이왕이면 최신버전으로 보시는 것도 좋겠네요~
[guest]
2011-03-30 10시47분
아... ^^ 동영상 링크 걸어놓은 것은 3 버전밖에 없어서 그렇게 된 것이고, 아래에 보시면 Expression Blend 4 버전의 평가판 경로를 걸어놨습니다. 그리고, 실제로 동영상 강의 내용 수준 정도는 3과 4의 동작 차이가 없기 때문에 무방할 것 같습니다. ^^
정성태
2011-03-31 10시28분
[짜두] 드뎌 디자인에 입문하시는건가효?ㅎ 레알 Expression MVP 가 되어 주세요!ㅎㅎㅎ
[guest]
2011-03-31 02시05분
필요한 만큼만 합니다. ^^; Expression MVP가 되기에는 쩜. ^^ WPF조차도 "그 프로젝트" 이후로 안 하다 보니 감을 잃은 것 같습니다. ^^
정성태

... 46  47  48  49  50  51  52  53  54  55  56  57  58  59  [60]  ...
NoWriterDateCnt.TitleFile(s)
12532정성태2/6/202122101개발 환경 구성: 538. Wireshark + C#으로 확인하는 ReceiveBufferSize(SO_RCVBUF), SendBufferSize(SO_SNDBUF) [3]
12531정성태2/5/202120437개발 환경 구성: 537. Wireshark + C#으로 확인하는 PSH flag와 Nagle 알고리듬파일 다운로드1
12530정성태2/4/202123124개발 환경 구성: 536. Wireshark + C#으로 확인하는 TCP 통신의 Receive Window
12529정성태2/4/202122481개발 환경 구성: 535. Wireshark + C#으로 확인하는 TCP 통신의 MIN RTO [1]
12528정성태2/1/202122869개발 환경 구성: 534. Wireshark + C#으로 확인하는 TCP 통신의 MSS(Maximum Segment Size) - 윈도우 환경
12527정성태2/1/202122804개발 환경 구성: 533. Wireshark + C#으로 확인하는 TCP 통신의 MSS(Maximum Segment Size) - 리눅스 환경파일 다운로드1
12526정성태2/1/202119408개발 환경 구성: 532. Azure Devops의 파이프라인 빌드 시 snk 파일 다루는 방법 - Secure file
12525정성태2/1/202117896개발 환경 구성: 531. Azure Devops - 파이프라인 실행 시 빌드 이벤트를 생략하는 방법
12524정성태1/31/202117680개발 환경 구성: 530. 기존 github 프로젝트를 Azure Devops의 빌드 Pipeline에 연결하는 방법 [1]
12523정성태1/31/202120711개발 환경 구성: 529. 기존 github 프로젝트를 Azure Devops의 Board에 연결하는 방법
12522정성태1/31/202123029개발 환경 구성: 528. 오라클 클라우드의 리눅스 VM - 9000 MTU Jumbo Frame 테스트
12521정성태1/31/202120217개발 환경 구성: 527. 이더넷(Ethernet) 환경의 TCP 통신에서 MSS(Maximum Segment Size) 확인 [1]
12520정성태1/30/202119495개발 환경 구성: 526. 오라클 클라우드의 VM에 ping ICMP 여는 방법
12519정성태1/30/202119081개발 환경 구성: 525. 오라클 클라우드의 VM을 외부에서 접근하기 위해 포트 여는 방법
12518정성태1/30/202137558Linux: 37. Ubuntu에 Wireshark 설치 [2]
12517정성태1/30/202124166Linux: 36. 윈도우 클라이언트에서 X2Go를 이용한 원격 리눅스의 GUI 접속 - 우분투 20.04
12516정성태1/29/202120762Windows: 188. Windows - TCP default template 설정 방법
12515정성태1/28/202123210웹: 41. Microsoft Edge - localhost에 대해 http 접근 시 무조건 https로 바뀌는 문제 [3]
12514정성태1/28/202123566.NET Framework: 1021. C# - 일렉트론 닷넷(Electron.NET) 소개 [1]파일 다운로드1
12513정성태1/28/202118748오류 유형: 698. electronize - User Profile 디렉터리에 공백 문자가 있는 경우 빌드가 실패하는 문제 [1]
12512정성태1/28/202121421오류 유형: 697. The program can't start because VCRUNTIME140.dll is missing from your computer. Try reinstalling the program to fix this problem.
12511정성태1/27/202120779Windows: 187. Windows - 도스 시절의 8.3 경로를 알아내는 방법
12510정성태1/27/202121600.NET Framework: 1020. .NET Core Kestrel 호스팅 - Razor 지원 추가 [1]파일 다운로드1
12509정성태1/27/202119657개발 환경 구성: 524. Jupyter Notebook에서 C#(F#, PowerShell) 언어 사용을 위한 환경 구성 [3]
12508정성태1/27/202120843개발 환경 구성: 523. Jupyter Notebook - Slide 플레이 버튼이 없는 경우
12507정성태1/26/202121238VS.NET IDE: 157. Visual Studio - Syntax Visualizer 메뉴가 없는 경우
... 46  47  48  49  50  51  52  53  54  55  56  57  58  59  [60]  ...