//build/ 컨퍼런스 이후 앱 개발자를 위해 변경된 내용(1부)

Windows 8 앱 개발자 블로그

Windows 8 엔지니어링 팀에서 제공하는 Windows 8용 Metro 스타일 앱 개발의 이해

//build/ 컨퍼런스 이후 앱 개발자를 위해 변경된 내용(1부)

  • Comments 0

현재 Consumer Preview 다운로드 서비스가 제공되고 있습니다. Windows 8 개발이 얼마나 진행되었는지 직접 확인해 보시기 바랍니다. 우리 엔지니어 팀은 //build/ 컨퍼런스 이후 바쁜 나날을 보내고 있습니다. 여러분의 소중한 피드백에 귀기울여 개발 플랫폼을 개선하고 있고, 이전에는 볼 수 없었던 수많은 플랫폼 기능을 마무리하고 있습니다.

이러한 Windows 개발 작업 외에도 //build/ 컨퍼런스 이후 Visual Studio 도구를 대폭 개선하는 작업을 진행하고 있습니다. Metro 스타일의 앱 개발, 기타 시나리오 작업 등에서도 많은 진전이 있었습니다. 이 글에서는 Metro 스타일 앱 개발에 대한 이야기를 나누고자 합니다. 다른 VS 기능에 관심이 있는 분들은 Jason Zander의 블로그에서 많은 도움을 받을 수 있습니다.

우리는 또한 많은 분들이 이러한 기능을 살펴보느라 분주하셨다는 것도 압니다. MSDN 개발자 프리뷰 포럼에 5,000개가 넘는 게시물이 올라왔으며 30,000개에 가까운 댓글이 달렸습니다. 우리의 원격 분석 데이터에서도 수많은 분들이 Visual Studio로 개발 플랫폼을 테스트한 것으로 나타났습니다. 개발자들은 9월 이후 1000여 개의 앱 패키지를 개발했습니다.

저는 여러분의 뜨거운 성원에 보답하고자 이 글을 쓰게 되었습니다. Consumer Preview로 앱 개발을 시작할 때 어떤 점이 바뀌었을 것으로 예상하십니까? 우리가 Consumer Preview에서 가장 주안점을 둔 부분은 바로 Windows를 개발자에게 보다 유용한 플랫폼으로 만드는 것이었습니다. 더욱 간편하게 API를 사용하고 Metro 스타일 UI의 표준 컨트롤을 만들 수 있도록 했습니다. 개발자가 생산성을 높이고, 빠르고 자연스럽게 실행되는 앱을 개발할 수 있도록 도구를 개선했습니다. 개발자들이 Windows의 풍부한 기능과 하드웨어의 성능을 활용할 수 있도록 완전히 새로운 기능도 개발하고 있습니다.

1부와 2부로 구성된 이 글을 통해 우리가 Consumer Preview의 플랫폼과 도구를 개선하기 위해 어떤 중요한 작업을 수행했는지를 설명하겠습니다. 우리는 개발자에게 한층 뛰어난 Metro 스타일의 앱 개발 경험을 제공하기 위해 일부 새로운 기능을 추가했고 기존 기능도 개선했습니다. 이러한 변화된 모습을 보면 여러분의 마음에 들 것이라 생각합니다.

XAML에서 DX 지원

"DirectX로 초고속 렌더링이 가능해야 합니다. Metro 스타일 UI를 사용하고 싶습니다. 전체 UI를 DirectX에서 처음부터 새로 작성하는 건 귀찮습니다."
– Metro 스타일 앱 개발자

이러한 내용이 Developer Preview가 발표된 이후 자주 거론되고 있습니다. 개발자들은 DirectX의 고성능 직접 실행 모드(immediate-mode) 렌더링 기능을 XAML의 풍부한 대화형 작업, 제어 모델 및 디자인 타임 환경과 결합하기를 원했습니다.

