연습: Visual C# 또는 Visual Basic으로 간단한 응용 프로그램 만들기Walkthrough: Create a Simple Application with Visual C# or Visual Basic

이 연습을 완료하면 Visual Studio를 사용하여 응용 프로그램을 개발할 때 사용할 수 있는 여러 도구, 대화 상자 및 디자이너에 익숙해집니다.By completing this walkthrough, you'll become familiar with many of the tools, dialog boxes, and designers that you can use when you develop applications with Visual Studio. IDE(통합 개발 환경)의 작업에 대해 배우면서 간단한 “Hello, World” 응용 프로그램을 만들고, UI를 디자인하고, 코드를 추가하고, 오류를 디버그하게 됩니다.You'll create a simple "Hello, World" application, design the UI, add code, and debug errors, while you learn about working in the integrated development environment (IDE).

이 항목에는 다음과 같은 단원이 포함되어 있습니다.This topic contains the following sections:

IDE 구성Configure the IDE

간단한 응용 프로그램 만들기Create a simple application

응용 프로그램 디버깅 및 테스트Debug and test the application

IDE 구성Configure the IDE

처음으로 Visual Studio를 시작하는 경우 로그인하라는 메시지가 표시됩니다.When you start Visual Studio for the first time, you'll be prompted to sign in. 이 단계는 이 연습에 대한 옵션입니다.This step is optional for this walkthrough. 다음으로 개발 설정과 색 테마를 선택하라는 대화 상자가 표시될 수 있습니다.Next you may be shown a dialog box that asks you to choose your development settings and color theme. 기본값을 유지하고 Visual Studio 시작을 선택합니다.Keep the defaults and choose Start Visual Studio.

설정 선택 대화 상자Choose settings dialog box

Visual Studio를 시작하면 도구 창, 메뉴 및 도구 모음, 주 창 공간이 표시됩니다.After Visual Studio launches, you'll see tool windows, the menus and toolbars, and the main window space. 빠른 실행, 메뉴 모음 및 상단의 표준 도구 모음이 포함된 도구 창은 응용 프로그램 창 왼쪽과 오른쪽에 도킹되어 있습니다.Tool windows are docked on the left and right sides of the application window, with Quick Launch, the menu bar, and the standard toolbar at the top. 응용 프로그램 창의 가운데에 시작 페이지가 있습니다.In the center of the application window is the Start Page. 솔루션이나 프로젝트를 로드하는 경우 편집기 및 디자이너가 시작 페이지 가 있는 공간에 나타납니다.When you load a solution or project, editors and designers appear in the space where the Start Page is. 응용 프로그램을 개발할 때 이 중앙 영역에서 대부분의 시간을 보냅니다.When you develop an application, you'll spend most of your time in this central area.

일반 설정이 적용된 IDEIDE with General Settings Applied

간단한 응용 프로그램 만들기Create a simple application

프로젝트를 만듭니다.Create the project

Visual Studio에서 응용 프로그램을 만들 때 먼저 프로젝트와 솔루션을 만들어야 합니다.When you create an application in Visual Studio, you first create a project and a solution. 이 예제에서는 WPF(Windows Presentation Foundation) 프로젝트를 만듭니다.For this example, you'll create a Windows Presentation Foundation (WPF) project.

