high dpi 델파이, C++빌더의 윈도우10과 High DPI 디스플레이 지원

[Kori]

데이비드 밀링턴 (David Millington) 의 Windows 10 and Modern High DPI Display Support in Delphi and C++Builder 를 번역했습니다. (원문 작성 시기: 2019년 9월)

요즘 화면은 크기와 해상도가 몇년 전에 비해 크게 높아졌다. 지금 이 글을 작성하고 있는 맥북에는 1920x1080 24인치 외부 모니터가 연결되어 있고 이 맥북 프로의 화면은 2880x1800 15인치 레티나이다. 세로를 기준으로 비교하면, 외부 모니터 화면은 맥북의 레티나 화면에 비해 한줄에 들어있는 픽셀수는 3분의 2밖에 되지 않지만, 길이는 1.25배 더 크다. 따라서 인치당 픽셀의 수는 크게 차이난다. 외부 모니터는 인치당 90 픽셀이고, 맥푹 프로는 인치당 227픽셀이다. 거의 2.5배 정도(정확히는 2.44배) 차이가 난다. 이런 차이와 관련하여 High DPI라는 용어가 널리 사용된다. DPI는 'Dots per inch' 즉 '인치 당 점의 갯수'이다. 이 용어는 인쇄 분야에서 사용되던 점(Dot)과 모니터에서 사용되던 픽셀(Pixel)간에 다소 혼란스러운 바가 있긴하다.

고해상도 열풍은 애플이 주도했다. 2010년 아이폰4에서 처음으로 '레티나' 디스플레이를 적용하기 시작했고 이어서, 2012년에 맥북 프로 라인에 적용했다. 그러나 더 높은 해상도 즉 물리적으로 크기가 같은 영역에 더 많은 픽셀이 들어가는 화면으로 인해 문제가 생겼다. 특히 윈도우의 경우, 전통적으로 UI 레이아웃은 실제 물리적인 화면의 길이가 아니라 픽셀 단위로 계산한다. 툴바에 있는 아이콘은 항상 16 x 16 픽셀이 기본 크기이고, 버튼의 표준 크기는 너비가 75 픽셀이고 높이가 25 픽셀이었다 (델파이가 아닌 일부 다른 개발 도구로 만든 UI 애플리케이션에서는 24 픽셀). 하지만 화면 해상도가 높아짐에 따라, 픽셀 하나의 크기가 현격하게 작아지게 된다. 툴바의 아이콘이 지금 내 외장 모니터에서는 실제로 0.44cm인데, 내 맥북 프로에서는 0.17cm 이다. 이 문제를 해결하기 위해 윈도우 7에서 High DPI 지원을 시작했지만, 완전하고 견고하게 이 문제를 해소한 것은 윈도우 10 크리에이터 업데이트에서 도입된 'perMonitorV2' High DPI 지원이다.

(버전2 라는 이름을 통해서 우리는 윈도우에서 High DPI를 지원하는 과정이 상당히 복잡하고, 선택지가 많고, 이슈 해소를 위해 반복을 통해 발전함을 알 수 있다.)

윈도우 10에서 perMonitorV2 고해상도를 지원하는 애플리케이션은 각 화면이 표현되는 화면의 해상도에 따라 동적으로 창의 크기를 맞출 수 있다. 즉 내 외장 모니터에 있던 앱을 드래그하여 맥북의 모니터로 옮기면 (비 클라이언트 영역, 테마 렌더링 등등을 포함하여) 창의 배율이 모니터에 맞게 조정어서 물리적인 크기를 잘 유지한다. 앱의 여러 창들이 각각 다른 모니터에서 표현될 때도 마찬가지이다. 2018년 11월부터 델파이와 C++빌더는 10.3 버전을 통해에서 (윈도우 UI 프레임워크인) VCL에 High DPI 지원을 시작했다. 그 이후로도 지속적인업데이트들을 통해 실제로 많은 개발자들이 VCL 고해상도 지원 기능을 잘 활용하고 만족하고 있다.

VCL 스타일 (테마)과 IDE 자체에 대한 High DPI 지원 계획도 로드맵에 있다. (2019년 9월) 현재는 VCL에서만 High DPI를 지원하고 있다.

이미지

VCL의 High DPI 지원은 자동 방식이다. Project > Options > Manifest page 에서 ‘DPI Awareness’ 옵션을 지정하기만 하면 모든 UI 컨트롤의 크기와 위치가 알맞게 반영된다. 컨트롤이 화면에 표현되는 방식은 (선이나 테두리 등) 모양을 직접 그리기 또는 윈도우 테마 (윈도우 10에서는 High DPI도 지원)를 통해서 그리기 중 하나이기 때문에 앱과 해당 컨트롤들은 정확히 동일하게 표현된다. 단지 선명도가 모니터에 따라 살짝 차이가 날 뿐이다.

단 한 가지 예외가 있는데...

바로 이미지이다. 대표적으로 툴 바의 아이콘을 들 수 있다.

윈도우는 이미지를 이미지 리스트에 저장하는데, 이미지 리스트는 크기가 하나인 이미지들이 모여있는 곳이다. 이제 문제가 무엇인지 눈치챘을 수도 있겠지만, High DPI 화면에서 툴바 버튼 컨트롤은 기본 픽셀 크기의 2.5 배까지 커지지만, 이미지 리스트에 있는 버튼의 이미지는 알맞게 대응할 수 없으므로 16x16 이미지가 40x40으로 늘어가기 때문에 뿌옇게 표현된다.

		16x16 픽셀 아이콘
		동일한 16x16 아이콘이 2.5 배(40x40)로 늘어나서 표현된 모습 대부분의 High DPI 애플리케이션들이 이렇게 표시한다.
		선명하게 40x40으로 표현된 모습 델파이와 C++빌더가 사용하는 방식

 

델파이와 C++빌더 기술이 놀라운 기술이 여기에 들어 있다. High DPI VCL 지원을 RAD스튜디오 10.3에 담아 출시할 때, 엠바카데로는 윈도우 자체의 High DPI perMonitorv2만 지원한 것이 아니라 더 나아가 이미지 확대/축소 문제를 해소했다. 이 문제는 윈도우 이미지 리스트와 관련되어 있으며 윈도우 스스로 아직까지 해결하지 못한 문제이다. 우리는 가상의 이미지 리스트를 도입하여 High DPI를 담고, 어떤 DPI 또는 화면 배율에도 선명한 이미지를 표현하도록 했다. 가상 이미지 리스트는 (HIMAGELIST 핸들이 있는) 윈도우 이미지 리스트 등 기존의 TImageList와의 하위 호환성을 완벽하게 지키면서도 확대/축소를 반영한다. 우리 개발 도구의 가치를 알 수 있는 좋은 사례이다. 우리 프레임워크를 사용하지 않고 이렇게 구현하려면 개발자가 엄청난 수작업을 해야할 것이다.

VCL의 High DPI 이미지 리스트 컴포넌트에 대한 자세한 내용을 확인해보자.