시작 화면에 대한 지침

Applies to Windows and Windows Phone

다음 지침에 따라 시작 화면을 사용자 지정하고 확장된 시작 화면을 만들어 사용자에게 우수한 실행 환경을 제공하세요.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.:  Windows 스토어 앱 UI 전체 프로세스

권장 사항 및 금지 사항

  • 시작 화면을 사용자 지정하여 앱을 차별화합니다. 시작 화면은 이미지와 배경색으로 구성되며, 이 두 가지 구성 요소를 모두 사용자 지정할 수 있습니다. 앱의 시작 화면을 잘 디자인할수록 더 많은 사용자가 방문하게 됩니다.

    이미지와 배경색을 함께 배치하여 시작 화면을 만들면 앱이 설치된 장치의 폼 팩터와 관계없이 시작 화면이 멋지게 표시됩니다. 시작 화면이 표시될 때 다양한 화면 크기에 맞게 배경의 크기만 변경됩니다. 이미지는 항상 원래대로 유지됩니다.

    이 시작 화면을 추가하고 사용자 지정하는 방법에 대한 자세한 내용은 빠른 시작: 시작 화면 추가를 참조하세요.

  • 앱의 방문 페이지를 표시하기 전에 추가 작업을 완료할 수 있도록 연장된 시작 화면을 만듭니다. Windows에 의해 표시되는 시작 화면과 비슷하게 연장된 시작 화면을 만들어 앱의 로딩 환경을 좀 더 강력하게 제어할 수 있습니다. 시스템에 의해 표시되는 시작 화면과 비슷하게 만들면 사용자를 위한 유연하고 유익한 로딩 환경을 구성할 수 있습니다. 앱에서 UI를 준비하거나 네트워크 데이터를 로드하는 데 더 많은 시간이 필요한 경우 연장된 시작 화면을 사용하여 앱이 이러한 작업을 완료할 때 사용자 메시지를 표시할 수 있습니다.

    Windows 스토어의 확장된 시작 화면은 다음과 같습니다. 이 화면은 사용자에게 앱이 로드되고 있음을 알리는 "확정되지 않은 링" 진행률 컨트롤을 추가한다는 점을 제외하고 초기 시작 화면과 동일합니다.Windows 스토어의 확장된 시작 화면 스크린샷

    SplashScreen 클래스를 사용하여 확장된 시작 화면을 만드는 방법을 알아보려면 시작 화면을 확장하는 방법(JavaScript 및 HTML로 작성한 Windows 스토어 앱) 또는 시작 화면을 확장하는 방법(C#/VB/C++ 및 XAML로 작성한 Windows 스토어 앱)을 참조하세요.

    확정되지 않은 링 같은 진행률 컨트롤의 개요는 진행률 컨트롤에 대한 지침을 참조하세요.

      조각 로드를 사용하여 연장된 시작 화면을 로드하는 경우 Windows 시작 화면이 종료되고 앱의 연장된 시작 화면이 표시될 때까지의 시간 동안 깜박임 현상이 발생할 수도 있습니다. 이 깜박임 현상은 activated 이벤트 처리기가 종료되기 이전에 조각 로드를 통해 연장된 시작 화면이 비동기적으로 로드되기 때문에 발생합니다. 시작 화면 샘플에 나오는 디자인 패턴을 사용하여 이와 같은 부적절한 깜박임 현상을 완전히 피할 수 있습니다. 연장된 시작 화면이 조각으로 로드되는 대신, 앱의 UI 위에 간단히 그려집니다. 추가 로딩 작업이 완료되면 앱의 방문 페이지가 보이도록 연장된 시작 화면의 표시를 중지할 수 있습니다. 또는 연장된 시작 화면을 조각으로 계속 로드하려면 활성화를 지연시켜 activated 이벤트에 비동기적으로 응답함으로써 깜박임 현상을 방지할 수도 있습니다. activatedOperation.getDeferral 메서드를 호출하여 활성화된 이벤트를 지연합니다.

  • 시작 화면이나 연장된 시작 화면을 사용하여 광고를 표시하지 마세요. 시작 화면의 용도는 앱이 로드되는 동안 사용자가 원하는 앱이 시작되고 있음을 알리는 데 있습니다. 시작 화면에 외부 요소를 가져오면 사용자가 올바른 앱을 시작했다는 확신이 줄어들고 앱을 한눈에 식별하기가 더 어려워집니다.

  • 연장된 시작 화면을 메커니즘으로 사용하여 서로 다른 여러 시작 화면 이미지를 표시하지 마세요. 시작 화면과 연장된 시작 화면의 용도는 사용자에게 유연하고 세련된 로딩 환경을 제공하는 것입니다. 연장된 시작 화면을 사용하여 서로 다른 여러 시작 화면 이미지를 표시할 경우 이 목적과는 달리 집중을 분산시키고 사용자에게 이상해 보이거나 혼동을 유발할 수 있습니다. 대신에, 다른 작업이 완료되는 동안 연장된 시작 화면에서 현재의 로딩 환경을 계속해야 합니다.

  • 시작 화면이나 연장된 시작 화면을 사용하여 '정보' 페이지를 표시하지 마세요. 시작 화면에 버전 정보 또는 기타 앱 메타데이터가 표시되면 안 됩니다. 이 정보는 앱의 Windows 스토어 설명 또는 앱 자체 내에 표시해야 합니다.

사용자 환경

  • 앱을 명확히 식별해 주는 이미지를 사용합니다. 사용자가 올바른 앱을 시작했다는 확신이 들도록 앱을 명확히 식별해 주는 이미지 및 색 구성표를 사용합니다. 고유한 화면을 만들어도 브랜드 강화에 도움이 됩니다.

  • 최상의 시각적 결과를 얻으려면 투명한 PNG를 시작 화면 이미지로 사용합니다. 투명한 PNG를 사용하면 선택한 배경색이 시작 화면 이미지를 통과하여 표시됩니다. 또는 이미지의 배경색이 다른 경우 시작 화면이 지저분하게 표시되고 사용자의 관심을 끌지 못할 수 있습니다.

  • 세 가지 배율로 크기가 지정된 시작 화면 이미지 버전을 제공합니다. 장치가 1x 배율을 사용할 때 모든 앱에는 620 x 300 픽셀의 시작 화면 이미지가 있어야 합니다. 또한 1.4x 및/또는 1.8x 배율에 대해 추가 시작 화면 이미지를 포함하는 것이 좋습니다. 세 가지 배율 모두에 대한 이미지를 제공하면 다양한 장치에서 깔끔하고 일관된 시작 환경을 만드는 데 도움이 됩니다.

    다음 표에서 각 배율의 시작 화면 이미지에 필요한 크기를 확인하세요.

    배율이미지 크기(픽셀)
    1x620 x 300
    1.4x868 x 420
    1.8x1116 x 540

     

  • 시작 화면 이미지에 시스템이 할당한 영역을 사용하는 이미지를 선택합니다. 시작 화면 이미지를 선택할 때는 각 배율에 할당된 공간을 활용하도록 합니다. 각 배율의 시작 화면 이미지 크기를 확인하려면 배율 및 이미지 크기 표를 참조하세요.

    이렇게 하면 고품질 시작 화면을 생성하여 이미지 품질을 유지하는 데 도움이 됩니다.

  • 시작 화면이 사라진 후에 시스템 및 이벤트 관련 UI 를 표시합니다. 시작 화면 dismissed 이벤트를 수신하여 시스템 또는 이벤트 관련 UI를 표시하기에 적합한 시점을 결정할 수 있습니다. 그렇지 않은 경우 시작 화면이 표시되는 동안 연결된 UI(예: 검색 창, 메시지 대화 상자 또는 웹 인증 브로커)가 표시될 수 있습니다. 이로 인해 원치 않는 시각적 효과가 나타날 수 있습니다.

  • 시작 화면이 닫힌 후에 시작 애니메이션을 시작합니다. 많은 앱은 앱의 방문 페이지가 로드될 때마다 콘텐츠 개시 애니메이션을 표시하는 방식을 원합니다. 시작 화면 dismissed 이벤트를 수신하여 애니메이션을 시작할 시점을 결정할 수 있습니다.

연장된 시작 화면

  • 연장된 시작 화면을 Windows에 의해 표시되는 시작 화면과 비슷하게 만듭니다. 연장된 시작 화면에 Windows 시작 화면과 동일한 배경색과 이미지를 사용해야 합니다. 일관된 이미지와 배경색을 사용하면 Windows 시작 화면에서 앱의 연장된 시작 화면으로의 전환이 전문적으로 표현되어 사용자에게 이상해 보이지 않습니다.

  • Windows에서 시작 화면을 표시한 좌표에 연장된 시작 화면 이미지를 배치합니다. 현재 SplashScreen 클래스를 사용하여 연장된 시작 화면 이미지를 배치하는 방법에 대한 자세한 내용은 시작 화면을 연장하는 방법을 참조하세요.

  • 회전과 같은 크기 조정 이벤트에 응답하도록 연장된 시작 화면의 위치를 조정합니다. 또한 앱의 크기가 조정되거나 장치가 회전되는 경우 연장된 시작 화면에서 onresize 이벤트를 수신하여 시작 화면 이미지의 좌표를 조정해야 합니다. 이렇게 하면 사용자가 장치를 조작하거나 앱의 레이아웃을 변경하는 방식과 상관없이 원활하고 전문적인 느낌이 나는 앱 로딩 환경을 제공할 수 있습니다.

  • 몇 초 이상 연장된 시작 화면을 표시하는 경우 앱이 여전히 로드 중임을 사용자에게 알리기 위해 진행률 링을 추가합니다. 확정되지 않은 진행률 링 컨트롤을 사용하여 앱이 크래시되지 않았으며 곧 사용 준비가 완료될 것임을 사용자에게 알릴 수 있습니다. 진행률 링 옆에 앱이 수행 중인 작업을 사용자에게 간단히 설명하는 1줄 텍스트를 표시하는 것이 좋습니다. 예를 들어 확장된 시작 화면에서 진행률 링과 "로드 중" 메시지를 제공할 수 있습니다.

    앱이 보다 잘 반응하는 것처럼 보이도록 하고 사용자에게 관련 정보를 계속 제공하면 긍정적인 로드 환경을 만들 수 있습니다. 확정되지 않은 진행률 링과 텍스트를 추가하는 방법은 빠른 시작: 진행률 컨트롤 추가에서 확인할 수 있습니다.

추가 사용법 지침

모든 Windows 스토어 앱에는 시작 화면 이미지와 배경색이 조합된 시작 화면이 있어야 합니다. 또한 이러한 기능을 모두 사용자 지정할 수 있습니다.

사용자가 앱을 시작하면 바로 Windows에서 이 시작 화면이 표시됩니다. 이 화면에서는 앱 리소스가 초기화되는 동안 즉각적인 피드백을 제공합니다. 앱을 조작할 수 있게 되면 Windows에서 시작 화면이 사라집니다.

앱의 시작 화면을 잘 디자인할수록 더 많은 사용자가 방문하게 됩니다. Windows 스토어는 다음과 같은 간소화된 시작 화면을 사용합니다. 시작 화면 샘플의 시작 화면에 대한 75% 배율 화면 캡처입니다.

이 시작 화면은 녹색 배경색과 투명 PNG를 결합하여 만든 것입니다.

SplashScreen 클래스를 통해 시작 화면을 확장하고 개시 애니메이션을 트리거하여 앱의 실행 환경을 사용자 지정할 수 있습니다.

보안 고려 사항

보안 C++ 코드 작성을 위한 지침은 다음 문서를 참조하세요.

문제 해결

JavaScript: 연장된 시작 화면으로 전환하는 동안 깜박임 현상 방지

시작 화면을 연장하는 방법에는 깜박임 현상이 표시되지 않도록 하는 데 도움이 되는 지침이 포함되어 있습니다. 연장된 시작 화면으로 전환하는 동안 깜박임 현상이 나타나면 <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />와 같이 <img> 태그에 onload=""를 추가하세요. 이렇게 하면 연장된 시작 화면으로 전환하기 전에 이미지가 렌더링될 때까지 시스템이 대기하도록 하여 깜박임을 방지합니다.

C#: 연장된 시작 화면으로 전환하는 동안 깜박임 현상 방지

시작 화면을 연장하는 방법의 지침을 따른 경우 연장된 시작 화면으로 전환하는 동안 깜박임 현상이 나타날 수 있습니다. 이러한 깜박임 현상은 페이지의 콘텐츠 렌더링이 완료되기 전에 Window.Current.Activate를 호출하여 현재 창을 활성화한 경우에 발생합니다. 현재 창을 활성화하기 전에 연장된 시작 화면 이미지를 읽었는지 확인하면 깜박임 현상이 표시될 가능성을 줄일 수 있습니다. 또한 깜박임 현상을 방지하려면 타이머를 사용하여 응용 프로그램이 현재 창을 활성화하기 전에 잠깐(약 50ms) 대기하도록 해야 합니다. 안타깝게도 XAML은 콘텐츠를 비동기적으로 렌더링하여 렌더링이 완료될 시기를 예측할 방법이 없기 때문에 깜박임 현상을 방지할 수 있는 보장된 방법이 없습니다.

시작 화면을 연장하는 방법의 지침을 따른 경우 연장된 시작 화면으로 전환하는 동안 깜박임 현상이 나타나면 다음 단계에 따라 현재 창이 활성화되기 전에 연장된 시작 화면 이미지를 읽고 앱이 잠깐 대기하는지 확인합니다.

  1. ExtendedSplash.xaml에서 연장된 시작 화면 이미지에 대한 태그를 업데이트하여 연장된 시작 화면 이미지를 읽은 시간을 알립니다.

    
    <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png" ImageOpened="extendedSplashImage_ImageOpened"/>
    
    

    이미지를 읽으면 ImageOpened 이벤트가 발생합니다. 예제에 표시된 대로 ImageOpened 특성을 추가하고 이벤트 처리기의 이름(extendedSplashImage_ImageOpened)을 지정하여 ImageOpened 이벤트를 등록해야 합니다.

  2. ExtendedSplash.xaml에서 연장된 시작 화면 이미지를 읽은 후 타이머에 따라 현재 창을 활성화하는 코드를 ExtendedSplash 클래스에서 추가합니다.

    
            private DispatcherTimer showWindowTimer;
            private void OnShowWindowTimer(object sender, object e)
            {
                showWindowTimer.Stop();
     
                // Activate/show the window, now that the splash image has rendered
                Window.Current.Activate();
            }
     
            private void extendedSplashImage_ImageOpened(object sender, RoutedEventArgs e)
            {
                // ImageOpened means the file has been read, but the image hasn't been painted yet.
                // Start a short timer to give the image a chance to render, before showing the window
                // and starting the animation.
                showWindowTimer = new DispatcherTimer();
                showWindowTimer.Interval = TimeSpan.FromMilliseconds(50);
                showWindowTimer.Tick += OnShowWindowTimer;
                showWindowTimer.Start();
            }
    
    

    다음 예제에서는 ImageOpened 이벤트에 응답하는 방법 및 타이머를 사용하여 응용 프로그램이 현재 창을 활성화하기 전에 잠깐 대기하도록 하는 방법을 보여 줍니다.

  3. 다음과 같이 OnLaunched 메서드를 수정합니다.

    
    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        if (args.PreviousExecutionState != ApplicationExecutionState.Running)
        {
            bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
            ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
            Window.Current.Content = extendedSplash;
        }
    
        // ExtendedSplash will activate the window when its initial content has been painted.
    }
    
    

    예제에서는 현재 창에 대한 Activate 호출을 제거했습니다. 대신 해당 활성화는 연장된 시작 화면 이미지를 읽었음을 나타내는 ImageOpened 이벤트가 발생한 후 ExtendedSplash 개체에서 수행합니다.

  4. 여러 장치에서 코드를 테스트하고 최대한 많은 환경에서 코드가 깜박임 현상을 효율적으로 방지하는지 확인합니다.

관련 항목

디자이너용
시작 화면을 연장하는 방법
빠른 시작: 시작 화면 추가
시작 화면 샘플
개발자용(HTML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
빠른 시작: 진행률 컨트롤 추가
개발자용(XAML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
ImageOpened
OnLaunched
Activate

 

 

표시:
© 2014 Microsoft