자습서: 수학 퀴즈 WinForms 앱 만들기

2025-06-12

이 4개의 자습서 시리즈에서는 수학 퀴즈를 작성합니다. 퀴즈에는 퀴즈 응시자에서 지정된 시간 내에 대답하려고 시도하는 네 가지 임의 수학 문제가 포함되어 있습니다.

Visual Studio IDE(통합 개발 환경)는 앱을 만드는 데 필요한 도구를 제공합니다. 이 IDE에 대한 자세한 내용은 Visual Studio IDE에 오신 것을 환영합니다을 참조하세요.

이 첫 번째 자습서에서는 다음 방법을 알아봅니다.

Windows Forms를 사용하는 Visual Studio 프로젝트를 만듭니다.
폼에 레이블, 단추 및 기타 컨트롤을 추가합니다.
컨트롤에 대한 속성을 설정합니다.
프로젝트를 저장하고 실행합니다.

필수 구성 요소

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

메모

이 자습서에는 Windows Forms 앱(.NET Framework) 프로젝트 템플릿이 필요합니다. 설치하는 동안 .NET 데스크톱 개발 워크로드를 선택합니다.

$Visual Studio 설치 관리자에서 닷넷 데스크톱 개발 워크로드를 보여주는 화면 캡처$

Visual Studio가 이미 설치되어 있고 추가해야 하는 경우 메뉴에서 도구>도구 및 기능 가져오기선택하거나 새 프로젝트 만들기 창에서 추가 도구 및 기능 설치 링크를 선택합니다.

$새 프로젝트 만들기 대화 상자에서 원하는 메시지를 찾을 수 없음의 추가 도구 및 기능 설치 링크를 보여 주는 스크린샷$

Windows Forms 프로젝트 만들기

수학 퀴즈를 만들 때 첫 번째 단계는 Windows Forms 앱 프로젝트를 만드는 것입니다.

Visual Studio를 엽니다.
시작 창에서 새 프로젝트 만들기선택합니다.

Visual Studio 시작 창에서 새 프로젝트 만들기 옵션을 보여 주는 $스크린샷$
새 프로젝트 만들기 창에서 Windows Forms을 검색합니다. 그런 다음, Project 유형 목록에서 Desktop 선택합니다.
C# 또는 Visual Basic에 대한 Windows Forms 앱(.NET Framework) 템플릿을 선택한 다음, 다음 선택합니다.

$검색 상자, 프로젝트 유형 목록 및 두 개의 템플릿이 호출된 새 프로젝트 만들기 대화 상자를 보여 주는 스크린샷$
새 프로젝트 구성 창에서 프로젝트 이름을 MathQuiz로 지정한 다음, 만들기를 선택합니다.

Visual Studio를 엽니다.
시작 창에서 새 프로젝트 만들기선택합니다.

Visual Studio 시작 창에서 새 프로젝트 만들기 옵션을 보여 주는 $스크린샷$
새 프로젝트 만들기 창에서 Windows Forms을 검색합니다. 그런 다음, Project 유형 목록에서 Desktop 선택합니다.
C# 또는 Visual Basic에 대한 Windows Forms 앱(.NET Framework) 템플릿을 선택한 다음, 다음 선택합니다.

$검색 상자, 프로젝트 유형 목록 및 두 개의 템플릿이 호출된 새 프로젝트 만들기 대화 상자를 보여 주는 스크린샷$
새 프로젝트 구성 창에서 프로젝트 이름을 MathQuiz으로 지정하고, 만들기를 선택합니다.

Visual Studio는 앱에 대한 솔루션을 만듭니다. 솔루션은 앱에 필요한 모든 프로젝트 및 파일에 대한 컨테이너입니다.

양식 속성 설정

템플릿을 선택하고 파일 이름을 지정하면 Visual Studio에서 양식이 열립니다. 이 섹션에서는 일부 양식 속성을 변경하는 방법을 보여줍니다.

프로젝트에서 Windows Forms 디자이너을 선택합니다. 디자이너 탭은 C#의 경우 Form1.cs [디자인]으로, Visual Basic의 경우 Form1.vb [디자인]으로 레이블이 지정됩니다.
폼 Form1을 선택하세요.
이제 속성 창에 양식의 속성이 표시됩니다. 이 창은 일반적으로 Visual Studio의 오른쪽 아래 모서리에 있습니다. 속성표시되지 않으면 보기>속성 창선택합니다.
속성 창에서 Text 속성을 찾습니다. 목록을 정렬하는 방법에 따라 아래로 스크롤해야 할 수 있습니다. 텍스트 필드에 수학 퀴즈 값을 입력한 다음 입력을 선택합니다.

이제 양식의 제목 표시줄에 텍스트 "수학 퀴즈"가 있습니다.

메모

범주별로 또는 사전순으로 속성을 표시할 수 있습니다. 속성 창의 단추를 사용하여 앞뒤로 전환합니다.
폼의 크기를 너비 500픽셀 x 400픽셀 높이로 변경합니다.

