버전 신기능 윈도우 용 High DPI 이미지 리스트

[Kori]

데이비드 밀링턴 (David Millington)이 작성한 New in RAD Studio 10.3: High DPI Image List for Windows를 번역했습니다.

RAD 스튜디오 10.3에서는 High DPI 지원에도 많이 신경을 썼다. 마르코 칸투가 쓴 VCL에서 Per Monitor v2 지원에서 언급되었듯이, 10.3부터는 VCL 애플리케이션이 화면 배율에 알맞게 축소/확대 되며, High DPI 화면 또는 확장된 화면에서 잘 표현된다.

이때 중요한 점은 툴바, 메뉴, 버튼 등 글리프(Glyph)를 사용하는 모든 곳에서 해당 그래픽 자원을 얼마나 잘 High DPI에 맞추어 확대/축소하는가이다. 툴바에서  16×16 픽셀인 아이콘을 사용한다면, 이 애플리케이션이 200% 확대된 곳에서 작동할 때에는 32×32 픽셀로 선명하게 표현되기를 원한다. 비록 High DPI API가 윈도우에 추가되긴 했지만, 윈도우 자체의 이미지 리스트에는 확대/축소 기능이 없다. TImageList는 이것을 감싸고 있으므로 마찬가지 제약이 있다. 따라서 화면의 DPI에 맞게 배율이 변하는 폼 안에서,  툴바 등 TImageList를 통해 사용되는 이미지들이 배율에 맞춰 선명하게 표현되게 하려면, 복잡한 추가 코드를 작성하지 않고는 어렵다. 그리고 VCL 콘트롤 대부분은 실제로 네이티브 윈도우 콘트롤이므로 윈도우의 네이티브 이미지 리스트와 HIMAGELIST 그리기 핸들에 밀접하게 묶여있다.

10.3에서 델파이와 C++빌더에는 완전히 새로운 이미지 리스트 콘트롤이 추가되었다. 자동으로 High DPI에 맞게 확대/축소되기 때문에 모니터나 배율에 상관없이 언제나 선명한 고해상도 이미지가 표현된다. 그리고 기존의 VCL 콘트롤 또는 윈도우 이미지 리스트와 완전히 호환되며, WinAPI를 호출할 때 사용할 수 있도록 HIMAGELIST 윈도우 핸들도 제공된다.

마법같지 않은가? 계속 읽어보자!

TImageCollection 과 TVirtualImageList

새 이미지 리스트는 예전과 달리 두개로 나누어 구성된다. 이미지 컬렉션(단지 고해상도 이미지를 모아두는 역할)과 가상 이미지 리스트(이미지 컬렉션에 연결되어 상황에 따라 특정 크기의 이미지를 꺼내어 표현하는 역할)이다.

이미지 컬렉션 (TImageCollection)

TImageCollection은 단순명확하다. 어디에 두어도 된다. 폼이든 데이터 모듈이든 TImageCollection을 놓아두고 그 안에 이미지를 추가하면 된다. TImageCollection에는 같은 이미지를 해상도 별로 여려개 넣을 수 있다. 예를 들어, 하나의 이미지를 16×16, 32×32, 128×128 픽셀로 각각 파일을 올리면, 실제로는 크기가 다른 이미지이지만 논리적으로 하나의 이미지로 취급된다.

그림. TImageCollection에는 이미지 별로 다양한 해상도의 이미지를 추가/편집/삭제할 수 있다.

논리적인 이미지 별로 서로 다른 해상도 파일을 올릴 때 수작업으로 할 수도 있지만, 이 파일들을 모아둔 폴더에서 한번에 올려도 TImageCollection이 알아서 유사한 이름 별로 묶고 크기를 파악한다. 파일명을 가지고 이렇게 구분하도록 하려면 Size Separator (구분자)를 지정한다. 예를 들어, ‘foo-16.png’, ‘foo-32.png’, ‘bar-16.png’ 파일을 올리면, 논리적 이미지는 foo와 bar 두개가 생기고 foo는  16×16과 32×32 버전을 가진다. 여기에 사용되는 파일명 내의 구분자는 이미 시중의 아이콘 라이브러리에서 널리 사용되고 있는 것들이므로 아이콘을 사서 바로 임포트할 수도 있다.

TImageCollection은 PNG 이미지와 32bpp 비트맵 (알파 채널을 가지는 BMP 파일)을 지원한다. 32bpp가 아닌 비트맵은 구.TImageList에서와 마찬가지로 전통적인 컬러키 비트맵으로 취급한다. TImageCollection 안에서는 이미지에 이름을 주거나 카테고리를 지정할 수 있어서 관리하기가 좋다. 그 결과 알파을 인식할 수 있고, 다중 해상도 이미지를 담을 수 있는 컬렉션이 생긴다.

