Jump to content
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr ×
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr

웨비나 다시보기: Skia4Delphi를 사용해 UI를 크게 강화하기


Recommended Posts

옮긴이: Skia4Delphi는 델파이 12.0 부터 개발 환경 안에 내장 되었습니다.

이 글은 Google Skia와 그것을 기반으로 하는 델파이용 Skia에 대한 기본 기술들을 잘 정리하고 있으므로 많은 도움이 될 것입니다. 다만, 일부 사용법과 기능에 있어서는, 12.0 이후 버전을 사용하는 경우, 이 글의 내용보다 더 쉽고, 더 강력하다는 점을 참고하기 바랍니다.

 

Jim McKeeth"Supercharge Your User Interface with Skia4Delphi – Webinar Replay" 을 번역했습니다. (원문 작성: 2022년 4월, 최종 번역: 2024년 2월)

구글 크롬, 모질라 파이어폭스, 크롬 OS, 안드로이드, 플러터, 델파이의 공통점은 무엇일까? 바로 속도가 빠른 그래픽을 스키아(Skia) 덕분에 가지게 되었다는 점이다. 이 고-성능 크로스-플랫폼 2D 그래픽 라이브러리는 개발 업계를 폭풍처럼 장악하고 있다. Skia는 VCL와 파이어몽키와 함께 작동한다. 델파이가 지원하는 모든 플랫폼에서 말이다. 코드 한 줄만으로 기존 파이어몽키 애플리케이션이 더 빨라질 수 있다. 더 나아가 새 기능을 추가하여 너무나 멋진 UI(사용자 인터페이스)를 구현할 수도 있다.

Skia4Delphi는 오픈 소스 프로젝트이다(옮긴이: 델파이 12 알렉산드리아부터는 개발 환경 안에 내장되었음). Spirit of Delphi Award를 수상한 Paulo César Botelho Barbosa와 Vinícius Felipe Botelho Barbosa 형제가 만들었다. 자, 어떻게 하면, Skia4Delphi를 사용해 우리의 애플리케이션 개발을 한 단계 더 발전시킬 수 있을까? 이 글에 그 답이 있다.

이 글에는 짧은 동영상 몇 개가 있다. 원한다면, 전체 동영상을 다시 볼 수도 있다:


Skia4Delphi 웨비나 슬라이드 다운로드

차례


Skia(스키아)란 무엇인가?

여러분은 소프트웨어 개발자이고, 지금의 모든 주요 플랫폼들을 커버해야 한다고 가정해 보자.
전통적인 선택지는 다음과 같다:

  • 네이티브
    • 하드웨어에 직접 액세스
    • 각 플랫폼마다 별도의 코드 작성
    • 더 좋은 사용자 경험을 제공하기 위해, 개발자 생산성을 희생
  • 웹/클라우드
    • 코드 대부분이 공유됨
    • 하드웨어로부터 분리
    • 더 좋은 개발자 생산성을 위해, 사용자 경험을 희생

그런데, 지금 우리에게는... 파이어몽키가 있다.

  • 네이티브로 컴파일됨 - 플랫폼 하드웨어에 대한 직접 액세스
  • 멀티-플랫폼 - 하나의 코드 기반으로 모든 플랫폼들을 커버
  • 컴포넌트 기반 비주얼 디자이너 - 개발자 생산성 극대화

spacer.png

여기에서 Skia는 어떻게 맞아들어가는가? Google Skia 소개

  • Google Skia는 오픈 소스 그래픽 엔진이다. 구글 크롬, 안드로이드, 플러터, 자마린, 파이어폭스 등에서 사용된다.
  • Skia는 공통 2D API를 제공하므로 다양한 플랫폼에서 작동한다. 즉, Vulkan, DirectX, Metal 등등 여러 저-수준 라이브러리 구현을 뒤에 감춰 놓고, 이들을 구현하기 위한 복잡성을 추상화한다. 또한 많은 최적화와 새 기능들도 구현한다.
  • skia.org
  • skia.org/docs
  • github.com/google/skia

spacer.png

Skia 플랫폼들:

  • 전 세계에서 널리 사용되는 모든 플랫폼을 지원한다. 다음과 같다:
    • 윈도우 11
    • 맥OS
    • iOS (시뮬레이터 포함)
    • 안드로이드 (시뮬레이터 포함)
    • 리눅스 (주요 배포판들)
    • FuschiaOS
    • Tizen
    • tvOS
    • watchOS