속성 창에서 올바른 크기가 크기 값으로 나타날 때까지 가장자리를 끌거나 핸들을 끌어 폼의 크기를 조정할 수 있습니다. 드래그 핸들은 폼의 오른쪽 아래 모서리에 있는 작은 흰색 사각형입니다. Size 속성의 값을 변경하여 폼의 크기를 조정할 수도 있습니다.
FormBorderStyle 속성의 값을 Fixed3D로 변경하고, MaximizeBox 속성을 False로 설정합니다.

이러한 값을 사용하면 퀴즈를 수습하는 사용자가 양식의 크기를 조정할 수 없습니다.

남은 시간 박스 만들기

수학 퀴즈는 오른쪽 위 모서리에 있는 상자를 포함합니다. 이 상자에는 퀴즈에 남아 있는 시간(초)이 표시됩니다. 이 섹션에서는 해당 상자에 레이블을 사용하는 방법을 보여줍니다. 이 시리즈의 이후 자습서에서 카운트다운 타이머에 대한 코드를 추가합니다.

Visual Studio IDE의 왼쪽에서 도구 상자 탭을 선택합니다. 도구 상자가 표시되지 않으면 메뉴 모음에서 보기>도구 상자 선택하거나 Ctrl +Alt+X선택합니다.
도구 상자에서 Label 컨트롤을 선택한 다음, 폼으로 드래그합니다.
속성 상자에서 레이블에 대해 다음 속성을 설정합니다.
- (이름)을 timeLabel으로 설정합니다.
- 박스 크기를 조정할 수 있도록 자동 크기 조정을 False로 변경합니다.
- BorderStyle를 FixedSingle로 변경하여 상자 주위에 선을 그립니다.
- 크기200, 30설정합니다.
- Text 속성을 선택한 다음 백스페이스 키를 선택하여 Text 값을 지웁다.
- Font 속성 옆에 있는 더하기 기호(+)를 선택한 다음 Size15.75설정합니다.
레이블을 폼의 오른쪽 위 모서리로 이동합니다. 파란색 스페이서 선이 나타나면 폼에 컨트롤을 배치하는 데 사용합니다.
도구 상자에서 레이블 컨트롤을 하나 더 추가한 다음, 글꼴 크기를 15.75로 설정합니다.
이 레이블의 Text 속성을 Time Left설정합니다.
레이블을 timeLabel 레이블의 왼쪽에 정렬되도록 이동합니다.

$양식의 오른쪽 위 모서리에 있는 컨트롤 옆에 나란히 정렬된 '남은 시간' 및 '남은 시간 레이블'을 보여 주는 스크린샷$

추가 문제에 대한 컨트롤 추가

퀴즈의 첫 번째 부분은 추가 문제입니다. 이 섹션에서는 레이블을 사용하여 해당 문제를 표시하는 방법을 보여 줍니다.

양식에 레이블 컨트롤을 도구 상자에서 추가합니다.
속성 상자에서 레이블에 대해 다음 속성을 설정합니다.
- 텍스트을 로 설정하고,(물음표)로 바꿉니다.
- 자동 크기 조정 을(를) 거짓으로 설정합니다.
- 크기을(를) 60, 50로 설정하십시오.
- 글꼴 크기를 18설정합니다.
- TextAlign을 가운데 맞춤으로 설정합니다.
- 위치을 50, 75로 설정하여 컨트롤을 폼 위에 배치합니다.
- (이름)을 plusLeftLabel으로 설정합니다.
양식에서 만든 plusLeftLabel 레이블을 선택합니다. 라벨을 복사하려면 편집>복사 또는 Ctrl+C을 선택하십시오.
양식에 레이블을 세 번 붙여넣려면 편집 >붙여넣기 또는 Ctrl +V을 세 번 선택하십시오.
세 개의 새 레이블이 plusLeftLabel 레이블의 오른쪽에 행에 있도록 정렬합니다.
두 번째 레이블의 Text 속성을 +(더하기 기호)로 설정합니다.
세 번째 레이블의 (Name) 속성을 plusRightLabel설정합니다.
네 번째 레이블의 Text 속성을 =(등호)로 설정합니다.
도구 상자 폼에 NumericUpDown 컨트롤을 추가합니다. 나중에 이러한 종류의 컨트롤에 대해 자세히 알아봅니다.
속성 상자에서 NumericUpDown 컨트롤에 대해 다음 속성을 설정합니다.
- 글꼴 크기를 18설정합니다.
- MaximumSize아래에서 너비를 100으로 설정합니다.
- (이름)을 합계으로 설정합니다.
NumericUpDown 컨트롤을 덧셈 문제의 레이블 컨트롤과 정렬합니다.

$레이블이 표시되고 화살표 키가 0인 컨트롤이 있는 수학 퀴즈의 첫 번째 행을 보여 주는 스크린샷$

