데스크탑 앱을 웹으로 마이그레이션 하시겠습니까? JavaScript 웹 기술을 고려한 C# 및 WPF 개발자를위한 팁 > 시티즌 인사이트

본문 바로가기

시티즌 커뮤니티

시티즌 인사이트

IT&개발 정보 데스크탑 앱을 웹으로 마이그레이션 하시겠습니까? JavaScript 웹 기술을 고려한 C# 및 WPF 개발자를위한 팁

페이지 정보

작성자 GrapeCity 작성일 19-06-14 00:00 조회 219회 댓글 0건

본문

데스크탑 앱을 웹으로 마이그레이션


C# 및 WPF를 사용하여 데스크탑 애플리케이션을 구축하는 것은 여전히 ​​풍부하고 활발한 개발 분야이지만, 현재 프로젝트에서나 새로운 시도를 하는 미래를 보고 있다면 어떤 웹 개발 툴, 언어, 프레임워크가 올바른 투자인지 평가해야 합니다. 데스크탑 개발 환경에서 웹 개발 도구 모음(toolset)으로 마이그레이션을 하는 것은 무엇보다도 이에 따른 계획 수립, 재설계 및 재고와 잠재적으로 직원을 추가하거나 교육하는 등에 대한 결정이 요구되어집니다. 


경우에 따라, 기존 코드와 지식을 활용하여 향후 개발을 추진할 수도 있습니다. 다만 HTML, CSS 및 JavaScript로 시작하는 것이 더 합리적일 수 있습니다. 이 글에서는 웹 기술을 수용하는 장단점에 대해 살펴보고 이러한 과정에서 도움이 될 수 있는 최신 라이브러리와 프레임워크를 소개하겠습니다.


JavaScript와 HTML의 장점


웹 개발 환경을 채택하면 많은 이점이 있습니다. 첫째, 사용자는 어떤 것도 다운로드할 필요가 없어집니다. 이것은 웹 애플리케이션에서 가장 매력적인 기능 중 하나입니다. 올바르게 설계된 경우, 웹 사이트는 모바일과 호환이 가능하도록 구축될 수 있으며 이는 거의 ​​모든 운영 체제나 장치와 호환이 가능하는 것을 의미합니다. 따라서 별도의 플랫폼별 애플리케이션을 만들 필요가 없어집니다.


데스크탑, 모바일 및 다양한 운영 체제 간의 호환성으로 애플리케이션의 개발 비용을 크게 절감할 수 있습니다. 나중에 좀 더 자세히 설명하겠지만, 현재 웹 개발 툴과 프레임워크는 하나의 코드로 어디서나 실행할 수 있다는 기회를 제공합니다. 

웹 앱과 함께 중앙화된 업데이트를 받을 수 있습니다. 데스크탑 애플리케이션의 모든 사용자들 각각에게 배포하거나 자동 업데이트 과정을 포함하지 않고도 웹 앱은 프론트엔드 사용자 인터페이스(UI)와 백엔드 비즈니스 로직 둘다 중앙화된 업데이트 지점(웹 서버 자체)를 제공합니다. 따라서 이는 점진적인 업데이트가 쉬워진다는 것을 의미합니다. 데스크탑 애플리케이션에서 업데이트를 하기 위해서는, 작은 버그 수정이라도 전체 애플리케이션을 업데이트하거나 최선으로는 패치를 제공하는 경우가 많습니다.


웹 개발 방식을 채택하면 대개 UI 요소(view, view controller 또는 view model)와 같은 클라이언트 측에서 구현되고 반면에 비즈니스 모델, 데이터 지속성 및 기타 로직은 백엔드에서 구현되기 때문에 깔끔한 아키텍처로 구현되는 경우가 종종 있습니다. 이를 위해 특정한 아키텍처의 규율을 강조합니다.



