안녕하세요, 정진희입니다.
이번시간에는 스케치플로우에 대해서 간단한 팁을 드리고자 합니다.
제가 블랜드 4를 새로 설치하고 나서 제일 먼저 찾아 본 것은 스케치플로우의 목업 컨트롤 들입니다.


그런데 블랜드 4를 설치하고 나니 이 컨트롤들이 Asset패널에서 보이지 않는 경우가 있습니다.
런타임 및 디자인타임 시에는 안 보이는데요.
간단하게 DLL파일 및 필요파일들을 복사하여 상단에 Asset에 보이도록 할 수 있습니다. 






1) 블랜드를 오픈합니다. 그러면 Welcome Screen이 나타나는데요.
여기서 Sample > MockupDemonstration에서 가져오도록 하는데요.  
이 샘플 폴더의 DLL 위치는 대부분 유저컴퓨터 내에서 하단의 수순을 밟고 있습니다.





2) Design폴더와 Dll파일이 보이는데요. 두개를 복사합니다.



3) 하단의 폴더에 붙여넣기 합니다.



4) Expression Blend 4 를 Restart하시면 Asset 카테고리에서 확인할 수 있습니다.



네, 프로그램 버그인지 제가 프로그램을 잘 못깔아서 그런지 제거도 해보고 재설치도 해봤는데 프로그램 문제는
아니더군요. (블랜드 팀 블로그에는 이미 저번달에 이 포스트를 올려놨더군요.. -_-a 찾아보지 못한 제 탓)
혹시 저 같이 스케치플로우 목업 컨트롤을 못 찾고 헤매시는 분들에게 도움이 되었길 바랍니다.
그럼 다음 강좌와 팁에서 뵙겠습니다

스케치플로우의 프로그램을 90초만에 설명해주는 동영상입니다.
스케치플로우를 처음 접하는 분들에게 이 툴이 무엇인지에 대한 궁금증의 대답이 될 것 같네요 :D

Team Name : 앗싸 고도리!
주제 : 시계 위젯 어플리케이션 입니다. (Watch Widget App) 
화려한 애니메이션으로 스케치플로우의 장점을 살렸는데요.
화면을 배치하는 컨텐츠가 간단한 편의 어플리케이션이라 진행이 빨리 되서 그런지 샘플 이미지 까지 해주셨습니다.




Team Name : 젊은 피

주제 : 북마크를 주제로 실버라이트 홈페이지와 WPF를 동시에 진행 하는 조 입니다. (Book Mark App)
총 4분으로 이루어진 조 인데, 둘로 나누어 한쪽은 실버라이트를, 한쪽은 WPF로 서로 연동하는 어플리케이션을 제작하기로 결정하였습니다.  한 조에 두개를 동시에 진행하기 때문에 기대가 됩니다 :0





스터디 진행 상황을 매주 사진으로 찍어 나날이 발전하는 모습을 기록으로 남깁니다,
추후에 어떻게 진행 되었는지를 나중에 되짚어볼 수 있는 기회가 되었으면 좋겠습니다.

안녕하세요. 정진희입니다.
스케치 플로우에 대해서 계속 강좌를 했는데요, 어떻게 잘 진행이 되셨을지 모르겠네요.


저번시간에 이어 같은 프로젝트를 불러오도록 합니다. 완성된 스케치 플로우를 패키지 해 보도록 하겠습니다
1) 파일 - Package SketchFlow Project를 클릭합니다. 그리고 파일 이름과 위치를 정하고 확인 버튼을 클릭합니다.




2) 그러면 다음과 같이 화면에 창이 뜨면서 작업이 끝나게 됩니다. 패키지가 되었는데요.
여기서 실행할 파일은 응용프로그램이라고 뜨는 파일입니다. 실버라이트의 경우는 TestPage라고 뜨는데요.
더 minimize하게 하려면 WPF윈도우 응용 프로그램인 경우는 다음과 같이 응용프로그램 하나만 따로 저장하여 쓰시면 되고
실버라이트인 경우에는 로드 할 Xap 파일과 함께 테스트 할 페이지 즉, TestPage를 다른 폴더에 저장하셔서 쓰시면 됩니다.

 

3) 다음으로 문서로 Export 하는 방법에 대해서 알아보도록 하겠습니다. 
file -> Export to Microsoft word로 저장하도록 하겠습니다. 그리고 워드문서의 이름과 저장위치를 선택하고 확인버튼을
클릭하도록 하겠습니다.