빼기, 곱하기 및 나누기 문제에 대한 컨트롤 추가

다음으로, 나머지 수학 문제에 대한 레이블을 양식에 추가합니다.

4개의 레이블 컨트롤과 추가 문제에 대해 만든 NumericUpDown 컨트롤을 복사합니다. 양식에 붙여넣습니다.
새 컨트롤을 추가 컨트롤 아래에 정렬하여 이동하세요.
속성 상자에서 새 컨트롤에 대해 다음 속성을 설정합니다.
- 첫 번째 물음표 레이블의 이름 을 minusLeftLabel로 설정하십시오.
- 두 번째 레이블의 Text을 -(빼기 기호)로 설정합니다.
- 두 번째 물음표 레이블의 (이름)을/를 minusRightLabel로 설정하십시오.
- NumericUpDown 컨트롤의 (이름)을 차이로 설정합니다.
더하기 컨트롤을 복사하여 폼에 두 번 더 붙여넣습니다.
세 번째 행의 경우:
- 첫 번째 물음표 레이블의 (이름)을(를) timesLeftLabel로 설정합니다.
- 두 번째 레이블의 Text을 ×(곱하기 기호)로 설정하세요. 이 자습서에서 곱하기 기호를 복사하여 양식에 붙여넣을 수 있습니다.
- 두 번째 물음표 레이블의 (이름)을 timesRightLabel로 설정합니다.
- NumericUpDown 컨트롤의 이름을 제품로 설정합니다.
네 번째 행의 경우:
- 첫 번째 물음표 레이블의 (이름)을 왼쪽으로 나눈 레이블 으로 설정합니다.
- 두 번째 레이블의 Text을(를) ÷(나누기 기호)로 설정합니다. 이 자습서에서 나누기 기호를 복사하여 양식에 붙여넣을 수 있습니다.
- 두 번째 물음표 레이블의 (이름)을 가 아닌으로 분할된 RightLabel로 설정합니다.
- NumericUpDown 컨트롤의 (이름)을/를 몫로 설정합니다.

$화살표 키가 표시된 레이블 및 컨트롤이 있는 4개 행의 문제가 있는 수학 퀴즈를 보여 주는 스크린샷$

시작 단추 추가 및 탭 인덱스 순서 설정

이 섹션에서는 시작 단추를 추가하는 방법을 보여 줍니다. 컨트롤의 탭 순서도 지정합니다. 이 순서는 Tab 키를 사용하여 퀴즈 응시자를 한 컨트롤에서 다음 컨트롤로 이동하는 방법을 결정합니다.

도구 상자 폼에 Button 컨트롤을 추가합니다.
속성 상자에서 단추의 다음 속성을 설정합니다.
- (이름) startButton 설정합니다.
- 텍스트를에서 로 설정하고 퀴즈을(를) 시작합니다.
- 글꼴 크기를 14로 설정합니다.
- 자동 크기 조정True설정하면 단추의 크기가 텍스트에 맞게 자동으로 조정됩니다.
- TabIndex을(를) 0으로 설정합니다. 이 값을 사용하면 시작 단추가 포커스를 받는 첫 번째 컨트롤이 됩니다.
폼의 아래쪽 근처에 있는 단추를 가운데에 놓습니다.

$네 개의 문제 행과 시작 단추가 있는 수학 퀴즈를 보여 주는 스크린샷$
속성 상자에서 각 NumericUpDown 컨트롤의 TabIndex 속성을 설정합니다.
- TabIndex1로 합계 컨트롤을 설정합니다.
- 차이점 컨트롤의 TabIndex을 2으로 설정합니다.
- 제품 컨트롤의 TabIndex을 3으로 설정해 주세요.
- TabIndex 를 몫 컨트롤에 4로 설정하십시오.

앱 실행

수학 문제는 퀴즈에서 아직 작동하지 않습니다. 하지만 앱을 실행하여 TabIndex 값이 예상대로 작동하는지 확인할 수 있습니다.

다음 방법 중 하나를 사용하여 앱을 저장합니다.
- Ctrl+Shift+S선택합니다.
- 메뉴 모음에서 파일>모두 저장을 선택합니다.
- 도구 모음에서 모두 저장 단추를 선택합니다.
다음 방법 중 하나를 사용하여 앱을 실행합니다.
- F5 선택합니다.
- 메뉴 모음에서 디버그>디버깅 시작선택합니다.
- 도구 모음에서 시작 단추를 선택합니다.
Tab 키를 몇 번 선택하여 포커스가 한 컨트롤에서 다음 컨트롤로 이동하는 방식을 확인합니다.

다음 단계

다음 자습서로 이동하여 수학 퀴즈에 임의 수학 문제 및 이벤트 처리기를 추가합니다.

자습서 2부: 수학 퀴즈 WinForms 앱 수학 문제 추가