내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone 8용 첫 번째 앱을 만드는 방법

2014-06-18

이 항목에서는 첫 번째 Windows Phone 용 앱을 만드는 데 도움이 되는 단계별 지침을 제공합니다. 기본 웹 브라우저를 만들게 됩니다. 이 간단한 앱은 사용자가 URL을 입력할 수 있도록 하고, 사용자가 이동 버튼을 클릭하면 해당 웹 페이지를 로드합니다.

C#이나 Visual Basic.NET에서 전체 미니 브라우저 샘플을 다운로드할 수 있습니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

이 연습에서는 에뮬레이터에서 앱을 테스트할 것으로 가정합니다. 휴대폰에서 앱을 테스트하려면, 추가적인 단계를 거쳐야 합니다. 자세한 내용은 Windows Phone 8용 개발을 위한 휴대폰 등록 방법을 참조하세요.

이 항목의 단계에서는 Visual Studio Express 2012 for Windows Phone 를 사용하는 것으로 가정합니다. Visual Studio 2012 Professional 이상을 사용하거나 Visual Studio 에서 이미 레이아웃 또는 메뉴를 사용자 지정한 경우 창 레이아웃이나 메뉴 명령이 약간 차이를 보일 수 있습니다.

Windows Phone 앱을 만드는 첫 번째 단계는 Visual Studio 에서 새 프로젝트를 만드는 것입니다.

프로젝트를 만들려면

  1. Windows Phone SDK 를 다운로드하고 설치했는지 확인합니다. 자세한 내용은 SDK 다운로드를 참조하세요.

  2. Windows 시작 화면에서 Visual Studio 를 시작합니다. 등록 창이 나타나면 제품을 등록하거나 등록 메시지를 일시적으로 해제할 수 있습니다.

  3. 파일 | 새 프로젝트 메뉴 명령을 선택하여 새 프로젝트를 만듭니다.

  4. 새 프로젝트 창에서, 설치되어 있는 Visual C#이나 Visual Basic 템플릿을 확장한 다음, Windows Phone 템플릿을 선택합니다.

  5. Windows Phone 템플릿 목록에서, Windows Phone 앱  템플릿을 선택합니다.

  6. 새 프로젝트 창 아래에서 MiniBrowser를 프로젝트 이름으로 입력합니다.

    GetStartedNewProject
  7. 확인을 클릭합니다. 새 Windows Phone 응용프로그램 대화 상자에서 대상 Windows Phone OS 버전에 대해 Windows Phone OS 8.0을 선택합니다.

    • Windows Phone OS 8.0을 대상 버전으로 선택하면 앱을 Windows Phone 8 단말기에서만 실행할 수 있습니다.

    • Windows Phone OS 7.1을 선택하면 앱을 Windows Phone OS 7.1 단말기와 Windows Phone 8 단말기 모두에서 실행할 수 있습니다.

    GetStartedSelectPlatform
  8. 확인을 클릭합니다. 새 프로젝트가 만들어지고 Visual Studio 에서 열립니다. 디자이너에 앱의 사용자 인터페이스가 포함된 MainPage.xaml가 표시됩니다. 기본 Visual Studio 창에는 다음과 같은 항목이 포함되어 있습니다.

    • 중간 창에는 페이지에 대한 사용자 인터페이스를 정의하는 XAML 태그가 있습니다.

    • 왼쪽 창에는 XAML 태그의 출력을 보여 주는 스킨이 있습니다.

    • 오른쪽 창에는 프로젝트에 있는 파일들을 보여 주는 솔루션 탐색기가 포함되어 있습니다.

    • 페이지와의 사용자 상호 작용을 처리하는 코드가 들어 있는 연결된 코드 숨김 페이지인, MainPage.xaml.csMainPage.xaml.vb는 기본적으로 열려 있지 않거나 표시되지 않습니다.

    New project open in the Visual Studio designer.

다음 단계는 Visual Studio 디자이너를 사용하여 앱 UI를 구성하는 컨트롤을 배치하는 것입니다. 컨트롤을 추가한 후에 최종 레이아웃은 다음 스크린샷과 유사합니다.

GetStartedFirstAppLayout