Skia의 기능들

spacer.png

spacer.png

Skia4Delphi에 대하여

  • 오픈소스
    • 구글의 Skia의 변경된 포크(fork)를 사용
  • 크로스-플랫폼 및 멀티-프레임워크
  • 델파이용 2D 그래픽 라이브러리
  • 그리기(Drawing)
    • 텍스트(Text)
    • 애니메이션(Animation)들
    • 이미지(Image)들
  • 품질과 성능에 집중
  • www.skia4delphi.org
  • github.com/skia4delphi/skia4delphi

Skia4Delphi 뒤에 있는 똑똑한 사람들

spacer.png

델파이용 Skia

  • 경제성 -오픈 소스 프로젝트, 완전 무료
  • 사용 편이성 -쉬운 설치, 간단한 코드

spacer.png

(옮긴이: 델파이 12부터는 개발 환경 안에 내장되었음)

호환성

다음을 통해 이용 가능..

Skia4Delphi 라이브러리

이 라이브러리는 개념적으로 세 부분으로 나뉜다:

  • Skia API (콘솔, VCL, FMX)
    • 순수 Google Skia 라이브러리에 액세스를 담당하는 단일 유닛:  Skia.pas
  • 컨트롤들 (VCL, FMX)
    • TSkAnimatedImage: 로티, 텔레그램 스티커, GIF 애니메이션 및 WebP 애니메이션 등을 재생한다
    • TSkLabel: 텍스트 안에 여러 가지 스타일, 글꼴 두께, 맞춤 정렬, 최대 줄 제한, 텍스트의 일부에 대한 배경색, 너비와 높이 자동 조절, 고급 장식 등등을 제공한다.
    • TSkPaintBox: OnDraw 이벤트를 사용하여 그리기를 한다. 이때 컨트롤 상에서 Skia API를 직접 활용한다
    • TSkSvg: Svg 아이콘들을 로드하고, 색상을 변경하고, 랩핑모드(wrap mode)를 지정한다.
  • 앱 렌더링 (FMX)
    • 선택 옵션이다. 활성화하는 경우, FMX 그래픽 엔진이 Skia4Delphi의 그래픽 엔진으로 대체된다. 앱 전체에서, 즉, 화면의 모든 컨트롤들이, 그려질 때 내부적으로 Skia-기반 캔버스를 사용하게 된다.
    • 즉, 코드 한 줄만 추가하면 활성화할 수 있다. 그러면 앱 전체에 자동으로 다음과 같은 효과가 반영된다:
      • 그리기 품질 향상; 울퉁불퉁한 가장자리를 부드럽게 처리
      • 최대 50%까지 그래픽 성능을 향상
      • 그리기 정확도 향상
      • 오른쪽에서 왼쪽으로 쓰는(RTL) 언어 지원을 추가
    • FMX 캔버스

spacer.png

앱 렌더링 벤치마크

spacer.png

spacer.png

아키텍처

  • Skia 라이브러리의 사용자 정의 버전을 사용
  • Deployment Manager(배포 관리자)를 통해 배포
    • 마우스 오른쪽 버튼을 클릭하고 “Enable Skia”을 선택하기만 하면 배포 관리자에 추가됨
  • 모든 플랫폼용 네이티브 라이브러리들
    • OSXARM64, 윈32, 윈64, 안드로이드, 안드로이드64, iOSDevice64, 리눅스64,  OSX64
  • 델파이 컴포넌트들과 라이브러리들
    • 그 컴포넌트들은 VCL과 FMX 모두 툴 팔레트(Tool Palette)에 들어감. 해당 라이브러기는 검색 경로(search path)에 추가됨.

재배포물들(Redistributables)

  • 윈32: sk4d.dll (18 mb)
  • 윈64: sk4d.dll (18 mb)
  • 안드로이드: libsk4d.so (19 mb)
  • 안드로이드64: libsk4d.so (24 mb)
  • iOSDevice64: sk4d.a (60 mb)
  • Ubuntu64: libsk4d.so (22 mb)
  • RedHat64: libsk4d.so (22 mb)
  • OSX64: sk4d.dylib (20 mb)
  • OSXARM64: sk4d.dylib (19 mb)

렌더링 품질

spacer.png

Aliased와 Anti aliased 비교

그리기 품질이 향상됨. 몇몇 경우에는 현격하게 향상됨

 

