스타일링 및 테마

IronFlock의 모든 보드는 기본 모양을 제공하지만 외형을 완전히 제어할 수 있습니다. 대시보드 스타일 설정을 통해 테마 적용, 그리드 레이아웃 조정, 위젯 모양 제어를 단일 설정 패널에서 모두 수행할 수 있습니다. 다른 모양이 필요한 개별 위젯의 경우 위젯 에디터에서 직접 전체 스타일을 오버라이드할 수 있습니다.

테마

테마는 한 번의 클릭으로 보드의 전체적인 시각적 톤을 설정합니다. IronFlock에는 내장 테마 세트가 제공됩니다 — 각 테마는 전체 대시보드에 적용되는 색상, 배경, 스타일 기본값의 조화로운 팔레트를 정의합니다.

테마 적용 방법:

1. 보드 설정 패널을 엽니다(상단 도구 모음의 기어 아이콘).
2. 테마 섹션으로 이동합니다.
3. 목록에서 테마를 선택합니다.

모든 위젯, 배경, 텍스트 색상이 즉시 선택된 테마와 일치하도록 업데이트됩니다.

테마는 시작점이며 고정된 선택이 아닙니다. 테마를 선택한 후 개별 설정(색상, 테두리, 배경)을 오버라이드할 수 있으며 이러한 오버라이드가 테마 기본값보다 우선됩니다.

레이아웃

보드 캔버스에는 위젯 배치, 다양한 화면 크기에서의 캔버스 동작, 보드 스크롤 또는 스케일 여부를 제어하는 여러 레이아웃 속성이 있습니다. 이러한 속성이 함께 작동하여 대시보드의 공간적 동작을 정의합니다.

그리드 스냅

그리드 스냅이 활성화되면 위젯을 배치하거나 이동할 때 가장 가까운 그리드 셀에 스냅됩니다. 그리드는 캔버스를 행과 열의 매트릭스로 분할합니다 — 위젯은 항상 셀 경계에 맞춰 정렬되어 레이아웃이 구조적으로 유지됩니다.

그리드 스냅이 비활성화되면 위젯을 픽셀 수준의 정밀도로 캔버스의 어디에나 자유롭게 배치할 수 있습니다. 이것은 심볼을 프로세스 다이어그램, 평면도 또는 장비 개략도에 맞게 정확한 위치에 배치해야 하는 SCADA 스타일 레이아웃에 사용하는 모드입니다.

그리드 스냅 속성:

• 열 — 캔버스의 수직 분할 수. 열 수가 많을수록 더 세밀한 수평 위치 지정이 가능합니다. 수가 낮을수록 위젯이 더 넓은 위치에 스냅됩니다.
• 행 — 수평 분할 수. 행이 많을수록 더 세밀한 수직 제어가 가능하며, 행이 적을수록 더 거친 수직 스냅이 됩니다.

팁: 그리드 스냅을 사용하는 SCADA 보드의 경우 여전히 그리드 정렬의 이점을 누리면서 심볼 배치에 대한 세밀한 제어를 위해 높은 수의 행과 열(예: 48×32 이상)을 구성하십시오.

오버플로우 X / 오버플로우 Y

이 속성은 캔버스가 보이는 뷰포트를 넘어 확장되는지 여부를 제어합니다.

• 오버플로우 X — 활성화되면 캔버스가 화면의 오른쪽 가장자리를 넘어 확장될 수 있습니다. 초기 뷰포트 너비를 벗어난 콘텐츠로 스크롤할 수 있도록 수평 스크롤바가 나타납니다. 화면 크기가 조정되어도 위젯은 수평으로 스케일되지 않습니다.
• 오버플로우 Y — 활성화되면 캔버스가 화면의 하단 가장자리를 넘어 확장될 수 있습니다. 초기 뷰포트 높이 아래에 배치된 콘텐츠에 대해 수직 스크롤바가 나타납니다. 화면 크기가 조정되어도 위젯은 수직으로 스케일되지 않습니다.

오버플로우는 그리드 스냅이 켜진 상태와 꺼진 상태 모두에서 작동합니다. 오버플로우가 한 방향으로 활성화되면 레이아웃은 그 방향으로 반응형이 되지 않습니다 — 위젯은 창과 함께 늘어나거나 줄어드는 대신 크기를 유지합니다. 이것은 전체 레이아웃을 창에 맞게 압축해서는 안 되는 대형 SCADA 다이어그램, 넓은 프로세스 플로우, 또는 높은 장비 개략도에 유용합니다.

두 오버플로우가 모두 비활성화되면 위젯이 보이는 영역으로 제한되고 화면에 반응형으로 스케일됩니다.

스케일 맞춤

스케일 맞춤은 전체 보드가 사용 가능한 화면 공간을 채우도록 비례적으로 스케일합니다. 캔버스에 고정 종횡비를 정의하면 보드가 해당 비율을 유지하면서 브라우저 창에 맞게 크기가 조정됩니다.

스케일 맞춤 속성:

• 종횡비 — 캔버스의 너비 대 높이 비율(예: 16:9, 4:3, 또는 커스텀 값). 실제 화면 크기에 관계없이 보드는 항상 이 비율을 유지합니다. 화면의 종횡비가 일치하지 않으면 측면 또는 상단/하단에 빈 공간(레터박스)이 나타납니다.

스케일 맞춤은 그리드 스냅이 켜진 상태와 꺼진 상태 모두에서 작동합니다. 오버플로우와 상호 배타적입니다 — 스케일 맞춤이 활성화되면 전체 레이아웃이 항상 보이므로 캔버스가 스크롤되지 않습니다.

이 모드는 다음에 이상적입니다:

