초보자를 위한 인터치 . InTouch HMI 개발 교육 #18 (애니메이션 링크-10)

안녕하세요. 현역서포터 S입니다.

 

본 포스팅은 AVEVA InTouch 2023 R2 기준으로 작성 되었으며, 개발자 교육을 돕기 위한 한글 매뉴얼로 제작되었습니다.

 

“정확한 애니메이션 구성이 화면의 퀄리티를 결정합니다.”

 

이번 시간에는 지난 시간에 이어 HMI 개발 작업의 핵심 기능인 애니메이션 링크 중 Display Link에 대해 실습 중심으로 정리해 보겠습니다.

 

이번 실습은 이전 포스팅의 실습 과정에서 이어지는 내용입니다.

이전 내용이 이해되지 않았거나 실습 환경이 다른 분들은 지난 포스팅 글

2026.04.25 - [AVEVA InTouch] - 초보자를 위한 인터치 . InTouch HMI 개발 교육 #12 (애니메이션 링크-4)

초보자를 위한 인터치 . InTouch HMI 개발 교육 #12 (애니메이션 링크-4)

2026.05.04 - [AVEVA InTouch] - 초보자를 위한 인터치 . InTouch HMI 개발 교육 #17 (애니메이션 링크-9)

초보자를 위한 인터치 . InTouch HMI 개발 교육 #17 (애니메이션 링크-9)

 

먼저 참고하시기를 권장드립니다.

 

이번 글에서는 Display Link의 다음 요소들을 다룹니다.
• Percent Fill
• Value Display
• Miscellaneous

---

1. Percent Fill

 

Percent Fill 애니메이션은 오브젝트의 색상을 태그 값에 따라 일정 비율로 표현하는 기능입니다.

 

Percent Fill은 탱크 레벨, 저장량, 압력 등 연속적인 상태를 직관적으로 표현할 때 필수적인 애니메이션입니다.

 

Vertical, Horizontal 두 가지 방향이 있으며 방향만 다를 뿐 사용 방법은 동일합니다.

 

따라서 Vertical 기준으로 실습을 진행하겠습니다.

---

■ Vertical

1. Draw 메뉴 → Shapes → Rectangle 선택 후 드래그하여 세로로 긴 사각형 생성

2. 생성된 사각형 선택 → Draw 메뉴 → Format → Fill Color(페인트통 아이콘) 선택 후 색상을 파란색으로 변경

3. 사각형 더블 클릭 → Animation Link 창에서 Percent Fill → Vertical 선택

 

4. 설정
• Expression : MTag_Integer
• Value at Max Fill : 100 / Value at Min Fill : 0
• Max % Fill : 100 / Min % Fill : 0
• Direction : Up
• Background Color : 검정색

5. 저장 후 Runtime 실행

6. 슬라이더 조작 시 값의 비율에 따라 파란색/검은색 영역이 변화하면 정상

 

※ Percent Fill은 오브젝트의 기존 색상과 배경색을 이용하여 태그 값에 따라 채워지는 비율을 표현하는 애니메이션입니다.

 

Direction 설정은 색상이 채워지는 방향을 의미합니다.

단순히 시각적 효과를 넘어, 현장의 작업자가 “탱크가 차오르는 것인지, 압력이 빠지는 것인지”를 최단시간에 판단하게 만드는 중요한 요소입니다. Up(상향)뿐만 아니라 상황에 따라 Down, Left-to-Right 등을 전략적으로 선택해야 합니다.

---

2. Value Display

 

Value Display 애니메이션은 텍스트 오브젝트에 태그 값을 수치 또는 문자열 형태로 표시하는 기능입니다.

 

정확한 데이터 표현을 위해서는 포맷(Formatting) 기호에 대한 이해가 필요합니다.

보다 자세한 내용은 이전 포스팅

2026.05.02 - [AVEVA InTouch] - 초보자를 위한 인터치 . InTouch HMI 개발 교육 #15 (애니메이션 링크-7)

초보자를 위한 인터치 . InTouch HMI 개발 교육 #15 (애니메이션 링크-7)

 

참고해 주세요.

 

Value Display는 Discrete, Analog, Message 세 가지 요소로 구성됩니다.

---

■ Discrete

