실버라이트 2 인 액션

실버라이트 2

인 액션

iv

•목 차•

01장 실버라이트소개 1

1.1 실버라이트는 여러분의 인생을 즐겁게 해줄 것이다! .................... 2

1.1.1 생산성 ......................................................................... 2

1.1.2 성능 ............................................................................ 3

1.1.3 이동성 ......................................................................... 4

1.2 왜 디자이너와 개발자들은 사이좋게 일하기가 힘들까? ................. 6

1.2.1 개발자 경험 .................................................................. 8

1.2.2 디자이너 경험 ............................................................... 8

1.3 XAML ................................................................................ 9

1.3.1 코드비하인드 ............................................................... 9

1.3.2 네임스페이스 ..............................................................11

1.3.3 복합 속성 ...................................................................13

1.3.4 연결된 속성 .................................................................14

1.4 블랜드와 함께 작업하기 .........................................................15

1.5 요약 ...................................................................................24

02장 웹과의조화 25

2.1 실버라이트와 HTML DOM의 관계 ...........................................26

2.1.1 HTML Document 객체 모델............................................27

2.1.2 실버라이트 플러그인 .....................................................28

2.1.3 실버라이트 객체 모델 ....................................................29

2.2 실버라이트 플러그인 생성하기 ................................................30

2.2.1 실버라이트 유틸리티 파일: Silverlight.js ...........................31

2.2.2 실버라이트 플러그인의 인스턴스 생성하기 ........................32

v

2.3 실버라이트 플러그인 통합하기 ................................................33

2.3.1 실버라이트 응용프로그램과 HTML DOM 연결하기 .............34

2.3.2 초기환경 설정하기 ........................................................37

2.3.3 플러그인 이벤트 다루기 .................................................42

2.3.4 초기화 매개변수 전달하기 .............................................44

2.4 실버라이트 응용프로그램 모델 ................................................46

2.4.1 매니페스트 파일 ...........................................................47

2.4.2 실버라이트 응용프로그램 ...............................................47

2.4.3 응용프로그램 부속물 .....................................................51

2.5 HTML DOM과 상호작용하기 ..................................................52

2.5.1 관리 코드에서 웹 페이지를 관리하기 ................................52

2.5.2 사용자의 브라우저 윈도우 다루기 ....................................57

2.5.3 스크립팅의 세계와 관리 코드의 세계를 연결하기 ................61

2.6 요약 ...................................................................................65

03장 기본으로돌아가기:배치와텍스트 66

3.1 여러분의 상상력을 위한 캔버스 ..............................................67

3.1.1 캔버스에 콘텐트 배치하기 .............................................68

3.1.2 캔버스: 강력한 성능상의 이점 ........................................71

3.2 스택패널 ............................................................................72

3.3 강력한 그리드 패널 ...............................................................74

3.3.1 그리드 안에 콘텐트 배치하기 ..........................................75

3.3.2 크기 변경하기 .............................................................77

3.3.3 프로그래밍을 해서 그리드 제어하기 ................................81

3.3.4 셀 크기 조절하기 ..........................................................82

3.4 텍스트 보여주기 ..................................................................85

3.4.1 폰트 속성들 .................................................................88

3.4.2 흐름 제어 ....................................................................92

3.4.3 텍스트 속성들 .............................................................92

3.4.4 간격 설정하기 ..............................................................95

vi

3.5 UIElement와 FrameworkElement ............................................97

3.5.1 속성들 .......................................................................98

3.5.2 메서드 ...................................................................... 104

3.6 요약 ................................................................................ 106

04장 사용자와의상호작용다루기 107

4.1 지원하는 장치에 대한 이해 .................................................. 108

4.1.1 키보드 이벤트 수집하기 ............................................... 108

4.1.2 마우스 입력받기 ......................................................... 112

4.2 텍스트 컨트롤 사용하기 ....................................................... 116

4.2.1 기본적인 텍스트 다루기 ............................................... 116

4.2.2 보안에 민감한 데이터 수집하기 ..................................... 119

4.3 버튼 컨트롤 ....................................................................... 120

4.3.1 Button ...................................................................... 122

4.3.2 HyperlinkButton ......................................................... 123

4.3.3 RadioButton .............................................................. 124

4.3.4 CheckBox ................................................................. 126

4.4 ItemsControl ...................................................................... 127

4.4.1 ListBox ..................................................................... 128

4.4.2 ComboBox ................................................................ 130

4.4.3 TabControl ................................................................ 131

4.5 날짜 컨트롤 ....................................................................... 134

4.5.1 Calendar ................................................................... 134

4.5.2 DatePicker ................................................................ 136

4.6 숫자 범위에서 선택하기 ....................................................... 138

4.6.1 ProgressBar 사용하기 .................................................. 139

4.6.2 Slider 구현하기 .......................................................... 140

4.7 프롬프트 띄우기 ................................................................. 140

4.7.1 다이얼로그 박스 띄우기 ............................................... 141

4.7.2 파일 입/출력을 위한 프롬프트 ...................................... 143

vii

4.8 그 밖의 잡다한 컨트롤들 ...................................................... 146

4.8.1 경계선 생성하기 ......................................................... 146

4.8.2 드로잉 입력정보 수집하기 ............................................ 147

4.9 요약 ................................................................................. 151

05장 데이터바인딩알아보기 152

5.1 데이터 바인딩하기 .............................................................. 152

5.1.1 바인딩 구문 마스터하기 ............................................... 153

5.1.2 바인딩 모델 선택하기 .................................................. 156

5.2 데이터 소스 이해하기 .......................................................... 158

5.2.1 속성에 바인딩하기 ...................................................... 158

5.2.2 객체 바인딩하기 ........................................................ 160

5.2.3 컬렉션 바인딩하기 ...................................................... 161

5.3 원하는 대로 화면 변경하기 ................................................... 163

5.3.1 바인딩 시에 값을 컨버팅하기 ........................................ 164

5.3.2 데이터 템플릿 생성하기 ............................................... 167

5.4 데이터 그리드 .................................................................... 170

5.4.1 데이터 표시하기 ......................................................... 170

5.4.2 그리드 데이터 편집하기 ............................................... 177

5.4.3 아이템 정렬하기 ......................................................... 177

5.5 Language Integrated Query (LINQ) ........................................ 179

5.5.1 LINQ 소개하기 .......................................................... 179

5.5.2 LINQ to Objects ........................................................ 183

5.5.3 LINQ to XML ........................................................... 184

5.5.4 여러 데이터 타입을 LINQ를 통해서 연결하기 ................. 187

5.6 요약 ................................................................................. 188

06장 네트워킹과통신 189

6.1 신뢰성, 보안 그리고 브라우저의 한계 ..................................... 190

viii

6.1.1 신뢰성 문제의 모든 것 ................................................. 190

6.1.2 응용프로그램 안전하게 만들기 ...................................... 194

6.1.3 브라우저 제약사항 ...................................................... 195

6.2 데이터소스 연결하기 ........................................................... 196

6.2.1 SOAP 서비스 사용하기 ............................................... 196

6.2.2 REST를 위한 시간 ...................................................... 202

6.3 유용한 데이터로 만들기 ....................................................... 207

6.3.1 POX 읽기 ................................................................. 207

6.3.2 JSON 변환하기 .......................................................... 211

6.3.3 공개 피드 읽기 ........................................................... 214

6.4 고급 서비스들 사용하기 ....................................................... 220

6.4.1 WCF 서비스 개선 ....................................................... 221

6.4.2 WCF 이중Duplex 서비스들 ........................................... 222

6.4.3 소켓 연결하기 ............................................................ 227

6.5 요약 ................................................................................. 230

07장 디지털미디어관리하기 231

7.1 생생한 오디오와 비디오 ...................................................... 232

7.1.1 소스에 접근하기 ......................................................... 232

7.1.2 공통 속성들 ............................................................... 237

7.1.3 오디오 전용 속성들 ..................................................... 240

7.1.4 비디오 전용 속성들 ..................................................... 242

7.1.5 미디어 파일의 생명주기 ............................................... 242

7.2 플레이리스트: 웹 기반의 믹스테입 ......................................... 244

7.2.1 클라이언트 플레이리스트 이해하기 ................................ 244

7.2.2 서버 플레이리스트 사용하기 ......................................... 247

7.3 인터랙티브한 재생 .............................................................. 249

7.3.1 재생 상태 조절하기 ..................................................... 249

7.3.2 때에 알맞은 인터랙션 .................................................. 250

7.3.3 전체 스크린 모드로 변경하기 ........................................ 251

7.4 보호된 콘텐트 사용하기 ....................................................... 254

ix

7.4.1 보호된 콘텐트를 요청하기 ............................................ 254

7.4.2 PlayReady 컴포넌트 가져오기 ....................................... 254

7.4.3 보호된 콘텐트 풀기 ..................................................... 255

7.5 이미지를 응용프로그램에서 사용하기 ..................................... 256

7.5.1 기본 이미징 ............................................................... 256

7.5.2 딥 줌 ........................................................................ 257

7.6 이미지 늘리기와 줄이기 ....................................................... 263

7.6.1 저는 별로 이미지를 늘리고 싶지 않아요!......................... 264

7.6.2 균일한 크기 변환 ........................................................ 265

7.6.3 전체 영역 채우기 ........................................................ 266

7.6.4 UniformToFill ........................................................... 267

7.7 요약 ................................................................................. 267

08장 그래픽에대한개념잡기 269

8.1 도형 그리기 ...................................................................... 270

8.1.1 모래 위에 그어진 선 .................................................... 271

8.1.2 Rectangle .................................................................. 272

8.1.3 Ellipse ...................................................................... 273

8.1.4 Polyline .................................................................... 273

8.1.5 Polygon .................................................................... 274

8.2 Geometry .......................................................................... 275

8.2.1 단순 기하 .................................................................. 276

8.2.2 Path 기하 .................................................................. 277

8.2.3 혼합 기하 .................................................................. 278

8.3 브러쉬 .............................................................................. 279

8.3.1 SolidColorBrush ......................................................... 280

8.3.2 LinearGradientBrush .................................................... 281

8.3.3 RadialGradientBrush .................................................... 283

8.3.4 ImageBrush ............................................................... 285

8.3.5 VideoBrush ............................................................... 285

8.4 Transforms ........................................................................ 286

x

8.4.1 RotateTransform ......................................................... 287

8.4.2 ScaleTransform .......................................................... 288

8.4.3 SkewTransform .......................................................... 288

8.4.4 TranslateTransform ..................................................... 289

8.4.5 TransformGroup ......................................................... 290

8.5 블랜드를 사용하여 작업하기 ................................................. 290

8.6 요약 ................................................................................. 298

09장 이미지에생명을불어넣기:애니메이션 299

9.1 애니메이션: 이제 때가 되었다 ............................................... 300

9.2 타임라인 정복하기 .............................................................. 302

9.2.1 어떤 형식의 속성을 애니메이션에 사용하고 싶은가? ......... 302

9.2.2 어디서부터 시작해서 어디로 가고 있나? ........................ 305

9.2.3 얼마동안 애니메이션이 실행되기를 바라는가? ................ 308

9.3 스토리보드 ....................................................................... 312

9.3.1 스토리 보드 이해하기 .................................................. 312

9.3.2 스토리 보드의 대상 속성 접근하기 ................................. 313

9.3.3 스토리 보드 조정하기 ................................................. 316

9.3.4 리소스로 정의하기 ..................................................... 318

9.4 키프레이밍 ........................................................................ 321

9.4.1 보간법들 ................................................................... 323

9.4.2 타이밍 ..................................................................... 326

9.5 요약 ................................................................................. 328

10장 스타일입히기 329

10.1 리소스 다루기 .................................................................... 330

10.1.1 선언적인 리소스들 ...................................................... 330

10.1.2 느슨한 리소스 접근하기 ............................................... 334

10.1.3 리소스 묶기 ............................................................... 336

xi

10.2 엘리먼트에 스타일 입히기 .................................................... 339

10.2.1 모양 정의하기 ............................................................ 341

10.2.2 스타일 적용 대상 지정하기 ........................................... 343

10.3 템플릿 생성하기 ................................................................. 344

10.3.1 컨트롤 템플릿 만들기 .................................................. 345

10.3.2 재사용 가능한 템플릿 생성하기 ..................................... 349

10.4 상태를 이용한 모양 다루기 ................................................... 350

10.4.1 컴포넌트 이해하기 ...................................................... 351

10.5 VisualStateManager 이용하기 ................................................ 353

10.6 효과 공유하기 .................................................................... 357

10.7 요약 ................................................................................. 359

11장 사용자경험향상시키기 361

11.1 격리 저장소에 데이터 저장하기 ............................................. 361

11.1.1 IsolatedStorageFile: 가상 파일 시스템 ............................ 362

11.1.2 파일을 읽거나 쓰기: 격리 저장소 방식 ........................... 368

11.1.3 격리 저장소 관리하기 .................................................. 370

11.2 런타임에 XAML 사용하기 .................................................... 371

11.3 BackgroundWorker ............................................................ 373

11.3.1 작업 수행하기 ............................................................ 374

11.3.2 UI 업데이트하기 ........................................................ 375

11.4 온디멘드 콘텐트 받아오기 .................................................... 379

11.4.1 콘텐트 요청하기 ......................................................... 380

11.4.2 대용량 데이터 요청 관리하기 ........................................ 381

11.4.3 콘텐트 로드하기 ......................................................... 383

11.5 동적 언어 런타임(Dynamic Language Runtime: DLR) ................ 392

11.5.1 동적 타입 정의 ........................................................... 393

11.5.2 Metaprogramming 메타프로그래밍 ................................. 396

11.6 요약 ................................................................................. 398

xii

12장 빛을나누다:배포하기 399

12.1 사용자 컨트롤 생성하기 ....................................................... 400

12.1.1 모양 정의하기 ........................................................... 400

12.1.2 행위자 정의하기 ......................................................... 401

12.1.3 컨트롤 사용하기 ......................................................... 405

12.2 실버라이트에서 페이지 전환 구성하기 .................................... 406

12.2.1 구조 설정하기 ............................................................ 407

12.2.2 페이지 전환 구현하기 .................................................. 408

12.2.3 페이지 전환하기 ......................................................... 409

12.3 스플래시 화면 .................................................................... 410

12.3.1 모양 정의하기 ............................................................ 411

12.3.2 스플래시 화면 통합하기 ............................................... 413

12.3.3 로드 과정 감독하기 ..................................................... 414

12.4 실버라이트 스트리밍 호스팅하기 ........................................... 415

12.4.1 스트리밍 준비하기 ...................................................... 415

12.4.2 포장하기 ................................................................... 416

12.4.3 적재하기 ................................................................... 418

12.4.4 사용하기 ................................................................... 418

12.5 요약 ................................................................................. 419

xiii

과거 수십 년 동안 사용자와 상호작용하기 위한 입력 방법은 크게 세 번의 변화를 거쳐왔다. 처

음에 일괄 입력 방식을 사용하던 방식에서 키보드를 사용한 입력 방식으로 바뀌었으며, 최근에

는 마우스가 기본 입력 방식 수단으로 변화되어 현재는 마우스를 이용한 윈도우 프로그램이 사

용자와의 상호작용을 위한 기본 수단으로 사용되고 있다. 하지만 미래는 손가락이 새로운 입력

장치로 사용될 것이다. 엄밀히 말하면 미래가 아니라 현재라고 해도 무방하다.

현재 우리는 핸드폰을 사용하면서도 터치스크린을 사용하는 경우가 많아졌다. 이뿐만 아니라

넷북이나 PMP, 심지어는 TV까지도 손가락 터치로 모든 정보를 입력할 수 있다는 것을 알 수 있

다. 미래 사회에서는 마우스 오른쪽 버튼을 이용한 메뉴가 아니라, 손가락 하나만으로 모든 메뉴

를 대신할 수 있는 직관적이며 상호작용이 심화된 사용자 환경을 가지게 될 것이 자명하다. 사용

자 인증 방법 또한 키보드를 사용하는 현재 방식에서 앞으로는 RFID를 사용하거나 지문과 같은

생체 인식을 통한 인증 방법 등이 키보드 입력을 대신할 것이다.

이런 환경에서 사용자 UI에서 가장 중요한 부분은 손가락으로 드래그 하는 작업, 손가락으로

선택한 아이템을 회전하는 작업 등이 될 것이며, 이것을 쉽고 빠르게 개발할 수 있는 플랫폼이나

프레임워크를 사용하는 것이 응용프로그램을 빠르게 개발할 수 있는 척도가 될 것이다. WPF는

이런 미래 사회를 위해서 태어난 프레젠테이션Presentation 기술이며 플랫폼이자 프레임워크이다.

이러한 환경을 사용하여 만든 응용프로그램을 우리는 RIARich Interactive Applicaton라고 부른다. 그

중에서 실버라이트는 좀 더 웹에 특화된 RIA를 구현할 수 있게 하는 웹 전문 플랫폼이자 프레임

워크이다.

작년 한해는 RIA라는 용어로 뜨거웠던 한해였던 것 같다. 그 열기가 올해는 더욱 거세질 것으

로 생각되며, 아마도 올해는 RIA를 구축하는 사례가 더욱 많아질 것으로 예상된다. 이런 가운데

RIA를 개발해야 하는 개발자들에게는 그를 뒷받침 해줄 수 있는 관련 기술들에 대한 지식습득

이 무엇보다 필요할 것으로 보인다.

불과 2년 전인 2007년 후반에 마이크로소프트에서는 RIA를 위한 실버라이트 1.0을 발표하였

다. 하지만 실버라이트 1.0은 RIA를 위한 기술이라기보다는 웹에 멀티미디어와 애니메이션을 지

옮 긴 이 글

xiv

원하기 위한 리치 클라언트 플러그인에 불과해 보였다. 왜냐하면 실버라이트 1.0은 웹 응용프로

그램 개발을 지원하기 위한 .NET 플랫폼 기반 기술이 아니라 브라우저를 기반으로 하는 기술이

었기 때문이다. 그로부터 1년이 지나서 2008년 10월에 마이크로소프트에서는 RIA를 구현하기

위한 실버라이트 2.0을 정식 출시하였다.

실버라이트 2.0은 1.0이 가지고 있는 애니메이션, 멀티미디어, 강력한 그래픽 기능을 .NET 기

술을 이용하여 플랫폼에서 개발할 수 있도록 해줄 뿐만 아니라, 웹 응용프로그램 개발을 위한

컨트롤들과 네트워크 기능 그리고 사용자 정의 기능들을 많이 추가하였다.

이제 인터랙티브한 사용자 환경을 보다 쉽게 구축하기 위한 기반 기술이 .NET 개발자들에게

도 준비된 것이라고 할 수 있다. 하지만 역자가 만나본 많은 개발자들은 실버라이트에 대한 관

심은 많이 있지만 실버라이트 2.0을 습득할 만한 교재가 많지 않다는 말을 하고 있다. 사실 국내

에 실버라이트 관련서적이 전무한 상태인 것은 사실이다. WPF를 비롯해서 실버라이트 초기 시

절부터 재직자들을 교육시켜온 역자로서는 교재에 대한 필요성을 절실히 느끼고 있었다. 그러

던 중 위키북스 출판사의 관계자로부터 미국에서 「Silverlight 2.0 in Action」이라는 책이 집필 중

에 있다는 것을 알게 되었으며, 내용을 검토해본 결과 실버라이트를 학습하고자 하는 개발자들

에게 도움을 줄 수 있을 만한 책이라고 확신하게 되었다. 물론 활용서적은 아니지만, 활용을 하기

위해서 알아야 할 기반 기술을 모두 정리하고 있는 것을 알 수 있다.

이 책은 마이크로소프트에서 공식 인정하는 서적으로서 실버라이트 2.0을 설명하는 전문 서

적이다. 실버라이트 2.0은 WPF 기술을 웹 기술에서도 사용할 수 있도록 분사되어 나온 기술로

WPFWindow Presentation Foundation라는 용어에서도 알 수 있듯이 앞으로는 UI를 구성하는 기술로

WPF와 실버라이트가 주류를 이룰 것이라 확신한다. 역자는 이러한 책을 조금이라도 개발자들

에게 빨리 소개하고자 미국에서 이 책이 나오는 시기와 비슷한 시기에 국내에도 출간 될 수 있도

록 번역하려고 노력하였다. 혹시 미비한 점이 있더라도 독자분들의 넓은 아량으로 이해해주리라

믿는다. 부디 이 책이 조금이나마 RIA를 개발하려는 학생이나 개발자들에게 갈증을 해소해 줄

수 있는 책이 되었으면 한다.

- 박용우

xv

역자는 전통적인 클라이언트/서버(이하 CS) 기반의 환경에서 프로그래밍을 시작했었다.

이미 모든 사람이 아는 것처럼 일정한 과도기를 거쳐 CS 기반에 작성되었던 거의 모든 서비스

들이 웹 기반의 서비스로 옮겨 갔고, 여기까지의 과정은 기술의 발전에 따른 필연적인 과정이었

다고 생각한다. 그러나 필자는 웹 기반의 환경이 가지고 있었던 여러 제약들을 보면서 CS 기반이

가지고 있었던 몇몇 장점들을 항상 그리워하곤 했었다.

여기서 또다시 너무 오래되어 용도 폐기된 웹 기반과 CS 기반의 서비스들에 대한 논의를 다시

시작하려는 것은 아니다. 그리고 웹 기반 서비스가 가지고 있는 여러 강력한 장점들은 구글을 포

함한 여러 기업들의 상업적인 성공으로도 이미 자신들의 가치를 충분히 증명하였다. 그럼에도 불

구하고 웹 기반의 서비스는 RIA 구현하거나 클라이언트 내부 또는 서버에서 복잡한 계산을 실

시간으로 처리하는 서비스를 개발하는 데 많은 어려움이 있었다.

대략 1~2년 전만 해도 특히 RIA에 관련된 문제를 해결할 수 있었던 가장 강력한 방법 중에 하

나는 플래시였다. 물론 플래시를 사용하지 않고도 각 브라우저에서 제공하는 각기 다른 플러그

인 개발 모델을 사용해서 플러그인을 제공한다면 어느 정도까지는 해결될 수 있었지만, 표준적

인 방법이 아니었을 뿐만 아니라 지원하는 브라우저 또는 운영체제가 많을수록 이런 방법을 사

용해서 문제를 해결하기에는 많은 어려움이 있었기 때문에 제약적으로 사용될 수밖에 없었다.

또, 플래시 자체도 완벽하지 않았다. 동의하지 않는 사람도 있겠지만 플래시 역시 몇 가지의 중대

한 문제점을 가지고 있었다. 하지만 실버라이트의 출현 이전에는 플래시를 대신할 수 있었던 대

안이 거의 없었기 때문에 눈물을 머금고 사용할 수밖에 없었다(물론 플래시가 가지고 있던 여러

강력한 장점을 부인하는 것은 아니다라는 것을 밝히고 싶다).

이제 제법 쓸만한 실버라이트의 새로운 버전이 나왔고, 닷넷 개발자들은 몇 개의 핵심 개념만

파악하면 따로 별개의 언어 또는 스크립트를 배우지 않고도 바로 RIA를 만드는 데 집중할 수 있

게 되었다. 그뿐만이 아니다. 실버라이트의 가장 큰 장점은 디자이너와의 협업이 가능하다는 점

일 것이다. 기존 개발에의 문제점은 디자인이 다 끝나야 개발을 시작할 수 있다는 사실이었다. 디

자이너가 디자인을 다 할 때까지 넘겨주기까지 개발자는 대기해야 했었고, 디자이너의 작업이 완

료되어야 비로소 개발자는 이미지들과 코드에 대한 작업을 할 수 있었다. 하지만 익스프레션 제

품과 실버라이트를 사용하면 디자이너와 개발자의 효과적인 협업이 가능해진다. 물론 디자이너

들이 마이크로소프트가 내놓은 익스프레션을 얼마나 반길지는 의문이기는 하지만, 그 부분은

우리 모두가 시간을 두고 경과를 두고 보기로 하자.

다시 개발자의 입장에서 돌아가 실버라이트 2.0은 위에서 언급한 협업의 용이성을 포함해서

많은 부분에서 강력하고 새로운 기능들을 제공하고 있다.

xvi

이 책은 이런 부분들에 대해 자세하게 알려주고 있다. 새로 웹 프로그래밍에 입문하는 사람부

터 웹 프로그래밍의 고수들까지 이 책에서 도움을 받을 수 있는 부분이 많이 있으리라 생각한다.

역자 역시 이 책에서 제공하는 새로운 개념들에 대해 많은 사람들이 이해할 수 있도록 최선을 다

해 번역을 하였다. 그럼에도 불구하고 역자가 가지고 있는 역량의 한계 때문에 몇몇 부분은 부족

한 부분이 있으리라 생각한다. 그런 부분에 대해서는 독자에게 양해를 구한다.

- 석재헌

xvii

추 천 사

현재 웹을 주도하는 기술은 여러 표준 기구와 몇몇 회사 그리고 특정 개인들에 의해서 개발된 이

질적인 기능들의 혼합이다. 현재 웹의 복잡한 특징을 고려할 때, 실버라이트는 비주류 기술에서

발생한 혁명적인 사건의 좋은 예라고 할 수 있다. 실버라이트는 여러 기술, 코드, 도구 또는 상호

호환성을 이용해서 이전에는 쉽게 가능하지 않았던 많은 새로운 기능들을 구현할 수 있게 한다.

따라서 실버라이트는 현재 웹의 기능을 훌륭하게 보충하는 역할을 하고 있다.

실버라이트는 마이크로소프트에서 개발한 기술이다. 이 기술은 .NET 기반의 프로그램을 사

용해서 세련된 미디어와 응용프로그램 경험을 인터넷을 통해 전달할 수 있다고 믿었던 몇몇 사

람들로 구성된 팀에서 출발했다. 아무것도 없는 밑바닥부터 시작해서 여러 브라우저, 플랫폼 그

리고 많은 장치들 사이에서 동작하고 설정을 표시할 수 있도록 만들었다. 이 기술은 개발자와 디

자이너들 사이에 완벽한 협업을 가능하게 해서 생산성을 높인다. 실버라이트 API는 한마디로 여

러분이 완벽한 플랫폼에서 기대하는 모든 것이라고 할 수 있다. 단순하면서 언제나 예측가능하

고, 용감한 코더들에게는 확장할 수 있는 여지를, 그렇지 않은 경우는 그냥 있는 상태로 사용할