WPF 프로젝트를 만들려면To create the WPF project

  1. 새 프로젝트를 만듭니다.Create a new project. 메뉴 모음에서 파일, 새로 만들기, 프로젝트...를 차례로 선택합니다.On the menu bar, choose File, New, Project....

    메뉴 모음에서 파일, 새로 만들기, 프로젝트를 차례로 선택합니다.On the menu bar, choose File, New, Project

  2. 예를 들어 왼쪽 창에서 설치됨, Visual C#, Windows Classic Desktop을 차례로 선택한 다음 가운데 창에서 WPF 앱(.NET Framework)을 선택하여 Visual Basic 또는 Visual C# WPF 앱 템플릿을 선택합니다.Choose the Visual Basic or the Visual C# WPF App template by choosing in the left pane Installed, Visual C#, Windows Classic Desktop, for example, and then choosing WPF App (.NET Framework) in the middle pane. 새 프로젝트 대화 상자 아래쪽의 프로젝트 이름을 HelloWPFApp으로 지정합니다.Name the project HelloWPFApp at the bottom of the New Project dialog.

    C# WPF 프로젝트, HelloWPFApp 만들기Create a C# WPF Project, HelloWPFApp

    HelloWPFApp 프로젝트 및 솔루션이 만들어지고 솔루션 탐색기 에 다양한 파일이 표시됩니다.Visual Studio creates the HelloWPFApp project and solution, and Solution Explorer shows the various files. WPF Designer는 분할 뷰에 디자인 뷰와 MainWindow.xaml의 XAML 뷰를 표시합니다.The WPF Designer shows a design view and a XAML view of MainWindow.xaml in a split view. 분할자를 밀어 뷰를 더 많이 표시하거나 더 적게 표시할 수 있습니다.You can slide the splitter to show more or less of either view. 시각적 뷰만 표시하거나 XAML 뷰만 표시하도록 선택할 수 있습니다.You can choose to see only the visual view or only the XAML view. (자세한 내용은 Windows Forms 개발자용 WPF 디자이너를 참조하세요.) 다음 항목이 솔루션 탐색기에 나타납니다.(For more information, see WPF Designer for Windows Forms Developers.) The following items appear in Solution Explorer:

    HelloWPFApp 파일이 로드된 솔루션 탐색기Solution Explorer with HelloWPFApp files loaded

    프로젝트를 만든 후 사용자 지정할 수 있습니다.After you create the project, you can customize it. 보기 메뉴에 있는 속성 창을 사용하여 프로젝트 항목, 컨트롤 및 응용 프로그램의 기타 항목에 대한 옵션을 표시하고 변경할 수 있습니다.By using the Properties window (found on the View menu), you can display and change options for project items, controls, and other items in an application.

MainWindow.xaml의 이름을 변경하려면To change the name of MainWindow.xaml

MainWindow에 보다 구체적인 이름을 지정하겠습니다.Let's give MainWindow a more specific name.

  1. 솔루션 탐색기에서 MainWindow.xaml을 선택합니다.In Solution Explorer, select MainWindow.xaml. 속성 창이 표시되어야 하지만 표시되지 않는 경우 보기 메뉴 및 속성 창 항목을 선택합니다.You should see the Properties window, but if you don't, choose the View menu and then the Properties Window item.
  2. 파일 이름 속성을 Greetings.xaml로 변경합니다.Change the File Name property to Greetings.xaml.

    파일 이름이 강조 표시된 속성 창Properties window with File Name highlighted

    이제 솔루션 탐색기에 파일 이름이 Greetings.xaml로, 중첩된 코드 파일이 Greetings.xaml.vb 또는 Greetings.xaml.cs로 표시됩니다.Solution Explorer shows that the name of the file is now Greetings.xaml, and the nested code file is now named Greetings.xaml.vb or Greetings.xaml.cs. 이 코드 파일은 .xaml 파일과 서로 밀접하게 관련되어 있음을 나타내기 위해 이 파일 노드 아래에 중첩됩니다.This code file is nested under the .xaml file node to show they are closely related to each other.

사용자 인터페이스(UI) 디자인Design the user interface (UI)

이 응용 프로그램에 TextBlock 컨트롤 1개, RadioButton 컨트롤 2개 및 Button 컨트롤 1개 등 세 가지 유형의 컨트롤을 추가합니다.We will add three types of controls to this application: a TextBlock control, two RadioButton controls, and a Button control.

TextBlock 컨트롤을 추가하려면To add a TextBlock control

  1. 보기 메뉴 및 도구 상자 항목을 선택하여 도구 상자 창을 엽니다.Open the Toolbox window by choosing the View menu and the Toolbox item.

  2. 도구 상자에서 공용 WPF 컨트롤 노드를 확장하여 TextBlock 컨트롤을 봅니다.In the Toolbox, expand the Common WPF Controls node to see the TextBlock control.

    TextBlock 컨트롤이 강조 표시된 도구 상자Toolbox with the TextBlock control highlighted

  3. TextBlock 항목을 선택한 후 디자인 화면의 창으로 끌어와서 디자인 화면에 TextBlock 컨트롤을 추가합니다.Add a TextBlock control to the design surface by choosing the TextBlock item and dragging it to the window on the design surface. 컨트롤을 창 상단의 가운데에 배치합니다.Center the control near the top of the window.

    해당 창은 다음 그림과 유사합니다.Your window should resemble the following illustration:

    Greetings 양식의 TextBlock 컨트롤TextBlock control on the Greetings form

    XAML 태그는 다음과 유사합니다.The XAML markup should look something like the following:

    <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>  
    

