빠른 시작: 여러 개의 앱 창 만들기(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

개별 창에서 여러 개의 독립 함수를 볼 수 있도록 하여 사용자의 생산성을 높일 수 있습니다. 사용자는 한 창의 앱 부분에서 다른 창의 다른 앱 부분으로 빠르게 전환할 수 있습니다. 예를 들어 여러 창의 콘텐츠를 나란히 비교하여 두 개의 다른 문서를 동시에 보거나 게임 리더 보드와 게임 동작을 개별 창에서 볼 수도 있습니다. 메일 앱의 경우 사용자가 새 창에서 메시지를 열 수 있습니다. 여러 창을 사용하여 새 메일을 작성하고 받은 편지함의 메시지를 참조할 수도 있습니다.

여러 개의 앱 창을 만드는 경우 각 창이 독립적으로 동작합니다. 최근에 사용한 앱 목록은 각 창을 개별적으로 표시합니다. 사용자는 앱 창을 독립적으로 이동, 크기 조정, 표시 및 숨길 수 있으며, 별도의 앱인 것처럼 앱 창 간에 전환할 수 있습니다. 각 창은 해당 스레드 및 실행 컨텍스트에서 작동합니다.

2개의 창이 열려 있는 메일 앱

이 빠른 시작에서는 다음 작업 방법을 보여 줍니다.

앱에 대한 새 창 만들기
새 창에 콘텐츠 추가
새 창 표시
한 창에서 다른 창으로 전환
최근에 사용한 앱 목록에서 제거 시 창 닫기

이것은 이 빠른 시작의 JavaScript 버전입니다. C# 및 XAML 버전의 경우 빠른 시작: 앱에 대해 여러 개의 창 만들기(XAML)를 참조하세요.

앱에 대해 여러 개의 창을 만드는 것은 조작용이 아니라 표시용으로 다른 화면에 앱의 별도 창을 프로젝트하는 것과 다릅니다. 창을 프로젝트하는 방법에 대한 자세한 내용은 프로젝션 관리자에 대한 지침을 참조하세요.

사전 요구 사항

Microsoft Visual Studio 2013 및 Windows 8.1이 없는 경우 다운로드에서 다운로드합니다.
JavaScript를 사용하는 Windows 스토어 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 스토어 앱 만들기를 참조하세요.
여러 창을 사용한 앱 디자인에 대한 지침을 검토합니다.

보조 페이지 만들기

솔루션 탐색기에서 프로젝트 노드의 바로 가기 메뉴를 열고 추가 > 새 항목을 선택합니다.
새 항목 추가 대화 상자의 가운데 창에서 페이지 컨트롤을 선택합니다.
이름 상자에 페이지 이름(예: secondaryView)을 입력하고 추가 단추를 선택합니다.
보조 페이지에 배치할 UI 요소와 기능을 추가합니다. 자세한 내용은 UI 레이아웃 및 여러 창에 대한 지침을 참조하세요.

새 보기 만들기

MSApp.createNewView를 호출하여 새 스레드를 만들고 해당 스레드에 새 창을 만듭니다. 스레드와 창의 연결을 보기라고 합니다. 이 보기에서 만든 다른 개체(예: UI 요소)는 이 스레드에 연결됩니다.

앱을 시작할 때 생성되는 첫 번째 보기를 기본 보기라고 합니다. 기본 보기의 창이 닫히면 앱이 종료됩니다.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");

이 코드는 지정한 페이지 secondaryView를 새 창에서 자동으로 로드합니다.

각 창이 해당 실행 컨텍스트에서 작동하므로 보조 창이 postMessage 또는 공유 파일과 설정을 통해서만 주 창과 통신할 수 있습니다. 이 코드는 postMessage를 사용하여 창을 설정하는 데 필요할 수 있는 추가 상태 정보를 포함하는 방법을 보여 줍니다.

newView.postMessage({ myState: 'My important state'}, thisOrigin);

새 창 표시

스레드와 창의 연결인 새 보기를 만든 후 ApplicationViewSwitcher.TryShowAsStandaloneAsync 메서드를 사용하여 새 창을 표시할 수 있습니다. TryShowAsStandaloneAsync 메서드의 viewId 매개 변수는 앱에서 각 보기를 고유하게 식별하는 정수입니다. ApplicationView.Id 또는 ApplicationView.GetApplicationViewIdForWindow를 사용하여 보기 ID를 검색합니다.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");
newView.postMessage({ myState: 'My important state' }, thisOrigin);
Windows.UI.ViewManagement.ApplicationViewSwitcher.tryShowAsStandaloneAsync(newView.viewId).done(function (viewShown) {

});

사용자가 앱의 다른 부분으로 이동할 때 자동으로 새 창을 열지 않는 것이 좋습니다. 사용자가 새 창 열기를 시작해야 합니다. 아래쪽 앱 바의 명령 등 UI 요소에 TryShowAsStandaloneAsync 호출을 추가할 수 있습니다.

한 창에서 다른 창으로 전환

사용자가 보조 창에서 주 창으로 다시 이동할 수 있는 방법을 제공해야 합니다. 이렇게 하려면 ApplicationViewSwitcher.SwitchAsync 메서드를 사용합니다. 전환 중인 창의 스레드에서 이 메서드를 호출하고 전환할 창의 보기 ID를 전달합니다.

Windows.UI.ViewManagement.ApplicationViewSwitcher.SwitchAsync(viewIdToShow).done();

메일 앱에서 보조 창의 뒤로 단추는 SwitchAsync를 호출합니다. 또한 메일 앱은 사용자가 보조 창에 포함된 메시지를 보내거나 삭제할 때 SwitchAsync를 사용합니다. 메일 앱은 보조 창을 메일 주 창으로 바꿉니다.

SwitchAsync를 사용하는 경우 ApplicationViewSwitchingOptions 값을 지정하여 초기 창을 닫고 최근에 사용한 앱 목록에서 제거할지 여부를 선택할 수 있습니다.

새 창 닫기

보조 창을 표시하면 사용자가 다른 앱을 여러 개 시작하여 최근에 사용한 앱 목록에서 제거될 때까지 목록에 유지됩니다. 목록에 앱 창이 하나 이상 남아 있는 경우 최근에 사용한 앱 목록에서 창이 제거되면 consolidated event가 발생합니다. 각 창이 메모리를 사용하기 때문에 목록에서 제거될 때 창을 닫는 것이 좋습니다.

Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("consolidated", viewConsolidated, false);

function viewConsolidated(e) {
    if (!isMainView) {
        window.close();
    }
}

참고 기본 보기의 창은 닫지 마세요. 닫으면 앱이 종료됩니다. 앱 인증 프로세스에서는 프로그래밍 방식으로 앱을 닫으면 안 됩니다. 이 예제와 같이 주 창이 아닌 창만 닫으세요.

요약 및 다음 단계

지금까지 여러 개의 앱 창을 만들고 표시하는 방법을 알아보았습니다. 또한 한 창에서 다른 창으로 전환하는 방법과 앱 창을 닫는 방법 및 시기를 알아보았습니다.

프로젝션 관리자를 사용하여 다른 화면에 별도 앱 창을 프로젝트하는 방법에 대한 자세한 내용은 프로젝션 관리자에 대한 지침을 참조하세요.