ZZANGMYON BLOG♡

Interactivity

XAML, C#, and Visual Basic Code Editing

이제는 Blend 에서 XAML 뿐만 아니라 C#과  Visual Basic 코드도 수정할 수 있게 되었습니다. 더욱이 코드를 수정할 때 인텔리센스나 이벤트 핸들러 생성 등이 지원되어 더 빠르게 할 수 있습니다. 기존의 xaml과 간단한 C# 코드 다루던 디자이너들은 이제 비주얼 스튜디오를 켜지 않아도 됩니다. 그리고 xaml 인텔리센스가 지원되어 속성을 다 외우지 않아도 되니 정말 좋네요.


Data

Using sample data

실제 데이터에 직접 접근하지 않고도 테스트용 데이터에 연결된 애플리케이션을 만들 수 있습니다. 데이터 패널을 사용하여 샘플 데이터를 만들거나 XML 파일에서 샘플 데이터를 불러올 수 있습니다. 이러한 데이터들은 디자인을 할 때 사용되며 세부 항목들을 커스터마이징 할 수 있습니다. 그리고 실행 시에 실제 데이터와 샘플데이터를 쉽게 바꿀 수 있습니다. 직접 해보니 낯설은 기능이라서 어떻게 쓰는지 잘 모르겠더군요. 샘플 데이터를 생성하고 리스트박스와 같은 컨트롤을 만들어 준 다음 데이터를 넣으니 들어갑니다. 실행해보니 화면에는 나타나지 않지만, 블렌드의 아트보드에 나타나기 때문에 스크롤바와 같이 아이템이 들어가야만 나타나는 컨트롤들을 디자인 하기가 쉬워졌습니다.

Data binding

Blend 3 Preview 에서는 새로운 데이터 바인딩 기능을 포함하고 있습니다. 

- Objects and Timeline 패널안의 컨트롤에 데이터 패널로 부터 데이터아이템을 드래그앤 드랍 할 수 있습니다. 리스트박스 컨트롤을 생성하고 데이터 패널에서 아이템을 끌어다 넣으면 데이터가 바인딩됩니다.
- Silverlight 3 에서는 하나의 오브젝트 속성을 또 다른 오브젝트의 속성과 바인딩 할 수 있습니다. 컨트롤 속성끼리 바인딩을 시키니 프로그래밍을 하지 않고도 많은 부분을 제가 처리할 수 있게 되었습니다.
- Silverlight 3 애플리케이션에서는 DataGrid 컨트롤을 지원합니다. WPF에서는 툴킷을 설치해야 하는데 Silverlight 에서는 포함이 되어서 나오는군요. 이 외에도 많은 컨트롤들이 추가되었습니다.
- 데이터 패널에서 List view 와 Details view 모드를 지원합니다. List view 모드로 놓고 데이터를 아트보드에 끌어 넣으면 데이터소스 전체가 들어가게 되고 Details view 모드로 놓고 끌어 넣으면  세부 항목만 들어가네요.
- 데이터 컨텍스트 바인딩 지원이 향상되었습니다.
- 데이터 스키마를 순차적으로 정의할 수 있어서 데이터가 연결된 애플리케이션 개발이 가능하게 합니다.


Silverlight

Silvrlight 3 support

Expression Blend 3 Preview 버전에서 Silverlight 3 애플리케이션을 생성하고 수정할 수 있습니다. 위에서도 말했지만 Silverlight 2 프로젝트를 열으려고 하면 대화상자가 나타나 Silverlight 2 프로젝트를 Silverlight 3 으로 업데이트 할 것인지 물어봅니다. 확인을 눌러 업데이트를 하게 되면 Silverlight 3 프로젝트로 작업을 계속 할 수 있습니다.

Web Site support

Silverlight 으로 새 프로젝트를 생성하려고 하면 Silverlight Application + Web Site 으로 된 프로젝트 타입이 추가되어 있는 것을 알 수 있습니다. 그래서 Silverlight 애플리케이션 만으로도 생성이 가능하고, 웹사이트가 연결되어 있는 프로젝트로도 생성이 가능합니다.


Source file version control

TFS support

Microsoft Visual Studio 2008 Team Foundation Server 를 지원합니다.  솔루션과 프로젝트에서 Checking, Checking out, Merging 등과 같은 공통 소스 작업을 할 수 있습니다.

