PyQt5 - Qt Designer 튜토리얼 + QLabel 사용법과 Signal (2)

Qt Designer로 UI 만들고 Python 코드에 적용하기

PyQt5에서 UI를 손쉽게 만드는 방법 중 하나는 바로 Qt Designer를 사용하는 것입니다.
코드를 직접 짜지 않아도, 버튼/라벨/입력창 등을 드래그로 배치할 수 있어 생산성을 크게 높일 수 있습니다.

이번 포스트에서는 다음 내용을 다룹니다:

• Qt Designer에서 UI 만드는 방법
• .ui 파일을 .py로 변환하는 방법
• 변환된 UI를 클래스에서 사용하는 방법
• QLabel과 QPushButton 사용방법 간단 예제
• 심화 : PyQtSignal을 이용한 QLabel 실시간 업데이트

아직 PyQt 설치를 못하신 분들은 아래 글을 참조해주세요.

2025.04.19 - [개발/PyQt5] - PyQt5 - PyQt5 개발환경 구성과 Designer 설치 (1)

PyQt5 - PyQt5 개발환경 구성과 Designer 설치 (1)

 

전체 코드 확인 가능한 깃 주소 : https://github.com/bksj-ds/tfTutorial/tree/master/QtTutorial/QLabel

git clone https://github.com/bksj-ds/tfTutorial

---

프로젝트 구조

📁 my_pyqt_app/
 ┣ ui_main.py        # Qt Designer → 변환된 파일
 ┣ main.ui           # 디자이너 원본
 ┗ main_app.py            # 로직이 들어간 메인 코드

1단계: Qt Designer 실행하기

가상환경이 활성화된 상태에서 아래 명령어를 입력하세요:

pyqt5-tools designer

2단계: UI 파일 만들기

Main Window 창

Qt Designer에서 새 폼을 만들 때는 "Main Window" 또는 "Widget"을 선택

라벨을 끌어서 윈도우로 이동

QLabel 객체의 이름은 label로 기본 설정 되어 있음

버튼도 하나 추가 해줍니다.

QPushButton 객체의 이름은 pushButton으로 기본 설정 되어 있음

드래그로 위젯을 배치하고 저장(ctrl + s)하면 .ui 파일로 저장됩니다.

예: main.ui

💡 QLabel, QPushButton, QLineEdit 등을 활용하여 기본 화면을 구성해보세요.

3단계: .ui 파일을 Python 코드로 변환

터미널(Anaconda Prompt)에서 ui 파일이 존재하는 경로로 이동한 이후 다음 명령어를 입력하면 ui 파일을 파이썬 파일로 변환할 수 있습니다. :

pyuic5 -x main.ui -o ui_main.py
main.ui → 원본 UI 파일

ui_main.py → Python 코드로 변환된 UI 클래스

4단계: 변환된 UI를 Python 클래스에서 상속하여 사용하기

이제 ui_main.py를 불러와서 클래스 형태로 사용할 수 있습니다.

# main_app.py
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
from ui_main import Ui_MainWindow  # pyuic5로 변환된 파일에서 불러오기

class MyApp(QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)  # UI 초기화

        # QLabel 텍스트 변경 예시
        self.label.setText("디자이너에서 만든 라벨입니다!")

        # 버튼 클릭 연결
        self.pushButton.clicked.connect(self.on_button_clicked)

    def on_button_clicked(self):
        self.label.setText("버튼이 클릭되었습니다!")

app = QApplication(sys.argv)
window = MyApp()
window.show()
sys.exit(app.exec_())
``

코드를 복사 붙여넣기하면 화면을 확인할 수 있습니다.

메인 화면

버튼을 클릭하면 라벨의 텍스트가 변환 됩니다.

버튼 클릭시

---

심화 과정 : PyQtSignal을 이용한 QLabel 실시간 업데이트

API 연동 -> 전략 대상 종목의 결정 -> 전략 대상 종목 기반 전략 수행 -> (TP/SL 조건에 따른 주문 진행) -> (익/손절 조건에 따른 포지션 청산) -> 청산 및 전략 수행에 따른 로깅

상기 과정으로 진행되는 자동매매 프로그램의 특성상 빠른 시간내에 다양한 작업을 처리하기 위한 비동기 작업이 필수적입니다.

이러한 과정 속에서 UI를 동기적으로 업데이트 시키는 경우 UI 업데이트시 크래시가 발생하여 프로그램이 종료되는 문제가 필연적으로 발생합니다.

(예시 - 자산 정보를 업데이트하는 도중 거래 대상 코인의 변경 등등.. 자동매매 전략 실행중 UI 업데이트가 필요한 경우 반드시 크래시로 인한 프로그램 종료 현상 발생)

왜 귀찮게 Signal을 사용해서 실시간 업데이트를 수행해야 하나요?

문제 상황	해결책
다른 스레드에서 직접 UI 업데이트 시 크래시 발생	Signal을 통해 안전하게 전달
타이머나 백엔드 데이터가 UI에 반영되지 않음	시그널로 이벤트 전달 후 UI 반영

---

전체 예제: 버튼 클릭 시 QLabel 변경 + Signal 사용

---

### `main_app.py`

```python
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
from PyQt5.QtCore import QObject, pyqtSignal, QTimer
from ui_main import Ui_MainWindow

# Signal 정의 클래스
class DataEmitter(QObject):
    updated = pyqtSignal(str)

    def __init__(self):
        super().__init__()
        self.counter = 0
        self.timer = QTimer()
        self.timer.timeout.connect(self.update_label_text)
        self.timer.start(1000)

    def update_label_text(self):
        self.counter += 1
        self.updated.emit(f"Signal 업데이트: {self.counter}")

# 메인 윈도우 클래스
class MyApp(QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.emitter = DataEmitter()
        self.emitter.updated.connect(self.label.setText)

        self.pushButton.clicked.connect(self.handle_click)

    def handle_click(self):
        self.label.setText("버튼이 눌렸습니다!")

app = QApplication(sys.argv)
window = MyApp()
window.show()
sys.exit(app.exec_())

아무것도 바뀐게 없어보이지만 해당 코드를 사용하여 비동기 적으로 UI를 업데이트 하므로써 자동매매 프로그램 동작중 발생할 수 있는 크래시 현상을 완벽하게 방지할 수 있습니다.

PyQt5의 QLabel은 단순 출력뿐 아니라, Signal과 결합하여 실시간 상태 모니터링, 백엔드 데이터 연동, 스레드 간 통신에 활용됩니다.

특히 자동매매 시스템, 데이터 수집기와 같은 GUI 프로젝트에서 Signal-Slot 메커니즘은 필수적인 구조입니다.

다음 글 예고

• QLineEdit & QComboBox 입력 필드 실습
• 스케줄러를 활용한 백그라운드 작업 처리
• QTableWidget으로 실시간 테이블 구성
• 거래소 API/데이터와 연동한 자동매매 대시보드 만들기

이 글이 도움이 되셨다면 공감 ❤️ 과 궁금하셨던 점들을 댓글로 ✍️ 부탁드립니다.

감사합니다.