3.3 소스 코드 기반, GUI 개발 이해

1. GUI 있는 애플리케이션 개발 방식

A. 소스 코드 기반

Source Code .py 파일 ▶ UI 구현
위젯 생성, 레이아웃, 시그널/슬롯 연결, 로직까지 전부 Python/C#/C++ 코드로만 작성하여 프로그램 구현

B. UI 디자이너(WYSIWYG) 기반

UI Designer ▶ HTML, XAML, 태그 .ui 파일 ▶ Source Code .py 파일 ▶ UI 구현
- Qt Designer, WinForms Designer, WPF 디자이너, Android Studio Layout Editor처럼
  드래그&드롭으로 화면을 구성하고,
- 변환 툴이 .ui, .xaml, .designer.cs 같은 ui 파일/코드를 자동 생성
PySide6에서 form.ui → ui_form.py 만들어 프로그램 구현

실무

소스 코드 + UI 디자이너(WYSIWYG)
실무에서는 둘을 섞어서 쓰는 하이브리드 방식이 일반적입니다.

목표

PySide6 기반 GUI 어플리케이션 구현은,
일반적인 GUI 프로그램 개발 방식과 다른 부분이 있어, 이를 이해하기 위해
[1] 소스 코드 기반, [2] UI 디자이너 기반 이 어떻게 다른지 이해하고 시작해야 합니다.
우선 소스 코드 기반 방식부터 이해합니다.

2. QWidget

: 소스코드 기반 GUI 구현 이해

A. QWidget

QWidget 클래스는 PySide6에서 모든 사용자 인터페이스(UI) 객체의 기본 클래스입니다.
즉, 화면에 그려지는 모든 요소의 뼈대(기본 단위) 라고 할 수 있습니다.
버튼, 라벨, 텍스트 입력창부터 메인 윈도우까지, 대부분의 UI 요소는 QWidget 을 기반으로 만들어집니다.

B. QWidget 간단 예제 (PySide6)

from PySide6.QtWidgets import QApplication, QWidget

app = QApplication([])

window = QWidget()
window.setWindowTitle("QWidget 예시")
window.resize(300, 200)

window.show()
app.exec()

단순한 형태의 Widget을 보여주는 예제입니다.

창 제목과 크기 지정을 소스코드에서 직접 수동으로 구현해야 함을 기억합니다.

C. 사용자 정의 클래스로 QWidget 사용 구조 이해하기

import sys
from PySide6.QtWidgets import QApplication, QWidget


class MyWidget(QWidget):  # 사용자 정의 클래스
    def __init__(self):
        super().__init__()

        self.setWindowTitle("사용자 정의 클래스 예시")
        self.resize(300, 200)


if __name__ == "__main__":
    app = QApplication(sys.argv)

    window = MyWidget()  # 클래스 객체 생성
    window.show()

    sys.exit(app.exec())

D. 파일 분할하여 QWidget 사용 구조 이해하기

파일 구조
- widget.py
- main.py

# Widget.py

from PySide6.QtWidgets import QWidget

class MyWidget(QWidget):  # 사용자 정의 클래스
    def __init__(self):
        super().__init__()

        self.setWindowTitle("사용자 정의 클래스 예시")
        self.resize(300, 200)

# main.py

import sys
from PySide6.QtWidgets import QApplication, QWidget
from widget import MyWidget

app = QApplication(sys.argv)
widget = MyWidget()
widget.show()
sys.exit(app.exec())

E. QWidget 기반 커스텀 위젯 만들기 예제

QWidget2 (1).py

0.00MB

3. QMainWindow

: 소스코드 기반 GUI 구현 이해

A. QMainWindow 클래스는 PySide6에서 메인 애플리케이션 윈도우를 만들 때 사용하는 기본 틀입니다.
일반적으로 데스크톱 프로그램에서 가장 중심이 되는 “기본 창(Main Window)”을 구성할 때 사용합니다.

