# 심볼

> 심볼 라이브러리입니다. 열한 개의 시스템 라이브러리와 내 심볼, 갤러리의 검색과 거르개, 실시간 입력과 연결점을 갖춘 검사기, 새 사용자 심볼 편집기와 모든 가변 영역 갈래, 심볼 가져오기…, 패키지 내보내기, 복제, 대화 지시문 복사, 그리고 심볼이 쓰이는 곳.

**Symbols**는 Assets 뿌리 아래의 네 번째 범주입니다. 대시보드의 [심볼](component-symbol) 구성 요소가 그리고 움직이는 그림입니다. 패널의 머리는 "심볼"이고 "현대적인 대시보드, 시험대, 연결 제품, 표준 도면, 산업 설비와 시설을 위해 만든 라이브러리입니다. 모든 시스템 심볼은 안을 볼 수 있고 내 심볼로 복제할 수 있습니다."라는 줄과 개수 필이 함께 놓입니다. 읽고 살펴보는 데에는 **Logic 보기**가, 만들고 가져오고 복제하고 편집하고 삭제하는 데에는 **Logic 구성**이 필요합니다. 심볼이 실려 다니는 파일 형식은 [옮길 수 있는 SVG 심볼](ganter-symbols)에 적혀 있습니다.

## 라이브러리 {#the-libraries}

| 라이브러리 | 담는 것 | 표준 | 심볼 |
| --- | --- | --- | --- |
| Process | 감시 대시보드와 공정 도면을 위한, 층으로 나뉜 공정 장비 그림 | | 86 |
| ISA / P&ID | 개략적인 공정, 배관, 밸브, 계장 그림 | ANSI/ISA-5.1 / ISO 10628 | 99 |
| Manufacturing & Material Flow | 개별 생산, 조립, 배치, 포장, 검사, 내부 물류 장비 | | 48 |
| Lab & Test Bench | 실험실, DAQ, 계측, 시험 대상 고정구, 환경 시험대, 품질 검사 심볼 | | 35 |
| Prototyping Electronics | 컨트롤러, 개발 보드, 커넥터, 센서 모듈, 액추에이터, 전원, 무선 | | 35 |
| IoT Field Sensors | 환경, 상태, 위치, 계량, 무선 게이트웨이, 엣지 제어 심볼 | | 36 |
| Smart Home & Building | 조명, 쾌적, 출입, 안전, 가전, 물, 그리고 서로 연동되는 제어 장치 | Matter / BACnet / 흔히 쓰는 빌딩 자동화 표기 | 39 |
| IT, Network & Datacenter | 컴퓨트, 랙, 스토리지, 네트워크, 보안, 클라우드 플랫폼, 시설 전원과 냉각 | 흔히 쓰는 IT 인프라 / SNMP / Redfish 표기 | 35 |
| Electrical & Energy | 단선도, 배전, 변환, 계량, 재생 에너지이며 접점 상태를 기하로 나타냅니다 | IEC 60617 / IEEE 315 | 39 |
| Energy, Microgrid & e-Mobility | 분산 발전, 변환, 저장, 계량, 보호, 마이크로그리드, 전기차 충전 | IEC / IEEE / OCPP를 따르는 대시보드 표기 | 40 |
| Facilities & Utilities | 공조, 상하수, 안전 설비, 플랜트 유틸리티, 제어 인프라 | | 38 |
| 내 심볼 | 사용자가 짜 넣거나 가져오거나 복제한 심볼 | | 사용자의 것 |

시스템 라이브러리는 Ganter Lab이 직접 그린 그림이며 제품 안에 컴파일되어 들어가고 읽기 전용입니다. 갱신할 때 스테이션 데이터를 건드리지 않고 그것만 바꿉니다. 정의마다 변하지 않는 참조 `system:<key>`와 자기 라이브러리와 범주, 설명, 검색 태그, 해당하는 표준, 그리고 출처와 사용 조건 메타데이터를 담고 있습니다.

## 갤러리 {#the-gallery}

