Tim Corey와 함께하는 C# 폼 디자인 탐색 — 가이드된 튜토리얼

폼 빌딩 소개

Tim은 일곱 번째 수업에 환영하면서 폼을 구축하고 있다는 목적을 분명히 밝힙니다. 그는 이것이 클래스 라이브러리 작업과 비슷하지만 이제 이전 계획 스케치에 따라 실제 UI를 구현하고 있다고 상기시켜 줍니다. Tim은 이 단계에서 코드를 추가하고 싶을 수 있지만, 폼을 구축하는 데 집중할 것을 촉구합니다.

그는 또한 이전 디자인이 대강의 스케치였으며, 우리가 이제 폼을 더 멋지게 만들고 있음을 설명합니다. Tim은 설계 가이드는 중요하며, 자신이 거친 실험을 보여주지는 않지만 최종 결과를 안내할 것이라고 설명합니다. 그는 또한 4단계 계획 디자인이 이번 수업의 기초이며 필요하면 해당 디자인을 다시 참조할 것을 권장합니다.

새 프로젝트 추가 및 Windows Forms 애플리케이션 시작

Tim은 솔루션에 새 프로젝트를 추가하는 방법을 보여줍니다. Solution Explorer에서 그는 솔루션을 마우스 오른쪽 버튼으로 클릭하고 새 프로젝트 추가(Add New Project)를 선택한 후 Windows Form Application을 선택합니다. 이는 Windows 데스크톱 애플리케이션을 빌드하는 데 특화된 새 프로젝트 유형을 생성합니다. 그는 프로젝트 이름을 Tournament Tracker UI로 설정합니다.

그는 Windows Forms 앱을 생성할 때 기본 Form1.cs 파일이 자동으로 생성된다는 것을 설명합니다. 앱에는 시작 폼이 필요하므로 Tim은 이를 삭제하지 않기로 결정합니다. 대신에 그는 파일과 클래스를 TournamentViewerForm으로 이름을 변경하고 모든 참조를 변경하라는 메시지를 수락합니다. 이는 애플리케이션의 메인 윈도우가 제대로 작동하도록 보장합니다.

폼 클래스 이름 변경

Tim은 Windows Forms 애플리케이션에서 실행되는 폼이 있어야 함을 강조합니다. 그는 기본 Form1.cs를 삭제하면 Program.cs의 엔트리 포인트를 수동으로 업데이트해야 한다고 설명합니다. 그 복잡성을 피하기 위해 Tim은 단순히 폼의 이름을 변경합니다. 이것은 Windows Forms 앱을 시작할 때 전형적인 단계입니다: 클래스와 파일 이름을 프로젝트 목적과 일치시키기

속성 창 사용하기

Tim은 속성 창을 열고 폼의 속성을 수정하기 시작합니다. 그는 Text 속성을 "Tournament Viewer"로 변경하여 제목 표시줄에 올바른 이름이 표시되도록 합니다.

다음으로, 그는 기본 Visual Studio 회색 Bezel을 흰색으로 변경하며, 흰색이 더 현대적이며 폼의 콘텐츠에서 주의를 분산시키지 않는다고 설명합니다. 이는 UI에 대한 설계 가이드를 설정하는 일환입니다.

그는 그런 다음 16포인트의 현대적인 글꼴로 폰트를 변경하고, 이를 일찍 해야 하는 이유를 설명합니다: 나중에 추가된 컨트롤은 새 글꼴을 자동으로 상속합니다. Tim은 이것이 폼을 효과적으로 구축하는 중요한 팁임을 설명합니다.

아이콘 및 리소스 변경하기

Tim은 사용자 정의 아이콘 파일을 가져와 폼의 아이콘을 변경합니다. 그는 Metro Studio라는 무료 도구를 사용하여 아이콘을 만들었다고 설명합니다. 이를 통해 아이콘을 처음부터 쓰거나 디자인할 필요가 없게 됩니다. 그는 또한 애플리케이션의 통일된 외관을 위해 모든 폼에서 동일한 아이콘을 사용할 것이라고 지적합니다.

