윈도우 11 윈도우 11 용으로 앱을 현대화하는 방법 5가지

[Kori]

Muminjon의 5 Ultimate Ways To Modernize Your Apps For Windows 11 를 번역했습니다.

현대적이고 견고하고 엔터프라이즈급 UI를 구현할 수 있도록, 델파이는 윈도우 전용인 VCL (Visual Component Library)과 크로스-플랫폼 개발용인 파이어몽키 (FMX)를 제공한다. 델파이 VCL에는 윈도우 앱 개발에 필요한 최신 기능과 현대식 UI 컨트롤이 들어있다. 

또한, 델파이로 만든 앱은 네이티브 성능을 발휘한다. 그리고 델파이를 사용하면 윈도우의 최신 기능과 하드웨어를 빠르게 반영할 수 있다.

이 글에서는 당신의 앱을 윈도우 11 용으로 현대화하는 핵심 방안 다섯가지를 정리해보았다. 

1. 사용자를 포용하는 디자인(Inclusive Design)을 만들었는가?

사용자들은 앱이 어떤 정보를 수집하는 지 그리고 개인 정보 정책 안내가 잘 되어 있는 지를 쉽게 알을 수 있는 앱을 좋아한다. 따라서 사용자에게 이 모든 정보를 알려주고, 수집 정보를 제조사로 전송하는 기능을 직접 끄거나 켤 수 있도록 하는 것은 언제나 환영받는 요소이다.

종합적인 디자인 (Comprehensive Design)은 제품의 신뢰도를 더욱 높이고 누구에게나 알맞은 환경을 제공한다. 예를 들어, 앱의 내용이 수많은 글자로 되어있다면, 화면을 읽어주는 스크린 리더 기능을 추가하면 한결 좋아질 것이고 장애가 있는 사용자들도 만족할 것이다.

UI 컨트롤과 메뉴에는 단순하고 아름다운 애니메이션 안내를 제공하자. 가능한 가장 좋은 배율 조정과 반응을 앱에 실현하자. 폰트 크기를 사용자가 직접 변경할 수 있도록 하자. 사용자마다 사용하는 화면의 크기가 제각각이다. 따라서 개발자는 앱이 어떻게 표현될 지를 모조리 알 수는 없다.

당신의 앱이 첫 화면에서 여러가지 정보를 제공하고, 이 정보가 여러 프레임으로 나누어져 있다면, 사용자가 직접 프레임을 재배치/재구성 할 수 있도록 하자.

그림. 델파이 11 IDE는 사용자가 레이아웃을 변경할 수 있도록 되어있다. 

윈도우 11에서는 아이콘 대부분이 업데이트 되었다. 윈도우 11의 아이콘들은 반짝이고 질서정연하다. 게다가 UI 글꼴은 Segoe UI Variable 글꼴이 새로 도입되어서 당신의 앱이 사용하는 활자 역시 더 부드러워지고 가독성도 더 높아진다.

그림. 윈도우의 새 Segoe 폰트 (출처: 윈도우 문서) 

2.현대식 UI 컨트롤을 사용하고 있는가? 

그림. 델파이 VCL은 현대식 윈도우 UI 컨트롤들과 네이티브 성능을 제공한다.

아름답고 현대적인 UI 컨트롤들을 사용함으로써, 윈도우 11에서 당신의 앱은 더욱 멋지고 최첨단이라는 느낌을 준다. 윈도우 11 자체의 UI에 이미 수많은 혁신이 반영되었으므로, 당신의 앱 역시 윈도우 11의 UI와 잘 어우러질 필요가 있다!

게다가, 가벼우면서도 확대할 수 있는 애니메이션이 앱에 구현되어 있으면 사용자 경험(UX)을 향상시킬 수 있다. 애니메이션을 애플리케이션에 추가할 때 가장 널리 사용되는 방식 중 하나는 로티(Lottie) 애니메이션 파일을 사용하는 것이다. 

그림. Skia4Delphi 그래픽 라이브러리를 사용하자. 

로티(Lotti) 애니메이션 파일을 델파이 앱에 추가하는 방법을 알고 있는가? 

쉽다! 델파이 커뮤니티가 개발 생태계에 기여하고 있기 때문이다. Skia4Delphi는 델파이에서 사용할 수 있는 크로스 플랫폼 2D 그래픽 API로써 구글의 스키아 그래픽 라이브러리(Skia Graphic Library)를 기반으로 한다. 델파이에서 SVG와 로티(Lotti)를 사용하는 방법은 Desktop First UX Summit에서 짐 맥키트가 진행한 세션에서 볼 수 있다.

3. 현대적인 시각 효과를 당신의 앱에서 사용하고 있는가? 

윈도우 11은 다양한 UI 요소와 둥근 모서리를 데스크탑 운영 체제에 새로 도입했다. 일반적으로 사용되던 각진 모서리는 이제 둥글고 부드러운 모서리로 바뀌어서 데스크탑 앱에서 전과는 다른 느낌이 난다.