아마 가장 중요한 점은 최신 웹 앱이 다양한 기능을 제공한다는 것입니다. 더 이상 정적 웹 페이지가 아닙니다.  HTML5(또는 더 정확하게는 W3C 표준은 대부분의 최신 브라우저 릴리스에서 구현되었습니다.)은 비디오, 오디오의 광범위 렌더링 및 이미지 미디어, 지리적 위치, SVG (Scalable Vector Graphics), 오프라인 이벤트, 데이터 지속성, 웹 소켓 등 포함하여 매우 정교한 기능을 즉시 제공합니다.  HTML 요소, 컴포넌트, 더 나아가 외부 API 및 서비스를 호출하는 스크립트를 통해 기능을 플러그인하는 능력은 사용자의 웹 앱에서 거의 모든 기능을 사용할 수 있게 합니다.


C# 또는 WPF에서 JavaScript로 마이그레이션 : 첫 번째 고려 사항


쉬운 길로 가는 여행이 아니라는 것을 명심하세요. 웹 앱 개발 패러다임으로의 전환이 가져올 수 있는 몇 가지 문제에 대해 논의를 하지 않는다면 어려움을 겪을 수도 있습니다.


가장 먼저 직면할 수 있는 문제는 바로 선택할 수 있는 웹 프레임워크와 아키텍처가 너무 많다는 점입니다. 매번 다른 종류의 프레임워크가 지속적으로 도입되고 있으며 대부분은 오픈 소스이며 정기적인 업데이트, 버그 수정 및 새 버전을 내고 있습니다. 선택한 프레임워크가 적극적으로 지원되는지 확인하는 것도 중요합니다. 또한 버전 업그레이드로 인해 주요 변경 사항이 도입되었는지 여부와 공급업체 또는 개발 커뮤니티가 이러한 변경 사항을 어떻게 전달하고 지원했는지 알고 있어야합니다.


Windows Forms 및 WPF 컨트롤에서 예상되는 풍부함은 다소 부족한 것처럼 보일 수 있습니다. 반면, 일부 프레임워크에는 뛰어난 인터페이스 구축 툴뿐만 아니라 다양한 웹 컨트롤 공급하는 업체가 있습니다. 또한 숙련된 웹 디자이너들은 HTML5, CSS 및 JavaScript를 신중하게 사용하여 가능한 모든 정보를 제공할 것입니다.


하드웨어 계층과의 인터페이스는 몇 가지 복잡한 문제를 제공하지만 불가능한 것은 아닙니다. 사용자 보안을 위해 브라우저는 사용자 설정에 따라 일부 로컬 하드웨어 리소스에 접근할 수 있으며 다른 리소스는 완전히 제한됩니다. 그러나 로컬 하드웨어, 저장소, GPU 등에 완전히 액세스할 수 있는 기본 애플리케이션을 작성할 수 있는 개발 프레임워크도 있습니다.


연결성이 중요한 문제일 수 있습니다. 서버가 다운되거나 인터넷 자체가 다운되면 웹 앱이 작동하지 않거나 또는 대역폭이 문제가 될 수 있습니다. 웹 페이지와 데이터 렌더링 속도가 빠를 수 있도록 계획 및 모니터링이 필요합니다. 데이터 압축, 스트리밍 및 로컬 캐싱/저장소는 클라이언트로 전송해야 하는 데이터 양을 줄이는 도구입니다. 그리고 웹 사이트를 무력화시키고 보안을 손상시켜 사용자 데이터에서 개인 정보를 침해할 수 있는 서비스 거부(DOS) 공격 (또는 기타 해킹 시도)이 있습니다.


그러나 웹 개발 기술을 사용한다고 해서 클라이언트-서버 웹 앱 상호 작용에만 제한되는 것은 아닙니다. 약간의 HTML5와 JavaScript를 사용하면 모든 웹 페이지가 로컬 브라우저에서 상당히 많은 작업을 수행할 수 있으며 원격 리소스에 액세스하기 위해서는 외부 연결만 필요합니다. 공정하게 말하면, 대부분의 데스크탑과 모바일 애플리케이션이 유용하기 위해서는 공유 파일, 메시지 및 데이터베이스와 같은 원격 리소스에 접근할 필요가 있습니다. 단일 로컬 애플리케이션은 오늘날 규칙보다 더 예외입니다.