폼에 컨트롤 추가하기

Tim은 툴박스에서 폼으로 컨트롤을 드래그하여 UI를 구축하기 시작합니다. 그는 머리글 레이블을 추가하고 다음 속성을 변경합니다:

• ForeColor → RGB (51, 153, 255)

• Font → Light, 28

• Text → "Tournament:"

• Name → "headerLabel"

그는 그런 다음 헤더 레이블을 복사하여 대회 이름 레이블을 생성하고 텍스트를 임시로 "None"으로 설정하고 이름을 tournamentNameLabel로 지정합니다. Tim은 컨트롤을 복사하고 붙여넣는 것이 일관된 스타일을 유지하면서 시간을 절약하는 빠른 방법이라고 설명합니다.

라운드 선택 컨트롤 추가하기

Tim은 Round 레이블과 ComboBox 드롭다운을 추가합니다. 그는 레이블의 폰트를 20으로 변경하고 색상을 같은 파란색 강조표시로 설정합니다. 그는 Visual Studio의 정렬 가이드를 사용하여 컨트롤이 올바르게 정렬되도록 합니다.

다음으로, 그는 CheckBox에 "Unplayed Only"라고 레이블을 붙입니다. 그는 스타일을 평평하게 변경하고, 체크 마크 색상을 파란색으로 수정합니다. Tim은 또한 그의 명명 규칙을 설명합니다: 검색과 코드 탐색을 더 쉽게 만들기 위해 제어 유형을 끝에 추가합니다 (예: roundDropDown, unplayedOnlyCheckbox).

매치업 리스트와 점수 컨트롤 추가하기

Tim은 ListBox를 matchupListBox로 이름 짓고 테두리 스타일을 고정 단일로 설정합니다. 그는 ListBox가 ComboBox와 유사하게 작동하여 나중에 코딩을 더 쉽게 만든다고 설명합니다.

그런 다음 팀 이름 및 점수를 위한 레이블과 텍스트 박스를 추가합니다. 그는 강력한 기법을 보여줍니다: 여러 컨트롤을 선택하고 복사하여 함께 붙여넣기 이는 레이아웃을 유지하고 디자인 프로세스를 가속화합니다.

Tim은 또한 기본 이름 (예: label1, textBox2)을 피하고 모든 컨트롤의 이름을 올바르게 지정해야 한다고 설명하며, 나중에 혼동을 초래할 수 있습니다.

VS 레이블 및 점수 버튼 추가하기

Tim은 두 팀 섹션 사이에 "VS" 레이블을 추가합니다. 그는 그런 다음 점수 버튼을 추가하고 스타일을 맞춤 설정합니다:

• FlatStyle → Flat

• BorderColor → Silver

• MouseDownBackColor → (102, 102, 102)

• MouseOverBackColor → (242, 242, 242)

• Font → Semi-bold, 16

• ForeColor → (51, 153, 255)

• Text → "Score"

그는 이러한 설정이 현대적이고 반응성이 뛰어난 버튼을 만들어 사용자에게 호버하거나 클릭할 때 특히 도움이 된다고 설명합니다.

폼 실행하기

Tim은 현재 프로젝트가 잘못된 시작 프로젝트를 가지고 있다고 설명합니다. Solution Explorer에서 클래스 라이브러리가 굵게 표시되어 있는데, 이는 시작 프로젝트로 설정되어 있지만 클래스 라이브러리는 자체적으로 실행될 수 없습니다. 그는 Tracker UI를 시작 프로젝트로 설정합니다.

그가 애플리케이션을 실행할 때, 폼이 Windows 10 스타일로 나타납니다. Tim은 버튼의 호버 및 클릭 동작을 지적하며 UI가 반응성이 뛰어나고 현대적임을 보여줍니다.

토너먼트 생성 폼

