HMI 화면 편집기 상세 설명

HMI 화면 편집기는 개발자가 코드를 직접 작성하지 않고도 설비 운전화면을 만들 수 있게 하는 설계 도구입니다.

단순한 그림 편집기가 아니라 다음 정보를 하나의 프로젝트로 구성하는 핵심 프로그램입니다.

• 화면과 팝업
• 설비 그래픽
• PLC 태그
• 표시조건
• 운전 명령
• 사용자 권한
• 알람과 트렌드
• 화면 전환
• 시뮬레이션

화면 편집기에서 만든 프로젝트를 eHMI Runtime이 읽어 실제 설비를 감시하고 제어합니다.

 

 

 

1. 화면 편집기의 역할

화면 편집기는 다음 세 가지 역할을 수행합니다.

화면을 시각적으로 설계

버튼, 램프, 숫자, 탱크, 모터 등을 마우스로 배치합니다.

화면과 PLC 태그를 연결

모터 그림에 Motor_Run 태그를 연결하면 PLC 값에 따라 모터 색상과 운전상태가 바뀝니다.

실행 프로젝트 생성

화면, 태그, 조건, 권한 등을 프로젝트 파일로 저장해 Runtime으로 전달합니다.

---

2. 화면 편집기 기본 구성

전문 HMI 편집기는 다음과 같은 구조가 적합합니다.

위치주요 기능

상단	메뉴와 도구모음
왼쪽 상단	프로젝트 탐색기
왼쪽 하단	오브젝트 도구상자
중앙	화면 디자인 영역
오른쪽	속성 편집기
하단	오류·검색·통신 출력
상태표시줄	좌표·크기·배율·해상도

프로젝트 탐색기

프로젝트의 전체 구조를 트리 형태로 표시합니다.

eHMI 프로젝트

├─ 프로젝트 설정

├─ 통신 장치

├─ 태그

├─ 화면

│ ├─ 001 종합현황

│ ├─ 002 설비운전

│ ├─ 003 알람현황

│ └─ 101 모터상세 팝업

├─ 템플릿

├─ 알람

├─ 로깅

├─ 레시피

├─ 사용자·권한

├─ 스크립트

└─ 리소스

 

프로젝트 탐색기에서 화면 추가, 복사, 삭제, 이름 변경과 실행 초기화면 지정 등을 처리합니다.

오브젝트 도구상자

화면에 배치할 수 있는 객체를 분류하여 제공합니다.

• 기본 도형
• 문자·이미지
• 입력·출력
• 스위치·램프
• 설비 부품
• 그래프
• 알람
• 레시피
• 화면 전환
• 사용자 라이브러리

화면 디자인 영역

실제 HMI 해상도와 동일한 크기의 가상 화면입니다.

여기에서 오브젝트를 배치하고 이동하거나 크기를 조절합니다.

속성 편집기

선택한 화면이나 오브젝트의 속성을 변경합니다.

속성은 다음 그룹으로 나누는 것이 좋습니다.

• 기본
• 위치·크기
• 모양
• 문자
• 태그
• 상태조건
• 동작
• 보안
• 기타

---

3. 화면 종류

기본화면

Runtime에서 전체화면으로 표시되는 일반 운전화면입니다.

예:

• 종합현황
• 라인현황
• 설비운전
• 생산현황
• 알람
• 트렌드

팝업 화면

기본화면 위에 표시되는 작은 화면입니다.

예:

• 모터 상세정보
• 온도 설정
• 알람 조치방법
• 사용자 로그인
• 운전 확인창

팝업에는 다음 설정이 필요합니다.

• 화면 크기
• 표시 위치
• 제목 표시
• 닫기 버튼
• 모달 여부
• 외부 클릭 시 닫기
• 여러 팝업 허용 여부

템플릿 화면

여러 화면에서 공통으로 사용하는 구성입니다.

예:

• 상단 제목
• 현재시간
• 로그인 사용자
• 통신상태
• 하단 메뉴
• 알람 표시줄