윈도우 11을 활용하다 보면, 모서리가 둥근 UI 컨트롤들이 다크 모드와 라이트 모드 양쪽에서 모두 멋지게 표현되는 것을 알 수 있다. 

윈도우 11 둥근 모서리를 코드를 사용해 다루는 방법은 다음 글을 통해서 배울 수 있다. 

• 윈도우 11 둥근 모서리를 내 앱에 적용하기

델파이 VCL에는 당신의 앱이 현대적인 모습을 갖출 수 있도록 하는  VCL Styles 라는 탁월한 옵션이 있다. 수십 가지 독특한 스타일이 제공되기 때문에, 원하는 스타일들을 당신의 윈도우 앱에 적용하기만 하면 현대적인 UI를 몇 초만에 완성할 수 있다. 

플루언트(Fluent) 앱을 델파이로 디자인하려면 어떻게 할까? - 아크릴 재질 (Acrylic material) 디자인 하기

플루언트 디자인 시스템을 당신의 앱에 적용하고 싶다면, StyleControls VCL 패키지를 사용하면 된다. StyleControls VCL 패키지는 클래식 드로잉(classic drawing), 시스템 테마, GDI+, VCL 스타일을 사용하여 독특한 사용자 인터페이스를 만든다. 

그림. StyleControls VCL 패키지는 마이크로소프트 플루언트 UI 디자인이 반영된 컨트롤을 제공한다.

4. 당신의 앱은 현대식 하드웨어와 기능 모드를 사용하고 있는가? 

최근 몇년간, 터치스크린 용으로 디자인된 앱들도 많이 나왔다. 예를 들어, 투인원(2-in-1) 노트북을 사용하면, 앱의 UI 컨트롤이 더 크고, 더 정확한 위치에 있어야 사용하기 좋다. 

게다가, 알림이나 공유 등의 훌륭한 베스트 프랙티스를 활용하지 않고 있는 애플리케이션들도 아직 꽤 많은데, 당신의 앱에서 이런 기능을 사용할 수 있으면, 당신의 앱은 보다 효율적으로 작동될 것이고 개발자는 그저 해당 API를 사용하기만 하면 된다. 만약, 델파이 VCL이나 FMX를 사용하고 있다면 마우스로 필요한 시스템 컴포넌트를 끌어다 놓기만 하면 된다! 윈도우 10 알림 기능 구현 샘플을 살펴보자.

또한, 윈도우 스토어(Windows Store)로 앱을 배포하려면 MSIX (오른쪽 그림. 출처: 마이크로소프트) 기능을 활용해야 한다. 윈도우 스토어는 당신의 윈도우 앱 전체를 아무런 변경도 하지 않고 그대로 스토어로 가져온다. 당신의 델파이 앱을 MSIX로 패키징을 통해 배포하는 방법을 살펴보자.

더 나아가, 델파이에는 시스템 센서 컴포넌트들이 들어있다. 센서 컴포넌트는 물리적 양을 측정하고 이것을 신호로 변환하여 애플리케이션에서 읽을 수 있도록 해준다. 센서 컴포넌트 몇가지를 소개한다.

• TBiometricSensor 
• TElectricalSensor 
• TLocationSensor 
• TMotionSensor
• TOrientationSensor 

센서 컴포넌트를 내 앱에서 넣고 사용하는 방법을 어디에서 배울 수 있는가? 

센서 컴포넌트 대부분을 다루었던 이 CodeRage X 세션이 있다.

 

5. 윈도우 앱 현대화와 개발 트렌드을 따라잡기 위해, 앞서 나아가는 기업들을 보고 배우고 있는가?

현대화를 주제로 진행된 엠바카데로의 온라인 세미나는 윈도우 앱 개발을 배울 수 있는 가장 좋은 자료들 중 하나이다. 데스크탑 용 최신 UI/UX 패턴, WinAPI, COM 과 ShellAPI, WinRT 활용 방안 등등을 배울 수 있다. 

• 마이크로소프트 스토어에 배포하기
• 보편적인 데이터베이스 액세스를 위한 파이어닥 (FireDAC)
• 윈도우 High DPI 
• 윈도우 런타임 활용 

마찬가지로, 가장 최근에 진행된 Desktop First UX Summit도 온라인에 오픈되어 있다. 업계 리더들과 소프트웨어 엔지니어들이 소프트웨어 개발에 관한 훌륭한 워크샵과 실제 사례를 제공한다. 이 웨비나는 디자인 절차, 디자인 시스템, 인공지능(AI), 비주얼 디자인, 정보 아키텍처 등등을 다룬다. 

• Desktop First UX Summit 2020 (한글 정리본) 
• Desktop First UX Summit 2021 (한글 정리본)