수 있게 해준다. 이 책은 여러분에게 실버라이트의 잠재적인 힘을 이용할 수 있도록 가르쳐 준다.

지난 삼 년 동안 차드 켐벨과 알고 지냈는데, 그는 실버라이트나 윈도우 프레젠테이션 파운데

이션과 같은 기술들을 언제나 앞장서서 받아들였다. 켐벨과 함께 기술들을 계속 개발하는 동안

그는 얼리어답터로서 그리고 활동적인 커뮤니티 참여자로서, 예리하고 날카로운 피드백을 제공

해 왔다. 그가 지금까지 쌓아왔던 독특한 통찰력의 결과는 이 책에서 명백하게 볼 수 있다. 만약

여러분이 실버라이트를 처음으로 접한다면, 여러분은 곁에 반드시 이 책을 지니고 있어야 한다.

이전에 실버라이트 응용프로그램을 개발했었다고 하더라도, 이전에 알지 못했던 많은 것들을 이

책에서 찾을 수 있을 것이다.

개발자와 디자이너들이 타성에 젖어 여전히 습관적으로 이전부터 해오던 번거로운 일들을 하

고 있다면 실버라이트를 사용해서 웹에 새로운 바람을 불어 넣으려는 우리의 목표는 달성되지

못할 것이다. 비동기 패턴을 사용해서 차세대의 웹을 개발하는 것은 이러한 목표 중에 우선이다.

사용자가 원하는 기능을 구현하면서 경쟁력 있는 사용자 경험을 제공하는 것도 또 다른 목표이

xviii

고 그 외에도 수많은 목표가 있다. 이 새로운 기술들은 배우는 데 약간의 노력이 필요할 수도 있

지만, 일단 익숙해지면 한계가 없는 가능성을 가진 새로운 세계가 열릴 것이다. 여러분은 좀 더

좋은 코드와 좀 더 훌륭한 응용프로그램을 작성하게 될 것이다. 풍부한 상상력을 도와주는 예제

들을 통해 「실버라이트 2 인 액션」은 새로운 기술을 배우고 여러분의 기술을 향상할 수 있는 있

는 실질적인 방법을 제공하고 있다. 차드 캠벨과 공저자인 존 스탁턴은 이런 기술들을 얻을 수 있

도록 적당한 속도로 안내해 줄 것이다. 그리고 이 책은 일단 이 개념들이 익숙하게 되면, 오래된

것을 반복하는 대신 새로운 것들을 배울 수 있도록 전개할 것이다.

웹을 개발하는 모든 사람은 여러 기술들과 툴들을 섞어서 사용해야 했다. 어디에서 그리고 어

떻게 실버라이트를 사용할 수 있는지 이해하는 것이 아주 중요하다. 안전하고 효율성 좋고 반응

성 있는 응용프로그램을 만드는 방법을 이해하는 것도 마찬가지로 아주 중요하다. 그리고 이 책

이 여러분들을 그렇게 해줄 것이다.

애쉬시 세티

- 마이크로소프트 실버라이트 프로그램 매니저

xix

들 어 가 는 말

나는 실버라이트를 상당히 오랫동안 기다리고 있었다. 상업용 웹 응용프로그램을 1999년부터

만들어 왔었다. 그러나 사용자들이 그냥 받아들여야 했고 기존의 웹 프로그래머들이 안주했던

‘충분히 괜찮음’의 정도에 상당히 실망했다. 이것은 HTML의 한계와 인터넷을 통해 응용프로그

램을 배포하는 것과 관련된 여러 복잡한 문제들 때문이었다. 나는 ‘충분히 괜찮음’에 만족할 수

없었다. 나는 응용프로그램을 따로 분리해서 진정한 사용자 경험을 전달하기를 원했다.

이런 여러 한계 때문에 타협을 해야 하는 현실을 극복하려는 나의 첫 번째 시도는 2000년에 있

었다. 처음에 콘텐트를 불러오기 위해 거의 보이지 않는 HTML IFRAME을 사용해 보기로 결정

했다. 그리고 자바스크립트를 통해 콘텐트를 해석해서 이것을 뷰에 불러오도록 했다. 이 방식으

로 서버로 보내는 요청 때문에 페이지가 깜박거리는 현상을 제거할 수 있었지만, 여전히 무언가

가 부족했다. 나는 벡터 그래픽이 중요하고 여러 미디어들이 굉장히 보너스가 될 수 있다는 것을

믿었기 때문에 다른 대안을 찾아보았다.

2001~2002에 퍼듀 대학에서 선택 과목으로 플래시 수업을 들었다. 이 수업에서 플래시에 대

한 많은 것들을 배웠다. 수업의 마지막에는 플래시 역시 단순한 도구에 불과하다는 것을 느꼈지

만, 수업을 듣는 동안에는 플래시의 가능성에 대해 아주 들떠 있었다. 그러나 표준이 아닌 액션

스크립트 언어 때문에 장기적으로 플래시의 유용성이 제한될 수밖에 없다고 느꼈다. 소프트웨

어 엔지니어가 되고 나서는 툴이 아닌 플랫폼을 찾기 시작했다. 그 때 좀 더 강력한 무엇을 기다

려야 한다는 것을 깨달았다.

2006에 마이크로소프트의 MIX 컨퍼런스에서 WPF/E에 대해서 들었다. WPF/E는 강력

한 Microso� Presentation Foundation(WPF)의 일부이기 때문에 이 또한 나를 들뜨게 했다.

WPF의 힘과 WPF/E의 크로스 플랫폼 목표를 알고서는 WPF/E 기술이 성숙될 때까지 WPF

에 초점을 두기로 결정했다. 그리고 결과적으로 WPF/E는 실버라이트로 명명되었고, 계속해서

나를 자극하고 영감을 주었다. 이런 영감이 나에게 블로그를 유지하도록 했고 최근에는 이 책을

쓰게 했다.

- 차드 캠벨

xx

감 사 의 글

이 책이 나오기까지 문자 그대로 수많은 사람들의 도움이 있었다. 이 모든 사람들에게 우리 필자

일동은 개인적으로 감사의 인사를 드린다. 그 중에 특히 몇몇 분들은 정말 헌신적으로 이 책이

나오는 데 큰 도움을 주었고, 이 자리를 빌어 그 분들에게 가슴에서 우러나오는 감사의 인사를

드리고 싶다.

알렉시 가브릴로브―알렉시는 여러 다양한 웹 기반 프레임워크를 비교하기 위해 http:// ▒

www.bubblemark.com 사이트를 만들었다. 필자들은 이 사이트를 만들고 그 내용을 이

책의 1장에서 쓰게 해준 그에게 감사한다.

애쉬시 세티―애쉬시는 이 책의 머리말을 작성하는 중요한 일을 해준 마이크로소프트의 ▒

프로그램 매니저이다. 그는 우리를 도와서 이 책의 내용이 실버라이트 2 SDK와 일치하는

지 확인하는 데 큰 도움을 주었다. 멋진 머리말을 써줘서 고마워요, 애쉬시!

단 “디스코” 헤렌브룩―단은 이 책에서 사용한 비디오 파일들을 생성하고 편집했다. 단은 ▒

영화와 텔레비전에 숙련되고 재주 있는 프로듀서로 성장하고 있다. 그는 심플 텍스트라고

하는 자신만의 비디오 프로덕션 회사를 시작하고 있다. 이 책을 위한 멋진 비디오 파일을

만들어줘서 고마워요, 단!

에드 마이아―에드는 실버라이트 2의 미디어 기능에 관련된 정보들을 기꺼이 공유해준 ▒

마이크로소프트의 프로그램 매니저이다. 그의 설명은 실버라이트 2의 풍부한 미디어 기

능들을 설명하는 데 큰 도움이 되었다. 고마워요, 에드!

마이클 푸얼드―마이클과 크리스티안 무어헤드는 「IronPython in Action」을 썼다. 마이 ▒

클은 11장의 DLR에 관련된 정보에 대해 아주 중요한 조언을 해줬다. 마이클, 이 콘텐트에

대해 정확한 정보를 제공해줘서 고마워요!

마이크 하쉬―마이크는 마이크로소프트의 실버라이트 팀에 프로그램 매니저이다. 그의 ▒

블로그는 실버라이트의 초창기 시절에 차드와 같은 얼리어답터에게 중요한 정보를 제공

해 주었다. 마이크는 이 책의 기술적인 세부적인 내용을 대답하는 데 아주 중요한 정보를

제공해 주었다. 고마워요, 마이크!

xxi

팀 빈클리 존스―팀은 이 책을 완성하는 데 아주 큰 역할을 하였다. 그의 실버라이트와 ▒

WPF와 같은 기술에 대한 열정과 경험은 지금 있는 이 책을 만들 수 있도록 했다. 또 이

책을 검토해주고 심오하고도 통찰력 있는 시각을 제공해 주었다.

이 책은 이 분들의 도움이 없었다면 현재와 같이 나올 수 없었다. 추가해서 더 많은 분들이 많은

방식으로 이 책이 나올 수 있도록 도움을 주었다. 그 중에 많은 분들이 특히 리뷰어로 도움을 주

었다. 그분들의 개방되고 정직한 의견에 감사한다. 필자들이 감사하는 리뷰어의 이름들은 아래

와 같다. 데이빗 바르콜, 알렉시 누델만, 라마 크리샤 바빌라라, 데런 네임케, 아닐 라하크리샤, 마

크 몬스터, 크리스토퍼 하우프, 벤드 함벡, 커트 크리스티안슨, 마시모 퍼거, 구스타보 카발칸티,

안드류 시에머, 키이쓰 파머, 래리 클락킨, 데이브 캠벨, 칼빈 쉬로텐버, 데이브 코런, 프랭크 왕,

니쉬안트 시박쿠머, 발렌틴 스토이체브 그리고 파니 콘도바.

추가해서, 많은 도움과 여러 어려운 일들을 참고 견뎌준 매닝출판사의 교정 및 편집자들에게

도 감사하며, 이들의 이름은 아래와 같다. 안드리아 코우췌, 신시아 케인, 엘리자베쓰 마틴, 메리

피에지애스, 마우린 스펜서, 미간 요케이, 마이클 스펜스, 네르미나 밀러 그리고 스티븐 홍. 그리

고 특별히 벤 하야트에게 감사한다.

개인적인 감사

이 책 자체에 대해 도와준 많은 개인들에 추가해서, 이 책을 벗어난 차드와 존의 인생에 큰 도움

을 준 사람들이 있다.

차드는 가까운 친구들과 가족들에게 큰 감사를 보낸다. 먼저 그는 여자친구인 레이첼 톨버트

에 감사를 한다. 레이첼의 인내심, 지원 등은 차드가 이 책을 쓰는 동안 발생했던 여러 어려운 도

전을 극복할 수 있도록 도와주었다. 차드는 그의 가족들 특히 부모님인 팀과 바비가 보여줬던 끓

임없는 보살핌과 지원에 특별히 감사한다.

또 직접적으로 여러 친구들에게 감사를 한다. 몇몇 친구들은 이 책의 내용에 대한 새로운 관

점을 제공해 주었다. 아론 브루너, 아론 미첼, 벤 필립스, 비제이 머피, 브래드 스테이테, 브라이언

필립스, 차드 헤밀턴, 단 릭스비, 매트 앤더슨, 매트 헨클러 그리고 라이언 레딩들이 이 책에 대한

직간접적으로 많은 충고를 주었다. 이 사람들은 알게 모르게 이 책에 많은 영향을 주었다. 새로

운 친구인 존 스탁턴은 정말로 이 책에 직접적으로 큰 영향을 주었다.

존은 사랑하는 와이프인 크리스티가 많은 밤을 지새우는 동안에도 참을성과 지원을 보내준

것에 대해, 그의 아들인 존 로스에게는 필요할 때마다 언제나 정신적인 휴식을 제공해 것에, 클

xxii

리블렌드 개발자 커뮤니티에게는 이렇게 큰 일을 할 수 있게 자신감과 용기를 준 것에 대해 감사

한다.

또 당연하게, 우리 필자 일동은 독자들에게 감사한다. 수많은 독자들 없이는 이 책이 결코 출

판되지 못했을 것이다.

xxiii

이 책 에 대 해

이 책의 전체적인 목표는 강력한 실버라이트 2 플랫폼의 정보를 제공하고 교육을 돕기 위한 것이

다. 이 책을 실버라이트 2 SDK로 떠나는 여행의 가이드라고 생각하기 바란다. 이 책을 마치고 나

면 자신있게 실버라이트를 사용해서 RIA 응용프로그램을 디자인하고 개발할 수 있을 것이다.

빠른 학습 진도를 위해, 일정한 수준과 깊이 있는 콘텐트를 제공하면서 가능한 빨리 여러분만의

귀중한 응용프로그램을 개발할 수 있도록 이 책을 구성했다.

각 장에서 실버라이트에 대한 확고한 이해를 쌓을 수 있도록 도와주는 몇 개의 장치들을 포함했

다. 아래 리스트는 이 여정을 통해 각각의 장치들이 어떻게 도와줄 수 있는지 설명하고 있다.

그림―여러 데이터를 요약하고 복잡한 개념들의 이해를 도와줄 수 있는 시각적 묘사 ▒

코드―여러 구문과 각종 포맷을 보여주기 위해 사용한 작고, 간결한 코드. 이러한 개별 ▒

코드들은 일반적으로 보여주는 코드 자체만으로는 실행할 수 없음

표―요약된 자료를 읽기 쉽게 함 ▒

이러한 귀중한 장치들과 더불어 우리는 이 책의 독자들을 위한 웹사이트를 제작하였다.

http://www.silverlightinaction.com 웹사이트에서 이 책에서 제공한 모든 코드 예제를 제공하

고 있다. 추가로 여러분의 웹브라우저에서 직접 이런 예제들을 실행할 수 있을 것이다. 이 웹사이

트들은 몇 개의 웹 서비스와 이 책에서 배운 것들을 사용해서 시도해 볼 수 있는 몇 개의 아이템

들도 제공하고 있다.

보너스로 몇 개의 장들은 옵션인 ‘따라하기’ 절을 포함하고 있다. 이 절은 마이크로소프트 비주

얼 스튜디오 2008과 마이크로소프트 익스프레션 블렌드 2에 대한 사용 경험을 제공할 수 있도

록 해 줄 것이다. 이 두 툴은 실버라이트 개발을 위해서 필수는 아니지만, 마이크로소프트 웹사

이트에서 공짜로 얼마간 사용할 수 있는 버전을 제공하고 있고, 이 두 개의 툴이 강력한 개발 경

험을 제공하기 때문에 이 여정을 위한 도구의 일부로 사용할 것이다.

xxiv

독자들

이 책은 마이크로소프트의 실버라이트 2를 사용해서 복잡하고 세련된 웹기반 경험을 생성하기

원하는 개발자를 위해 쓰여졌다. 실버라이트는 명백하게 디자이너들을 위한 굉장한 기회를 제공

하고 있다. 그러나 이 책은 소프트웨어 솔루션의 개발에 주로 초점을 두는 개발자를 향해서 쓰여

졌다.

이 책은 HTML, CSS 그리고 자바스크립트와 같은 공통 웹표준에 익숙하다고 가정하고 있다.

또 .NET 프레임워크와 마이크로소프트 비주얼 스튜디오를 사용한 경험이 있다고 가정하고 있

다. C#을 사용하고 있지만, C# 언어를 다시 한 번 살펴보거나 클래스, 메서드 그리고 변수와 같

은 기본 프로그래밍 문법을 설명하지는 않을 것이다.

여러 도구들: 여러분이 필요한 것들

이 책은 실제 배움을 위한 여러 기회를 제공하고 있다. 그러나 실제 콘텐트 또는 선택적인 툴 없

이도 이 책의 내용을 배울 수 있는 굉장한 유연성을 제공하고 있다. 이 책에서 많은 가치를 얻고

여러 실전 기회를 사용하기 위해서는 아래 툴들의 사용을 권장한다.

실버라이트 2 (필수) ▒

마이크로소프트 비주얼 스튜디오 SP1 (권장함) ▒

마이크로소프트 익스프레션 블렌드 2 (권장함) ▒

마이크로소프트 ASP.NET (권장함) ▒

우리는 정보와 스크린샷이 위에서 언급된 여러 툴들의 버전과 일치하도록 양심적으로 최대한 노

력을 했다. 그러나 있을 수 있는 불일치에서 발생할 수 있는 혼란을 제거하기 위해, 아래에 지난

15개월간 이 책을 만들기 위해 사용한 여러 툴들의 리스트가 있다.

실버라이트 1.1 알파, 실버라이트 2 베타 1, 실버라이트 2 베타 2, 그리고 실버라이트 2 ▒

RC0

마이크로소프트 비주얼 스튜디오 2008 ▒

마이크로소프트 익스프레션 블렌드 2.5―8월 사전 검토판, 9월 사전 검토판, 12월 사전 ▒

검토판, 그리고 6월 사전 검토판

마이크로소프트 윈도우 XP 서비스팩 2와 마이크로소프트 윈도우 비스타 ▒

xxv

만약 이런 툴들에 익숙하지 않다면, 이 리스트가 약간은 여러분을 어리둥절하게 만들 것이다. 이

런 툴들에 대한 가이드가 필요하다면, http://silverlight.net/GetStarted/ 사이트를 방문하기 바

란다. 이제 이런 도구들을 가지고 있다면, 우리의 여정을 위한 지도를 살펴보기로 하자.

로드맵

이 책은 실버라이트에 대한 일종의 가이드를 제공하도록 디자인되어 있다. 이 여행은 실버라이트

의 풍부한 클라이언트 측면의 기능에 초점을 맞추고 있다. 이런 기능들은 12개의 장으로 구성된

코스를 통해 다루어질 것이다.

1장은 실버라이트를 소개하고 있다. 이 소개는 실버라이트의 장점을 보여주고 있다. 또 여러분

에게 실버라이트에서 사용할 수 있는 강력한 개발자/디자이너의 협업에 대해 알아본다. 마지막

으로, 이 장은 실버라이트에서 사용하는 마크업 언어인 XAML의 몇몇 핵심 개념을 보여준다.

2장은 HTML과 실버라이트의 관계를 자세히 설명한다. 이 장은 실버라이트 플러그인의 인스

턴스를 생성하는 방법과 이것을 웹페이지에 추가하는 방법을 보여준다. 또 여러분에게 HTML

과 실버라이트 객체 모델에 대해 설명한다. 마지막으로 이 장은 실버라이트를 이용해서 HTML

DOM을 어떻게 관리하는지 보여준다.

3장은 모든 프레젠테이션 기술의 기본인 레이아웃과 텍스트에 대해 다룬다. 또 실버라이트에

서 사용하는 핵심 UI 기능에 대해 살펴본다.

4장은 폼 컨트롤과 입력 장치를 통한 사용자와의 상호작용을 다룬다. 여기서는 드래그앤드롭

구현과 방대한 컨트롤 라이브러리에 대해 배운다. 이 장은 실버라이트의 다이얼로그에 대한 설명

도 제공할 것이다.

5장은 데이터와 연관된 세 개의 중요한 주제를 다룬다. 우선, 데이터 바인딩과 연관된 복잡한

면을 살펴본다. 그리고 많이 사용되는 DataGrid에 대해 살펴본다. 마지막으로, 이 장은 강력하고

두드러진 LINQ 기능에 대해 논의한다.

6장은 실버라이트의 통신과 네트워크 기능에 대해 다룬다. 이런 기능들이 SOAP 또는 REST

기반의 서비스에 어떻게 연동할 수 있는지 살펴볼 수 있을 것이다. 또 POX, JSON 그리고 각종 피

드 형태의 데이터를 사용하는 법을 배운다. 마지막으로 좀 더 진보적인 TCP 소켓들과 WCF 듀

플렉스 서비스에 대해 배운다.

7장은 실버라이트의 뿌리인 미디어로 되돌아 가본다. 이 장은 인터랙티브한 재생 기능에 대해

다룬다. 그리고 클라이언트 또는 서버 측면의 플레이리스트의 자세한 부분에 대해 살펴볼 수 있

xxvi

을 것이다. 이 장은 믿을 수 없을 정도로 강력한 딥줌Deep Zoom 기능을 포함한 실버라이트의 이미

징 기능에 대해서 다룬다.

8장은 실버라이트에 임베드된 그래픽 기능에 대해 살펴본다. 기본 모양과 기하학에 대해 배우

고 여러 브러시 타입에 저장된 강력한 기능에 대해서도 살펴본다. 마지막으로 이 장은 실버라이

트의 엘리먼트를 어떻게 변환하는지를 보여준다.

9장은 실버라이트의 생생한 애니메이션 기능에 대해 다룬다. 이 장을 통해 애니메이션을 생성

하는 기본 방법을 배울 수 있을 것이다. 그리고 애니메이션과 어떻게 상호작용하는지 다룬다.

10장은 실버라이트의 시각적인 요소에 스타일을 더하는 방법을 다루고 있다. 이 장은 여러 스

타일과 템플릿 기능을 포함하고 있다. 이 장은 유연한 VisualStateManager을 포함한 논의로 끝

을 맺고 있다.

11장은 UI에서 벗어나서 실버라이트의 런타임 기능의 자세한 부분에 대해 다룬다. 여기서는

격리 저장소와 비동기 작업에 대해 배운다. 동작하는 콘텐트의 내용을 가져오는 방법에 대해서

도 살펴본다. 마지막으로, 동적 언어 런타임(DLR:Dynamic Language Runtime)에 대한 분석에 대해서

도 알아본다.

12장은 여러분이 생성한 실버라이트 응용프로그램을 다른 사람과 공유하는 방법을 다룬다.

여기에서는 사용자 컨트롤 개발과 내비게이션 구현을 포함하고 있다. 또 사용자 정의 스플래시

스크린을 생성하는 방법에 대해서도 배운다. 마지막으로 클라우드 기반의 실버라이트 스트리밍

서비스에 대해 소개한다.

코드 규약

이 책에 있는 모든 코드들은 모노스페이스monospace 폰트를 쓰고 있다. 이 코드들은 하나의 프로

그래밍 언어로 통일되어 있지 않다. 이런 이유로 코드의 왼쪽 구석에 수평으로 사용한 언어를 표

시할 것이다. 조금 긴 여러 줄로 구성된 코드의 경우는 회색 화살표로 줄이음 표시를 했다.

실버라이트 2 인 액션 웹포럼

「실버라이트 2 인 액션」을 구매하면 이 책에 대한 코멘트를 하거나 기술적인 질문을 하거나 저

자 또는 다른 사람에게 도움을 받을 수 있는 전용 포럼에 접속할 수 있다. 여러분은 http://www.

manning.com/Silverlight2inAction에 있는 포럼에 접근하고 구독할 수 있다. 이 페이지는 등록

을 어떻게 하고, 어떤 종류의 도움을 받을 수 있는지와 포럼의 사용 규칙에 대한 정보를 제공하

고 있다.

xxvii

독자들에 대한 매닝출판사의 배려는 개별 독자들과 저자들 간에 의미 있는 대화를 할 수 있는

공간을 제공하고 있다. 저자들의 입장에서는 이런 특정 형태의 참여는 의무가 아니고, 자신들의

책 포럼에 대한 기여는 자발적이고 비영리 활동으로 남아 있다. 우리는 여러분에게 필자들이 흥

미를 가질 만한 어려운 질문을 해줄 것을 요청하고 싶다.

「실버라이트 2 인 액션」 웹포럼과 이전에 했던 논의들은 이 책이 계속 출판되는 한 출판사의 웹

사이트에서 접근할 수 있다.

매닝출판사에서 접근할 수 있는 웹포럼에 추가해서, 아래의 장소에서 이 책에 대한 것 또는 기

타 다른 어떤 주제에 대해서라도 저자들에게 물어볼 수 있다.

책 웹사이트― http://www.silverlightinaction.com ▒

차드의 블로그― http://cornucopia30.blogspot.com ▒

존의 블로그― http://tocode.blogspot.com ▒

이 블로그에 보내지는 몇몇 코멘트는 게시가 안 될 수도 있다는 점을 이야기하고 싶다. 우리는 가

능한 모든 코멘트를 게시하도록 하겠지만, 만약 게시물에 특정인의 이메일 주소 또는 전화번호

가 있다면, 게시자의 사생활을 존중해서 그 게시물을 공개하지 않을 것이다.

저자 소개

차드 캠벨은 마이크로소프트 MVP이고 솔루션 아키텍트이다. 그는 1999년부터 여러 방면의 기

업용 웹 응용프로그램을 개발하고 있다. 2006년의 초기 공개 버전부터 시작해서 열심히 실버라

이트를 연구하고 사용해오고 있다. 그는 MCSD와 MCTS 자격증을 가지고 있다. 또 퍼듀 대학을

졸업했으며, 컴퓨터 사이언스를 전공했고 부전공으로 심리학을 공부했다.

존 스탁턴은 지난 10년간 마이크로소프트의 기술을 사용해서 미국의 500대 대기업과 정부 기

관을 위한 복잡한 웹 응용프로그램을 개발해 오고 있다. 그는 지역사회를 위한 여러 일들에 적

극적으로 활동해 오고 있으며, 실버라이트 온라인 커뮤니티에서도 역시 활발한 활동을 하고 있

다. 두 살 난 아들과 즐겁게 노는 것을 좋아하며, 모형 철도의 제작과 목제를 이용한 세공, 여러

야외활동을 취미로 가지고 있다.

xxviii

책 제목에 대해

소개, 개요 그리고 각종 예제들을 포함하고 있는 ‘인 액션’ 책들은 배움과 기억을 돕기 위해 디자

인되었다. 인지 과학의 연구에 따르면 사람들이 기억하는 것들은 자기가 스스로 동기를 부여해

서 탐색하면서 발견한 것이라고 한다.

비록 매닝에서 일하는 사람들 중에 인지 과학자는 없지만, 우리 모두는 배움이 탐색, 놀이 그

리고 지금까지 배웠던 것을 스스로 다시 이야기하는 과정을 통해 완전히 머릿속에서 기억할 수

있다고 확신한다. 사람들은 적극적으로 탐색한 뒤에야 새로운 것을 완전히 마스터해서 이해하고

기억한다. 인간은 행동 안에서 배운다. ‘인 액션’ 책의 핵심 부분은 예제 기반이라는 것이다. 이 점

은 독자에게 여러 가지 것들을 시도하게 하고, 코드를 가지고 놀게 하며, 새로운 생각을 탐색하도