텍스트 블록의 텍스트를 사용자 지정하려면To customize the text in the text block

  1. XAML 뷰에서 TextBlock의 태그를 찾아 Text 특성을 다음과 같이 변경합니다.In the XAML view, locate the markup for TextBlock and change the Text attribute:

    Text="Select a message option and then choose the Display button."
    
  2. 필요한 경우 TextBlock의 가운데를 다시 맞추고 Ctrl-S를 누르거나 파일 메뉴 항목을 사용하여 변경 내용을 저장합니다.Re-center the TextBlock if necessary, and save your changes by pressing Ctrl-s or using the File menu item.

다음에는 RadioButton 컨트롤 두 개를 폼에 추가합니다.Next, you'll add two RadioButton controls to the form.

라디오 단추를 추가하려면To add radio buttons

  1. 도구 상자에서 RadioButton 컨트롤을 찾습니다.In the Toolbox, find the RadioButton control.

    RadioButton 컨트롤이 선택된 도구 상자 창Toolbox window with RadioButton control selected

  2. RadioButton 항목을 선택한 후 디자인 화면의 창으로 끌어와서 디자인 화면에 두 개의 RadioButton 컨트롤을 추가합니다.Add two RadioButton controls to the design surface by choosing the RadioButton item and dragging it to the window on the design surface. 단추가 TextBlock 컨트롤 아래에 함께 표시되도록 단추를 이동합니다(선택하고 화살표 키를 사용하여).Move the buttons (by selecting them and using the arrow keys) so that the buttons appear side by side under the TextBlock control.

    창이 다음과 같이 나타납니다.Your window should look like this:

    TextBlock과 두 개의 라디오 단추가 있는 Greetings 양식Greetings form with textblock and two radiobuttons

  3. 왼쪽 RadioButton 컨트롤의 속성 창에서 속성 창 맨 위에 있는 속성인 Name 속성을 HelloButton으로 변경합니다.In the Properties window for the left RadioButton control, change the Name property (the property at the top of the Properties window) to HelloButton.

    RadioButton 속성 창RadioButton properties window

  4. 오른쪽 RadioButton 컨트롤의 속성 창에서 Name 속성을 GoodbyeButton으로 변경한 다음 변경 내용을 저장합니다.In the Properties window for the right RadioButton control, change the Name property to GoodbyeButton, and then save your changes.

이제 각 RadioButton 컨트롤에 대한 표시 텍스트를 추가할 수 있습니다.You can now add display text for each RadioButton control. 다음 절차는 RadioButton 컨트롤에 대한 Content 속성을 업데이트합니다.The following procedure updates the Content property for a RadioButton control.

각 라디오 단추에 표시할 텍스트를 추가하려면To add display text for each radio button

  1. 디자인 화면에서 마우스 오른쪽 단추로 HelloButton을 눌러 HelloButton의 바로 가기 메뉴를 열고 텍스트 편집을 선택한 후 'Hello'를 입력합니다.On the design surface, open the shortcut menu for HelloButton by pressing the right mouse button on HelloButton, choose Edit Text, and then enter 'Hello'.

  2. 마우스 오른쪽 단추로 GoodbyeButton을 눌러 GoodbyeButton의 바로 가기 메뉴를 열고 텍스트 편집을 선택한 후 'Goodbye'를 입력합니다.Open the shortcut menu for GoodbyeButton by pressing the right mouse button on GoodbyeButton, choose Edit Text, and then enter 'Goodbye'.

라디오 단추가 기본적으로 선택되도록 설정하려면To set a radio button to be checked by default