SVG 장점들

spacer.png

  • 해상도 독립적이며 확장 가능
  • 스타일링(쉽게 색상을 변경)
  • 파일 크기가 훨씬 적음
  • 아이콘의 경우, PNG와 같은 정적 이미지보다 언제나 SVG를 선호함
  • 웹에는 수천 개의 무료 아이콘들과 이미지들이 있음

로티(Lottie) 애니메이션의 장점들

spacer.png

왜 벡터(Vector)  형식인가?

  • 파일 크기가 훨씬 적음
  • 크기 변경과 확장 가능성이 무한함
  • 움직임이 더 부드러움
  • 더 손쉽게 편집하고 커스터마이징

왜 벡터 그래픽인가?

spacer.png

SVG 소스는 XML이다 (Zip을 통해 쉽게 압축됨)

spacer.png

PNG와 JPEG는 바이너리이다 (이미 압축되어 있다)

spacer.png

  • JPEG와 PNG는 둘 다 모두 래스터/비트맵 이미지 형식이다
  • PNG는 손실 없이 없음. 이미지를 100% 정확하게 재생산
  • JPEG는 손실이 있음. 편집이나 압축시마다 이미지 정확도를 조금씩 잃음

이미지 파일 크기 비교

spacer.png

spacer.png

spacer.png

벡터 애니메이션이란?

로티는 JSON 기반 애니메이션 형식이다.

  • dev_coding.tgs    tgs (zipped json) 타입    55,834 크기    – 상대비
  • dev_coding.mp4    mpeg4 (lossy) 타입    373,642 크기    7x 상대비
  • dev_coding.json    lottie (json) 타입   583,485 크기    10x 상대비
  • dev_coding.gif    gif (lossless) 타입    5,020,259 크기    90x 상대비

UI(사용자 인터페이스) 디자인

  • SVG와 로티를 사용하면, 디자이너가 매끄럽고 해상도가 높은 사용자 인터페이스 템플릿을 쉽게 만들 수 있다. 그런 다음, Skia4Delphi를 사용하여 UI를 완벽하게 맞출 수 있다.
  • 여러분의 UI/IUX에 움직이는 부분을 넣을 수 있다 
  • 기타 용도:
    • About 화면, 스플래시 화면, 설치 프로그램, 신규 사용자를 위한 안내, 마법사 등등

이 프로젝트를 팔로우하기

더 많은 정보 링크:

참고

  1. 맥 플랫폼의 경우, GlobalUseMetal이 True로 지정되어 있고, GlobalUseSkia와 함께 사용한다면 성능은 클래식 FMX와 비슷하다.
  2. iOS에는, 공유 링크(공유라이브러리: dll, .so, .dylib)가 없음. 오직 정적인 링크(이 경우에 .a)만 있음. 이 .a(윈도우의 .lib에 해당) 안에, 모든 obj 파일들이 들어간다. 하지만, 그 크기가 60MB라고 하더라도, 결과물인 앱의 크기는 훨씬 작다. 사용된 함수만 그 안에 함께 컴파일 되기 때문이다. 즉, 정적 라이브러리는 공유 라이브러리보다 큰 경우가 흔하지만 결과물은 훨씬 작다. 그리고 공유 라이브러리의 일반적인 크기보다 항상 더 작다.

다음으로, 개발자 모드 크롬북(Developer Mode Chromebook)을 구현할 때의 장점을 자세히 알아보자. 그리고 링크의 글을 참조하여 장비에서 어떻게 단계들을 수행하는지 알아보자.

이 댓글 링크
다른 사이트에 공유하기

이 토의에 참여하세요

지금 바로 의견을 남길 수 있습니다. 그리고 나서 가입해도 됩니다. 이미 회원이라면, 지금 로그인하고 본인 계정으로 의견을 남기세요.

Guest
이 토픽(기고/질문)에 답하기

×   서식있는 텍스트로 붙여넣기.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   이전에 작성한 콘텐츠가 복원되었습니다..   편집창 비우기

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

중요한 정보

이용약관 개인정보보호정책 이용규칙 이 사이트가 더 잘 작동하기 위해 방문자의 컴퓨터에 쿠키가 배치됩니다. 쿠키 설정 변경에서 원하는 설정을 할 수 있습니다. 변경하지 않으면 쿠키를 허용하는 것으로 이해합니다.