록 북돋워준다.

이 책의 제목에는 또 다른 세속적인 이유가 있다. 우리의 독자들은 바쁘다. 그들은 어떤 일을

하거나 또는 문제를 해결하기 위해 이 책들을 사용한다. 그들은 쉽게 뛰어들고 쉽게 빠져 나오고

필요할 때 원하는 것을 얻을 수 있도록 해주는 책들이 필요하다. 그들은 행동하는 동안 그들을

도울 수 있는 책들이 필요하다. 이 시리즈의 책들은 이러한 독자들을 위해 디자인되었다.

책 표지 삽화에 대해서

「실버라이트 2 인 액션」의 표지 삽화는 “Janissary in Dress of Ceremony”이다. Janissaries는 오

트만 슐탄의 개인 군대이며 경호원이었다. 이 삽화는 런던에 있는 올드 본드 거리의 윌리엄 밀러

에 의해 1802년 1월 1일에 출판된 오트만 제국 의상 컬렉션에서 가져왔다. 이 컬렉션의 표지 페이

지는 실종되었으며 현재까지도 찾을 수 없는 상태이다. 이 책의 목차에서는 각각의 그림을 영어

와 프랑스어로 표시하고 있으며, 각각의 삽화는 작업을 한 두 사람의 이름을 포함하고 있다. 의심

할 나위없이 이 두 사람은 자신들의 작품들이 이백 년 뒤에 컴퓨터 프로그래밍 책의 앞표지를 장

식하고 있다는 것을 발견한다면 깜짝 놀랄 것이다.

이 컬렉션은 매닝출판사의 한 편집인이 맨하튼의 26가 거리에서 골동품 벼룩시장에서 구입한

것이다. 판매자는 터키의 앙카라에 기반을 둔 미국인이었으며 이 거래는 그가 거의 장사를 마치

려고 물건들을 다시 포장할 때 이루어졌다. 매닝의 편집인은 거래에서 사용할 만큼의 충분한 현

금은 가지고 있지 않았으며 신용카드와 개인 수표는 정중히 거절당했다. 판매자가 그 날 저녁에

앙카라로 돌아가기 때문에 그 상황 자체는 그렇게 희망적이지 않았다. 해결책은 무엇이었을까?

그것은 다름아닌 악수로 확인한 아주 옛날부터 사용한 구두의 합의였다. 판매자는 단순히 무통

장입금을 통해 자신의 계좌로 돈을 입금해 주기를 요청했고 그 편집인은 한 손으로는 그림을 안

xxix

고 다른 한손에는 계좌와 은행 정보가 있는 종이를 가지고 걸어 나갔다. 말할 필요도 없이, 우리

는 그 다음 날로 돈을 입금했으며 그리고 우리는 생전 처음 보는 사람이 우리에게 보내준 신뢰에

큰 인상을 받았고 아직도 감사한 마음을 가지고 있다. 이것은 아주 오래 전에 일어났던 어떤 일을

기억나게 해준다.

우리의 책 표지에 등장하는 그림과 같은 오트만 컬렉션의 그림들도 2세기 전에 화려함과 여러

의상으로 생명을 얻었다. 이 그림들은 우리의 활동적인 현재를 제외한 모든 다른 역사적인 시기

에 대한 거리감과 격리감을 깨닫게 해주고 있다.

의상들은 그 때 이후로 그리고 지역에 따라 굉장히 다양하게 변해와서, 한때 그렇게 빛났던 세

련됨은 이제 사라지고 없다. 이제 의상에 따라 특정 대륙의 거주자를 구별하는 것은 거의 가능

하지 않다. 아마도 이런 현상을 긍정적으로 보면, 여러 지역에 기반을 둔 문화의 개성들이 현재의

다양한 각 개인의 개성으로 변화되었다고도 볼 수 있을 것 같다. 또는 더 다양하고 지적이고 기

술적인 생활이라고 할 수 있을 것 같다.

매닝출판사에 근무하는 우리는 두 세기 전의 여러 다양한 지역의 생활에 기반한 책 표지를 사

용해서 이 컬렉션의 그림들에 다시 생명을 불어 넣음으로써 컴퓨터에 기반한 비지니스의 독창성

그리고 즐거움을 축하하고 있다.

xxx

1

■실버라이트의장점이해하기■개발자와디자이너의관계이해하기

■XAML의기본개념이해하기

01실버라이트소개

이 책의 독자들은 마이크로소프트가 새롭게 내놓은 실버라이트 2를 학습하기 위해 이 책을 구

입하였을 것이다. 그렇다면 실버라이트란 무엇인가? 실버라이트란 인터넷상에서 풍부하면서도

인터랙티브한 경험을 가능하게 해주고 디자인과 개발 모두를 가능하게 하는 클라이언트상의 런

타임이다. 사실 전통적으로 인터랙티브한 경험들은 데스크톱 응용프로그램으로 한정되어 있었

다. 하지만 실버라이트 1.0 버전과는 다르게 실버라이트 2.0에서는 .NET 프레임워크의 능력을

추가해서 다양한 브라우저, 플랫폼, 그리고 장치들 1 에서도 데스크톱을 능가하는 경험들을 제공

할 수 있게 되었다.

우선 1장에서는 이 책을 통해서 앞으로 학습할 배경지식을 쌓도록 할 것이다. 우리가 함께 떠

나는 여행을 준비하기 위해서, 가장 먼저 알아볼 것은 풍부하고 인터랙티브한 응용프로그램

을 생성할 때 실버라이트가 제공할 수 있는 것이 무엇인지부터 알아보고, 그 다음으로 디자이너

와 개발자가 서로 협업이 가능하도록 실버라이트가 제공하는 향상된 기능에 대해 알아볼 것이

다. 협업에 대한 장점을 향상시킬 수 있게 된 이유는 XML 기반의 XAML 덕분이다. 물론 나중에

XAML에 대한 것도 알아볼 것이다. 이제 숨을 가다듬고 실버라이트로의 여정을 시작해 보도록

하겠다.

1 　 실버라이트 콘텐트는 윈도우 모바일 6과 심비안 OS를 구동하는 노키아 기기에서도 실행 가능하다는 것을 보여주었다. 하지만 이 책에서는 브라

우저 내에서 실버라이트 콘텐트를 개발하는 내용으로 한정할 것이다. 그 이유는 모바일 기기에서의 타임 프레임은 이 책의 범위를 넘어서기 때

문이다.

2 l Silverlight 2 in Action

1.1 실버라이트는여러분의인생을즐겁게해줄것이다!

필요한 소프트웨어를 인터넷에 의존하게 되면서 월드와이드웹World Wide Web에는 흥분의 기운이

점점 더 거세게 몰아치고 있다. 인터넷 초창기의 웹은 주로 정적인 내용을 공유하기 위해서만 사

용했었다. 그러나 웹 사용률이 폭발적으로 증가하면서 더욱 많은 활력을 웹 브라우저에 불어넣

을 수 있기를 바라게 되었다. 웹을 통해서 인터넷 뱅킹이나 물건 구매가 가능하고 친목을 강화하

거나 새로운 친구를 만들기 원하였고 사진이나 노래 또는 비디오를 컴퓨터로 공유하기를 원하였

다. 뿐만 아니라 이 모든 것들이 보다 더 풍부하고 인터랙티브한 방식으로 처리되기를 원하게 되

었다.

정적인 내용들을 전송하기 위해 만들어졌던 기술들은 동적인 사용자 환경이 더 많이 요구됨

에 따라서 빠르게 그 효용가치를 잃어가게 되었다. 웹 개발 커뮤니티에서는 웹 개발에서 권장되

어오던 기술이 아닌 여러 가지 기술들을 혼합해서 새로운 요구사항들을 마술처럼 해결하려는

시도를 하게 되었다. 대표적으로 자바스크립트가 이러한 마술을 수행하는 기본 기술로 급부상

하였으며 숙련된 웹 개발자들은 HTML DOMdocument-object-model을 위험한 정글 안에 한 자루

의 단도만을 들고 헤쳐가듯이 어렵게 DOM 내부 구조를 탐색하게 되었다.

이러한 여러 기술들에 대한 혼란은 브라우저에서 UI를 표현하기 위해 다양한 플러그인들을

사용해야 하는 필요성이 증가됨에 따라 더욱 심해져갔다. 이렇게 여러 플러그인들을 이용한 솔

루션은 과거에도 완전하지 않았으며 현재까지도 완전하지 않다. 이런 해결 방법은 완성도 있는

개발 경험의 중요성을 종종 간과하게 만든다. 하지만 실버라이트를 사용한다면 상황은 달라질

수 있을 것이다. 실버라이트는 이런 여러 기술들이 난무하는 혼란을 헤쳐 나갈 수 있는 세 가지

도구들을 제공하고 있다. 이러한 무기들은 바로 생산성, 성능, 그리고 이동성이다.

1.1.1 생산성

마트에 갈 때 한 마트에서는 쌀만 팔고, 다른 마트에서는 우유만을 팔고, 다른 한 곳에서는 고기

만 판다고 가정하면 얼마나 고생스러울지 한번 상상해 보기 바란다. 화장지, 김치 그리고 매일 사

용해야 하는 기타 생필수품들에 대한 이야기는 꺼내지도 않겠지만, 짐작할 수 있듯이 이런 상황

에서 장보러 가는 일이 우리의 일상생활에 큰 어려움을 줄 것이라는 것은 쉽게 알 수 있을 것이

다. 이상하게도 웹 개발 분야에서는 종종 이와 유사한 일들이 벌어지고 있다.

실버라이트는 2D 그래픽, 애니메이션, 사용자 입력, 음악, 비디오 그리고 텍스트를 단일 API

로 통합함으로써 과거 웹 기반 소프트웨어의 한계점을 해결하고 있다. 이 API는 데이터와 서비

1장 실버라이트 소개 l 3

스를 완벽하게 통합했을 뿐 아니라 네트워크 응용프로그램을 만들 수 있게 하는 유연성도 함께

제공해 준다. 데이터와 서비스의 통합은 연결이 항상 유지되지 않는 인터넷의 단점을 극복하는

데 도움을 줄 수 있다.

견고하고 뛰어난 개발 경험은 가치 있는 솔루션들을 만들 때 많은 도움을 준다. 이러한 종류

의 개발 경험은 제품들을 더욱 빠르게 생산할 수 있게 하며, 문제 자체보다 해결에 초점을 맞출

수 있게 한다. 또 강력한 개발 경험을 통해 훨씬 더 높은 유연성을 가진 제품을 개발할 수 있다.

이 유연성은 기술 혁신을 낳게 하고, 이 경험은 통합 노력을 최소화해줌으로써 이전 개발 노력

들을 훨씬 수월하게 이어받을 수 있게 해주며, 보다 효율적인 테스팅 기술을 통해 견고함을 배

가시켜준다. 실버라이트는 기대 이상의 이 모든 배경지식들을 반영하여 만들어졌다. 웹 기반의

소프트웨어들이 등장하면서 실버라이트는 어느 것에도 뒤지지 않는 통합된 개발 스토리를 가

지고 있다.

이런 개발 스토리는 믿을 수 없을 정도로 강력하다. 때로는 강력한 도구라고 하면 크고 거추장

스럽거나 우둔하고 어색한 동작(이런 종류의 형용사들은 일반적으로 동화 속에서 무능력한 거

인을 표현하는 것들이다)을 하는 경향이 있지만, 실버라이트는 이러한 형용어구들 중 어느 것에

도 속하는 않는다. 사실상 실버라이트는 대단한 민첩함과 수행성능을 가진 플랫폼이다. 따라서

이 플랫폼은 반응이 빠르고 수행성능이 높은 솔루션을 생성할 수 있도록 해준다.

1.1.2 성능

오랜 시간 동안 시스템의 반응을 기다리면서 대기하는 것은 상당히 고통스런 일이 아닐 수 없다.

응용프로그램의 긴 반응 시간은 사용자로 하여금 기다림에 지쳐 안절부절 못하게 할 수 있다. 그

래서 어떤 시스템을 개발하든지 시스템의 성능은 아주 중요한 요소 가운데 하나이다.

이제 곧 보게 되겠지만 실버라이트는 원래부터 이런 효율성을 염두에 두고 설계되었다. 실버라

이트는 다른 경쟁 기술을 성능면에서 압도하면서도 응답이 상당히 빠른 응용프로그램을 만들

수 있게 해준다.

실버라이트의 성능을 검증하기 위해 알렉시 가브릴로브Alexey Gavrilov는 여러 웹 기반 프레임워

크의 성능을 비교하는 애니메이션을 만들었다. 이 애니메이션은 하나의 박스 안에 16개의 볼을

한꺼번에 이리저리 움직이게 해서 1초마다 프레임 횟수를 계산한다. 다음 그림에서 보는 것처럼

실버라이트가 다른 기술들을 분명히 압도하는 것을 알 수 있다.


그림 1.1 ㅣ 브라우저별, 플랫폼별, 기술별 초단위 평균 프레임 수 2

그림 1.1에서 볼 수 있듯이 실버라이트가 유사 기술보다 훨씬 더 좋은 성능을 보여주고 있다. 또

이 성능은 마이크로소프트 윈도우 플랫폼에만 국한된 내용이 아니다. 실버라이트는 생각하는

것 이상으로 이식성이 뛰어나기 때문에 마이크로소프트 플랫폼을 넘어서 다른 플랫폼에서도

훌륭한 성능을 제공할 수 있다.

1.1.3 이동성

실버라이트는 이동성을 염두에 두고 디자인되어 여러 브라우저와 플랫폼에서 실행될 수 있다.

실버라이트의 공식 이름이 발표되기 전에 이 프레임워크는 “Windows Presentation Foundation

Everywhere” 또는 간단하게 “WPF/E”라고 불렸다. 이렇게 부른 이유는 실버라이트가 윈도우 플

랫폼을 넘어서 제공할 수 있는 윈도우 프레젠테이션 파운데이션의 한 부분이기 때문이다

실버라이트에 관심이 있는 사람들은 이런 질문을 자주한다. “모든 곳에서 사용할 수 있다는 것

이 정확히 무슨 말인가요?” 이 질문에 대한 답을 한다면 실버라이트로 만든 콘텐츠는 인터넷에

연결된 96%의 컴퓨터에서 동작할 수 있다. 이것이 가능한 이유는 실버라이트가 여러 운영 체제

와 브라우저를 대상으로 만들어지고 테스트됐기 때문이다. 다른 소프트웨어와 마찬가지로 실버

라이트는 마이크로소프트 윈도우와 애플 매킨토시 플랫폼을 지원하다. 또한 마이크로소프트는

“Moonlight” 프로젝트를 통해 리눅스 플랫폼에 실버라이트를 구현할 수 있도록 노벨과 파트너

관계를 형성했다. 그림 1.2는 실버라이트가 지원하는 운영체제와 그것들의 시장 점유율을 보여

2 　 인터넷 익스플로러와 파이어폭스 통계들은 인텔 펜티엄 M 2.00 GHz 프로세서를 탑재한 Dell Inspiron 6000 하드웨어에 Windows XP(SP 2)을 설

치한 시스템을 사용하여 만들어졌으며, Safari 통계들은 2GB RAM을 장착하고 2.66 GHz DuoCore 프로세서를 탑재한 Apple MacPro 시스템을

사용하여 만들어졌다. 이번 테스트를 위한 소스코드는 http://www.bubblemark.com에서 받아볼 수 있다.


주고 있다. 3

그림 1.2 ㅣ 실버라이트를 지원하는 플랫폼들. 기타로 표시된 부분은 실버라이트를 지원하지 않는 플랫폼을 의

미한다.

그림 1.2에서 나열한 운영 체제들은 인터넷에서 사용되고 있는 운영체제 중 약 97%를 차지하고

있다. 나머지 3%는 실버라이트를 지원하지 않는 운영체제이다. 실버라이트는 브라우저 플러그인

이기 때문에 브라우저가 플러그인에 허용하는 권한 내에서만 동작할 수 있다. 실버라이트는 현

재 많이 사용되고 있는 브라우저의 약 96%를 지원하고 있으며, 인터넷 익스플로러나 파이어폭

스, 오페라, 사파리 같은 브라우저들을 지원하고 있다. 이 외에도 Moonlight 프로젝트를 통해서

리눅스에서 동작하는 Konquerer 브라우저를 지원하고 있다. 그림 1.3은 이러한 브라우저들의

시장 점유율을 보여주고 있다.

그림 1.3 ㅣ 실버라이트 콘텐트는 차트에서 나열하고 있는 여러 브라우저와 버전에서 동작할 수 있다. 기타로

표시된 부분은 실버라이트 또는 Moonlight를 지원하지 않는 브라우저들을 의미한다.

3 　 Net Applications, “Operating System Market Share,” Marketing Share for Browsers, Operating Systems and Search Engines, http://marketshare.

hitslink.com/report.aspx?qprid=8


그림에서 나열한 브라우저들은 실버라이트 런타임이나 Moonlight 런타임을 지

원하는 브라우저들이다. 이 차트(그리고 그림 1.2)를 통해서 알 수 있는 것처럼

실버라이트는 인터넷상의 약 96% 컴퓨터에서 동작할 수 있다.

현시점에서 실버라이트는 과거의 웹과 관련된 기술들의 정글을 태워버릴 수 있는 도깨비불임

이 분명하다. 높은 성능과 생산성의 특징들은 풍부하고 인터랙티브한 응용프로그램들을 개발하

기 위해 실버라이트가 현명한 선택이 될 수 있음을 입증하며, 실버라이트의 크로스 브라우저, 크

로스 플랫폼과 같은 접근성은 실버라이트가 책임 있는 선택이 될 수 있음을 보여준다. 생산적인

면에서 많은 도움을 주는 또 다른 한 가지 장점은 바로 디자이너와 개발자의 협업을 지원한다는

점인데, 이 부분은 별도의 한 섹션을 사용해서 설명해야 할 정도이다.

1.2 왜디자이너와개발자들은사이좋게일하기가힘들까?

전통적으로 웹 기반 소프트웨어 개발에서 사용되는 도구와 기술들은 동독과 서독을 나누어 놓

은 베를린 장벽처럼 디자이너들과 개발자들을 갈라 놓았었다. 디자이너들은 목업mock-up(실물모형)

형태로 복잡하게 얽혀 있는 사용자 인터페이스를 실감나게 디자인하기 위해서 강력한 그림 도

구들을 사용할 것이다. 이 목업을 넘겨 받은 개발자들은 그 그림을 커다란 벽에 붙여놓고 면밀히

분석해서 실제 화면에 필요한 이미지들을 추출할 것이다.

많은 노력에도 불구하고, 디자인은 전통적

인 웹표준으로 표현할 수 있는 범주를 넘어서

는 경우가 종종 있다. 디자인과 개발 사이에

서 억지로 타협하는 일은 일반적으로 가장 낮

은 품질의 공통분모를 선택하는 결과를 낳는

다. 웹 페이지와 연관된 계층을 다시 살펴보면

그림 1.4에서 보여주는 것처럼 디자이너들과

개발자들을 분리하는 것이 필요하지 않은 것

처럼 보여주고 있다.

하지만 그림에서 코드(로직과 데이터 소스 블럭)와 디자인(사용자 인터페이스 블럭)은 분명히

분리되어 있다. 서문에서 언급했던 역할에 대한 정의를 다시 생각해보면, 디자이너들은 복잡한

사용자 인터페이스를 생성하는 능력을 보유하고 있으며 개발자들은 코딩과 시스템을 설계하는

사용자 인터페이스 로직

데이터 소스

요청


응답

그림 1.4 ㅣ 웹 페이지 계층


기술을 보유하고 있다. 그림 1.4의

예를 보면 이러한 역할과 관련된 작

업들은 분명히 구분할 수가 있다. 만

약에 이전 그림으로 다시 돌아가서

디자이너와 개발자의 역할을 추가

한다면 그림 1.5처럼 보이는 그림을

얻을 수 있을 것이다.

이 그림에서 명확하게 구분하고 있

는 것처럼 디자이너의 역할과 개발

자의 역할이 분리되어 있다는 것을 부정할 수는 없다. 그렇다면 이 두 세계를 이을 수 있는 방법

은 무엇인가? 그것은 바로 XML 기반의 언어 XAML을 사용하는 것이다.

XAML의 자세한 내용은 1.3절에서 다루도록 하겠다. 지금은 디자인과 코드 사이의 다리 역할

을 하는 XAML을 이해하는 것이 중요하다. XAML을 이용한 방법은 디자이너와 개발자들이 소

프트웨어를 더 짧은 시간에 생성할 수 있도록 새로운 협업을 경험하게 만들어 준다. 디자인과 코

드를 분리함으로써 새로운 작업을 위해 특화된 도구를 사용할 수 있을 뿐만 아니라 기존에 사용

해오던 방법으로도 작업이 가능하다.

개발자 중 거의 대부분은 아마도 디자이너 없이 코드를 작성하는 일에 익숙해 있을 것이다.

XAML은 필요에 따라서 필요한 만큼만 디자이너와 작업할 수 있게 하는 유연성을 제공한다. 개

발 방법과 상관없이 그림 1.5에서 사용자 인터페이스에 대한 부분은 개발자들도 완전히 이해하

고 있을 필요가 있다. 사용자 인터페이스를 확실하게 이해하고 있어야 전체 사용자 인터페이스

를 생성하거나 또는 코드를 생성하는 일을 좀 더 능숙하게 처리할 수 있을 것이다. 지금 언급한

내용을 반영한다면 그림 1.5를

그림 1.6처럼 변경하는 것이 좀

더 적절할 것이다.

그림 1.6은 분명하게 실버라

이트 개발자가 넓고 깊은 지식

이 필요함을 보여주고 있다. 이

그림은 실버라이트에서의 개발

자와 디자이너들의 역할을 시각

적으로 정의해서 보여준다.


디자이너 개발자

데이터 소스


그림 1.5 ㅣ 디자이너/개발자 작업 분리


디자이너

개발자

데이터 소스


그림 1.6 ㅣ 또 다른 디자이너 / 개발자 작업 분배 관점


1.2.1 개발자경험

실버라이트에서는 무엇이 그렇게 개발 경험을 특별하게 만들어 줄까? 한 단어로 요약해서 말하

면 바로 .NET이다. 실버라이트 2는 플랫폼들 사이의 복잡한 응용프로그램을 쉽게 만들 수 있게

해주는 경량화된 버전의 클래스 라이브러리와 완전한 기능의 .NET CLR을 포함하고 있다. 이 버

전의 프레임워크는 실버라이트 2에 특화된 것이다. 경량화된 프레임워크이지만 이 프레임워크는

개발자가 기대할 수 없었던 프레젠테이션, 데이터, 네트워크 그리고 기타 필요한 기능들을 모두

포함하고 있다. 이뿐만 아니라 이것으로 인해 웹 응용프로그램 개발에서 불필요한 COM과의 상

호 호환성 등의 문제를 생략할 수 있다. 이 외에도 이 강력한 프레임워크는 이미 많은 사람들이

사용하는 비주얼 스튜디오를 포함한 많은 도구들에 의해서 지원을 받고 있다. .NET 개발에 사

용되는 도구로써 비주얼 스튜디오는 가장 널리 알려진 도구이다. 많은 소프트웨어 개발 도구의

지원을 받게 되면 다른 일에 시간을 뺏기지 않고 개발자가 만들려고 하는 소프트웨어 개발에 집

중할 수 있게 된다.

다만 도구를 사용할 경우에는 작성된 결과물들을 다른 도구들과 공유해야 할 때 호환성에 문

제가 발생할 수도 있다. 그러나 비주얼 스튜디오는 개발자와 디자이너들 간의 일들을 쉽게 통합

할 수 있도록 실버라이트 템플릿을 제공하고 있다. 이러한 템플릿을 사용한 상호협력은 세련된

실버라이트 응용프로그램을 개발하기 위해서 유능한 디자이너의 도움을 쉽게 받을 수 있도록

해 준다

1.2.2 디자이너경험

마이크로소프트 익스프레션 블랜드Expression Blend 또는 간단하게 블랜드는 세련되고 생생한 사

용자 경험(UX)을 디자이너가 쉽게 만들 수 있도록 도와주는 도구이다. 블랜드는 윈도우 기반의

응용프로그램을 만들 때 뿐만 아니라 웹 기반의 실버라이트 응용프로그램을 만들 때도 사용할

수 있는 도구이다. 이 도구는 실버라이트 응용프로그램을 만들 때 블러blur나 그라디언트gradient

또는 애니메이션과 같은 복잡한 디자인 요소들을 쉽게 생성할 수 있도록 도와준다.

실버라이트와 관련해서 블랜드의 중요성은 두 가지 내용으로 줄여볼 수 있다. 그 첫 번째는 복

잡한 디자인 엘리먼트들을 쉽게 생성할 수 있게 한다는 점이다. 블랜드는 복잡한 엘리먼트들을

XAML 코드로 자동생성해준다. 두 번째로 블랜드가 생성하는 실버라이트 프로젝트 구조가 비

주얼 스튜디오의 프로젝트의 구조와 일치한다는 점이다. 이 점은 디자이너와 개발자들 사이의

상호 협력을 자연스럽게 해주며 한 컴퓨터에서 두 개의 도구를 상호 전환하며 사용할 수 있게 해

준다.


이미 설명한 것처럼 우리는 도구에 익숙해질 필요가 있다. 마이크로소프트에서는 이런 도구

들을 사용할 수 있도록 웹사이트를 통하여 체험판을 제공하고 있다. 이 책에서도 이 도구들을

사용하여 설명할 것이다. 블랜드가 실버라이트 개발을 위해서 반드시 필요한 것은 아니지만 이

책에서는 이 도구를 사용하여 예제를 작성할 것이다. 방금 전에 언급했던 것처럼 실버라이트 개

발을 위해서 XAML을 자동생성해주는 블랜드는 필수 도구는 아니다. 하지만 XAML은 반드시

배워야하는 필수 언어이다.

1.3 XAML

XAMLeXtensible Application Markup Language은 XML 형식으로 객체들을 초기화할 수 있게 해주는

선언적인 언어이다. 이 형식은 코드와 배치를 분리함과 동시에 각 엘리먼트들의 계층 구조를 한

눈에 볼 수 있게 해준다. 이렇게 코드분리가 가능한 이유는 XAML 엘리먼트들이 .NET 객체와

매핑되어서 그 객체를 설명할 수 있기 때문이다. 따라서 XAML 엘리먼트가 갖는 속성들은 .NET