더 중요한 것은 나중에 논의할 일부 프레임워크입니다. HTML, CSS와 JavaScript를 사용하여 기본 데스크탑과 모바일 애플리케이션을 구축할 수 있습니다. 따라서 여러분이 가진 전문 지식을 웹 앱으로 전환하면 유연성이 향상되어 동일한 언어와 툴을 사용하여 웹 앱, 데스크탑 앱, 모바일 앱, 백엔드 서비스 등을 구축 할 수 있습니다.


웹 프레임워크와 아키텍처의 분석


C# 및 WPF와의 개발에서 보다 웹 중심적인 환경으로의 전환을 고려하는 팀의 경우 다년간의 경험과 코드를 버릴 필요가 없습니다. 대신, 비교적 새롭지만 입증된 웹 프레임워크를 사용하여 기존 .NET Framework의 다양한 재주를 웹 앱 세계로 가져올 수 있습니다.


Angular


Angular는 TypeScript 기반 웹 애플리케이션 프레임워크입니다. Angular와 TypeScript의 장점 중 하나는 JavaScript로 변환되는 풍부한 객체 지향 언어 문법이라는 점입니다. Visual Studio는 기본적으로 TypeScript를 지원하며 Angular와 함께 내장된 통합 기능을 제공하므로 TypeScript에서 코드를 직접 디버깅 할 수 있습니다.(breakpoints, 변수 검사 등) 또한, Angular는 데스크탑 및 모바일 애플리케이션 개발을 위한 탁월한 크로스 플랫폼 개발 환경입니다.


Angular는 모델과 컨트롤러에서 UI를 분리하여 컴포넌트 기반 아키텍처를 권장합니다. 또한 JavaScript는 "타입이 정해지지 않은" 언어인 반면 TypeScript는 JavaScript를 포괄하는 강력한 형식을 가진 상위 개념으로 문법상의 이점과 컴파일시 타입 검사를 추가합니다. 이를 통해 타입 변환 버그, 철자가 틀린 함수와 변수 이름 등을 찾기 위해 애플리케이션을 실행할 필요가 없으므로 개발 시간이 크게 단축됩니다. 


Angular(뿐만 아니라 React, Vue)와 직접 통합된 JavaScript UI 컨트롤을 찾을 수 있습니다.


React


React는 본래 웹 사용자 인터페이스를 구축하는데 도움을 줄 수 있는 도구로 중점을 둔 인기있는 JavaScript 라이브러리입니다. ReactJS.NET 및 Bridge.NET과 같이 도우미(helper) 프레임워크는 오래된 언어인 C#에서 여러분의 애플리케이션을 작성해줍니다. ReactJS.NET은 ASP.NET Core 및 ASP.NET MVC 개발에서의 React 지원에 중점을 둡니다. Bridge.NET은 널리 사용되는 JavaScript 라이브러리 (React, Angular 등)에 대한 C# 통합을 통해 C#에서 JavaScript로 변환하는 트랜스파일러로 작동합니다.


Razor Components


또 다른 유용한 기술로는 싱글 페이지 웹 앱용 Razor 컴포넌트와 Blazor 프레임워크가 있습니다.


Razor는 ASP.NET과 통합되어 C # 또는 VB.NET에서 동적 웹 페이지를 만드는 마크업 언어입니다. <% = 및 %> 마크업 태그를 사용하여 HTML과 JavaScript를 효과적으로 작성하여 백엔드 함수 호출 및 페이지가 렌더링되기 전 데이터 바인딩을 통합하므로 "동적 웹 페이지"라는 용어가 사용됩니다. 각 웹 페이지는 실제로 문자열과 함께 C# 코드로 변환되고 웹 앱의 현재 상태에 대한 HTML 코드를 런타임으로 내보내며 실행됩니다. 캐싱은 모든 웹 페이지 view가 전체 재컴파일을 필요로 하지 않도록 합니다. Razor 파일이 변경 될 때만 페이지 재컴파일이 수행됩니다.