카드 위에는 이런 것이 있습니다. **검색**(자리 표시는 "이름, 분류 또는 태그"이며 심볼의 이름과 설명과 범주와 표준과 태그를 대소문자 없이 맞춰 봅니다. 라이브러리는 자기 거르개로 고릅니다), **라이브러리**("모든 라이브러리 (530)"이거나 개수가 붙은 라이브러리 하나이며, 하나를 고르면 범주가 지워지고 거르개 아래에 그 라이브러리의 설명이 나옵니다), **분류**("모든 분류"이거나 고른 라이브러리의 분류 하나), **출처**, 그리고 **쪽마다**입니다. 카드는 라이브러리, 그림의 원래 비율로 그린 미리 보기, 이름, 범주, 출처(시스템 또는 내 것), 그리고 능력 줄을 보여 줍니다. 능력 줄은 "고정", "입력 1개", "입력 N개"이며, 심볼이 연결점을 선언하면 뒤에 "· 연결점 N개"가 붙습니다. 결과가 비어 있으면 "이 조건에 맞는 심볼이 없습니다."와 함께 **거르기 모두 지우기**를 내놓습니다. 사용자의 심볼을 읽지 못했을 때는 시스템 묶음을 카탈로그 전체인 척 내놓는 대신 "내 심볼을 지금 쓸 수 없습니다. 시스템 라이브러리만 나열합니다."라고 알립니다.

## 검사기 {#the-inspector}

카드를 고르면 갤러리 옆에 검사기가 열립니다.

- 이름과 배지입니다. **시스템 · 읽기 전용**, **내 심볼**, 또는 심볼이 새것이라 아직 만들어지지 않았거나, 열려 있는 편집에 자동 저장을 막는 오류가 있는 동안만 나타나는 **저장하지 않은 초안**입니다(편집이 자동으로 저장되는 동안에는 저장 직전 0.5초를 포함해 배지가 **내 심볼**로 유지됩니다).
- 라이브러리와 범주와 표준, 그리고 설명입니다.
- **크기**(칸 단위로 제안하는 대시보드 크기, 너비 × 높이)와 **맞춤**(안쪽에 맞춤, 늘이기, 가로로 늘이기, 세로로 늘이기)입니다.
- "입력 N개 · 연결점 N개"이거나, 연결점이 없으면 "보기 전용"입니다.
- **그림 출처**이며, 출처와 시스템 심볼의 경우 사용 조건을 펼쳐 보여 줍니다.
- 동작입니다. 모든 역할에게 **패키지 내보내기**, 시스템 심볼에는 **내 심볼로 복제**, 사용자의 심볼에는 **편집**과 **삭제**(구성할 수 있는 역할에게만)입니다.
- 미리 보기 무대입니다. 대시보드와 같은 런타임이 그리는 정화된 그림이며, 연결점마다 그 앵커에 손잡이가 그려집니다. 그릴 수 없는 그림은 무대를 비워 두고 "미리 보기 없음"와 그 이유를 보여 줍니다. 정화기가 마크업을 고쳐야 했다면 "미리 보기는 정제된 SVG를 씁니다"라는 펼침이 고친 곳을 나열합니다(많아야 여덟 개, 그다음에는 "고친 곳 N개는 보이지 않습니다.").
- **입력**입니다. "여기에서 정한 값은 이 미리 보기에만 적용됩니다."와 **입력 되돌리기**가 함께 놓입니다. 선언된 가변 영역마다 구획이 하나씩 있고, 그 이름과 그것이 움직이는 효과, 대응을 설명하는 문장, 입력 범위와 겨냥한 요소(`#id`), 그리고 시험해 볼 조작이 들어 있습니다. 숫자(입력 범위가 유한하면 슬라이더가 함께 나옵니다), 켜짐/꺼짐 스위치, 텍스트 상자, 또는 칠하기 값 상자가 딸린 색 선택기입니다. 없으면 "이 심볼에는 선언된 동적 입력이 없습니다."이고, 올바르지 않은 선언은 조작 대신 그 오류를 보여 줍니다. 여기에서 정한 값은 결코 저장되지 않고 대시보드에 닿지도 않습니다.

효과와 검사기가 그것을 설명하는 방식은 이렇습니다.