4) 그러면 오피스 프로그램중에 마이크로 소프트 워드 프로그램이 열리면서 스케치 플로우 작업 했던 것을 문서화 하여
보여줍니다. 그래서 클라이언트나 작업자에게 문서작업 한 것을 간편하게 보내실 수 있습니다.




총 6회 동안 스케치 플로우에 대하여 알아보았습니다. 어떻게 도움이 되셨는지요?
처음엔 스케치 플로우에 대해 잘 쓸 일이 없을 것이라고 생각 했습니다만,
알면 알 수록 도움이 많이 될 프로그램이라고 느낍니다. 수고하셨습니다. 다음엔 다른 강좌로 찾아뵙도록 하겠습니다.

안녕하세요. 정진희 입니다.
저번시간에는 스케치 플로우에 애니메이션을 추가하는 방법에 대해서 알아보았습니다.

저번시간에 만든 프로토 타입을 가져와보도록 하겠습니다.
1) F5를 클릭하여 프로젝트를 실행하면 다음과 같이 화면이 뜨게 됩니다. 실버라이트로 스케치플로우를 만들었을 경우에는
웹으로 뜨게 되지만, 저는 WPF 스케치 플로우를 만들었기 때문에 다음과 같이 윈도우 화면으로 오픈되었습니다.






2) 왼쪽 하단의 탭에서 ① 맵을 클릭하여 ② 피드백을 남길 페이지를 선택한 후, ③ 사용자 의견에서 ④ 글을 남깁니다.



3) 글로 쓰는 법 외에 직접 잉크, 펜, 지우개 툴을 이용하여 다음과 같이 화면에 직접 그려가며 피드백을 할 수 있습니다.



4) 이렇게 피드백을 남긴 작업을 파일로 저장하려면 오른쪽의 파일을 클릭하여 내보내기를 클릭합니다.



5) 이렇게 파일이 만들어졌습니다.
다시 블랜드로 돌아와서 이렇게 만든 피드백을 불러들여오도록 하겠습니다.
창 -> 사용자 의견을 클릭하여 패널을 화면에 보이도록 합니다.




6) 패널이 열리게 됩니다. 여기서 +버튼을 클릭하여 피드백을 불러들입니다.
 

불러온 피드백 파일은 블랜드에서 이렇게 직접적으로 보여지게 됩니다.
피드백을 남긴 페이지에는 다음과 같이 맵 패널에서 전등모양이 나타나게 되며 사용자 의견 패널에서는
누가 작성하고 몇시에 남겼는지 나타나게 되어, 피드백 파일을 계속 추가해도 어떤것이 가장 최근것인지
시간과 작성자를 통해 알 수 있습니다.

안녕하세요, 정진희입니다.
저번시간에는 맵을 Link 하는 기능을 배워보았습니다.

먼저 저번강좌까지 만든 프로젝트를 블랜드에서 열고, 애니메이션을 줄 페이지를 선정해보도록 하겠습니다.
저는 메인페이지에 애니메이션을 넣어 효과적으로 보이도록 해볼텐데요.
다음 그림과 같이 메인 페이지가 로드 되었을 때 순서대로 화면에 나타나도록 하겠습니다.


1) Map Panel에서 Main을 더블클릭하여 아트보드에 나타나도록 합니다. 스토리보드를 생성하시려면
상단에 나타나는 스케치 플로우 애니메이션의 +버튼을 클릭하면 스토리보드가 작성됩니다.


+버튼을 클릭하면 애니메이션 녹화가 시작되었다는 빨간 박스가 보여지게 됩니다.  
그리고 상단에는 화면이 뜨게 됩니다.


2) 메인 페이지가 첫 로드했을 때 애니메이션을 실행할 화면 1,2,3의 X비율을 0으로 주도록 합니다.  
      
3) 객체 및 타임라인 패널의 레이어들이 빨갛게 녹화된 것을 보실 수가 있습니다.
그러면 현재 스케치 플로우 애니메이션 첫번째 프레임에 녹화되었다는 것이라고 생각합니다.


4) 다음으로 아래의 그림과 같이 애니메이션 패널에서 현재 프레임에 마우스를 올리면 오른쪽 상단에 애니메이션 프레임을
Add할 수 있는 아이콘이 표시 됩니다. 클릭을 하여 다음 액션을 취할 수 있도록 프레임을 하나 더 추가합니다.




5) 이번에는 컨텐츠의 X좌표 값을 1로 주어 본래의 모습으로 돌아오는 애니메이션을 주도록 합니다.