객체가 갖는 속성과 완전히 일치한다. 이러한 개념은 그림 1.7에서 잘 표현하고 있다.

그림 1.7 ㅣ XAML에서 생성되는 어떤 객체도 코드에서 생성될 수 있음

그림에서는 XAML이 표현하고 있는 내용과 일치하는 세 가지 형식의 코드를 보여주고 있다. 여

기서 XAML로 표현한 TextBlock 엘리먼트는 각각의 언어로 작성된 코드의 구문들과 동일한 코

드라는 것을 알 필요가 있다. 이렇게 XAML을 사용해서 객체를 생성하면 생성된 객체를 초기화

하기 위한 기본 생성자는 XAML 파일이 아닌 코드비하인드code-behind 4 파일에 작성한다. 생성자

외에도 실제 동작을 위한 실행 코드들을 구현하기 위해서도 코드비하인드 파일이 사용된다.

1.3.1 코드비하인드

ASP.NET 페이지와 동일하게 XAML 페이지도 코드비하인드 페이지의 개념을 지원하고 있다.

코드비하인드 페이지는 디자인과 코드를 분리하기 위해 사용한다. UI와 관련된 코드는 XAML

4 　 (옮긴이) 코드비하인드(Code-Behind)란 XAML 페이지가 응용프로그램에 컴파일될 때 XAML 프로세서에서 작성되는 코드와 결합되는 코드를

말하는 용어이다. http://www.microsoft.com/korea/msdn/library/aa970568.aspx


파일에 작성하고 그와 관련된 실행코드는 코드비하인드 파일에 작성하는 방식으로 디자인과 코

드를 분리한다. XAML과 소스 코드를 분리하고 있는 관계를 그림 1.8에서 가장 기본적인 형식

으로 보여주고 있다.

그림 1.8 ㅣ C# 프로젝트 안의 XAML과 코드비하인드 파일 사이의 관계

그림에서 볼 수 있는 것처럼 컨트롤을 배치하는 XAML 코드는 .xaml 파일 안에 저장하고 클래

스를 정의하는 비하인드 코드는 .xaml.cs 파일 안에 저장한다(파일 확장자는 사용하는 언어에

따라 달라질 수 있다). 클래스를 정의하는 부분은 다시 두 개의 파일에 나누어서 저장된다. 그

두 개의 파일은 개발자가 작업하는 .xaml.cs 파일과 비주얼 스튜디오에 의해 자동으로 생성되는

xaml.g.cs로 나누어진다. 그림 1.8에서의 InitializeComponent 메서드의 정의는 .xaml.g.cs 파일

안에 정의되고 사용자가 작성하는 모든 코드는 .xaml.cs 파일 안에 저장된다. 두 개의 파일 중에

사용자가 작성하게 되는 파일에 대해서 좀 더 자세히 살펴보도록 하겠다.

코드비하인드 파일에서 XAML 파일에 정의된 객체를 참조할 때는 x:Class 속성값을 사용

한다. 이 클래스 파일이 컴파일되어 만들어지는 어셈블리는 웹 응용프로그램의 하위 폴더인

ClientBin 디렉터리에 있는 실버라이트 응용프로그램 내부에 위치하게 된다.

그림 1.8에서도 볼 수 있었던 것처럼 XAML 코드 안에서 Loaded 속성을 이용하여 이벤트를

처리하는 메서드의 이름을 지정할 수 있다. 이 방법을 사용하면 컴파일러는 속성의 값으로 부여


된 이름의 메서드가 코드비하인드 파일에 정의되어 있을 것이라고 생각하게 된다. 우리는 인자의

개수와 형식이 정확히 일치하는 메서드를 제공해야만 한다.

코드비하인드 파일에는 이벤트 처리뿐만 아니라 XAML 코드에서 사용할 수 있는 public 프로

퍼티들을 정의할 수도 있다. 이 방법들은 사용자 정의 컨트롤을 생성할 때 흔히 사용되는 방법들

이며 12장에서 자세히 살펴보도록 하겠다. 클래스에 속성을 추가하는 작업은 일반적으로 흔한

일이지만 클래스를 네임스페이스에 추가하는 작업은 더욱 자주 만나게 되는 일이다.

1.3.2 네임스페이스

네임스페이스는 공통 그룹으로 묶을 수 있는 관련 객체들을 관리할 수 있는 방법을 제공한다. 그

룹 또는 네임스페이스는 컴파일러가 자료형을 찾게 되는 공간을 정의할 수 있는 방법을 제공한

다. 어느 곳에서 관련 클래스를 찾아봐야 하는지 알려주기 위해 개발자는 XAML 파일에서 루트

요소 안에 네임스페이스 참조를 추가해야 한다. 아래의 XAML 파일은 두 가지의 네임스페이스

참조를 추가하는 사용방법을 보여주고 있다.

<UserControl x:Class="XAML01.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <TextBlock x:Name="myTextBlock" Text="Hello" FontFamily="Verdana" FontSize="12" MouseEnter="myTextBlock_MouseEnter" /> </Grid></UserControl>

코드 1.1 두 개의 네임스페이스 참조를 추가하는 기본 XAML 파일

XAM

L

코드 1.1에서 볼 수 있듯이 단일 XAML 파일 안에 여러 개의 네임스페이스를 나열할 수 있

다. 이렇게 여러 개의 네임스페이스를 참조할 때는 각각의 네임스페이스를 식별해서 사용해

야 한다. 예제 1.1에서 사용된 “x”는 네임스페이스 xmlns:x="http://schemas.microsoft.com/

winfx/2006/xaml를 식별하기 위한 접두사이다. 반면에 xmlns="http://schemas.microsoft.

com/winfx/2006/xaml/presentation 네임스페이스는 자신을 식별하기 위해 접두사를 사용하

고 있지 않다.

위에서 추가한 두 개의 네임스페이스는 앞으로 거의 모든 실버라이트 응용프로그램에서 보게

될 네임스페이스들이다. 이 네임스페이스들은 일반적으로 아래와 같은 방식으로 사용되며 자신

이 그룹핑하고 있는 기능들을 실버라이트 응용프로그램에게 노출하는 역할을 한다.


xmlns="http://schemas.microso�.com/client/2007" – 이 네임스페이스는 실버라이트 ▒

의 코어 엘리먼트들을 제공한다. 그렇기 때문에 이 네임스페이스는 일반적으로 접두사를

생략하고 페이지 내에서 기본 네임스페이스로 사용한다. 따라서 코어 엘리먼트들은 접두

사를 사용하지 않고도 네임스페이스가 제공하는 엘리먼트들을 참조할 수 있다.

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" – 이 네임스페이스는 ▒

XAML이 제공하는 공통 기능을 사용할 수 있게 해준다. XAML은 실버라이트 외에도

WPF나 윈도우 워크플로우 파운데이션(WF)에서도 사용되는 언어이다. 이 모든 기술들

이 공통으로 가지는 속성 Name, Key, Class를 사용하려면 이 네임스페이스를 추가해야

만 한다.

두 개의 네임스페이스 이야기

실버라이트 런타임은 http://schemas.microsoft.com/winfx/2006/xaml/presentation 네

임스페이스가 아닌 http://schemas.microsoft.com/client/2007을 기본 네임스페이스

로 사용하고 있다. 하지만 비주얼 스튜디오나 블랜드는 http://schemas.microsoft.com/

winfx/2006/xaml/presentation을 기본 네임스페이스로 인식하고 있기 때문에 이것을 기본

무명 네임스페이스로 사용하는 것이 편리하다. 왜냐하면 이 네임스페이스를 사용하면 나중

에 실버라이트 응용프로그램을 WPF 응용프로그램으로 변환하기가 쉽기 때문이다.

두 개의 네임스페이스 외에도 실버라이트는 사용자가 작성한 어셈블리들을 포함할 수 있도록 별

도의 네임스페이스를 추가할 수 있는 유연성을 가지고 있다. 개발자가 작성한 어셈블리를 참조하

게 되면 그 어셈블리는 실버라이트 응용프로그램의 “ClientBin” 디렉터리에 복사된다.

사실은 실버라이트 응용프로그램이 컴파일될 때 그 디렉터리 안이 아니라 그 디렉터리 안에

있는 어셈블리 안에 컴파일되어 배치된다. 응용프로그램 모델에 대한 부분은 잠시 후에 알아보

기로 하고 지금은 어셈블리를 참조하기 위해서 접두사를 사용하는 새로운 네임스페이스를 정의

하는 방법부터 보도록 하자. 코드 1.2는 그 예를 간단히 보여주고 있다.


<UserControl x:Class="XAML02.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:my="clr-namespace:MyNamespace;assembly=MyAssembly" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <my:MyElement x:Name="myElement1"></my:MyElement> </Grid></UserControl>

코드 1.2 이 예제는 “MyNamespace” 네임스페이스에 포함되어 있는 커스텀 어셈블리 “MyAssembly.dll”를 참조하고 있다. “MyNamespace” 안의 엘리먼트에 접근하기 위해, 접두사 “my”를 사용하고 있다.

XAM

L

코드 1.2에서 볼 수 있는 것처럼 커스텀 엘리먼트들을 포함해서 다른 어셈블리를 참조하려면 단

지 몇 가지 내용만 추가하면 된다. 커스텀 엘리먼트를 생성하는 과정에 대해서는 12장에서 자세

히 설명하겠지만, 이 코드에는 XAML과 관련해서 우리가 논의해 볼 필요가 있는 강력한 복합

속성에 대한 개념들이 포함되어 있다.

1.3.3 복합속성

비록 그림 1.7에서는 XAML로 표현한 엘리먼트와 .NET 클래스 사이의 관계를 보여주고 있

지만, 그림에는 속성과 관련된 한 가지 내용이 생략되어 있다. XAML 에서 속성에 대입되

는 값들은 원시 타입primitive type 외에도 여러 속성을 가지는 복잡한 엘리먼트들로 구성될 수

있다. 예를 들어 코드 1.3에서는 Grid의 배경색을 지정하기 위해서 다른 종류의 .NET 객체

LinearGradientBrush를 사용하고 있다.

<UserControl x:Class="CompoundProperties01.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot"> <Grid.Background> <LinearGradientBrush> <GradientStop Offset="0" Color="White"/> <GradientStop Offset=".5" Color="Navy"/> <GradientStop Offset="1" Color="White"/> </LinearGradientBrush> </Grid.Background> </Grid></UserControl>

코드 1.3 그라디언트 배경을 가진 Grid

XAM

L


GradientBrush에 대한 개념은 8장에서 소개하겠지만 그림에서 보듯이 Brush 엘리먼트가

XAML 계층형으로 설정된 것을 알 수 있다. 이런 방식으로 엘리먼트가 설정될 수 있는 속성은

‘복합 속성’으로만 표현이 가능하다.

복합 속성은 특정 요소 안에서 TypeName.PropertyName 형식의 구문을 으로 이루어져 있

다. 이 강력한 기능은 객체 구조를 계층 구조로 쉽게 표현할 수 있게 만들어 준다. 뿐만 아니라 이

방식은 사용자 정의 템플릿을 생성할 때 상당히 큰 유연성을 제공해 준다. 이 기능은 10장에서

자세히 다룬다. 복합 속성만큼 아주 중요한 속성이 또 하나 있다. 바로 다음 절에서 이 속성에 대

해 알아본다.

1.3.4 연결된속성

연결된 속성attached property은 엘리먼트 안에 그것을 참조하고 있는 엘리먼트의 속성이다. 장황하

게 들릴지 모르겠지만 AttachedElement.PropertyName 구문으로 구성되는 연결된 속성은 이

해하기 어려운 속성은 아니다. 이런 특별한 속성들은 일반적으로 레이아웃 패널의 컨텍스트 안

에서 사용된다. 패널에 대한 부분은 3장에서 자세히 설명한다.

예를 들어 Canvas 안에 Rectangle을 정의한다고 하자. 이 Rectangle은 Canvas의 왼쪽으로부

터 10픽셀과 상단으로부터 10픽셀 떨어진 옵셋 값을 가지도록 할 것이다. 그 주체(Rectangle)는

부모(Canvas)와 연관된 위치에 놓이게 될 것이다. 그러므로 코드 1.4에서 볼 수 있는 것처럼 주체

는 부모에 종속된다.

<UserControl x:Class="AttachedProperties01.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Canvas x:Name="LayoutRoot" Height="300" Width="400" Background="White"> <Rectangle Canvas.Left="10" Canvas.Top="10" Height="40" Width="120" Fill="Silver" /> </Canvas></UserControl>

코드 1.4 실제로 두 개의 종속 속성 사용을 보여주고 있는 예

XAM

L

이 코드는 Canvas 안에 Rectangle의 위치를 잡기 위해 연결된 속성 Canvas.Le�와 Canvas.Top

을 사용하고 있다. 코드에서 볼 수 있는 것처럼 연결된 속성은 전형적인 일반 속성처럼 값을 설정

할 수 있다.


1.4 블랜드와함께작업하기

이제 실버라이트가 웹으로 가지로 올 진가를 이해하게 되었으므로, 우리는 응용프로그램 개발

경험을 위한 탐험을 시작할 수 있다. 여행을 시작하기 위해 실버라이트를 이용하여 기본적인 미

디어 플레이어를 생성해 보도록 하자.

이 간단한 예제는 마이크로소프트 비주얼 스튜디오와 블랜드 툴 사이에 완벽한 통합을 보여

줄 수 있도록 디자인되어 있다. 이 작업들이 처음에는 약간 지루하게 보일 수도 있지만, 각 툴들

의 목적과 사용에 대한 확실한 이해를 가지고 있는 것은 아주 중요하다. 이 장의 연습이 끝나면

아래에서 볼 수 있는 미디어 플레이어를 가지고 있을 것이다.

이 예제는 마이크로소프트 비주얼 스튜디오와 블

렌드 도구 사이의 이음새 없는seamless 통합을 예로 들

기 위해 설계되었다. 만일 이 도구들을 가지고 있지 않

을 경우에는 http://silverlight.net/GetStarted를 방문

하면 이 도구들을 설치하는 방법을 배울 수 있을 것

이다. 일단 설치가 된 상태라면 이 예제를 바로 진행할

수 있을 것이다. 비록 이 작업이 장황하게 보일지도 모

르지만 각 도구들을 왜 맞물려야 하는지를 배우는 것

은 중요하다. 이번 절의 예제를 다 작성했다면 우리는

그림 1.9에서 보는 것과 같은 미디어 플레이어를 가지고 있을 것이다.

이 그림에서 보여주고 있는 미디어 플레이어의 생성과정은 실버라이트 개발에서 필요한 몇

가지 기본 개념을 설명해줄 것이다. 아마도 가장 큰 기본 개념으로는 도구 사용방법을 배우는

내용이 포함되어 있을 것이다. 우리는 그 도구들 중에 하나(마이크로소프트 익스프레션 블렌

드)를 만나게 될 것이다. 잠시후에 오랜 친구인 비주얼 스튜디오를 사용하여 미디어 경험media

experience 5 생성을 시작한다.

5 　 (옮긴이) RIA라는 용어와 함께 UX(User eXperience)라는 용어가 유행하면서 최근에는 경험이라는 단어가 많이 사용되고 있다. 여기서 경험이

란 자신이 접하는 제품이나 서비스를 사용해봄으로써 얻게 된 경험을 의미한다. 물론 의미는 다르지만 과거에는 사용자 환경(UE)/사용자 인터

페이스(UI) 등으로도 표현될 수 있었던 말들까지도 최근에는 모두 경험이라는 단어로 표현되는 것 같다. 이 책의 필자 또한 많은 부분에서 경험

(experience)라는 단어를 아주 많이 즐겨 사용하고 있다. 개발자 경험, 디자이너 경험, 미디어 경험 등 어휘 내용이 생소하게 다가올 수 있음에

유의하자

그림 1.9 ㅣ 이번 ‘블랜드와 함께 작업하기’

절의 결과 생성물


따라하기1.1 비주얼스튜디어로실버라이트미디어경험생성하기

“마이크로소프트 비주얼 스튜디오 2008” 을 실행한다.1.

[파일] > [새로 만들기] > [프로젝트]를 선택한다.2.

‘새 프로젝트’ 다이얼로그에서 프로젝트 타입을 ‘실버라이트’를 선택. 그 후 ‘실버라이트 프3.

로젝트’ 템플릿 선택한다(메모: 여러분이 만약 Visual Studio Extension for Silverlight이

설치되어 있지 않으면 이러한 선택 사항들이 보이지 않을 것이다. 마이크로소프트 홈 페

이지에서 Visual Studio Extension for Silverlight를 먼저 다운로드하기 바란다).

‘실버라이트 프로젝트’ 템플릿을 생성한 후, ‘새 프로젝트’ 다이얼로그에 아래와 같이 프로4.

젝트 속성을 입력한다.

‘확인’ 버튼 클릭. 이 시점에서, ‘실버라이트 응용프로그램 추가’ 다이얼로그 박스가 나타5.

난다. 이 다이얼로그 박스는 실버라이트 응용프로그램을 어떻게 사용할 것인지를 지정할

수 있는 옵션을 제공한다. 이 책에서는 아래의 그림에서 볼 수 있는 것처럼 첫 번째 옵션

을 사용하고 있다.


‘확인’ 버튼을 클릭한다. 비주얼 스튜디오에 실버라이트 프로젝트가 로드되고 나면 Page.6.

xml 파일이 열릴 것이다.

Page.xaml 파일 안에 Grid 엘리먼트가 있을 것이다. Grid 엘리먼트 안에 다음과 같은 7.

XAML 코드를 추가한다.

<MediaElement x:Name="myMediaElement"

Margin="20" Height="240" Width="320"

Source="http://www.silverlightinaction.com/video1.wmv" />

이 코드는 인터넷으로 비디오 파일을 참조하기 위해서 MediaElement 객체를 사용하고

있다. MediaElement를 삽입하고 나면 Page.xaml 파일은 다음처럼 보일 것이다.

<UserControl x:Class="Welcome.Page"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid x:Name="LayoutRoot" Background="White">

<MediaElement x:Name="myMediaElement"

Margin="20" Height="240" Width="320"

Source="http://www.silverlightinaction.com/video1.wmv" />

</Grid>

</UserControl>

응용프로그램을 실행하기 위해 ‘F5’ 를 누른다.8.

비디오를 본 후에 실행되었던 웹 브라우저를 종료하고 마이크로소프트 비주얼 스튜디오는 9.

열린 상태 그대로 둔다.

따라하기 1.1에서는 간단한 엘리먼트 하나를 추가해서 미디어 콘텐츠를 재생하는 실버라이트 응

용프로그램을 생성하였다. 가능한 한 매력적인 응용프로그램이 될 수 있도록 미디어에 스타일을

줄 것이다. 그러기 위해 마이크로소프트 익스프레션 블랜드를 사용하기 위한 곳으로 화재를 옮

겨 보도록하자.

따라하기1.2 블랜드2를사용해서MediaElement아래에매트깔기

‘마이크로소프트 Expression 블랜드 2.5를 실행한다.1.

시작 다이얼로그에서 ‘프로젝트 열기…’를 선택하거나 ‘파일’ 메뉴에서 ‘프로젝트 열기’를 2.

선택한다.

따라하기 1.1.에서 생성한 프로젝트가 있는 폴더로 이동한다.3.


‘Welcome.sln’ 파일을 선택 후 ‘열기’ 버튼을 클릭한다. 블랜드는 기본적으로 솔루션 파일4.

과 프로젝트 파일 모두를 지원하기 때문에 ‘Welcome.csproj’ 6 을 선택할 수도 있다. 프로

젝트가 로드되면 ‘Page.xaml’가 열리고 다음과 유사한 화면을 볼 수 있을 것이다.

블랜드의 좌측에 있는 툴박스에5.

서 Rectangle 도구를 선택한다.

Rectangle 도구는 다음과 같다.

선택된 Rectangle 도구를 사용해서 Canvas의 좌측 상단으로부터 MediaElement의 우6.

측 최하단까지 Rectangle을 그린다.

좌측 상단으로부터

마우스를 오른쪽

아래쪽으로 드래그한다.

Rectangle에 의해서

MediaElement가 전부 덮일 때까지

계속 드래그한다.

엘리먼트가 전부

가려졌으면 마우스를

놓는다.

6 　 .csproj 파일을 열어도 블랜드는 그 프로젝트를 포함하는 솔루션 파일을 오픈할 것이다.


다음으로, MediaElement를 위해 Rectangle이 멋진 매트를 제공할 수 있도록 Height와 7.

Width 속성들을 설정한다. 블랜드의 우측 상단에서 속성창이 선택되었는지를 확인한다.

만일 선택되어 있지 않다면 그것을 선택한다.

속성창의 레이아웃 범주에서 Width와 Height 속성들을 직접 설정한다. Width는 360으8.

로 Height는 280으로 값을 설정한다.


‘브러시’ 범주를 선택한다.9.

‘브러시’ 범주 안의 ‘그라디언트 브러시’ 탭을 선택하고 ‘Fill’ 속성이 선택되도록 한다.10.

이제 다음 그림처럼 Rectangle을 그라디언트로 채운다.11.

가장왼쪽의그라디언트지점을클릭하고그

림에서보는것처럼짙은회색값#FF383737

을설정한다.


그라디언트슬라이더의중간을클릭해서새로

운그라디언트지점을추가한다.이그라디언

트지점의값을옅은회색값‘#FFB4B4B4’으

로설정한다.

맨오른쪽의세번째그라디언트지점을가장

왼쪽그라디언트지점에서사용했던색과같

은회색을설정한다(짙은회색또는#

FF383737).

이제 우리는 MediaElement를 덮는 Rectangle을 가지게 되었다. 프로젝트를 실행하면 12.

MediaElement가 실행되어 소리를 들을 수 있지만 보이지는 않을 것이다. 우리가 만든 프

로젝트는 다음 그림처럼 보여야 한다.


Rectangle을 그릴 때 사용했던 도구상자 오른쪽에 있는 인터랙션 창에서 개체 및 타임라13.

인 범주 내의 Rectangle을 선택한다.

Rectangle를 MediaElement 뒤로 옮겨야 한다. 이를 위해, Rectangle이 선택되었는지를 14.

확인하고 아래에서 보이는 것처럼 [개체] > [순서지정] > [뒤로 보내기]를 선택한다.

이제 MediaElement 요소가 Rectangle 위에 있어야 하며 아래와 같이 보일 것이다.15.

F5를 눌러서 응용프로그램을 실행한다. 실행하는 방법은 비주얼 스튜디오와 동일하다.16.

실행된 웹브라우저 창을 종료한다. 17.

이 따라하기에서는 비주얼 스튜디오를 사용하여 생성한 실버라이트 프로젝트에 블랜드를 사용

하여 스타일을 추가하는 방법을 보여주고 있다. 그 외에도 블랜드에서 사용할 수 있는 가장 기본

적인 엘리먼트들을 소개하기도 하였다. 블랜드는 과거의 웹 그래픽을 쉽게 능가할 수 있게 만들


어 주며 그라디언트와 같은 고급스런 엘리먼트를 추가하는 것도 쉽게 만들어준다. 다음 예제에

서는 이 엘리먼트들이 문제 없이 비주얼 스튜디오 환경으로 옮겨가는 것을 보여주고 있다.

따라하기1.3비주얼스튜디오2008을사용하여videoplayer의행위구현하기

Alt-Tab을 이용하거나 작업 표시줄에서 마이크로소프트 비주얼 스튜디오를 선택한다.1.

비주얼 스튜디오를 선택하면 아래와 같은 다이얼로그가 뜨면서 Page.xaml를 다시 불러2.

올 것을 요청받을 것이다.

다이얼로그 박스에서 ‘예’를 선택한다.3.

따라하기 1.2에서 생성했던 Rectangle을 포함하기 위해서 XAML 코드가 자동으로 업데4.

이트된다.

어떠한 마이그레이션 과정도 없이 마이그레이션이 완료된 것을 확인하기 위해 F5를 눌러5.

서 응용프로그램을 실행시킨다.

실행되었던 웹브라우저를 종료한다.6.

Page.xaml.cs 파일을 오픈하기 위해 [보기] > [코드] 메뉴를 선택한다.7.

Page 생성자에 다음 코드를 추가한다. 8.

myMediaElement.MouseLeftButtonUp += new

MouseButtonEventHandler(myMediaElement_MouseLeftButtonUp);

코드가 추가된 후에 Page 생성자는 다음처럼 보여야 한다.9.

public Page()

{

InitializeComponent();

myMediaElement.MouseLeftButtonUp += new

MouseButtonEventHandler(myMediaElement_MouseLeftButtonUp);

}


다음의 이벤트 핸들러를 구현한다.10.

void myMediaElement_MouseLeftButtonUp(

object sender, MouseButtonEventArgs e)

{

if (myMediaElement.CurrentState ==

MediaElementState.Playing)

myMediaElement.Pause();

else

myMediaElement.Play();

}

응용프로그램을 실행하기 위해 F5를 누른다.11.

지금까지 우리는 실버라이트의 핵심 개념들을 많이 설명해주고 있는 미디어 플레이어를 완성하

였다. 이 내용과 관련된 자세한 개념들은 이 책을 진행하면서 천천히 보여주도록 할 것이다.

1.5 요약

실버라이트는 인터넷상에서 브라우저, 플랫폼에 상관없이 풍부함을 전달하기 위해서 마이크로

소프트가 제공하는 사용자 경험이다. 이 경험들은 잠재적으로 인터넷 혁명을 포함하고 있으며

인터넷 인구의 약 96 퍼센트가 이것을 경험할 수 있을 것이다.

.NET Framework의 능력을 이용함으로서 실버라이트는 개발자의 생산성이나 기회 그리고 선

택의 폭을 더 키울 수 있도록 하였다. 더불어서 XAML을 통한 협업은 디자이너와 함께 작업할

수 있도록 하였으며 동일한 프로젝트 구조의 도구들을 사용하게 함으로써 더 작은 노력에도 더

높은 품질의 제품들을 생성할 수 있는 힘을 얻을 수 있게 하였다. 이렇게 높은 품질의 인터랙티브

한 제품들을 제공하려면 실버라이트 콘텐트를 호스트 하기 위한 깊이 있는 지식을 필요로한다.

그런 지식을 배양하는 것이 2장의 목표이다.

25

■실버라이트컨트롤생성하기■실버라이트응용프로그램모델이해하기

