본문 바로가기
파이썬-PySide6(PyQt6)

1. PySide6의 QtDesigner를 사용해봅시다.

by Martinii의 회사원코딩 2021. 3. 29.

QtDesigner 실행해보기

pip를 통해 PySide6를 설치했다면, 파이썬폴더\Library\bin이나 파이썬폴더\Lib\site-packages\PySide6 폴더 안에 designer.exe(또는 pyside6-designer.exe)가 같이 설치되어 있습니다. 귀찮다면 시작버튼을 누르고 "designer"를 입력하면 아래와 같이 프로그램 목록에 하나 튀어나올 것입니다.

 

designer.exe를 선택해서 실행해봅시다.

 

최초 실행화면은 아래와 같습니다.

 

designer.exe 실행화면입니다.

 

(조금 부족한 듯 싶지만,) 지금까지 PySide에 대한 튜토리얼을 통해 QWidget이나 QMainWindow를 상속한 GUI창을 만들어보았습니다. 간단한 창이라면 코드를 사용해서 제작하는 걸로도 충분하지만, 어느 정도 규모를 넘어서거나, 섬세한 사이즈조절을 하기 위해서는 코드만으로는 까다로운 부분이 있습니다. 다행히 designer.exe를 통해 드래그앤드랍 방식으로 GUI창을 설계할 수 있습니다. 픽셀단위로 UI를 조정할 수도 있고, 지난 포스팅에서 배웠던 시그널-슬롯 또는 다양한 로직을 적용할 수도 있습니다.

이번 포스팅부터는 QtDesigner를 통해 UI를 만드는 연습을 해보면서 레이아웃, 위젯이나 파이썬 코드와 연동하는 실습까지 다뤄보겠습니다.

 

QtDesigner 시작하기

이번 포스팅에서는 QtDesigner를 통해 간략하게 UI를 하나 짜보고 파이썬으로 불러오는 과정까지를 진행해보겠습니다. 프로그램도 간단하고, 조금만 익숙해지시면 UI 짜는 건 식은죽먹기가 되겠지만, 결국 디자인의 영역이기 때문에 멋진 어플을 만들기 위해서는 다소간 연습이 필요하다는 것도 느끼시게 될 겁니다.

우선 첫 화면, "새 폼" 팝업에서 "Main Window"를 더블클릭해봅시다.

 

파이썬 코드로만 사용했던 그 MainWindow를 더블클릭 한 번으로 생성?

 

QtDesigner를 통해 제작한 GUI파일은 확장자가 .ui입니다.

 

파일형식은 Designer UI파일(*.ui) 한 종류입니다.

 

ui파일을 제작하고 난 후에는 pyside6-uic.exe 파일을 통해 파이썬파일로 변환하게 됩니다. 이건 조금 있다 다루기로 하고요. 

 

Main Window를 더블클릭하여 열었으면 아래와 같은 화면이 나타났을 겁니다.

 

일반적인 QtDesigner 화면입니다.

 

경험상 이 프로그램이 자주 튕기거나 하지는 않지만 그래도 저장을 자주 해주는 습관을 들이는 것이 아주 중요합니다. Ctrl-s를 눌러 먼저 "mainwindow.ui"로 저장을 해줍시다.

 

저장을 자주 하는 습관을 기릅시다.

 

 

기본 메인윈도우창은 굉장히 간소합니다. 회색바탕에 격자가 가득 차 있습니다.

 

최초의 메인윈도우 화면입니다.

 

기본적으로 메뉴바를 만들 수 있게 "여기에 입력하십시오"라는 칸이 있습니다. 메뉴를 만드는 건 아주 간단한데요. "여기에 입력하십시오" 를 더블클릭한 후에 하나씩 만들어 가면 됩니다. (의미없는 액션입니다. 따라하지 않으셔도 됩니다.)

 

보라색 캐럿 상태에서 엔터를 치면 메뉴나 항목, 구분자를 생성할 수 있게 됩니다.

 

이걸 파이썬 코드로 일일이 치는 것도 아주 빡센 일입니다. QtDesigner가 있어서 참 다행입니다.

창의 사이즈도 마우스로 보기좋게 변경할 수 있습니다.

 

마우스를 쓸 수 있다는 게 이렇게 편한 일이었을 줄...

 

또한 화면 우측 속성편집기의 geometry에서 사이즈를 직접 입력할 수도 있습니다.

 

속성편집기의 geometry항목에서 x,y,width, height 값을 직접 입력할 수 있습니다.

 

위젯을 붙이는 것도 굉장히 직관적입니다. 지난 포스팅에서 setCentralWidget 메서드를 통해 PushButton을 붙이거나, 레이아웃을 추가한 QWidget을 삽입했던 것 기억나시나요? 특히 레이아웃은 QMainWindow 안에 직접 넣을 수가 없었어요. (QWidget이 아닌 QLayout을 상속받은 객체였기 때문이었죠.) 근데 QtDesigner에서는 레이아웃을 바로 붙여넣을 수 있어요. 내부적으로 컨테이너(QWidget)에 넣는 과정을 자동으로 해주기 때문이죠.

 

파란 점을 클릭한 후 드래그하면 크기조절이 가능합니다.

 

지난 포스팅에서 만들어봤던 LineEdit와 Label을 Vertical Layout 안에다 한 번 넣어볼까요?

 

VBoxLayout, QWidget, QLineEdit와 QLabel을 넣는 그 긴 코드를 5초면 만들 수 있다니?

 