Razor를 사용하면 여전히 JavaScript로 클라이언트 측 로직을 구현하는 것입니다. 그러나 이는 페이지가 동적으로 렌더링되므로 페이지를 컴파일 할 때 백엔드에서 얻은 데이터와 함께 제공되기 때문입니다. 이것은 종종 프론트엔드에서 HTML과 CSS로 렌더링 될 백엔드로부터 데이터를 요청하기 위해 별도의 클라이언트 측에서 AJAX 호출을 할 필요를 제거해줍니다.


Blazor


Blazor는 한 단계 더 나아가 ASP.NET의 특징에 따라 C# 및 Visual Basic에서 클라이언트와 서버간에 코드 및 라이브러리(제한이 있음)를 공유하며 웹 애플리케이션을 작성할 수 있습니다. Blazor는 이진 명령 포맷 가상 머신인 WebAssembly를 활용하여 클라이언트 측에 .NET / C# 환경을 만듭니다. C# 또는 Visual Basic code는 일반 .NET 어셈블리로 컴파일되어 WebAssembly기반 .NET 런타임을 사용하여 웹 브라우저에서 다운로드 및 실행됩니다.


성능 고려 사항 또한 있습니다. .NET 런타임은 WebAssembly로 컴파일되는 반면에, 애플리케이션 어셈블리는 그렇지 않습니다. 클라이언트 쪽에서 컴파일이 되는 것은 아닌 실시간으로 해석이 되는 것이며 이로 인해 성능 문제가 쉽게 발생할 수 있습니다. WebAssembly에 대한 사전 컴파일 단계는 향후에 개발될 수 있습니다.


Blazor의 흥미로운 점 중 하나는 실시간 메시징 프레임워크인 SignalR을 사용하여 클라이언트와 서버간에 통신하도록 구성하는 기능입니다. 클라이언트 측 UI 이벤트는 실제로 서버로 다시 전송되고 처리되고 데이터 변경 사항에 대해 클라이언트로 다시 전송되고 DOM으로 병합되어 UI를 업데이트합니다.


Xamarin은 개발자가 종종 크로스 플랫폼 모바일 개발과 연관시키는 또 다른 툴셋(toolset)이지만 실제로는 훨씬 더 큰 잠재적인 애플리케이션 플랫폼을 지원합니다. 본래 Xamarin은 C#과 .NET Framework과 함께 기본 Android, iOS 및 Windows 앱을 작성하기 위해 만들어졌습니다. 그러나 툴셋이 발전함에 따라 Mac과 웹 용 Xamarin 기반 앱을 작성할 수있게되었습니다 .


HTML, CSS 및 JavaScript 수용


개발된 적이 없는 프로젝트를 시작하거나 코드 재사용이 거의 없는 데스크탑 애플리케이션을 이식하는 경우, 웹 개발 스택을 수용하는 방안을 고려해 보는 것이 좋을 수도 있습니다.


기술적으로 플랫폼 중립성이 본질적으로 웹 개발에 내장되어 있기 때문에 HTML, CSS 및 JavaScript를 "크로스 플랫폼" 개발 환경으로 생각할 수 있습니다. 모든 브라우저 (또는 브라우저 버전)가 모든 최신 HTML, CSS 및 JavaScript 기능을 지원하는 것은 아니지만 웹 프런트엔드를 한 번만 작성하여 다른 브라우저와 운영 체제에서 작동하도록 하는 기능은 개발 및 유지 관리 비용을 크게 줄입니다.


게다가 JavaScript는 웹 페이지를 위한 간단한 스크립트 언어를 넘어 성장해왔습니다. JavaScript는 Node.js 런타임 환경과 함께 마이크로 서비스와 클라우드 함수, 서버측 개발, 데스크탑 스크립트 및 심지어 모바일 앱 개발에 사용하도록 지원되는 최고급 언어가 되었습니다. JavaScript에 대한 약간의 기술은 많은 잠재적인 프로젝트로 나아갈 수 있도록 해줍니다.


