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조차도 "그 프로젝트" 이후로 안 하다 보니 감을 잃은 것 같습니다. ^^
정성태

... 151  152  153  154  155  156  157  158  159  160  161  162  163  164  [165]  ...
NoWriterDateCnt.TitleFile(s)
916정성태8/25/201021096개발 환경 구성: 85. 가상 네트워크에 LAN 어댑터 보이거나 감추는 방법
915정성태8/24/201039253개발 환경 구성: 84. Hyper-V의 네트워크 유형 (2)
913정성태8/22/201028328오류 유형: 104. Hyper-V 관리자 - VM 생성 오류 (VHD 생성 오류)
912정성태8/20/201030231.NET Framework: 183. 구조체 포인터 인자에 대한 P/Invoke 정의파일 다운로드1
911정성태8/19/201027112오류 유형: 103. System.Reflection.TargetException파일 다운로드1
910정성태8/19/201037904개발 환경 구성: 83. Hyper-V의 네트워크 유형 (1)
909정성태8/18/201033316오류 유형: 102. System.MissingMethodException
908정성태8/17/201024302개발 환경 구성: 82. Windows Virtual PC의 네트워크 유형 (3)
907정성태8/14/201021806개발 환경 구성: 81. Windows Virtual PC의 네트워크 유형 (2)
906정성태8/13/201030734개발 환경 구성: 80. Windows Virtual PC의 네트워크 유형 (1)
905정성태8/8/201032893Team Foundation Server: 39. 배치 파일로 팀 빌드 구성 [2]파일 다운로드1
904정성태8/8/201035612오류 유형: 101. SignTool Error: No certificates were found that met all the given criteria. [2]
903정성태8/6/201032504Team Foundation Server: 38. TFS 소스 코드 관리 기능 (4) - Branch
902정성태8/5/201024849Team Foundation Server: 37. TFS 2010의 소스 서버 수작업 구성
901정성태8/4/201024115Team Foundation Server: 36. TFS 소스 코드 관리 기능 (3) - Label
900정성태8/3/201026756Team Foundation Server: 35. TFS 소스 코드 관리 기능 (2) - Shelveset
899정성태8/2/201028836Team Foundation Server: 34. TFS 소스 코드 관리 기능 (1) - Changeset
898정성태7/31/201028358.NET Framework: 182. WCF의 InactivityTimeout [1]파일 다운로드1
897정성태7/26/201129559.NET Framework: 181. AssemblyVersion, AssemblyFileVersion, AssemblyInformationalVersion [4]
896정성태7/25/201036345.NET Framework: 180. C# Singleton 인스턴스 생성 [2]
895정성태7/25/201020204VS.NET IDE: 68. Visual Studio 2010 - .NET 1.1 원격 디버깅
894정성태7/25/201026144오류 유형: 100. Could not find the Database Engine startup handle. [1]
893정성태7/25/201027255오류 유형: 99. .NET 4.0 설치된 윈도우 7에서 SQL Server 2008 R2 설치 오류
892정성태7/9/201029041오류 유형: 98. 영문 윈도우에 한글 SQL Server 2008 R2 설치할 때 오류 [4]
891정성태7/8/201024860오류 유형: 97. MsiGetProductInfo failed to retrieve ProductVersion for package with Product Code = '{...}'. Error code: 1605. [2]
889정성태7/5/201026555.NET Framework: 179. Dictionary.Get(A) 대신 Dictionary.Get(A.GetHashCode())를 사용해서는 안 되는 이유 [1]
... 151  152  153  154  155  156  157  158  159  160  161  162  163  164  [165]  ...