Tim은 CreateTournamentForm이라는 새 폼을 추가하고 속성 (글꼴, 색상, 아이콘)을 설정합니다. 그는 개발 속도를 높이기 위해 Tournament Viewer 폼에서 컨트롤을 복사합니다.

그는 다음을 추가합니다:

• 대회 이름 입력

• 참가비 입력 (기본값 0)

• 팀 드롭다운 추가

• 팀 생성 링크 레이블

• 팀 추가 버튼

• 상 생성 버튼

• 대회 참가자 리스트 박스

• 삭제 버튼

• 대회 생성 버튼

Tim은 링크 레이블을 파란색으로 유지하는 디자인 선택을 설명합니다. 사용자는 파란색 밑줄이 있는 텍스트를 링크로 인식하도록 훈련되어 있기 때문입니다.

팀 생성 폼

Tim은 CreateTeamForm을 생성하고 다음을 추가합니다:

• 팀 이름 입력

• 팀원 선택 드롭다운

• 멤버 추가 버튼

• 신규 멤버 추가를 위한 그룹 박스

• 이름, 성, 이메일, 휴대폰 입력란

• 구성원 생성 버튼

• 팀 구성원 목록 상자

• 선택한 구성원 삭제 버튼

• 팀 생성 버튼

그는 그룹 박스가 시각적 경계를 제공하고 그룹화된 컨트롤을 관리하기 쉽게 만든다고 설명합니다. 또한 그룹을 단위로 이동할 때 유용합니다.

상 생성 폼

Tim은 CreatePrizeForm을 다음과 함께 만듭니다:

• 순위 번호 입력

• 장소 이름 입력

• 상금 금액 입력

• 상금 비율 입력

• '또는' 레이블

• 상 생성 버튼

그는 정렬 도구를 사용하여 레이아웃이 깔끔하고 전문적으로 보이도록 합니다.

토너먼트 대시보드 폼

Tim은 최종 양식을 빌드합니다: TournamentDashboardForm. 그는 다음을 추가합니다:

• 기존 토너먼트 로드 드롭다운

• 토너먼트 로드 버튼

• 대회 생성 버튼

그는 정렬 및 간격 도구를 사용하여 레이아웃이 시각적으로 균형 잡히도록 만듭니다.

이름 지정 및 조직 팁

Tim은 올바른 이름 지정의 중요성을 강조합니다. 그는 Properties 드롭다운이 label1이나 textBox2처럼 무명 컨트롤을 식별하는 데 어떻게 도움이 될 수 있는지 보여줍니다. 그룹 박스를 addNewMemberGroupBox로 명명하여 명확하게 하는 방법을 시연합니다.

시작 양식 설정

Tim은 Program.cs에서 시작 양식을 변경하는 방법을 설명합니다. 그는 다음과 같이 변경합니다:

Application.Run(new TournamentViewerForm());

다음과 같이 변경합니다:

Application.Run(new TournamentDashboardForm());

그는 이 줄이 양식 인스턴스를 생성하고 양식이 닫힐 때까지 애플리케이션을 중지한다고 설명합니다.

Main이 중요한 이유

Tim은 Windows Forms를 콘솔 애플리케이션과 비교합니다: 둘 다 static void Main을 가지고 있습니다. 그는 Main이 완료되면 애플리케이션이 종료된다고 설명합니다. 따라서 애플리케이션이 계속 실행되려면 양식이 열려 있어야 합니다.

그는 또한 Visual Studio가 XML 주석을 포함하고 있으며 나중에 메서드에 대한 XML 문서를 추가하도록 권장합니다.

다음에는 무엇이 올까요?

Tim은 양식들을 논리적으로 연결하는 것이 다음 단계라고 밝히며 수업을 마무리합니다. 그는 시청자들에게 무서운 부분이 오고 있지만, 양식이 완성되면 관리 가능할 것이라고 안심시킵니다. 그는 논리가 LEGO 조각을 조립하는 것처럼 느껴지며, 진행할수록 어려운 부분이 점차 사라질 것이라고 말합니다.