이 단계에서는 두 개의 라디오 단추 중 하나가 항상 선택되도록 기본적으로 HelloButton이 선택되도록 설정합니다.In this step we'll set HelloButton to be checked by default so that one of the two radio buttons is always selected.

XAML 뷰에서 HelloButton에 대한 표시를 찾고 IsChecked 특성을 추가합니다.In the XAML view, locate the markup for HelloButton and add an IsChecked attribute:

IsChecked="True"

추가할 마지막 UI 요소는 Button 컨트롤입니다.The final UI element that you'll add is a Button control.

단추 컨트롤을 추가하려면To add the button control

  1. 도구 상자에서 Button 컨트롤을 찾은 다음 디자인 뷰의 폼으로 끌어와 RadioButton 컨트롤 아래의 디자인 화면에 추가합니다.In the Toolbox, find the Button control, and then add it to the design surface under the RadioButton controls by dragging it to the form in the design view.

  2. XAML 뷰에서 Button 컨트롤의 Content 값을 Content="Button" 에서 Content="Display"로 변경한 다음 변경 내용을 저장합니다.In the XAML view, change the value of Content for the Button control from Content="Button" to Content="Display", and then save the changes.

    태그는 다음 예제와 유사합니다.The markup should resemble the following example:
    <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

    해당 창은 다음 그림과 유사합니다.Your window should resemble the following illustration.

    컨트롤 레이블이 있는 Greetings 양식Greetings form with control labels

표시 버튼에 코드 추가Add code to the Display Button

이 응용 프로그램을 실행하면 사용자가 라디오 단추를 선택한 다음 표시 단추를 선택하면 메시지 상자가 나타납니다.When this application runs, a message box appears after a user chooses a radio button and then chooses the Display button. Hello에 대한 메시지 상자가 하나 나타나고 Goodbye에 대한 메시지 상자가 하나 나타납니다.One message box will appear for Hello, and another will appear for Goodbye. 이 동작을 만들려면 Greetings.xaml.vb 또는 Greetings.xaml.cs에서 Button_Click 이벤트에 코드를 추가합니다.To create this behavior, you'll add code to the Button_Click event in Greetings.xaml.vb or Greetings.xaml.cs.

메시지 상자를 표시하는 코드를 추가합니다.Add code to display message boxes

  1. 디자인 화면에서 표시 단추를 두 번 클릭합니다.On the design surface, double-click the Display button.

    Greetings.xaml.vb 또는 Greetings.xaml.cs는 Button_Click 이벤트에 커서가 있는 상태에서 열립니다.Greetings.xaml.vb or Greetings.xaml.cs opens, with the cursor in the Button_Click event.

    Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)  
    
    End Sub  
    
    private void Button_Click_1(object sender, RoutedEventArgs e)  
    {  
    
    }  
    
  2. 다음 코드를 입력합니다.Enter the following code:

    If HelloButton.IsChecked = True Then  
        MessageBox.Show("Hello.")  
    ElseIf GoodbyeButton.IsChecked = True Then 
        MessageBox.Show("Goodbye.")  
    End If  
    
    if (HelloButton.IsChecked == true)
    {
         MessageBox.Show("Hello.");
    }
    else if (GoodbyeButton.IsChecked == true)
    {
        MessageBox.Show("Goodbye.");
    }
    
  3. 응용 프로그램을 저장합니다.Save the application.

응용 프로그램 디버깅 및 테스트Debug and test the application

그런 다음 응용 프로그램을 디버그하여 오류를 검색하고 두 메시지 상자가 모두 제대로 나타나는지 테스트합니다.Next, you'll debug the application to look for errors and test that both message boxes appear correctly. 다음 지침에서는 디버거를 빌드하고 시작하는 방법을 설명하지만 나중에 WPF 응용 프로그램 빌드(WPF)WPF 디버그에서 추가 정보를 확인할 수 있습니다.The following instructions tell you how to build and launch the debugger, but later you might read Building a WPF Application (WPF) and Debugging WPF for more information.

오류 찾기 및 수정Find and fix errors

이 단계에서는 이전에 MainWindow.xaml 파일의 이름을 변경해서 발생시킨 오류를 찾습니다.In this step, you'll find the error that we caused earlier by changing the name of the MainWindow.xaml file.

