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

Windows 8 앱 개발자 블로그

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

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

  • Comments 0

이전에 말씀드렸듯이 //build/ 컨퍼런스 이후 우리가 진행한 중요한 작업에 대해 좀더 자세히 소개해 드리겠습니다. 이 글의 1부에서 저는 DirectX와 XAML의 통합, Blend 디자이너의 향상된 기능, CSS 독립 애니메이션 등에 대해 살펴보았습니다. 그리고 이제 여러분이 더 자세히 알고 싶어하는 새로운 기능에 대해 말해보겠습니다.

타일 및 토스트 알림

타일과 토스트는 Metro 스타일 디자인 원칙의 핵심적인 부분입니다. 이를 통해 앱을 실행하지 않는 경우에도 중요한 정보를 한 눈에 볼 수 있습니다. 우리는 타일 및 토스트 알림 개발 경험에 대해 여러분의 많은 의견을 받았으며, 그 대부분은 타일을 만들고 업데이트하는 작업에 집중되어 있었습니다. 이러한 의견을 수렴하여 우리는 타일 경험을 다음 세 가지 면에서 향상시켰습니다.

  1. 타일을 업데이트하는 폴링 API를 도입했습니다. 새로운 주기적인 타일 알림 API를 사용하여 개발자의 앱에만 한정되는 타일 콘텐츠에 대한 클라우드 서비스를 폴링하도록 Windows에 명령할 수 있습니다. 이는 웹 콘텐츠를 사용하여 앱 타일을 작업에 맞게 최신 상태로 유지하는 가장 손쉬운 방법입니다. 다음 JavaScript 조각은 앱 타일에 대한 폴링을 시작하는 방법을 보여 줍니다.

    // update the tile with a poll URL
    var polledUri = new Windows.Foundation.Uri("http://www.fabrikam.com/tile.xml");
    var recurrence = Windows.UI.Notifications.PeriodicUpdateRecurrence.halfHour;
    var tileUpdater = Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication();
    tileUpdater.startPeriodicUpdate(polledUri, recurrence);

    웹 서비스에서 반환되는 콘텐츠는 타일 XML 스키마와 일치해야 합니다. 또한 폴링을 통해 타일 배지를 업데이트할 수 있습니다.

    타일 업데이트에 대한 자세한 내용은 개발자 센터에서 다음 링크를 참조하시기 바랍니다.
  2. 멋진 타일 및 토스트 콘텐츠를 보다 쉽게 만들 수 있도록 했습니다. 우리가 받은 또 다른 의견은 알림 API를 통한 XML 작업이 불필요하게 복잡하다는 것이었습니다. 타일 및 토스트 알림 작업을 보다 쉽게 수행할 수 있도록 하기 위해 우리는 Windows SDK의 일부로 제공되는 라이브러리인 알림 템플릿 개체 모델을 도입했습니다. 이 라이브러리는 타일 및 토스트 알림 템플릿에 대한 생성자(및 IntelliSense)를 추가합니다. 다음은 JavaScript의 간단한 예입니다.

    // create the wide template
    var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWideText03();
    tileContent.textHeadingWrap.text = "Hello world! My very own tile notification";

    // create the square template and attach it to the wide template
    var squareTileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquareText04();
    squareTileContent.textBodyWrap.text = "Hello world!";
    tileContent.squareContent = squareTileContent;

    // send the notification
    Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileContent.createNotification());

    추가적인 이점으로 이 개체 모델은 서버 쪽 코드에도 사용할 수 있도록 구조화되어 있습니다.

    사용 중인 새 개체 모델을 보고 고유 프로젝트에 적용하려면 앱 타일 및 배지 샘플을 참조하시기 바랍니다. 샘플에서 NotificationsExtensions 프로젝트를 찾으면 됩니다.
  3. 사용 가능한 타일 템플릿 카탈로그를 업데이트하고 타일의 와이드 표현과 정사각형 표현을 둘 다 업데이트할 수 있는 기능을 추가했습니다. 이제 텍스트 및 그림을 사용하여 타일의 작게 보기와 크게 보기를 둘 다 업데이트할 수 있습니다. 방금 본 예는 새로운 타일 템플릿 중 하나(TileSquareText04)입니다. 사용 가능한 전체 템플릿 목록은 타일 템플릿 선택 문서에서 확인할 수 있습니다.