■실버라이트로HTMLDOM관리하기

02웹과의조화

1장에서는 실버라이트에 대한 소개와 함께 RIA를 위한 파티에서 실버라이트가 제공하는 생산

성과 성능에 대해 알아보았다. 이번 파티에 실버라이트와 함께 초대된 손님들을 살펴보면 브라우

저 세상에서 이미 잘 알려진 HTML과 AJAX 그리고 Flash와 같은 많은 기술들이 초대되었다. 이

파티에 초대된 손님들은 RIA를 위해 모두 각자 자신만의 특별한 능력을 제공할 수 있기 때문에

이 연회에 초대되었다. 이번 파티에 참여한 실버라이트도 RIA를 위해 어떤 능력을 제공할 수 있

는지 알아볼 것이다. 우선 실버라이트를 웹 페이지에 통합시키는 방법부터 알아보기로 하자.

2장에서는 실버라이트 플러그인에 대해 좀 더 깊이 있게 다루어 볼 것이다. 이 플러그인을 이

해해야 하는 이유는 플러그인이 실버라이트 응용프로그램의 필수 구성요소이기 때문이다. 이

구성요소를 이해하고나면 실버라이트 응용프로그램과 HTML 사이의 구조적인 모델도 이해할

수 있다. 이 모델은 실버라이트 응용프로그램을 완성하기 위해 필요한 중요한 개념들을 제공하

므로, 이 개념들을 이용하면 .NET 플랫폼의 관리코드를 사용하여 HTML과 상호작용을 할 수

있다. 상호작용이 가능하려면 무엇보다 실버라이트와 HTML DOM 사이의 관계를 먼저 이해해

야 한다.


2.1 실버라이트와HTMLDOM의관계

1장에서 언급했던 것처럼 실버라이트는 브라우저의 플러그인 형태로 만들어졌다. 그 이유는 플

러그인 형식이 기존 웹에 자연스럽게 융화될 수 있는 방법이기 때문이다. 처음부터 실버라이트의

설계목표는 새로운 웹이나 기존의 웹 프로퍼티Web property 1 에 실버라이트의 콘텐트가 올바르게

통합되도록 하는 것이었다. 여기서 말하는 웹 프로퍼티란 웹 페이지를 의미하는 것이 될 수도 있

으며, 블로그, 인트라넷 포털이나 데스크톱 가젯 등 그 무엇을 의미한다고 할 수도 있다. 플러그인

형태로 사용되는 실버라이트는 다음 예에서 보여주는 것처럼, 웹 페이지의 일부분을 채우거나

페이지 전체를 채울 수 있는 유연함을 제공한다.

그림 2.1은 실버라이트를 사용하는 수많은 예 가운데 하나를 보여주고 있다. 실제로 웹 문서

안에서 원하는 곳이면 아무곳에나 실버라이트를 삽입할 수 있다. 그것이 가능한 이유는 이미 잘

알려진 HTML DOM과 플러그인의 조화로운 융화 능력 때문이다. DOM은 HTML 안에 실버라

이트 플러그인을 포함할 수 있도록 중요한 기반을 제공한다. 실버라이트 응용프로그램이 DOM

트리구조에 융화되어 있는 모습을 살펴보면 실버라이트 플러그인은 그림 2.2와 비슷한 모양으로

DOM 노드를 확장하고 있는 모습을 하고 있다.

웹 페이지에 통합된 실버라이트

웹 페이지 전체를 사용하는 실버라이트

그림 2.1 ㅣ 실버라이트의 두 가지 사용 예. 그림에서 단일한 색상으로 그늘진 영역은

실버라이트 응용프로그램 영역을 의미한다. 이 응용프로그램은 웹 프로퍼티의 예다

이 그림은 웹 프로퍼티에서 실버라이트가 호스트되는 방법을 보여주고 있으며 HTML DOM과

실버라이트 사이의 관계도 보여주고 있다. 이번 절에서는 이러한 관계를 형성하는 중요한 구성요

1 　 (옮긴이) 웹 프로퍼티(Web Property)란 유사한 비즈니스를 수행하는 회사 자체의 여러 도메인(또는 호스트) 등을 하나로 묶어서 설명할 때 사용하

는 단위를 의미한다. 예를 들어 네이버의 비즈니스가 mail.naver.com, cafe.naver.com, blog.naver.com 등이 있다면 이 도메인들을 묶어서 통칭

하는 말을 네이버 Web Property라고 할 수 있다. 하지만 이 책의 저자는 웹 페이지도 Property로 표현하고 있다는 것에 유의하길 바란다.

2장 웹과의 조화 l 27

소들에 대해 살펴본다. 그 첫 번째 요소로 가장 바깥 레이어를 담당하는 HTML DOM을 알아보

고, 그 다음으로 HTML 페이지에 포함된 실버라이트 컨트롤에 대해 알아본다. 이 컨트롤은 실버

라이트 플러그인이라고도 하며 실버라이트 콘텐트를 웹 페이지에 포함시키기 위한 용도로 사용

한다. 플러그인이 포함하고 있는 콘텐트는 순수 실버라이트 객체 모델만으로 이루어지며 이번 절

의 마지막 주제로 다룬다. 그럼 첫 번째 요소인 HTML DOM에 대한 설명으로 넘어가도록 하자.

그림 2.2 ㅣ 어두운 색으로 표현된 영역은 HTML DOM 영역이며 조금 밝게 표현된 영역은 실버라이트 컨트롤

영역이다. 실버라이트 컨트롤은 Silverlight Object Model을 사용한다.

2.1.1 HTMLDocument객체모델

HTML DOM은 웹 페이지의 콘텐트를 관리하기 위한 도구이다. 그림 2.2의 예에서 볼 수 있는 것

처럼 HTML 콘텐트는 엘리먼트들로 이루어진 트리구조를 가지고 있다. 하위 엘리먼트들은 자식

트리로 비유되며 각각 자신의 속성이나 콘텐트를 가질 수 있다. HTML DOM을 이용하면 자식

엘리먼트를 순회할 수 있으며, 필요에 따라서 콘텐트를 추가하거나 편집 또는 삭제할 수도 있다.

불행하게도 트리가 커짐에 따라서 엘리먼트를 다루기도 상당히 어려워졌다.

World Wide Web Consortium (W3C)에서는 1998년에 HTML DOM의 첫 번째 규격을 발표


하였다. 그 이후에 이 규격은 모든 브라우저에서 구현되었지만 구현한 형식은 조금씩 달랐다. 시

간이 지나면서 여러 브라우저들은 그들만의 추가적인 기능을 지원하기 위해 규격을 늘려 나갔

다. 이러한 움직임이 플랫폼 중립의 콘텐트를 만드는 데 어려움을 주는 원인이 되었으며 불일치

요소들을 양산하는 원인이 되기도 하였다.

이런 상황에서 실버라이트가 브라우저에 독립적인 콘텐트를 제공하려면 1장(1.1절)에서 언급

했던 브라우저들의 종류를 일일이 구별하여 조건에 맞게 사용되어야만 한다.

대부분의 브라우저들은 실버라이트에서 지원하는 DOM 중에서 하나를 사용한다. 이 DOM의

종류와 내용은 표 2.1에서 설명하고 있다.

표 2.1 실버라이트가 지원하는 DOM의 종류

규격 브라우저 설명

DHTML Object Model Internet Explorer DHTML Object Model은 개발자들이 프로그래밍 방식으로 웹 프로퍼티의 엘리먼트들을 접근할 수 있게 만들어준다

Gecko DOM Firefox Mozilla Netscape Safari

Gecko DOM은 HTML 콘텐트를 파싱하고 렌더링해서 HTML DOM을 이용할 수 있도록 만든다.

전 세계 대부분의 웹 브라우저들은 실버라이트가 지원하는 DOM 중에 하나를 사용하여 구

현하고 있다. 이것은 1장(1.1절)에서 보여주었던 통계에 의해서도 그 근거를 찾을 수 있다. 서로 다

른 종류일지라도 프로그래밍으로 HTML 엘리먼트를 접근하거나 조작하는 것이 가능할 수 있

도록 DOM을 사용하고 있으며 그것을 이용하여 실버라이트 플러그인의 인스턴스를 새로운(또

는 기존의) 웹 페이지에 쉽게 추가할 수 있다.

2.1.2 실버라이트플러그인

실버라이트 플러그인은 경량화된 브라우저 플러그인으로서 실버라이트 콘텐트를 브라우저 영

역에 출력시키는 역할을 담당한다. 이 콘텐트는 브라우저의 종류와 상관없이 동일하게 출력되는

것을 목표로 만들어졌다. 이것을 보장하기 위해서 실버라이트 플러그인은 각 플랫폼마다 가지

고 있는 서로 다른 플러그인 기술들에 모두 호환되도록 사용할 수 있어야만 한다. 이런 이유로 배

포 방식 또한 플랫폼마다 서로 다르게 사용한다. 예를 들어 마이크로소프트의 인터넷 익스플로

러 브라우저에서 실버라이트가 실행될 때는 ActiveX 모델을 사용하지만 사파리에서 실행될 때

는 WebKit 모델을 사용한다. 그 외의 다른 브라우저에서는 넷스케이프 플러그인 방식을 사용한


다. 사용자가 어떤 브라우저를 선택하든 여러 가지 방법 중에 한 가지 방법으로라도 실버라이트

가 사용자 컴퓨터에 설치될 수 있어야만 한다.

실버라이트 설치파일은 아주 작고 경량화되어 있다. 이 파일을 설치할 때는 사용자가 관리자

권한을 가지고 있어야만 한다. 만일 그러한 권한을 가지고 있지 않다면 관리자의 도움을 받아야

만 한다. 물론 이미 실버라이트가 설치되어 있다면 사용자는 그들이 사용하는 브라우저에서 풍

성한 실버라이트 콘텐트를 자유롭게 즐기기만 하면 된다. 그 콘텐트의 구조는 실버라이트 객체

모델Silverlight Object Model로 이루어진 트리 형태의 계층구조로 이루어져 있다.

2.1.3 실버라이트객체모델

실버라이트 객체 모델은 계층화된 트리구조에 비유된다. 이 트리구조는 HTML DOM처럼 보이

지만 이 트리는 실버라이트의 XAML 파일의 객체구조이다. 이 파일은 자식 엘리먼트들의 연속

된 포함관계로서 UI를 구성한다. 각 엘리먼트들이 객체로 생성되는 순서는 왼쪽에서 오른쪽 방

향으로 반복 순회하면서 만들어진다. 이 생성과정을 그림 2.3에서 예를 보여주고 있다.

그림 2.3 ㅣ 위 순서는 실버라이트 객체 모델이 콘텐트를 렌더링하는 순서이다


이 렌더링 과정은 루트 엘리먼트로부터 시작되며 좌측 자식으로부터 우측 방향으로 순차적으로

생성된다. 만약에 엘리먼트가 자식을 가지고 있다면 우측 엘리먼트를 생성하기 전에 자식 엘리먼

트를 먼저 생성한다.

여기서는 생성되는 순서가 매우 중요하다. 왜냐하면 그 순서가 엘리먼트를 화면에 나타내는 순

서를 결정하기 때문이다. 그 때문에 나중에 만들어지는 엘리먼트는 이전에 만들어진 엘리먼트보

다 상위에 나타나게 된다. 계층구조의 트리를 순회하면서 엘리먼트를 출력하는 이런 반복적인 순

회작업을 책임지고 있는 것이 바로 실버라이트 플러그인이다.

본질적으로 Silverlight 2 Object Model은 HTML Document Object Model을 확장하고 있는

모양이지만, 그렇다고 HTML DOM의 일부분처럼 실버라이트 객체의 엘리먼트를 바로 접근할

수 있는 것은 아니다. 오로지 실버라이트 플러그인 인스턴스를 통해서만 접근할 수 있다. 이 플러

그인은 실버라이트 객체 모델을 순회할 수 있게 만드는 능력과 실버라이트 응용프로그램들을 웹

페이지에 포함시키는 능력을 가지고 있다. 이제 실버라이트와 HTML의 중심에 자리한 실버라이

트 플러그인을 생성하는 방법에 대해서 배워보기로 하자.

2.2 실버라이트플러그인생성하기

실버라이트 플러그인을 생성하는 목적은 실버라이트 응용프로그램을 HTML 페이지에 호스팅

하기 위함이다. 이 플러그인을 생성하는 방법에는 적어도 두 가지 이상의 방법이 있다. 그 한 가지

방법은 ASP.NET의 실버라이트 서버 컨트롤을 사용하는 방법이다. 실버라이트 서버 컨트롤은

Silverlight 2 So�ware Development Kit(SDK) 2 의 일부분으로 독자들이 ASP.NET 개발자라면

일반적으로 이 방법이 가장 쉽다. 하지만 쉬운 방법만을 알아 보는 것보다는 이 컨트롤을 직접 생

성하는 방법을 먼저 알아보는 것이 바람직하다.

실버라이트 플러그인을 직접 생성하는 방법은 ASP.NET 기술 외에 PHP, JSP, ASP 등의 다양

한 서버기술을 사용해서도 실버라이트 플러그인을 생성할 수 있다. 다른 모든 기술에서 실버라

이트 플러그인을 생성하려면 이번 절에서 설명하는 두 단계를 통해서 생성할 수 있다. 그 첫 번째

단계는 실버라이트 유틸리티 파일을 참조하는 것이고, 두 번째 단계는 자바스크립트 코드를 사

용하여 실버라이트 플러그인 인스턴스를 생성하는 것이다.

2 　 실버라이트 서버 컨트롤은 System.Web.Silverlight.dll 어셈블리로 제공하는 컨트롤이다. 이 어셈블리는 Silverlight SDK로 서버의

C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\ 디렉터리에서 찾아 볼 수 있다.


2.2.1 실버라이트유틸리티파일:Silverlight.js

Silverlight.js 유틸리티 파일은 무료로 제공되는 Silverlight 2 SDK의 일부분으로 이 SDK는 웹

사이트 http://www.silverlight.net/getstarted에서 다운로드할 수 있다. 이 SDK를 다운로드한

후에 압축을 해제하면 Tools 디렉터리에서 Silverlight.js 파일을 발견할 수 있을 것이다. 3 이 파일

은 실버라이트 응용프로그램에서 없으면 안 되는 필수 파일이므로 이 파일을 얻는 방법을 알고

있어야만 한다. 이 파일을 참조하게 되면 이 파일에서 제공하는 수많은 중요한 기능들을 사용할

수 있다.

SILVERLIGHT.JS파일참조하기

Silverlight.js 파일을 참조하는 방법은 일반적인 자바 스크립트 파일을 참조하는 방법과 동일하

다. Silverlight.js 파일의 라이선스는 Microso� Public License (Ms-PL)이므로 원한다면 적절하

게 파일 내용을 수정하여 사용할 수 있다. 하지만 그럴 필요를 느끼지는 않을 것이다. 이 파일을

참조하는 방법은 코드 2.1에서 보는 것처럼 HTML에서 script 태그의 src 속성을 이용하여 설정

한다.

<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>My Silverlight Project</title>

<script type="text/javascript" src="Silverlight.js"></script> </head>

<body> </body></html>

코드 2.1 Silverlight.js 유틸리티 파일 참조하기

HTM

L

코드 한 줄❶ 추가하는 것만으로 실버라이트 플러그인을 생성하기 위한 준비가 완료된다. 이 한

줄의 코드로 많은 유용한 유틸리티 메서드들을 사용할 수 있다.

SILVERLIGHT.JS파일의함수들

Silverlight.js 파일은 많은 유용한 함수들을 제공하고 있다. 이 함수들은 사용자 환경에 맞추어

3 　 마이크로소프트에서는 정기적으로 Silverlight.js의 새로운 버전을 제공하고 있다. 개발자들에게 배포를 쉽게 하기 위해서 마이크로소프트는

Silverlight.js를 위한 Code Gallery 프로젝트를 만들었다. 가장 최근의 Silverlight.js 파일은 http://code.msdn.microsoft.com/silverlightjs에서 다운

로드할 수 있다.


웹 응용프로그램을 구성할 수 있게 한다. 표 2.2에서는 그 유용한 함수들을 알파벳 순서대로 설

명하고 있다.

표 2.2 Silverlight.js 파일이 제공하고 있는 주요한 유틸리티 함수들

함수이름 함수 설명

buildPromptHTML 이 메서드는 실버라이트 설치 프롬프트를 위한 HTML을 생성한다. 이 메서드는 프롬프트를 빌드하기 위해 실버라이트 정보객체를 이용한다.

createObject 실버라이트 플러그인을 생성하고 초기화한다. 이 메서드의 자세한 정보와 샘플은 다음 절에서 볼 수 있다.

createObjectEx 실버라이트 플러그인을 생성하고 초기화한다. 이 메서드의 자세한 정보와 샘플은 다음 절에서 볼 수 있다. createObjectEx와 createObject 함수의 차이점에 대해서도 다음 절에서 설명한다.

HtmlAttributeEncode 이 메서드는 HTML에서 사용할 수 없는 문자열을 HTML에 유효한 문자열로 인코드하기 위한 몇 가지 기본 동작을 수행한다. 이 함수는 원래 Silverlight.js 파일 영역 안에서만 사용하기 위해 설계되었다. 그러므로 이 함수를 사용할 때는 유의해서 사용할 필요가 있다. 예): var result = Silverlight.HtmlAttributeEncode(' "Hello" ');

isInstalled 지정한 실버라이트 버전의 런타임이 사용가능한지를 반환한다. 이 메서드는 하나의 매개변수를 가진다. 이 매개변수는 버전 번호를 나타내는 문자열이다. 예): var result = Silverlight.isInstalled("2.0");

표 2.2에서 설명하고 있는 메서드들은 사용자 환경을 구성할 때 사용할 수 있는 강력한 도구들

이다. 이 함수들 중에는 실버라이트 객체를 생성할 수 있는 동일한 기능의 두 함수 createObject

와 createObjectEx가 존재한다. 이 두 함수는 실버라이트 플러그인의 인스턴스를 생성하기 위해

사용할 수 있는 도구 중에서 가장 유용한 도구이다.

2.2.2 실버라이트플러그인의인스턴스생성하기

실버라이트 플러그인을 생성하고 초기화를 위해서 두 가지 유틸리티 함수(createObject 또

는 createObjectEx) 중 하나를 사용한다. 이 두 개의 메서드는 동일한 능력을 가지고 있다. 사

실, createObjectEx 함수는 내부적으로 createObject 함수를 사용하고 있기 때문이다. 하지

만 플러그인을 생성할 때는 다양한 형태의 데이터 구조를 인자로 전달할 수 있도록 JavaScript

Object Notation(JSON) 4 을 이용할 수 있는 createObjectEx 함수를 사용한다. 이 책에서도

createObjectEx 함수를 사용하는 것을 기본으로 할 것이다.

createObjectEx 함수는 하나의 HTML 엘리먼트를 넘겨 받는다. 이 엘리먼트는 실버라이트 플

러그인을 호스트하기 위해 반드시 필요하다. 따라서 이 HTML 엘리먼트를 미리 마련해 놓거나

4 　 JSON 지침서는 www.json.org를 참고한다.


동적으로 생성해야만 한다. createObjectEx 메서드는 이 HTML 엘리먼트의 자식으로 실버라이

트 컨트롤을 추가한다. 이 관계도는 그림 2.2에서 보여주었으며 생성 과정은 코드 2.2 예제에서

그 실제 예를 보여주고 있다.

<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>My Silverlight Project</title>

<script type="text/javascript" src="Silverlight.js"></script> </head>

<body style="height:100%">  <div id="mySilverlightHost" style="height:100%;">

<script type="text/javascript"> Silverlight.createObjectEx({ source: "ClientBin/MySilverlightApp.xap", parentElement: document.getElementById("mySilverlightHost"), id: "mySilverlightControl", properties: { width: "100%", height: "100%", version: "2.0" }, events: {} }); </script> </div></body></html>

코드 2.2 실버라이트 플러그인 인스턴스 만들기

HTM

L

이 코드는 실버라이트 플러그인을 생성하기 위한 중요한 두 단계를 보여주고 있다. ❶에서 보여주

고 있는 첫 번째 단계는 Silverlight.js 유틸리티 파일을 참조하는 것이다. 이 파일을 참조하면 실

버라이트 플러그인 인스턴스를 생성하기 위해 createObjectEx 함수❷를 사용할 수 있다.

이 createObjectEx 함수는 복잡한 구조의 인자들을 넘겨 받고 있다. 이 인자들은 실버라이트

응용프로그램이 어떻게 동작할지를 지정하거나 웹 페이지 안에서 통합되는 방법을 지정한다. 실

버라이트 응용프로그램을 웹 페이지 안에 통합할 때 통합 방식에는 어떤 것들이 있는지 알아보

도록 하자.

2.3 실버라이트플러그인통합하기

실버라이트 플러그인을 생성하려고 한다면 현재 웹 페이지에 실버라이트 플러그인이 올바르게

통합될 것이라는 보장이 있어야만 한다. 단지 보여지는 것뿐만이 아니라 기능적으로도 올바르게


동작할 수 있어야만 한다. 그러기 위해서는 우리가 원하는 통합이 이루어질 수 있도록 제어할 수

있는 항목에는 어떤 것들이 있는지 면밀히 이해할 필요가 있다. 거시적인 차원에서 우리가 제어

할 수 있는 항목들은 다음과 같다.

실버라이트 응용프로그램을 HTML DOM과 연결하기 ▒

초기 환경 설정하기 ▒

플러그인 이벤트 처리하기 ▒

초기화 인자들 전달하기 ▒

이 작업 목록들은 아주 대략적인 내용만을 표현하고 있지만 잠시 후에 각각의 작업을 자세히 설

명할 것이다. 이 내용이 독자들에게는 조금 지루하거나 부담스러울 수도 있다. 이쯤에서 커피 한

잔을 손에 쥐고 숨을 깊게 들이마신 후 허리띠를 바짝 졸라매고 시작할 것을 권하고 싶다.

2.3.1 실버라이트응용프로그램과HTMLDOM연결하기

createObjectEx 함수의 처음 세 인자들은 source와 parentElement 그리고 id이며 실버라이트

응용프로그램과 HTML DOM 사이의 관계를 형성하기 위해 사용한다.

SOURCE

source 인자는 로드될 실버라이트 콘텐트의 URI이다. 콘텐트는 일반적으로 .xap 5 파일 형태로

포장된다. .xap 파일은 실버라이트 응용프로그램을 포장하기 위해 사용하는 압축 파일이다. 이

파일 형식에 대한 자세한 내용은 2.4절에서 설명한다. 중요한 것은 source 속성은 호스팅하고 있

는 서버나 다른 원격 서버에 있는 .xap 파일을 참조한다는 것이다. 이것은 실버라이트 응용프로

그램을 공유하게 할 수 있을 뿐만 아니라 로드 밸런싱을 통해 서버의 성능을 개선할 수 있다는

것을 의미한다. 이러한 능력은 실버라이트 1.0에서는 쉽게 제공할 수 있는 능력이 아니었다.

실버라이트 1.0에서는 .xap 파일을 지원하지 않는다. 그 대신 실버라이트 1.0은 다음 두 가지

리소스 중에 한 가지를 사용해서 source를 설정할 수 있다. 그 첫 번째 리소스는 서버에 있는

.xaml 파일을 참조하는 것이며 또 다른 리소스는 웹 페이지 내에 정의되어 있는 XAML 콘텐트

를 참조하는 것이다. 이런 형식의 XAML 콘텐트를 인라인 XAML이라고 한다. 어느 방법이든 이

모든 방법은 자바스크립트로 프로그래밍이 가능한 모델에 속해 있다. 이 두 가지 리소스 형식을

5 　 잡(zap)으로 발음한다.


실버라이트 2에서도 여전히 지원하고 있다. 따라서 실버라이트 2에서는 source 속성이 세 가지

리소스로 설정될 수 있으며, 그 리소스들을 나열하면 다음과 같다.

표 2.3 실버라이트 응용프로그램을 참조하는 세 가지 방식의 리소스

파일 확장자 예문*

패키지(Packaged) .xap source: "http://www.myserver.com/myApp.xap"

느슨한(Loose) .xaml source: "/relativePath/page.xaml"

인라인(Inline) [none] source: "#myXamlID"

* createObjectEx를 호출하는 것으로 가정하고 있다.

느슨한 방식이나 인라인 방식에 대해서 자세히 설명하지는 않았다. 왜냐하면 패키지 방식이 현재

가장 널리 사용되고 있기 때문이다. 패키지 방식은 2.4절에서 보게 되겠지만 유연하고 컴팩트하

고 전달이 쉬운 특징을 가지고 있기 때문에 권장하는 방식이다. 방식이 무엇이든 실버라이트 플

러그인은 언제나 parentElement의 자식노드로 추가된다.

PARENTELEMENT

parentElement 인자는 HTML 엘리먼트 객체를 전달하기 위한 목적으로 사용되며 전달하는 엘

리먼트는 실버라이트 플러그인을 호스트하기 위한 컨테이너로 사용한다. 이 속성은 부모의 id를

전달하는 것이 아니라 객체를 전달한다. 따라서 문서 내에서 객체를 찾기 위해 코드 2.2에서 볼

수 있는 것처럼 HTML DOM의 기능인 document.getElementById 함수를 사용하여 객체를 찾

는다. 그렇게 반환된 객체에 실버라이트 플러그인으로 사용될 새로운 HTML 엘리먼트를 생성하

고 추가한다.

실버라이트 플러그인을 생성하기 위해서 새로운 HTML 객체가 생성된다. 생성되는 객체의 엘

리먼트 타입은 사용자가 사용하고 있는 브라우저에 따라서 다르다. 만일 사용자가 인터넷 익스

플로러 또는 파이어폭스를 사용하고 있다면 OBJECT 엘리먼트가 생성되며, 그렇지 않고 사파리

를 사용하고 있다면 EMBED 엘리먼트가 생성된다. 어느 타입의 객체가 만들어지든 그 엘리먼트

는 parentElement의 하위 엘리먼트로 추가한다.

흥미로운 점은 새롭게 생성된 HTML 객체의 식별자를 id 인자값으로 전달받아 부여한다는

것이다.

ID

실버라이트 플러그인에 부여될 식별자는 createObjectEx 메서드의 세 번째 인자 “id”를 통해서


전달된다. OBJECT 또는 EMBED 엘리먼트의 id 값으로 사용되는 이 인자의 값은 앞 절에서 설