UI를 만들려면

  1. 속성 창이 아직 열려 있지 않으면 Visual Studio 에서 보기 | 속성 창 메뉴 명령을 선택하여 창을 엽니다. 속성 창이 Visual Studio 창의 오른쪽 아래에서 열립니다.

  2. 앱 제목을 변경합니다.

    1. Visual Studio 디자이너에서 MY APPLICATION TextBlock 컨트롤을 클릭하여 선택합니다. 이 컨트롤의 속성이 속성 창에 표시됩니다.

      GetStartedProperties

    2. Text 속성에서 이름을 MY FIRST APPLICATION으로 변경하여 앱 창 제목 이름을 바꿉니다. 속성이 속성 창에서 카테고리별로 그룹화되면 일반 카테고리에서 Text를 찾을 수 있습니다.

  3. 페이지의 이름을 변경합니다.

    1. 디자이너에서 페이지 이름 TextBlock 컨트롤을 클릭하여 선택합니다.

    2. Text 속성을 Mini Browser로 변경하여 앱의 기본 페이지 이름을 바꿉니다.

  4. 지원되는 방향을 변경합니다.

    1. XAML 코드 창에서 XAML 코드의 첫 줄을 클릭합니다. PhoneApplicationPage의 속성이 속성 창에 표시됩니다.

    2. SupportedOrientations 속성을 PortraitOrLandscape로 변경하여 세로 및 가로 방향에 대한 지원을 둘 다 추가합니다. 속성이 속성 창에서 카테고리별로 그룹화되면 일반 카테고리에서 SupportedOrientations를 찾을 수 있습니다.

  5. Visual Studio 에서 도구 상자가 아직 열려 있지 않으면 보기 | 도구 모음 메뉴 명령을 선택하여 엽니다. 도구 상자는 보통 Visual Studio 창의 왼쪽에서 열리며, 사용자 인터페이스를 빌드하는 데 사용할 수 있는 컨트롤 목록을 보여 줍니다. 기본적으로 도구 상자는 사용하지 않으면 축소됩니다.

    Visual Studio Toolbox
  6. URL용 텍스트 상자를 추가합니다.

    1. 도구 상자의 일반 Windows Phone 컨트롤 그룹에서 TextBox 컨트롤을 도구 상자에서 디자이너 화면으로 끌어서 놓아 추가합니다. TextBox미니 브라우저 텍스트 바로 아래에 둡니다. 마우스를 사용하여 위 레이아웃 이미지에 표시된 대략적인 너비로 컨트롤 크기를 조정합니다. 이동 버튼에 사용할 공간이 남겨둡니다.

    2. 속성 창에서 새 텍스트 상자에 대해 다음 속성을 설정합니다.

      속성

      이름

      URL

      Text

      http://www.xbox.com

      TextWrapping

      NoWrap

      Height

      Auto

      Width

      Auto

      HorizontalAlignment

      Stretch

      VerticalAlignment

      맨 위

      이러한 설정을 사용하면 컨트롤이 가로 및 세로 모드에서 크기와 위치를 올바르게 조정할 수 있습니다.

  7. 이동 버튼을 추가합니다.

    1. 이동 버튼에 사용할 공간이 생기도록 텍스트 상자의 크기를 변경합니다. 그런 다음 도구 상자의 일반 Windows Phone 컨트롤 그룹에서 Button 컨트롤을 끌어다 놓아 추가합니다. 방금 추가한 텍스트 상자의 오른쪽에 놓습니다. 이전 이미지에 표시되는 적절한 너비로 버튼 크기를 조정합니다.

    2. 속성 창에서 새 버튼에 대해 다음 속성을 설정합니다.

      속성

      이름

      Go

      Content

      Go

      Height

      Auto

      Width

      Auto

      HorizontalAlignment

      Right

      VerticalAlignment

      맨 위

      이러한 설정을 사용하면 컨트롤이 가로 및 세로 모드에서 크기와 위치를 올바르게 조정할 수 있습니다.

  8. WebBrowser 컨트롤을 추가합니다.

    1. 도구 상자의 모든 Windows Phone 컨트롤 그룹에서 WebBrowser 컨트롤을 끌어다 놓아서 앱에 추가합니다. 이 컨트롤을 이전 단계에서 추가한 두 개의 컨트롤 아래에 둡니다. 마우스를 사용하여 나머지 공간을 채우도록 컨트롤 크기를 조정합니다.

      WebBrowser 컨트롤에 대한 자세한 내용은 Windows Phone 8의 WebBrowser 컨트롤를 참조하세요.

    2. 속성 창에서 새 WebBrowser 컨트롤에 대해 다음 속성을 설정합니다.

      속성

      이름

      MiniBrowser

      Height

      Auto

      Width

      Auto

      HorizontalAlignment

      Stretch

      VerticalAlignment

      Stretch

      이러한 설정을 사용하면 컨트롤이 가로 및 세로 모드에서 크기와 위치를 올바르게 조정할 수 있습니다.

이제 레이아웃이 완료되었습니다. MainPage.xaml의 XAML 코드에서 컨트롤이 들어 있는 표를 찾습니다. 이 표는 다음과 비슷합니다. 앞의 그림에 표시된 것과 정확히 동일한 레이아웃을 원할 경우 다음 XAML을 복사한 후 붙여 넣어 MainPage.xaml 파일에 표 레이아웃을 배치합니다.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox x:Name="URL" Margin="10,10,85,0" Text="http://www.xbox.com" VerticalAlignment="Top"/>
    <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top"/>
    <phone:WebBrowser x:Name="MiniBrowser" Margin="10,82,0,0"/>
</Grid>

앱을 테스트하는 최종 단계는 이동 버튼을 구현하는 코드를 추가하는 것입니다.

