시작 화면을 연장하는 방법(HTML)

아티클
12/11/2015

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

연장된 시작 화면을 만들어 더 오래 시작 화면을 표시합니다. 이 화면은 대체로 앱 실행 시 표시되는 시작 화면을 모방하도록 디자인되지만 완전히 사용자 지정할 수 있습니다. 실시간 로드 정보를 표시할지 또는 앱에 초기 UI를 준비할 추가 시간을 제공할지에 관계없이 연장된 시작 화면을 사용하여 시작 환경을 정의할 수 있습니다. 이러한 단계를 통해 시스템에서 제공하는 시작 화면과 동일한 연장된 시작 화면을 만들 수 있습니다.

전체 앱에서 연장된 시작 화면을 보려면 시작 화면 샘플을 참조하세요.

사용자에게 기본 시작 화면이 오랫동안 표시된다는 인상을 주려면 연장된 시작 화면이 다음과 같은 방법으로 기본 시작 화면을 모방해야 합니다.

연장된 시작 화면 페이지가 앱 매니페스트에서 시작 화면에 대해 지정된 것과 동일한 이미지를 사용해야 합니다.
보기가 앱 매니페스트에서 시작 화면에 대해 지정된 배경색과 일치하는 배경색을 사용해야 합니다.
코드에서 SplashScreen 클래스를 사용하여 기본 시작 화면과 동일한 화면 좌표에 앱 시작 화면 이미지를 배치해야 합니다.
Windows(Windows Phone 아님): 코드에서 창 크기 조정 이벤트(예: 앱 크기가 조정되거나 화면이 회전된 경우)에 응답해야 합니다.

중요 AppBar 등의 전역 앱 컨트롤을 선언한 경우 프로젝트의 default.html 파일에서 연장된 시작 화면을 표시하는 기능을 호출할 때 컨트롤의 disabled 속성을 true로 설정하고, 연장된 시작 화면을 닫을 때 disabled를 다시 false로 설정합니다. 컨트롤을 추가하거나 스타일을 지정하는 방법에 대한 자세한 내용은 컨트롤 및 콘텐츠 추가를 참조하세요.

사전 요구 사항

Microsoft Visual Studio 2013 및 Windows 8.1. 다운로드하려면 도구 얻기를 참조하세요.
JavaScript 및 HTML을 사용하는 Windows 런타임 앱 프로젝트. 아직 프로젝트를 시작하지 않은 경우 JavaScript를 사용하여 첫 Windows 스토어 앱 만들기에서 단계별 지침을 확인하세요.
앱 활성화의 기본 원칙 이해. activated 이벤트에 대한 자세한 내용은 How to handle app activation을 참조하세요.

단계 1: 연장된 시작 화면 페이지 만들기

연장된 시작 화면을 정의하는 JavaScript 코드를 방문 페이지에 연결합니다.

시작 화면 샘플에서는 extendedSplash.js를 default.html에 연결하는 다음 코드를 추가합니다.
```
<script src="/js/extendedSplash.js"></script>
```

연장된 시작 화면 <div>를 방문 페이지에 추가합니다.

시작 화면 샘플에서는 이 HTML을 사용하여 연장된 시작 화면 **<div>**를 해당 방문 페이지(default.html)의 **<body>**에 추가합니다.

<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
    <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" />
    <!-- Optionally, add a progress ring. Note: In this sample, the progress ring is not used. -->
    <!--
    <progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
    -->
    <div id="extendedSplashDescription">
        <span id="extendedSplashText">The splash screen was dismissed and the image above was positioned using the splash screen API.</span>
        <button class="action" id="learnMore">Learn More</button>
    </div>
</div>

id 및 class 특성이 스타일 지정 및 조작에 사용될 수 있도록 설정됩니다. 연장된 시작 화면 **<div>**는 "숨겨진" 클래스도 연장된 시작 화면 JavaScript 코드로 표시될 때까지 보이지 않도록 설정합니다.

CSS를 추가하여 방문 페이지의 연장된 시작 화면 태그를 스타일 지정합니다.