JavaScript 도구

//build/ 컨퍼런스 이후 우리는 JavaScript를 사용하여 Metro 스타일 앱을 구축하는 경험에 대해 많은 개발자 의견을 들었습니다. Windows 8의 경우 JavaScript는 플랫폼의 일등 시민(first class citizen)이므로 우리 도구에서도 JavaScript를 일등 시민이 되도록 하려고 합니다. Consumer Preview 릴리스에서 HTML, CSS 및 JavaScript를 사용하여 새 Metro 스타일 앱을 만들 경우 Visual Studio 및 JavaScript용 Windows 라이브러리(WinJS)의 많은 향상된 기능을 확인할 수 있습니다. 예를 들어 JavaScript 기반 Metro 스타일 앱용 템플릿이 새로운 API를 사용하며 가독성이 향상되었습니다.

또한 VS에서 JavaScript IntelliSense의 성능과 정확도가 모두 향상되었습니다.

  • 완성 목록, 정의로 이동 및 매개 변수가 향상되었습니다.
  • 보다 완벽한 DOM 표현을 통해 IntelliSense 정확도가 향상되었으므로 DOM에 대해 문을 완성할 수 있습니다.
  • 이제 JavaScript 편집기에서 주변 상황에 따라 새 줄에서 캐럿 위치를 보다 지능적으로 선택하는 "스마트" 들여쓰기 스타일을 지원합니다.
  • 끝으로, 우리는 VS에서 JavaScript IntelliSense 확장성을 개선했습니다. 따라서 jQuery와 같은 모든 JavaScript 라이브러리에 대해 IntelliSense를 보다 쉽게 확장할 수 있습니다.

JavaScript 진단 도구 및 디버깅 경험도 현저하게 개선되었습니다.

  • DOM 탐색기의 스타일 창에서 새 규칙 및 규칙 속성을 복사하고 추가하여 실행 중인 앱에서 스타일 수정 효과를 테스트할 수 있습니다. 또한 규칙에서 직접 원래 CSS 파일에 연결할 수 있습니다.
  • 뿐만 아니라 DOM 탐색기에는 DOM 요소와 연결된 이벤트 처리기의 원본 위치를 찾을 수 있는 이벤트라는 새 탭이 있습니다.
  • 이제 VS에서는 범위, 프로토타입, 함수 그룹화 및 예외를 조사식 및 로컬 창에 시각적으로 표시합니다.
  • 우리는 JavaScript의 첫째 예외에 대한 지원을 추가했습니다.

C++ 데이터 바인딩

연결된 앱의 세계에서 데이터 바인딩은 필수적인 요소이므로 C++에서 이를 보다 쉽게 사용할 수 있도록 해야 한다는 의견이 많았습니다. 이를 구현하려면 많은 인터페이스를 작성해야 하므로 C++/XAML의 많은 상용구 코드가 필요합니다. Consumer Preview에서는 이러한 문제가 해결되어 이제 데이터를 바인딩해야 하는 클래스에 [Windows::UI::Xaml::Data::Bindable] 특성을 추가하기만 하면 됩니다. XAML은 정확히 동일하게 표시됩니다. 다음은 변경 내용을 보여 주는 예입니다.

C++ 헤더

namespace SimpleBlogReader
{
//To be bindable, a class must be defined within a namespace.
[Windows::UI::Xaml::Data::Bindable]
public ref class FeedItem sealed
{
public:
FeedItem(void){}
~FeedItem(void){}
property Platform::String^ Title;
property Platform::String^ Author;
property Platform::String^ Content;
property Windows::Foundation::DateTime PubDate;
};
}

XAML

<TextBlock x:Name="TitleText" Text="{Binding Path=Title}" 
VerticalAlignment="Center" FontSize="48" Margin="56,0,0,0"/>
    

HTML/JavaScript 컨트롤