템플릿을 수정하면 사용하는 모든 화면에 변경 내용이 반영되어야 합니다.

부품 화면

모터, 펌프, 탱크 등 복잡한 설비 객체를 하나의 재사용 부품으로 만드는 화면입니다.

부품마다 외부에서 태그를 전달할 수 있어야 합니다.

예를 들어 MotorSymbol에 다음 태그를 연결합니다.

• 운전 태그
• 고장 태그
• 수동 태그
• 속도 태그
• 통신상태 태그

---

4. 화면 속성

각 화면에는 다음 정보가 필요합니다.

속성설명

화면 ID	내부 고유번호
화면명	종합현황, 설비운전
화면유형	기본, 팝업, 템플릿
너비·높이	기준 해상도
배경색	화면 기본색
배경 이미지	공정도·설비도
초기화면	Runtime 시작화면 여부
접근 권한	화면 열람 가능 권한
열기 이벤트	화면을 열 때 실행
닫기 이벤트	화면을 닫을 때 실행
갱신주기	화면 태그 표시주기
템플릿	적용할 공통 화면

화면번호와 화면명은 별도로 관리하는 것이 좋습니다.

화면명이 변경되더라도 화면 전환 관계가 깨지지 않도록 화면 ID를 기준으로 연결해야 합니다.

---

5. 기본 오브젝트

문자

제목, 단위, 설명 등을 표시합니다.

• 직접 문자열
• 문자열표 참조
• 다국어
• 태그값 조합
• 조건별 문자열

이미지

설비 사진, 공정도, 회사 로고 등을 표시합니다.

지원 형식:

• PNG
• JPEG
• BMP
• SVG

설비 아이콘은 확대해도 품질이 유지되는 SVG가 유리합니다.

기본 도형

• 선
• 사각형
• 둥근 사각형
• 원
• 타원
• 다각형
• 화살표
• 연결선

배관과 공정 흐름을 표현할 때 사용합니다.

---

6. HMI 전용 오브젝트

램프

PLC 상태에 따라 색상이나 이미지를 변경합니다.

예:

PLC 상태표시

정지	회색
운전	녹색
수동	파란색
경고	노란색
고장	빨간색 점멸
통신오류	어두운 회색

램프 유형은 다음과 같습니다.

• 비트 램프
• 워드 램프
• 다중 상태 램프

스위치

PLC에 값을 쓰는 운전 객체입니다.

• 비트 ON
• 비트 OFF
• 반전
• 누르는 동안 ON
• 워드값 쓰기
• 화면 전환
• 팝업 열기
• 알람 확인

중요한 스위치에는 권한, 확인 메시지와 PLC 응답 확인이 필요합니다.

숫자 표시기

온도, 압력, 속도, 생산량 등을 표시합니다.

주요 속성:

• 자료형
• 부호
• 정수·실수
• 소수점 자릿수
• 단위
• 자릿수
• 천 단위 구분
• 스케일 변환
• 범위별 색상

숫자 입력기

작업자가 설정값을 입력합니다.

필수 기능:

• 최소·최대값
• 입력 자릿수
• 소수점
• 키패드
• 비밀번호 입력
• 권한 확인
• 변경 전·후 값 기록
• PLC 쓰기 성공 확인

게이지와 막대

현재 값을 시각적으로 표현합니다.

• 수평 막대
• 수직 막대
• 원형 게이지
• 탱크 수위
• 온도계
• 진행률

트렌드

시간에 따른 값의 변화를 표시합니다.

• 실시간 트렌드
• 과거 트렌드
• 여러 태그 동시 표시
• 확대·축소
• 커서
• 상한·하한선
• CSV 출력

알람 목록

알람 발생과 복구 내용을 표시합니다.

• 발생시간
• 알람명
• 설비
• 상태
• 확인시간
• 확인자
• 복구시간
• 조치내용

---

7. 오브젝트 공통 속성

모든 오브젝트는 공통 속성 모델을 가져야 합니다.

식별 속성

