다음을 통해 공유

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

  • 아티클

4개 자습서로 구성된 이 시리즈에서는 수학 퀴즈를 빌드합니다. 퀴즈는 퀴즈를 푸는 사람이 지정된 시간 이내에 답변을 시도하는 4가지 난수 수학 문제를 포함합니다.

Visual Studio IDE(통합 개발 환경)는 앱을 만드는 데 필요한 도구를 제공합니다. 이 IDE에 대해 자세히 알아보려면 Visual Studio IDE 시작을 참조하세요.

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

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

필수 조건

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

Windows Forms 프로젝트 만들기

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

  1. Visual Studio를 엽니다.

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

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. 새 프로젝트 만들기 창에서 Windows Forms를 검색합니다. 그런 다음, 프로젝트 형식 목록에서 데스크톱을 선택합니다.

  4. C# 또는 Visual Basic의 Windows Forms 앱(.NET Framework) 템플릿을 선택하고 다음을 선택합니다.

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    참고 항목

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

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

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

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    Visual Studio 설치 관리자에서 수정을 선택합니다. 작업을 저장하라는 메시지가 표시될 수 있습니다. 다음으로, 계속을 선택하여 워크로드를 설치합니다.

  5. 새 프로젝트 구성 창에서 프로젝트 이름을 MathQuiz로 지정한 후 만들기를 선택합니다.

  1. Visual Studio를 엽니다.

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

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. 새 프로젝트 만들기 창에서 Windows Forms를 검색합니다. 그런 다음, 프로젝트 형식 목록에서 데스크톱을 선택합니다.

  4. C# 또는 Visual Basic의 Windows Forms 앱(.NET Framework) 템플릿을 선택하고 다음을 선택합니다.

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    참고 항목

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

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

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

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    Visual Studio 설치 관리자에서 수정을 선택합니다. 작업을 저장하라는 메시지가 표시될 수 있습니다. 다음으로, 계속을 선택하여 워크로드를 설치합니다.

  5. 새 프로젝트 구성 창에서 프로젝트 이름을 MathQuiz로 지정한 후 만들기를 선택합니다.

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

양식 속성 설정

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

  1. 프로젝트에서 Windows Forms 디자이너를 선택합니다. 디자이너 탭은 C#의 경우 Form1.cs [Design]으로 레이블이 지정되고 Visual Basic의 경우 Form1.vb [Design]으로 레이블이 지정됩니다.

  2. Form1 양식을 선택합니다.

  3. 속성 창에는 이제 폼 속성이 표시됩니다. 이 창은 일반적으로 Visual Studio의 오른쪽 아래 모서리에 있습니다. 속성이 표시되지 않으면 보기>속성 창을 선택합니다.

  4. 속성 창에서 Text 속성을 찾습니다. 목록을 정렬 방법에 따라 아래로 스크롤해야 할 수도 있습니다. 텍스트 값으로 Math Quiz 값을 입력한 후 Enter 키를 선택합니다.

    이제 양식의 제목 표시줄에 “Math Quiz” 텍스트가 표시됩니다.

    참고 항목

    범주별로 또는 사전순으로 속성을 표시할 수 있습니다. 속성 창의 단추를 사용하여 앞뒤로 전환합니다.

  5. 이 폼의 크기를 500*400픽셀로 변경합니다.

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

  6. FormBorderStyle 속성의 값을 Fixed3D로 변경하고 MaximizeBox 속성을 False로 설정합니다.

    값을 이렇게 설정하면 퀴즈를 푸는 사람이 폼 크기를 변경할 수 없습니다.

남은 시간 상자 만들기

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

  1. Visual Studio IDE의 왼쪽에서 도구 상자 탭을 선택합니다. 도구 상자가 표시되지 않으면 메뉴 모음에서 보기>도구 상자를 선택하거나 Ctrl+Alt+X를 선택합니다.

  2. 도구 상자에서 Label 컨트롤을 선택하여 양식으로 끌어옵니다.

  3. 속성 상자에서 레이블의 다음 속성을 설정합니다.

    • (이름)을 timeLabel로 설정합니다.
    • 상자의 크기를 조정할 수 있도록 자동 크기 조정을 False로 변경합니다.
    • BorderStyle을 FixedSingle로 변경하여 상자 주위에 선을 그립니다.
    • 크기를 200, 30으로 설정합니다.
    • 텍스트 속성을 선택한 후 백스페이스 키를 선택하여 텍스트 값을 지웁니다.
    • 글꼴 속성 옆의 더하기 기호(+)를 선택한 후 크기를 15.75로 설정합니다.

  4. 레이블을 양식의 오른쪽 위 모서리로 이동합니다. 파란색 공백 선이 나타나면 이를 사용하여 양식에 컨트롤을 배치합니다.

  5. 도구 상자에서 다른 Label 컨트롤을 추가한 후 글꼴 크기를 15.75로 설정합니다.

  6. 이 레이블의 텍스트 속성을 Time Left로 설정합니다.

  7. 레이블을 이동하여 timeLabel 레이블 왼쪽에 정렬합니다.

    Screenshot that shows the Time Left label and the remaining time label. The controls are lined up next to each other in the upper-right corner of the form.

