자습서: Visual Studio의 사진 뷰어 Windows Forms 앱 만들기

아티클
06/19/2023

세 가지 자습서로 구성된 이 시리즈에서는 사진을 로드하고 표시하는 Windows Forms 애플리케이션을 만듭니다. Visual Studio IDE(통합 디자인 환경)는 앱을 만드는 데 필요한 도구를 제공합니다. 자세한 내용은 Visual Studio IDE 시작을 참조하세요.

이 첫 번째 자습서에서는 다음 작업을 수행하는 방법을 알아봅니다.

Windows Forms를 사용하는 Visual Studio 프로젝트 만들기
레이아웃 요소 추가
애플리케이션 실행

필수 조건

이 자습서를 완료하려면 Visual Studio가 필요합니다. 무료 버전은 Visual Studio 다운로드 페이지를 방문하세요.

Windows Forms 프로젝트 만들기

사진 뷰어를 만드는 첫 번째 단계는 Windows Forms 앱 프로젝트를 만드는 것입니다.

Visual Studio를 엽니다.
시작 창에서 새 프로젝트 만들기를 선택합니다.
새 프로젝트 만들기 창에서 Windows Forms를 검색합니다. 그런 다음, 프로젝트 형식 목록에서 데스크톱을 선택합니다.
C# 또는 Visual Basic의 Windows Forms 앱(.NET Framework) 템플릿을 선택하고 다음을 선택합니다.

참고 항목

Windows Forms 앱(.NET Framework) 템플릿이 표시되지 않는 경우 새 프로젝트를 만들기 창에서 설치할 수 있습니다. 원하는 항목을 찾을 수 없나요? 메시지에서 추가 도구 및 기능 설치 링크를 선택합니다.

그런 다음, Visual Studio 설치 관리자에서 .NET 데스크톱 개발을 선택합니다.

Visual Studio 설치 관리자에서 수정을 선택합니다. 작업을 저장하라는 메시지가 표시될 수 있습니다. 다음으로, 계속을 선택하여 워크로드를 설치합니다.
새 프로젝트 구성 창에서 프로젝트 이름을 PictureViewer로 지정한 다음, 만들기를 선택합니다.

Visual Studio를 엽니다.
시작 창에서 새 프로젝트 만들기를 선택합니다.
새 프로젝트 만들기 창에서 Windows Forms를 검색합니다. 그런 다음, 프로젝트 형식 목록에서 데스크톱을 선택합니다.
C# 또는 Visual Basic의 Windows Forms 앱(.NET Framework) 템플릿을 선택하고 다음을 선택합니다.

참고 항목

Windows Forms 앱(.NET Framework) 템플릿이 표시되지 않는 경우 새 프로젝트를 만들기 창에서 설치할 수 있습니다. 원하는 항목을 찾을 수 없나요? 메시지에서 추가 도구 및 기능 설치 링크를 선택합니다.

그런 다음, Visual Studio 설치 관리자에서 .NET 데스크톱 개발을 선택합니다.

Visual Studio 설치 관리자에서 수정을 선택합니다. 작업을 저장하라는 메시지가 표시될 수 있습니다. 다음으로, 계속을 선택하여 워크로드를 설치합니다.
새 프로젝트 구성 창에서 프로젝트 이름을 PictureViewer로 지정한 다음, 만들기를 선택합니다.

Visual Studio에서 앱의 솔루션이 생성됩니다. 솔루션은 앱에 필요한 모든 프로젝트 및 파일의 컨테이너입니다.

이 시점에서 Visual Studio는 Windows Forms 디자이너에 빈 폼을 표시합니다.

레이아웃 요소 추가

사진 보기 앱에는 사진 상자, 확인란, 그리고 다음 자습서에서 추가할 4개의 단추가 포함되어 있습니다. 레이아웃 요소는 폼에서 각각의 위치를 제어합니다. 이 섹션에서는 폼의 제목을 변경하고, 폼의 크기를 조정하며, 레이아웃 요소를 추가하는 방법을 보여 줍니다.

프로젝트에서 Windows Forms 디자이너를 선택합니다. 해당 탭은 C#의 경우 Form1.cs [Design]을 읽고 Visual Basic의 경우 Form1.vb [Design]을 읽습니다.
Form1의 아무 곳이나 선택합니다.
속성 창에는 이제 폼 속성이 표시됩니다. 속성 창은 일반적으로 Visual Studio의 오른쪽 아래에 있습니다. 이 섹션에서는 전경색 및 배경색, 폼 상단에 표시되는 제목 텍스트, 폼 크기와 같은 다양한 속성을 제어합니다.

속성이 표시되지 않으면 보기>속성 창을 선택합니다.
속성 창에서 Text 속성을 찾습니다. 목록을 정렬 방법에 따라 아래로 스크롤해야 할 수도 있습니다. 그림 뷰어 값을 입력한 다음 Enter 키를 선택합니다.

이제 폼의 제목 표시줄에 사진 뷰어라는 텍스트가 표시됩니다.

참고 항목

