PyQt개발강좌, QGridLayout과 QStackedLayout을 활용한 고급 레이아웃

1. 서론

PyQt는 Python에서 Qt GUI 라이브러리를 사용하는 방법을 제공하며, 이를 통해 강력하고 반응적인 데스크톱 애플리케이션을 개발할 수 있습니다. 이 강좌에서는 PyQt의 두 가지 레이아웃 관리자인 QGridLayout과 QStackedLayout을 깊이 있게 다루어보겠습니다.

레이아웃 관리는 GUI 애플리케이션에서 사용자 인터페이스 요소를 어떻게 구성하고 배치할지를 결정하는 데 매우 중요합니다. 적절한 레이아웃을 사용하면 사용자 경험을 향상시킬 수 있으며, 개발자는 레이아웃의 유연성을 통해 다양한 화면 크기와 장치에서 일관된 UI를 제공할 수 있습니다.

2. QGridLayout

QGridLayout은 위젯을 그리드 형식으로 배치할 수 있게 도와주는 레이아웃입니다. 이 레이아웃에서는 행(row)과 열(column)을 지정하여 각 위젯 자체의 위치를 정할 수 있습니다.

2.1. QGridLayout의 기본 사용법

기본적으로 QGridLayout을 사용하려면 다음 단계를 따릅니다:

QGridLayout 객체 생성
위젯을 그리드에 추가
레아이웃을 부모 위젯에 설정

2.2. 예제: QGridLayout을 활용한 간단한 계산기

아래 예제는 QGridLayout을 사용하여 간단한 계산기 UI를 만드는 방법을 보여줍니다.

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QGridLayout, QPushButton, QLabel

