[SketchFlow 따라하기] Adding Navigation Screens in SketchFlow

어떻게 SketchFlow라는 툴은 정말 계륵같은 존재인 듯합니다. 막상 겉에서 보기에는 좋아보이기는 하는데 실제로 건들여보면 굳이 이런 작업을 해야하나 싶을 정도로 느껴집니다. 하지만 윈도폰용 Sketchflow를 다룰 때도 말씀드렸지만 이 툴은 단순한 개발자의 툴이 아닌 기획자가 직접 그려보면서 앱의 개요을 만들 수 있기 때문에 그런 용도에서는 가장 최적화된 툴이 아닐까 싶네요. 아무튼 인터넷에 이와 관련한 강좌가 있어서 소개해보고자 합니다.

우선 보신 분들도 아시겠지만 이 SketchFlow는 Expression Blend에 껴서 설치됩니다. 이번 포스팅에서 다룰 내용은 Silverlight를 활용해서 하나의 프로그램을 만들어보고자 합니다. 

우선 Expression Blend를 여시고 지난번 윈폰용 SketchFlow 프로젝트를 만들었던 것과 달리 Silverlight용으로 엽니다.

일단은 기본적인 화면은 다음과 같이 뜹니다.

그냥 흰 스크린만 달랑 하나 있습니다. 지금 보이는 스크린이 바로 Map상에서 Screen 1 이라고 이름 붙여진 것입니다. 물론 이 것들을 여러 개 복제해서 하나의 FlowChart를 그릴 수 있습니다. 하지만 일단은 필요없는 창을 제거하고 재배치하는 작업을 해보고자 합니다.

지금 하는 작업으로 설정된 창은 바로 Design이라는 이름으로 고정된 Workspace입니다. 물론 이 취향을 다른식으로 바꾸고 해당 이름으로 바꿀 수 있습니다. 우선 지금 나와있는 창 중에서 필요없는 것이 Object & Timeline 그리고 Animation,Properties 패널입니다. 이 것들을 제거하면 다음과 같이

이런식으로 깔끔하게 창을 정리할 수 있습니다. 이러한 창 배치를 고정하고 싶으면 Windows란 항목의 Save를 이요하시면 됩니다.

저는 이름을 ProtoTyping이라고 지정했는데 만약 그렇게 지정하면 Workspace에 만든 창배치가 저장됩니다.

다음으로 해볼 것은 SketchFlow만의 특징인 Sketchflow map을 그리는 것입니다. 우선 가운데에 Screen 1 이라는 이름의 페이지가 존재합니다. 이를 더블클릭하면 이름을 바꿀 수 있는 기능이 형성됩니다. 일단 이름을 Start이라고 바꿉니다.

이제 다음으로 새로운 페이지를 삽입할 차례입니다. 맨처음 생성된 스크린에 마우스를 가져가면 아래와 같이 메뉴가 활성화됩니다.

물론 각각이 가진 기능이 다르지만 이번에는 새로운 스크린을 만드는 것이 목적이므로 제일 좌측에 있는 Conected screen을 만드는 것을 선택합니다. 여기서 단순히 선택만 하는 것이 아니라 자신이 원하는 위치로 마우스를 드래그하면 됩니다. 역시 이 것도 이름을 Welcome이라는 이름으로 바꿉니다.

이렇게 연결된 스크린이 형성됩니다. 이런식으로 여러개를 만들 수 있습니다. 다음과 같이 한번 만들어 볼까요?

여기서 map 상에서 아예 스크린을 만들 수 있습니다. 그냥 맵상에서 자신이 원하는 위치에 마우스 우클릭을 통해서 만시면 됩니다. 이건 이름을 ReviewCart라고 지정합니다.  

그러면 이렇게 생성된 스크린을 네비게이션을 통해서 이동하려면 연결시켜줘야 합니다. 이때는 아까 메뉴중 두번째 항목을 선택합니다.

이걸로 원하는 스크린까지 선을 이어줍니다.

이 작업을 다른 스크린끼리도 해주면 하나의 지도가 형성됩니다.

대략적으로 이렇게까지 만들면 되겠습니다.

이번에 할 작업은 각각의 스크린에 Title을 다는 겁니다. 우선 다시 Welcome 스크린을 선택해주고 옆에 있는 Assets 항목을 봅니다. 보면 참 많은 항목들이 있는데 그중에 Style - SketchStyle을 선택하면 여러가지가 리스트로 뜹니다. 그중에서 아래쪽에 있는 TitleCenter를 선택해서 원하는 위치에 올려놓습니다. 그런 다음 내용을 Welcome으로 바꿉니다.

가령 이렇게 TitleCenter의 크기가 적당하지 않는데 이 것이 안 잡히는 경우가 발생합니다. 이때는 단축키 v키나 옆의 selection 툴을 사용하면 됩니다.

이런식으로 다른 스크린에도 titleCenter를 삽입합니다. 

이제 실행을 해야 하는데 그전에 주목해야 할 점이 있습니다.

아까 Connection을 연결할때 화살표가 있는걸 확인하셨나요? 이것이 바로 네비게이션시 방향을 지시해주는 겁니다. 그래서 방향이 가리키는 쪽으로만 이동이 가능합니다. 만약 양방향으로 이동하고 싶다 하면 다른페이지에서도 출발점으로 Connection을 연결해주면 되겠지요.

이렇게 말입니다. 다른 스크린도 이런식으로 연결해봅니다.

자 이제 f5키를 눌러서 실행해봅니다. 그러면 SketchFlowPlayer라는 것이 생기면서 프로그램을 테스트해볼 수 있게끔 됩니다. 우리가 맵사이를 이동할 수 있는 방법은 두가지가 있습니다. 첫번째는 Navigate를 통한 방법입니다.

아까와 같이 맵이 형성되어 있으면 해당페이지에서 어디로 넘어갈 수 있는지에 대한 리스트가 뜹니다. 이를 직관적으로 바라볼 수 있는 기능이 두번째로 소개해드릴 맵이라는 겁니다. 옆에 MAP이라고 된 부분을 선택해주시면 어딘가에 아까 만들어놓은 Sketchflowmap이 보입니다. 여기서 해당 스크린을 누르면 바로 이동할 수 있습니다. 다음은 결과 영상입니다. 

지금까지 설명해 드린 내용이 바로 이 포스팅의 제목이기도한 SketchFlow에서 Navigation Screen을 삽입하는 방법이었습니다.