레이아웃

대시보드 레이아웃은 대시보드 격자에 위젯이 배치되는 방식을 정합니다. 대시보드 상태마다 레이아웃 유형, 설정, 중단점을 따로 둘 수 있어, HMI 용도와 화면 해상도에 맞는 화면을 만들 수 있습니다.

1. 오른쪽 위의 수정 모드 버튼을 클릭해 대시보드 수정 모드로 들어갑니다.
2. 왼쪽 위의 레이아웃 버튼을 클릭해 레이아웃 관리 창을 엽니다.

대시보드 상태마다 레이아웃 유형은 정확히 하나입니다. 플랫폼은 기본값, SCADA, 구분선 세 가지를 지원합니다.

기본값 레이아웃은 대부분의 대시보드에 맞는 범용 레이아웃입니다. 반응형 디자인을 위한 화면 중단점을 지원합니다.

SCADA 레이아웃은 SCADA HMI(사람-기계 인터페이스)를 만들기 위한 레이아웃입니다. SCADA HMI는 보통 SCADA 심볼이라는 크기 조절 가능한 위젯으로 이루어집니다. 같은 레이아웃에서 SCADA 심볼과 다른 MX On Cloud 위젯을 함께 쓸 수도 있습니다. 이 레이아웃 유형도 화면 중단점을 지원합니다.

이전 방식의 구분선 레이아웃은 대시보드를 왼쪽과 오른쪽 두 하위 레이아웃으로 나눕니다. 하위 레이아웃의 너비는 고정 픽셀 값이나 화면 너비에 대한 백분율로 정할 수 있습니다. 기본값 레이아웃의 레이아웃 매개변수 대부분을 하위 레이아웃에서도 쓸 수 있습니다. 다만 하위 레이아웃은 중단점을 지원하지 않습니다.

하위 레이아웃마다 배경, 위젯, 크기를 따로 설정할 수 있습니다.

중단점을 쓰면 최종 사용자의 화면 너비에 따라 서로 다른 레이아웃 설정과 위젯을 정의할 수 있습니다.

대시보드 상태마다 기본 중단점이 있으며, 다른 중단점이 현재 화면 해상도와 맞지 않을 때 이 중단점을 씁니다. 정의할 수 있는 중단점은 다음과 같습니다.

중단점	최소 너비	최대 너비
데스크톱 (xl)	1920 px	5000 px
데스크톱 (lg)	1280 px	1919 px
노트북 (md)	960 px	1279 px
태블릿 (sm)	600 px	959 px
모바일 (xs)	—	599 px

1. 레이아웃 관리 창을 열고 중단점 표에서 +(new breakpoint 추가) 버튼을 클릭합니다.
2. 드롭다운 목록에서 중단점(화면 해상도)을 선택합니다.
3. 필요하면 다른 중단점의 위젯과 레이아웃 설정을 복사합니다.
4. 추가를 클릭합니다.

톱니바퀴 아이콘을 클릭해 그 중단점의 레이아웃 설정을 엽니다.

휴지통 아이콘을 클릭해 중단점을 삭제합니다.

사용자가 대시보드를 열면 화면 해상도에 맞는 중단점 레이아웃이 자동으로 선택됩니다.

대시보드를 편집할 때는 화면 왼쪽 위의 콤보박스로 레이아웃을 바꿉니다.

이 데모 대시보드를 가져와 중단점이 어떻게 동작하는지 살펴볼 수 있습니다. 데모 대시보드를 내려받아 환경에 가져옵니다.

새 중단점 레이아웃을 만들면 원본 레이아웃의 위젯이 모두 참조로 복사됩니다. 위젯 구성 변경은 중단점 사이에 동기화되지만, 위치와 크기는 레이아웃마다 따로입니다.

1. 위젯을 마우스 오른쪽 버튼으로 클릭하고 참조 복사(Ctrl+R)를 선택합니다.
2. 다른 중단점 레이아웃에서 빈 곳을 마우스 오른쪽 버튼으로 클릭하고 참조 붙여넣기(Ctrl+I)를 선택합니다.

수정 모드에서는 편집 패널의 참조 버튼으로 참조 위젯을 알아볼 수 있습니다.

참조를 독립된 복사본으로 바꾸려면 참조 버튼을 클릭하거나, 위젯을 마우스 오른쪽 버튼으로 클릭하고 참조를 위젯 복사본으로 교체를 선택합니다.

위젯 복사본은 완전히 독립된 사본입니다. 복사한 위젯을 바꿔도 원본에는 영향이 없습니다.

1. 위젯을 마우스 오른쪽 버튼으로 클릭하고 복사(Ctrl+C)를 선택합니다.
2. 다른 중단점 레이아웃에서 빈 곳을 마우스 오른쪽 버튼으로 클릭하고 붙여넣기(Ctrl+V)를 선택합니다.

중단점 옆의 톱니바퀴 아이콘을 클릭해 레이아웃 설정을 엽니다.

대시보드 격자는 열로 나뉘며, 열 수가 가로로 들어가는 위젯 수를 정합니다. 기본값은 24열입니다(최소 10, 최대 1000).

가로 스크롤이 생기기 전의 최소 열 수를 정합니다. 가로 스크롤 없이 지원할 가장 작은 레이아웃 너비에 맞춰 값을 정합니다.

위젯 사이의 간격을 정합니다. 기본값은 10입니다(범위: 0–50).

위젯 여백을 레이아웃 가장자리에도 적용할지 정합니다.

켜면 모든 위젯이 화면 높이를 세로로 채웁니다. 끄면(기본값) 위젯 크기를 자유롭게 조정할 수 있습니다.

대시보드 배경색을 바꿉니다. 색상 견본을 클릭해 색상 선택기를 열고 원하는 색과 투명도를 고른 다음 선택을 클릭합니다.

이미지를 대시보드 배경으로 정합니다. 이미지 갤러리에서 고르거나 직접 링크를 넣습니다. 배경 사이즈 모드 드롭다운으로 이미지가 공간을 채우는 방식(예: Cover, Contain)을 정합니다.