프로그램의 사용자와 상호 작용: 사용자 인터페이스
업데이트: 2007년 11월
이 단원에서는 UI(사용자 인터페이스)의 정의, 컨트롤의 정의 및 UI에 컨트롤을 추가하는 방법을 배웁니다.
개인용 컴퓨터의 초창기 시절에는 사용자와 프로그램이 주로 명령줄을 통해 상호 작용했습니다. 시작된 프로그램은 사용자의 입력을 받기 위해 일시 중지되었다가 다시 실행되곤 했습니다. 그러나 오늘날 대부분의 프로그램은 하나 이상의 창에서 실행됩니다. 이러한 창을 사용하면 사용자가 입력하거나 단추를 클릭하거나 미리 설정된 메뉴에서 항목을 선택하는 등의 방식으로 프로그램과 통신(또는 상호 작용)할 수 있습니다. 이 단원과 다음 단원에서는 고유한 Windows 기반 UI를 빌드하는 방법을 배웁니다.
폼 사용
폼은 UI의 기본 빌드 블록입니다. 프로그램의 각 폼은 사용자에게 표시되는 창을 나타냅니다. Visual Basic IDE(통합 개발 환경)에서 작업하는 경우 폼은 응용 프로그램의 UI를 디자인하는 데 사용되는 디자이너 역할을 하며, 작업 방식은 Windows 그림판을 사용하여 그림을 그리는 것과 매우 유사합니다.
컨트롤은 디자이너에서 UI의 모양을 만드는 데 사용합니다. 또한 컨트롤은 모양과 동작이 미리 정의된 개체입니다. 예를 들어, Button 컨트롤은 누름 단추와 모양 및 동작이 유사하며 사용자가 이를 클릭하면 눌린 상태를 표시하기 위해 모양이 바뀝니다.
Visual Basic의 각 컨트롤에는 고유한 용도가 있습니다. 예를 들어, TextBox 컨트롤은 텍스트를 입력하는 데 사용되고 PictureBox 컨트롤은 그림을 표시하는 데 사용됩니다. Visual Basic에 들어 있는 컨트롤의 종류는 50가지가 넘으며 사용자 정의 컨트롤이라는 고유한 컨트롤을 만들 수도 있습니다. 각 컨트롤 종류에 대해서는 이후 단원에서 좀 더 자세히 배웁니다.
UI를 디자인하려면 컨트롤을 도구 상자에서 폼으로 끌어 놓은 다음 위치를 지정하고 크기를 조정하여 원하는 모양을 만듭니다. 속성 창에서 폼 및 컨트롤의 속성을 설정하면 모양을 추가로 변경할 수 있습니다. 예를 들어 폼 및 대부분의 컨트롤에는 배경색을 설정하는 데 사용하는 BackColor 속성이 있습니다.
또한 속성은 폼 또는 컨트롤의 동작을 정의하는 데 사용됩니다. 예를 들어, 폼의 ShowInTaskbar 속성은 프로그램이 실행될 때 Windows 작업 표시줄에 해당 폼을 표시할지 여부를 결정합니다. 속성을 사용하면 UI의 모양과 동작을 사용자 지정할 수 있습니다.
실습
폼의 속성을 변경하려면
파일 메뉴에서 새 프로젝트를 클릭합니다.
새 프로젝트 대화 상자의 템플릿 창에서 Windows 응용 프로그램을 클릭합니다.
이름 상자에 FirstForm을 입력한 다음 확인을 클릭합니다.
새 Windows Forms 프로젝트가 만들어집니다. 새 폼은 주 창에 표시되며 폼의 속성은 Visual Basic IDE의 오른쪽 아래 모퉁이에 있는 속성 창에 표시됩니다.
폼을 클릭하여 선택합니다.
속성 창에서 Text 속성을 "My First Form"으로 변경한 다음 Enter 키를 누릅니다.
새 값을 입력하면 폼 맨 위쪽의 텍스트가 변경됩니다.
속성 창의 드롭다운 목록에서 색을 선택하여 BackColor 속성을 다른 색으로 변경합니다.
BackColor 속성은 특수 인터페이스를 통해 변경합니다. 이 인터페이스를 사용하면 색을 선택하기 전에 확인할 수 있을 뿐 아니라 현재 시스템에서 사용하는 색, 표준 웹 색 또는 추가 사용자 지정 색 선택 중에서 선택할 수도 있습니다. 속성 창의 상자에 색 이름(예: Red)을 입력할 수도 있습니다.
폼의 다른 속성을 변경하여 실험해 보십시오. 준비됐으면 다음 프로시저를 계속 진행합니다.
폼에 컨트롤 추가
이 절차에서는 일반적으로 Visual Basic IDE의 왼쪽에 있는 도구 상자 창에서 컨트롤을 선택한 다음 폼으로 끌어 오는 방식으로 폼에 컨트롤을 추가합니다. 그런 다음 컨트롤의 속성을 조정합니다.
컨트롤을 폼에 추가하려면
도구 상자에서 Button 컨트롤, TextBox 컨트롤, Label 컨트롤 및 CheckBox 컨트롤을 차례로 폼으로 끌어 옵니다.
Button 컨트롤을 선택하고 이를 폼 주변으로 끌어 와 위치를 변경합니다.
안내선을 다른 컨트롤 가까이 끌어 오면 어떻게 표시되는지 살펴봅니다. 이러한 안내선을 사용하면 컨트롤의 위치를 정확히 지정할 수 있습니다.
UI가 원하는 모양이 될 때까지 다른 컨트롤을 사용하여 프로세스를 반복합니다.
Button 컨트롤을 선택한 다음 크기 조정 핸들의 오른쪽 아래 모퉁이를 끌어 크기를 변경합니다.
이번에는 컨트롤 속성에 대해 실험해 봅니다. 폼의 각 컨트롤을 클릭하여 선택한 다음 속성 창에서 몇 가지 속성을 변경합니다. 변경할 수 있는 속성에는 Font, BackColor, ForeColor 및 Text가 있습니다. 자세한 내용은 자세히 보기: 컨트롤 레이아웃 이해을 참조하십시오.
F5 키를 눌러 프로그램을 실행합니다. 위에서 추가한 컨트롤이 포함된 창이 표시됩니다. 단추를 클릭하고, 확인란을 선택/선택 취소하고, 텍스트 상자에 입력할 수 있습니다.
다음 단계
이 단원에서는 폼을 만들어 폼에 컨트롤을 추가하는 방법을 배웠습니다. 또한 속성 창에서 폼 및 컨트롤의 속성을 변경하는 방법을 배웠습니다. 다음 몇 개의 단원에서는 몇 가지 컨트롤에 대해 좀 더 자세히 살펴보겠습니다.
다음 단원: 사용자와 상호 작용: 단추 사용