애니메이션을 끝내기 위해 기본(Base) 프레임을 클릭하여 애니메이션을 종료합니다.
그리고 스케치 플로우에서 실행할 때도 처음에는 컨텐츠가 보이지 않게 하기 위하여 x값을 0으로 설정해 줍니다.

6) F5를 눌러 실행하여 Main 화면으로 가면 왼쪽 상단에 방금 만들었던 애니메이션 전구가 보여지게 됩니다.
클릭을 하면 방금 만든 애니메이션이 실행이 됩니다.


테스트를 해 보았는데요. 애니메이션의 가감속도가 없어서 조금 느리게 느껴집니다.
다시 작업환경으로 돌아옵니다. 그리고 애니메이션에 가감을 주도록 하겠습니다.

7) 두번째 프레임을 선택하여 애니메이션 녹화로 들어갑니다. 개체 및 타임라인 패널에 보시면 다음과 같은 아이콘이 보이는데요.
이것을 클릭하면 자신이 만든 애니메이션의 키가 보여지게 됩니다.



키를 전부 선택하여 1초 뒤로 위치를 옮겨줍니다.
속성창의 가속 감속 그래프를 자신이 임의대로 그려줍니다.
그리고 처음의 상태를 기록하기 위해 0프레임에 키를 찍어줍니다.


 8) 다시 F5를 클릭하여 실행해 봅니다. 이번에는 가속감속이 추가가 되어 더욱 액티브하게 보여집니다.
오늘은 조금 복잡한 설명이였는데, 잘 따라오셨으리라 생각합니다.
작업 파일을 첨부하도록 하겠습니다

안녕하세요. 정진희입니다.

플로우 링크의 방식은 다음과 같습니다.













로그인 - 메인 - 서브 - 서브4에서 로그인으로 돌아가는 방식으로 연결해 주도록 하겠습니다.
저번시간에 작업한 프로젝트를 가져와서 사용하겠습니다.

1) Map Panel에 Login Map을 더블클릭하면 더블클릭이 나타납니다.
여기서 OK를 클릭하면 Main이 나타나도록 링크시키겠습니다.



2) OK 버튼 우클릭 - 탐색 (영어로는 Navigate to) - 링크 걸어야 할 대상 Main 클릭 링크를 걸었습니다.





3) Map panel에서 Main을 클릭하여 페이지를 열고, 방금과 같은 작업을 Sub1,2,3,4에 반복 합니다.


4) 페이지가 링크되었는지 확인하시려면 F5를 클릭하여 실행해 봅니다.
그러면 다음과 같이 화면이 나타납니다. 저는 Expression Blend에서 WPF프로토타입으로 열었기 때문에 윈도우 형식으로 보이게 됩니다. 실버라이트 프로토 타입으로 했다면 웹에서 보여집니다



5) 링크 된 것을 확인 할 수 있습니다. 각 페이지에 링크 시킬 컨트롤들을 위와 같은 방식으로 해주도록 합니다.
마찬가지로 Sub4에서도 Restart를 클릭하면 Login페이지로 돌아가도록 링크를 걸어줍니다.
전체적인 플로우를 완성하였습니다.

안녕하세요, 정진희입니다.
저번에 이어 진행하도록 하겠습니다.

임의로 어플리케이션의 플로우 및 구조를 생각해보고 시작해볼텐데요.
자신이 만들 어플리케이션이 어떤 순서로 진행될 것인지 아이디어를 직접 스케치를 합니다.


러프하게 그린 스케치를 보시면
로그인 화면에서 시작 -> Main -> Sub 1/2/3/4가 있고 Sub4를 클릭하면 로그인 페이지로 다시 돌아가는 맵입니다.
이것을 바탕으로 스케치 플로우를 제작해 보겠는데요.
저번시간에 이미 맵 패널에서 만들어 보았기 때문에 맵은 다 그리실 수 있으실 거라 생각합니다.

1) 그래서 다음과 같이 먼저 구조적인 뼈대를 잡았습니다. 스케치에서 그린 것과 동일하게 느껴지실 겁니다.


2) 여기서 공통적으로 들어가는 로고를 첨부해 보도록 할텐데요.
저번시간과 마찬가지로 컴포넌트 스크린을 삽입한 것과 같이 삽입해보도록 하겠습니다.