디버깅을 시작하고 오류를 찾으려면To start debugging and find the error

  1. 디버그를 선택한 다음 디버깅 시작을 선택하여 디버거를 시작합니다.Start the debugger by selecting Debug, then Start Debugging.

    디버그 메뉴의 디버깅 시작 명령Start Debugging command on the Debug menu

    중단 모드 창이 나타나고 출력 창이 IOException이 발생했음을 나타냅니다. 리소스 'mainwindow.xaml'을 찾을 수 없습니다.A Break Mode window appears, and the Output window indicates that an IOException has occurred: Cannot locate resource 'mainwindow.xaml'.

  2. 디버그, 디버깅 중지를 선택하여 디버거를 중지합니다.Stop the debugger by choosing Debug, Stop Debugging.

    디버그 메뉴의 디버깅 중지 명령Stop Debugging command on the Debug menu

    이 연습을 시작할 때 MainWindow.xaml의 이름을 Greetings.xaml로 바꾸었지만 코드가 여전히 응용 프로그램의 시작 URI로 mainwindow.xaml을 나타내고 있으므로 프로젝트를 시작할 수 없습니다.We renamed MainWindow.xaml to Greetings.xaml at the start of this walkthrough, but the code still refers to mainwindow.xaml as the startup URI for the application, so the project can't start.