Consumer Preview에서는 거의 모든 앱에서 사용해야 하는 일반적인 컨트롤이 간소화되었습니다. 이러한 컨트롤은 Metro 스타일 디자인의 핵심적인 부분입니다. 이를 통해 시스템의 나머지 부분과 앱의 일관성을 유지할 수 있으므로 사용자가 자신의 앱과 Windows 간을 원활하게 전환할 수 있습니다. 기능이 대폭 향상된 두 가지 주요 컨트롤은 HTML/JS ListView와 AppBar입니다.

ListView 컨트롤

Developer Preview에 대한 의견을 기반으로 우리는 항목 로드 및 템플릿화가 보다 쉽고 유연하도록 WinJS ListView 컨트롤 기능을 강화했습니다.

  1. Binding.List라는 단순하고 강력한 데이터 소스를 만들어 이를 메모리 내 데이터에 적합하게 특별히 디자인했습니다.

    Binding.List는 JavaScript 배열 개체를 거의 정확하게 미러링하는 API를 노출합니다(단, JavaScript는 연산자 재정의를 지원하지 않으므로 항목을 읽고 쓰려면 getAt 및 setAt를 호출해야 함). Binding.List를 사용하면 메모리 내 데이터 작업이 정말 간편합니다. 예를 들면 다음과 같습니다.    
    var data = [10, 20, 12, 7];
    var ds = new WinJS.Binding.List(data);
    ds.push(3);
    ds.splice(2, 1);

    var sorted = ds.createSorted(function (a, b) { return (a - b) });
    ds.push("1");
    console.log("original: " + ds.join(",") + "; sorted: " + sorted.join(","));

    출력: "original: 10,20,7,3,1; sorted: 1,3,7,10,20

  2. 우리는 다단계 기능이 포함된 템플릿 함수를 지원하도록 ListView를 확장했습니다. 이제 항목 데이터를 단계별로 제공하는 템플릿 함수를 작성할 수 있습니다. 가장 빠른 데이터(예: 텍스트)는 즉시 표시되고, 느린 데이터(예: 이미지)는 사용 가능할 때 표시됩니다. 이러한 향상된 기능을 통해 앱 사용자는 데이터를 훨씬 원활하게 로드할 수 있습니다.

AppBar 컨트롤

//build/ 컨퍼런스 이후 AppBar 작업에 어려움이 있다는 의견을 많이 들었습니다. 따라서 우리는 보다 쉽게 사용할 수 있도록 HTML AppBar를 새롭게 상상했으며, 그 결과는 보다 간단한 개발 경험을 제공하는 것입니다. 아래 샘플 코드를 보면 쉽게 이해할 수 있습니다.

<div class="win-left">
<button onclick="doClickPlay" class="win-command" role=’MenuItem>
<span class="win-commandicon win-large">&#xE112;</span>
<span class="win-label">Play</span>
</button>
</div>
<div class="win-right">
<button onclick="doClickAdd" class="win-command" role=’MenuItem>
<span class="win-commandicon win-large">&#xE112;</span>
<span class="win-label">Add</span>
</button>
</div>
         

Consumer Preview의 HTML AppBar 단추:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
play',label:'Play',icon:'play',onclick:doClickPlay,section:'selection',tooltip: 'Play'}"
>
/button>

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
id:'add',label:'Add',icon:'add',onclick:doClickAdd,tooltip: 'Add'}"
>
/button>

보시다시피 이제 HTML 요소 대신 옵션 집합을 사용하여 단추를 만들 수 있습니다. 단추와 단추의 스타일, 아이콘, 텍스트 등의 생성이 자동으로 처리됩니다. 스냅 모드 및 세로 모드에서는 AppBar가 적절히 확장/축소되어 단추가 올바른 위치에 자동으로 다시 배치됩니다.

이 글에서 소개한 내용 외에도 HTML/CSS/JS AppBar의 많은 기능이 향상되었습니다. 전체 AppBar 샘플 코드설명서는 개발자 센터를 참조하시기 바랍니다.

다국어 상호 운용성 도구

