[NSIS] MUI 헤더 이미지 추가하기

MUI(Modern User Interface)를 사용하여 (언)인스톨 페이지에 사용자 이미지를 손쉽게 추가 디자인하여 프로그램에 특화된 설치용 패키지를 생성할 수 있다.

다음은 헤더 이미지를 추가하는 방법과 주의사항을 정리해 보고자 한다.

기본적인 주의사항

MUI 디자인 변경은 기본적으로 !include "MUI.nsh" 라인을 통해 MUI 사용을 준비하고, 이미지 추가나 페이지 변경 등의 사용자 정의 부분은 항상 !insertmacro MUI_PAGE_...와 같이 페이지를 불러오기 이전에 정의 되어야 한다.

!include "MUI.nsh"

;#############################
; 이 사이에 사용자 정의 한다.
;#############################

!insertmacro MUI_PAGE_WELCOME
; ...

헤더 이미지 사용자 정의

헤더 이미지를 추가하기 위해서는 다음과 같은 스크립트들이 주로 쓰인다.

!define MUI_HEADERIMAGE
!define MUI_HEADERIMAGE_BITMAP "img\header_inst.bmp"
!define MUI_HEADERIMAGE_BITMAP_NOSTRETCH
!define MUI_HEADERIMAGE_UNBITMAP "img\header_uninst.bmp"
!define MUI_HEADERIMAGE_UNBITMAP_NOSTRETCH

헤더 이미지 추가를 위한 스크립트 설명

1. !define MUI_HEADERIMAGE : 페이지의 헤더에 이미지를 표시한다.

2. !define MUI_HEADERIMAGE_BITMAP "bmp_file" : 설치 시 보여줄 비트맵 파일을 지정한다.

3. !define MUI_HEADERIMAGE_BITMAP_NOSTRETCH : 이미지 크기를 자동 조정하지 않는다.¹

4. 기타 !define MUI_HEADERIMAGE_UNBITMAP "bmp_file"과 !define MUI_HEADERIMAGE_BITMAP_NOSTRETCH는 언인스톨 화면에서 보여줄 비트맵 파일에 관련한 내용이다.

헤더 이미지의 크기

공식적인 메뉴얼에 따르면 헤더 이미지는 150 x 57 픽셀 크기의 BMP 파일을 권장하고 있다.

그러나 실제 사용되는 영역은 175 x 53 픽셀로 .. 가로 +25 픽셀, 세로 -4 픽셀의 오차가 난다.

즉, 권장에 따라 세로 150 x 57 픽셀로 비트맵 파일을 제작하여 적용하면 NSIS는 자체적으로 리사이징하여 원하지 않게 왜곡된 이미지로 나타나게 된다.

여기서 배포자는 왜곡 없는 헤더 이미지를 제작하기 위해서 두가지 방법을 생각해 볼 수 있다.

175 x 53 픽셀의 헤더 이미지 제작

단순 명료하게 생각해 보면 가로 175 픽셀, 세로 53 픽셀의 이미지를 제작하여 적용하면 이미지 왜곡 없이 정확하게 들어갈 것이다.

쉽게 쉽게 가자 !!!

헤더 이미지는 175 x 53 픽셀 크기로 제작하면 이미지 왜곡없이 정확하게 들어 간다.

NOSTRETCH 옵션

!define MUI_HEADERIMAGE_BITMAP_NOSTRETCH 스크립트를 사용하면 NSIS는 리사이징하지 않게 된다. 즉, 왜곡이 없는 이미지를 사용한다는 의미이다.

단, 이 부분에서 주의할 부분이 생긴다. 아래의 두가지 예시를 보자.

이미지를 크게 생성할 경우

예시 그림에서 보이는 바와 같이 이미지의 왜곡은 없어지나 크게 만든 만큼의 영역을 차지하게 된다. (해당 소스 이미지는 300 x 70 픽셀의 이미지를 적용한 결과이다.)

이미지를 작게 생성할 경우

또한 이미지가 작은 만큼 작은 영역으로 표시된다. (해당 소스 이미지는 100 x 40 픽셀의 이미지를 적용한 결과이다.)

...NOSTRETCH 옵션을 사용할 경우 배포자가 제작한 이미지 크기에 따라 왜곡 없이 그대로 표현이 된다. 위의 예시 이미지와 같이 소스 이미지 제작에 있어 크기에 주의해야 할 것이다.

사실 NOSTRETCH 옵션은 헤더 부분에 기본 영역(175 x 53 픽셀) 보다 큰 영역(예를 들어 헤더의 가로 영역을 가득 채우는 효과)에 사용하기 위한 옵션인듯 하다. 허나 단순히 큰 이미지를 넣어 버리면 헤더의 글자가 안보이는 문제가 발생한다. 즉, 이미지에 뒤덮여 텍스트가 보이지 않는 것 !! 이 부분은 좀 더 알아 보고 정리해야 할 것 같다.

1. 이 부분은 아래쪽에 헤더이미지를 준비하는 과정에서 추가 설명할 것이다.1