QMainWindow는 단순히 위젯 하나만 올리는 창이 아니라,
메뉴바, 툴바, 도킹 패널, 상태바 등 복잡한 UI 구조를 관리하기 위한 전용 레이아웃을 가지고 있습니다.

구성 요소	설명
QMenuBar	창 상단에 위치하는 메뉴(파일, 편집 등)를 배치
QToolBar	자주 사용하는 기능 아이콘(버튼)을 배치하는 툴바 제공
QDockWidget	좌/우/상/하에 자유롭게 이동·배치할 수 있는 도킹 패널 제공
QStatusBar	창 하단에 메시지 상태를 표시하는 영역 제공
Central Widget	메인 작업 영역. 원하는 위젯을 하나 설정

B. QMainWindow 간단 예제 (PySide6)

from PySide6.QtWidgets import QApplication, QMainWindow

app = QApplication([])

window = QMainWindow()
window.setWindowTitle("QMainWindow 예시")
window.resize(300, 200)

window.show()
app.exec()

C. 사용자 정의 클래스로 QMainWindow 사용 구조 이해하기

from PySide6.QtWidgets import QApplication, QMainWindow, QLabel

class MyWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QMainWindow Example")

        label = QLabel("Hello QMainWindow!")
        self.setCentralWidget(label)

app = QApplication([])
window = MyWindow()
window.show()
app.exec()

이 예제는 개발자가 작성한 MyWindow 클래스 안에서

창(QMainWindow), 라벨(QLabel) 같은 UI 위젯을 직접 코드로 생성하고 배치하여 GUI를 구성하는 예제입니다.

D. (실습) 파일 분할하여 QMainWindow 사용 구조 이해하기

파일 구조
- widget.py
- main.py

위 QMainWindow 단계에서 작업한 내용을 참고하여, 파일을 분할하여 실행되도록 만들어보세요!!

E. QMainWindow + QToolBar + QMenuBar + DockWidget 포함한 실전 예제

QMainWindow2.py

0.01MB

4. QDialog

: 소스코드 기반 GUI 구현 이해

A. QDialog 클래스는 PySide6에서 대화상자(Dialog) 창을 만들기 위한 기본 클래스입니다.
대화상자는 일반적으로 짧은 작업을 수행하거나, 사용자에게 간단한 정보를 전달하거나, 입력을 받기 위한 임시 창을 의미합니다.

B. QDialog 사용 예 (PySide6)

from PySide6.QtWidgets import QApplication, QDialog

app = QApplication([])

window = QDialog()
window.setWindowTitle("QDialog 예시")
window.resize(300, 200)

window.show()
app.exec()

C. 사용자 정의 클래스로 QDialog 사용 구조 이해하기

from PySide6.QtWidgets import QApplication, QDialog, QLabel, QPushButton, QVBoxLayout

class MyDialog(QDialog):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QDialog Example")

        label = QLabel("간단한 대화상자입니다.")
        btn = QPushButton("닫기")
        btn.clicked.connect(self.close)

        layout = QVBoxLayout()
        layout.addWidget(label)
        layout.addWidget(btn)
        self.setLayout(layout)

app = QApplication([])
dialog = MyDialog()
dialog.exec()   # 모달(dialog)

D.(실습)파일 분할하여 QDialog 사용 구조 이해하기

파일 구조
- widget.py
- main.py

위 QDialog 단계에서 작업한 내용을 참고하여, 파일을 분할하여 실행되도록 만들어보세요!!

E. 모달/모델리스로 띄우는 비교 예제

QDialog2.py

0.00MB

모달(Modal)
= 창이 열려 있는 동안 부모 창을 잠금 (사용자는 그 창을 닫기 전까지 다른 창 조작 불가)
모델리스(Modeless)
= 창이 떠 있어도 부모창을 자유롭게 사용할 수 있음 (여러 창을 동시에 사용할 수 있음)

5. QPushButton

: 소스코드 기반 GUI 구현 이해