정하였다. 이 인자는 HTML DOM으로부터 실버라이트 플러그인으로 들어갈 수 있게 하는 하

나의 연결고리 역할을 한다. 이 값을 지정했기 때문에 document.getElementById 함수를 사

용하여 실버라이트 플러그인에 어렵지 않게 접근할 수 있다. getElementById 함수는 HTML

DOM의 Document 객체의 기능으로 JavaScript 같은 스크립트 환경에서 사용할 수 있다. 이 내

용은 2장 마지막 부분에서 자세히 설명할 것이다. 그 전에 사용자의 기본 환경을 설정하는 방법

에 대해서 우선 알아보도록 하자.

웹 페이지에 실버라이트 끼워넣기

실버라이트 응용프로그램을 호스트하기 위한 객체를 <object> 태그를 사용하여 직접 생성

할 수도 있다. 그럼에도 불구하고 ‘실버라이트 플러그인 인스턴스 만들기’ 절에서는 객체를

만들기 위해서 실버라이트 SDK의 Silverlight.js를 사용하여 인스턴스를 만들었다. 그 이유는

Silverlight.js 파일에는 buildPromptInstall이나 isInstalled와 같은 추가적인 메서드들이 있기

때문이다. 만일 object 태그를 직접 생성해보고 싶다면 다음 코드처럼 웹 페이지에 HTML

코드를 끼워넣으면 된다.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>My Silverlight Project</title>

</head>

<body>

<div id="mySilverlightHost" style="height:100%;">

<object

id="SilverlightPlugInID"

data="data:application/x-silverlight,"

type="application/x-silverlight"

width="100%" height="100%">

<param name="source" value="ClientBin/MySilverlightApp.xap" />

</object>

</div>

</body>

</html>

실버라이트 플러그인의 속성의 값은 param 엘리먼트를 사용하여 설정한다. 하지만 몇 가지

예외 사항은 존재할 수 있다. 만일 object 태그를 사용하여 플러그인 객체를 생성하는 방법

을 좀 더 자세히 알고 싶다면 실버라이트 SDK에 있는 문서를 참고하기 바란다.


2.3.2 초기환경설정하기

실버라이트에서는 플러그인을 초기화하기 위한 수많은 속성들이 존재한다. 이 속성들을 사용하

고 있는 예를 코드 2.3에서 보여주고 있다.

Silverlight.createObjectEx({ source: "ClientBin/MySilverlightApp.xap", parentElement: document.getElementById("mySilverlightHost"), id: "mySilverlightControl", properties: { height: "100%", width: "100%", background: "blue", isWindowless: "true", frameRate: "30", inplaceInstallPrompt: true, version: "2.0", ignoreBrowserVer: "true", enableHtmlAccess: "true" }, events: {} });

코드 2.3 createObjectEx에서 사용되는 초기 속성들

HTM

L

이 속성들❶은 초기환경을 설정하기 위한 속성들이다(코드 2.3에서 사용하고 있는 속성값들은

구문의 예를 보여주기 위한 임시 값들이다). 이 속성들을 순서대로 하나씩 자세히 알아보자. 가

능하면 height와 width처럼 논리적으로 묶을 수 있는 단위는 그룹으로 묶어서 같이 설명하도록

하겠다.

HEIGHT와WIDTH

height와 width 속성은 실버라이트 응용프로그램이 사용할 사각 영역을 표현하기 위해 사용한

다. height와 width는 기본값을 갖지 않으며, 픽셀 단위나 퍼센트 단위 모두를 사용하여 값을 설

정할 수 있다. 코드 2.4에서는 height와 width 속성에 픽셀 또는 퍼센트 단위로 값을 설정하는 방

법을 보여주고 있다.

코드에서 볼 수 있는 것처럼 height와 width 속성값에 “%”를 덧붙이면 상대적인 크기를 쉽게

설정할 수 있다. 상대 크기는 HTML에서 널리 사용되고 있는 유용한 기술이다. HTML과 쉽게

통합할 수 있는 이러한 옵션을 실버라이트 플러그인에도 사용할 수 있다는 것은 멋진 일이다. 하

지만 실버라이트 콘텐트를 HTML 세상과 완벽하게 통합하려면 background와 isWindowless

속성에 대해서도 알아둘 필요가 있다.


코드 2.4 왼쪽의 실버라이트 플러그인 설정부분에서는 height와 width 속성에 픽셀단위로 절대 크기를 설정하고 있다. 오른쪽의 실버라이트 플러그인 설정부분에서는 height와 width 속성에 퍼센트 단위로 상대적인 크기를 설정하고 있다.

Silverlight.createObjectEx({ source: "ClientBin/

MySilverlightApp.xap",

parentElement: myParent, id: "mySilverlightControl", properties: { width: "90", height: "60", version: "2.0" }, events: {}});

Silverlight.createObjectEx({ source: "ClientBin/

MySilverlightApp.xap",

parentElement: myParent, id: "mySilverlightControl", properties: { width: "90%", height: "60%", version: "2.0" }, events: {}});

절대

크기

상대

크기

BACKGROUND와ISWINDOWLESS

background 속성은 실버라이트 플러그인 영역의 색상을 지정하기 위해서 사용한다. 이 속성의

기본값은 null이며 흰색으로 채워진다. 이 속성은 두 가지 형식으로 값을 설정할 수 있다. 그 첫

번째는 16진수 형식으로 색상 값을 설정하는 것이고, 또 다른 형식은 “silver”와 같이 브라우저에

서 인식할 수 있는 예약된 색상 이름을 사용하는 것이다. 배경에 색상을 지정하는 방법 외에도

배경을 아예 보이지 않도록 숨기는 방법도 있다.

background 속성을 “transparent”로 설정하면 플러그인의 배경을 보이지 않게 만들 수 있다.

물론 플러그인의 배경이 사라진다고 해서 실버라이트 응용프로그램이 사라지는 것은 아니다. 배

경을 투명하게 만들기 위해서 선택 가능한 옵션이 어떤 것들이 있는지부터 알아보도록 하자. 이

옵션들을 알지 못하면 사용자가 원하는 결과와 동떨어진 결과를 나타낼 가능성이 있다. 만일

“transparent” 옵션을 사용하기로 결정했다면 isWindowless 속성도 염두에 두어야만 한다.

isWindowless 속성은 transparent로 설정된 영역의 아래에 위치한 HTML 콘텐트를 보이게

할지를 결정하기 위해 사용한다. 이 속성의 기본값은 false이다. 이 뜻은 실버라이트 플러그인 아

래에 있는 HTML 콘텐트가 가려진다는 것을 의미한다. 다르게 얘기하면 HTML 콘텐트보다 실

버라이트 플러그인이 상위에 존재한다고 할 수도 있다. 이 값이 true일 경우에는 실버라이트 응

용프로그램 성능에 영향을 준다.

하지만 isWindowless 속성을 true로 설정하면 하나의 장점을 가지게 된다. 이 속성이 true이

면 실버라이트 플러그인의 transparent 영역을 통해서 하단의 HTML 콘텐트를 보이게 할 수 있

다. 이것은 HTML 페이지와 실버라이트의 경계가 자연스럽게 통합되기를 바랄 때 가장 유용한


옵션이라고 할 수 있다. 다음 그림은 background와 isWindowless 속성들이 어느 정도 연관되어

있는가를 보여주고 있다.

background:null,isWindowless:“false”

background: “silver”,isWindowless: “true”

background:“transparent”,isWindowless:“false”

background:”transparent”,isWindowless:“true”

그림 2.4 ㅣ background와 isWindowless 속성을 여러 가지로 조합한 결과화면. 가장 바깥쪽의 사각형은

웹 페이지에서 HTML 영역을 의미한다. 그 안쪽의 사각형은 실버라이트 플러그인 영역을 의미하며 라운드형식

의 사각형은 나중에 설명하게 되는 순수 실버라이트 콘텐트 영역을 의미한다.

그림 2.4에서 보는 것처럼 background와 isWindowless 속성들의 조합이 어떻게 가능한지를 이

해하는 것은 웹 페이지와 통합하는 데 중요한 역할을 한다. 세 번째 이미지의 background 속성

을 “transparent”로만 설정한 것은 통합에 필요한 반만 설정한 것이며, 네 번째 이미지는 웹 페이

지 안에서 실버라이트 콘텐트를 이음새 없이seemlessly 통합하기 위해 완전한 조합으로 값이 설정

된 것을 보여주고 있다. 통합과정은 다음 장에서 다루는 실버라이트 콘텐트를 실제로 다루어 보

면 보다 분명하게 그 필요성을 느낄 수 있을 것이다. 일단 실버라이트 콘텐트가 로드되는 단계까

지 성공하고 나면 이번에는 출력 프레임을 조절하고 싶어질 것이다.

프레임비율

frameRate 속성은 초당 렌더링되는 프레임의 최댓값을 설정하기 위해 사용한다. 이것은 실버라

이트 응용프로그램이 시스템 자원들을 독식하지 않도록 조절하기 위한 장치로 만들어졌다. 기

본적으로 이 속성은 초당 24 프레임을 렌더링하도록 설정되어 있으며 35미리 무비 카메라에 견

줄 수 있다. 필요에 따라서 초당 64 프레임보다 큰 값을 지정할 수도 있지만 프레임 비율은 시스템

성능에 따라서 달라질 수 있다.

버전

실버라이트 플러그인을 인스턴스할 때 createObjectEx 함수에서 version 속성을 설정해야 한다.

이 속성은 실버라이트 응용프로그램이 필요로 하는 런타임의 최소 버전을 의미한다. 만일 사용


자 환경에 이 버전 이상의 실버라이트 런타임이 설치되어 있지 않다면 환영 메시지와 함께 설치

프롬프트가 나타날 것이다. 이 설치 프롬프트는 그림 2.5와 같다.

그림 2.5 ㅣ 실버라이트 설치 프롬프트

이 그림은 올바른 버전의 실버라이트가 설치되지 않은 사용자들이 보게 될 프롬프트이다. 실버

라이트가 설치되고 나면 실버라이트의 그 이후 버전은 자동으로 설치가 이루어진다. 이런 자동

업데이트는 실버라이트 구성 대화상자에서 이 기능을 비활성화시키지 않는 한 자동으로 진행될

것이다. 그림 2.6에서는 실버라이트 구성 대화상자를 보여주고 있다. 이 대화상자는 브라우저의

실버라이트 응용프로그램 영역을 마우스 오른쪽 버튼을 클릭하여 볼 수 있다.

그림에서 보는 것처럼 대화상자는 실버라이트의 자동 업데이트를 끌 수 있는 옵션을 제공하고

있다. 하지만 기본값으로 설정된 옵션은 항상 실버라이트의 최신 버전을 유지할 수 있도록 하고

있다.

그림 2.6 ㅣ 실버라이트 옵션설정 대화상자. 이 대화상자는 웹 브라우저에 포함된 실버라이트 콘텐트에서

마우스 오른쪽 버튼을 클릭하면 볼 수 있다.


IGNOREBROWSERVER

ignoreBrowserVer 옵션은 현재 브라우저 환경이 실버라이트를 실행할 수 있는지를 알아보기 위

한 검사를 실행할 것인지를 지정하기 위해 사용한다. 이 속성의 기본값은 false로, 실버라이트는

지원이 가능한 브라우저에서만 실행할 수 있도록 하는 검사를 실행한다. 하지만 이런 안전 검사

를 하지 않도록 true 값을 설정할 수도 있다. 이런 강제 접근 방식은 초기화 과정을 조금 빠르게

만들기 위해 사용할 수는 있지만 뜻하지 않는 결과를 초래할 수도 있다.

ENABLEHTMLACCESS

실버라이트 플러그인 초기화에서 마지막 속성은 부울 형식의 속성으로 보안과 관련된 계층을

제공한다. enableHtmlAccess 속성은 플러그인 안에서 .NET 코드를 이용해 HTML DOM을

접근할 수 있는지를 지정하기 위해 사용된다. 같은 도메인을 사용하는 응용프로그램에서의 기

본값은 true이며 크로스 도메인을 사용하는 응용프로그램을 위한 기본값은 false이다. 이 속성

은 안전한 개발 환경을 위해 제공하고 있다. 크로스 도메인 응용프로그램을 위해서도 이 속성

값을 true로 변경할 수는 있다. 하지만 그러기 위해서는 그 결과에 대해서 면밀히 고민해 볼 필

요가 있다.

예를 들어 정치 후보자인 제이슨 맥케이Jason Mackey가 모든 사람들이 원하는 실버라이트 컨트

롤을 만들었다고 가정해보자. 또한 이 컨트롤이 그것을 필요로 하던 경쟁 후보자인 맷 행클러

Matt Hankler에게조차 놀라운 기능의 컨트롤이라고 가정하자. 제이슨은 이 컨트롤을 제3자가 운영

하는 컨트롤 사이트를 통해서 무료로 아무나 다운로드하여 사용할 수 있도록 하였다. 제이슨은

컨트롤을 사용하는 웹 페이지의 DOM을 조작하는 코드를 작성하여 선거 전날에 제이슨을 투표

하라는 문구가 출력되는 코드를 몰래 추가하였다. 불행하게도 맷은 자신의 페이지에 이 컨트롤

을 사용하고 있었다. 그리고 이제 투표 전날 그의 캠페인 사이트 전체가 제이슨을 투표하라는 문

구로 가득해서 망가진 사이트가 되었다. 이 얼마나 어처구니 없는 일인가.

맷이 enableHtmlAccess 속성값을 명시적으로 false로 설정했더라면, 이런 소모적인 당혹

감을 쉽게 피할 수 있었을 것이다. 이 속성이 false로 설정되면 HTML DOM에 접근하려는

플러그인 인스턴스의 코드는 에러를 발생시킨다. 이 때 발생하는 에러는 이벤트 형식이기 때

문에 실버라이트에서는 에러를 자연스럽게 처리할 수 있다(잠시 뒤에 좀 더 자세히 다룬다).

enableHtmlAccess 속성은 단지 여러 설정 옵션들 가운데 하나이다.


이 외에도 ignoreBrowserVer, inplaceInstallPrompt, version, isWindowless, background,

height, width와 같은 많은 속성들이 있으며 이들 옵션들은 모두 중첩된 객체인 properties를 통

해 createObjectEx으로 전달된다. 이 중첩된 객체 문법이 처음에는 복잡해 보여서 조금 당황스

러울 수도 있겠지만, 조금만 자세히 보면 JSON 구문으로 이루어진 객체라는 것을 알 수 있다. 이

구문에서는 중첩객체를 논리적으로 두 그룹으로 나누어 실버라이트 플러그인 인스턴스의 모양

과 행위를 규정하는 요소들로 구분하고 있다. 행위와 관계된 요소들은 events 객체를 사용하여

전달하고 있다.

2.3.3 플러그인이벤트다루기

이제 우리는 실버라이트 플러그인 인스턴스를 만드는 데 필요한 모든 요소들에 대해서 알아

보았다. 이 플러그인 인스턴스는 플러그인 자신과 응용프로그램에 영향을 미치는 OnLoad와

OnError 이벤트를 가지고 있다. 잠시 뒤에 이들 이벤트에 관해 논의해 볼 것이다. 우선 플러그인

인스턴스에 이벤트 핸들러들을 연결하는 방법부터 살펴보도록 하자. 이벤트 연결은 코드 2.5에

서 볼 수 있는 것처럼 createObjectEx 함수 내의 중첩 객체 events를 사용해서 이루어진다.

Silverlight.createObjectEx({ source: "ClientBin/MySilverlightApp.xap", parentElement: document.getElementById("mySilverlightHost"), id: "mySilverlightControl", properties: { height: "100%", width: "100%", version: "2.0" }, events: { onLoad:plugin_Load, onError:plugin_Error } });

코드 2.5 플러그인 인스턴스와 연계된 이벤트 등록하기

HTM

L

이 코드는 실버라이트 플러그인에 두 개의 이벤트들을 연결하는 방법을 보여주고 있다❶. 이 두

이벤트를 반드시 설정해야 하는 것은 아니지만 이것들을 설정함으로써 보다 사용자 정의가 가능

한 환경을 만들어 낼 수 있다. 응용프로그램이 로드될 때에 사용자가 원하는 설정을 초기화하거

나 예기치 못한 에러가 발생하면 그것을 제어할 수 있다. 어떤 경우이든 onLoad나 onError 이벤

트를 사용하면 원하는 결과를 얻을 수 있다.


onLoad

onLoad 이벤트는 실버라이트 응용프로그램이 로드되자마자 발생하는 이벤트이다. 기본값은 이

이벤트가 발생해도 어떠한 일도 처리하지 않도록 되어 있다. 하지만 발생하는 이벤트를 처리하기

위한 핸들러를 생성할 수 있는 선택을 할 수 있다. 어떤 목적으로 사용되든 코드 2.6에서처럼 자

바스크립트를 사용하여 이벤트 핸들러를 생성할 수 있다.

function plugin_Load(sender, context, source){ alert("loaded");}

코드 2.6 실버라이트 플러그인의 onLoad 이벤트 핸들러에 대한 예

Java

Scr

ipt

이 코드는 가장 기본적인 형식의 onLoad 이벤트 핸들러를 보여주고 있다. 이 이벤트 핸들러는

onLoad 이벤트를 통해 전달된 3개의 매개변수 sender, context, source를 가지고 있다. 각각의

매개변수들은 표 2.4에서 설명하는 정보를 제공하기 위해 사용된다.

표 2.4 onLoad 이벤트 핸들러의 매개변수들

매개변수 설명

Sender 이 값은 실버라이트 플러그인 자신에 대한 핸들이다.

Context 이 값은 플러그인 인스턴스를 구분하기 위해 설정된 값이다. 이 값은 개발자에 의해 제공된다. 이 매개변수는 2.3.4절에서 논의한다.

Source 이것은 플러그인으로 로드된 콘텐트의 루트 엘리먼트이다.

이 이벤트의 매개변수 외에도 이벤트가 발생하지 않을 때가 있다는 것을 알고 있어야만 한다. 존

재하지 않는 실버라이트 응용프로그램을 참조하려는 경우에는 이벤트가 발생하지 않는다. 다시

말해서 createObjectEx 함수를 호출할 때 에러가 발생하면 onLoad 이벤트는 발생하지 않는다.

에러는 onError 이벤트를 발생시킬 것이라고 생각할지도 모르겠다. 하지만 onError 이벤트는 실

버라이트 응용프로그램이 로드된 이후에만 발생한다.

OnError

onError 이벤트는 응용프로그램에서 예외가 처리되지 않은 경우에 발생한다. 응용프로그램 수

준의 에러들을 처리하는 것은 2.4.2절에서 다루어보겠지만 응용프로그램 수준에서 처리될 수

없는 에러들이 존재할 수 있으며, 이런 경우에 플러그인 수준의 에러 핸들러를 생성할 수도 있다.

이 핸들러는 코드 2.7에서 보여주고 있는 것처럼 onError 이벤트 핸들러를 사용하여 작성할 수

있다.


function plugin_Error(sender, errorArgs){ alert("An unexpected error has occurred.");}

코드 2.7 실버라이트 플러그인의 onError 이벤트 핸들러에 대한 예

Java

Scr

ipt

이 코드에서는 범용적인 목적의 onError 이벤트 핸들러를 보여주고 있다. 이 이벤트 핸들러는

다른 곳에서 처리하지 않은 에러들을 부드럽게 처리하기 위해 사용된다. 에러가 발생하여 전달

되는 sender 인수는 에러를 발생시킨 플러그인의 참조를 전달하는 데 사용되고, 두 번째 매개변

수인 errorArgs 매개변수는 에러에 대한 설명을 제공하기 위해 사용된다. 이 데이터는 다양한

public 속성들을 이용해서 사용할 수 있으며 표 2.5에서 그 속성들을 설명하고 있다.

표 2.5 errorArgs 매개변수와 관련된 속성들

속성 설명

ErrorCode 에러코드. 이 속성은 읽기전용이다.

ErrorMessage 읽기전용인 에러 설명

ErrorType 에러의 카테고리

Name 에러를 발생시킨 객체의 이름

errorArgs 매개변수를 사용하면 에러에 대한 많은 정보를 얻어낼 수 있다. 이 매개변수는

onError 이벤트 핸들러에서 중요한 역할을 한다. 앞에서 잠시 언급했던 것처럼, 이 이벤트 핸들

러는 응용프로그램 수준에서 에러를 처리할 수 없을 때 유용하다. 스택오버플로우 예외가 바로

그러한 예 중에 하나이다. 에러의 종류와 상관없이 다른 곳에서 처리할 수 없는 에러들을 처리하

는 방법이 있다는 사실은 멋진 일이다. 이 외에도 실버라이트 응용프로그램이 시작될 때 초기화

정보를 전달할 수 있다는 것 또한 멋진 일이다.

2.3.4 초기화매개변수전달하기

실버라이트 응용프로그램은 다른 .NET 응용프로그램들과 많이 닮아있다. 예를 들어 기본적

인 콘솔 프로그램을 보면 프로그램이 시작되기 전에 매개변수를 전달할 수 있다. 응용프로그램

이 시작되면 매개변수를 파싱parsing하는 역할을 응용프로그램이 맡게 되고, 파싱이 끝나고 나면

이 매개변수들을 사용해서 처리해야 할 일들을 응용프로그램이 결정한다. 이것은 실버라이트에

서 초기화 매개변수들을 사용하는 방법과 완전히 일치한다. 실버라이트의 초기화 매개변수들은

initParams 인자를 사용해서 createObjectEx 함수로 전달된다. 이와 비슷하게 실버라이트 플러

그인 인스턴스에 식별 태그를 붙이기 위해 사용하는 context라는 매개변수도 존재한다. 코드 2.8

에서는 이 두 가지 매개변수들을 보여주고 있다.


이 코드는 initParams❶와 context❷ 매개변수의 기본적인 사용 예를 보여주고 있다. 각 매개변

수들은 각자 자신만의 특별한 목적을 가지고 있지만 실버라이트 2에서는 context 매개변수가 소

용 가치가 크지 않기 때문에 실제로는 initParams 매개변수만을 사용한다. 왜냐하면 각 실버라

이트 응용프로그램은 자신의 도메인 내에서만 실행되기 때문에 실버라이트 1.0 시절의 스크립팅

세계에서 그랬던 것처럼 코드를 공유할 필요가 없기 때문이다. 그렇지만 완벽을 기하기 위해서

두 가지 모두 상세하게 다루어 보도록 할 것이다.

INITPARAMS

initParams 매개변수는 사용자가 정의한 키/값 쌍들을 개수에 상관없이 실버라이트 응용프로

그램에 전달할 수 있게 한다. 응용프로그램에서는 시작하면서 전달된 키/값 쌍을 읽고 해석할 수

있다. 이것을 사용하는 방법을 2.4.2절에서 다루어 보기로 하고, 우선 이 키/값 쌍들을 만드는 방

법부터 알아보도록 하자.

이 키/값 쌍들은 엄격한 구조를 따른다. 이 구조는 콤마로 구분된 엔트리 리스트로 구성되며,

키/값 쌍의 각 엔트리들은 “[key]=[value]”과 같은 형태를 취한다. initParams이 가지는 전체 문

자열은 키/값 쌍의 컬렉션을 나타낸다. 이는 실버라이트 1.0에서 사용하는 initParams와 표현방

법이 다르다.

실버라이트 1.0에서는 initParams 매개변수는 콤마로 구분된 리스트를 값으로 사용해왔지만

실버라이트 2.0에서는 유효하지 않기 때문에 실버라이트 1.0 응용프로그램을 실버라이트 2.0으

로 마이그레이션하려고 한다면 이 부분을 조심해야만 한다. 이런 마이그레이션을 진행하고 있다

면 현재 같이 사용되고 있는 또 다른 변수인 context 매개변수에 대해서도 관심을 가질 필요가

있다.

Silverlight.createObjectEx({ source: "ClientBin/MySilverlightApp.xap", parentElement: document.getElementById("mySilverlightHost"), id: "mySilverlightControl", properties: { height: "100%", width: "100%", version: "2.0" }, events: { },

코드 2.8 플러그인 인스턴스에 초기화 매개변수 등록하기

HTM

L

initParams: "key1=value1, key2=123, keyX=valueY", context: "27d3b786-4e0c-4ae2-97a3-cee8921c7d3d" });


CONTEXT

context 매개변수는 실버라이트 플러그인을 식별하기 위한 방법을 제공한다. 이 플러그인은

context 매개변수의 값을 플러그인과 연관된 onLoad 이벤트에 전달한다. 그러면 이 이벤트는

HTML DOM을 검사하지 않고 다른 플러그인들과 구분하기 위한 구분자로 문자열 값을 사용한

다. 이는 스크립트로 작성된 코드를 웹 페이지 내에 존재하는 다른 여러 실버라이트 플러그인들

이 공유할 수 있도록 하기 위해 사용한다.

context와 initParams는 플러그인 생성과정에서 초기화 변수로서 사용된다. 플러그인을 생

성하는 과정에는 플러그인에서 발생하는 onError와 onLoad 이벤트들을 처리하는 방법을 결

정하는 것도 포함하고 있다. 플러그인의 처음 모양은 properties의 하위 객체 안에 선언된 다양

한 속성들에 의해서 설정된다. 더 중요하게 봐야 할 source 매개변수는 플러그인에 로드될 실버

라이트 응용프로그램을 지정하는 데 사용된다. 이 응용프로그램은 다른 실버라이트 2 응용프

로그램들과 다양한 공통 특성들을 공유하는 부분이 있을 것이다. 이 공통 특성들은 Silverlight

Application Model 컨텍스트이다.

2.4 실버라이트응용프로그램모델

이제 여러분은 웹 페이지에 실버라이트 플러그인을 추가하는 방법에 대해 이해하게 되었을 것이

다. 이 후에 남아있는 작업들을 통해서 플러그인에 실버라이트 응용프로그램을 로딩하는 문제

를 다루어보도록 할 것이다. 앞에서 배운 것처럼 일반적으로 응용프로그램은 그림 2.7에서 볼 수

있는 구조로 압축된 .xap 파일을 사용하여 배포된다. 이 압축 파일은 항상 AppManifest.xaml이

라는 매니페스트 파일과 실버라이트 응용프로그램의 진입점 역할을 하는 .dll 파일을 항상 포함

하고 있다. 그리고 추가적인 실버라이트 라이브러리나 별도의 콘텐트를 포함할 수도 있다. 이런

