Step by Step 3: HelloPhone UX 디자인 (Expression Blend 사용)

‘Step by Step 2: HelloPhone 사용자 인터페이스 디자인’에 연결되는 내용입니다. 먼저 읽어보고 오세요.

 

▼ 지난 번 Step 2에서 만든 결과물(왼쪽)과 이번 Step 3의 결과물(오른쪽)의 차이입니다.

▼ 아래와 같이 애니메이션도 추가됩니다. (480p를 선택하면 깔끔하게 보입니다)

 

▼ 먼저 이전에 만들었던 HelloPhone 프로젝트를 엽니다.

▼ MainPage.xaml 파일 위에서 마우스 오른쪽 단추를 누르고, Open in Expression Blend를 클릭합니다.

▼ Expression Blend가 실행되고, 아래와 같은 보안 확인 창이 나타납니다. YES를 누릅니다.

▼ 먼저 Windows 메뉴를 눌러 Design 모드로 되어 있는지 확인하세요.

Expression Blend 에서 현재 작업 영역 선택

▼ Click Me 단추를 선택한 뒤, 마우스 오른쪽 단추를 눌러 Edit Template –> Create Empty를 누릅니다.

※ 이 작업을 수행하면 Click Me 버튼이 보이지 않게 됩니다. 두려워 하지 마시고 따라 해보세요.

버튼을 위한 빈 컨트롤 템플릿 만들기

▼ Create ControlTemplate Resource 대화 상자가 나오면 Name(Key)를 FancyButton으로 입력하고 OK를 누릅니다.

▼ Objects and Timeline 패널에 있는 Grid 요소의 위에서 마우스 오른쪽 버튼을 눌러 Change Layout Type –> Border를 클릭합니다.

템플릿의 루트 레이아웃 컨테이너 변경

▼ Appearance 에서 각 측면에(상하좌우) 대해 BorderThickness 속성 값을 2 로 설정한 후 CornerRadius에 15를 넣습니다

경계 요소의 모양 구성

▼ Brushes 부분에 있는 Background를 클릭한 뒤 아래쪽에 있는 Gradient brush를 누릅니다.

▼ 좌, 우측 색은 아래와 같이 설정해 주세요.(귀찮으시다면 설정하지 않으셔도 됩니다)

버튼 배경을 위한 Gradient Brush 구성

▼ Assets 패널로 전환하고 Controls 범주를 선택한 후 TextBlock를 더블 클릭해서 삽입합니다.

도구 상자에서 TextBlock 컨트롤 삽입

▼ 이제 버튼 모양에 흡사하게 변해 가고 있습니다

▼ Objects and Timeline의 TextBlock을 클릭해 주세요.

Border 경계 내에 새 TextBlock 이 중첩된 모습을 보여주는 Objects and Timeline 패널

▼ 선택 모드로 바꿔 주세요.

▼ Properties 패널에서 Brushes 범주를 확장하고 Foreground 브러시를 흰색으로 지정합니다.

버튼 전경색 설정

▼ 이제 Layout 범주에 있는 HorizontalAlignment 및 VerticalAlignment를 Center로 해주세요.

그리고 Margin 속성을 좌/우 10, 상/하 4 설정합니다.

캡션의 여백과 정렬 속성 구성

▼ Common Properties 범주에서 TextBlock 옆에 있는 작은 Advanced options 단추를 클릭합니다.

▼ Template Binding –> Content 선택

▼ Text 속성이 “Click Me”(버튼의 Content 속성에 현재 설정된 값)로 변경되고 속성이 노란색 외곽선으로 표시되어 템플릿에 연결되었음을 알려줍니다.

템플릿의 Text 속성 바인딩

▼ File –> Save를 클릭합니다.

▼ Project –> Run Project를 클릭합니다.

▼ 원하는 텍스트를 입력하고 Click Me를 누르면 아래에 나타나는 것을 볼 수 있습니다.

1단계 완료!!

▼ Objects and Timeline 패널에서 Border 컨트롤을 선택합니다.

▼ States 패널을 클릭하고…

Base 상태가 선택된 States 패널

▼ FocusStates 범주에서 Unfocused 상태를 클릭합니다.(버튼에 포커스가 없을 때 발생하는 상태를 기록)

Expression Blend 에서 상태 기록

