C++/WinRT를 사용하여 "Hello, World!" UWP 앱(XAML)

이 자습서에서는 XAML과 C#을 사용하여 Windows의 UWP(유니버설 Windows 플랫폼)에 대한 간단한 "Hello, World!" 앱을 만드는 방법에 대해 설명합니다. Microsoft Visual Studio의 단일 프로젝트를 사용하여 모든 버전의 Windows 10 및 Windows 11에서 실행되는 앱을 빌드할 수 있습니다.

여기서는 다음 방법을 알아봅니다.

• Windows 10 및 UWP를 대상으로 하는 새 Visual Studio 프로젝트 만들기
• 시작 페이지의 UI를 변경하려면 XAML을 작성합니다.
• Visual Studio의 로컬 데스크톱에서 프로젝트를 실행합니다.
• 단추를 누를 때 앱이 말하도록 하려면 SpeechSynthesizer를 사용합니다.

시작하기 전 확인 사항..

• 유니버설 Windows 앱이란?
• Visual Studio(및 Windows)를 다운로드합니다. 도움이 필요하면 설정 방법을 알아보세요.
• 또한 Visual Studio에서 기본 창 레이아웃을 사용하고 있다고 가정합니다. 기본 레이아웃을 변경하는 경우 창 레이아웃 초기화 명령을 사용하여 창 메뉴에서 초기화할 수 있습니다.

참고 항목

이 자습서에서는 Visual Studio Community 2017을 사용합니다. 다른 버전의 Visual Studio를 사용하는 경우 약간 다르게 보일 수 있습니다.

1단계: Visual Studio에서 새 프로젝트 만들기

1. Visual Studio를 시작합니다.

2. 파일 메뉴에서 새로 만들기 > 프로젝트를 선택하여 새 프로젝트 대화 상자를 엽니다.

3. 왼쪽에 있는 템플릿 목록에서 설치됨 > Visual C# > Windows 유니버설을 선택하여 UWP 프로젝트 템플릿 목록을 표시합니다.

   (유니버설 템플릿이 표시되지 않으면 UWP 앱을 만들기 위한 구성 요소가 누락되었을 수 있습니다. 새 프로젝트 대화 상자에서 Visual Studio 설치 관리자 열기를 클릭하여 설치 프로세스를 반복하고 UWP 지원을 추가할 수 있습니다. 설정 가져오기를 참조하세요.)

   

4. 빈 앱(유니버설 Windows) 템플릿을 선택하고 이름으로 "HelloWorld"를 입력합니다. 확인을 선택합니다.

   

   참고 항목

   Visual Studio를 처음 사용하는 경우 개발자 모드를 사용하도록 설정하라는 설정 대화 상자가 표시될 수 있습니다. 개발자 모드는 앱을 Store에서만 실행하는 것이 아니라 직접 실행할 수 있는 권한처럼 특정 기능을 활성화하는 특수 설정입니다. 자세한 내용은 디바이스를 개발에 사용하도록 설정을 읽어보세요. 이 가이드를 계속하려면 개발자 모드를 선택하고 예를 클릭하여 대화 상자를 닫습니다.

   

5. 대상 버전/최소 버전 대화 상자가 나타납니다. 이 자습서에는 기본 설정이면 충분하므로 확인을 선택하여 프로젝트를 만듭니다.

   

6. 새 프로젝트가 열리면 해당 파일이 오른쪽의 솔루션 탐색기 창에 표시됩니다. 파일을 보려면 속성 탭 대신 솔루션 탐색기 탭을 선택해야 할 수도 있습니다.

   

빈 앱(유니버설 창)은 최소한의 템플릿이지만 여전히 많은 파일이 포함되어 있습니다. 이러한 파일은 C#을 사용하는 모든 UWP 앱에 필수적입니다. Visual Studio에서 만드는 모든 프로젝트에는 이러한 항목이 포함됩니다.

파일에는 무엇이 있나요?

프로젝트의 파일을 보고 편집하려면 솔루션 탐색기에서 파일을 두 번 클릭합니다. 연결된 코드 파일을 보려면 폴더처럼 XAML 파일을 확장합니다. XAML 파일은 디자인 화면과 XAML 편집기를 모두 표시하는 분할 보기에서 열립니다.

참고 항목