아이템들은 같은 .xap 파일 안에 포함해서 배포하거나 포함하지 않고 배포할 수도 있다. 어느 방

식으로 배포되든 응용프로그램에서 사용할 수 있는 부분에 포함된다.

그림 2.7 ㅣ .xap 파일의 구조


2.4.1 매니페스트파일

매니페스트 파일은 실버라이트 런타임에게 실버라이트 응용프로그램에 대한 정보를 설명하기

위해 사용되는 파일이다. 이 파일은 응용프로그램을 빌드하면서 비주얼 스튜디오에 의해 생성

되는 파일이기 때문에 이 파일에 대해서 자세히 살펴보지는 않을 것이다. 다만 실버라이트 런타

임은 Deployment를 루트 엘리먼트로 하는 AppManifest.xaml을 읽어들인다는 정도는 알고 있

어야 한다. 이 엘리먼트는 실버라이트 런타임에게 실버라이트 응용프로그램을 구동하는 방법을

알려주는 두 가지 속성들을 제공하고 있다. 이 두 가지 속성들은 코드 2.9에서 보여주고 있다.

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" EntryPointAssembly="MyApp" EntryPointType="MyApp.App" RuntimeVersion="2.0.30808.0"> <Deployment.Parts> <AssemblyPart x:Name="MyApp" Source="MyApp.dll" /> </Deployment.Parts></Deployment>

코드 2.9 XML로 작성된 매니페스트 파일의 예

XM

L

이 코드는 매니페스트 파일의 기본 내용을 보여주고 있다. 이 파일은 실버라이트 응용프로그램

을 시작하기 위해 EntryPointAssembly와 EntryPointType 속성❶을 이용한다. 첫 번째 속성

EntryPointAssembly는 Deployment.Parts❸에 속해 있는 AssemblyPart 요소들❹ 가운데 하

나를 항상 참조한다. 두 번째 속성인 EntryPointType은 실버라이트 응용프로그램을 시작시키

기 위해 사용될 클래스를 지정한다. 6 세 번째 속성인 RuntimeVersion❷은 해당 실버라이트 응

용프로그램이 어떤 버전의 실버라이트 런타임에서 만들어졌는지를 알려준다.

2.4.2 실버라이트응용프로그램

실버라이트 응용프로그램의 진입점은 App 객체이다. 이 객체는 App.xaml과 App.xaml.cs 파일

안에 정의되어 있으며 System.Windows.Application에서 파생되었다. App 클래스는 응용프로

그램의 생명주기에 영향을 주는 세 가지 이벤트를 다루기 위한 기능을 제공하다. 이 이벤트들은

응용프로그램이 시작할 때나 응용프로그램의 처리되지 않은 에러들이 발생할 때 또는 응용프

로그램이 종료할 때 발생하는 이벤트들을 포함하고 있다. 이 이벤트들을 다룰 수 있는 기능 외에

도 플러그인과 관련된 설정들을 읽을 수 있는 기능들을 제공하고 있다.

6 　 AppManifest.xaml은 프로젝트의 속성 페이지에서 설정한 값들에 의해서 컴파일 과정에 만들어진다. 만약 시작 응용프로그램 클래스(즉 App)

의 이름이나 네임스페이스를 변경하면 실버라이트 속성 페이지의 시작 객체 설정을 수정해야만 한다.


실버라이트응용프로그램시작관리하기

App 객체가 생성되면 Startup 이벤트가 발생한다. 기본적으로 이 이벤트는 화면에 기본 XAML

페이지를 로드한다. 다른 형식의 응용프로그램 초기화 작업을 수행하기 위해 이 이벤트를 사용

할 수도 있다. 예를 들어 응용프로그램 범주 내의 리소스와 속성들을 설정하기 위해 이 이벤트를

사용하거나 응용프로그램으로 전달된 initParams를 로드하기 위해 이 이벤트를 사용할 수도 있

다(2.3.4절). 어느 경우이든 이런 형식의 작업은 코드 2.10에서 보는 것처럼 Startup 이벤트를 사

용해서 작업할 수 있다.

private void Application_Startup(object sender, StartupEventArgs e) { IDictionary<string, string> initParams = e.InitParams; foreach (string key in initParams.Keys) { /* Process the initParam from the createObjectEx function */ }

this.RootVisual = new Page(); }

코드 2.10 Startup 이벤트 핸들러의 예

C#

이 이벤트 핸들러에서는 응용프로그램에 전달되는 initParams을 파싱하는 방법을 보여주고 있

다. Startup 이벤트는 초기화 작업을 돕는 StartupEventArgs 변수 e를 넘겨받는다❶. 첫 라인에

서의 작업은 초기화 매개변수를 로드하고❷, 나머지 부분에서는 응용프로그램에서 첫 페이지로

사용될 페이지 객체를 지정하고 있다❸. 이 두 작업들은 실버라이트 응용프로그램의 생명주기

와 관련된 중요한 내용들을 보여주고 있다.

첫 번째 중요한 내용은 StartupEventArgs를 오직 Startup 이벤트에서만 사용할 수 있다는 점

이다. 실버라이트의 다른 이벤트에서는 StartupEventArgs 객체를 사용할 수 없다. 따라서 코드

2.8에서 사용된 InitParams은 오직 응용프로그램의 Startup 이벤트에서만 사용할 수 있다. 만

약 초기화 매개변수들을 사용하려고 한다면 Startup 이벤트가 그것들을 사용할 수 있는 유일한

기회가 될 것이다.

두 번째 중요한 내용은 응용프로그램의 RootVisual이 한번 설정되면 변경될 수 없다는 점이

다. 즉 RootVisual이 Startup 이벤트에서 한번 설정되고 나면 그냥 그 상태가 계속 유지된다는 것

이다. 이 점이 실망스러울지도 모르겠다. 왜냐하면 실버라이트 응용프로그램에서 페이지를 전환

하는 방법을 궁금해 할 수도 있기 때문이다. 불행히도 실버라이트 2에서는 이 작업을 수행할 수

있는 확실한 방법을 가지고 있지 않다. 하지만 우회할 수 있는 방법은 가지고 있다. 그것에 대해서


는 12장에서 논의해 보기로 하고, 지금은 Startup 이벤트가 종료되면 RootVisual이 로드되고 렌

더링된다는 사실만 기억하기로 하자. 이제 실버라이트 응용프로그램이 사용자들에게 보이는 데

까지의 과정을 설명하였으므로, 이번에는 예기치 못한 에러에 대처하는 방법에 대해 이야기해

보도록 하자.

예기치못한에러들처리하기

Application.UnhandledException 이벤트 블럭은 처리되지 않은 예외들을 처리하기 위해 사용

된다. 응용프로그램 내에서 try-catch 블록에 의해 처리되지 않은 모든 Exception이 여기서 처리

된다. 이 처리 공간이 알려지지 않은 문제들을 자연스럽게 처리할 수 있는 마지막 공간이다. 코드

2.11에서 보는 것처럼 이 이벤트는 에러를 기록하기 위한 훌륭한 기회를 제공한다.

private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e) { LogError(e.ExceptionObject); e.Handled = true; }

코드 2.11 UnhandledException 이벤트 핸들러의 예

C#

이 코드는 기본적인 UnhandledException 이벤트 핸들러를 보여준다. 이 이벤트 핸들러는 처리

되지 않은 예외를 적절히 처리하는 데 도움을 주는 인수를 하나 가지고 있다. 이 인수는 Applica

tionUnhandledExceptionEventArgs 형식으로❶, ExceptionObject 속성을 통해서 이벤트를 발

생시킨 Exception에 접근할 수 있게 한다❷. 일단 이 Exception을 처리하고 나면 처리가 올바르

게 이루어졌음을 통지해야 한다. 이 작업은 ApplicationUnhandledExceptionEventArgs 객체

의 Handled 속성에 값을 설정하는 방법으로 이루어진다❸.

Handled 속성은 예외가 올바르게 처리되었는지를 나타내기 위한 bool 형식의 값을 갖는다.

이 속성의 기본값은 false이지만, 코드를 통해 true로 설정할 수가 있다. 이 속성을 true로 설정하

면 실버라이트 응용프로그램은 계속 동작하도록 신호를 보내게 되고, 만약 이 속성이 false로 설

정되면 실버라이트 플러그인은 응용프로그램을 언로드시키고 플러그인의 onError 이벤트를 발

생시킨다. 이 이벤트는 2.3.3절에서 논의한 적이 있다. 이런 비정상적인 응용프로그램의 중단은

Application.Exit 이벤트를 발생시키지 않는다는 점을 기억해 둘 필요가 있다.


실버라이트응용프로그램종료하기

Application.Exit 이벤트는 응용프로그램이 종료되기 전에 가장 나중에 발생하는 이벤트로서

마무리 작업을 처리할 수 있는 마지막 기회를 제공한다. 이 이벤트는 로그를 작성하거나 마지막

저장해야 할 내용을 수행하는 데 유용할 수 있다. 두 가지 예를 들어보긴 했지만 종료처리를 올

바로 사용하려면 이 이벤트가 언제 발생하는지를 이해하는 것이 아마 더 중요할 것이다.

Application.Exit 이벤트는 다음 중 한 가지 경우에 발생한다.

사용자가 브라우저 창을 닫을 경우. ▒

사용자가 실버라이트가 실행되고 있는 브라우저 탭을 닫을 경우. ▒

사용자가 실버라이트 응용프로그램이 포함된 페이지를 다른 페이지로 전환했을 경우 ▒

(www.mySilverlightApplication.com에서 www.silverlightinaction.com으로의 이동)

실버라이트 플러그인과 연결된 HTML 엘리먼트를 HTML DOM에서 제거한 경우 ▒

이 이벤트는 Startup이나 UnhandledException 이벤트처럼 이벤트 처리를 위한 매개변수를 제

공하지는 않지만 필요하다면 플러그인과 관련된 설정들을 읽을 수는 있다.

플러그인설정들읽기

실버라이트 응용프로그램의 로드가 성공하였다면 응용프로그램을 호스팅하고 있는 플러그인

에 대한 정보를 얻어낼 수 있다. 플러그인은 자신이 생성될 때 설정된 유용한 정보들을 제공할 수

있다(2.3.3절의 createObjectEx 참고). 이 정보는 응용프로그램의 전체 생명주기 동안 조회할 수

있으며 Application의 Host 속성을 통해 얻어낼 수 있다. 코드 2.12에 나오는 코드를 사용하면

언제든지 이 정보를 얻어낼 수 있다.

Application application = Application.Current; SilverlightHost host = application.Host;

코드 2.12 호스팅 플러그인과 관련된 설정들 얻어오기

C#

이 코드에서는 플러그인과 관련된 설정들을 얻어오는 방법을 보여주고 있다. 그 첫 단계는 현재

실행 중인 Application에 대한 참조를 얻어내는 것이다❶. 정적 속성인 Current을 사용하면 코

드 내의 어떤 위치에서도 Application을 얻어낼 수 있다. 또 Host 속성을 사용하면 플러그인에

접근할 수 있다❷. 이 속성은 SilverlightHost 형식으로 플러그인에 대한 정보를 제공한다. 표 2.6

에서는 이 정보들에 대해서 설명하고 있다.


표 2.6 SilverlightHost 객체의 속성들

속성 설명

Background 플러그인의 배경색상을 반환한다.

Content createObjectEx 함수 호출 결과로 만들어진 콘텐트를 나타내는 하위 객체이다. 이 객체는 플러그인의 높이와 너비에 대한 정보를 포함하고 있다.

IsLoaded 플러그인이 로딩을 완료했는지의 여부를 반환한다.

Settings settings는 createObjectEx 함수 호출 결과로 만들어진 환경설정을 나타내는 하위 객체이다. 이 하위 객체는 실버라이트 응용프로그램 인스턴스의 설정에 관한 정보와 HTML DOM과 관련된 값들을 전달한다.

Source 현재 로드된 XAML 콘텐트의 Uri이다.

이 표는 SiverlightHost 객체를 통해서 얻어낼 수 있는 속성들을 보여주고 있다. 이 속성들을 이

용하면 2.3절에서 언급했던 정보들에 거의 모두 접근할 수 있다. 이 데이터들을 사용하면 완전

히 통합된 경험 7 을 동적으로 만들어 낼 수 있다. 이 경험에는 시작부분이 있으며, 그 시작부분은

Startup 이벤트를 통해서 관여할 수가 있다. 또한 이 경험은 끝을 나타내는 부분도 있으며, 이 부

분은 Exit 이벤트를 통해 관여할 수가 있다. 이 부분들이 Application의 생명주기에 영향을 주는

주요한 이벤트들이다. 그 외에 응용프로그램에서 사용되는 콘텐트들이 다양하게 존재하는데,

이 콘텐트들을 응용프로그램의 부속물이라고 한다.

2.4.3 응용프로그램부속물

응용프로그램 부속물들은 응용프로그램을 올바르게 실행시키기 위해 필요한 아이템들을 말

한다. 이 아이템들에는 어셈블리나 이미지 또는 오디오, 비디오 파일, 폰트, XAML 또는 그 외의

다른 종류의 파일들을 모두 포함한다. 실버라이트 응용프로그램에서 사용되는 모든 파일들은

.xap 파일 안에 포함되어 배포될 수 있다. 이 방식을 사용하면 아이템들을 접근하는 속도가 빠를

수는 있지만 응용프로그램의 초기 다운로드 속도를 느리게 만들 수도 있다.

긴 로드 시간을 줄이기 위해 실버라이트는 응용프로그램을 보다 작은 단위들로 나누어 로드

하도록 만들 수가 있다. 작은 단위로 나뉘어지면 필요한 경우에만 해당 부분을 다운로드할 수 있

다. 이러한 방법은 응용프로그램의 초기 다운로드 속도를 보다 빠르게 할 수는 있다. 하지만 자

동으로 다운로드가 수행되는 것은 아니다. WebClient라는 클래스를 사용해야 하는데, 이 클래

스는 11장(11.4절)에서 논의할 것이다. 여기서는 응용프로그램 부속물들을 포함시키는 여러 가

7 　 (옮긴이) 1장에서도 언급했던 것처럼 경험이라는 단어의 의미를 혼란스러워하는 독자들도 있을 것이다. 이번 절에서 언급된 통합된 경험이란 플

러그인에 통합된 실버라이트 응용프로그램을 사용하는 체험 정도로 이해하는 것이 좋을 것 같다. 앞으로도 이 책의 원저자는 경험이라는 단어

를 많은 부분에서 사용하고 있으며 경험의 의미를 좀 더 포괄적으로 생각할 필요가 있다.


지 방법이 있다는 것만 기억해 두도록 하자.

응용프로그램의 부속물들은 아이템 집합인 .xap 파일 안에 포함된다. 이 .xap 파일에는 응용

프로그램을 구현하고 있는 .dll도 함께 포함되어 있다. 그 파일과 함께 포함되는 AppManifest.

xaml 파일은 이 응용프로그램에 대한 설명을 기록하고 있다. 이 파일은 응용프로그램을 실행시

키기 위해 실버라이트 런타임이 사용하는 정보파일이다. 응용프로그램을 실행하는 데 다소 불

편한 점은 이 응용프로그램이 HTML DOM 내의 하위 객체로 호스트되는 방식을 사용하기 때

문에 실버라이트 응용프로그램은 HTML DOM과 상호작용을 할 수 있어야 한다는 점이다.

2.5 HTMLDOM과상호작용하기

이제는 실버라이트 응용프로그램에 대한 기본적인 것들을 이해하게 되었을 것이다. 만일 그렇

지 않더라도 이 책을 통해 점점 더 분명해질 것이므로 크게 문제되지는 않는다. 중요한 것은 실

버라이트 응용프로그램과 HTML DOM이 관련되어 있다는 것을 이해하는 일이다. 즉 System.

Windows.Browser 네임스페이스를 사용하면 실버라이트 응용프로그램에서 HTML DOM과

상호작용할 수 있다.

System.Windows.Browser 네임스페이스는 실버라이트만이 제공하는 특별한 형

태의 API이다. 이 네임스페이스는 현재 다른 버전의 .NET 프레임워크에서는 찾

아 볼 수 없으며, WPF에서도 System.Windows.Browser 네임스페이스를 사용할

수가 없다.

System.Windows.Browser 네임스페이스는 HTML DOM의 기능을 캡슐화하고 있는 수많은 클

래스들을 제공한다. 그 중에 HtmlPage 클래스를 사용하면 DOM에 접근할 수 있다. 이 정적 클

래스는 관리 코드를 사용해서 웹 페이지를 관리할 수 있도록 도와준다. 뿐만 아니라 HtmlPage

클래스를 사용하면 브라우저의 윈도우를 사용해서 사용자와 상호작용할 수도 있다. 가장 흥미

로운 점은 System.Windows.Browser 네임스페이스가 스크립팅 세계와 관리 코드의 세계 사이

를 완벽하게 이어주는 역할을 한다는 점이다.

2.5.1 관리코드에서웹페이지를관리하기

HtmlPage 객체는 Document 속성을 제공한다. 이 속성은 현재 로드된 Html 페이지를 나타

내는 HtmlDocument 객체이다. 페이지 내에 존재하는 엘리먼트를 접근하려면 이 객체를 사용


해야만 한다. HTML DOM에서의 Document 객체도 동일한 기능을 제공하고 있기 때문에 이

객체를 사용하는 것이 친숙하게 느껴질 것이다. 실버라이트 버전의 Document 객체는 HTML

DOM이 할 수 있는 모든 것들을 처리할 수 있는 능력을 관리 코드에서도 처리할 수 있도록 그 능

력을 부여해 준다. 이를 이용하면 웹 페이지에 있는 콘텐트들을 탐색할 수 있고, 엘리먼트 속성들

과 스타일을 편집할 수 있으며, 쿼리 문자열에서 정보를 뽑아낼 수도 있다.

웹페이지콘텐트탐색하기

HtmlDocument는 현재 로드된 HTML 문서를 접근하기 위한 두 가지 방법을 제공한다. 그 방법

은 이 객체가 제공하는 두 가지 속성을 사용해서 접근할 수 있다. 표 2.7에서 그 속성들을 설명하

고 있다.

표 2.7 문서를 접근하기 위한 HtmlDocument의 두 가지 속성

속성 설명

DocumentElement 이 속성은 웹 페이지의 루트 엘리먼트를 나타낸다. 루트 엘리먼트는 "HTML" 엘리먼트를 의미한다.

Body 이 속성은 웹 페이지의 "BODY" 엘리먼트를 바로 접근을 하기 위해 사용한다.

이 속성들은 HtmlDocument를 접근하기 위한 속성들을 보여주고 있다. 접근 방법을 구체

적으로 설명하면 이 속성들을 사용해서 웹 문서의 엘리먼트들을 위에서부터 아래방향으로

HtmlDocument를 탐색하면서 원하는 엘리먼트를 검색하게 되어 있다. 그런데 만일 중간에 존

재하는 엘리먼트를 바로 검색해야만 한다면 이를 위해서 제공하는 두 가지 메서드를 사용할 수

있다. 이 두 메서드는 표 2.8에서 보여주고 있다.

표 2.8 HtmlDocument의 탐색 메서드

메서드 설명

GetElementById HtmlDocument 내에서 원하는 식별자를 사용하여 엘리먼트를 검색할 수 있도록 한다. 만약 엘리먼트가 발견되면 엘리먼트의 객체 버전인 HtmlElement을 반환한다. 만약 발견되지 않는다면 null이 반환될 것이다.

GetElementsByTagName 특정 태그명을 사용하는 엘리먼트들을 검색한다. 이 결과는 엘리먼트들의 컬렉션으로 반환된다.

이 표에서는 강력하면서도 자주 사용되는 GetElementById와 GetElementsByTagName 메서

드를 소개하고 있다. 이 메서드들의 이름은 HTML DOM에서 제공하는 메서드의 이름과 동일하

기 때문에 엘리먼트를 얻기 위한 접근방법이 익숙할 것이다. 코드 2.13에서는 관리 코드를 사용

해서 엘리먼트를 반환하는 방법을 보여주고 있다.


HtmlDocument document = HtmlPage.Document;HtmlElement element = document.GetElementById("myDiv");

코드 2.13 관리 코드를 통해 HTML 엘리먼트 참조하기

C#

“myDiv” 엘리먼트는 HTML 페이지에서 실버라이트 플러그인을 호스팅하고 있는 HTML의

DIV 엘리먼트이다. 이 코드에서는 관리 코드를 사용해서 HTML 엘리먼트를 얻어내는 방법을

보여주고 있다. 그보다 중요한 것은, 이 코드에서는 HtmlElement 클래스를 소개하고 있다는 것

이다. 이 클래스는 HTML DOM 내에 있는 모든 엘리먼트들과 상호작용하기 위해 마련된 래퍼

(wrapper) 클래스이다. 이 래퍼 클래스는 관리 코드에서 HTML 엘리먼트들과 상호작용하기 위

한 몇 가지 속성들을 제공하고 있다. 이 속성들은 표 2.9에서 나열하고 있다.

표 2.9 HtmlElement의 탐색 속성들

속성 설명

Children 현재의 HtmlElement의 자식 엘리먼트들의 컬렉션

CssClass HtmlElement에 사용되고 있는 스타일시트의 이름

Id HtmlElement의 고유한 식별자

Parent 현재 HtmlElement의 부모 엘리먼트. 만일 현재 엘리먼트가 DocumentElement라면 이 값은 null이 된다.

TagName 현재 HtmlElement의 태그의 이름

이 표에서는 HtmlElement의 속성들을 보여주고 있다. Children과 Parent 속성은 현재 엘리먼

트를 기준으로 웹 페이지 내의 엘리먼트들을 탐색할 수 있도록 도와준다. 모든 엘리먼트는 자

신만의 특별한 태그명을 가지고 있으며, 태그명은 TagName 속성을 사용해서 확인할 수 있다.

만약 태그명이 input이라면 Focus() 메서드를 호출해서 그 엘리먼트에 포커스를 줄 수도 있다.

Focus 메서드나 표 2.9에 나열된 속성들 외에도 모든 HTML 태그는 각기 자기만의 고유한 속성

들을 추가로 가지고 있다. 이제 엘리먼트마다 가지고 있는 고유한 속성들을 다루는 방법에 대해

살펴 보기로 하자.

엘리먼트의속성다루기

HTML DOM의 모든 엘리먼트는 많은 속성들을 제공하고 있다. 이 속성들 가운데는 모든

HTML DOM 엘리먼트들이 공통으로 가지는 속성(TagName과 같은 속성)과 특정 엘리먼트만

가지는 속성이 존재한다. 예를 들어 value 속성은 HTML input 태그만이 가지는 속성이다. 이

속성은 오직 한 종류의 엘리먼트에만 존재하는 속성이다. 이런 상황에서 HtmlElement 객체가

이 모든 엘리먼트의 속성을 어떤 방법으로 제공해 줄 수 있는지가 궁금할 것이다.


HtmlElement는 HTML 엘리먼트의 속성들과 상호작용할 수 있도록 고안된 두 개의 유틸리티

메서드를 제공하고 있다. 그 첫 번째 메서드 GetProperty는 속성에 할당된 값을 얻어내기 위해

사용하며, 다른 메서드인 SetProperty는 속성에 값을 할당하기 위해 사용한다. 이 메서드들은

어떤 종류의 엘리먼트와도 상호작용할 수 있는 융통성을 제공한다. 코드 2.14는 이 메서드들을

사용하는 하나의 예를 보여주고 있다.

HtmlDocument document = HtmlPage.Document;HtmlElement myTextField = document.GetElementById("myTextField");

int value = Convert.ToInt32(myTextField.GetProperty("value")); value = value + 1;myTextField.SetProperty("value", Convert.ToString(value));

코드 2.14 GetProperty와 SetProperty 메서드 사용하기

C#

이 코드는 GetProperty와 SetProperty 메서드가 사용되는 방법을 보여주고 있다. 이 예제에서

는 HTML Input 필드의 “value” 속성의 값을 반환하는 것을 볼 수 있다. 이 값을 1만큼 증가시킨

뒤 다시 필드에 할당하고 있다. GetProperty 메서드는 값을 얻기 위한 속성 이름을 문자열로 전

달 받는다❶. 그러면 그 속성의 값을 문자열로 반환한다. 이와 비슷하게 SetProperty는 값을 설

정할 속성명을 문자열로 전달받는다❷. 이 때 속성명은 SetProperty 메서드의 첫 번째 인자로 전

달한다. 코드에서는 프로그래밍 방식으로 속성값들을 다루는 것이 얼마나 쉬운지를 보여주고

있다. 고맙게도 엘리먼트의 CSS 정보를 다루는 방법 또한 어렵지가 않다.

CSS정보다루기

HTML DOM 내의 엘리먼트들은 프레젠테이션과 콘텐트를 분리할 수 있도록 설계되었다. 엘리

먼트들이 어떻게 보여져야 하는지를 설명하는 프레젠테이션 정보는 다양한 스타일로 작성된다.

이 스타일들은 CSS 권고안에 속해 있는 수많은 속성들로 이루어져 있다. 이 속성들이 가지고 있

는 값은 관리 코드를 사용해서 할당할 수 있는데, 코드 2.15에서 보는 방법과 같다.

HtmlDocument document = HtmlPage.Document; HtmlElement myDiv = document.GetElementById("myDiv"); myDiv.SetStyleAttribute("backgroundColor", "gray");

코드 2.15 관리 코드에서 스타일 속성 할당하기

C#

이 코드는 스타일 속성을 관리 코드에서 사용하는 방법을 보여주고 있다. 첫 번째 단계에서는 스

타일을 할당할 HtmlElement를 얻어내고, 그 다음에는 SetStyleAttribute 메서드를 사용하여 스

타일을 설정하고 있다❶. 이 외에도 GetStyleAttribute 메서드를 사용하여 HtmlElement의 현

재 스타일을 알아낼 수도 있다. 두 메서드 모두 속성을 설정할 때 스크립트에서 사용하는 명명방


식을 사용하여 스타일을 참조하고 있다.

스크립트에서 사용하는 명명방식은 자바스크립트를 사용하여 스타일과 상호작용하기 위

해 사용되고 있는 방식이다. 이 방식은 스타일 이름을 표기할 때 낙타camel 표기법을 사용한

다. 이것은 단어들을 구분하기 위해 가로획(-)을 사용하는 HTML의 방식과는 조금 차이가 있

