응용프로그램과 GUI 의 Layer 나누는 방안

🎓 모두의 Q&A
1

안녕하세요, 험하다고 손문난 장비업계 종사자 입니다.
주로 사용 언어는 C# WPF 사용하고 있는데요

지식의 수준이 높지 못하다 보니 질문을 올리게 되었습니다.

현재 Window 응용프로그램을 주로 개발을 하고 있는데 이 프로그램에는 2가지 기능이 포함 되어있습니다.

  1. GUI
  2. Sequence

저는 (1)과(2)를 Layer를 나누고 싶어요.

저의 궁금증은 (1)을 Web 으로 구성하고 싶은데, 이에 대한 방법과 지식이 전무 합니다.
(1)은 Web으로 실행되고 특정한 Server를 구성하려면(?) 어떻게 접근해야 좋을지 문의 드립니다.

++추가로 가능하다면 C# 언어를 지키면서 구현이 가능하면 좋지만, 불가능할 시에 어떠한 언어를 배워야 한다면 좋을지 추천 부탁드립니다.

//-------------------------------------------------------------------------------------

  • [5/11 추가 내용편]
    많은 관심을 가져 주셔서 정말 감사합니다.
    UI Layer 의 경우 Sequence Layer 와의 상호작용(통신) 을 통해서 구현하면 좋겠다 라는 생각을 하고 있었습니다.
    말씀해주신 Blazor Server에 대한 독학을 한번 해보려고 합니다.
    답변 주신 내용 중 UI에 어떠한 작업들을 처리할것이냐 라고 이야기 해주셔서 추가로 적어 봅니다.
    UI상에서는 Sequence Layer에서 받은 Data들을 Monitoring 을 할것 같습니다.
    실질 적인 H/W - Input/Output 상태 라던지, 각 모듈의 상태, 서보모터의 상태(현재위치값) 등
    Data 변화에 대한 구성 처리는 PropertyChange 형식으로 각 Layer단에서 업데이트 해보려 합니다.
    필요 하다면 작업Layer를 하나 더 추가하는 방법도 있을 수 있겠네요 !
    Blazor 자체를 처음 접하다 보니 Html 관련 언어도 알아야 할듯 하네요 !
    도움 주신분들 감사 합니다 !
3개의 좋아요
2

환영합니다!

화면과 로직을 분리하고 싶다고 이해도 괜찮겠지요?

위의 링크를 통해 ASP.NET Core 앱을 만드는 것부터 시작하시면 어떨까 합니다.

동적 웹은 반드시 서비스 서버가 필요하겠죠… 하지만 개발 중일때는 굳이 서버에 올리셔서 개발을 진행할 필요는 없고 개발 PC가 곧 서버가 되어서 디버깅 등을 할 수 있습니다.

화면 구성은 HTML + CSS로 할 수 있는데요 그래서 어느정도 HTML 및 CSS를 사용하실 수 있어야 합니다.

추가로 C#언어를 지키면서 당연히 구현 가능합니다. 위의 링크를 통해 학습을 시작해보세요.

WPF서와 맞찬가지로 MVVM을 이용해 화면과 로직을 분리할 수 있습니다. MVVM에 대해 검색해 보시고 ASP.NET Core로 MVVM을 적용하는 방법에 대해 찾아보시면 될 것 같아요.

2개의 좋아요
3

GUI기능이 조금 더 구체적이면 회신드리기 좋을 듯합니다.

web은 asp.net core mvc, asp.net core razor pages, blazor등을 이용하시면 될듯합니다.
mvc나 razor pages에서 서버와의 상호작용이 필요한 경우 webapi나 signalr을 습득하시면 좋을듯 합니다.

blazor + syncfusion component를 이용해서 wpf로 구성된 프로그램을 web으로 최근에 작업한적이 있는데 이 또한 괜찮은것 같습니다.

서버 운영시에는 애저 aks나 윈도우서버, 리눅스서버에 도커 설치후 배포운영하시면 되겠습니다. 도커나 컨테이너에 대한 학습 또한 필요하실것 같습니다.

3개의 좋아요
4

장비업계면 제가 아는 한 GUI를 웹으로 빼기 어려울 겁니다.
사용하거나 시리얼 포트 등을 이용해 데이터 통신을 할텐데 Blazor WASM을 사용하더라도 윈도우 네이티브까지는 다루기가 상대적으로 많이 어렵습니다.

그래도 웹을 이용해 GUI를 분리하고 싶으시다면 먼저 사용하는 기능이 웹브라우저단에서 사용이 가능한지 먼저 확인해보세요.

