뛰어난 윈도우 UI 툴킷 파헤치기

[김나래]

• 원문: https://blogs.embarcadero.com/the-anatomy-of-a-great-windows-ui-toolkit/
• 작성자: Derek Johnson (2022.3)

 

The broad popularity of Agile Software Development, DevOps, and continuous delivery pipelines puts more pressure on developers to build and deploy high-quality applications faster. With technology now underlying almost every aspect of daily commerce, as well as our business and private lives, fast and efficient software development is critical to maintaining developer competitiveness and success.

애자일 소프트웨어 개발, 데브옵스, 연속 제공 파이프라인의 인기로 개발자들은 고품질 애플리케이션을 더 빠르게 구축하고 배포하라는 압박을 받기도 한다. 기술은 이제 우리의 비즈니스와 개인 생활 뿐 아니라 일상적인 상거래 거의 모든 측면에 적용되어 있어, 빠르고 효율적인 소프트웨어 개발은 개발자의 경쟁력과 성공 유지에 매우 중요하다.

Moreover, user experience continues to be a very dynamic and still evolving area which grows alongside, and in-step with, the technological advances in hardware. This raises the question of how to scale developer productivity to become more agile and flexible. For this reason, developers are constantly incorporating tools that’ll boost productivity and efficiency. One such tool is choosing a great Windows UI toolkit which combines the best in user interface and experience design with robustness and longevity without compromising the development process or speed to market deployment. 

또한 UX는 하드웨어 기술 발전과 함께 보조를 맞춰 성장하고 있는 매우 역동적이고 진화하고 있는 분야다. 개발자 생산성을 어떻게 확장해서 보다 빠르고 유연하게 만들지가 궁금할 것이다. 이러한 이유로, 개발자들은 생산성과 효율성을 높일 수 있는 도구를 계속해서 통합한다. 개발 프로세스나 배포 속도를 저하시키지 않으면서, UI와 UX 설계는 최고의 기능과 견고함을 결합한 훌륭한 윈도우 UI 툴킷을 선택하는 것이다.

------------------------------------------------------------------------------------------------------------------------------------------------

목차

왜 윈도우 UI 툴킷이 앱 성공의 중요한 요소일까?

무엇이 훌륭한 윈도우 UI 툴킷을 만들어낼까?

윈도우가 새 버전으로 업데이트되었을 때, 일부 프로그램과 충돌이 있는 이유는?

최신 윈도우 UI를 활용한 델파이 앱을 만들 수 있을까?

더 쉽고 빠르게, 더 멋진 UI를 구축할 준비가 되었는가?

 

왜 윈도우 UI 툴킷이 앱 성공의 중요한 요소일까? (Why is a Windows UI toolkit an important element of an app’s success?)

Building a user interface with modern functionalities, good usability, and the ability to present a consistent brand identity is crucial for successful professional application development. However, it can get very tedious and time-consuming without the right tools. Fortunately, with some time taken to select a great Windows UI toolkit, you can build high-quality user interfaces which deliver an outstanding user experience while also ensuring brand consistency in your mobile, desktop native, and web applications. A UI toolkit is a collection of assets containing a set of controls or components that display content or enable interaction. Whether you’re building an entirely new application or installing a new user interface, knowing what a great Windows UI toolkit is made of is an excellent foundation on which to build out your great ideas into a product that users will find not only useful but pleasant and easy to use – both of which translate into setting yourself up for commercial success. Build it quickly, build it efficiently, make it look good, make it do what the user needs, don’t be quirky, don’t be weird (adhere to familiar user interface paradigms) – this is the formula for going from a good idea to a great product.

