{"id":41734,"date":"2024-11-08T05:01:13","date_gmt":"2024-11-08T05:01:13","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=41734"},"modified":"2024-11-26T06:35:50","modified_gmt":"2024-11-26T06:35:50","slug":"21-wpf%eb%a5%bc-%ed%99%9c%ec%9a%a9%ed%95%9c-%ec%a7%81%ea%b4%80%ec%a0%81%ec%9d%b8-hmi-%ea%b0%9c%eb%b0%9c-%ec%8b%ac%ed%99%94-%ec%82%ac%ec%9a%a9%ec%9e%90-%ea%b2%bd%ed%97%98ux-%ed%96%a5%ec%83%81","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/41734\/","title":{"rendered":"21.WPF\ub97c \ud65c\uc6a9\ud55c \uc9c1\uad00\uc801\uc778 HMI \uac1c\ubc1c \uc2ec\ud654, \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX) \ud5a5\uc0c1\uc744 \uc704\ud55c \uc778\ud130\ub799\ud2f0\ube0c \uc694\uc18c \ucd94\uac00"},"content":{"rendered":"

<\/p>\n

\n
\n

\n WPF(Windows Presentation Foundation)\ub294 \ub2e4\uc591\ud55c UI \uc694\uc18c\uc640 \ub370\uc774\ud130 \ubc14\uc778\ub529 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00
\n \uc9c1\uad00\uc801\uc774\uace0 \ub9e4\ub825\uc801\uc778 GUI\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c\ub294 MES(\uc81c\uc870 \uc2e4\ud589 \uc2dc\uc2a4\ud15c) \ubc0f
\n \uc2a4\ub9c8\ud2b8 \ud329\ud1a0\ub9ac \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c HMI(\uc778\uac04-\uae30\uacc4 \uc778\ud130\ud398\uc774\uc2a4) \uac1c\ubc1c\uc5d0 \ub300\ud55c \uc2ec\ud654 \ub0b4\uc6a9\uc744 \ub2e4\ub8e8\uba70, UX\ub97c
\n \ud5a5\uc0c1\uc2dc\ud0a4\uae30 \uc704\ud55c \uc778\ud130\ub799\ud2f0\ube0c \uc694\uc18c\ub97c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/header>\n

\n

1. HMI\uc758 \uc911\uc694\uc131<\/h2>\n

\n HMI\ub294 \uc81c\uc870 \ubc0f \uc0b0\uc5c5 \uc790\ub3d9\ud654\uc5d0\uc11c \uc0ac\uc6a9\uc790\uc640 \uae30\uacc4 \uac04\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \uc911\uc7ac\ud558\ub294 \uc911\uc694\ud55c \uad6c\uc131 \uc694\uc18c\uc785\ub2c8\ub2e4.
\n \ud6a8\uacfc\uc801\uc778 HMI\ub294 \uc791\ub3d9 \uc548\uc804\uc131\uc744 \ub192\uc774\uace0, \uc791\uc5c5\uc790 \uc0dd\uc0b0\uc131\uc744 \uc99d\ub300\uc2dc\ud0a4\uba70, \ub370\uc774\ud130\uc758 \uc774\ud574\ub3c4\ub97c \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4.
\n \ub530\ub77c\uc11c HMI\uc758 \ub514\uc790\uc778\uacfc \uad6c\uc131 \uc694\uc18c\ub294 \ub9e4\uc6b0 \uc911\uc694\ud558\uba70, UX\ub97c \ucd5c\uc801\ud654\ud558\uae30 \uc704\ud55c \ub2e4\uc591\ud55c \uc811\uadfc \ubc29\uc2dd\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

2. WPF\uc758 \uae30\ubcf8 \uac1c\ub150<\/h2>\n

\n WPF\ub294 .NET Framework\uc758 \ud55c \uad6c\uc131 \uc694\uc18c\ub85c, \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc704\ud55c \uadf8\ub798\ud53d \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c
\n \uad6c\ud604\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. XAML(Extensible Application Markup Language)\uc744 \uc0ac\uc6a9\ud558\uc5ec UI\ub97c \uc815\uc758\ud558\uace0
\n C#\uc744 \ud1b5\ud574 \ub85c\uc9c1\uc744 \uad6c\ud604\ud558\ub294 \uad6c\uc870\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n

\n WPF\ub294 \ube44\ud2b8\ub9f5 \ubc0f \ubca1\ud130 \uadf8\ub798\ud53d\uc2a4\ub97c \uc9c0\uc6d0\ud558\uba70, \uc560\ub2c8\uba54\uc774\uc158, \uc2a4\ud0c0\uc77c, \ub2e4\uc591\ud55c \ub370\uc774\ud130 \ud45c\ud604 \ubc29\uc2dd \ub4f1\uc744
\n \uc81c\uacf5\ud558\uc5ec \uace0\uae09 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

3. WPF\ub97c \uc774\uc6a9\ud55c HMI \uad6c\ucd95 \uae30\ubcf8 \ub2e8\uacc4<\/h2>\n

3.1. \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h3>\n

\n Visual Studio\ub97c \uc774\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6b4 WPF \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.
\n \uc774 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c HMI\uc5d0 \ud544\uc694\ud55c \ubaa8\ub4e0 \uc694\uc18c\ub4e4\uc744 \uad6c\uc131\ud558\uac8c \ub429\ub2c8\ub2e4.\n <\/p>\n

3.2. XAML\uc744 \ud1b5\ud55c UI \uc124\uacc4<\/h3>\n

\n XAML\uc744 \uc0ac\uc6a9\ud558\uc5ec WPF\uc5d0\uc11c UI\ub97c \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubc84\ud2bc, \ud14d\uc2a4\ud2b8 \ubc15\uc2a4, \uc774\ubbf8\uc9c0 \ub4f1 \ub2e4\uc591\ud55c
\n \ucee8\ud2b8\ub864\uc744 \ud3ec\ud568\ud558\uc5ec \uc2dc\uac01\uc801\uc73c\ub85c \ub9e4\ub825\uc801\uc778 \ub514\uc790\uc778\uc744 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n

3.3. \ub370\uc774\ud130 \ubc14\uc778\ub529<\/h3>\n

\n WPF\uc758 \uac15\ub825\ud55c \ub370\uc774\ud130 \ubc14\uc778\ub529 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uc5ec UI\uc640 \ub370\uc774\ud130 \uc18c\uc2a4\ub97c \uc5f0\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \uc608\ub97c \ub4e4\uc5b4, \uc0dd\uc0b0 \ub370\uc774\ud130, \uc7a5\ube44 \uc0c1\ud0dc \ub4f1\uc744 \uc2e4\uc2dc\uac04\uc73c\ub85c \uc0ac\uc6a9\uc790\uc5d0\uac8c \ud45c\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

4. UX \ud5a5\uc0c1\uc744 \uc704\ud55c \uc778\ud130\ub799\ud2f0\ube0c \uc694\uc18c<\/h2>\n

\n \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\uae30 \uc704\ud574\uc11c\ub294 \uc778\ud130\ub799\ud2f0\ube0c \uc694\uc18c\ub4e4\uc744 \uc801\uc808\ud558\uac8c \ucd94\uac00\ud574\uc57c \ud569\ub2c8\ub2e4.
\n \ub2e4\uc74c\uc740 HMI\uc5d0 \uad6c\ud604\ud560 \uc218 \uc788\ub294 \uba87 \uac00\uc9c0 \uc778\ud130\ub799\ud2f0\ube0c \uc694\uc18c\ub4e4\uc785\ub2c8\ub2e4.\n <\/p>\n

4.1. \uc560\ub2c8\uba54\uc774\uc158<\/h3>\n

\n \uc560\ub2c8\uba54\uc774\uc158\uc740 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc815\ubcf4\ub97c \uc804\ub2ec\ud558\ub294 \ud6a8\uacfc\uc801\uc778 \ubc29\ubc95\uc785\ub2c8\ub2e4. WPF\uc5d0\uc11c\ub294 Storyboard\ub97c
\n \uc0ac\uc6a9\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \ud589\ub3d9\uc5d0 \ub530\ub77c UI \uc694\uc18c\uac00 \ubcc0\ud558\ub294 \uc608\uc81c\ub97c
\n \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n

\n            \n                <\/doubleanimation>\n            <\/storyboard>\n            <\/code><\/pre>\n
4.2. \ub9c8\uc6b0\uc2a4 \uc624\ubc84 \ud6a8\uacfc<\/h3>\n
\n                UI \uc694\uc18c\uc5d0 \ub9c8\uc6b0\uc2a4\ub97c \uc62c\ub838\uc744 \ub54c \uc2dc\uac01\uc801\uc73c\ub85c \ubc18\uc751\ud558\ub294 \ud6a8\uacfc\ub97c \uc8fc\uc5b4 \uc0ac\uc6a9\uc790\uc758 \uc8fc\uc758\ub97c \ub04c \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n                \uc544\ub798\ub294 \ub9c8\uc6b0\uc2a4 \uc624\ubc84 \ud6a8\uacfc\ub97c \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.\n            <\/p>\n
\n