| 갈래(편집기 이름) | 효과 | 조작 | 설명 |
| --- | --- | --- | --- |
| Rotate | 회전 | 숫자 | `<output min>`°에서 `<output max>`°까지 회전합니다 |
| Opacity | 불투명도 | 숫자 | 불투명도를 `<output min>`에서 `<output max>`까지 바꿉니다 |
| Fill | 채움 상태 | 스위치 | 채움을 꺼짐 색에서 켜짐 색으로 바꿉니다. 숫자 신호원은 입력 범위의 가운데에서 바뀝니다 |
| Visible | 보임 여부 | 스위치 | 꺼짐이면 요소를 숨기고 켜짐이면 보여 줍니다 |
| Text | 표시되는 문구 | 텍스트 | 요소 안에 표시되는 문구를 바꿉니다 |
| Translate | 위치 | 숫자 | (x, y)에서 (x, y) SVG 단위만큼 움직입니다 |
| Scale | 배율 | 숫자 | (x, y)에서 (x, y)까지 배율을 바꿉니다 |
| Stroke | 선 상태 | 스위치 | 선을 꺼짐 색과 켜짐 색 사이에서 바꿉니다. 숫자 신호원은 가운데에서 바뀝니다 |
| Spin (°/s) | 회전 속도 | 숫자 | `<min>`°/s에서 `<max>`°/s까지 계속 회전합니다. 0이면 멈추고 음수이면 방향이 반대가 됩니다 |
| Spin enabled | 회전 상태 | 스위치이며 기본값은 켜짐 | 요소를 숨기거나 각도를 되돌리지 않고 회전을 멈추거나 다시 돌립니다 |
| Fill color | 채움 색 | 색 | 색 자산, 색 변수 또는 미리 보기 색 값에서 채움을 그대로 정합니다 |
| Stroke color | 선 색 | 색 | 색 자산, 색 변수 또는 미리 보기 색 값에서 선을 그대로 정합니다 |
| Stroke width | 선 두께 | 숫자 | 선 두께를 0.5에서 32 SVG 단위 사이로 그대로 정합니다 |

## 새 사용자 심볼 {#new-user-symbol}

Symbols 행 위의 동사는 갤러리의 열에 편집기를 엽니다("새 사용자 심볼": "동작이 없는 SVG와 그 이름 있는 대시보드 입력 가변 영역을 구성합니다."). 검사기는 입력하는 대로 저장하지 않은 초안을 따라가므로, 만들기 전에 심볼을 시험해 볼 수 있습니다.

| 칸 | 무엇인가 | 값과 기본값 | 효과 |
| --- | --- | --- | --- |
| 이름 | 표시 이름. | 필수이며 비어 있으면 "이름이 있어야 합니다."입니다. | 아이콘이나 색과 달리 심볼의 이름은 나중에 바꿀 수 있습니다. 대시보드는 그것을 id로 참조하기 때문입니다. |
| SVG 마크업 | 그림이며 글자로 붙여 넣습니다. | 필수입니다. | 입력하는 대로 정화됩니다. 그림 오류("SVG 마크업에는 `<svg>` 뿌리가 있어야 합니다.", "SVG 마크업이 512 KB 한도를 넘습니다.", 같은 id를 두 번 씀 같은 것)는 만들기와 모든 가변 영역을 막습니다. |
| 맞춤 | 그림이 대시보드 칸을 채우는 방식. | 안쪽에 맞춤(기본값), 양쪽으로 늘이기, 가로로 늘이기, 세로로 늘이기. | 심볼을 놓을 때 대시보드 편집기가 읽습니다. |
| 처음 너비, 처음 높이 | 새 대시보드 인스턴스가 시작하는 크기. | 1에서 24칸, 1에서 12칸이며 기본값은 4 × 4입니다. | 위와 같습니다. |
| 연결점 | 읽기 전용 알림. | "이 그림은 보기 전용입니다. 형식이 있는 연결점은 Ganter Symbol v2 패키지로 넣을 수 있습니다." 또는 "패키지가 정한 연결점 N개가 그대로 있습니다. 연결점의 좌표는 Ganter Lab에서 일부러 읽기 전용으로 둡니다." | 연결점은 여기에서 그리거나 편집할 수 없습니다. 가져온 패키지나 복제한 시스템 심볼에서 오며, 편집해도 그대로 남습니다. |
| 가변 영역 | 심볼이 내보내는 입력입니다("가변 영역 하나는 SVG 요소 id 하나를 겨냥하고, 안전한 실행 요소 하나를 내보냅니다."). | **가변 영역 추가**가 만들어진 이름(`param`, 그다음 번호가 붙은 것) 아래에 행을 덧붙입니다. | 행마다 이름, 요소 id(마크업에서 찾은 id를 나열하는 콤보 상자이며 아무 id나 입력할 수도 있습니다), **가변 영역 제거**, 갈래, 입력 최솟값과 최댓값, 출력 최솟값과 최댓값(Translate와 Scale에서는 X축), 선택 사항인 Y 최솟값과 최댓값 쌍, 그리고 갈래마다의 것이 있습니다. Stroke width에는 "대시보드 값은 0.5에서 32까지의 SVG 두께를 그대로 씁니다."라는 알림이, Fill color와 Stroke color에는 미리 보기 색이, 그 밖의 모든 갈래에는 켜짐 색과 꺼짐 색이 있습니다. |