우리는 개발자들의 이러한 의견을 반영했습니다. 이제 Consumer Preview를 통해 동일한 Metro 스타일 앱에서 XAML과 DirectX 11을 매끄럽게 통합할 수 있게 되었습니다. 따라서 보다 빠르고 자연스러운 사용자 경험을 구현할 수 있습니다. 예를 들어 이제 개발자는 DirectX 게임을 만든 후 XAML을 사용하여 입력을 처리하고, HUD(heads-up display) 그래픽 및 메뉴를 만들고, 앱의 데이터 모델에 바인딩할 수 있습니다.

이를 위해 우리는 광범위한 DirectX 상호 운영 시나리오를 지원하는 새로운 XAML 유형 3개를 추가했으며 각 유형의 기능은 다음과 같습니다.

  • SurfaceImageSource XAML 앱에 DirectX 콘텐츠를 완벽하게 결합할 수 있습니다. DirectX 콘텐츠를 XAML 표시 트리로 가져올 수 있으므로 복잡한 이미지 효과, 데이터 시각화 및 기타 직접 실행 모드 그리기 시나리오에 유용합니다.
  • VirtualSurfaceImageSource 대규모의 가상화 콘텐츠에 사용됩니다. 지도, 문서 뷰어 등과 같이 대규모 콘텐츠를 이동 및 확대/축소해야 하는 앱을 위한 기능입니다.
  • SwapChainBackgroundPanel 전체 화면을 사용하는 DirectX 위주의 시나리오를 위한 기능입니다. 게임 또는 대기 시간이 짧고, 전체 화면을 사용하며, XAML 오버레이를 이용하는 DirectX 앱에 매우 유용합니다.

DX의 모든 그래픽 성능을 활용할 수 있으며, 사용법이 간단한 XAML과 결합된 매우 강력한 기능입니다. 이 새로운 기능에 대해 관심이 있는 분들은 MSDN에서 DirectX 및 XAML 자습서를 살펴보시기 바랍니다.

다음과 같은 앱 샘플도 준비되어 있습니다.

Blend 및 Visual Studio 디자이너

XAML

좋은 소식이 더 있습니다. Visual Studio 베타에는 HTML용 Blend 외에도 XAML용 Blend 프리뷰 초기 버전이 포함되어 있습니다. 이제 하나의 Blend가 HTML과 XAML 디자인을 모두 지원하므로 여러분은 원하는 프로젝트 유형을 선택하기만 하면 됩니다. XAML용 Blend는 애니메이션과 시각적 상태를 결합하여 Metro 스타일 앱에서 사용 가능한 상태로 만듭니다.

단추 속성 편집 방법을 보여 주는 XAML용 Blend 디자이너의 전체 화면 보기

Visual Studio 도구에 포함된 새로운 XAML용 Blend 디자이너

이제 Visual Studio의 XAML 디자이너는 컨트롤 및 데이터 템플릿을 편집할 수 있으며 SemanticZoom, GridView, AppBar 등의 Metro 스타일 앱 컨트롤을 더욱 완벽하게 지원합니다.

Visual Studio의 XAML 레이아웃 미리 보기.  디자이너 보기의 기본 보기 창이며, 아래 창은 해당 XAML 마크업입니다.

Visual Studio 내에서 XAML 디자이너 직접 활용

HTML

HTML용 Blend의 경우 HTML 앱 개발에 필요한 수많은 기능이 개선되었습니다.

HTML용 Blend 디자이너에 표시되는 HTML ListView 컨트롤. ListView UI의 기본 보기 창입니다. 아래의 각 창은 컨트롤을 만들고 스타일을 정하는 데 사용되는 HTML 및 CSS 마크업입니다.

HTML용 Blend 디자이너의 확장된 기능 활용