XAML이란? XAML(Extensible Application Markup Language)은 앱의 사용자 인터페이스를 정의하는 데 사용되는 언어입니다. 수동으로 입력하거나 Visual Studio 디자인 도구를 사용하여 만들 수 있습니다. .xaml 파일에는 논리가 포함된 .xaml.cs 코드 숨김 파일이 있습니다. XAML과 코드 숨김이 함께 완전한 클래스를 만듭니다. 자세한 내용은 XAML 개요를 참조하세요.

App.xaml 및 App.xaml.cs

• App.xaml은 앱 전체에서 사용되는 리소스를 선언하는 곳입니다.
• App.xaml.cs는 App.xaml의 코드 숨김 파일입니다. 모든 코드 숨김 페이지와 마찬가지로 여기에는 InitializeComponent 메서드를 호출하는 생성자가 포함되어 있습니다. InitializeComponent 메서드를 작성하지 않았습니다. Visual Studio에서 생성되며 주요 목적은 XAML 파일에 선언된 요소를 초기화하는 것입니다.
• App.xaml.cs는 앱의 진입점입니다.
• App.xaml.cs에는 앱의 활성화와 일시 중단을 처리하는 메서드도 포함되어 있습니다.

MainPage.xaml

• MainPage.xaml은 앱의 UI를 정의하는 곳입니다. XAML 마크업을 사용하여 직접 요소를 추가하거나 Visual Studio에서 제공하는 디자인 도구를 사용할 수 있습니다.
• MainPage.xaml.cs는 MainPage.xaml의 코드 숨김 페이지입니다. 여기에서 앱 논리와 이벤트 처리기를 추가할 수 있습니다.
• 이 두 파일은 함께 HelloWorld 네임스페이스의 페이지에서 상속되는 MainPage라는 새 클래스를 정의합니다.

Package.appxmanifest

• 이름, 설명, 타일, 시작 페이지 등 앱을 설명하는 매니페스트 파일입니다.
• 앱이 포함하는 종속성, 리소스 및 파일의 목록을 포함합니다.

로고 이미지 세트

• Assets/Square150x150Logo.scale-200.png 및 Wide310x150Logo.scale-200.png는 시작 메뉴에 앱을 나타냅니다(중간 또는 와이드 크기).
• Assets/Square44x44Logo.png는 시작 메뉴, 작업 표시줄 및 작업 관리자의 앱 목록에 앱을 나타냅니다.
• Assets/StoreLogo.png는 Microsoft Store에 앱을 나타냅니다.
• Assets/SplashScreen.scale-200.png는 앱이 시작될 때 나타나는 시작 화면입니다.
• Assets/LockScreenLogo.scale-200.png는 시스템이 잠긴 경우 잠금 화면에 앱을 나타내는 데 사용할 수 있습니다.

2단계: 단추 추가

디자이너 뷰 사용

페이지에 단추를 추가해 보겠습니다. 이 자습서에서는 이전에 나열된 몇 가지 파일(App.xaml, MainPage.xaml 및 MainPage.xaml.cs)만 사용하여 작업합니다.

1. MainPage.xaml을 두 번 클릭하여 디자인 보기에서 엽니다.

   화면 상단에는 그래픽 보기가 있고 그 아래에는 XAML 코드 보기가 있습니다. 둘 중 하나를 변경할 수 있지만 지금은 그래픽 보기를 사용할 예정입니다.

   

2. UI 컨트롤 목록을 열려면 왼쪽에 있는 세로형 도구 상자 탭을 클릭합니다. (제목 표시줄에 있는 핀 아이콘을 클릭하면 계속 표시됩니다.)

   

3. 공통 XAML 컨트롤을 확장하고 단추를 디자인 캔버스 중앙으로 끕니다.

   

   XAML 코드 창을 보면 여기에도 단추가 추가된 것을 볼 수 있습니다.

<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

4. 단추의 텍스트를 변경합니다.

   XAML 코드 보기를 클릭하고 콘텐츠를 "Button"에서 "Hello, world!"로 변경합니다.

<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

디자인 캔버스에 표시된 단추가 어떻게 업데이트되어 새 텍스트를 표시하는지 확인합니다.

3단계: 앱 시작

이제 매우 간단한 앱이 만들어졌습니다. 지금은 앱을 빌드, 배포, 실행하고 앱이 어떻게 보이는지 확인하기에 좋은 시간입니다. 로컬 컴퓨터, 시뮬레이터, 에뮬레이터 또는 원격 디바이스에서 앱을 디버그할 수 있습니다. Visual Studio의 대상 디바이스 메뉴는 다음과 같습니다.