가변 영역 규칙은 이렇고, 저마다 칸 아래에 알려지며 문제가 된 행에 테두리가 그려집니다. 이름은 식별자여야 하고(먼저 글자나 `_`, 그다음에 글자, 숫자, `_`, `.`, `:`, `-`) 고유해야 합니다. 요소 id는 마크업에 있어야 합니다. Text는 `text`와 `tspan`만 겨냥합니다. Fill과 Fill color는 채울 수 있는 도형과 그룹과 `use`와 글자를 겨냥합니다. 그 밖의 갈래는 그룹과 `use`와 도형과 글자를 겨냥합니다. Rotate와 Spin과 Scale은 요소가 `data-ganter-pivot="x y"`를 달고 있어야 합니다. 모든 범위 값은 유한해야 합니다. Y 쌍은 둘 다 있거나 둘 다 없어야 하고 Translate와 Scale에만 있습니다. 켜짐 색과 꺼짐 색은 16진수이거나 `var(--color-success)` 같은 테마 토큰이거나 CSS 색 이름이어야 합니다. 한 요소는 채널마다 많아야 가변 영역 하나를 받습니다(채움, 선, 선 두께, 그리고 그 밖의 갈래마다 하나). Spin enabled 가변 영역에는 같은 요소에 Spin 가변 영역이 있어야 합니다.

**심볼 만들기**는 오류가 하나라도 남아 있는 동안 회색으로 남습니다. **취소**나 **뒤로**는 만들지 않고 떠납니다. 성공하면 작업 기록 줄이 "심볼을 만들었습니다."라고 말하고 새 카드가 선택됩니다.

## 편집, 복제, 삭제 {#edit-duplicate-delete}

**편집**(사용자의 심볼만)은 "올바른 이름, SVG, 가변 영역 변경은 자동으로 저장됩니다."와 함께 같은 편집기를 엽니다. 올바른 변경은 마지막 편집 뒤 0.5초 만에 저장되고("심볼을 저장했습니다."), 올바르지 않은 초안은 저장되지 않으며 기다리던 저장도 취소되므로, 저장된 심볼이 검사기가 보여 주는 것과 어긋나는 일은 없습니다. **내 심볼로 복제**(시스템 심볼)는 그림과 뷰 박스와 맞춤과 크기와 종류 구성과 연결점과 제안을 "`<Name>` copy"라는 이름(이미 쓰이면 "`<Name>` copy 2"…)의 독립된 심볼로 복사하고 갤러리에서 선택할 뿐 편집기는 열지 않습니다("시스템 심볼을 내 심볼로 복사했습니다."). 검사기가 그 옆에 보여 주고, 복사본을 가릴 검색이나 필터는 지워지며, 갤러리는 그것이 든 페이지로 넘어갑니다. 편집기는 **편집**으로 엽니다. 시스템 정의는 결코 바뀌지 않습니다. **삭제**는 "'X'을(를) 삭제하시겠습니까? 이 심볼을 쓰는 대시보드에는 자리 표시가 대신 나타납니다. 이 작업은 되돌릴 수 없습니다."라고 묻습니다("심볼을 삭제했습니다.").

## 심볼 가져오기… {#import-symbol}

행 위의 두 번째 동사는 최대 1 MB의 `.svg` 파일과 `.ganter-symbol.json` 파일을 받는 파일 선택기입니다("심볼 파일이 1 MB 한도보다 큽니다."). 내용이 어느 길로 갈지 정합니다.