A. QPushButton 클래스는 PySide6에서 클릭 가능한 버튼(Button) 을 만들기 위한 기본 UI 위젯입니다.

일반적인 데스크톱 프로그램에서 다음과 같은 역할을 담당합니다:

명령 실행(OK, Cancel, Apply 등)
화면 전환(Next, Back)
클릭 이벤트(시그널) 연결

QPushButton은 QWidget을 기반으로 하며, 텍스트, 아이콘, 폰트, 크기, 스타일 등을 모두 코드로 설정할 수 있습니다.

B. 간단 예제 (PySide6)

qt.zip

0.05MB

from PySide6.QtWidgets import QApplication, QWidget, QPushButton
from PySide6.QtGui import QIcon, QFont
from PySide6.QtCore import QSize
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("QPushButton")
        self.setGeometry(200, 200, 400, 300)
        self.setWindowIcon(QIcon("icon/qt.png"))

        # [1] 버튼 생성
        btn = QPushButton("Click Me", self)

        # [2] 버튼의 위치/크기 설정
        btn.setGeometry(100, 100, 130, 130)

        # [3] 버튼 글꼴 설정
        btn.setFont(QFont("Times", 14))

        # [4] 버튼 아이콘 설정
        btn.setIcon(QIcon("icon/qt.png"))
        btn.setIconSize(QSize(36, 36))

app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec())

C. 버튼 색상, 테두리, hover 효과까지 적용

QPushButton2.py

0.00MB

6. QLabel

: 소스코드 기반 GUI 구현 이해

A. QLabel 클래스는 PySide6에서 텍스트, 이미지, 애니메이션(GIF) 등을 화면에 표시하기 위한 기본 UI 위젯입니다.

일반적으로 다음과 같은 정보를 표시하는 데 사용됩니다:

설명 텍스트(label)
제목, 부제목 등 간단 문구
아이콘(image) 또는 사진
상태 표시(로딩 이미지, 알림 등)

QLabel은 PySide6에서 가장 많이 사용되는 출력 전용 위젯이며,

글꼴, 색상, 정렬, 스타일, 이미지 스케일링까지 모두 코드로 제어할 수 있습니다.

B. 간단 예제 (PySide6)

img.zip

0.14MB

from PySide6.QtWidgets import QApplication, QWidget, QLabel
from PySide6.QtGui import QIcon, QFont, QPixmap, QMovie
import sys

class Window(QWidget):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("QLabel")
        self.setGeometry(200, 200, 400, 300)
        self.setWindowIcon(QIcon("icon/qt.png"))

        # ① 텍스트 출력 QLabel
        '''
        label = QLabel("Python GUI Development with PySide6", self)
        label.setGeometry(50, 50, 300, 50)
        label.setFont(QFont("Sanserif", 15))
        label.setStyleSheet("color: green")
        '''

        '''
        # ② 이미지(QPixmap) 출력 QLabel
        label = QLabel(self)
        pixmap = QPixmap("icon/qt.png")
        label.setPixmap(pixmap)
        '''
        
        # ③ GIF(QMovie) 출력 QLabel (애니메이션)
        label = QLabel(self)
        movie = QMovie("icon/img.gif")  # GIF 애니메이션 로드
        movie.setSpeed(500)             # 재생 속도 설정(100 = 기본, 500 = 5배속)
        label.setMovie(movie)           # QLabel에 애니메이션 적용
        movie.start()                   # 애니메이션 재생


app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec())

C. 텍스트/HTML/이미지/스케일/링크/애니메이션까지 모두 포함

QLabel2.py

0.00MB

3.3 소스 코드 기반, GUI 개발 이해

댓글

이 글 공유하기

티스토리툴바

댓글

이 글 공유하기

다른 글

3.5 예제 코드 분석하기 (2)

3.4 UI 디자이너 기반, GUI 개발 이해

3.2 예제 코드 분석하기 (1)

3.1 파이참에서 PySide6 실행하기

티스토리툴바