Animation

More properties available to animate

Silverlight 프로젝트에서 예전보다 더 많은 프로퍼티를 키프레임에 녹화할 수 있습니다. Appears 패널의 Advanced property 옵션을 열면 이전 버전보다 프로퍼티가 몇개 더 추가되어 있습니다. 예를 들어 전에는 키프레임에서 StrokeLineJoin 을 Mirter에서  Round로 변경해도 적용이 안되었는데 이제는 이런 세부적인 프로퍼티도 적용이 되는군요.

Better support for easing in Silverlight

프로퍼티 패널의 EasingFunction 을 이용하여 키프레임마다 지정된 Easing을 선택하여 적용할 수 있습니다. 기존에는 KeySpline 곡선만을 이용해 가/감속도를 조절했다면 이제는 더 다양한 종류로 표현할 수 있게 되었습니다. KeySpline곡선에도 포인트 추가를 할 수 있다면 좀 더 작업자가 편하지 않을까 생각해봅니다.

Animating to resource values

리소스를 가져와 애니메이션을 줄 수 있습니다. 예를 들어 색상 리소스의 Static 값을 가져와 변경할 수 있습니다. 색상 리소스에서 색을 가져온 다음 프로퍼티 패널의 Brush > Editor 에서 색을 변경하여 사용하면 됩니다. 이전에는 Resource Dictionary가 WPF에서만 지원되었는데 이제 Silverlight 에서도 지원됨으로써 리소스를 등록하여 가져다 쓸 수 있습니다.


Text

Improved embedding of fonts and subsets of fonts

Silverlight 와 WPF 프로젝트에서 폰트의 서브셋을 생성하고 적용할 수 있게 되었습니다. Font Manager 에서 설치된 폰트를 선택하여 부분적인 특성을 커스터마이징 할 수 있습니다. 많이 사용해서 쓰진 않았지만 예전보다 조금 더 세부적으로 기능이 추가 된 것을 확인하였습니다.


Extensibility

Extensible Asset Library

어셈블리가 들어있는 디렉토리를 등록하여 Asset Library에 있는 컨텐츠를 사용할 수 있습니다. 어셈블리를 만들어 직접 만든 아이콘이나 다른 것들을 사용할 수 있습니다.

Artboard extensibility

WPF와 Silverlight의 API의 확장성이 좀 더 정교해졌습니다. 아트보드에서 확장하여 쉽게 다룰 수 있다는 것이 특징입니다. 여기서 말하는 API는 UI와 관련된 컨트롤 정도인 것 같습니다.

Extensible project templates

Blend 3 Preview에서는 확장된 프로젝트 템플릿을 지원합니다. 새로운 프로젝트와 항목을 추가할 경우 Siverlight 3 Application +  Web Site 나 ChildWindow, Resource Dictionary 와 같이 확장된 프로젝트나 항목을 생성할 수 있습니다.


Workspace

Docking and workspace configuration

모든 패널에 도킹 기능을 넣어 작업 영역이 확장되었습니다. 또한 사용자의 취향에 맞게 인터페이스를 변경하고 이름을 주어 저장할 수 있습니다. 여러가지 형태의 인터페이스를 저장하여 상황에 맞게 불러오면 됩니다.

Direct selection improvements

직접 선택하기 전에 MouseOver 되는 오브젝트들의 테두리가 선택할 오브젝트를 구분하기 쉬워졌습니다. 그룹 안에 있는 오브젝트에도 마찬가지로 MouseOver 되는 오브젝트가 표시되어서 편리합니다. 그리고 이전 장에서도 말씀드렸지만 더블클릭을  해야만 그룹안의 오브젝트가 직접 선택되기 때문에 그룹단위로 이동할 경우 훨씬 편하게 되었습니다.

Marquee selection of points

DirectSelection 툴을 사용할 경우 오브젝트에 원하는 만큼의 영역을 드래그 하면 그 영역 안에 들어있는 포인트만 선택이 가능합니다.

Auto-scroll and zoom improvements