우리는 무엇보다도 먼저 Metro 스타일 앱 컨트롤의 편집 기능을 확장했습니다. 여기에는 ListView의 데이터 템플릿을 대화식으로 편집하는 기능도 포함됩니다. 아울러, 개발자가 사용하는 해당 페이지에서 바로 HTML 조각을 편집하고 HTML 조각을 필요한 만큼 중첩할 수 있도록 했습니다. 뿐만 아니라, JavaScript에서 재정의한 값을 강조하는 기능을 비롯해 CSS 속성 검사기 및 HTML 특성 창의 생산성도 개선했습니다.

Visual Studio를 다운로드한 후 디자이너를 실행하여 개선된 기능을 직접 확인해 보시기 바랍니다.

JavaScript 탐색용 Windows 라이브러리

우리가 심혈을 기울인 또 다른 영역은 JavaScript용 Windows 라이브러리(WinJS)로, 여러 기능을 개선하고 탐색 모델을 간소화했습니다. //build/ 컨퍼런스에서 소개한 VS 템플릿은 WinJS.UI.Fragments API를 명시적으로 호출하여 런타임 시 새 HTML(조각) 청크를 DOM에 동적으로 로드했습니다. 그러나 조각 로더는 매우 낮은 수준의 API이므로 실제 시나리오를 완료하려면 템플릿에 다수의 복잡한 상용구 코드가 포함되어야 합니다.

개발자 프리뷰 템플릿에서 생성된 코드를 사용해 보셨다면 코드가 복잡하여 다음 문제가 발생할 수 있다는 것을 아실 것입니다.

  • 코드를 읽고 사용하기가 어렵습니다.
  • 개발자가 조각 초기화를 시작하는 코드를 작성해야 합니다.
  • 개발자가 새 페이지의 WinJS 컨트롤을 초기화해야 합니다.
  • 각 페이지의 상태를 추적하기 어렵습니다.

우리는 이러한 여러분의 피드백에 귀기울여 개발자가 보다 편하게 작업할 수 있도록 페이지 컨트롤이라는 새로운 기능을 추가했습니다.

페이지 컨트롤은 조각 로더를 기반으로 하며, 간편한 단일 페이지 탐색을 위해 다음과 같은 상위 수준 조각을 추가합니다.

  • 잘 정의된 생성 주기
  • 잘 정의된 데이터 범위
  • 적시에 WinJS 컨트롤 자동 활성화
  • DOM에 콘텐츠 상위-하위 관계 자동 지정
  • 읽고 사용하기가 쉬운 API

이러한 기능의 일부로 VS 프로젝트 템플릿은 navigator.js라고 하는 새 파일을 생성하는데, 이 파일은 개발자 앱의 모든 상위 수준 탐색을 캡슐화합니다. 이는 PageControlNavigator로 부르는 사용자 지정 WinJSControl로 구현되었습니다. 이 파일의 탐색 코드는 개발자 프리뷰 템플릿의 개발자 탐색 코드보다 훨씬 간단합니다.

새 탐색 모델에 대한 자세한 내용은 다음 자료를 참조하십시오.

DRM 지원

종래에는 DRM 콘텐츠를 지원하는 Windows 앱을 개발하려면 많은 노력이 필요했습니다. 앱 개발자는 콘텐츠 보호에 사용되는 DRM 기술에 대한 충분한 지식을 갖고 있어야 했고, 앱이 DRM 지원 요구 사항을 만족하는지 확인하기 위해 거치는 엄격한 인증 프로그램을 통과해야 했습니다.

Microsoft에서 Silverlight를 내놓자 이 모든 절차가 대폭 간소화되었습니다. 우리는 Windows 8에서 이 간소화된 모델을 Metro 스타일 앱에 적용하고 있습니다. PlayReady 라이선스를 사용할 수 있는 라이선스 서비스를 갖고 계신 분들은 최소한의 오버헤드로 이전보다 훨씬 빠르게 앱 내에서 PlayReady DRM 콘텐츠를 지원할 수 있습니다. 또한 HTML이나 XAML, C++, C# 및 JavaScript를 사용하여 이러한 지원 기능을 포함할 수 있습니다. 놀랍도록 간단한 방법으로 Windows에서 보호되는 콘텐트를 사용하여 풍부한 앱 경험을 개발할 수 있습니다.