최신 기능, 좋은 사용성, 일관된 브랜드 아이덴티티를 제공하는 UI를 구축하는 것은 전문 애플리케이션 개발의 성공에 있어 매우 중요하다. 그러나 적합한 도구가 없다면, 매우 지루한 작업이 될 수 있고 시간도 오래 걸릴 수 있다. 다행스럽게도 훌륭한 윈도우 UI 툴킷 선택에 시간을 조금 더 투자하면 뛰어난 UX 제공과 동시에 모바일, 데스크탑 네이티브, 웹 애플리케이션에 있어 브랜드 일관성을 보장하는 고품질 UI를 구축할 수 있다. UI 툴킷은 컨텐츠 표시 및 상호작용을 가능하게 해주는 컴포넌트나 컨트롤이 포함되어 있는 하나의 자산 컬렉션이다. 완전히 새로운 애플리케이션을 구축하든 또는 새로운 UI를 적용하든, 좋은 윈도우 UI 툴킷이 무엇으로 구성되어 있는지 알고있다는 것은 훌륭한 밑받침이 되어줄 것이다. 여러분의 멋진 아이디어를 제품에 녹여내어 사용자가 유용성과 즐거움을 찾고 사용하기까지 쉽도록 만들 수 있기 때문이다. 이 모두가 비즈니스 성공을 현실화 해 줄 것이다. 신속하게 구축하고, 효율적으로 만들고, 보기 좋게 만드는 것. 사용자 니즈가 있는 일을 하고, 변덕을 부리지 않고, 이상하게 만들지 말 것(친숙한 UI 패터다임 준수). 바로 이것이 좋은 아이디어를 훌륭한 제품으로 발전시키는 공식이다.

 

무엇이 훌륭한 윈도우 UI 툴킷을 만들어낼까? (What makes a great Windows UI toolkit?)

To answer this question, let’s look at a model UI toolkit – The Delphi VCL and FMX frameworks. These frameworks have dozens of powerful built-in controls included for free, ranging from various simple buttons to powerful data components like the list view grid view – all of them ready to use in your apps with a simple drag and drop. The form designer and the LiveBindings designer in RAD Studio provide a great environment to create a bold, scalable UI that looks great on all devices and screen sizes. I can’t emphasize enough how easy these are to use – just a few clicks and everything just works with little or no code. RAD Studio Delphi can fairly claim to be one of the original low code platforms where the system does most of the hard work for you. Why write more code than you absolutely need to?

이 질문에 답하기 위해, 예제 UI 툴킷으로 델파이 VCL과 FMX 프레임워크를 살펴보자. 이 프레임워크에는 다양한 강력한 컨트롤들이 내장되어 있으며 무료이다. 여러 심플한 버튼부터 목록이나 그리드 뷰와 같은 강력한 데이터 컴포넌트까지 매우 다양하다. 이 모든 것들을 드래그-앤-드랍만으로 앱에 바로 적용해 사용할 수 있다. RAD스튜디오의 폼 디자이너와 라이브바인딩 디자이너의 멋진 환경을 이용해 강렬하면서도 확장 가능한 UI를 구축할 수 있으며, 이 UI는 모든 크기의 기기와 화면에도 잘 맞는다. 사용법에 대해서는 말할 것도 없다. 단 몇 번의 클릭과 노코드(no code) 또는 매우 적은 코드만으로 작동할 정도로 굉장히 쉽다. RAD스튜디오, 델파이는 오리지널 로우 코드 플랫폼 중의 하나로, 여러분이 힘들어하는 일 대부분을 시스템이 처리해준다. 왜 필요한 것보다 더 많은 코드를 써야할까?

Delphi’s RAD Studio IDE offers a WYSIWYG design experience with drag-and-drop components for visual GUI design. Suppose you choose the FireMonkey (FMX) framework for building GUI apps? In that case, you can view the designed GUI using native Android, iOS, Windows, macOS styling, or custom styles and can preview app appearances right on your Windows PC to see what it would look like on mobile devices of varying screen sizes. With FireMonkey FMX you don’t have to choose to focus on one operating systema device platform, you can easily write apps which will work on Windows, macOS, Linux, iOS and Android. An iPhone, iPad can be your destination device but if you find your customers prefer the latest new whizzy Samsung phone running Android then you don’t have to do anything other than pick Android as a deployment target in the RAD Studio IDE and make a couple of clicks. It really IS that easy.