아트보드에서 오브젝트를 이동하거나 리사이즈 할 때 마우스 커서가 아트보드 영역을 넘어가게 되면 늘어나던 스크롤이 멈추게 됩니다. 예를 들어 오브젝트를 이동할 때 아트보드 영역이 넘어가면 스크롤이 막 넘어가는 현상이 있어 매우 불편했는데, 이제는 자동으로 멈추어 오브젝트가 무한정 좌표를 벗어나는 일이 없을 것 같습니다. 그리고 아트보드 영역에서 마우스 휠로 스크롤만 조절이 되었었는데 이제 줌 기능도 같이 적용되어 있습니다. 단축키를 사용할 일이 줄어들 것 같습니다. :)

Keyboard shortcuts and modifier keys

새로운 단축키와 변경된 단축키로 작업이 더 수월해졌습니다. 예를 들어 오브젝트를 복사할 때 Ctrl 키를 써야해서 다른 그래픽 툴들과의 인터페이스 차이가 있어 불편했던 부분이 Alt 키로 변경되어 이제는 헷갈리지 않을것 같아요.



이렇게 몇가지 새로운 기능에 대해서 알아보았습니다. 이밖에도 Perspective 3D와 같은 많은 기능들이 추가 되었습니다. 앞으로 이 2강에서 나온 기능들과 다른 추가기능에 대해서 따라하기 강좌를 진행할 것입니다. 제가 이해가 부족하여 잘못된 설명이 있다면 너그럽게 이해해주시고 코멘트 달아주세요. 그럼 모두 화이팅입니다. :)

Expression Blend 3 Preview가 믹스에서 발표된 지 벌써 20여 일이 지났네요. 이번 버전에서는 어떤 것들이 새로워졌는지 알아보도록 하겠습니다. 아시는 분들도 있겠지만 SkethFlow는 Blend 3 Preview 버전에 포함되어 있지 않기 때문에 정식 버전을 기다려야 할 것 같네요.

설치를 원하는 분들은 아래의 링크를 눌러서 설치하도록 합니다. 그리고 Blend 3 에서 Silverlight 2 프로젝트를 열면
Silverlight 3 으로 자동 업데이트를 할 것인지 물어보는데 Silverlight 2 프로젝트를 가지고 작업하기 위해서는 업데이트를 해야만 합니다.

Expression Blend 3 Preview 설치하기