• 제어실 디스플레이 — 대시보드가 스크롤이나 왜곡 없이 모든 모니터를 깔끔하게 채웁니다
• 키오스크 화면 — 다양한 화면 크기에 자동으로 적응하는 고정 레이아웃
• 프레젠테이션 대시보드 — 노트북, 프로젝터, 벽걸이 화면에서 일관된 모양

위젯 고정 크기

각 위젯에는 개별적으로 토글할 수 있는 선택적 고정 너비 및 고정 높이 속성이 있습니다. 활성화되면 화면 크기가 조정될 때 위젯이 해당 방향으로 크기가 조정되지 않습니다 — 나머지 보드 레이아웃은 유동적으로 유지되면서 해당 축에서 반응하지 않게 됩니다.

이것은 화면 크기에 관계없이 특정 요소가 안정적인 크기를 유지해야 할 때 유용합니다. 예를 들어, 텍스트 레이블이 포함된 탐색 사이드바는 보드의 나머지가 반응형으로 스케일되더라도 텍스트가 읽기 가능하도록 고정 너비를 유지해야 합니다.

위젯에 고정 크기 설정 방법:

1. 캔버스에서 위젯을 선택합니다.
2. 위젯 에디터를 엽니다.
3. 고정 너비 및/또는 고정 높이를 활성화합니다.

SCADA 심볼과 고정 크기

SCADA 심볼이 보드에 배치되면 기본적으로 고정 너비와 고정 높이가 모두 활성화됩니다. 위젯 도구 모음의 강조 표시된 아이콘이 활성 고정 크기 제약을 나타냅니다:

SCADA 심볼은 물리적 장비 및 프로세스 요소를 나타냅니다 — 실제 세계 레이아웃을 정확하게 묘사하기 위해 비율과 상대적 위치를 유지해야 합니다. 반응형 그리드 스냅 모드에서는 심볼 크기가 고정되어 있을 때만 가능합니다. 고정 크기가 없으면 반응형 재스케일링이 심볼을 왜곡하고 정렬을 벗어나게 합니다.

이러한 레이아웃 모드가 특히 SCADA 대시보드에 어떻게 적용되는지에 대한 개요는 SCADA 보드 레이아웃 옵션을 참조하십시오.

레이아웃 모드 요약

레이아웃 속성 구성 방법:

1. 보드 설정 패널을 엽니다.
2. 레이아웃 섹션을 찾습니다.
3. 그리드 스냅을 토글하고 행/열을 설정하거나, 비활성화하고 원하는 종횡비로 오버플로우 또는 스케일 맞춤을 구성합니다.

전체 위젯 스타일링

테마 외에도 대시보드 스타일 설정에서 모든 위젯의 모양을 세부적으로 조정할 수 있습니다. 이 설정은 전체적으로 적용됩니다 — 개별적으로 오버라이드되지 않는 한 보드의 모든 위젯이 이를 상속합니다.

커스터마이즈 가능한 항목:

• 테두리 — 위젯 주변의 테두리 너비와 색상 제어. 테두리 없는 모양을 위해 0으로 설정하거나 위젯을 시각적으로 분리하기 위해 두드러지게 만들기.
• 모서리 둥글기 — 테두리 반경을 조정하여 날카로운 직각 모서리에서 완전히 둥근 카드로 변경.
• 배경 — 위젯 배경 색상을 설정하거나 보드 배경이 보이도록 위젯을 투명하게 만들기.

전체 위젯 스타일 설정 방법:

1. 보드 설정 패널을 엽니다.
2. 스타일 섹션으로 이동합니다.
3. 필요에 따라 테두리, 모서리 둥글기, 배경 설정을 조정합니다.

이러한 변경 사항은 보드의 모든 위젯에 즉시 적용됩니다.

위젯별 스타일 오버라이드

때로는 단일 위젯이 눈에 띄어야 할 때가 있습니다 — 색상 배경의 상태 표시기, 테두리가 없는 헤더 카드, 또는 여분의 패딩이 있는 차트. 전체 스타일을 변경하는 대신 해당 특정 위젯에 대해 오버라이드할 수 있습니다.

단일 위젯의 스타일 오버라이드 방법:

1. 캔버스에서 위젯을 클릭하여 선택합니다.
2. 위젯 에디터(위젯의 설정 패널)를 엽니다.
3. 위젯 에디터 내의 스타일 또는 모양 설정을 찾습니다.
4. 해당 위젯에 대해서만 테두리, 모서리 둥글기, 또는 배경을 조정합니다.

위젯별 설정이 전체 대시보드 스타일보다 우선됩니다. 나중에 전체 스타일을 변경하거나 테마를 전환하더라도 오버라이드가 있는 위젯은 커스텀 모양을 유지합니다.

팁: 전체 스타일을 사용하여 일관된 기준선을 설정한 다음 특별 처리가 필요한 요소에 위젯별 오버라이드를 절제하여 사용하십시오.

종합

일반적인 스타일링 워크플로우는 다음과 같습니다:

1. 프로젝트의 시각적 정체성에 맞는 테마를 선택합니다.
2. 위젯 배치를 더 정밀하게 제어해야 하는 경우 그리드를 조정합니다.
3. 테마를 세밀하게 조정하기 위해 테두리, 모서리, 배경에 전체 위젯 스타일을 설정합니다.
4. 특정 요소에 다른 모양이 필요한 위젯 에디터에서 개별 위젯을 오버라이드합니다.

이 계층적 접근 방식 — 테마 → 전체 스타일 → 위젯별 오버라이드 — 은 중요한 곳에서 완전한 유연성을 제공하면서 보드를 일관성 있게 유지합니다.