PyQt5의 편리함 느껴보기! - 손코딩과 Designer의 차이
안녕하세요, Dibrary입니다.
앞서, PyQt5를 사용하기 위해 아나콘다를 설치 했고, Qt Designer까지 보여드렸죠.
앞으로 PyQt5를 쓸 때, Qt Designer를 사용할 건데, 과연 Designer 툴이 얼만큼 좋은건지 궁금하시죠?
하핳 궁금하지 않다고 하더라도, 직접 겪어보면 그 간결함에 두 번 다시는 손코딩으로 그래픽 개체를 다루지 않게 될 겁니다.
가장 손 쉬운 예로, 버튼을 쓰는 코드를 만들어보죠.
# 버튼 및 기본 만들기 (손코딩)
먼저 손 코딩을 하려면 사전 정보가 있어야 하는데, 소스코드를 먼저 보여드리겠습니다. 저는 jupyter lab에서 입력했고, 굳이 jupyter lab에서 입력하지 않더라도, 다른 편집툴을 사용하셔도 됩니다. (Pycharm도 좋아요)
Jupyter lab 실행하는 방법은 여기에 있습니다.
[Jupyter lab] 주피터 랩 실행하기
안녕하세요, Dibrary입니다. anaconda를 설치 했지만, jupyter lab 혹은 notebook을 어떻게 여는지 모른다구요? 네 생각보다 쉬우니 한 번만 따라오시면 다음부터는 저절로 하실 수 있을 겁니다. 먼저 anacond
dibrary.tistory.com
처음에 사용할 때는 터미널에서 pip install pyqt5 를 입력 해 주셔야 합니다.
저는 Jupyter lab을 사용해서 해당 화면을 보여드리는 겁니다. 위에 보시면 아래에 Terminal이라고 보이시죠? 누르면 검은 화면이 나옵니다.
위 처럼 말이죠. 생각보다 시간이 좀 걸립니다. 여기까지 한 후에 아래 코드를 입력하고 실행 해 보세요.
버튼만 만들려 했는데, 너무 심심해서 3가지를 넣었습니다. 실행 시키시면 아래와 같은 화면이 나올겁니다.
띠용 엄청 심플하죠? 대충 화면과 코드를 보니 OK라던지, name은 어떤 코드가 동작한 것인지는 알 것 같고.. 그쵸?
네 이 코드를 간단하게 설명 해 보겠습니다.
1. from PyQt5.QtGui import * , from PyQt5.QtWidgets import *
먼저 PyQt5에 있는 기능 중 사용할 것을 불러와야 합니다. 그럴 목적으로 위에 2줄을 사용합니다. (사실 이 코드에서는 첫 번째 줄도 필요 없기도 합니다만...)
꼭 2개만 써야 하는 것도 아니고, 더 많은 기능을 쓰려고 불러오는 모듈이 많을 수록 위에 줄이 여러개가 되곤 합니다.
여기서 두 번째 코드를
from PyQt5.QtWidgets import QDialog, QApplication, QLabel, QLineEdit, QPushButton, QVBoxLayout
이렇게 바꾸고 실행 하셔도 동작 합니다.
여기서 * 는 해당 모듈 안의 모든 기능을 다 쓰고자 할 때 사용 하는 겁니다. 쓰고자 하는 것의 갯수가 명확하면 그냥 일일이 적어줘도 되지만, 우선 몇 개를 쓸 지 모르겠다 싶으면 * 로 해 둔 후에 맨 나중에 정리해도 됩니다.
정말 모듈이 있는지 궁금하시다구요? 네 그래서 경로를 따라 가 보겠습니다.
보시면 QtWidgets 폴더 안에 qapplication부터~ 뭐 qdialog도 있고~ 그쵸? 굉장히 많은 모듈이 보입니다. 그냥 아까 pip install로 다운받은 모듈을 이렇게 가져와서 쓰는구나~ 정도만 생각하시면 됩니다.
2. class MyDialog(QDialog):
이 코드는 말 그대로 클래스를 선언하는 겁니다. 이름은 제가 MyDialog라고 지었고, 이름은 아무렇게나 수정하셔도 됩니다. 근데 괄호 안에 QDialog가 들어가 있죠?
이 화면을 Dialog라는 화면으로 띄우기 위해서 '상속'을 한 것입니다. 상속은 해당 기능을 물려받아서 쓰는 것이다~ 정도만 알아두세요. 여기는 파이썬 문법을 아주 깊게 들어가지 않습니다.
3. def __init__(self):
이 코드는 말 그대로 생성자 부분입니다. 해당 클래스가 실행(show) 되면, 가장 먼저 수행되는 기능이라 보시면 됩니다. 일종의 초기 상태로 만들어 주는 겁니다.
4. QDialog.__init__(self)
아까 상속 받은 QDialog 역시 같이 초기화를 해 주네요.
5. Name = QLabel("name")
이 부분부터 실제로 GUI의 구성 요소를 만든 겁니다. QLabel이라고 하는 것은 '라벨' 요소인데, 말 그대로 글자를 의미합니다. GUI에서 해당 섹터, 버튼, 요소 들이 무엇인지 알려줄 때 그 위에 글자가 있을 수 있죠? 알림문구 처럼요.
그럴 때 사용합니다. 지금 해당 라벨에 표시되는 글자는 name이고, 그 라벨 객체는 Name이라고 썼습니다.
6. edit = QLineEdit( )
이것 역시 QLineEdit이라는, 글자를 입력할 수 있는 요소입니다. GUI에서 빈칸에 글자 입력하고 엔터 누르거나 한 경험이 있으실 겁니다. 그런 입력을 받아낼 수 있는 요소입니다.
7. btnOk = QPushButton("OK")
버튼입니다!. 대놓고 버튼이라고 나오네요. 버튼 안에 글자는 OK이고, 버튼 객체는 btnOk라는 이름으로 지었습니다.
8. layout = QVBoxLayout( )
Vertical Box Layout을 줄여서 표현한 거라고 보시면 됩니다. 세로 박스 레이아웃.
레이아웃 때문에 손 코딩이 굉장히 어려워 지는 것이라 보면 됩니다.
그 아래 코드들은 addWidget으로만 3개가 있죠? 즉, 세로로 만든 레이아웃에 3개의 위젯(요소)를 추가한 셈입니다.
위에 간단히 제가 손그림을 해 보았습니다. 이런 꼴이죠. (앞에서 실행해서 본 화면이랑 아주 흡사하죠?)
9. self.setLayout(layout)
위 코드는 바로 위에서 구성한 레이아웃을 실제 GUI 화면 즉, Dialog에 세팅하는 것입니다. 그래서 set layout이죠.
10. 나머지 코드
맨 아래 4가지 나머지 코드는 실행을 위한 것입니다.
당연히 클래스를 생성하고 보여줘야 하기 때문에, dialog라는 이름으로 인스턴스를 생성하고, show로 실행을 합니다.
뭔가 굉장히 엄청 길었네요.
# 버튼 및 기본 만들기 (Qt Designer쓰기)
이번엔 위에서 만든 것을 그대로 Qt Designer를 사용해서 만들어 보겠습니다. 얼마나 쉬워지는지 비교 해 보시죠.
먼저 Qt Designer를 실행합니다.
위 화면이 가장 먼저 나올텐데, 지금 선택된 Dialog without Buttons를 선택해서 생성해 주세요.
네 위와 같은 화면에 들어오실 겁니다.
그러면 왼쪽에서 label을 찾아서 드래그 하고 가운데로 놓으시면 됩니다. (찾을 때 필터에 label이라고 입력 해도 됩니다.)
그러면 위에 처럼 label이 생깁니다. 아주 쉽죠?
그런 뒤에 더블클릭을 하고 name을 입력 해 줍니다. 아까 띄운 화면과 같은 걸 만들어 볼 테니까요.
그 다음에 lineEdit을 드래그 해서 그 아래에 가져다 놓습니다.
네 끝입니다.
마지막으로 버튼 역시 드래그 해서 가져다 놓으시면 됩니다.
네 버튼도 역시 더블클릭을 해서 OK라는 글자로 바꿔 주었습니다. 크기도 좌우, 상하 길이를 늘릴 수 있습니다.
참고로, 화면 크기도 조정이 됩니다.
조절해서 아까와 비슷하게 만들어 보겠습니다.
네 아까랑 비슷하죠? 이상태로 저장을 합니다. 대신 저장 경로는 '내가 알 수 있는 위치'로 해야 합니다!.
이제 아까처럼 Qt Designer를 사용해서 만든 파일을 이용한 GUI화면을 만들어보겠습니다.
대놓고 봐도 코드가 너무 차이나죠? 간결하죠? (구분을 위해 이번 클래스의 이름을 Practice로 지었습니다.)
나머지는 아까 손코드 설명 할 때 있었고, loadUi라는 코드가 있네요,
이 코드는 ui파일을 불러오는 역할을 합니다. ui파일은 Qt Designer에서 저장하면 생성되는 파일입니다.
ui파일에 이미 화면 레이아웃, 디자인 등이 설정 되어 있으므로 우리는 해당 파일만을 불러와서 show( ) 하면 끝이 나는 셈이죠.
중간에 super( ).__init__( )부분은 아까 위에서 상속 받은 객체의 초기화를 해 주는 것과 같은 역할을 합니다.
어떤가요?
Qt Designer를 쓰면
- Qt Designer에서 마우스로 갖다 놓고
- 해당 화면 저장한 후에
- 만든 파일 불러오는 코드만 작성하면 됩니다.
엄청 쉽죠?
이래서 PyQt5 쓸 때는 손코딩을 잘 안합니다. GUI요소가 몇 개 더 늘어나게 되면 손코딩은 코드 길이가 아주 아주 길어집니다.... (눈알이 돌아가요)
그렇지만, Qt Designer를 쓰게 되면 코드량이 기하급수적으로 늘어나지 않을 뿐더러, 해당 디자인 부분에 대한 것과, 구현 부분이 '구별'되는 효과도 있습니다.