[Expression Blend] Intro_to_Basic_Interactivity

 

지난 포스트에서 동영상을 인코딩하는 방법을 다룬데 이어서 이번에는 블랜드를 활용하여 코드로 이벤트를 만드는 작업을 조금더 보완하고자 합니다. 물론 이번에도 기존의 프로젝트가 있어야 진행이 되기 때문에 다음과 같이 첨부해드립니다. 받으셔서 블랜드로 실행시키면 됩니다.

 

SL02SP1EN010_Intro_to_Interactivity.zip

 

Interaction이라는 게 뭘까요? 제가 생각하기에는 사용자가 어떤 개체에 Action을 가했을 때 그 개체가 상호적으로 나타내는 Action이 아닐까 하는 생각을 해봅니다. 요새 많은 관심을 끌고 있는 UI나 UX의 분야가 바로 이 인터렉션의 상위 개념이고 이런 행동양식을 설계하는 것을 보통 인터렉션 디자인이라고 일컫는 것 같습니다. 아무튼 제일 효과적인 반응은 사용자가 목적으로 하는 개체를 선택했을 때 뭔가 깜빡이고 이동하는 애니메이션이 생기면 적절하지 않을까요? 그걸 표현해보겠습니다.

 

 

기존에 스토리보드가 딱 두개 형성되어 있습니다. 지난 포스트를 보신분들이라면 잘 아시겠지만 스토리보드란 하나의 애니메이션 표현 공간입니다. 이중 첫번째의 FabrikamAnimation을 선택해줍니다. 참고로 애니메이션을 수정할거니까 WorkSpace를 Animation으로 선택해주면 좋겠지요?

 

 

이상태에서 애니메이션의 재생버튼을 누르게 되면 우측 상단에 있던 우주선이 대각선을 그리면서 내려오는 것을 볼 수 있습니다. 이번에는 다른 스토리보드인 LogoAnimation을 선택해주고 실행해보면 로고가 페이드효과를 나타내면서 깜빡이는 것을 확인할 수 있습니다.

 하지만 지금의 상태는 이벤트만 있는 것이지 실제로 실행시키면 아무 동작도 나타나지 않습니다. 총을 쏠때도 사전에 해야 하는 작업이 바로 방아쇠를 당기는 작업이지요. 이처럼 어떤 이벤트를 실행함에 있어서 필요한 사전 조건을 트리거라고 합니다. 이 이벤트트리거를 만드는 것이 이번 포스트의 목적입니다.

 이제 이 이벤트 트리거를 코드로 구현하고자 하는데 지난 포스트에서 말했던 것처럼 블랜드내의 코드뷰는 인텔리센스를 지원하지 않기 때문에 자동완성이 되지 않습니다. 그래서 조금 번거롭지만 Visual Studio를 실행시켜서 거기서 코드를 생성하는 것이 여러면에서 편합니다. 다음과 같이 Visual Studio로 코드를 엽니다.

 

 

Page.xaml 하위로 Page.xaml.cs 라는 파일이 숨겨져 있습니다. 이를 마우스 우클릭을 통해서 VS로 들어가면 됩니다.

 

코드가 딱 실행되면 Page란 메서드안에 InitializeComponent()라는 메서드가 포함되어 있습니다. 이것이 바로 이 앱이 딱 실행되었을 때 맨먼저 실핼되는 메서드 입니다. 아마 예상하건데 xaml상에서 배치한 디자인 뷰가 이 메서드에서 구현이 되는 건 아닐까 생각합니다. 이 Page 메서드 상에서 아까의 스토리보드를 호출할 수 있습니다. 맨처음 스토리부터 불러오면 다음과 같이 됩니다.

 

 

이게 바로 인텔리센스입니다. 블랜드에서는 이렇게 자동완성이 안된다는 겁니다. 이걸 선택한 후에 딱 마무리를 이렇게 지어주면 됩니다.

 

 

이게 바로 처음 실행될때 애니메이션도 같이 동작하게 하는 마법의 문구입니다. 대단히 직관적입니다. 자 이 상태에서 저장한 후에 블랜드상에서 Test를 하면 다음과 같이 동작합니다.

 

 

그런데 위와 같은 상황은 엄밀하게 말하면 트리거가 '앱이 실행될때'입니다. 이는 사용자의 반응과 상관없이 일어나는 이벤트이므로 인터렉션이라고 보기에는 힘든 겁니다. 그럼 해당 이동개체에 직접적으로 이벤트를 삽입하는 건 어떨까요? 일단 저 우주선을 선택하고 Properties 창을 확인합니다.

 

 

VS도 마찬가지이지만 저 옆에 있는 번개모양이 바로 이벤트를 생성해주는 창입니다. 이를 눌러주면 기존의 Properties와는 다른 창이 생성됩니다. 이중 마우스 왼쪽을 눌렀을 때를 이벤트 트리거로 삼았을때 그때의 이벤트에 대고 더블클릭을 하면 이벤트가 자동으로 생성됩니다. 물론 직접 이름을 넣어줘도 상관없습니다.

 

 

그럼 블랜드상에서도 cs 파일에 자동으로 이벤트가 생성되는데 저장하고 다시 Visual Studio로 넘어오면 다음과 같이 되어 있을 겁니다.

 

 

이제 저 아이콘을 마우스로 눌러주기만 하면 괄호안에 작성할 내용들이 실행되는 형식을 취하게 될겁니다.

이제는 실행될 때가 아닌 눌렀을 때의 이벤트이므로 Page 메서드에 들어있던 시작 이벤트를 새로 만든 이벤트에다가 삽입해줍니다.

 

 

자 다시 저장하고 실행해보면 다음과 같습니다.

 

 

가만히 있다가 클릭했을때 개체가 움직이는 것이 보이시죠? 이게 인터렉션이 되는 거지요.

아까 FabrikamAnimation이 있었고 또하나가 LogoAnimation이 있었지요. 스토리보드를 LogoAnimation으로 바꾸고 다른 이벤트를 삽입해보겠습니다. 이번에는 충돌 이벤트인 MouseEnter로 해보겠습니다. 사실 정확한 표현은 MouseHover가 맞을거 같은데 아무튼 이 이벤트는 해당 개체에 마우스 커서가 닿았을 때 발생하는 이벤트입니다. 역시 더블클릭을 통해서 이벤트를 생성하고 저장후 Visual Studio로 넘어옵시다. (참고 VS상에서 어떤 창이 뜨는데 그 창의 내용은 블랜드상에서 변경 내용이 있는데 이걸 VS상에서도 적용시키겠느냐 하는 겁니다. 반대로 VS상에서 변경시킨걸 블랜드에서 켜보면 똑같은 창이 뜹니다. 이때는 그냥 yes를 선택해주면 됩니다.)

 

 자 역시 이벤트가 생겼으니까 그 이벤트안에 아까와 같은 형식을 취해주면 될겁니다.

 

 

짠 됬습니다. 이제 실행시켜보면 끝인거죠.

 

 

이런식으로 이벤트를 생성하고 해당 애니메이션을 제어할 수 있습니다. 이를 응용한다면 더욱 효과적인 인터렉션을 구현할 수 있지 않을까요? 여기까지였습니다.