position:absolute 스타일을 사용하도록 연장된 시작 화면 HTML을 스타일 지정했는지 확인합니다. 절대 위치를 사용하면 앱이 연장된 시작 화면을 표시할 때 전체 화면을 사용할 수 있습니다. 또한 기본 시작 화면과 동일한 화면 좌표를 사용하여 시작 화면 이미지의 위치를 지정할 수도 있습니다.

시작 화면 샘플에서는 이 CSS를 default.css에 추가하여 방문 페이지의 연장된 시작 화면 태그 스타일을 지정합니다.
```
.extendedSplashScreen {
    background-color:#00b2f0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.extendedSplashScreen.hidden {
    display: none;
}

#extendedSplashImage {
    position: absolute;
}

#extendedSplashDescription
{
    position: absolute;
    width: 100%;
    top: calc(100% - 140px);
    text-align: center;
}

#extendedSplashText
{
    font-family: 'Segoe UI Semilight';
    font-size: 11pt;
    text-align: center;
    width: 75%;
    color: #ffffff;
}
```
이러한 스타일을 정의하는 클래스 및 ID는 방문 페이지 HTML의 연장된 시작 화면 태그도 식별합니다.

단계 2: 연장된 시작 화면을 표시하는 활성화된 이벤트 처리기에 코드를 추가합니다.

시작 화면 샘플은 default.js 파일에 있는 activated 이벤트 처리기(activated 함수)를 사용하여 연장된 시작 화면을 표시하는 방법을 보여 줍니다.


function activated(eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;

        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

        // Listen for window resize events to reposition the extended splash screen image accordingly.
        // This ensures that the extended splash screen is formatted properly when the window is resized.
        window.addEventListener("resize", onResize, false);

        // Use setPromise to indicate to the system that the splash screen must not be torn down
        // until after processAll and navigate complete asynchronously.
        eventObject.setPromise(WinJS.UI.processAll().then(function () {
            // Navigate to either the first scenario or to the last running scenario
            // before suspension or termination.
            var url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;
            return WinJS.Navigation.navigate(url);
        }));
    }
}

시작 화면 샘플에서는 다음 단계에 따라 연장된 시작 화면을 표시하고 앱이 활성화되는 경우 시작 화면 이미지 위치를 지정합니다(default.js 파일의 해당 activated 이벤트 처리기 내).

기본 시작 화면 이미지가 표시된 좌표를 가져옵니다. 이러한 좌표는 activated 이벤트 처리기에 전달된 이벤트 개체에서 액세스할 수 있는 SplashScreen 개체의 속성에 저장됩니다.

시작 화면 샘플에서는 다음 코드를 사용하여 좌표를 가져옵니다.


    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;

시작 화면의 dismissed 이벤트를 들은 다음 앱 리소스 로드를 시작합니다. 시스템은 시스템 제공 시작 화면을 해제할 때 dismissed 이벤트를 발생시키며, 이 경우 앱의 연장된 시작 화면을 표시하도록 전환됩니다. dismissed 이벤트 처리기 내에서 설정 작업을 시작하고 앱 설정이 완료되면 연장된 시작 화면을 닫습니다.

시작 화면 샘플에서는 dismissed 이벤트 처리기(onSplashScreenDismissed)를 default.js의 activated 함수에 등록합니다.

        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

default.js의 activated 이벤트 외부에서 dismissed 이벤트 처리기를 정의합니다. 시작 화면 샘플에서는 리소스가 로드될 때까지 기다리지 않으므로 사용자가 "Learn More" 단추를 클릭하면 연장된 시작 화면을 제거합니다.

    function onSplashScreenDismissed() {
        // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
        SdkSample.dismissed = true;

        // Tear down the app's extended splash screen after completing setup operations here...
        // In this sample, the extended splash screen is torn down when the "Learn More" button is clicked.
        document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false);
        }
    }