1. Draw 메뉴 → Insert → Text 생성 (예: ### 입력)

2. 텍스트 더블 클릭 → Value Display → Discrete 선택

 

3. 설정
• Expression : MTag_Discrete
• On Message : 1 / Off Message : 0

4. Runtime 실행

5. Toggle 버튼 클릭 시 1 또는 0으로 변경되면 정상

※ Discrete Value Display는 실제 현장에서는 램프 등으로 대체되는 경우가 많아
사용 빈도는 높지 않지만, 설비의 동작이나 경고상태를 문자로 표현할 때 유용합니다.

---

■ Analog

1. Text 생성 (예: ### 입력)

2. Value Display → Analog 선택

 

3. 설정
• Expression : MTag_Integer
• Formatting : Text String

 

4. Runtime 실행

5. 슬라이더 조작 시 값이 변경되면 정상

 

※ Analog Value Display는 SCADA/HMI 화면에서 가장 많이 사용되는 핵심 요소입니다.

---

■ Message

1. Text 생성 (예: ### 입력)

2. Value Display → Message 선택

 

3. 설정
• Expression : MTag_Message

 

4. Runtime 실행

5. Message 입력 시 텍스트가 표시되면 정상

---

3. Miscellaneous

 

Miscellaneous 애니메이션은 다양한 제어 및 표현 기능을 포함한 복합 애니메이션 그룹입니다.

 

화면의 안정성, 가독성, 조작성 향상을 위해 실무에서 매우 자주 사용됩니다.

 

구성 요소는 다음과 같습니다.
• Visibility
• Blink
• Orientation
• Disable
• Tooltip

---

■ Visibility

오브젝트의 표시 여부를 제어하는 기능입니다.

 

1. Rectangle 생성

2. Miscellaneous → Visibility 선택

 

3. 설정
• Expression : MTag_Discrete
• Visible State : On

 

4. Toggle 버튼 클릭 시 오브젝트가 표시/숨김 되면 정상

---

■ Blink

오브젝트를 깜빡이게 하여 시선을 집중시키는 기능입니다.

 

1. Rectangle 생성

2. Miscellaneous → Blink 선택

 

3. 설정
• Expression : MTag_Discrete
• Blink Visible with Attributes 선택
• Fill Color : 빨간색 / Line Color : 노란색
• Blink Speed : Medium

 

4. Toggle 버튼 클릭하여 값이 1일 때 깜빡이면 정상

---

■ Orientation

오브젝트를 회전시키는 애니메이션입니다.

 

1. Rectangle 생성

2. Miscellaneous → Orientation 선택

 

3. 설정
• Expression : MTag_Integer
• Value at Max CCW : 0 / Value at Max CW : 100
• CCW Rotation : 0 / CW Rotation : 360
• Center Offset : X = 0 / Y = 0

 

4. 슬라이더 조작 시 시계 방향으로 회전하면 정상

 

※ 회전 범위는0~360 º이며 태그 값을 반복하면 연속 회전 표현도 가능합니다.

---

■ Disable

입력 오브젝트의 사용 가능 여부를 제어합니다.

 

1. Action 버튼 더블 클릭

2. Miscellaneous → Disable 선택

 

3. 설정
• Expression : MTag_Discrete
• Disabled State : On

 

4. Toggle 버튼 클릭하여 값이 1일 때 버튼이 비활성화되면 정상

---

■ Tooltip

마우스 오버 시 도움말을 표시하는 기능입니다.

 

1. Action 버튼 더블 클릭

2. Miscellaneous → Tooltip 선택

 

3. 설정
• Static Text : “이 버튼은 Action 버튼입니다.”

 

4. 마우스 오버 시 도움말 표시되면 정상

---

4. 실무 팁

실무에서 자주 사용하는 기능

• 단축키

• Ctrl + L : 오브젝트 텍스트 변경
• Ctrl + E : 태그 변경

• 오브젝트 정렬 기능 활용

• 포맷 문자열 정렬 관리

---

마무리

여기까지 Display Link 애니메이션 실습을 마무리하겠습니다.

 

내용 자체는 어렵지 않지만 실제 프로젝트에서는 적용이 쉽지 않은 경우가 많습니다.

 

그 이유는 대부분 개념 문제가 아니라 InTouch 작업 환경에 대한 익숙함 부족입니다.

 

익숙하지 못한것을 잘 하지 못하는 것은 자연스러운 상황입니다.

그렇다고 계속 InTouch를 잘 하지 못할 수는 없겠죠.. 

 

▶ 잘 안되는 것의 해결 방법은 단 하나입니다. “반복 실습”

 

실습 중 오류가 발생하거나 설정이 되지 않는 부분, 궁금한 점이 있으시면 댓글로 남겨주세요.