▼ Properties 패널에서 Brushes 범주를 확장하고 BorderBrush 속성을 선택합니다.

▼ Show advanced properties를 클릭하고 브러시의 Opacity 속성을 0 으로 설정합니다.

Unfocused 상태의 경계 투명하게 만들기

▼ 아래와 같이 변합니다. 포커싱되지 않은 상태에서는 보이지 않게 되었죠.

▼ 이번에는 Pressed(눌려진) 상태를 클릭해 봅니다.

▼ Properties 패널에서 Transform 범주를 확장하고 X 및 Y 값을 2 로 설정합니다.

※ 클릭할 때 버튼 위치가 약간 바뀌어서 버튼의 눌러진 사실을 눈치채도록 합니다. 아주 미세하게나마 말이죠.

Pressed 상태 중 버튼 위치 이동

▼ States 패널에서 Base 템플릿을 선택해서 기록 모드를 종료합니다.

▼ 저장을 하구요,

▼ 실행해 봅니다.

▼ 텍스트박스를 클릭하고, Pause/Break를 누르면 키보드로 입력된다고 알려 드렸습니다. 이렇게 원하는 문장을 입력하고

▼ 탭을 누르다 보면 Click Me 버튼이 포커싱(Focused) 되는 것을 볼 수 있습니다.

▼ 포커싱 된 단추를 클릭하거나 키보드의 스페이스 바로 누르면 아래에 입력했던 문장이 출력됩니다. 단추를 누르고 있을 때(Pressed) 상태도 확인해 보시기 바랍니다.

2단계 끝! 이번에는 애니메이션을 추가해 볼 차례입니다.

 

▼ Window –> Workspaces –> Animation을 선택합니다.

▼ 애니메이션 편집 모드로 바뀌었습니다.

▼ Objects and Timeline 패널에서 FancyButton (Button Template) 요소 옆에 있는 Scope Up 버튼을 눌러 페이지의 요소 트리를 표시합니다.

▼ Objects and Timeline 패널에서 New 를 클릭해서 스토리보드를 생성합니다.

애니메이션 모드의 Objects and timeline 창

▼ Create Storyboard Resource 대화 상자에서 Name(Key)을 AnimateBanner로 정해줍니다.

텍스트를 애니메이션으로 표시하는 새 스토리보드 만들기

▼ Objects and Timeline 패널의 요소 중에서 BannerTextBlock를 클릭합니다.

▼ 타임라인 플레이헤드를 1초 오프셋 위치에 가도록 클릭합니다.

타임라인 플레이헤드의 시간 오프셋 변경

▼ Properties 패널로 전환하여 Transform 범주를 확장하고 Scale 변환을 클릭합니다.

▼ X 속성 값을 -1 로 설정합니다. 이 전환은 수평 축을 따라 요소를 회전시킵니다.

스케일 전환을 적용하여 텍스트를 거울면 이동시킴

※ 마치 마이크로소프트 오피스 파워포인트에서 제공하는 ‘회전’ 애니메이션 효과와 같죠.

▼ 타임라인 패널로 돌아가 보면, 시간 오프셋에 새로운 키 프레임(작은 회색 원)이 생긴 것을 볼 수 있습니다.

애니메이션 스토리보드에 만들어진 새 키 프레임

▼ 이번에는 타임라인 플레이헤드를 2초 위치에 둡니다.

▼ 다시 한 번, Properties 패널로 전환하여 Scale 전환을 선택합니다. X 속성 값을 다시 1로 맞춰주세요.(애니메이션이 원상태로 복귀합니다)

▼ 이번에도 키 프레임이 만들어 진 것을 확인하실 수 있습니다.

삽입된 키 프레임을 보여주는 Objects and Timeline 패널

▼ AnimateBanner 왼쪽에 있는 빨간색 원을 클릭, 기록 모드를 일시적으로 해제합니다.

기록 모드 해제

▼ BannerTextBlock 요소를 마우스 오른쪽 버튼으로 클릭하고 Edit Text를 누릅니다.

▼ 테스트 용이니, 그 어떤 단어를 입력하셔도 좋습니다.

▼ 애니메이션 테스트를 위해, 타임라인 위의 Play 버튼을 눌러주세요.

애니메이션 재생

▼ 텍스트가 중간 축을 중심으로 가로로 회전하는 것을 볼 수 있죠?