데스크톱 디바이스에서 앱 시작

기본적으로 앱은 로컬 컴퓨터에서 실행됩니다. 대상 디바이스 메뉴는 데스크톱 디바이스 제품군의 디바이스에서 앱을 디버깅하기 위한 여러 옵션을 제공합니다.

• 시뮬레이터
• 로컬 머신
• 원격 머신

로컬 머신에서 디버깅을 시작하려면

1. 표준 도구 모음의 대상 디바이스 메뉴()에서 로컬 컴퓨터이 선택되어 있는지 확인합니다. (기본 선택입니다.)
2. 도구 모음에서 디버깅 시작 단추()를 클릭합니다.

-또는-

디버그 메뉴에서 디버깅 시작을 클릭합니다.

-또는-

F5 키를 누릅니다.

앱이 창에서 열리고 기본 시작 화면이 먼저 나타납니다. 시작 화면은 이미지(SplashScreen.png)와 배경색(앱의 매니페스트 파일에 지정됨)으로 정의됩니다.

시작 화면이 사라진 다음 앱이 나타납니다. 모양은 다음과 같습니다.

Windows 키를 눌러 시작 메뉴를 연 다음 모든 앱을 표시합니다. 앱을 로컬로 배포하면 해당 타일이 시작 메뉴에 추가됩니다. 나중에 앱을 다시 실행하려면(디버깅 모드가 아님) 시작 메뉴에서 해당 타일을 탭하거나 클릭합니다.

아직 기능은 많지 않지만, 첫 UWP 앱을 빌드한 것을 축하드립니다.

디버깅을 중지하려면

도구 모음에서 디버깅 중지 단추()를 클릭합니다.

-또는-

디버그 메뉴에서 디버깅 중지를 클릭합니다.

-또는-

앱 창을 닫습니다.

4단계: 이벤트 처리기

"이벤트 처리기"는 복잡해 보이지만 이벤트가 발생할 때(예: 사용자가 단추를 클릭할 때) 호출되는 코드의 또 다른 이름일 뿐입니다.

1. 아직 실행하지 않았다면 앱 실행을 중지합니다.

2. 디자인 캔버스에서 단추 컨트롤을 두 번 클릭하여 Visual Studio에서 단추에 대한 이벤트 처리기를 만들도록 합니다.

물론 모든 코드를 수동으로 만들 수도 있습니다. 또는 단추를 클릭하여 선택하고 오른쪽 하단에 있는 속성 창을 볼 수도 있습니다. 이벤트(작은 번개 모양)로 전환하면 이벤트 처리기의 이름을 추가할 수 있습니다.

3. 코드 숨김 페이지, MainPage.xaml.cs에서 이벤트 처리기 코드를 편집합니다. 지금부터가 흥미로운 부분입니다. 기본 이벤트 처리기는 다음과 같습니다.

private void Button_Click(object sender, RoutedEventArgs e)
{

}

다음과 같이 되도록 바꿔보겠습니다.

private async void Button_Click(object sender, RoutedEventArgs e)
{
    MediaElement mediaElement = new MediaElement();
    var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
    Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
    mediaElement.SetSource(stream, stream.ContentType);
    mediaElement.Play();
}

메서드 서명은 이제 async 키워드를 포함해야 하며 그렇지 않은 경우 앱을 실행하려고 할 때 오류가 발생할 수 있습니다.

무엇을 했습니까?

이 코드는 일부 Windows API를 사용하여 음성 합성 개체를 만든 다음 말할 텍스트를 제공합니다. (SpeechSynesis 사용에 대한 자세한 내용은 SpeechSynesis 네임스페이스 문서를 참조하세요.)

앱을 실행하고 단추를 클릭하면 컴퓨터(또는 휴대폰)가 문자 그대로 "Hello, World!"라고 말할 것입니다.

요약

축하합니다. Windows 및 UWP용 첫 번째 앱을 만들었습니다!

XAML을 통해 앱에서 사용할 컨트롤을 배치하는 방법을 알아보려면 표 자습서를 살펴보거나 다음 단계로 바로 이동하세요.

참고 항목

• 첫 번째 앱
• UWP 앱 게시
• UWP 앱 개발에 대한 방법 문서
• UWP 개발자를 위한 코드 샘플
• 유니버설 Windows 앱이란?
• Windows 계정 가입