범주별로 또는 사전순으로 속성을 표시할 수 있습니다. 속성 창의 단추를 사용하여 앞뒤로 전환합니다.
폼을 다시 선택합니다. 폼의 오른쪽 아래에서 끌기 핸들을 선택합니다. 이 핸들은 폼의 오른쪽 아래 모서리에 있는 작은 흰색 사각형입니다.

핸들을 끌어 폼의 너비와 높이를 늘립니다. 속성 창을 살펴보면 Size 속성이 변경되었음을 알 수 있습니다. Size 속성을 변경하여 폼의 크기를 변경할 수도 있습니다.
Visual Studio IDE의 왼쪽에서 도구 상자 탭을 선택합니다. 이 탭이 표시되지 않으면 메뉴 모음에서 보기>도구 상자를 선택하거나 Ctrl+Alt+X를 선택합니다.
컨테이너 옆에 있는 작은 삼각형 기호를 선택하여 그룹을 엽니다.
도구 상자에서 TableLayoutPanel을 두 번 클릭합니다. 도구 상자에서 폼으로 컨트롤을 끌 수도 있습니다. TableLayoutPanel 컨트롤이 폼에 표시됩니다.

참고 항목

TableLayoutPanel을 추가한 후 제목이 TableLayoutPanel Tasks인 창이 폼 안에 표시되면 폼 안쪽 아무 곳이나 클릭하여 폼을 닫습니다.
TableLayoutPanel을 선택합니다. 선택한 컨트롤을 속성 창에서 확인할 수 있습니다.
TableLayoutPanel을 선택한 상태에서 값이 None인 Dock 속성을 찾습니다. 드롭다운 화살표를 선택한 다음, 드롭다운 메뉴 중간에 있는 큰 단추인 채우기를 선택합니다.

도킹 은 창이 다른 창이나 영역에 연결되는 방식을 나타냅니다.

이제 TableLayoutPanel이 전체 폼을 채웁니다. 폼의 크기를 다시 조정하면 TableLayoutPanel은 도킹된 상태를 유지한 채 폼의 크기에 맞게 자동으로 크기가 조정됩니다.
폼에서 TableLayoutPanel을 선택합니다. 오른쪽 위 모서리에는 작은 검은색 삼각형 단추가 있습니다.

삼각형을 선택하여 컨트롤의 작업 목록을 표시합니다.
행 및 열 편집을 선택하여 열 및 행 스타일 대화 상자를 표시합니다.
Column1을 선택하고 크기를 15%로 설정합니다. 백분율 단추가 선택되어 있는지 확인합니다.
Column2를 선택하고 크기를 85%로 설정합니다.
열 및 행 스타일 대화 상자의 상단에 있는 표시에서 행을 선택합니다. Row1을 90%로 설정하고 Row2를 10%로 설정합니다. 확인을 선택하여 변경 내용을 저장합니다.

이제 TableLayoutPanel에는 큰 위쪽 행, 작은 아래쪽 행, 작은 왼쪽 열, 큰 오른쪽 열이 있습니다.

레이아웃이 완료되었습니다.

참고 항목

애플리케이션을 실행하기 전에 모두 저장 도구 모음 단추를 선택하여 앱을 저장합니다. 또는 앱을 저장하려면 메뉴 모음에서 파일>모두 저장을 선택하거나 Ctrl+Shift+S를 누릅니다. 프로그램은 초기에 자주 저장하는 것이 좋습니다.

앱을 실행합니다.

Windows Forms 앱 프로젝트를 만들 때 실행 프로그램을 빌드합니다. 이 단계에서는 사진 뷰어 앱이 많은 작업을 수행하지 않습니다. 지금은 제목 표시줄에 사진 뷰어가 있는 빈 창을 표시합니다.

앱을 실행하려면 다음 단계를 수행합니다.

다음 방법 중 하나를 사용하십시오.
- F5 키를 선택합니다.
- 메뉴 모음에서 디버그>디버깅 시작을 선택합니다.
- 도구 모음에서 시작 단추를 선택합니다.
Visual Studio에서 앱이 실행됩니다. 제목이 사진 뷰어인 창이 표시됩니다.

Visual Studio IDE 도구 모음을 살펴봅니다. 애플리케이션을 실행하면 더 많은 단추가 도구 모음에 표시됩니다. 이러한 단추를 사용하면 앱 중지 및 시작과 같은 작업을 수행할 수 있으며 모든 오류를 추적할 수 있습니다.
다음 메서드 중 하나를 사용해서 앱을 중지합니다.
- 도구 모음에서 디버깅 중지 단추를 선택합니다.
- 메뉴 모음에서 디버그>디버깅 중지를선택합니다.
- 키보드에서 Shift+F5를 입력합니다.
- 사진 뷰어 창의 위쪽 모서리에 있는 X를 선택합니다.
Visual Studio IDE 내에서 앱을 실행하면 디버깅이라고 합니다. 애플리케이션을 실행하여 버그를 찾고 수정합니다. 다른 프로그램도 동일한 절차에 따라 실행하고 디버깅합니다. 디버깅에 대한 자세한 내용은 디버거 소개를 참조하세요.

다음 단계

다음 자습서로 이동하여 사진 뷰어 프로그램에 컨트롤을 추가하는 방법을 알아봅니다.

자습서 2부: 사진 뷰어에 컨트롤 추가