풍부한 경험을 제공하는 앱 개발을 돕기 위해 Consumer Preview에는 새로운 PlayReady Metro API가 도입되었습니다. 이러한 API를 사용하여 앱 내에서 PlayReady DRM 재생 지원 기능을 신속하게 구현할 수 있습니다. 그런 후 고객이 좋아할 만한 기타 기능 및 사용자 경험을 만들기 위한 나머지 개발 과정에 집중하면 됩니다. Metro 스타일 앱의 경우 SDK가 무료로 제공되며 PlayReady에 앱을 제출하여 DRM 요구 사항 테스트를 받지 않아도 됩니다. 여러분은 고객의 사랑을 받는 멋진 앱을 개발하는 데만 집중하시면 됩니다.

다음은 개별화 서비스 요청(JS)을 보여 주는 코드 조각입니다.

var indivSr = new Microsoft.Media.PlayReadyClient.PlayReadyIndividualizationServiceRequest();
indivSr.beginServiceRequest().then(indivSrOnComplete, indivSrOnError);

앱 내에서 PlayReady DRM 콘텐츠를 지원하는 방법에 대한 자세한 내용은 MSDN의 샘플을 참조하십시오.

독립 애니메이션

개발자 프리뷰에서 우리는 개발자에게 풍부한 CSS 애니메이션을 이용할 수 있는 권한을 드렸습니다. 개발자는 이 CSS 애니메이션을 사용하여 HTML/CSS/JS로 작성된 Metro 스타일 앱 내에서 아름다운 화면 전환을 구현할 수 있습니다. 우리는 하드웨어 가속 IE에서 축적한 경험을 바탕으로 Consumer Preview의 애니메이션을 대폭 개선했습니다. 그 결과, 현재 핵심 애니메이션은 UI 스레드와 독립적으로 GPU 전체에서 실행이 가능합니다. 이러한 애니메이션을 독립 애니메이션이라고 부르며 이전보다 훨씬 빠르고 자연스러운 Metro 스타일 디자인을 만들 수 있습니다.

Windows 8 애니메이션 라이브러리는 독립 애니메이션을 최대한 활용할 수 있도록 설계되었습니다. 사용자 지정 애니메이션을 만들려면 변환 및 불투명도 전용 CSS 애니메이션/전환을 통해 독립 애니메이션을 사용하는 것이 좋습니다. 

JavaScript를 이용한 전통적인 애니메이션의 경우 UI 스레드에서 작업이 진행됩니다. 개발자가 DOM의 개체 좌표를 변경하기만 하면 DOM이 개체를 다시 그립니다. 이는 상대적으로 간단한 방법이긴 하지만 UI 스레드를 차단하고 CPU에서 작업이 진행되므로 비용이 많이 듭니다. 다음은 실제 작업입니다.

<script type="text/javascript">
function doAnimation() {
foo.style.left = parseInt(foo.style.left) + 1 + 'px';
if (foo.style.left != '100px')
{ setTimeout(doMove, 20); }
}

function init() {
foo = document.getElementById('fooObject');
foo.style.left = '0px';
doAnimation();
}
</script>

독립 애니메이션을 사용할 경우 독립 애니메이션은 UI와 별도로 구성되며 기본적으로 모든 작업이 하드웨어에서 진행됩니다.

<style>

.doAnimation{
-ms-transition-property: -ms-transform;
-ms-transition-duration: 2s;
-ms-transform: translateX(100px);
}
</style>

독립 애니메이션은 UI 스레드에서 실행되는 스크립트에 영향을 받지 않으므로 사용자에게 부드럽고 완벽한 경험을 제공할 수 있습니다. 개발자에게 요구되는 추가 작업 또는 마크업도 없습니다. 개발자가 적절한 CSS 애니메이션을 사용하기만 하면 나머지는 Windows가 알아서 처리합니다.