• 오브젝트 ID
• 오브젝트명
• 오브젝트 유형
• 설명
• 화면 ID

위치 속성

• X
• Y
• 너비
• 높이
• 회전각도
• 표시순서
• 고정 여부

표시 속성

• 배경색
• 테두리색
• 테두리 두께
• 투명도
• 글꼴
• 문자색
• 정렬
• 이미지

데이터 속성

• 연결 태그
• 자료형
• 표시형식
• 스케일
• 단위
• 갱신주기

동작 속성

• 클릭
• 누름
• 놓음
• 더블클릭
• 값 변경
• 화면 열기
• 화면 닫기

보안 속성

• 조회 권한
• 조작 권한
• 재인증 여부
• 확인 메시지
• 감사이력 저장 여부

---

8. 태그 바인딩

태그 바인딩은 PLC 값과 오브젝트 속성을 연결하는 기능입니다.

하나의 태그를 단순히 표시하는 것에서 더 나아가 여러 속성에 연결할 수 있어야 합니다.

바인딩 대상동작 예

Text	PLC 값을 문자로 표시
FillColor	상태에 따라 색상 변경
Visible	조건이 맞을 때 표시
Enabled	운전 가능할 때 활성화
Blink	고장 시 점멸
Rotation	값에 따라 회전
Position	위치 이동
Image	상태별 이미지 변경

예를 들어 모터 객체는 다음처럼 구성합니다.

운전 태그 ON → 녹색

고장 태그 ON → 빨간색 점멸

수동 태그 ON → 파란색 테두리

통신 품질 불량 → 회색 및 조작 금지

 

표시 우선순위도 필요합니다.

통신오류 > 고장 > 경고 > 운전 > 정지

 

---

9. 조건 편집기

사용자가 코드를 작성하지 않고 조건을 설정할 수 있어야 합니다.

예:

Motor_Fault = ON

Temperature >= 100

Pressure < LowLimit

AutoMode = ON AND Ready = ON

 

조건 편집기는 다음 방식으로 제공합니다.

• 태그 선택
• 비교 연산자 선택
• 고정값 또는 태그 선택
• AND·OR 조합
• 조건 결과 미리보기

조건은 다음 기능에 적용합니다.

• 색상
• 표시·숨김
• 활성화·비활성화
• 점멸
• 이미지
• 문자
• 운전 가능 여부
• 팝업 호출

간단한 동작은 조건 편집기로 처리하고 복잡한 동작만 스크립트를 사용하는 것이 좋습니다.

---

10. 이벤트와 동작

오브젝트에는 여러 이벤트를 설정할 수 있습니다.

지원 이벤트

• Click
• MouseDown
• MouseUp
• DoubleClick
• ValueChanged
• ScreenOpened
• ScreenClosed
• AlarmOccurred

지원 동작

• 비트 ON·OFF
• 비트 반전
• 워드값 쓰기
• 다른 태그값 복사
• 화면 전환
• 팝업 열기·닫기
• 알람 확인
• 레시피 읽기·쓰기
• 로깅 시작·정지
• 사용자 로그인
• 스크립트 실행

한 이벤트에서 여러 동작을 순서대로 실행할 수 있어야 합니다.

---

11. 편집 기능

선택

• 단일 선택
• Ctrl 다중 선택
• 영역 선택
• 전체 선택
• 겹친 객체 선택
• 선택 잠금

이동과 크기 조절

• 마우스 이동
• 화살표키 미세 이동
• 핸들 크기 조절
• 좌표 직접 입력
• 동일 크기
• 화면 중앙 정렬

정렬

• 왼쪽 맞춤
• 오른쪽 맞춤
• 위쪽 맞춤
• 아래쪽 맞춤
• 가로 중앙
• 세로 중앙
• 가로 간격 동일
• 세로 간격 동일

복사

• 복사·붙여넣기
• 연속 복사
• 주소 자동 증가
• 문자열 번호 증가
• 화면 간 복사
• 프로젝트 간 복사

순서