extendedSplash.js 파일에 연장된 시작 화면을 제거하는 함수를 만듭니다.

    // Removes the extended splash screen if it is currently visible.
    function remove() {
        if(isVisible()) {
            var extendedSplashScreen = document.getElementById("extendedSplashScreen");
            WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
        }
    }

연장된 시작 화면을 배치하고 표시합니다.

시작 화면 샘플은 activated 이벤트 처리기(default.js)에서 다음 코드를 사용하여 시작 화면을 배치하고 표시합니다.


        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

extendedSplash.js에 연장된 시작 화면 이미지의 위치를 지정하는 함수를 추가합니다.


// Displays the extended splash screen. Pass the splash screen object retrieved during activation.
function show(splash) {
    var extendedSplashImage = document.getElementById("extendedSplashImage");

    // Position the extended splash screen image in the same location as the system splash screen image.
    extendedSplashImage.style.top = splash.imageLocation.y + "px";
    extendedSplashImage.style.left = splash.imageLocation.x + "px";
    extendedSplashImage.style.height = splash.imageLocation.height + "px";
    extendedSplashImage.style.width = splash.imageLocation.width + "px";

    // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
    /*
    var extendedSplashProgress = document.getElementById("extendedSplashProgress");
    extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
    */

    // Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible.
    var extendedSplashScreen = document.getElementById("extendedSplashScreen");
    WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

Windows(Windows Phone 아님): 창 크기 조정 이벤트를 수신 대기하고 시작 화면 이미지의 위치를 조정하여 응답합니다. 이렇게 하면 앱 크기를 조정할 경우 연장된 시작 화면의 형식이 올바르게 지정됩니다. 유연한 레이아웃을 만들거나 ViewBox 등의 유연한 컨트롤에 콘텐츠를 배치할 경우 방향 변경이 자동으로 처리됩니다.

default.js의 activated 이벤트 처리기에 크기 조정 이벤트 처리기를 등록합니다.

            // Listen for window resize events to reposition the extended splash screen image accordingly.
            // This is important to ensure that the extended splash screen is formatted properly in response to resizing, rotation, etc...
            window.addEventListener("resize", onResize, false);

그런 다음 이벤트 처리기를 정의하는 코드를 추가합니다. 이 함수는 업데이트된 이미지 위치 좌표를 가져온 후 다른 함수를 호출하여 연장된 시작 화면 페이지에서 이미지의 위치를 업데이트합니다.

function onResize() {
    // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
    if (splash) {
        // Update the coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;
        ExtendedSplash.updateImageLocation(splash);
    }
}

샘플은 extendedSplash.js의 updateImageLocation을 정의합니다. 연장된 시작 화면이 표시되는 경우 시스템에서 표시하는 시작 화면과 동일한 위치에 연장된 시작 화면의 이미지가 배치됩니다.

function updateImageLocation(splash) {
    if (isVisible()) {
        var extendedSplashImage = document.getElementById("extendedSplashImage");

        // Position the extended splash screen image in the same location as the system splash screen image.
        extendedSplashImage.style.top = splash.imageLocation.y + "px";
        extendedSplashImage.style.left = splash.imageLocation.x + "px";
        extendedSplashImage.style.height = splash.imageLocation.height + "px";
        extendedSplashImage.style.width = splash.imageLocation.width + "px";

        // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
        /*
        var extendedSplashProgress = document.getElementById("extendedSplashProgress");
        extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
        */
    }
}

설명

팁 연장된 시작 화면으로 전환하는 동안 깜박임이 발생하면 다음과 같이 <img> 태그에 onload=""를 추가합니다. <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. 이렇게 하면 연장된 시작 화면으로 전환하기 전에 이미지가 렌더링될 때까지 시스템이 대기하도록 하여 깜박임을 방지합니다.

시작 화면을 연장하는 방법(HTML)

사전 요구 사항

단계 1: 연장된 시작 화면 페이지 만들기

단계 2: 연장된 시작 화면을 표시하는 활성화된 이벤트 처리기에 코드를 추가합니다.

설명

관련 항목

추가 리소스