로그인 하단에 세번째 버튼을 클릭하셔서 컴포넌트 스크린을 추가 시킵니다.
추가한 컴포넌트 스크린의 이름을 Logo라고 정해주시고 이 Logo의 세번째 버튼을 클릭하여 Main에 연결 짓습니다.
연결 지으면 Logo에 컴포넌트 스크린이 로그인 화면 외에 메인에도 같이 적용됩니다.
이와 같은 방법으로 다른 페이지에도 똑같이 적용시켜줍니다.

다음과 같이 적용이 되었습니다. 보기엔 조금 거추장? 스럽게 되었지만, 이제 각 페이지에 로고를 하나하나 만들 필요없게
되고 컴포넌트 파일만 수정하면 전체 적용이 될 것입니다. 한번 로고 컴포넌트 스크린을 꾸며보도록 하겠습니다.


3) 맵의 로고를 더블클릭하면 화면이 나타나게 됩니다.
화면에 로고의 글씨를 써보도록 하겠습니다. 스케치플로우에서 제공하는 컨트롤 스타일을 써보도록 하겠습니다.
Assets 탭에서 스케치플로우 선택 -> 스타일에서 BasicTextBlock을 선택하여, 아트보드위에 드래그 해 놓습니다.



4) Logo 스크린 화면에 임의로 로고 명과 컴포넌트의 Height값을 100 width : Auto, 그리드 색을 Black으로 주었습니다.

저장해서 다시 빌드해 보시면 로그인 페이지에 이렇게 뜰텐데요.
아까 연결한 나머지 페이지들 Main 및 Sub 페이지에도 다음과 같은 화면으로 동일하게 구성되어 있는 것을 보실 수 있습니다.
이 컴포넌트의 정렬을 좌우정렬 stretch로 적용합니다.



5) 로그인 페이지를 열어서 화면을 구성하도록 하겠습니다.
로그인페이지를 더블클릭하셔서 오픈하신 후 Asset 패널에서 자신이 사용하고자 하는 컨트롤들을 가져다 씁니다.

저는 BasicTextBox-Sketch 및 버튼 등을 사용하여 만들었습니다.



6) 이렇게 스케치 플로우에서 제공하는 컨트롤들을 가지고 만들어보았습니다.
마찬가지로 Assets에 있는 컨트롤로 메인페이지와 Sub페이지를 만들어줍니다.
화면에 그려주는 컨트롤들은 다 제공되기 때문에 가져다 쓰실 일 외에는 힘들일 필요 없이 이렇게 쓰실 수 있습니다.
구조적인 것을 생각하고 나면 그리는 데에는 시간이 별로 걸리지 않는 것 같습니다.




다음강좌에서 진행하도록 하겠습니다.

안녕하세요. 정진희 입니다.
이번강좌는 블랜드 3에서 set로 같이 포함된 +SketchFlow 에 대해서 알아보도록 하겠습니다.


한번 파일을 열어보도록 하겠습니다.
1) WPF나 Silverlight 중 자신이 하고자 하는 프로젝트가 윈도우 기반이시면 WPF SketchFlow로 오픈하시기 바랍니다.
저는 WPF로 열었습니다. 그리고 확인을 누릅니다.




2) 그러면 다음과 같이 작업 환경이 보이게 됩니다.



3) Map Panel에서 다른 스크린 페이지를 만들어보도록 합니다. 맵에서 Screen1에 마우스를 갖다대면 이런 모양이 나오는데요.



스크린 1에서 다른 페이지로 연결을 추가시키려면 첫번째 아이콘을 클릭하고 잡아 끌어주면 화살표가 연결되면서
다음과 같은 모양으로 나옵니다.



4) 이런식으로 또 스크린 2에 만들어보도록 합니다. 하나의 스크린에 여러개를 연결할 수도 있습니다.


5) 중요하다거나 영역이 다르면 4번째 아이콘을 클릭하여 다른 태그의 색상으로 변경하여 줍니다.



6) 3번째 아이콘을 한번 클릭해보도록 합니다. 컴포넌트 스크린을 삽입했기 때문에 다른 스크린과는 다르게 점선으로 연결되어 있습니다. 


그리고 같은 컴포넌트를 스크린 2에서도 사용할 경우 3번째에 정렬한 아이콘을 클릭하여 스크린 2에 연결할 수 있습니다.
항상 상단이 고정이거나 같은 파일로 된 경우 이런 방식으로 사용하면 될 듯 합니다 -



sketchFlow Map에 대한 사용법을 알아봤습니다. 다음강좌에서 계속 이어집니다.