• 맨 앞으로
• 앞으로
• 뒤로
• 맨 뒤로

그룹

여러 객체를 하나의 객체처럼 이동하고 크기를 변경합니다.

---

12. 실행 취소와 다시 실행

화면 편집기에는 Undo와 Redo가 필수입니다.

다음 작업을 취소할 수 있어야 합니다.

• 객체 추가·삭제
• 이동
• 크기 변경
• 속성 변경
• 그룹
• 정렬
• 붙여넣기
• 태그 변경

C#에서는 명령 패턴을 적용하는 것이 적합합니다.

 

public interface IEditorCommand

{

void Execute();

void Undo();

}

 

모든 편집 작업을 명령 객체로 만들면 실행 취소와 변경 이력 관리가 쉬워집니다.

---

13. 격자와 스냅

정확한 화면 설계를 위해 다음 기능이 필요합니다.

• 격자 표시
• 격자 간격 설정
• 격자에 붙이기
• 안내선
• 오브젝트에 붙이기
• 동일 간격 안내
• 화면 경계 맞춤
• 좌표 표시

터치형 HMI에서는 버튼 크기와 간격이 중요하므로 설계 가이드 기준선도 제공하는 것이 좋습니다.

---

14. 사용자 라이브러리

자주 사용하는 설비 객체를 라이브러리에 등록합니다.

예:

• 모터
• 펌프
• 밸브
• 컨베이어
• 탱크
• 로봇
• 실린더
• 센서
• 경광등

라이브러리 객체에는 태그 파라미터를 지정합니다.

Motor01

├─ RunTag

├─ FaultTag

├─ ManualTag

├─ SpeedTag

└─ AlarmPopup

 

복사할 때 태그만 변경하면 새로운 설비 객체로 사용할 수 있습니다.

사용자 라이브러리는 별도 파일로 가져오기·내보내기를 지원해야 합니다.

---

15. 프로젝트 저장 구조

화면 프로젝트는 MariaDB보다는 파일 기반으로 관리하는 것이 편리합니다.

Project.ehmi

├─ project.json

├─ devices.json

├─ tags.json

├─ alarms.json

├─ recipes.json

├─ users.json

├─ screens

│ ├─ screen_001.json

│ └─ screen_002.json

├─ scripts

└─ assets

├─ images

└─ symbols

 

최종 배포할 때 전체 폴더를 하나의 파일로 압축하고 암호화할 수 있습니다.

오브젝트 저장 예

 

{

"id": "obj_motor_001",

"type": "Motor",

"name": "MainConveyorMotor",

"x": 120,

"y": 180,

"width": 100,

"height": 100,

"bindings": {

"run": "Motor_Run",

"fault": "Motor_Fault",

"speed": "Motor_Speed"

},

"securityLevel": 2

}

 

---

16. Builder와 Runtime의 공통 엔진

화면 편집기와 Runtime이 서로 다른 방식으로 객체를 표시하면 실제 실행화면이 설계화면과 다르게 보일 수 있습니다.

따라서 다음 엔진을 공통으로 사용해야 합니다.

• 오브젝트 렌더링
• 태그 바인딩
• 조건 계산
• 문자·색상 표현
• 좌표 계산
• 이미지 처리
• 화면 전환

Builder에서는 편집 기능을 추가하고 Runtime에서는 선택 핸들, 격자, 속성 변경 기능만 제거합니다.

이 구조가 WYSIWYG를 구현하는 핵심입니다.

---

17. C# WinForms 개발방법

간단한 초기 방식

• Panel을 디자인 영역으로 사용
• 각 객체를 UserControl로 구현
• 마우스로 이동·크기 변경
• PropertyGrid로 속성 편집
• JSON으로 저장

이 방식은 MVP 제작이 빠릅니다.

전문적인 권장 방식

• 하나의 사용자 정의 Canvas
• 모든 오브젝트 직접 렌더링
• 좌표 기반 Hit Test
• 선택 핸들 별도 렌더링
• 객체 모델과 화면 표시 분리
• 확대·축소 행렬 적용
• 공통 렌더링 엔진 사용