애니메이션에서 보여주는 움직임의 전 구간의 속도가 같습니다.

이번엔 그 속도를 조금 다르게 지정해 보겠습니다.

 

※ 감속/가속 함수를 적용하여 키 프레임 사이의 보간을 변경함으로써 애니메이션을 더욱 자연스럽게 만듭니다.

▼ 첫 번째 키 프레임을 선택합니다.(작은 회색 원 클릭)

▼ 아래와 같이 테스트용으로 입력한 문장이 뒤집어져 있는 것을 볼 수 있습니다. 한창 애니메이션 되는 중간(50% 지점)의 모습이죠.

▼ Properties 패널의 Easing 범주에서 EasingFunction 을 선택하고 목록을 확장합니다.

▼ 사용 가능한 EasingFunction 중에서 Cubic Out을 클릭하세요.

※ 키 프레임에 접근할 때 전환 속도를 줄입니다.

감속/가속 함수를 적용하여 키 프레임 사이 보간

▼ 두 번째 키 프레임을 선택하고,

▼ 이번에는 Cubic InOut 함수를 클릭합니다.

CubicI nOut 감속/가속 함수 선택

▼ 다시 한 번 Play 해 보죠.

▼ 재생하는 모습입니다.

※  빠른 속도로 회전하기 시작해서 텍스트가 거울면 대칭 이동하면서 속도가 느려지고, 다시 속도가 빨라지고, 마지막으로 다시 한 번 속도가 줄어들어 원래 위치로 돌아가는 것을 볼 수 있습니다.

지금까지 만든 애니메이션 스토리보드는 아직 프로젝트에서 사용되지 않는 리소스인 채로 남아 있습니다.

 

이제 실제 동작 가능하도록 활성화 시켜 줘야겠죠?

▼ Window –> Workspaces –> Design 보기로 전환합니다.

▼ Projects 창에서 MainPage.xaml 옆에 있는 화살표(▼)를 클릭합니다.

▼ MainPage.xaml.cs를 더블 클릭합니다.

▼ 아래의 소스를 ClickMeButton_Click 메소드의 끝에 추가합니다.

this.AnimateBanner.Begin();

※ 이 위치입니다.

▼ 그리고 아까 테스트용으로 추가했던 텍스트를 지울 차례입니다. MainPage.xaml 파일로 전환해 주세요.

▼ 시험삼아 적었던 문장을 삭제합니다.(다른 것은 지우지 말고, 안의 텍스트만 삭제해 주세요)

▼ 이렇게 지워 주세요.

▼ 이제 키보드의 F5를 눌러 실행해 보면 됩니다. 잘 동작하나요?

▼ 마지막으로 실행되는 모습을 한번 보죠.

▼ Expression Blend를 끄고 Visual Studio로 돌아오면 아래와 같은 메시지가 나타납니다. 변경된 부분을 적용하기 위해, Yes to All 단추를 눌러 주세요.

수고하셨습니다!

▼ 소스 다운로드

• HelloPhone_step3.zip(66.1KB)

 

이번 포스트에서 다룬 실습 내용들은 모두 Microsoft에서 제공하는 Windows Phone 7 Training Course에 의한 것입니다. 한글로 된 자료 또한 제공되는데요, 해당 PDF문서(01-HelloPhone-KOR.pdf, 1.94MB)는 Windows Phone 7 앱 시리즈 웹 사이트에서 제공되고 있으니 많은 이용 바랍니다.(서진호 부장님 고맙습니다)

이미 지난 7월 중순에 한번 해 본 내용이지만, 연말에 와서 저 스스로 한번 실습해 보고, 스크린 샷을 찍고, 동영상을 짤막하게 만든 뒤 업로드하고, 원문 PDF 파일을 확인하며 Windows Live Writer로 글을 적으니 7시간이 훌쩍 지나갔습니다. 이렇게 해서 HelloPhone 프로젝트가 하나 완료되었군요. 앞으로도 상당히 ‘노가다’성 작업으로 시간을 보내게 될 것 같습니다. 하지만 한 분이라도 더 이 글을 봐 주셨으면 하는 마음으로 업로드 합니다. 하나의 프로젝트가 너무 잘게 나뉘거나 너무 길지 않도록, 적절히 나누는 것도 고려해 봐야 하겠습니다.

읽어 주셔서 감사합니다. 다음 강좌를 기다려 주세요.