코드를 추가하려면

  1. 디자이너에서 추가한 이동 버튼 컨트롤을 두 번 클릭하여 버튼의 Click 이벤트에 대해 비어 있는 이벤트 처리기를 만듭니다. MainPage.xaml.cs 탭에 있는 C# 코드 페이지나 MainPage.xaml.vb 탭의 Visual Basic 코드 페이지에 빈 이벤트 처리기가 나타납니다.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Shell;
    using MiniBrowser.Resources;
    
    namespace MiniBrowser
    {
        public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
            }
    
            private void Go_Click(object sender, RoutedEventArgs e)
            {
    
            }
        }
    }
    

    이동 버튼을 두 번 클릭하면 Visual Studio 에서 MainPage.xaml의 XAML을 업데이트하여 버튼의 Click 이벤트를 Go_Click 이벤트 처리기에 연결합니다.

        <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top" Click="Go_Click"/>
    
    
  2. MainPage.xaml.csMainPage.xaml.vb에서, 빈 Go_Click 이벤트 처리기에 강조된 코드 줄을 추가합니다. 이 코드는 사용자가 텍스트 상자에 입력한 URL을 사용하여 MiniBrowser 컨트롤에서 해당 URL로 이동합니다.

    private void Go_Click(object sender, RoutedEventArgs e)
    {
        string site = URL.Text;
        MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
    }
    

이제 첫 번째 Windows Phone 앱을 마쳤습니다. 다음에는 앱을 빌드하고 실행한 다음 디버깅해봅니다.

앱을 테스트하기 전에 웹 브라우저 컨트롤을 테스트할 수 있도록 컴퓨터가 인터넷에 연결되어 있는지 확인합니다.

에뮬레이터에서 앱을 실행하려면

  1. 빌드 | 솔루션 빌드 메뉴 명령을 선택하여 솔루션을 빌드합니다.

    오류가 발생하면 오류 목록 창이 표시됩니다. 오류 목록 창이 아직 열려 있지 않으면 보기 | 오류 목록 메뉴 명령을 선택하여 열 수 있습니다. 오류가 있으면 위 단계를 검토하고 오류를 수정한 다음 솔루션을 다시 빌드합니다.

  2. 표준 도구 모음에서 앱의 배포 대상이 Windows Phone 에뮬레이터 에 대한 값 중 하나(예: Emulator WVGA 512MB)로 설정되어 있는지 확인합니다.

    Target on Standard Toolbar selecting emulator

  3. F5 키를 누르거나 디버그 | 디버깅 시작 메뉴 명령을 눌러 앱을 실행합니다. 이렇게 하면 에뮬레이터 창이 열리고 앱이 시작됩니다. 에뮬레이터를 처음 시작하는 경우 앱을 시작하고 실행하는 데 몇 초가 걸릴 수 있습니다.

    Windows Phone 8 에뮬레이터에는 특별 하드웨어, 소프트웨어 및 구성 요구 사항이 있습니다. 에뮬레이터에 문제가 있으면 다음 항목을 참조하세요.

  4. 실행 중인 앱을 테스트하려면 이동 버튼을 클릭하고 브라우저가 지정된 웹 사이트로 이동하는지 확인합니다.

    GetStartedFirstAppRunning
  5. 가로 모드에서 앱을 테스트하려면 에뮬레이터 도구 모음에서 회전 컨트롤 중 하나를 누릅니다.

    rotate left button 또는 rotate right button

    에뮬레이터가 가로 모드로 회전됩니다. 컨트롤은 가로 화면 형식에 맞게 자동으로 크기가 조절됩니다.

    GetStartedFirstAppRunningLandscape
  6. 디버깅을 중지하려면 Visual Studio 에서 디버그 | 디버깅 중지 메뉴 명령을 선택하면 됩니다.

    디버깅 세션을 끝낼 때에는 에뮬레이터를 실행 중으로 유지하는 것이 좋습니다. 다음 번에 앱을 실행할 때에는 에뮬레이터가 이미 실행 중이므로 앱이 더 빨리 시작됩니다.

이로써 첫 번째 Windows Phone 앱이 완성되었습니다.

Windows Phone 용 개발을 시작합니다.

휴대폰 등록

앱을 휴대폰에서 설치, 실행 및 테스트할 수 있도록 휴대폰을 등록하세요.

Windows Phone 8용 개발을 위한 휴대폰 등록 방법

다른 샘플 앱 다운로드

특정 컨트롤, 기능 및 앱 유형의 작동 방법을 배울 수 있는 다양한 샘플 중에서 선택합니다.

Windows Phone 개발자 센터의 샘플 갤러리

온라인 과정에서 자세히 알아보기

동영상을 보고 데모를 따라 하며 관심이 있는 기능에 대해 알아봅니다.

완전 초보자를 위한 Windows Phone 8 개발, 35부로 구성

Windows Phone 8용 앱 빌드 지금 시작, 21부로 구성

시작 검사 목록을 다시 보기

SDK로 할 수 있는 작업을 알고 훌륭한 앱을 빌드하기 위한 지침을 찾습니다.

Windows Phone 8 개발 시작

표시:
© 2014 Microsoft