[SketchFlow 따라하기] Working with Components

지난 포스팅에 이어서 4번째 내용입니다. 지난 시간과 마찬가지로 첨부파일을 통해서 계속 진행해보도록 하겠습니다.

05.zip

 

처음보면 이런창으로 되어 있는데 이번 시간에 다룰 Component 개념을 설명하기 위해서 window에서 새로운 것을 삽입해야합니다. 바로 Object and timeline 창입니다. 상단 메뉴바에서 해당란을 선택해주시면 좌측하단에 다음과 같이 창이 삽입됩니다.

 

Expression Blend에서 이 Objects and Timeline 창은 중요한 역할을 합니다. 물론 이미지를 변경시키거나 꾸미는 것은 아니지만 적어도 창의 배치를 어떻게 할지는 결정할 수 있습니다. 그리고 무엇보다도 애니메이션을 삽입할 수 있다는 게 큰 특징이지요.

 사실 위의 Welcome 페이지에선 지난 시간에 배경을 삽입하고 네비게이션 바를 만들었는데 이중 배경은 다시 건들 일이 없습니다. 이 부분은 그냥 고정시키는게 다른 개체를 수정하는데도 편리하겠지요. 고정시키는 기능은 다음과 같이 지정하면 됩니다.

 

위 사진과 같이 자물쇠 모양이 걸린 것이 바로 고정된 상태입니다. 이 상태에서 배경은 고정이 된 것이기 때문에 마우스로 선택하려고 해도 선택이 안됩니다.

이제는 네비게이션 바를 수정할 차례입니다. 물론 지금 배경이 고정된 상태에서 수정할 수도 있지만 이 개체만을 따로 따서 수정하는 방법도 있습니다. 우선 마우스를 통해서 네비게이션 바를 전체 선택해주고 마우스 우클릭을 통해서 들어갑니다.

 

위에 있는  Make Into Component Screen 을 선택해주면 따로 선택된 개체만을 수정할 수 있습니다. 이름을 정해주게 되면 밑의 flowMap상에 새로운 개체가 생성됩니다.

 

거기다가  MainWindow상에도 아까 선택한 개체들만 따로 뽑아져서 나오게 됩니다. 이 개체는 Welcome 페이지에서 파생되었기 때문에 화살표를 자세히 보시면 Welcome쪽으로 가 있는 것을 확인할 수 있습니다.

 

그리고 Welcome 페이지로 돌아와보면 아까 뽑아져서 나온 개체위에 느낌표가 뜨게 됩니다. 자 이제 네비게이션 바의 기능을 하기 위해서 각각의 버튼에 네비게이팅 기능을 삽입해줘야 합니다. 그전에 앞서서 FlowMap상에서 이동 방향에 대한 지정이 있어야 합니다. 위의 사진에도 나와 있지만 지금은 Welcome으로만 가는 화살표 하나만 존재할 뿐입니다. 물론 이 NaviBar를 통해서 다른 페이지로 넘어가기 위해서는 해당 페이지에도 화살표가 있어야 하겠지요. 방법은 간단합니다. 그냥 해당 NaviBar를 선택한 후 원하는 페이지로 드래그 해주면 됩니다. 각각의 페이지를 연결하면 다음과 같이 구성됩니다.

 

일부 분들께서는 다음과 같이 구성할 수도 있지 않나 하는 의문을 가질 수 있습니다.

 

NaviBar에 가져갔을 때 뜨는 메뉴중 Connect an Existing Screen을 선택한 상태에서 원하는 페이지로 끌면면 역시 페이지간에 선이 형성됩니다. 그런데 이것과 위와의 차이는 무엇일까요? 이건 직접 해보시면 확인할 수 있습니다.

<Connect an Existing Screen으로 연결한 상태>

<바로 드래그로 연결한 상태>

 

차이점을 아시겠나요? 바로 드래그를 통해서 연결하면 그 개체가 해당 스크린에 계속 뜨게 됩니다. 그래서 어디서든 네비게이션 바를 이용할 수 있는 겁니다. 그런데 후자에 소개시킨대로 이미 존재한 페이지로 연결하는 기능을 선택하면 네비게이션 바는 나타나지 않습니다. 그냥 연결 고리만 형성된 셈이지요. 네비게이션 바의 특성상 그냥 바로 드래그로 연결해주는게 좋겠지요.

자 이제 각 페이지에 네비게이션 바가 형성되었으므로 각 페이지로 가서 위치를 재정렬해줍니다. 그냥 기본 상태로 놔두면 기본 설정이 좌측 상단에 위치해 있을 겁니다. 이걸 가운데, 또는 보기 좋은데에 놔두는게 필요합니다. 다른 것도 한번 수정해보도록 하지요. 일단 저는 예제 동영상에 나온것처럼 배치하였습니다.

 

이런 과정을 마친 후 Project의 build solution을 선택하면 정해준 위치에 네비게이션 바가 생성됩니다.

자 이제는 네비게이션 바를 꾸밀 차례입니다. FlowMap상의 초록색 NaviBar를 더블클릭합니다. 당연히 아까 따로 뽑은 네비게이션 바가 뜨겠지요. 초기 상태는 모두 선택한 상태이므로 먼저 개체 바깥을 눌러서 해제한 후 바깥 테두리 네모가 선택되게끔 합니다. 다음부터 설명할 내용이 Expression Blend에서의 중요한 항목인 Properties입니다. 기본창에는 생성되 있지 않으므로 Window 메뉴를 통해서 Properties를 활성화 시켜줍니다.

 

그럼 다음과 같이 메뉴가 뜨게 됩니다.

 

type에는 어떤 개체가 선택되어 있는지를 확인 할 수 있습니다. 위와 같이 sketchrectangle이 선택되어 있는지를 확인한 후 밑의 색을 수정하게 되면 그에 해당하는 색상이 네비게이션 바의 배경색으로 선택되게 됩니다.

 

이와 같은 설정은 다른 페이지상에서도 적용되어 있는 것을 확인할 수 있습니다.

지금까지 한 내용을 다른데 적용시켜보겠습니다. flowMap상에 LiveChat이라는 페이지가 있습니다. 그 개체를 전체 선택한 후 아까와 같은 Make Into Component Screen 을 해보겠습니다.이름은 Chat으로요.

그럼 역시 FlowMap상에 생성되는데 원래의 LiveChat간의 링크를 끊어보도록 하겠습니다.

대다수 분들이 여기서 Del키가 먹힐 거라고 생각하실 수도 있겠지만 이 flowMap 상에서는 수작업을 해줘야 합니다.

위와 같이 마우스 우클릭을 통해서 Delete를 지정해줘야 없어집니다. 그 후에 자기가 원하는 페이지로 드래그하면 항상 떠있는 Chat Component가 완성됩니다.

(사실 동영상에는 Make Into Component Screen상에 원래와의 링크를 확인하는 체크박스가 있었는데 여기는 없네요..)

이런 Component는 위처럼 Screen상에서도 뽑아올 수 있지만 아예 사용자가 flowmap 상에서도 만들 수 있습니다. 바로 Map 상에 마우스 우클릭을 통해 해주면 됩니다.

 

여기까지가 전반적인 Component에 대한 설명이었습니다.