가상 이미지 리스트 (TVirtualImageList)

TVirtualImageList 컴포넌트는 화면의 DPI/배율에 따라 알맞는 이미지를 표현한다.

TVirtualImageList는 TImageCollection에 연결하여 사용한다. TVirtualImageList에는 이미지를 추가하거나 목록을 편집할 수 있는데, 연결된 컬렉션에 있는 이미지를 가져와서 지정한다. 또한 AutoFill 속성을 사용하면 연결된 컬렉션에 있는 모든 이미지를 자동으로 채울 수도 있다. 또한 기타 유용한 설정이 있다. 예를 들어, 비활성화 이미지 표시를 구.TImageList 보다 잘 할 수 있다 (회색 처리 그리고/또는 반투명 처리 등).

TVirtualImageList는 화면 크기에 맞는 이미지가 사용된다는 점이 핵심이다. 이미지 리스트에 높이와 너비를 지정한다는 점은 구.TImageList와 마찬가지이지만, 그 의미는 다르다. 구.TImageList에서 높이와 너비가 각각 16으로 지정되면 표현되는 화면과 상관없이 무조건 16x16으로 표현 되었지만, TVirtualImageList에서 높이와 너비가 각각 16으로 지정하면 배율이 100%일 때 16x16으로 표현하라는 의미이므로, 화면 배율 변하면, 크기도 변한다.

High DPI 창별 배율 (High DPI scales per-window)이란  서로 다른 폼에 서로 다른 배율이 적용될 수 도 있다는 의미이다.  이때 (DPI 변화에 맞추어 이미지 리스트가 확대/축소 해야하는 경우) 그 배율은 폼에 적용된 배율을 기준으로 한다. 따라서 TVirtualImageList는 폼에서만 사용할 수 있다 (TImageCollection과 달리 데이터 모듈에서는 사용할 수 없다. 데이터 모듈은 비시각적 콘트롤이므로 배율과 관련이 없기 때문이다). TVirtualImageList는 폼에 적용된 현재 배율을 파악하고, 이미지컬렉션에 있는 이미지 중 그 배율에 맞는 이미지를 가져와서 표현한다.

TVirtualImageList에 지정하는 높이와 너비가 배율 100%를 기준으로 하기 때문에 이것이 가능하다. 만약 TVirtualImageList가 들어있는 폼에 적용되는 배율이 200%라면, 높이와 너비가 모두 16으로 지정된 TVirtualImageList는 실제로 32×32 아이콘을 그린다. 16의 200%가 32이기 때문이다.

TVirtualImageList는 고해상도 이미지를 그린다. 크기에 딱맞는 이미지가 있으면 그것이 사용된다. 만약 딱맞는 것이 없으면 해상도가 더 높은 이미지를 가져와서 수준높은 확대/축소 알고리즘을 거쳐서 표현한다. 이런 이미지 처리 결과 캐시되기 때문에 이미지 별도 단 한번만 수행된다. TVirtualImageList는  TCustomImageList를 상속받았으며 HIMAGELIST 핸들이 있다. 따라서 WinAPI 메소드를 호출할 수 있다.

새 이미지 리스트로 컨버전하기

TImageCollection에는 구.TImageList에 들어 있는 이미지를 가져올 수 있는 도구가 제공된다. TImageCollection에서 오른쪽 클릭을 하여 구.TImageList 여러개에서 이미지들을 한꺼번에 임포트할 수 있다.

도움말

Docwiki에는 TImageCollection과 TVirtualImageList에 대한 자세한 도움말(영문 보기, 한글 자동 번역 보기)이 있다. 아키텍처와 컴포넌트에 대해 이 글에서 소개한 내용보다 자세히 설명되어 있고, 새 High DPI 이미지 리스트로 마이그레이션하는 방법과 베스트 프렉티스가 있다.

최종 결과

이미지 리스트 데모 화면의 스크린 샷이다. 100% 배율 화면:

800% 배율 화면:

이미지가 더 선명하고 깨끗하다.

새 High DPI 이미지 리스트 (TImageCollection 과 TVirtualImageList)는 DPI를 인식하여 배율에 맞는 고품질 이미지를 자동으로 반영한다. 기존의 TImageLists와 완전히 호환되고 예전 방식의 비트맵과 이미지 리스트를 임포팅할 수 있다. VCL 전체를 아우르는 PerMonitor V2의 High DPI 지원과 함께 사용하면 RAD 스튜디오 10.3 부터는 배율을 인식하는 시각적으로 훌륭한 고품질 앱을 만들 수 있다.