사용자 인터페이스 디자인하기
- 업데이트 날짜:2025-08-27
- 5분 (읽기 시간)
VI가 사용자 인터페이스 또는 대화 상자로 사용될 때, 프런트 패널의 모습 및 레이아웃은 매우 중요합니다. 프런트패널을 디자인할 때 인스트루먼트 또는 다른 디바이스와 비슷하게 만들어서, 사용자가 수행할 동작을 이해하기 쉽도록 합니다. 프런트패널 컨트롤과 인디케이터, 분리자 막대와 구획, 윈도우 셋팅 등을 사용하여 프런트패널의 활용도를 높입니다. 또한, 이벤트를 사용하여 사용자 인터페이스의 기능을 향상시킬 수 있습니다.
프런트패널 디자인하기
프런트패널의 주요 구성요소는 컨트롤과 인디케이터입니다. 다음 가이드라인을 사용하여 사용자 인터페이스로 사용할 프런트패널을 디자인합니다:
- 사용자가 어떻게 VI와 논리적으로 상호작용하는지를 고려합니다. 이에 따라 컨트롤과 인디케이터를 그룹화합니다.
- 서로 관련된 컨트롤을 클러스터 안에 놓거나 관련 컨트롤 주변에 장식용 경계선을 두릅니다.
- 장식 팔레트에 위치한 장식을 사용하여 상자, 라인 그리고 화살표로 객체를 그룹으로 모으거나 구분합니다.
- 프런트패널을 알아보기 쉽도록 객체 사이에 빈 공간을 두십시오. 빈 공간은 또한 사용자가 실수로 다른 컨트롤 또는 버튼을 클릭하는 것을 방지합니다.
- 와이어 위에 다른 객체를 놓지 않습니다. 컨트롤이나 인디케이터의 일부에만 라벨이나 다른 객체가 겹쳐 있는 경우 스크린 업데이트가 느려지고 컨트롤 또는 인디케이터가 깜박거릴 수 있습니다.
- 버튼에 시작, 정지, 저장과 같은 특정한 이름을 지정합니다. 일반적인 용어를 사용합니다.
- 객체 정렬 및 간격 조절 풀다운 메뉴를 사용하여 레이아웃을 깔끔하고 보기 쉽게 만듭니다.
폰트 및 색 설정하기
또한 폰트와 색을 설정하여 사용자 인터페이스의 활용도를 높일 수 있습니다. LabVIEW는 내장 폰트를 기본 시스템 폰트로 정의합니다. VI를 플랫폼 사이에서 이동하는 경우, LabVIEW는 자동으로 내장 폰트를 업데이트하여 현재 플랫폼의 기본 시스템 폰트와 일치하도록 합니다. 사용할 수 없는 폰트를 사용하는 VI를 여는 경우, LabVIEW는 가장 비슷한 폰트로 이를 대체합니다. 또한, LabVIEW는 폰트 대체와 유사한 방법으로 색을 대체합니다. VI의 색 중 하나를 사용할 수 없는 경우, LabVIEW는 이를 가장 가까운 색으로 대체합니다. 시스템 색은 컴퓨터에 따라 다릅니다. 따라서 시스템 색을 사용하는 모든 VI는 현재 사용 중인 컴퓨터 고유의 시스템 색을 반영합니다. 시스템 색은 패널 & 객체, 윈도우, 하이라이트의 모양과 시스템 색 위에 나타나는 텍스트의 색상도 결정합니다. 옵션 대화 상자에서 사용자 정의 색을 설정하고 시스템 색을 확인할 수 있습니다.
분리자 막대와 구획 사용하기
도구 모음이나 상태 막대와 같은 분리자 막대를 사용하여 프런트패널 윈도우에 전문적인 사용자 인터페이스를 만들 수 있습니다. 분리자 막대를 생성해서 구획이라고 불리는 여러 영역으로 프런트패널을 분리할 수 있습니다. 각 구획은 자체적인 구획 좌표, 컨트롤, 인디케이터를 갖고 있어서, 개별 프런트패널처럼 동작합니다. 사용자는 각각의 구획을 개별적으로 스크롤할 수 있습니다. 분리자 막대는 특정 구획에 있는 컨트롤을 다른 구획에 있는 컨트롤과 분리하지만 모든 컨트롤의 터미널은 동일 블록다이어그램에 있습니다.
새 VI를 생성할 때, 프런트패널은 윈도우를 채우는 하나의 단일 구획을 갖습니다. 프런트패널은 이 구획을 소유하며 해당 구획의 직상위입니다. 구획에 분리자 막대를 놓으면, 분리자 막대는 프런트패널 객체 계층구조 상에서 구획을 대체하게 되고 두 개의 새 직하위 구획을 생성합니다. 프런트패널은 분리자 막대를 소유하고 분리자 막대는 두 직하위 구획을 소유합니다. 직하위 구획 중 하나에 분리자 막대를 새로 놓게 되면, 새 분리자 막대는 해당 구획을 대체하며 새로 만들어진 두 직하위 구획의 직상위 구획이 됩니다. 이 계층구조는 2진 트리를 형성하고 프런트패널은 최상위 구획을 소유합니다.
분리자 막대와 구획을 사용하는 예제를 보려면 labview\examples\Controls and Indicators\Containers에 있는 Resizable Panel with Splitter Bars VI를 참조하십시오.
분리자 막대 설정하기
분리자 막대에서 마우스 오른쪽 버튼을 클릭한 후, 다음 바로 가기 메뉴 옵션 중 하나를 선택하여 분리자 막대를 설정합니다:
- 보이는 아이템―분리자 막대 라벨을 프런트패널에 추가합니다. LabVIEW는 기본적으로 분리자 막대 라벨을 숨깁니다.
- 생성―사용자가 프로퍼티 노드, VI 서버 참조 또는 인보크 노드를 생성하여 프로그램적으로 분리자 막대를 설정할 수 있습니다.
- 전체 분리자 계층구조 제거―선택한 분리자 막대와 계층구조 상에서 직하위인 모든 분리자 막대를 제거합니다. 객체는 프런트패널에서 동일한 스크린 위치를 유지합니다. 다른 분리자의 직상위가 아닌 분리자 막대를 선택하면, LabVIEW는 이 옵션을 비활성화합니다.
- 인접하는 분리자 제거―선택한 분리자 막대와 해당 분리자 막대와 끝이 닿는 모든 분리자 막대를 제거합니다.
- 분리자 크기 조정―윈도우 크기를 조정할 때 구획에 미치는 영향을 컨트롤할 수 있도록 허용합니다. 분리자 크기 조정 바로 가기 메뉴에서 옵션을 선택하면, 윈도우 크기를 조정함으로써 다른 구획이 커지거나 작아지는 동안 해당 구획이 동일한 크기로 유지되거나 고정되도록 설정할 수 있습니다. 또한 비례하여 분리자 크기 조정을 선택하여 윈도우 크기를 조정할 때 두 구획이 모두 커지거나 작아지도록 허용할 수 있습니다.
- 고정―현재 위치에 분리자 막대를 고정시킵니다.
- 분리자 스타일―분리자 막대의 스타일을 사용자 정의할 수 있도록 합니다.
- 위쪽 구획/아래쪽 구획/왼쪽 구획/오른쪽 구획―선택한 구획을 설정할 수 있도록 합니다. 구획을 선택할 때, 선택한 구획을 설정하는 데에 쓰이는 옵션 포함하는 새 바로 가기 메뉴가 열립니다. 구획 설정하기에 대한 추가적인 정보는 이 토픽의 구획 설정하기 섹션을 참조하십시오.
또한 분리자 프로퍼티를 사용하여 프로그램적으로 분리자 막대를 설정할 수 있습니다.
구획 설정하기
구획의 스크롤 바에서 마우스 오른쪽 버튼을 클릭하거나 분리자 막대에서 마우스 오른쪽 버튼을 클릭한 후, 설정하려는 구획을 선택하고 다음 바로 가기 메뉴 옵션 중 하나를 선택하여 구획을 설정합니다:
- 보이는 아이템―구획 라벨을 프런트패널에 추가합니다. LabVIEW는 기본적으로 구획 라벨을 숨깁니다.
- 생성―사용자가 프로퍼티 노드, VI 서버 참조 또는 인보크 노드를 생성하여 프로그램적으로 구획을 설정할 수 있습니다.
- 수평 스크롤 막대―수평 스크롤 막대가 항상 켜기, 항상 끄기 또는 실행 중 끄기인지 선택할 수 있습니다.
- 수직 스크롤 막대―수직 스크롤 막대가 항상 켜기, 항상 끄기 또는 실행 중 끄기인지 선택할 수 있습니다.
- 구획 크기 조정―윈도우 크기를 조정할 때 구획에 미치는 영향을 컨트롤할 수 있습니다. 크기가 조정된 구획의 객체가 구획의 아래쪽, 위쪽, 왼쪽, 또는 오른쪽에 남아있을지를 선택할 수 있습니다. 또한 윈도우 크기를 조정할 때 구획에 있는 객체를 스케일할지 여부도 선택할 수 있습니다.
프런트패널에 분리자 막대가 없는 경우, VI 프로퍼티 대화 상자에서 단일 구획의 일부 프로퍼티를 설정할 수 있습니다. 그러나, 프런트패널에 분리자 막대를 추가하는 경우, 옵션 설정이 모든 구획에 적용될 수 없기 때문에 LabVIEW는 VI 프로퍼티 대화 상자에 있는 메뉴 옵션을 제한합니다. 사용자는 각각의 구획을 개별적으로 설정해야 합니다. 예를 들어, 프런트패널에 분리자 막대를 추가하면 VI 프로퍼티 대화 상자의 윈도우 크기 페이지에 있는 윈도우가 크기 조정될 때 프런트패널의 모든 객체 스케일 확인란이 비활성화됩니다.
또한 구획 프로퍼티를 사용하여 구획을 프로그램적으로 설정할 수 있습니다.
대화 상자 디자인하기
파일≫VI 프로퍼티를 선택한 후 항목 풀다운 메뉴에서 윈도우 모양을 선택하고 대화 상자 옵션을 선택하여 메뉴 모음과 스크롤 막대를 숨기고 각 플랫폼에서 표준 대화 상자처럼 보이고 동작하는 VI를 생성합니다.
VI가 같은 스크린 위치에 연속적으로 나타나는 대화 상자를 포함하는 경우, 첫번째 대화 상자의 버튼이 두번째 대화 상자의 버튼과 같은 곳에 있지 않도록 구성합니다. 사용자가 첫번째 대화 상자의 버튼을 더블 클릭할 때 무심코 다음 대화 상자의 버튼을 클릭할 수 있기 때문입니다.
VI가 실행 중일 때 사용자가 취소 동작을 수행하기 위해 키보드 바로 가기 키 <Ctrl-Z>를 누를 수도 있습니다. 이로 인해 닫힌 대화 상자가 다시 열리는 등, 대화 상자가 예기치 않은 동작을 일으킵니다. 이 동작을 방지하려면, 편집≫실행 취소 옵션을 포함하지 않는 사용자 메뉴를 생성하거나, VI에 이벤트 구조를 추가하고 메뉴 선택(어플리케이션) 이벤트를 설정하여 명령을 처리합니다.
생성한 대화 상자의 시스템 팔레트에 위치한 시스템 컨트롤을 사용합니다.
스크린 크기 선택하기
VI를 디자인할 때, 다른 스크린 해상도를 가진 컴퓨터에서 프런트패널을 디스플레이할 수 있는지를 고려합니다.
컨트롤을 지나치게 빽빽하게 채우거나 선명한 레이아웃을 해치지 않는 범위 내에서 최대한 프런트패널을 작게 만듭니다. 일부 디스플레이의 경우 해상도가 제한되는데, 특히 LCD 디스플레이와 터치스크린의 경우 그렇습니다.
또한 프런트패널은 작은 스크린을 사용하는 사용자의 편의를 위해 스크린 왼쪽 상단 코너에서 열리도록 설정합니다. 자주 사용하는 VI들을 함께 배치하여 사용자가 최소한 각 VI의 작은 부분이라도 볼 수 있도록 합니다. 자동으로 열리는 프런트패널은 스크린 중앙에 두어, 사용자가 다양한 크기의 모니터에서 VI를 보다 쉽게 볼 수 있도록 합니다.
파일≫VI 프로퍼티에서, 항목 풀다운 메뉴의 윈도우 크기를 선택한 후 다른 모니터 해상도에서 윈도우의 비율 유지 확인란에 확인 표시를 하여 스크린 해상도에 대해 상대적인 프런트패널 윈도우 비율을 유지하도록 합니다.