PyQt GUI (11) : 아이콘을 이용하여 위젯을 좀 더 직관적으로 꾸미기 - QIcon, QPixmap

GUI는 출력하는 데이터를 보다 직관적으로 보여주는 것이 중요한데, 이를 위해서는 글 보다는 그림을 사용하는 편이 좋습니다. 특히 아이콘을 적절히 사용한다면, 직관적이면서도 익숙한 GUI를 만들 수 있습니다. 

 

PyQt에서는 QIcon을 이용하여 아이콘을 생성하고 이를 PushButton, ComboBox, ListWidget 등에서 사용할 수 있습니다. 이번 포스팅에서는 QIcon, 그리고 이를 좀 더 잘 사용하기 위한 QPixmap에 대해서 알아 보도록 하겠습니다. 

 

우선, Icon을 사용한 combobox와 Icon을 사용하지 않은 combobox의 비교를 통해서 Icon을 사용했을 때, 훨씬 더 직관적인 GUI를 만들 수 있음을 예시로 보여주겠습니다.

색깔을 선택하는 두개의 combobox입니다. 위 combobox는 Icon을 사용한 것이고, 아래 combobox는 그렇지 않은 것 입니다. 두 combobox중 어느 combobox가 색깔을 선택하는 combobox라고 생각이 드는지요? 아마 위 combobox일 것 입니다. 위 combobox는 무지개 Icon을 이용하여 무언가 색깔을 골라야 한다는 것을 표현하고 있습니다. 굳이 COLOR라는 단어를 읽지 않더라도 이 combobox는 색깔과 관련된 것이라는 것을 바로 알 수 있습니다. 

각 combobox의 항목을 열었을 때, 더욱 더 극명하게 Icon 사용 여부에 따른 GUI의 가독성(직관성)에 대해서 차이를 느낄 수 있습니다. 역시나 위 combobox는 각 아이템 리스트에 Icon을 사용한 것이고, 아래는 그렇지 않은 것 입니다. 위 combobox에서는 각 색의 이름에 맞춰서 아이콘을 사용하여 글씨를 읽지 않고서도 바로 원하는 색깔을 선택할 수 있습니다. 그러나, 아래 combobox는 모든 리스트의 색깔 이름을 하나 하나 다 읽어야 합니다. 뭐 굳이 설명을 하지 않더라도 Icon사용의 여부에 따른 가독성의 차이를 이해할 수 있을 것 입니다. 

combobox = QComboBox()
combobox.addItem(QIcon('./rainbow.jpg'), 'COLOR')
combobox.addItem(QIcon('./red.png'), 'RED')
combobox.addItem(QIcon('./green.png'), 'GREEN')
combobox.addItem(QIcon('./blue.png'), 'BLUE')

위 코드는 Icon을 사용하여 combobox에 아이템을 추가하는 것 입니다. Icon을 추가 하지 않는 경우 str형식으로 원하는 아이템의 내용을 적어 주면 되지만, Icon을 사용하는 경우, QIcon을 이용하여 Icon class를 생성하고, 이를 addItem의 첫 번째 인자로 넣어 줍니다. 두 번째 인자는 str 형식의 내용이 됩니다. 

icon = QIcon(그림파일경로)

는 Icon을 생성하는 가장 간단한 방법입니다. PyQt에서는 대부분의 그림 파일의 형식이 지원됩니다. 위 예제로 들었던 combobox에서는 미리 rainbow.jgp, red.png, green.png, blue.png를 준비 해 놓고, 이 그림을 Icon으로 만든 것 입니다. 

 

이번에는 PushButton에 아이콘을 넣어 보도록 하겠습니다. 

위 GUI는 PushButton에 각각 강아지와 고양이 사진을 아이콘으로 넣은 예시 입니다. 위에서는 아주 간단하게 Icon(그림파일경로)을 이용하여 Icon instance를 생성했지만, 이번에는 QPixmap을 이용하여 이미지를 한 번 아주 간단하게 편집을 하고 나서 편집된 이미지를 Icon으로 사용하는 방식을 따르겠습니다. 우선 전체 코드는 아래와 같습니다. 

        pixmap = QPixmap('./dog.jpg') # QPixmap 생성
        pixmap = pixmap.scaled(100, 100, Qt.IgnoreAspectRatio) # 이미지 크기 변경
        
        icon = QIcon() # QIcon 생성
        icon.addPixmap(pixmap) #아이콘에 이미지 설정
        
        button = QPushButton("Dog")
        button.setFont(QFont("Helvetica", 20)) #Pushbutton font 설정
        button.setIcon(icon) #Pushbutton에 아이콘 설정
        button.setIconSize(QSize(100, 100)) #Pushbutton의 아이콘 크기 설정

QPixmap은 이미지 출력을 위한 class입니다. 위 코드에서는

 

(1)라인 :  QPixmap 클래스를 생성 

(2)라인 :  이미지(dog.jpg)의 크기를 100px x 100px 로 변경 (원래 사진의 AspectRatio는 무시하고 크기를 변경)

 

와 와 같이 간단한 처리만을 했습니다. 이렇게 생성된 pixmap을 아이콘의 이미지로 사용했는데요. 

 

(3)라인 : QIcon() 으로 빈 아이콘 생성

(4)라인 : 미리 만들어 놓은 pixmap을 아이콘의 이미지로 설정

 

하였습니다. QIcon('dog.jpg')와 같이 이미지를 바로 Icon에 설정할 수 있지만, 이 경우 원래 이미지가 원하는 크기가 아니거나, 가로세로 비율이 원하는 비율이 아니면 원하는 형태의 Icon이 만들어지지 않는다는 단점이 있습니다. 이를 극복하기 위해서 pixmap을 만든것 입니다. 

 

그 다음에 QPushButton 클래스를 만들고, 폰트를 변경하는 것은 이전에 소개했던것 같아 설명을 생략합니다.다. PushButton에 들어가는 아이콘의 크기는 setIconSize를 통해서 설정할 수 있으며 인자로는 QSize(가로, 세로)와 같이 QSize를 받습니다. 아래에 있는 Cat PushButton은 반복이니, 그림 파일의 경로만 달리하여 똑같이 하면 됩니다. 

 

QIcon은 combobox, pushbutton뿐 아니라 다양한 곳에 사용될 수 있습니다. 쉽게 생각해서 str으로 입력해 주는 위젯에는 항상 같이 사용될 수 있다고 보는것이 편리합니다. 여러번 설명한 바와 같이 QIcon은 필수적인 요소는 아니지만, 적절히 사용하면 GUI의 직관성과 가독성을 매우 높일 수 있는 매우 중요한 요소입니다.