델파이의 RAD스튜디오 IDE는 비주얼한 GUI 설계를 위해 드래그-앤-드랍 컴포넌트로 되어있는 WYSIWYG 디자인 경험을 제공한다. GUI 앱 개발을 위해 파이어몽키(FMX) 프레임워크를 선택했다고 가정해보자. 네이티브 안드로이드, iOS, 윈도우, macOS 스타일 또는 사용자 지정 스타일을 사용해 설계되어 있는 GUI를 확인할 수 있으며, 윈도우 PC에서 앱 모양을 바로 미리 확인해 다양한 화면 크기의 모바일 기기에서 어떻게 나타날지를 체크할 수 있다. 파이어몽키 FMX를 사용하면 하나의 디바이스 플랫폼의 하나의 운영체제에만 집중할 필요가 없다. 윈도우, macOS, 리눅스, iOS, 안드로이드에서 작동하는 앱을 정말 손쉽게 만들어낼 수 있다. 아이폰과 아이패드를 지원하고 있더라도, 누군가 안드로이드가 실행되는 최신 기술로 만든 삼성 폰을 선호하는 고객이 있다면, RAD스튜디오 IDE에서 안드로이드를 배포 대상으로 선택하고 몇 번의 클릭만 하면 된다. 그 외의 어떤 다른 조치도 필요없다. 정말 진짜 쉽다.

 

윈도우가 새 버전으로 업데이트되었을 때, 일부 프로그램과 충돌이 있는 이유는?
(Why do some programs crash when Windows is updated to a new version?)

If Microsoft Windows is where you expect to meet your app’s users, then the Visual Component Library (VCL) creates native Windows-based applications with direct access to the hardware. Your apps, and as a result, the users, can benefit from pure native device hardware performance without any form of interpretation layer or intervening runtime that are part of the baggage which drags along behind other solutions. With VCL it’s all raw unfiltered power, all the time. That native performance is uncompromising too – Delphi apps have legendary stability with many thousands of apps deployed which run for years without ever needing updates or patches even when the entire operating system changes beneath them. With no inherent dependencies or runtime libraries required the user doesn’t experience the so-called “dll hell” where a tiny update to Windows suddenly means programs written in more fragile programming languages unexpectedly break, often with hard-to-diagnose cryptic error messages. Your Delphi apps will not do that – it’s just not in the DNA of the Delphi way of doing things.

마이크로소프트 윈도우가 앱 사용자를 만날 기대를 하는 곳이라면, VCL(Visual Component Library)은 하드웨어에 직접 액세스하여 네이티브 윈도우 기반 애플리케이션을 만들어내는 곳이다. 결론적으로 여러분의 앱과 사용자는 완벽한 네이티브 디바이스 하드웨어 성능의 이점을 그 어떤 레이어나 중간 런타임없이 모두 활용할 수 있는 것이다. VCL을 사용하면 모든 것이 여과되지 않은 원래의 강력함 그대로 늘 작동한다. 네이티브 성능도 타협할 수 없는 부분이다. 델파이 앱은 전설적인 안정성을 제공하는데, 여러해 동안 실행되고 있는 수 천개의 앱들이 전체 운영 체제가 변경되더라도 업데이트나 패치 필요없이 지금까지도 실행되면서 이를 증명하고 있다. 고유한 종속성이나 런타임 라이브러리가 필요없는 사용자는 일명 "dll 지옥"이라고 불리는 경험을 하지 않아도 된다. 즉 윈도우에 작은 업데이트가 발생하면 더 취약한 프로그래밍 언어로 작성된 프로그램은 예기치 못한 문제와, 진단하기 어려운 에러 메세지가 종종 발생하는 문제에서 자유로울 수 있다는 의미이다. 여러분의 델파이 앱은 이런 문제가 없을 것이다. 델파이 방식의 DNA에는 그런 것이 없다.