//build/ 컨퍼런스에서 우리는 JavaScript, C++, C#, Visual Basic 등의 언어 조합을 사용하여 하이브리드 Metro 스타일 앱을 만드는 기능을 미리 살펴보았습니다. 이 릴리스에서는 이러한 유형의 앱(예: C# 클래스 라이브러리에 명령을 전달하는 JavaScript 앱 또는 C++ 구성 요소를 사용하는 C# 앱)을 Visual Studio에서 직접 구축할 수 있습니다. 따라서 각 언어의 고유한 이점을 활용하고, 기존 자산을 재활용하고, 다양한 기술을 갖춘 구성원으로 프로젝트 팀을 구성할 수 있게 됩니다.

JavaScript

var customers = new CSClassLib.CustomerRepository();
var filtered = customers.getCustomersByState("WA");

C#

public IEnumerable<Customer> GetCustomersByState(string state)
{
return from c in this.Customers
where c.State == state
select c;
}

C++ 개발자를 위한 몇 가지 주목할 만한 향상된 기능(특히 DirectX 및 XAML)이 있습니다. DirectX는 직접적인 픽셀 조작에 유용하고, XAML은 메뉴 및 알림 표시와 같은 사용자 상호 작용을 만드는 데 유용합니다. 이 글의 1부에서 설명한 대로 이제 XAML 앱에서 DX를 사용할 수 있습니다. 이 기능은 뛰어난 도구 지원 없이는 완성될 수 없습니다. 여러분의 의견을 수렴하여 이제 Visual Studio 베타에 C++/XAML과 DirectX 간의 상호 운용성 지원 기능이 포함되었습니다.

결론

최근의 두 글에서 저는 Consumer Preview의 변경 내용에 대한 예를 보여 드렸습니다. 그 밖에도 Windows 8의 Metro 스타일 앱 개발 경험을 Developer Preview보다 크게 향상시켜 주는 새로운 기능, 향상된 기능 및 수정된 기능이 많이 있습니다.

이 모든 향상된 기능에 대한 자세한 내용은 새롭게 수정된 MSDN의 개발자 센터를 참조하시기 바랍니다. 제 글에서 강조 표시된 항목에 대한 링크로 이동했다면 그 어느 때보다 더 나은 개발자 센터의 모습을 확인하셨을 겁니다.

다음은 더 나은 설명서를 제공하기 위해 우리가 수행한 작업입니다.

  • Windows Runtime에 대한 참조 섹션 완료(이제 모든 API에 대한 설명이 있음)
  • 여러 지원 언어로 된 30개가 넘는 샘플 추가
  • 샘플 설명서 개선
  • 코드 조각이 포함된 WinRT 페이지 수 증가
  • 빨간 줄, 철사 프레임 및 기타 재사용 가능한 디자인 자산 등 UX 지침의 대대적인 개선
  • 탐색 기능 개선 및 검색 관련성 증가
  • 주요 API에 대한 링크 및 개념 항목에 대한 요약 문을 제공하는 새로운 사이드바 요소 추가
  • 지원되는 모든 언어에서 시작 및 빠른 시작 자습서의 유용성 개선

이후의 도구 관련 글에 대한 자세한 내용은 Jason Zander의 블로그 항목을 참조하시기 바랍니다. Metro 스타일 앱을 작성하는 Visual BasicC#의 새로운 언어 기능도 있습니다.

따라서 Consumer Preview를 다운로드한 후 새로운 Visual Studio 베타를 설치하고 개발자 센터에서 몇 가지 샘플/문서를 가져와 앱 구축을 시작해 보시기 바랍니다. 앞으로도 개발 경험을 보다 편리��게 만드는 데 도움이 되는 글을 계속해서 올리겠습니다.

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

이 글은 여러 분들의 도움으로 작성되었습니다. 도움을 주신 Kevin Woley, Jonathan Aneja, Jonathan Garrigues, Jon Gordner, Ryan Demopoulos, Keith Boyd 및 Ian LeGrow 님께 감사드립니다.

  • Loading...
Leave a Comment
  • Please add 6 and 2 and type the answer here:
  • Post