객체가 수백 개 이상이면 각 객체를 WinForms Control로 만드는 방식은 성능이 떨어질 수 있습니다.

전문 제품은 직접 그리는 Canvas 방식이 유리합니다.

---

18. 권장 클래스 구조

HmiProject

├─ HmiScreen

│ └─ HmiObjectBase

│ ├─ TextObject

│ ├─ ImageObject

│ ├─ LampObject

│ ├─ SwitchObject

│ ├─ NumericObject

│ ├─ GaugeObject

│ └─ TrendObject

├─ HmiTag

├─ HmiDevice

├─ HmiAlarm

├─ HmiRecipe

└─ HmiScript

 

모든 객체는 HmiObjectBase를 상속받도록 구성합니다.

 

public abstract class HmiObjectBase

{

public string Id { get; set; } = "";

public string Name { get; set; } = "";

public float X { get; set; }

public float Y { get; set; }

public float Width { get; set; }

public float Height { get; set; }

public int ZIndex { get; set; }

 

public abstract void Draw(

Graphics graphics,

IHmiTagProvider tags);

}

 

---

19. 시뮬레이션

화면 편집기에서 Runtime 화면을 미리 실행합니다.

오프라인 시뮬레이션

PLC 없이 가상 태그값을 입력합니다.

• 비트 ON·OFF
• 숫자값 입력
• 값 자동 증가
• 사인파 생성
• 랜덤 데이터
• 알람 강제 발생

온라인 시뮬레이션

PC에서 실제 PLC와 연결합니다.

• 실제 데이터 확인
• 화면 동작 확인
• 통신속도 확인
• 태그 주소 확인

온라인 시뮬레이션에서 실제 PLC 값을 변경할 때는 별도의 경고와 권한 확인이 필요합니다.

---

20. 화면 검사 기능

프로젝트를 실행하기 전에 다음 오류를 검사합니다.

• 존재하지 않는 태그
• 중복 오브젝트 ID
• 없는 화면으로 전환
• 이미지 파일 누락
• 범위를 벗어난 객체
• 잘못된 조건식
• 스크립트 문법 오류
• 권한 미설정
• 통신 장치 누락
• 사용하지 않는 태그
• 중복 PLC 주소
• 지나치게 빠른 읽기주기

오류를 더블클릭하면 해당 화면과 객체로 바로 이동하도록 구현합니다.

---

21. 화면 편집기 개발 우선순위

1차 기본 편집기

• 프로젝트 생성
• 화면 추가·삭제
• 문자·이미지·버튼·램프
• 이동·크기 조절
• 복사·붙여넣기
• 속성 편집
• JSON 저장·불러오기

2차 HMI 기능

• 태그 연결
• 조건별 색상
• 숫자 표시·입력
• 화면 전환
• 팝업
• Modbus TCP
• Runtime 실행

3차 전문 편집기

• 격자·정렬
• 그룹
• Undo·Redo
• 템플릿
• 사용자 라이브러리
• 트렌드
• 알람
• 레시피
• 사용자 권한

4차 고급 기능

• 다중 PLC
• 스크립트
• 다국어
• 온라인 시뮬레이션
• 프로젝트 버전관리
• 원격 배포
• SCADA·MES 연계

결론

HMI 화면 편집기는 화면에 그림을 배치하는 기능만으로 완성되지 않습니다.

화면 객체, PLC 태그, 조건, 동작, 권한과 Runtime 실행 구조가 하나로 연결되어야 합니다.

초기에는 WinForms의 Panel과 UserControl을 이용해 빠르게 구현할 수 있습니다. 제품화를 목표로 한다면 공통 Canvas와 렌더링 엔진, 명령 기반 Undo·Redo, 태그 바인딩 구조로 발전시키는 것이 적합합니다.

가장 중요한 설계 원칙은 Builder에서 보이는 화면과 Runtime에서 실행되는 화면이 동일한 렌더링 엔진을 사용하는 것입니다.