Delphi’s VCL has been in active development for more than two and a half decades. At least one application in your Windows device is built with Delphi and Visual Component Library. For instance, KMPlayer, WinRAR, MySQL Admin Tools, AIMP, BurnAware, Dev-C++, EarMaster, FL Studio, Nero Burning Rom, Ultra ISO, and many more applications.

델파이 VCL은 25년이 넘는 시간 동안 활발하게 개발되어 왔다. 윈도우 기기의 애플리케이션들 중 하나 이상은 델파이와 VCL로 개발되어있다. KMPlayer, WinRAR, MySQL 관리 도구, AIMP, BurnAware, Dev-C++, EarMaster, FL Studio, Nero Burning Rom, Ultra ISO 등등 정말 많은 애플리케이션들이 그 예이다.

Applications built with Delphi VCL give an authentic, native experience with high performance. The VCL includes a robust OpenTools API and component model, making it easy for others to extend the IDE and build reusable components and libraries. That’s why you can see a massive pool of 3rd party component markets. This creates a robust environment for developers to make any application.

델파이 VCL로 구축된 애플리케이션은 고성능의 진정한 네이티브 환경을 제공한다. VCL에는 강력한 OpenTools API와 컴포넌트 모델이 있어, IDE 확장과 재사용 가능한 컴포넌트, 라이브러리 구축이 매우 쉽다. 이러한 이유로 써드파티 컴포넌트 업계에도 대규모 시장으로 자리잡고 있는 것이다. 이는 개발자가 어떤 애플리케이션도 만들 수 있는 강력한 환경을 조성해준다.

 

최신 윈도우 UI를 활용한 델파이 앱을 만들 수 있을까? (Can I write Delphi apps which use the latest Windows UI?)

Microsoft Windows has several design systems that you can follow to create GUI apps. For example, Windows Classic Design, Luna and Aero designs, Microsoft Metro, and the latest and most loved one is the Microsoft Fluent Design System. Fluent Design is used as a guideline for all Windows 10/11 devices, and transition to Fluent is a gradual long-term project. The Fluent Design System preserves the clean look and feels with blurred translucency. With Delphi VCL, you can turn your Windows Classic applications into Fluent Design using styles. Furthermore, it can alter any part of the UI element to something unique.

마이크로소프트 윈도우에는 GUI 앱 생성을 위해 활용 가능한 여러 디자인 시스템이 있다. 예를 들어 윈도우 Classic Design, Luna, Aero designs, 마이크로소프트 Metro, 최근 가장 많은 사랑을 받고있는 마이크로소프트 Fluent Design 시스템이 있다. Fluent Design은 모든 윈도우 10/11 기기의 가이드라인으로 활용되고 있으며, Fluent로의 전환은 점진적으로 진행되는 장기 프로젝트이다. Fluent Design System은 약간 흐릿한 투명감으로 깔끔한 외관과 느낌을 제공한다. 델파이 VCL를 사용하면, 윈도우 클래식 애플리케이션을 Fluent Design 으로 전환할 수 있다. 또한 UI 요소의 모든 부분을 유니크한 것으로 변경할 수 있다.

Unlike other technologies such as XAML or HTML-based frameworks where the user interface is expressed as lines of program code Delphi user interfaces, Delphi screens are laid out with a full WYSIWYG designer. You drag ready-made user interface elements on to a form (a screen) where the screen designer shows you exactly what it will look like. In the latest versions of RAD Studio Delphi you can also preview custom styles – ready-made professionally designed graphic ‘skins’ which give an instant professional look and feel to your apps – right at design time so you can experiment with the array of gorgeous ready-made designs to find the one (or ones, you can style controls and forms each with their own style now) until you find one which is the perfect look you’re striving for.