Greetings.xaml을 시작 URI로 지정하려면To specify Greetings.xaml as the startup URI

  1. 솔루션 탐색기에서 App.xaml 파일(C# 프로젝트의 경우) 또는 Application.xaml 파일(Visual Basic 프로젝트의 경우)을 엽니다.In Solution Explorer, open the App.xaml file (in the C# project) or the Application.xaml file (in the Visual Basic project).

  2. StartupUri="MainWindow.xaml"StartupUri="Greetings.xaml"로 변경한 다음 변경 내용을 저장합니다.Change StartupUri="MainWindow.xaml" to StartupUri="Greetings.xaml", and then save the changes.

F5 키를 눌러 디버거를 다시 시작합니다.Start the debugger again (press F5). 응용 프로그램의 Greetings 창이 표시됩니다.You should see the Greetings window of the application. 이제 응용 프로그램 창을 닫아 디버깅을 중지합니다.Now close the application window to stop debugging.

중단점으로 디버깅하려면To debug with breakpoints

일부 중단점을 추가하여 디버깅하는 동안 코드를 테스트할 수 있습니다.You can test the code during debugging by adding some breakpoints. 디버그, 중단점 설정/해제를 선택하거나 중단시킬 코드 줄 옆의 편집기 왼쪽 여백을 클릭하거나 F9 키를 눌러 중단점을 추가할 수 있습니다.You can add breakpoints by choosing Debug, Toggle Breakpoint, by clicking in the left margin of the editor next to the line of code where you want the break to occur, or by pressing F9.

중단점을 추가하려면To add breakpoints

  1. Greetings.xaml.vb 또는 Greetings.xaml.cs를 열고 다음 줄을 선택합니다. MessageBox.Show("Hello.")Open Greetings.xaml.vb or Greetings.xaml.cs, and select the following line: MessageBox.Show("Hello.")

  2. 메뉴에서 디버그를 선택한 다음 중단점 설정/해제를 선택하여 중단점을 추가합니다.Add a breakpoint from the menu by selecting Debug, then Toggle Breakpoint.

    디버그 메뉴의 중단점 설정/해제 명령Toggle Breakpoint command on the Debug menu

    편집기 창의 맨 왼쪽 여백 코드 줄 옆에 빨간색 원이 나타납니다.A red circle appears next to the line of code in the far left margin of the editor window.

  3. MessageBox.Show("Goodbye.")줄을 선택합니다.Select the following line: MessageBox.Show("Goodbye.").

  4. F9 키를 눌러 중단점을 추가한 다음 F5 키를 눌러 디버깅을 시작합니다.Press the F9 key to add a breakpoint, and then press F5 to start debugging.

  5. Greetings 창에서 Hello 라디오 단추를 선택한 다음 표시 단추를 선택합니다.In the Greetings window, choose the Hello radio button, and then choose the Display button.

    MessageBox.Show("Hello.") 줄이 노란색으로 강조 표시됩니다.The line MessageBox.Show("Hello.") is highlighted in yellow. IDE 하단에 있는 자동, 로컬 및 조사식 창은 모두 왼쪽에 도킹되고 호출 스택, 중단점, 명령, 직접 실행 및 출력 창은 모두 오른쪽에 도킹됩니다.At the bottom of the IDE, the Autos, Locals, and Watch windows are docked together on the left side, and the Call Stack, Breakpoints, Command, Immediate, and Output windows are docked together on the right side.

  6. 메뉴 모음에서 디버그, 프로시저 나가기를 선택합니다.On the menu bar, choose Debug, Step Out.

    응용 프로그램은 실행을 다시 시작하고 “Hello”라는 단어가 포함된 메시지 상자가 나타납니다.The application resumes execution, and a message box with the word "Hello" appears.

  7. 메시지 상자에서 확인 단추를 선택하여 닫습니다.Choose the OK button on the message box to close it.

  8. Greetings 창에서 Goodbye 라디오 단추를 선택한 다음 표시 단추를 선택합니다.In the Greetings window, choose the Goodbye radio button, and then choose the Display button.

    MessageBox.Show("Goodbye.") 줄이 노란색으로 강조 표시됩니다.The line MessageBox.Show("Goodbye.") is highlighted in yellow.

  9. F5 키를 선택하여 계속 디버깅합니다.Choose the F5 key to continue debugging. 메시지 상자가 나타나면 메시지 상자에서 확인 단추를 선택하여 닫습니다.When the message box appears, choose the OK button on the message box to close it.

  10. 응용 프로그램 창을 닫아 디버깅을 중지합니다.Close the application window to stop debugging.

  11. 메뉴 모음에서 디버그, 모든 중단점 해제를 선택합니다.On the menu bar, choose Debug, Disable All Breakpoints.

응용 프로그램 릴리스 버전 빌드Build a release version of the application

모든 것이 작동하는 것을 확인했으므로 응용 프로그램의 릴리스 빌드를 준비할 수 있습니다.Now that you've verified that everything works, you can prepare a release build of the application.

솔루션 파일을 정리하고 릴리스 버전을 빌드하려면To clean the solution files and build a release version

  1. 기본 메뉴에서 빌드를 선택하고 솔루션 정리를 선택하여 이전 빌드 과정에서 만들어진 중간 파일과 출력 파일을 삭제합니다.On the main menu, select Build, Clean solution to delete intermediate files and output files that were created during previous builds. 꼭 필요한 작업은 아니지만 이 과정을 통해 디버그 빌드 출력이 정리됩니다.This is not necessary, but it cleans up the debug build outputs.

    빌드 메뉴의 솔루션 정리 명령The Clean Solution command on the Build menu

  2. 도구 모음에서 드롭다운 컨트롤(현재 “디버그”로 표시)을 사용하여 HelloWPFApp의 빌드 구성을 디버그에서 릴리스로 변경합니다.Change the build configuration for HelloWPFApp from Debug to Release by using the dropdown control on the toolbar (it says "Debug" currently).

    릴리스가 선택된 표준 도구 모음The Standard toolbar with Release selected

  3. 빌드를 선택한 다음 솔루션 빌드를 선택하여 솔루션을 빌드합니다.Build the solution by choosing Build, then Build Solution.

    빌드 메뉴의 솔루션 빌드 명령Build Solution command on the Build menu

이 연습을 완료한 것을 축하 드립니다!Congratulations on completing this walkthrough! 솔루션 및 프로젝트 디렉터리(...\HelloWPFApp\HelloWPFApp\bin\Release\)에서 빌드한 .exe를 찾을 수 있습니다.You can find the .exe you built under your solution and project directory (...\HelloWPFApp\HelloWPFApp\bin\Release\). 더 많은 예제를 탐색하려는 경우 Visual Studio 샘플을 참조하세요.If you want to explore more examples, see Visual Studio Samples.

참고 항목See Also

Visual Studio 2017의 새로운 기능 What's New in Visual Studio 2017
Visual Studio에서 개발 시작 Get Started Developing with Visual Studio
생산성 팁Productivity Tips