더하기 문제의 컨트롤 추가

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

  1. 도구 상자에서 레이블 컨트롤을 양식에 추가합니다.

  2. 속성 상자에서 레이블의 다음 속성을 설정합니다.

    • 텍스트를 ?(물음표)로 설정합니다.
    • 자동 크기 조정을 False로 설정합니다.
    • 크기를 60, 50으로 설정합니다.
    • 글꼴 크기를 18로 설정합니다.
    • TextAlign을 MiddleCenter로 설정합니다.
    • 위치를 50, 75로 설정하여 컨트롤을 양식에 배치합니다.
    • (이름)을 plusLeftLabel로 설정합니다.

  3. 양식에서 사용자가 만든 plusLeftLabel 레이블을 선택합니다. 편집>복사를 선택하거나 Ctrl+C를 선택하여 레이블을 복사합니다.

  4. 편집>붙여넣기를 선택하거나 Ctrl+V를 세 번 선택하여 레이블을 양식에 세 번 붙여넣습니다.

  5. 세 레이블이 plusLeftLabel 레이블의 오른쪽에 나란히 놓이도록 정렬합니다.

  6. 두 번째 레이블의 텍스트 속성을 +(더하기 기호)로 설정합니다.

  7. 세 번째 레이블의 (이름) 속성을 plusRightLabel로 설정합니다.

  8. 네 번째 레이블의 텍스트 속성을 =(등호)로 설정합니다.

  9. 도구 상자에서 NumericUpDown 컨트롤을 양식에 추가합니다. 이 컨트롤 종류에 대해서는 나중에 자세히 설명하도록 하겠습니다.

  10. 속성 상자에서 NumericUpDown 컨트롤의 다음 속성을 설정합니다.

    • 글꼴 크기를 18로 설정합니다.
    • 너비를 100으로 설정합니다.
    • (이름)을 sum으로 설정합니다.

  11. 더하기 문제의 레이블 컨트롤에 맞춰 NumericUpDown 컨트롤을 정렬합니다.

    Screenshot that shows the first row of the math quiz. Labels are visible, and a control with arrow keys displays a zero.

빼기, 곱하기, 나누기 문제의 컨트롤 추가

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

  1. 더하기 문제에 대해 만든 4개 레이블 컨트롤과 NumericUpDown 컨트롤을 복사합니다. 양식에 붙여넣습니다.

  2. 새 컨트롤을 이동하여 더하기 컨트롤 아래에 정렬합니다.

  3. 속성 상자에서 새 컨트롤의 다음 속성을 설정합니다.

    • 첫 번째 물음표 레이블의 (이름)을 minusLeftLabel로 설정합니다.
    • 두 번째 레이블의 텍스트를 -(빼기 기호)로 설정합니다.
    • 두 번째 물음표 레이블의 (이름)을 minusRightLabel로 설정합니다.
    • NumericUpDown 컨트롤의 (이름)을 difference로 설정합니다.

  4. 더하기 컨트롤을 복사하여 양식에 두 번 더 붙여넣습니다.

  5. 세 번째 행의 경우:

    • 첫 번째 물음표 레이블의 (이름)을 timesLeftLabel로 설정합니다.
    • 두 번째 레이블의 텍스트를 ×(곱하기 기호)로 설정합니다. 이 자습서에서 곱하기 기호를 복사하여 양식에 붙여넣을 수 있습니다.
    • 두 번째 물음표 레이블의 (이름)을 timesRightLabel로 설정합니다.
    • NumericUpDown 컨트롤의 (이름)을 product로 설정합니다.

  6. 네 번째 행의 경우:

    • 첫 번째 물음표 레이블의 (이름)을 dividedLeftLabel로 설정합니다.
    • 두 번째 레이블의 텍스트를 ÷(나누기 기호)로 설정합니다. 이 자습서에서 나누기 기호를 복사하여 양식에 붙여넣을 수 있습니다.
    • 두 번째 물음표 레이블의 (이름)을 dividedRightLabel로 설정합니다.
    • NumericUpDown 컨트롤의 (이름)을 quotient로 설정합니다.

Screenshot that shows a math quiz with four rows of problems. Labels and controls with arrow keys are visible.

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

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

  1. 도구 상자에서 Button 컨트롤을 양식에 추가합니다.

  2. 속성 상자에서 단추의 다음 속성을 설정합니다.

    • (이름)을 startButton으로 설정합니다.\
    • 텍스트를 Start the quiz로 설정합니다.
    • 글꼴 크기를 14로 설정합니다.
    • 단추의 크기가 텍스트에 맞게 자동으로 조정되도록 자동 크기 조정을 True로 설정합니다.
    • TabIndex를 0으로 설정합니다. 이 값은 시작 단추를 포커스를 받는 첫 번째 컨트롤로 만듭니다.

  3. 단추를 폼의 아래쪽 가운데에 배치합니다.

    Screenshot that shows a math quiz with four rows of problems and a start button.

  4. 속성 상자에서 각 NumericUpDown 컨트롤의 TabIndex 속성을 설정합니다.

    • sum NumericUpDown 컨트롤의 TabIndex를 1로 설정합니다.
    • difference NumericUpDown 컨트롤의 TabIndex를 2로 설정합니다.
    • product NumericUpDown 컨트롤의 TabIndex를 3으로 설정합니다.
    • quotient NumericUpDown 컨트롤의 TabIndex를 4로 설정합니다.

앱을 실행합니다.

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

  1. 다음 방법 중 하나를 사용하여 앱을 저장합니다.

    • Ctrl+Shift+S를 선택합니다.
    • 메뉴 모음에서 파일>모두 저장을 선택합니다.
    • 도구 모음에서 모두 저장 단추를 선택합니다.

  2. 다음 방법 중 하나를 사용하여 앱을 실행합니다.

    • F5 키를 선택합니다.
    • 메뉴 모음에서 디버그>디버깅 시작을 선택합니다.
    • 도구 모음에서 시작 단추를 선택합니다.

  3. Tab 키를 여러 번 선택하여 포커스가 한 컨트롤에서 다음 컨트롤로 이동하는 방식을 확인합니다.

다음 단계

난수 수학 문제 및 이벤트 처리기를 수학 퀴즈에 추가하는 다음 자습서를 진행합니다.

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