UI가 프로그램 코드 라인으로 표현되는 XAML이나 HTML 기반 프레임워크와 같은 다른 기술과는 달리, 델파이 UI와 델파이 화면은 완전히 WYSIWYG 디자이너로 되어 있다. 화면 디자이너가 정확하게 보여주는 폼(화면)에 이미 만들어진 UI 요소를 드래그해서 올린다. 최신 버전의 RAD스튜디오, 델파이에서는 사용자 지정 스타일을 미리 확인할 수도 있다. 여러분의 앱에 전문적인 룩앤필을 간편하게 적용할 수 있도록 미리 디자인되어 있는 그래픽 '스킨'을 미리 적용해보고 그 모습도 확인해 볼 수 있는 것이다. 즉, 디자인 시점에 이미 만들어져 있는 정말 멋진 디자인을 적용해보고 여기에 각각 원하는 스타일의 컨트롤과 폼을 적용해, 자신만의 스타일로 만들 수도 있다.

VCL and FMX components aren’t fixed, they can also be resized and have their properties adjusted in the Object Inspector without touching code, allowing rapid prototyping through visual development. With the styles and components available you can make your app look like you had hideously expensive graphic designers working hard on the look and feel without ever spending a single cent.

VCL과 FMX 컴포넌트는 고정적이지 않다. 코드를 건드리지 않고도 오브젝트 인스펙터에서 크기를 조정하거나 속성을 변경할 수도 있어, 비주얼한 개발 환경에서 신속하게 프로토타이핑을 할 수 있다. 사용 가능한 스타일과 컴포넌트를 사용해 돈을 한 푼도 들이지 않고도 룩앤필에 엄청난 투자를 하는 전문적인 그래픽 디자이너가 한 것과 같은 결과물을 만들어 낼 수 있다.

Combined with the glorious selection of third-party vendors who produce more specialized controls at very cost-effective prices – or even free – you have the ability to present all the trappings of a top-end blue-chip software development house without the eye-watering investment budget, snarky shareholders and fickle financiers to please.

비용 효율이 매우 뛰어난 (심지어 무료인) 특화된 컨트롤을 제공하는 외부 벤더사까지 선택한다면, 여러분은 눈에 거슬리는 여러 요소들 즉 투자 예산, 까다로운 주주, 변덕스러운 금융인들 없이도 최고의 우량 소프트웨어 개발 회사의 모든 기능을 제공할 수 있는 것이다.

 

더 쉽고 빠르게, 더 멋진 UI를 구축할 준비가 되었는가? (Are you ready to build better UIs easier and faster?)

Developer productivity is all about building efficient software faster. That means only writing code that’s necessary and eliminating software bloat. It is many developers and designers dream to produce efficient applications/UIs as quickly as possible without sacrificing quality and usability. A great Windows UI toolkit should help you achieve this goal. Delphi’s VCL and FMX frameworks offer all that’s necessary to help you achieve your application development goals, as seen in this article. With these frameworks, you can access the best rapid UI development with hundreds of visual and non-visual components.

개발자 생산성은 효율적인 소프트웨어를 더 빨리 구축하기 위한 모든 것이다. 즉 필요한 코드만 작성하고, 소프트웨어 부피는 줄이는 것이다. 많은 개발자와 디자이너들이 품질이나 사용성 저하없이 가능한 빠르게 완성할 수 있는 효율적인 애플리케이션/UI 개발을 꿈꾼다. 훌륭한 윈도우 UI 툴킷은 이 목표 달성에 도움이 될 것이다. 델파이 VCL과 FMX 프레임워크는 애플리케이션 개발 목표 달성에 필요한 모든 것을 제공한다. 이 프레임워크로 수 백 개의 시각/비시각적인 컴포넌트들을 활용할 수 있고, 최고의 빠른 UI 개발이 가능하다.

For firsthand knowledge on how productive you can become, try RAD Studio Delphi. 

생산성 향상을 경험해보고 싶다면, 지금 RAD스튜디오 델파이 무료 평가판을 사용해 볼 수 있다.