웹 개발 스택을 수용하는 가장 간단한 버전은 물론 웹 사이트입니다. 쇼핑에서부터 소셜 미디어, 은행 및 직원 혜택까지 오늘날 많은 새로운 비즈니스와 서비스가 웹 사이트로 구축되고 있습니다. 앞에서 언급한 C# 기반 솔루션 중 하나를 사용하여 사이트를 개발하든 HTML, CSS 및 JavaScript으로 넘어가든 관계없이 구축 및 유지 관리가 필요한 유일한 앱일 수 있습니다.


웹뷰 앱


Webview 앱은 기본 애플리케이션과 순수한 브라우저 기반 웹 앱 사이의 하이브리드입니다. 웹뷰는 기본 앱처럼 보이지만 플랫폼에서 기본적으로 실행되는 자체 인터페이스가 없는 브라우저일 뿐 웹 사이트를 실제 인터페이스로 사용합니다. 이를 통해 JavaScript, HTML 및 CSS를 사용하여 "애플리케이션"을 렌더링할 수 있을 뿐만 아니라 기본 OS와 인터페이스할 수 있다는 이점이 있습니다.


예를 들어 Google의 Chromium은 기본 브라우저 환경을 제공합니다. Chromium 브라우저에서 실행 중인 웹 애플리케이션과 쉽게 인터페이스할 수 있으며 JavaScript 코드를 실행하고 JavaScript 코드에서 발생한 이벤트에 응답할 수 있습니다. 웹뷰는 내부 텍스트, 클래스 태그, 스타일 등 HTML 요소를 직접 제어 할 수 있기 때문에 자동화 테스트에도 도움이 됩니다.


웹뷰의 또 다른 장점은 애플리케이션을 쉽게 오프라인으로 실행할 수 있다는 것입니다.(클라우드 기반 데이터베이스와 같은 다른 제약 조건이 없다고 가정 할 때) 애플리케이션으로서, 웹뷰는 애플리케이션을 실행하는 데 필요한 모든 스크립트를 제공할 수 있습니다. 또한 부하시간도 크게 줄어 듭니다. 웹뷰 애플리케이션은 필요에 따라 스크립트를 서버와 동기화할 수 있습니다.


Electron은 웹뷰 개념을 턴키 솔루션으로 만듭니다. Electron은 기본적으로 브라우저내에 내장된 웹 컨텍스트로서 원격 웹 애플리케이션을 포함할 수 있게 해줍니다. 앱 스토어를 통해서도 기본 데스크탑 애플리케이션을 배포할 수 있지만 HTML, CSS 및 JavaScript로 작성된 웹 앱일 뿐입니다.


C# 및 WPF를 사용한 데스크탑 개발에서 웹으로 마이그레이션


C# 및 WPF를 사용하는 기존 데스크탑 앱 개발에서 웹 개발 패러다임으로 전환하려는 경우 선택할 수 있는 옵션, 프레임워크 및 도구가 많이 있으며 매일 더 많은 옵션들이 등장합니다. 이러한 옵션을 평가하는 것은 어려운 과정입니다.


데스크탑 애플리케이션에서 "여러분이 어디에 있는지" 보고 시작하는 것이 "여러분이 어디로 가고 싶은지"를 파악하는 가장 좋은 방법일 것입니다. 특히 데스크탑 애플리케이션을 웹 앱으로 마이그레이션하는 것을 고려할 때는 먼저 기존 데스크탑 애플리케이션의 요구 사항에 집중한 다음 해당 요구 사항에 가장 적합한 웹 기술을 결정하는 것이 좋습니다.


반면에 새로운 코드베이스에서 처음부터 시작하는 경우, 웹 개발 스택 (HTML, CSS 및 JavaScript)에 투자하여 차후에 이익을 얻을 수 있는지 자세히 살펴보세요.


마이그레이션을 고려하고 있다면 JavaScript, .NET과 Xamarin에 대한 빠르고 유연한 UI 컨트롤 툴킷을 사용하여 크로스 플랫폼 UI 컨트롤과 함께 앱의 미래에 대비할 수 있습니다 .


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2020 GrapeCity inc.