갑자기 파이썬 코딩에 현타가 오는 것 같네요. 이렇게 빠르고 쉬운 방법이 있었을 줄..

한 가지만 더 보여드릴게요. 화면 우측 위엔 "객체 탐색기"라는 탭이 있습니다.

 

객체탐색기에서 삽입한 객체와 해당 클래스를 실시간으로 확인하실 수 있습니다.

 

centralwidget 앞의 레이아웃 아이콘에 붉은색으로 "금지" 비슷한 표시가 되어 있죠? 현재는 "레이아웃이 풀려있다"라는 의미입니다. 윈도우에서 외곽의 VBoxLayout 부분에 우클릭하고 제일 하단의 "배치" - "수직으로 배치"를 다시 선택하면 (혹은 단축키 Ctrl-2를 누르면) 금지표시가 사라집니다.

 

 

그러면 레이블 하단에 푸쉬버튼 하나만 더 삽입해 보겠습니다. 좌측의 버튼 탭에서 푸쉬버튼을 클릭하고 드래그해서VBoxLayout의 하단 경계에 갖다대면 파란 실선이 나타납니다. 그 상태로 놓으면 아래 gif이미지처럼 VBoxLayout 안에 적절히 배치됩니다.

 

메인윈도우 안에 차례대로 라인에디트, 레이블, 푸쉬버튼이 배치되었습니다.

 

마지막으로 위젯을 빼는 작업은 선택하고 delete나 backspace키를 누르거나, 지우고자 하는 위젯을 직접 클릭해서 위젯상자 탭으로 드래그하면 됩니다. 라인에디트는 지워봅시다.

 

위젯상자로 드래그하지 않으면 지워지지 않습니다.

 

이렇게 간단한 GUI창을 생성해보았습니다. 현재는 레이블과 푸쉬버튼이 배치된 상태이고 창의 크기는 w250 x h250입니다. 우선 이 상태로 저장한 후 QtDesigner를 닫습니다. mainwindow.ui를 파이참에서 열어보면 다음과 같은 형식입니다.

 

xml 형식인 것을 확인할 수 있습니다.

 

.ui파일을 .py로 변환

이제 pyside6-uic.exe를 실행하기 위해 해당파일이 설치되어 있는 폴더를 찾아서 이동해야 합니다.

현재 제 PC의 경우에는, 프로젝트루트\venv\Scripts 폴더 안에 pyside6-uic.exe 파일이 설치되어 있습니다.

 

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에서 제작한 GUI창을 파이썬에서 이렇게 불러올 수 있었습니다.

 


다음 포스팅에서는

다음 포스팅에서는, QtDesigner를 통해 작성한 py파일은 그대로 둔 채로 ui를 업데이하는 방식, 시그널-슬롯을 연결하는 방법을 설명드리겠습니다. 이번 포스팅을 통해 여러분이 QtDesigner에 더욱 익숙해지셨기를 바랍니다.

그럼 여기서 마치겠습니다.

 


회사원코딩이 추천하는 파이썬 중급 응용서적 3권

 

1. 파이썬을 이용한 비트코인 자동매매:실시간 자동매매 시스템 개발 입문

 

파이썬을 이용한 비트코인 자동매매:실시간 자동매매 시스템 개발 입문

COUPANG

www.coupang.com

제목이 입문이라지만 내가 볼 땐 매매와 파이썬 둘 다 중급 이상이어야 소화가 잘 된다.
조대표님은 정말... (여러 의미로) 불사조 같은 분이라 언젠가 떡상하실 줄 알았다.
이 책 진짜 괜찮고, 조코딩의 유튜브 강의도 올라오고 있다.

 

2. [한빛미디어]이것이 취업을 위한 코딩 테스트다 with 파이썬

 

[한빛미디어]이것이 취업을 위한 코딩 테스트다 with 파이썬

COUPANG

www.coupang.com

요즘 코딩 입문하시는 분들 중에 나동빈 샘을 모르는 분이 있을까?
코딩테스트, 알고리즘 공부하면서 좌절도 해보고 극복도 해보자.
코딩하다가 눈물흘리는 경험을 할 수도 있지만, 분명 좋은 약이 될 것.

 

3. 파이썬 웹 프로그래밍:Django(장고)로 배우는 쉽고 빠른 웹 개발

 

파이썬 웹 프로그래밍:Django(장고)로 배우는 쉽고 빠른 웹 개발

COUPANG

www.coupang.com

자고로 2021년의 "파이썬 개발자"라면 "AI"를 만들어 내든지,
"장고"를 다룰 줄 알아야 한다. 장고 입문은 역시 이 "빨간책" 아닐까?
대충 따라쓰고 덮지 말고, 코드의 의미를 잘근잘근 씹어보면서 내 것으로 만들자.
그 뒤에 "파란책"도 읽고 싶어진다면 당신은 웹개발자 체질!

 

 


donaricano-btn

댓글2

  • pyguy 2021.09.23 10:52

    qt creator 를 pyside6 와 사용하면 유료인가요? 그래서 qt designer 사용하는 건가요?
    답글

    • 안녕하세요? Qt크리에이터 자체가 유료인 것은 아니고, 커머셜 라이센스를 구매하시거나, 오픈소스 프로젝트의 경우 GPLv3 라이센스로 제공되는 툴입니다. 상업적으로 이용하시는 경우 라이센