CSS 애니메이션에 대한 자세한 내용은 다음 자료를 참조하십시오.

디버깅 개선

우리는 Metro 스타일 앱에서 최고 수준의 디버깅 지원이 얼마나 중요한지 잘 알고 있으며, 디버깅 작업을 손쉽게 할 수 있도록 수많은 기능을 개선했습니다.

우선 조사식 창에서 검사할 수 있는 C++ 개체의 수가 대폭 개선되었습니다. 기존에는 COM 개체만 표시되었지만 지금은 사용자가 COM 개체를 확장하여 원하는 속성 및 필드를 볼 수 있습니다. C++의 디버깅 환경을 개선하려면 Windows 기호 서버에서 디버그 기호를 다운로드하십시오. Visual Basic 및 C# 개체의 검사 환경 또한 지속적으로 개선되고 있습니다.

C++ 프로젝트 조사식 창의 근접 보기로, 조사식 창에 표시되는 COM 개체와 확장된 필드 및 속성의 예입니다.

조사식 창에서 더 많은 개체 검사 가능

우리는 또한 Visual Basic 및 C#의 비동기 메서드 디버깅을 개선했습니다. 특히 디버거는 비동기 무효화 메서드에서 반환된 예외를 사용자가 처리하지 않은 것으로 간주하여 비동기 무효화 메서드에서 바로 중단하는 것을 허용합니다. 그리고 이제는 C++에서도 Visual Basic, C# 및 JavaScript와 마찬가지로 WinRT를 발견할 경우 자세한 오류 메시지를 볼 수 있습니다.

우리가 작업한 또 다른 영역은 디버그 위치 도구 모음의 일시 중지, 재개 및 종료 이벤트를 트리거하는 UI입니다. 지금부터는 특정 프로세스를 선택하여 이벤트를 트리거할 수 있습니다.

Visual Studio의 일시 중지, 재개 및 종료 단추의 근접 화면입니다. 사용자는 단추 왼쪽에 있는 드롭 다운 목록에서 메시지를 보낼 프로세스를 선택할 수 있습니다.

앱 사용 기간 이벤트를 트리거하는 UI

//build/ 컨퍼런스 이후 우리는 시뮬레이터에도 다음과 같은 여러 가지 기능을 추가했습니다.

  • 크롬을 얇게 하여 화면을 덜 차지하도록 개선한 시각 기능
  • 위도/경도, 고도 및 오류 범위를 입력하여 장치의 위치 변화를 시뮬레이션할 수 있는 위치 시뮬레이션
  • 더욱 빨라진 회전 및 개선된 터치 에뮬레이션
  • 1024x768 해상도 지원
  • 실행 중인 앱의 스크린샷을 찍어 클립보드 또는 파일에 저장하는 기능


Windows 8 시작 화면을 보여 주는 시물레이터로, 화면 오른쪽을 따라 단추가 정렬되어 있습니다.

크롬이 얇아진 업데이트된 시뮬레이터 UI

2부에서 계속됩니다.

여러분의 피드백을 수렴하여 개선한 내용이 마음에 드십니까? 아직 설명하지 못한 내용이 많이 남아 있습니다. 2부에서는 타일 및 알림 활용의 업데이트, HTML/JavaScript 컨트롤 업데이트, 개선된 하이브리드 앱의 제작 등을 포함하여 우리가 수행한 또 다른 변경 작업에 대해 자세히 설명하겠습니다.

- Windows 프로그램 관리자, Jake Sabulsky

이 글은 엔지니어 팀의 도움으로 작성되었습니다. 이 글을 작성하는 데 도움을 주신 Jesse Bishop, Jonathan Aneja, Chris Tavares, Eric Salerno, Angelina Gambo 및 Ian LeGrow 님께 감사드립니다.

  • Loading...
Leave a Comment
  • Please add 1 and 3 and type the answer here:
  • Post