다. 코드 2.15에서 사용된 “backgroundColor” 속성을 HTML 표기법으로 바꿔보면 속성명은

“background-color”가 된다. 경력 있는 웹 개발자라면 아마도 이 차이를 경험해 보았을 것이다.

실버라이트에서는 스크립트 방식의 명명방식만을 사용한다. 만약 HTML 방식을 사용해서 스타

일을 참조하려고 할 경우에는 Exception이 발생하지는 않지만, 스타일이 설정하거나 얻을 수가

없다. 명명방식을 떠나서 스타일 속성의 값을 얻어오거나 설정하는 방법이 있다는 것은 멋진 일

이다. 만일 쿼리 문자열의 값을 얻을 수 있다면 그 또한 멋진 일일 것이다.

쿼리스트링에접근하기

웹 응용프로그램의 상태를 관리하기 위해 사용하는 일반적인 방법 중에 하나는 쿼리 스트링을

사용하는 것이다. 쿼리 스트링은 사용자의 세션과 관련된 소량의 데이터를 유지하기 위해 사용

할 수 있다. 그 밖에도 쿼리 스트링은 사용자들이 나중에 특정한 위치로 돌아올 수 있도록 하는

일종의 북마크 도구로도 사용할 수 있다. 예를 들어 우리가 Silverlight를 검색한 결과를 친구에

게 보여주고 싶다면 다음과 같은 웹 주소를 친구에게 이메일로 보내는 방법을 사용할 수가 있을

것이다. http://search.msn.com/results.aspx?q=Silverlight&mkt=en-us&FORM=LVCP

이 웹 주소를 사용하면 친구는 동일한 검색 결과를 바로 볼 수 있다. 이 방법은 누군가에게 검

색엔진으로 가서 검색 입력상자에 ‘Silverlight’라고 입력한 뒤 그 결과를 기다려 보라고 이야기

하는 것보다 훨씬 더 편리하다. 이렇게 간단하게 페이지 검색 결과를 전달할 수 있게 된 것은 웹

주소에 ?(물음표)를 사용하여 그 뒤에 값들을 덧붙일 수 있기 때문이다. 이 값들을 쿼리 스트링

이라고 하며 HtmlDocument의 QueryString을 사용하여 확인할 수 있다.

HtmlDocument의 QueryString은 키/값을 하나의 쌍으로 가지는 컬렉션이다. 이 컬렉션은

DocumentUri라는 개체를 구성하는 일부분이다. DocumentUri는 현재 페이지의 Uri를 의미하

며, 응용프로그램에서 현재 위치를 알고 싶을 때 사용할 수 있다. 그림 2.8은 DocumentUri의 각

부분들이 어떻게 분류되는지를 보여주고 있다.


그림 2.8 ㅣ 웹 주소의 엘리먼트들

이 그림은 웹 주소를 구분하여 보여주고 있다. 특히 웹 주소에서 물음표(?) 이후의 문자열이

QueryString이라는 것을 별도로 표시하고 있다. 쿼리스트링에서는 키/값의 쌍을 &로 구분하며,

그림 2.8에서의 QueyString 부분은 키/값 쌍을 두 개 가지고 있다. 이 키/값 쌍은 코드 2.16에서

보여주고 있는 것처럼 코드를 사용해서 값들을 읽어낼 수 있다.

HtmlWindow window = HtmlPage.Window;HtmlDocument document = HtmlPage.Document; foreach (string key in document.QueryString.Keys){ window.Alert("Key: " + key + "; Value: " + document.QueryString[key]);}

코드 2.16 QueryString의 쌍들을 보여주기

C#

이 코드에서는 QueyString의 각 키/값 쌍들을 얻어내는 방법을 보여주고 있다. 주의할 사항은

QueryString 컬렉션을 사용하여 키/값 쌍을 설정할 수는 없다는 것이다. QueryString에 값을

설정하고 싶다면 2.5.2절에서 설명하는 Navigate 메서드를 이용해서 페이지를 다시 쿼리하는 방

법을 사용하는 방법 정도를 사용할 수 있다. 하지만 이 방법은 QueryString과 관련된 값들을 재

설정하게 만들 뿐만 아니라 페이지의 콘텐트들도 재설정하게 만들 것이다. 일단 페이지의 콘텐트

를 로드하는 것이 성공하면 HtmlDocument 객체를 사용할 수 있으며 그것을 사용하면 페이지

를 탐색할 수가 있다.

2.5.2 사용자의브라우저윈도우다루기

브라우저 윈도우는 HtmlWindow 객체를 사용하여 다룰 수 있다. 이 객체는 코드를 사용해서

인스턴스를 만들 수는 없으며, HtmlPage의 Window 속성을 사용해서만 얻을 수 있다. 코드

2.17에서는 그 방법을 보여주고 있다.

HtmlWindow window = HtmlPage.Window;

코드 2.17 C# 코드에서 현재 브라우저 윈도우의 인스턴스 얻기

C#

이 코드는 브라우저 윈도우를 다룰 수 있도록 윈도우 객체를 얻는 방법을 보여주고 있다. 이 윈도


우 객체를 사용하면 여러 유용한 작업을 수행할 수 있다. 예를 들어 사용자에게 프롬프트를 띄

운다거나 현재 페이지를 다른 주소로 이동시킬 수 있다. 어느 쪽이든 이 브라우저 윈도우는 유용

한 정보를 가지고 있으며 사용자 경험을 향상시키기 위해 사용될 수 있다.

사용자에게프롬프트띄우기

HtmlWindow 클래스를 사용하면 사용자에게 HTML 프롬프트를 띄울 수 있다. 주의할 것은

이 프롬프트는 실버라이트 자체의 기능이 아니라는 점이다. 이 프롬프트는 오로지 브라우저 윈

도우를 통해서만 사용할 수 있는 기능이기 때문에, 이 프롬프트를 사용할 때는 극도로 제한된

능력 범위 안에서 사용할 수밖에 없다. 그나마 다행인 것은 이 프롬프트가 사용자에게 정보를

출력하거나 수집하려고 할 때 빠른 수단이 될 수는 있다는 것이다. HtmlWindow를 통해 사용

할 수 있는 프롬프트는 3가지가 있으며 표 2.10에서 볼 수 있다.

표 2.10 HtmlWindow 클래스로 사용할 수 있는 프롬프트들

메서드 설명

Alert(…) 메시지를 보여주는 창을 띄운다.

Confirm(…) 사용자에게 설명이나 질문에 동의하는지를 묻는 창을 보여준다. 이 창은 두 개의 버튼 OK와 Cancel 버튼을 포함하고 있다. 사용자가 OK 버튼을 선택하면 true를 반환하고 Cancel을 선택하면 false를 반환한다.

Prompt(…) 메시지를 보여주고 정보를 입력할 수 있는 텍스트박스를 가지는 대화상자를 보여준다. 대화상자에서 사용자가 OK 버튼을 선택하면 텍스트박스에 입력된 값을 문자열로 반환한다. Cancel 버튼을 선택하거나 윈도우 종료버튼을 선택하면 null을 반환한다.

이 프롬프트들은 HTML DOM의 Window 객체를 통해서 사용할 수 있는 프롬프트들을

HtmlWindow 객체를 사용하여 모방하고 있다. 실버라이트를 사용할 때는 관리 코드에서 이 객

체를 이용하여 프롬프트들을 사용할 수가 있다. 코드 2.18에서는 사용자에게 경고창을 출력하

는 방법을 보여주고 있다.

HtmlWindow window = HtmlPage.Window;window.Alert("Welcome!");

코드 2.18 사용자에게 경고창 띄우기

C#

사용자에게 경고창을 띄우는 것이 얼마나 쉬운지를 알 수 있다. 또한 사용자가 프롬프트에 응답

하기 전까지 다른 코드가 실행되는 것을 막고 있다는 점도 알 수 있다. 표 2.11에 나와 있는 다른

프롬프트들도 그것을 사용할 때는 이와 같은 방법으로 사용할 수 있다. 브라우저 윈도우를 사용


해서 페이지를 전환하는 것 또한 이처럼 쉽게 수행할 수 있다.

브라우저윈도우페이지전환하기

페이지 전환은 웹 응용프로그램에서 중요한 부분이다. 사용자들은 자신이 가고 싶은 곳으로 웹

페이지를 전환하고 싶거나 다른 브라우저를 실행해서 새로운 페이지를 로드하고 싶을 수도 있다.

어느 쪽이든 HtmlWindow 클래스는 그 작업을 수행할 수 있는 두 개의 메서드를 제공하고 있

다. 이 두 메서드들은 표 2.11에서 보여주고 있다.

표 2.11 HtmlWindow 클래스가 제공하는 페이지 전환 메서드들

메서드 설명

Navigate(…) 이 메서드는 제공된 URI로 브라우저 윈도우 페이지를 전환시킨다. 이 URI의 페이지를 목표 윈도우(target window)를 선택해서 로드시킬 수도 있다. 이 목표 윈도우는 세 번째의 매개변수를 사용해서 설정할 수 있다. 이 때 목표 윈도우를 지정하기 위한 매개변수의 값은 HTML DOM의 window.open 함수에 의해 사용되는 매개변수의 값과 일치한다.

NavigateToBookmark(…) 이 메서드는 현재 HTML 페이지 내에서의 특정 위치로 페이지를 전환하기 위해 사용된다.

이 페이지 전환 메서드들은 실버라이트 응용프로그램에서 원하지 않던 결과를 만들게 될 수도

있다. 예를 들어 실버라이트 응용프로그램을 호스팅하고 있던 웹 페이지를 다른 페이지로 전환

을 하게 되면 실버라이트 응용프로그램이 사라지게 될 것이다. 따라서 페이지 전환 외에, 코드

2.19에서 보여주고 있는 방식으로 전환하려는 페이지를 새로운 창을 만들어 로드시키는 방향을

고려해 볼 필요가 있다.

Uri uri = new Uri("http://www.silverlightinaction.com"); HtmlWindow window = HtmlPage.Window;window.Navigate(uri, "_blank");

코드 2.19 새로운 브라우저 윈도우로 “Silverlight 2 in Action” 공식 사이트 로드하기

C#

이 코드에서 눈여겨봐야 할 부분 가운데 하나는 웹 주소를 사용할 때 Uri 객체를 사용한다는 점

이다❶. 뿐만 아니라 HTML에서 사용했던 것처럼 주소를 지정하면서 목표 윈도우를 지정할 수

있다❷. 이는 경험을 완전하게 제어하기 쉽게 만들어준다. 이 기능은 단지 HtmlWindow 클래스

가 제공하는 기능 중 하나일 뿐이다. 이 클래스는 브라우저 윈도우에 관한 정보를 알아내기 위해

사용되는 속성도 제공하고 있다.


브라우저속성알아내기

정적 속성인 BrowserInformation 속성은 브라우저에 대한 자세한 정보를 제공해준다. 이 정보

는 System.Windows.Browser.BrowserInformation 객체에 저장되어 있다. 이 객체는 HTML

DOM의 Navigator 객체와 동일한 기능을 한다. 표 2.12은 BrowserInformation 객체의 속성들

과 그와 일치하는 Navigator의 속성들을 보여주고 있다.

표 2.12 BrowserInformation 속성들과 그와 일치하는 Navigator의 속성들에 대한 설명

BrowserInformation Navigator 설명

BrowserVersion appVersion 플랫폼과 브라우저 버전을 나타낸다.

CookiesEnabled cookieEnabled 브라우저에서 쿠키를 사용할 수 있는지의 여부를 나타낸다.

Name appName 브라우저의 이름

Platform Platform 운영 체제

UserAgent userAgent 브라우저에서 서버로 보내지게 될 사용자 에이전트의 헤더 값

이들 속성들을 사용하면 많은 유용한 정보에 접근할 수 있음을 알 수 있을 것이다. 이 정보는 사

용자들이 어떠한 환경에서 실버라이트 응용프로그램을 사용하는지에 대한 통계적 분석을 수

행하고자 할 때 유용할 것이다. 그러기 위해서는 코드 2.20에서 보여주고 있는 코드처럼 우선

BrowserInformation을 확보할 수 있어야만 한다.

BrowserInformation browserInfo = HtmlPage.BrowserInformation;HtmlWindow window = HtmlPage.Window;window.Alert(browserInfo.Name);

코드 2.20 사용자 브라우저의 이름 출력하기

C#

이 코드는 사용자의 브라우저와 관련된 정보를 얻어내는 방법을 보여주고 있다. 이 정보는 관리

코드에서 HTML DOM을 조작하려고 할 때 유용할 수 있다. 왜냐하면 브라우저들 간에 존재하

는 렌더링에 차이가 있을 수 있기 때문이다. BrowserInformation 클래스를 사용하면 이러한 불

일치에 알맞은 코드를 손쉽게 작성할 수 있다.

BrowserInformation 클래스는 사용자의 브라우저에 관한 정보를 알 수 있게 만들어준다. 실

버라이트에서 이 브라우저 윈도우는 HtmlWindow 클래스로 사용할 수 있다. 이 클래스를 사용

하면 인터넷상에서나 페이지 자체 내에서도 페이지를 전환할 수가 있다. 그뿐만 아니라 필요하다

면 사용자에게 프롬프트를 띄워서 그들과 의사소통을 할 수도 있다. 이 프롬프트들은 자바스크

립트를 사용하는 웹 응용프로그램을 개발해보았다면 아마도 익숙할 것이다. 그리고 자바스크립


트를 과거에 사용해보고 현재 사용하지 않는 사람이라면 관리코드와 스크립트 세상을 연결하

는 방법이 있다는 것을 알게 되면 아마도 놀라울 것이다.

2.5.3 스크립팅의세계와관리코드의세계를연결하기

정신이 혼미해질 만큼 자바스크립트를 사용해서 XML 콘텐트를 파싱하는 귀찮은 작업을 참아

왔던 사람들을 위해서 실버라이트는 멋진 기능을 제공하고 있다. 실버라이트는 스크립트 세계와

관리 코드 세계 사이를 연결할 수 있는 다리를 생성할 수가 있다. 이것은 실버라이트의 풍부함과

.NET의 강력한 기능만을 사용하여 실버라이트를 작성할 수 있도록 하였다는 것이다. 실버라이

트는 풍부하고 화려한 사용자 인터페이스가 필요하지 않은 경우에도 두 세계를 연결할 수 있다

는 것만으로도 가치가 있다. 이 기능을 이용하려면 자바스크립트를 사용하여 관리 코드를 호출

하는 방법을 알고 있어야 하며, 또한 관리코드를 사용하여 자바스크립트 코드를 사용하는 방법

도 알고 있어야 한다.

자바스크립트로관리코드호출하기

자바스크립트에서 관리 코드를 호출하는 방법은 아주 간단하다. 관리 코드 요소를 스크립트 세

계에 노출하기 위해서는 기본적인 3가지 단계를 따라 하면 된다. 일단 이 작업을 수행하고 나면,

자바스크립트에서 관리 요소들을 마음껏 참조할 수가 있다. 간단한 예를 위해서 웹 서비스를 호

출하는 관리 코드의 메서드를 자바스크립트에서 사용한다고 가정하기로 하자.

자바스크립트에서 관리 코드를 호출하기 위한 첫 번째 단계는 ScriptableType 어트리뷰트를

지정하는 것이다. 이 어트리뷰트는 System.Windows.Browser 네임스페이스에서 제공하고 있으

며, 클래스를 자바스크립트 세계에서 접근할 수 있도록 하기 위해 사용한다. 이 어트리뷰트는 특

수한 목적의 다른 속성을 제공하지 않기 때문에 코드 2.21에 보여주는 방법처럼 모든 클래스에

이 어트리뷰트를 적용할 수 있다.

[ScriptableType]public partial class Page : UserControl

코드 2.21 스크립팅을 위한 타입 준비하기

C#

이 코드는 실버라이트의 기본 페이지를 자바스크립트에서 접근할 수 있는 타입으로 만드는 방법

을 보여주고 있다. 실제로, 어떤 클래스라도 스크립트 세계에서 접근할 수 있도록 만들 수 있다.

일단 클래스가 ScriptableType으로 표시되면 모든 public 속성들, 메서드들, 이벤트들은 자바스

크립트에서 사용할 수 있도록 만들 수 있다. 물론 public 멤버들 중에서 노출하기 위한 멤버들을


선별하는 과정을 거쳐야만 한다. 다행히도 이 과정 역시 간단하다.

멤버 요소들을 노출시키기 위해선 유사한 형태의 ScriptableMember 어트리뷰트를 사용해야

만 한다. ScriptableMember 어트리뷰트는 스크립트에서 사용되는 이벤트, 메서드, 속성들에 적

용될 수 있다. 이 어트리뷰트는 코드 2.22에서 보는 것처럼 추가하면 된다.

[ScriptableMember]public void ExecuteWebService(){ // Make a call to a web service}

코드 2.22 스크립트 세계에 관리 코드 노출시키기

C#

이 코드는 ScriptableMember 어트리뷰트의 기본적인 사용방법을 보여주고 있다. 원한다면 이

어트리뷰트는 스크립트로 멤버이름의 별칭을 제공하게 할 수 있다. ScriptAlias 속성에 별칭으로

사용할 문자열을 설정하면 된다. 이것은 스크립트 내에서 이름 충돌을 피하려고 할 때 유용하게

사용할 수 있다. 지금까지 설명한 모든 것들은 아주 기본적인 준비를 한 것이며 실제적으로 아직

은 자바스크립트 세계에 다리를 놓지는 않았다.

스크립트 세계에 다리를 놓기 위해서는 정적 멤버 RegisterScriptableObject 메서드를 사용하

여 노출하려는 클래스의 인스턴스를 등록해야만 한다. HtmlPage 클래스가 제공하는 이 메서드

는 클래스 인스턴스에 별칭을 줄 수 있다. 스크립트에서는 이 별칭을 사용하여 클래스를 접근할

수 있다. 코드 2.23에서 보여주는 코드를 사용하여 관리코드를 노출할 수 있다.

public Page(){ InitializeComponent();

코드 2.23 스크립트 세계에 객체 노출하기

C#

HtmlPage.RegisterScriptableObject("bridge", this);}

이 코드는 RegisterScriptableObject 메서드의 기본적인 사용 방법을 보여주고 있다.

이 메서드는 ScriptableType으로 지정된 클래스의 인스턴스를 넘겨 받는다. 해당 객체는

RegisterScriptableObject 메서드의 두 번째 매개변수로 전달됨으로써 스크립트 엔진에 등록되

는데, 이 메서드는 첫 번째 매개변수를 사용하여 클래스 인스턴스에 대한 별칭을 생성한다. 이 별

칭은 실버라이트 플러그인의 Content 속성에 덧붙여진다.

실버라이트 플러그인은 content라는 하위 객체를 제공하는데, 이 객체는 실버라이트의 콘

텐트를 노출시킨다. 이것은 표 2.6에서 언급된 SilverlightHost 클래스의 Content 속성의 스크


립팅 버전이다. 코드 2.24에서 확인할 수 있듯이, 일단 플러그인 인스턴스를 얻어낸 뒤 원하는

ScriptableMember를 참조함으로써 어트리뷰트를 적용한 객체에 접근할 수 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Silverlight Project Test Page </title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript"> function buttonClick() { var plugin = document.getElementById("mySilverlightControl"); plugin.content.bridge.ExecuteWebService(); } </script></head>

<body style="height:100%;"> <div id="mySilverlightHost" style="height:100%;"> <script type="text/javascript"> var host = document.getElementById("mySilverlightHost"); Silverlight.createObjectEx({ source: "ClientBin/MySilverlightApp.xap", parentElement: host, id: "mySilverlightControl", properties: { height: "100%", width: "100%", version: "2.0" }, events: { } }); </script> </div> <input type="button" onclick="buttonClick();" value="Execute Web Service" /></body></html>

코드 2.24 스크립트 세계에서 관리코드 참조하기

Java

Scr

ipt

얼굴 없는 실버라이트 응용프로그램이란 UI가 없는 실버라이트 응용프로그램을 의미한다. UI

가 없는 대신에 ScriptableType 객체는 웹 페이지를 위한 두뇌 역할로 사용될 수 있다. 이러한 방

식은 눈에 보이지 않으면서 .NET 프레임워크의 능력을 사용할 수 있는 컴포넌트를 작성할 수 있

게 하거나 기존 .NET 코드 라이브러리를 통합하거나 재사용할 수 있게 만든다. 이런 종류의 응

용프로그램은 브라우저의 자바스크립트 엔진으로는 처리할 수 없는 작업을 수행할 수 있게 해

주기 때문에 유용하다. 예를 들어 소켓에 크로스 도메인cross-domain 요청을 하거나 수신하기 위해

얼굴 없는 실버라이트 응용프로그램을 사용할 수 있다(6장에서 논의할 것이다). 이와는 반대로


관리코드가 기존 자바스크립트 라이브러리의 기능에 의존해야 할 경우도 있을 수 있다. 이런 상

황에서는 관리 코드에서 자바스크립트를 호출할 수 있어야 한다.

관리코드에서자바스크립트사용하기

실버라이트는 관리 코드에서 자바스크립트 코드를 호출할 수 있는 유연함을 제공해주고 있다.

HTML이나 자바스크립트 객체의 어떤 메서드도 호출할 수 있는 능력을 제공하고 있기 때문에

기존의 웹 응용프로그램으로 실버라이트를 통합하려고 할 경우 매우 유용할 수 있다. 이 기능이

특히 유용한 영역이 하나 있는데 바로 프린트기능이다.

실버라이트는 자체적인 프린트 기능을 가지고 있지 않다. 하지만 HTML DOM에 있는

Window 객체는 print 메서드를 제공하고 있는데, 이 프린트 기능을 사용하려면 자바스크립트

객체에 있는 함수를 실버라이트에서 호출할 수 있는 능력을 가지고 있어야 한다. Invoke 메서드

를 사용하면 자바스크립트 함수를 호출할 수 있다. 코드 2.25에서 예를 보는 것처럼 이 메서드는

관리 코드에서 자바스크립트 함수를 실행하기 위해 사용된다.

HtmlWindow window = HtmlPage.Window;window.Invoke("print", new object[]{});

코드 2.25 관리 코드에서 자바스크립트 객체의 함수 호출하기

C#

이 코드는 실버라이트 응용프로그램을 포함하고 있는 현재 웹 페이지를 프린트하기 위해서 사

용될 수 있다. Invoke 메서드는 HtmlDocument나 HtmlElement 또는 HtmlWindow 객체에도

모두 사용될 수 있다. 이 메서드의 첫 번째 매개변수는 실행되거나 호출될 함수의 이름이며, 두

번째 매개변수는 호출 시에 그 함수에 전달될 인수들이다. 코드에서 보는 것처럼 이 매개변수는

object 배열이기 때문에 자바스크립트 함수에 원하는 것은 무엇이든 전달할 수 있다.

실버라이트는 관리 코드에서 자바스크립트 코드를 실행시킬 수 있는 능력을 제공할 뿐만 아니

라 반대로 자바스크립트에서 관리 코드를 호출할 수 있는 능력도 제공하고 있다. 이 두 기능들은

스크립트 세계와 관리 코드의 세계를 연결하기 위해 실버라이트를 사용하는 방법을 보여주고 있

다. 이 방법을 이해하는 것은 중요하다. 왜냐하면 만일 두 개의 서로 다른 실버라이트 플러그인들

사이의 통신이 필요할 수 있기 때문이다.

실버라이트플러그인들이서로통신하기위해자바스크립트를사용하기

실버라이트 플러그인들은 독자적으로 존재하거나 같은 웹 페이지 내에서 실행 중인 다른 플러그

인들이 존재한다고 알아챌 수 없다. 이런 무지함은 다른 실버라이트 플러그인들과 직접적인 통


신을 방해하는 요인이 된다. 하지만 앞의 두 절에서 다룬 내용을 활용하면 실버라이트 플러그인

들 사이에서 정보를 교환할 수 있다. 이를 위해선 플러그인 인스턴스들 사이에서 다리가 되어 줄

자바스크립트 함수를 생성해야만 한다. 이 다리는 하나의 실버라이트 플러그인에서 다른 플러그

인으로 메시지를 전달하는 역할을 맡는다. 실버라이트 플러그인 자체가 HTML DOM에 삽입되

지 않은 상태라면 이는 불가능하다. 플러그인 사이의 통신 작업은 이번 절에서 배웠던 내용들을

직접 테스트해 볼 수 있는 좋은 기회로 볼 수 있다. 하지만 혹시 코드를 원한다면, http://www.

silverlightinaction.com에서 다운로드할 수 있다.

실버라이트는 브라우저에서 돌아가는 스크립트와 관리 코드 사이를 연결할 수 있는 능력을

제공하고 있다. 뿐만 아니라 실버라이트를 사용하여 사용자의 브라우저 윈도우에 대한 정보를

파악할 수도 있다. 더 흥미로운 부분은 아마도 HTML DOM과 상호작용하기 위해 관리 코드를

사용하는 부분일 것이다. 풍부한 HTML API로 가능한 모든 것들은 실버라이트에서 없어서는

안 되는 중요한 것들이다.

2.6 요약

실버라이트는 기존의 웹 구조에 잘 어울릴 수 있도록 설계되었다. 따라서 풍부하고 인터랙티브

한 실버라이트 콘텐트를 웹에 쉽게 삽입할 수 있다. 웹 페이지에 실버라이트 콘텐트를 삽입하

려면 Silverlight.js 유틸리티 파일을 참조하는 것이 우선되어야 한다. 이 유틸리티 파일을 참조

하면 createObjectEx 유틸리티 메서드를 사용해서 플러그인 인스턴스를 쉽게 생성할 수 있다.

일단 실버라이트 플러그인 인스턴스를 생성하고 페이지에 삽입하면 실버라이트에서 관리 코

드를 이용하여 HTML DOM도 조작할 수 있다. 관리코드를 사용할 경우에는 컴파일하는 과정

에서 코드의 오류를 검사할 수 있는 이점을 제공해 줄 뿐만 아니라, C#과 같이 친숙한 언어를 사

용해서 일관되고 쉬운 개발을 할 수 있다. 관리 코드에서 HTML DOM을 조작하는 것이 흥미로

운 일이다. 하지만 역시 궁극적인 목표는 실버라이트 콘텐트를 조작하는 것이므로, 이제 본론으

로 들어가서 실버라이트의 기초인 레이아웃과 텍스트에 관해 배워보도록 하자.

Documents

실버라이트 2 인 액션