영어가 익숙치 않아 제 나름대로 해석하면서 블렌드로 다뤄보고 쓴 내용이니 혹시 틀린 부분이 있다면 코멘트를 달아주시기 바랍니다. (참고 원문: http://expression.microsoft.com/ko-kr/dd565875(en-us).aspx)

그럼 이제 하나씩 살펴보도록 하겠습니다.

Design

Importing Photoshop and Adobe Illustrator files

많은 디자이너들이 바래왔던 부분인 것 같은데요. 프로젝트에 Adobe사의 PhotoShop(.psd)파일과 Illustrator(.ai)파일을 직접 불러올 수 있게 되었습니다. 그리고 Blend 안에서 불러들인 파일들을 손쉽게 수정할 수 있다고 합니다. 제가 직접 파일을 불러들여 보니 AI의 경우에는 blend나 mash 등과 같이 정교한 효과를 준 것들은 만족스럽지 않지만 간단한 패스로 이루어진 파일들은 깨짐이 없이 잘 불러지네요. PSD의 경우에도 레이어가 잘 살아 있습니다. 다만 복잡한 레이어로 구성된 파일을 불러온다면 용량에 문제가 없는지 살짝 고민해봅니다.

Effects

이것 또한 많이 기대했던 부분입니다. 그래픽(비트맵) 효과 인데요. 기존에는 WPF에서만 몇 가지의 효과를 지원했었는데 이제 Silverlight에서도 가능합니다. Asset Library를 열어 Effects 탭을 누르면 사용할 수 있는 효과가 있습니다. 원하는 효과를 선택해서 오브젝트에 드래그 하면 바로 적용이 됩니다. 효과의 정도는 Properties 패널에서도 수정할 수가 있습니다. 그런데 WPF를 하시던 디자이너 분들은 당황할 수도 있겠습니다.(저도 그랬듯이;;) 효과를 수정할 수 있는 패널이 바뀐데다가 기존에 들어있던 Outer glow나 Emboss와 같은 효과들이 사라졌습니다. 그러나 앞으로는 Asset Library에 더 많은 효과를 등록하여 사용할 수 있을 것입니다.

Gradient tool improvements

이전 버전에서보다 Gradient 툴이 더욱 강화 되었습니다. 그라데이션이 적용된 오브젝트의 offset 값을 직접 움직여서 바꿀 수 있게 되었네요. Alt 키를 눌러 stop 포인트를 추가할 수 있고, stop 포인트를 더블클릭하면 바로 색상 패널이 나와서 색을 넣을 수 있습니다. 그라데이션을 변경하기 위해서 굳이 Properites 패널을 사용하지 않아도 될 듯 합니다. 그리고 그라데이션의 각도를 변경하거나 기울이는 상세 기능과 그라데이션 반전과 같은 기능들이 추가 되었습니다.

Layout operation improvements

아트보드에서 오브젝트를 다룰 때 조금 더 일관되게 하고 예측할 수 있게 되었습니다. 부모패널을 바꾸거나 오브젝트를 그룹화 할 때 레이아웃 속성과 바인딩이 보호되고 불필요하게 코드를 생성하지 않는다고 합니다. 사실 제대로 이해를 잘 못하겠습니다만, 직접 해 보니 제가 느낄 수 있는 것은 오브젝트를 그룹화 하고 이동할 경우 좀 더 수월해 졌다는 것입니다. 이전에는 그룹화 하여도 이동할 때에 오브젝트가 낱개로 선택이 되어서 불편한 감이 있었습니다. 제가 찾지 못한또 다른 점이 있을지 모르겠네요.^^;(도와주신 공도님 땡수~).

Design-time annotations

마이크로소프트의 Visio 코멘트처럼 아트보드에 주석을 달아 팀 멤버끼리 커뮤니케이션을 향상시킬 수 있습니다. 생성된 주석을 수정할 수 있는 패널이 따로 있지 않아서  더블 클릭하고 바로 수정해 주면 됩니다. XAML코드를 살펴보면 이 주석은 실제 레이아웃 상에 존재하지 않기 때문에 실행되는 동안에는 보이지 않습니다.


Skinning

Creating templates from artwork

Make Into Control 메뉴를 통하여 컨트롤의 모양을 바꿀 수 있습니다. 이 메뉴로 각 컨트롤이 특정한 역할을 하게끔 지정할 수 있게 됩니다. 예를 들어 슬라이더 컨트롤의 템플릿 안 HorizontalThumb의 Part Assignment를 clear합니다(메뉴 이름은 Clear Part Assignment). 그리고 사각형을 하나 넣은 다음 그 사각형을 슬라이더 컨트롤의 HorizontalThumb로 지정하여 사용할 수 있습니다. 예전의 스타일을 생성하여 다른 컨트롤을 다시 넣어주던 방법보다는 조금 더 편리할 것 같습니다.

Improved support for VSM

VisualStateManager에서는 컨트롤의 더 많은 State를 지원합니다. 그리고 이러한 State가 본래의 XAML에서 정의된 것 인지 아닌지 상관하지 않습니다. 그러나 States 패널에서 하나 이상의 State 그룹이 변경될 경우 경고 표시가 나타납니다. 예를 들어 체크박스의 경우, 오브젝트의 CommonStates와 CheckStates의 상태를 중복하여 Property를 변경하게 되면 Behavior에 따라 제대로 적용되지 않을 수 있기 때문인 것 같습니다.

State pinning

State 그룹에서 각 State 별로 접었다 폈다 할 수 있습니다. 그래서 하나의 State만 변경할 경우 나머지 State들은 접어둘 수 있어 더 편리해졌습니다.

Editing state transitions

Objects and Timeline panel에서 스토리보드를 선택하여 State의 transition을 변경할 수 있습니다. 그런데 이 기능은 원래 있던 것이 아닌가 싶은 생각이 드네요.

Drawing into state

특정 State 에서 생성한 오브젝트는 해당 State 실행 시에만 나타나게 됩니다. 만약 MouseOver State에서 오브젝트를 생성하게 되면 다른 State에서는 나타나지 않고 MouseOver일 경우에만 나타날 것입니다.





나머지 부분은 2장에 이어서 하도록 하겠습니다.