주요 접근 방식
FactoryTalk® Optix™
응용 프로그램을 최적화하려면 성능, 유지 관리 용이성 및 명확성 간에 적절한 균형이 필요합니다.본 문서 전반에 걸쳐, 다음과 같이 이러한 균형을 이루기 위한 주요 접근 방법을 살펴봅니다.
- 접근 방식 유형
- 접근 방식 사용 사례
- 각 접근 방식을 효율적으로 구현하는 방법
이러한 개념들은 원래 웹 디자인과 크로스 플랫폼 응용 프로그램 분야에서 비롯되었으나, 이제는 동일한 응용 프로그램이 매우 다양한 장치에서 표시되는 산업용 HMI에서도 필수 요소가 되었습니다.
- 확장형 접근 방식:확장형 접근 방식은 장치 해상도와 무관하게 레이아웃, 위치 및 가독성을 유지하면서 크기를 비례적으로 조정하는 인터페이스 접근 방식을 의미합니다.예: 1920×1080 해상도로 레이아웃이 1280×720 또는 3840×2160 해상도에서도 올바르게 맞는 경우입니다.
- 적응형 접근 방식:적응형 접근 방식은 장치나 해상도에 따라 레이아웃을 조정하고, 그에 맞게 다른 구조를 로드하는 인터페이스 접근 방식을 말합니다.예: 태블릿에서는 컴팩트하게 표시되지만 산업용 패널 PC에서는 확장된 형태로 표시되는 대시보드입니다.
- 반응형 접근 방식:반응형 접근 방식은 페이지를 전환하지 않고 가용 공간에 따라 실시간으로 콘텐츠를 재배치하는 인터페이스 접근 방식입니다.예시: 창 크기를 조정할 때 4열이 2열로 변경되는 그리드입니다.
각 접근 방식의 사용 시기
아래 표에서는 각 인터페이스 시나리오에 대해 권장되는 접근 방식을 보여줍니다.
시나리오 | 권장 접근 방식 | 구현 절차 |
확장형 접근 방식 구현
컨테이너의 맞춤 속성을 사용하여
FactoryTalk® Optix™
에서 확장성을 쉽게 달성할 수 있습니다.
노트:
확대/축소된 레이아웃 구성을 참조하십시오.
예를 들어 머리글을 만들려면
패널
개체를 사용하고 가로 맞춤을 연장
으로 설정합니다. 이렇게 하면 최종 해상도에 관계없이 개체가 사용 가능한 전체 너비를 차지합니다.
중요:
컨테이너 개체에 고정 크기를 할당하면 인터페이스가 다양한 화면 해상도로 확장되는 것을 방지할 수 있습니다. 필요한 경우에만 고정 크기를 할당합니다.
크기 | 결과 |
|---|---|
800px |  |
1280px |  |
팁:
컨테이너 맞춤을 
연장
으로 설정하면 해상도에 따라 공간이 자동으로 분배됩니다. 응용 프로그램이 고정된 해상도로 개발되더라도 요소는 런타임에 컨테이너에 맞게 그 크기가 조정됩니다.크기 | 결과 |
|---|---|
800px | |
1280px |  |
적응형 접근 방식 구현
큰 해상도 차이(예: 1920x1080 대 480x272)로 디자인할 때는 별도의 레이아웃을 만들어야 합니다.
패널 로더 컨트롤
을 사용하여 해상도에 따라 다양한 레이아웃을 동적으로 로드할 수 있습니다.화면 해상도를 결정하려면
MainWindow
의 너비
및 높이
속성을 사용합니다. 이러한 속성의 모델링 규칙 변경
을 필수
로 설정하여 런타임에 이러한 값을 사용할 수 있도록 합니다.
중요:
모델링 규칙 변경
기능은 고급 사용자만 사용할 수 있습니다. FactoryTalk Optix Studio 옵션
패널에서 고급 모드
를 활성화한 경우에만 이 기능을 볼 수 있습니다.예기치 않은 동작을 방지하기 위해 이 기능의 사용을 이 특정 범위로 제한합니다.
팁:
계산된 값을
MainWindow
내의 도우미 변수에 저장하는 것이 좋은데, 이는 특히 값이 여러 위치에서 사용되는 경우에 유용합니다. 이렇게 하면 여러 컨버터로 구성된 복합 동적 링크
의 반복을 방지하여 노드 수를 줄이고 성능을 향상시킬 수 있습니다.
반응형 접근 방식 구현
패널 로더
를 사용하는 것 외에도 조건부 가시성은 반응형 디자인의 핵심입니다. 예를 들어, 사이드 메뉴는 특정 화면 너비 이상에서만 나타나고, 토글 버튼은 그 임계값 아래에서 나타날 수 있습니다.그리드레이아웃
은 콘텐츠를 동적으로 정렬하는 데 필수적입니다. 행과 열의 수를 정의할 수 있습니다.속성
패널에서 줄 바꿈
속성을 활성
으로 설정하여 세로레이아웃
및 가로레이아웃
기능을 사용할 수도 있습니다.
팁:
그리드 레이아웃 구성을 참조하십시오.
의견을 작성 부탁드립니다.