QtDesigner 실행해보기
pip를 통해 PySide6를 설치했다면, 파이썬폴더\Library\bin이나 파이썬폴더\Lib\site-packages\PySide6 폴더 안에 designer.exe(또는 pyside6-designer.exe)가 같이 설치되어 있습니다. 귀찮다면 시작버튼을 누르고 "designer"를 입력하면 아래와 같이 프로그램 목록에 하나 튀어나올 것입니다.
최초 실행화면은 아래와 같습니다.
(조금 부족한 듯 싶지만,) 지금까지 PySide에 대한 튜토리얼을 통해 QWidget이나 QMainWindow를 상속한 GUI창을 만들어보았습니다. 간단한 창이라면 코드를 사용해서 제작하는 걸로도 충분하지만, 어느 정도 규모를 넘어서거나, 섬세한 사이즈조절을 하기 위해서는 코드만으로는 까다로운 부분이 있습니다. 다행히 designer.exe를 통해 드래그앤드랍 방식으로 GUI창을 설계할 수 있습니다. 픽셀단위로 UI를 조정할 수도 있고, 지난 포스팅에서 배웠던 시그널-슬롯 또는 다양한 로직을 적용할 수도 있습니다.
이번 포스팅부터는 QtDesigner를 통해 UI를 만드는 연습을 해보면서 레이아웃, 위젯이나 파이썬 코드와 연동하는 실습까지 다뤄보겠습니다.
QtDesigner 시작하기
이번 포스팅에서는 QtDesigner를 통해 간략하게 UI를 하나 짜보고 파이썬으로 불러오는 과정까지를 진행해보겠습니다. 프로그램도 간단하고, 조금만 익숙해지시면 UI 짜는 건 식은죽먹기가 되겠지만, 결국 디자인의 영역이기 때문에 멋진 어플을 만들기 위해서는 다소간 연습이 필요하다는 것도 느끼시게 될 겁니다.
우선 첫 화면, "새 폼" 팝업에서 "Main Window"를 더블클릭해봅시다.
QtDesigner를 통해 제작한 GUI파일은 확장자가 .ui입니다.
ui파일을 제작하고 난 후에는 pyside6-uic.exe 파일을 통해 파이썬파일로 변환하게 됩니다. 이건 조금 있다 다루기로 하고요.
Main Window를 더블클릭하여 열었으면 아래와 같은 화면이 나타났을 겁니다.
경험상 이 프로그램이 자주 튕기거나 하지는 않지만 그래도 저장을 자주 해주는 습관을 들이는 것이 아주 중요합니다. Ctrl-s를 눌러 먼저 "mainwindow.ui"로 저장을 해줍시다.
기본 메인윈도우창은 굉장히 간소합니다. 회색바탕에 격자가 가득 차 있습니다.
기본적으로 메뉴바를 만들 수 있게 "여기에 입력하십시오"라는 칸이 있습니다. 메뉴를 만드는 건 아주 간단한데요. "여기에 입력하십시오" 를 더블클릭한 후에 하나씩 만들어 가면 됩니다. (의미없는 액션입니다. 따라하지 않으셔도 됩니다.)
이걸 파이썬 코드로 일일이 치는 것도 아주 빡센 일입니다. QtDesigner가 있어서 참 다행입니다.
창의 사이즈도 마우스로 보기좋게 변경할 수 있습니다.
또한 화면 우측 속성편집기의 geometry에서 사이즈를 직접 입력할 수도 있습니다.
위젯을 붙이는 것도 굉장히 직관적입니다. 지난 포스팅에서 setCentralWidget 메서드를 통해 PushButton을 붙이거나, 레이아웃을 추가한 QWidget을 삽입했던 것 기억나시나요? 특히 레이아웃은 QMainWindow 안에 직접 넣을 수가 없었어요. (QWidget이 아닌 QLayout을 상속받은 객체였기 때문이었죠.) 근데 QtDesigner에서는 레이아웃을 바로 붙여넣을 수 있어요. 내부적으로 컨테이너(QWidget)에 넣는 과정을 자동으로 해주기 때문이죠.
지난 포스팅에서 만들어봤던 LineEdit와 Label을 Vertical Layout 안에다 한 번 넣어볼까요?
갑자기 파이썬 코딩에 현타가 오는 것 같네요. 이렇게 빠르고 쉬운 방법이 있었을 줄..
한 가지만 더 보여드릴게요. 화면 우측 위엔 "객체 탐색기"라는 탭이 있습니다.
centralwidget 앞의 레이아웃 아이콘에 붉은색으로 "금지" 비슷한 표시가 되어 있죠? 현재는 "레이아웃이 풀려있다"라는 의미입니다. 윈도우에서 외곽의 VBoxLayout 부분에 우클릭하고 제일 하단의 "배치" - "수직으로 배치"를 다시 선택하면 (혹은 단축키 Ctrl-2를 누르면) 금지표시가 사라집니다.
그러면 레이블 하단에 푸쉬버튼 하나만 더 삽입해 보겠습니다. 좌측의 버튼 탭에서 푸쉬버튼을 클릭하고 드래그해서VBoxLayout의 하단 경계에 갖다대면 파란 실선이 나타납니다. 그 상태로 놓으면 아래 gif이미지처럼 VBoxLayout 안에 적절히 배치됩니다.
마지막으로 위젯을 빼는 작업은 선택하고 delete나 backspace키를 누르거나, 지우고자 하는 위젯을 직접 클릭해서 위젯상자 탭으로 드래그하면 됩니다. 라인에디트는 지워봅시다.
이렇게 간단한 GUI창을 생성해보았습니다. 현재는 레이블과 푸쉬버튼이 배치된 상태이고 창의 크기는 w250 x h250입니다. 우선 이 상태로 저장한 후 QtDesigner를 닫습니다. mainwindow.ui를 파이참에서 열어보면 다음과 같은 형식입니다.
.ui파일을 .py로 변환
이제 pyside6-uic.exe를 실행하기 위해 해당파일이 설치되어 있는 폴더를 찾아서 이동해야 합니다.
현재 제 PC의 경우에는, 프로젝트루트\venv\Scripts 폴더 안에 pyside6-uic.exe 파일이 설치되어 있습니다.
(혹은 여러분이 가상환경을 사용하신다면, 가상환경을 활성화하기만 하면 어느 위치에서든 실행됩니다. 실행준비는 여러분께서 하실 수 있을거라 믿습니다.)
커맨드프롬프트에서 아래와 같이 입력한 후 엔터를 칩니다.
pyside6-uic <UI파일 경로> -o <변환할 파일명(.py)>
변환된 py파일은 어떤 모습인지 한 번 파이참으로 열어봅시다.
주의사항!!!
가급적 변환된 py파일을 수정하지 말고, QtDesigner를 통해 ui를 직접 수정한 후 변환을 통해 업데이트하는 방식으로 작업합시다. 디자이너의 강력한 기능을 가급적 최대한 활용하시면 좋겠습니다.
mainwindow.py 파일을 임포트하여 사용하기
현재 변환이 완료된 mainwindow.py 파일은 단독으로 사용할 수 없는 파일입니다. 이것 또한 다른 파일에서 임포트하여 상속하기만 하면 됩니다. main.py 파일을 하나 생성한 후 아래와 같이 입력하고 실행해봅시다.
from PySide6.QtWidgets import QApplication, QMainWindow
from mainwindow import Ui_MainWindow
class MainWindow(QMainWindow, Ui_MainWindow):
def __init__(self, *args, obj=None, **kwargs):
super(MainWindow, self).__init__(*args, **kwargs)
self.setupUi(self)
app = QApplication()
window = MainWindow()
window.show()
app.exec_()
2번라인처럼 임포트하고(자동으로 Ui_ 접두어가 붙습니다.)
5~8번처럼 사용합니다. 괄호안에 입력하는 클래스명을 상속한다고 했는데, 두 개를 입력했으니 두 개의 클래스를 동시에 상속하는 형태입니다. (유식한 말로 "다중상속"이라고 부릅니다. 일반적인 경우 기피하는 방식이지만, Qt 프로그래밍에서는 크게 문제가 되지 않으므로 걱정하지 맙시다.)
나머지 11~14번 라인은 기존 사용법과 차이가 없습니다.
코드를 완성했으니 실행해봅시다.
한 번 실행해보겠습니다.
다음 포스팅에서는
다음 포스팅에서는, QtDesigner를 통해 작성한 py파일은 그대로 둔 채로 ui를 업데이하는 방식, 시그널-슬롯을 연결하는 방법을 설명드리겠습니다. 이번 포스팅을 통해 여러분이 QtDesigner에 더욱 익숙해지셨기를 바랍니다.
그럼 여기서 마치겠습니다.
'GUI 튜토리얼 > PySide6 # Qt의 원조가 돌아왔다!' 카테고리의 다른 글
| 1. PySide6-QtDesigner, 윈도우메모장 클론코딩!!1/? + uic팁 (1) | 2021.03.29 |
|---|---|
| 0. PySide6의 시그널-슬롯 활용예제: 다른 위젯을 슬롯으로 연결하기 (1) | 2021.03.28 |
| 1. 시그널-슬롯 응용예제(버튼에 클릭횟수 표시)와 클래스 기본개념 (0) | 2021.03.26 |
댓글