class Calculator(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        grid = QGridLayout()
        self.setLayout(grid)

        self.result_label = QLabel('0', self)
        grid.addWidget(self.result_label, 0, 0, 1, 4)

        buttons = [
            ('7', 1, 0), ('8', 1, 1), ('9', 1, 2), ('/', 1, 3),
            ('4', 2, 0), ('5', 2, 1), ('6', 2, 2), ('*', 2, 3),
            ('1', 3, 0), ('2', 3, 1), ('3', 3, 2), ('-', 3, 3),
            ('0', 4, 0), ('C', 4, 1), ('=', 4, 2), ('+', 4, 3)
        ]

        for (text, row, col) in buttons:
            button = QPushButton(text, self)
            grid.addWidget(button, row, col)

        self.setWindowTitle('Calculator')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    calc = Calculator()
    sys.exit(app.exec_())

이 예제에서는 4×4 그리드를 사용하여 각 버튼을 위치시키고, 결과를 보여줄 QLabel을 생성합니다. 사용자는 버튼을 클릭하여 숫자와 연산을 수행할 수 있습니다.

3. QStackedLayout

QStackedLayout은 여러 위젯을 겹쳐서 배치할 수 있게 해줍니다. 이 레이아웃은 현재 보이는 위젯을 제외한 모든 위젯을 숨긴 채로 각각의 페이지를 전환할 수 있습니다.

3.1. QStackedLayout의 기본 사용법

QStackedLayout을 사용하는 방법은 다음과 같습니다:

QStackedLayout 객체 생성
위젯을 추가
현재 페이지를 설정

3.2. 예제: QStackedLayout을 활용한 다중 페이지 UI

아래 예제는 QStackedLayout을 사용하여 두 개의 간단한 페이지를 전환하는 방법을 보여줍니다.

class StackedWidgetExample(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.stacked_layout = QStackedLayout()

        # 페이지 1
        page1 = QWidget()
        button1 = QPushButton('Go to Page 2', self)
        button1.clicked.connect(self.show_page2)
        layout1 = QVBoxLayout()
        layout1.addWidget(QLabel('This is Page 1'))
        layout1.addWidget(button1)
        page1.setLayout(layout1)

        # 페이지 2
        page2 = QWidget()
        button2 = QPushButton('Go to Page 1', self)
        button2.clicked.connect(self.show_page1)
        layout2 = QVBoxLayout()
        layout2.addWidget(QLabel('This is Page 2'))
        layout2.addWidget(button2)
        page2.setLayout(layout2)

        self.stacked_layout.addWidget(page1)
        self.stacked_layout.addWidget(page2)

        self.setLayout(self.stacked_layout)
        self.setWindowTitle('Stacked Layout Example')
        self.show()

    def show_page1(self):
        self.stacked_layout.setCurrentIndex(0)

    def show_page2(self):
        self.stacked_layout.setCurrentIndex(1)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = StackedWidgetExample()
    sys.exit(app.exec_())

이 예제에서는 두 개의 페이지가 있으며, 버튼 클릭을 통해 서로 전환할 수 있습니다. 사용자는 단지 필요에 따라 보이는 페이지를 변경할 수 있습니다.

4. QGridLayout과 QStackedLayout의 결합 사용

QGridLayout과 QStackedLayout은 함께 사용하여 보다 복잡한 사용자 인터페이스를 만들 수 있습니다. 예를 들어, QStackedLayout 내의 각 페이지에 QGridLayout을 사용할 수 있습니다. 이를 통해 동적인 UI를 구성할 수 있습니다.

4.1. 예제: 복합 레이아웃 UI

아래 예제는 QStackedLayout의 각 페이지에 QGridLayout을 사용하여 간단한 폼과 간단한 정보 표시를 만드는 방법을 보여줍니다.

class CombinedLayoutExample(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.stacked_layout = QStackedLayout()

        # 페이지 1: 로그인 폼
        login_page = QWidget()
        grid1 = QGridLayout()
        grid1.addWidget(QLabel('Username'), 0, 0)
        grid1.addWidget(QLineEdit(), 0, 1)
        grid1.addWidget(QLabel('Password'), 1, 0)
        grid1.addWidget(QLineEdit(), 1, 1)
        login_button = QPushButton('Login', self)
        login_button.clicked.connect(self.show_info_page)
        grid1.addWidget(login_button, 2, 0, 1, 2)
        login_page.setLayout(grid1)

        # 페이지 2: 정보 표시
        info_page = QWidget()
        grid2 = QGridLayout()
        info_label = QLabel('Welcome!', self)
        grid2.addWidget(info_label, 0, 0)
        back_button = QPushButton('Back to Login', self)
        back_button.clicked.connect(self.show_login_page)
        grid2.addWidget(back_button, 1, 0)
        info_page.setLayout(grid2)

        self.stacked_layout.addWidget(login_page)
        self.stacked_layout.addWidget(info_page)

        self.setLayout(self.stacked_layout)
        self.setWindowTitle('Combined Layout Example')
        self.show()

    def show_login_page(self):
        self.stacked_layout.setCurrentIndex(0)

    def show_info_page(self):
        self.stacked_layout.setCurrentIndex(1)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = CombinedLayoutExample()
    sys.exit(app.exec_())

이 예제에서는 로그인 페이지와 환영 페이지가 있으며, 사용자는 로그인 후 정보를 시각적으로 확인할 수 있습니다. 이를 통해 사용자에게 직관적인 경험을 제공할 수 있습니다.

5. 결론

본 강좌에서는 QGridLayout과 QStackedLayout의 기본 개념과 사용법을 살펴보았고, 실제 예제를 통해 두 개의 레이아웃을 활용하는 방법을 알아보았습니다. QGridLayout을 사용하여 위젯을 논리적으로 배열하고, QStackedLayout을 통해 복잡한 페이지 전환을 쉽게 처리할 수 있다는 점에서 이 두 레이아웃은 강력한 도구입니다.

PyQt를 사용하여 GUI 애플리케이션을 개발할 때, 이러한 레이아웃을 적절히 활용하면 뛰어난 사용자 경험을 제공할 수 있습니다. 복잡한 UI를 구성하는 데 이러한 레이아웃의 장점을 활용하며, 다양한 상황에 맞는 애플리케이션을 만들 수 있습니다.

더 나아가 PyQt를 통한 UI 개발에 대한 이해를 넓히고, 개인적인 프로젝트나 상용 애플리케이션 개발에 있어서 이 강좌가 도움이 되기를 바랍니다. 다음 단계로는 PyQt의 다양한 위젯과 이벤트 핸들링에 대해 알아보는 것을 추천합니다.