- **원시 SVG**(내용이 `<`로 시작합니다)는 보기 전용 그림으로 들어옵니다. 가변 영역도 연결점도 없습니다. 정화기가 그것을 고치고 작업 기록 줄이 고친 수를 셉니다("심볼을 새 자산으로 가져왔고, 안전하지 않은 SVG 항목 3개를 제거했습니다."). 이름은 확장자를 뺀 파일 이름입니다.
- **Ganter symbol v2 패키지**(내용이 `{`로 시작합니다)는 통째로 들어옵니다. 이름, SVG, 뷰 박스, 맞춤, 크기, 가변 영역, 종류 구성, 연결점, 제안입니다. 패키지는 엄격합니다. 형식과 버전과 스키마가 맞아야 하고, SVG는 이미 정화되어 있어야 하며(고쳐야 하는 패키지는 고쳐지는 것이 아니라 거부됩니다), 뷰 박스는 SVG 뿌리와 맞아야 하고, 모든 연결점과 구성과 제안이 올바라야 합니다([규약](ganter-symbols)). 작업 기록 줄은 첫 문제를 밝힙니다("심볼을 가져오지 못했습니다: …").

사용자의 심볼이 이미 쓰고 있는 이름에는 꼬리가 붙습니다(" 2", " 3"…). 모든 가져오기는 새 심볼을 만들며 결코 있던 것을 덮어쓰지 않습니다.

## 패키지 내보내기 {#export-package}

검사기의 **패키지 내보내기**는 고른 심볼을 시스템의 것이든 사용자의 것이든 `<name>.ganter-symbol.json`으로 내려받습니다. 가져오기가 읽는 그 v2 패키지이며 스테이션의 신원은 담지 않으므로 스테이션 사이를 옮겨 다닙니다("`<file>`을(를) 내보냈습니다."). 그림에 뿌리 뷰 박스가 없는 심볼이나, 가변 영역 가운데 스테이션 주소를 담은 것이 있는 심볼은 거부됩니다("심볼을 내보내지 못했습니다: …").

## 대화 지시문 복사 {#copy-chat-instruction}

**대화 지시문 복사**는 스테이션에 닿을 수 없는 바깥의 AI 대화를 위한 자족적인 지시문을 클립보드에 복사합니다. 이 지시문은 "Ganter Lab 심볼을 만들어 주십시오. 파일 내용만, 곧 원시 SVG이거나 하나의 .ganter-symbol.json v2 패키지만, 아무 설명 없이 돌려주십시오. 그대로 파일로 저장해 그대로 가져올 수 있어야 합니다."로 시작해, v2 규약 전체(받아들이는 두 입력, 패키지 봉투, 열여섯 개의 공통 앵커, 여덟 가지 연결선 종류, 가변 영역 갈래와 그 규칙, 테마 토큰, 연결점 좌표 규칙, 정화기의 한계, 그리고 최소한의 올바른 패키지)로 이어지며, 답을 되가져오는 방법으로 끝납니다. 답을 `.svg`나 `.ganter-symbol.json` 파일로 저장해 여기에서 가져오는 것입니다. 에이전트의 `symbol_validate`와 `symbol_import` 도구가 읽는 것도 같은 규약이므로, 대화와 에이전트는 같은 파일을 만들어 냅니다. 작업 기록 줄은 "대화 지시문을 복사했습니다. 아무 AI 대화에 붙여 넣고, 돌아온 SVG를 가져오십시오."라고 말합니다(또는 "클립보드가 복사를 거부했습니다."). 이 동사는 읽기만 하므로 모든 역할에게 그려집니다.

## 심볼이 쓰이는 곳 {#where-a-symbol-is-used}

대시보드의 [심볼](component-symbol) 구성 요소는 심볼을 `system:<key>`나 `user:<id>`로 참조하고, 가변 영역마다 Logic 주소를 대응시키며, 구성할 수 있는 연결점의 연결선 종류를 고르고, [대시보드 편집기](view-editor)에서 그린 연결선으로 [연결선 종류](assets-connection-types)를 거쳐 연결점을 잇습니다. 심볼에는 자기 Logic 주소가 없습니다.

## 이 라이브러리가 하지 않는 일 {#what-the-library-does-not-do}

이 라이브러리는 연결점과 내부 경로를 그리거나 옮기지 않고, 시스템 그림을 그 자리에서 편집하지 않으며, 고쳐야 하는 패키지를 가져오지 않고, 버전 이력을 남기지 않으며, 사용자의 심볼을 스테이션 사이에서 저절로 나누어 쓰지도 않습니다. 패키지를 내보내고 가져오십시오.