[SketchFlow 따라하기] Working with States in SketchFlow

이번 포스팅에서 해볼 일은 시각적으로 State에 따른 상황 변화를 줄 예정입니다. 이전과 마찬가지 첨부파일을 열고 Expression Blend로 열어봅시다.

07.zip

자 우선 Flowmap 상의 LiveChat을 지난 시간에 링크를 건 것처럼 Bindings 창에 드래그를 해봅시다 그럼 당연히 Bindings 페이지 상에도 LiveChat Component가 생성될 겁니다. 

그런데 생각을 해보면 항상 LiveChat 창이 떠 있어야 하는걸까요? 좀만 생각해봅시다. 상담원이 24시간 있는 것도 아닐거고 그리고 항상 떠 있는 것보다는 필요한 사람한테만 뜨는 건 어떨까요? 그래서 등장하는 개념이 바로 State입니다. 이 개념은 Expression 상에서도 Window - State 창을 통해서 확인할 수 있습니다. 아마 여러분들이 프로젝트로 여셨을 때는 기본적으로 좌측 상단의 메뉴중 하나로 나타날 겁니다. 

우리가 나눌 수 있는 State는 바로 기본적으로 안보일 때와 보일 때입니다. 물론 개발자의 필요에 따라서 여러 state를 나눌 수 있는데 우선 State를 삽입하려면 위의 버튼을 누르면 됩니다. 2가지의 State가 있지만 현재 한 것은 그룹을 생성하는 것이기에 한번만 누르면 됩니다. 그러면 다음과 같이 그룹이 생성됩니다. 이름을 ChatAppear라고 짓습니다. 

 

다음으로 State를 삽입해야 되기 때문에 두번 눌러줘야 하겠지요.

다음과 같이 State를 생성하고 각각의 이름을 지어줬습니다. 그런데 Main창에 빨간색 녹화 버튼이 뜨는 것이 보입니다.이게 지금 상태를 녹화하고 있다는 의미입니다. 이때 해주는 동작들 모두를 기억해주는 것이지요.

이제 신경써야 할 부분은 지난 시간에도 다뤘던 Properties 입니다. 아까 State창은 Default 상태를 선택한 상태에서 전환되어야 합니다. 

LiveChat를 선택한 상태에서 Opacity 즉 투명도를 조절해야 합니다. 평소에는 당연히 이 Chat component가 없어야 합니다. 그렇기 때문에 이때는 Opacity를 0으로 해줍니다. 이 과정을 Base라고 되어 있는 State에서도 Opacity가 0 이 되어야 합니다.

반드시 Default State가 켜진 상태에서 다음 동작이 진행되어야 합니다. Opacity를 줄인다면 위와 같이 투명하게 나옵니다. 이제 State에 제대로 녹화되었는지를 State를 변화시켜보면서 확인해봅니다. 실제로 어떻게 돌아가는지를 확인해보기 위해서 f5키를 눌러봅니다. 그리고 Bindings 페이지로 넘어가면 이전에 못보던 창이 뜨게 됩니다.

바로 이 표시가 각각의 State를 나타내는 창입니다. 그래서 아까 녹화되었던 동작들이 여기서 이뤄지게 되는 것이지요. 한번씩 눌러서 확인해보시면 아까 동작이 그대로 나타날 겁니다.

그런데 이렇게만 주는 것은 아미 의미가 없습니다. 그리고 LiveChat Component가 등장하는 것도 폼이 없습니다. 그래서 등장하는 것이 바로 Transition입니다. 이 Transition이라는 건 다음 상태로 넘어가기까지의 효과라고 보시면 될 듯합니다. 여기서 시간을 주면 그 시간만큼의 지연이 발생하는 것이지요. 

위의 Transition duration을 1s로 설정하면 각 State로 전환시의 움직임이 조금 부드러워집니다. 

자 이제 추가적으로 LiveChat 창의 하단의 버튼을 눌렀을 때 Activate가 되는 것을 구현해보고자 합니다. 사용자 입장에서 도움을 구하는 사람한테만 버튼을 눌렀을 때 LiveChat 창이 딱 뜨는 것이지요. 

일단 지금도 계속 녹화 상태가 떠있을 겁니다. 이를 끄기 위해서는 위의 base State를 눌러주면 됩니다. 

버튼에 그 기능을 삽입하기 위해서는 원하는 버튼을 마우스 우클릭으로 선택해주시면 됩니다. 그럼 이전에 못보던 항목이 떠 있습니다. 바로 Activate State입니다. 그리고 여기에는 아까 생성했던 State들이 다 떠있게 됩니다. 

우리는 당연히 눌렀을 때 Chat창이 떠야 하겠지요 이 때의 State를 선택해줍니다. 

마지막으로 각 State에 대한 페이지의 상태를 점검해보세요. 지금까지 언급한 대로라면 

Base와 Default 상태에서는 Chat 창의 Opacity가 0 ChatAppear_on 상태에서는 opacity가 100이어야 합니다.

State를 Activate 시키는 것도 해봤습니다. 남은 건 결과 영상이겠지요.

어떤가요? 초반에 생각했던 내용보다 잘 나타나지 않나요? 이를 다른 부분에서 응용해도 되는 겁니다.  

여기까지가 State에 따른 동작을 시각적으로 표현하는 방법이었습니다.