4개의 좋아요
5

제가 장비쪽은 아니라 그 부분까지는 생각못했었습니다.
누군가는 사용중이지 않겠나싶어 찾아보니 우회(?)하는 방법은 있네요.

Serial port operation in Blazor WASM

https://github.com/jasniec/BlazorSerial

내용 읽어보니, 요약하면 Blazor Wasm에서 System.IO.SerialPort는 지원되지 않는다, 크롬 기반 브라우저에서 자바스크립트를 통해 serial api를 지원한다는 내용입니다. 테스트 및 작업이 생각보다 번거롭겠네요~

3개의 좋아요
6

관련된 이야기가 나와서 저도 참고할 만한 내용을 적어봅니다.

이제는 라즈베리파이 등의 SBC가 많이 있어서 다음의 구성으로 웹브라우저에서 장비를 모니터링 하고 제어할 수 있습니다.

image

여기서 시리얼 통신은 대신 GPIO, RS482, 485나 다양한 인터페이스를 이용할 수 있겠고요
SBC에서 장비제어 서버로의 통신은 MQTT나 다양한 메시징 프로토콜을 이용할 수 있습니다.

그리고 장비제어 서버를 Blazor Server로 구현해서 웹브라우저에서 장비에 대한 실시간 모니터링과 제어를 약간의 노력으로 구성할 수도 있습니다.

만약에 원격 제어의 요구가 없을 경우 다음의 구성으로도 가능하겠고 이런 구성은 기존의 구성과 거의 유사할 것 같습니다. 단지 장비 제어에 관련된 기능이 서버 형태로 백그라운드로 동작하고 사용자 인터페이스를 웹브라우저를 통해 제공하는 식입니다.

image

5개의 좋아요
7

@dimohy 님께서 언급해주신 방식 중 아랫방식에 대해 궁금한 점이 있습니다.

이 경우 장비로부터 지속적으로 데이터를 가져와서(대략 25~100ms) 지속적으로 갱신돼야하는 UI가 있을 경우 좀 어렵지 않을까요…?

2개의 좋아요
8

그런경우는 잘 아시겠지만 Blazor Server가 HTML 렌더링 까지 서버에서 수행하기 때문에 Blazor Server보다는 Blazor WASM이 좀 더 낫겠습니다.

하지만 제 경험 상 모니터링 주기가 25~100ms 정도로 짧게 요구되는 경우는 드물었고요. 대략 500ms 정도의 갱신 주기로도 현업에서 필요로 하는 빠른 모니터링 수준이라고 생각은 합니다.

5개의 좋아요
9

혹여 참조할수있는 좋은 자료가 있다면 추천 부탁드립니다 !
1-Day 시작한 상태인데 아직 많이 익숙지 못해서요…!!

1개의 좋아요
10

먼저 MS에서 제공하는 문서로 시작하시는게 좋습니다.

Blazor 프로젝트 템플릿의 설정을 바꿔가면서 (Server 또는 Webassembly) 동작성을 확인해 보시고요, 뭔 차이가 있는지를 문서를 통해 살펴보시면 될 듯 합니다.

그런다음 Blazor에서 MVVM을 사용하는 방법을 숙지하시고 기본적인 HTML + CSS 사용법을 숙지하시는데 저 같은 경우 Blazor 라이브러리를 이용해서 HTML 및 CSS 사용을 최소화 하는 편입니다.

이곳에 많은 자료들이 있어요. 살펴보시면 되겠습니다.

1개의 좋아요
11

웹서버와 연동하면서 실시간 수치 데이터, 상태 표시를 하기는 무리가 커요…
그나마 웹화면으로 구성하고 싶으면 가장 좋은 방법은 웹브라우저를 가득 차게 띄워놓고,
그 웹브라우저와 상호 작용을 하면서 웹 화면단 변화 + 클릭 이벤트를 받아서 C#에서 처리할 수 있습니다.

.Net Framework에서는 Chromium 관련 라이브러리를 쓰는 방법이 있었으나
.NET5부터는 Microsoft에서 공식 지원하는 WebView라는 것을 쓸 수 있습니다.
이것 또한 Chromium기반 브라우저이고 사용법도 찾아보면 많이 나와있으니 참고하시길 바랍니다.
NET5나 6 기반으로 프로젝트를 생성하시고, NuGet에 들어가서 WebView2라고 검색하시면 아래와 같은 라이브러리가 나올겁니다.

image

좋은 방법 찾으시길 바라겠습니다.

1개의 좋아요