6강. Nesting Layouts
1. 레이아웃 중첩(Nesting Layouts)
: 복잡한 화면은 레이아웃 안에 레이아웃을 또 넣어서 만든다.
import sys
from PySide6.QtWidgets import (
QApplication, QWidget, QPushButton,
QVBoxLayout, QHBoxLayout, QLabel
)
class NestedLayout(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("중첩 레이아웃 예제")
self.resize(320, 220)
# [0] 제목용 레이블
title_label = QLabel("빈 레이블에 출력")
title_label.setStyleSheet("font-size: 14px; font-weight: bold; margin: 8px;")
# [1] 위쪽 가로 레이아웃 (QHBoxLayout)
top_layout = QHBoxLayout()
top_layout.addWidget(QPushButton("위쪽 버튼 1"))
top_layout.addWidget(QPushButton("위쪽 버튼 2"))
# [2] 아래쪽 가로 레이아웃 (QHBoxLayout)
bottom_layout = QHBoxLayout()
bottom_layout.addWidget(QPushButton("아래쪽 버튼 1"))
bottom_layout.addWidget(QPushButton("아래쪽 버튼 2"))
bottom_layout.addWidget(QPushButton("아래쪽 버튼 3"))
# [3] 세로 레이아웃(QVBoxLayout)에 두 개의 HBox를 쌓기
main_layout = QVBoxLayout(self)
main_layout.addWidget(title_label) # 맨 위 설명 레이블
main_layout.addLayout(top_layout) # 위쪽 H 레이아웃
main_layout.addLayout(bottom_layout) # 아래쪽 H 레이아웃
# 실행 영역
if __name__ == "__main__":
app = QApplication(sys.argv)
window = NestedLayout()
window.show()
sys.exit(app.exec())
2. Qt Designer 에서 Nesting Layouts 사용하기 (1)
3. Qt Designer 에서 Nesting Layouts 사용하기 (2)
0. 학습 목표
이번 6.6 단계에서는 PySide6에서 레이아웃 안에 다른 레이아웃을 넣는 구조인 Nesting Layouts를 학습합니다.
이전 단계에서는 QHBoxLayout, QVBoxLayout, QGridLayout, QFormLayout처럼 각각의 레이아웃을 하나씩 사용하는 방법을 배웠습니다.
하지만 실제 GUI 화면은 보통 하나의 레이아웃만으로 구성되지 않습니다.
복잡한 화면은 세로 레이아웃 안에 가로 레이아웃을 넣거나, 가로 레이아웃 안에 또 다른 세로 레이아웃을 넣는 방식으로 만듭니다.
| 학습 목표 | 내용 |
| 레이아웃 중첩 개념 이해 | 레이아웃 안에 다른 레이아웃을 넣어 복잡한 화면을 구성하는 방식을 이해합니다. |
| addWidget()과 addLayout() 차이 이해 | 위젯을 추가할 때는 addWidget(), 레이아웃을 추가할 때는 addLayout()을 사용한다는 점을 이해합니다. |
| QVBoxLayout과 QHBoxLayout 조합 이해 | 세로 레이아웃 안에 여러 개의 가로 레이아웃을 쌓는 구조를 이해합니다. |
| 화면 구조 계층 이해 | 최상위 레이아웃과 내부 레이아웃의 관계를 계층 구조로 이해합니다. |
| Qt Designer 중첩 구조 이해 | Qt Designer에서 부분 레이아웃을 만든 뒤, 폼 전체 레이아웃 안에 포함시키는 흐름을 이해합니다. |
이번 단계의 핵심
Nesting Layouts는 레이아웃 안에 레이아웃을 넣는 구조입니다.
복잡한 화면은 하나의 레이아웃으로 억지로 만들기보다, 작은 레이아웃을 여러 개 만든 뒤 큰 레이아웃 안에 조합해서 만드는 것이 자연스럽습니다.
1. 레이아웃 중첩이란?
1.1 Nesting Layouts의 기본 의미
Nesting Layouts는 레이아웃을 중첩해서 사용하는 방식입니다.
여기서 중첩이란, 하나의 레이아웃 안에 또 다른 레이아웃을 넣는 것을 의미합니다.
| 용어 | 의미 |
| Nesting | 어떤 구조 안에 다른 구조를 넣는 것을 의미합니다. |
| Layout | 위젯의 위치와 크기를 자동으로 관리하는 배치 구조입니다. |
| Nesting Layouts | 레이아웃 안에 다른 레이아웃을 넣어 화면을 구성하는 방식입니다. |
Nesting Layouts
↓
레이아웃 안에 레이아웃을 넣음
↓
작은 배치 구조를 조합해서 복잡한 화면을 만듦따라서 레이아웃 중첩은 복잡한 GUI 화면을 만들 때 반드시 이해해야 하는 구조입니다.
1.2 레이아웃 중첩이 필요한 이유
간단한 화면은 QVBoxLayout 하나만으로도 만들 수 있습니다.
하지만 실제 화면에서는 어떤 줄은 가로로 배치하고, 어떤 영역은 세로로 쌓아야 하는 경우가 많습니다.
| 화면 예시 | 필요한 레이아웃 구조 |
| 상단 제목 + 아래 버튼 줄 | 전체는 세로 배치, 버튼들은 가로 배치 |
| 검색창 + 검색 버튼 + 결과 목록 | 검색 영역은 가로 배치, 전체 화면은 세로 배치 |
| 설정 화면 | 큰 영역은 세로로 나누고, 각 영역 내부는 가로 또는 폼 레이아웃 사용 |
| 대시보드 화면 | 여러 카드, 버튼, 표를 영역별로 나누어 조합 |
중요한 점
복잡한 화면을 하나의 레이아웃으로 모두 해결하려고 하면 구조가 오히려 복잡해집니다.
작은 레이아웃을 먼저 만들고, 그것들을 큰 레이아웃 안에 넣으면 화면 구조를 훨씬 쉽게 이해할 수 있습니다.
2. Nesting Layouts 기본 구조
2.1 기본 사용 흐름
레이아웃 중첩의 기본 흐름은 다음과 같습니다.
부모 위젯 생성
↓
작은 내부 레이아웃 생성
↓
내부 레이아웃에 위젯 추가
↓
최상위 레이아웃 생성
↓
최상위 레이아웃에 위젯 또는 내부 레이아웃 추가
↓
복합 화면 완성이번 예제에서는 두 개의 QHBoxLayout을 만든 뒤, 그것들을 QVBoxLayout 안에 넣습니다.
2.2 addWidget()과 addLayout()의 차이
레이아웃 중첩을 이해할 때 가장 중요한 차이는 addWidget()과 addLayout()입니다.
| 메서드 | 역할 |
| addWidget() | 레이아웃 안에 QPushButton, QLabel 같은 위젯을 추가합니다. |
| addLayout() | 레이아웃 안에 다른 레이아웃을 추가합니다. |
# 위젯을 추가할 때
main_layout.addWidget(title_label)
# 레이아웃을 추가할 때
main_layout.addLayout(top_layout)
main_layout.addLayout(bottom_layout)중요한 점
QPushButton, QLabel 같은 실제 화면 요소는 addWidget()으로 추가합니다.
QHBoxLayout, QVBoxLayout 같은 배치 구조는 addLayout()으로 추가합니다.
2.3 이번 예제의 구조
이번 예제의 화면 구조는 다음과 같습니다.
NestedLayout(QWidget)
└── main_layout : QVBoxLayout
├── title_label : QLabel
├── top_layout : QHBoxLayout
│ ├── 위쪽 버튼 1
│ └── 위쪽 버튼 2
└── bottom_layout : QHBoxLayout
├── 아래쪽 버튼 1
├── 아래쪽 버튼 2
└── 아래쪽 버튼 3가장 바깥쪽에는 QVBoxLayout이 있습니다.
그리고 그 안에 QLabel 하나와 QHBoxLayout 두 개가 위에서 아래로 쌓입니다.
2.4 화면 배치로 이해하기
실제 화면은 다음과 같은 구조로 이해할 수 있습니다.
┌────────────────────────────────────┐
│ 빈 레이블에 출력 │
│ │
│ [ 위쪽 버튼 1 ] [ 위쪽 버튼 2 ] │
│ │
│ [ 아래쪽 버튼 1 ] [ 아래쪽 버튼 2 ] [ 아래쪽 버튼 3 ] │
└────────────────────────────────────┘정리
전체 방향은 세로입니다.
하지만 각 버튼 묶음 내부는 가로 방향입니다.
이처럼 서로 다른 방향의 레이아웃을 조합하는 것이 레이아웃 중첩입니다.
3. 예제 코드
3.1 실습 준비
이번 예제는 PyCharm에서 진행합니다.
새 Python 파일을 만들고 파일명을 main.py로 저장합니다.
프로젝트 가상환경에는 PySide6가 설치되어 있어야 합니다.
3.2 main.py 예제 코드
import sys
from PySide6.QtWidgets import (
QApplication, QWidget, QPushButton,
QVBoxLayout, QHBoxLayout, QLabel
)
class NestedLayout(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("중첩 레이아웃 예제")
self.resize(320, 220)
# [0] 제목용 레이블
title_label = QLabel("빈 레이블에 출력")
title_label.setStyleSheet("font-size: 14px; font-weight: bold; margin: 8px;")
# [1] 위쪽 가로 레이아웃 (QHBoxLayout)
top_layout = QHBoxLayout()
top_layout.addWidget(QPushButton("위쪽 버튼 1"))
top_layout.addWidget(QPushButton("위쪽 버튼 2"))
# [2] 아래쪽 가로 레이아웃 (QHBoxLayout)
bottom_layout = QHBoxLayout()
bottom_layout.addWidget(QPushButton("아래쪽 버튼 1"))
bottom_layout.addWidget(QPushButton("아래쪽 버튼 2"))
bottom_layout.addWidget(QPushButton("아래쪽 버튼 3"))
# [3] 세로 레이아웃(QVBoxLayout)에 두 개의 HBox를 쌓기
main_layout = QVBoxLayout(self)
main_layout.addWidget(title_label) # 맨 위 설명 레이블
main_layout.addLayout(top_layout) # 위쪽 H 레이아웃
main_layout.addLayout(bottom_layout) # 아래쪽 H 레이아웃
# 실행 영역
if __name__ == "__main__":
app = QApplication(sys.argv)
window = NestedLayout()
window.show()
sys.exit(app.exec())
이 예제는 QLabel 하나, 위쪽 QHBoxLayout 하나, 아래쪽 QHBoxLayout 하나를 만든 뒤, 전체를 QVBoxLayout 안에 넣는 구조입니다.
QLabel 생성
↓
위쪽 QHBoxLayout 생성
↓
아래쪽 QHBoxLayout 생성
↓
QVBoxLayout(self) 생성
↓
QLabel과 두 개의 QHBoxLayout을 세로로 쌓음
3.3 실행 결과 구조
프로그램을 실행하면 창 안에 다음과 같은 구조가 만들어집니다.
┌──────────────────────────────────────┐
│ 빈 레이블에 출력 │
│ │
│ [ 위쪽 버튼 1 ] [ 위쪽 버튼 2 ] │
│ │
│ [ 아래쪽 버튼 1 ] [ 아래쪽 버튼 2 ] [ 아래쪽 버튼 3 ] │
└──────────────────────────────────────┘창 전체 기준으로 보면 위에서 아래로 쌓이는 QVBoxLayout 구조입니다.
하지만 버튼들이 들어 있는 각 줄은 QHBoxLayout이기 때문에 가로 방향으로 배치됩니다.
3.4 예제 파일
예제 파일은 main.py로 저장합니다.
4. 코드 분석
4.1 주석 포함 전체 코드
import sys # [1] 파이썬 실행 환경과 종료 처리를 위해 sys 모듈을 가져옴
from PySide6.QtWidgets import ( # [2] PySide6에서 GUI 구성에 필요한 클래스들을 가져옴
QApplication, QWidget, QPushButton,
QVBoxLayout, QHBoxLayout, QLabel
)
# - QApplication: Qt GUI 프로그램 전체를 관리하는 클래스
# - QWidget: 화면에 표시되는 기본 창 위젯 클래스
# - QPushButton: 클릭 가능한 버튼 위젯 클래스
# - QVBoxLayout: 위젯이나 레이아웃을 위에서 아래로 배치하는 레이아웃 클래스
# - QHBoxLayout: 위젯을 왼쪽에서 오른쪽으로 배치하는 레이아웃 클래스
# - QLabel: 텍스트를 화면에 표시하는 위젯 클래스
class NestedLayout(QWidget): # [3] QWidget을 상속받아 새 창 클래스를 정의
def __init__(self): # [4] NestedLayout 객체가 생성될 때 자동으로 실행되는 초기화 메서드
super().__init__() # [5] 부모 클래스(QWidget)의 초기화 기능을 먼저 실행
self.setWindowTitle("중첩 레이아웃 예제") # [6] 창 제목 설정
self.resize(320, 220) # [7] 창 크기 설정
title_label = QLabel("빈 레이블에 출력") # [8] 화면 맨 위에 표시할 QLabel 생성
title_label.setStyleSheet( # [9] QLabel의 글자 크기, 굵기, 여백 스타일 설정
"font-size: 14px; font-weight: bold; margin: 8px;"
)
top_layout = QHBoxLayout() # [10] 위쪽 버튼들을 담을 가로 레이아웃 생성
top_layout.addWidget(QPushButton("위쪽 버튼 1")) # [11] 위쪽 가로 레이아웃에 첫 번째 버튼 추가
top_layout.addWidget(QPushButton("위쪽 버튼 2")) # [12] 위쪽 가로 레이아웃에 두 번째 버튼 추가
bottom_layout = QHBoxLayout() # [13] 아래쪽 버튼들을 담을 가로 레이아웃 생성
bottom_layout.addWidget(QPushButton("아래쪽 버튼 1")) # [14] 아래쪽 가로 레이아웃에 첫 번째 버튼 추가
bottom_layout.addWidget(QPushButton("아래쪽 버튼 2")) # [15] 아래쪽 가로 레이아웃에 두 번째 버튼 추가
bottom_layout.addWidget(QPushButton("아래쪽 버튼 3")) # [16] 아래쪽 가로 레이아웃에 세 번째 버튼 추가
main_layout = QVBoxLayout(self) # [17] 전체 창에 적용할 세로 레이아웃 생성
# - self는 현재 창을 의미함
# - QVBoxLayout(self)는 현재 창에 최상위 레이아웃을 적용하는 방식
main_layout.addWidget(title_label) # [18] QLabel 위젯을 최상위 세로 레이아웃에 추가
main_layout.addLayout(top_layout) # [19] 위쪽 가로 레이아웃을 최상위 세로 레이아웃에 추가
main_layout.addLayout(bottom_layout) # [20] 아래쪽 가로 레이아웃을 최상위 세로 레이아웃에 추가
if __name__ == "__main__": # [21] 이 파일을 직접 실행할 때만 아래 코드 실행
app = QApplication(sys.argv) # [22] Qt GUI 프로그램 실행을 관리하는 QApplication 객체 생성
window = NestedLayout() # [23] NestedLayout 창 객체 생성
window.show() # [24] 창을 화면에 표시
sys.exit(app.exec()) # [25] 이벤트 루프 시작
# - 창이 닫힐 때까지 사용자 입력과 화면 이벤트를 처리함
4.2 단계별 분석
1단계: 필요한 클래스 가져오기
from PySide6.QtWidgets import (
QApplication, QWidget, QPushButton,
QVBoxLayout, QHBoxLayout, QLabel
)이번 예제에서는 기본 창, 버튼, 레이블, 가로 레이아웃, 세로 레이아웃을 사용합니다.
| 클래스 | 역할 |
| QApplication | Qt GUI 프로그램 전체 실행을 관리합니다. |
| QWidget | 화면에 표시되는 기본 창을 만듭니다. |
| QPushButton | 클릭 가능한 버튼을 만듭니다. |
| QLabel | 텍스트를 화면에 표시합니다. |
| QHBoxLayout | 위젯을 가로 방향으로 배치합니다. |
| QVBoxLayout | 위젯이나 다른 레이아웃을 세로 방향으로 배치합니다. |
2단계: 제목용 QLabel 만들기
title_label = QLabel("빈 레이블에 출력")
title_label.setStyleSheet("font-size: 14px; font-weight: bold; margin: 8px;")title_label은 화면 맨 위에 표시할 텍스트 위젯입니다.
setStyleSheet()를 사용해 글자 크기, 굵기, 여백을 지정했습니다.
이 위젯은 나중에 최상위 세로 레이아웃에 addWidget()으로 추가됩니다.
3단계: 위쪽 가로 레이아웃 만들기
top_layout = QHBoxLayout()
top_layout.addWidget(QPushButton("위쪽 버튼 1"))
top_layout.addWidget(QPushButton("위쪽 버튼 2"))top_layout은 위쪽 버튼 2개를 가로로 배치하기 위한 QHBoxLayout입니다.
여기서는 아직 top_layout이 창에 직접 적용된 것은 아닙니다.
먼저 버튼들을 담는 작은 가로 묶음을 만든 상태입니다.
top_layout
[ 위쪽 버튼 1 ] [ 위쪽 버튼 2 ]4단계: 아래쪽 가로 레이아웃 만들기
bottom_layout = QHBoxLayout()
bottom_layout.addWidget(QPushButton("아래쪽 버튼 1"))
bottom_layout.addWidget(QPushButton("아래쪽 버튼 2"))
bottom_layout.addWidget(QPushButton("아래쪽 버튼 3"))bottom_layout은 아래쪽 버튼 3개를 가로로 배치하기 위한 QHBoxLayout입니다.
top_layout과 마찬가지로, 아직 창 전체에 적용된 것은 아닙니다.
bottom_layout
[ 아래쪽 버튼 1 ] [ 아래쪽 버튼 2 ] [ 아래쪽 버튼 3 ]5단계: 최상위 세로 레이아웃 만들기
main_layout = QVBoxLayout(self)main_layout은 창 전체에 적용되는 최상위 레이아웃입니다.
QVBoxLayout(self)로 만들었기 때문에 현재 창인 self에 바로 적용됩니다.
self
↓
NestedLayout 창
↓
QVBoxLayout(self)
↓
창 전체를 위에서 아래 방향으로 배치6단계: 위젯과 레이아웃을 최상위 레이아웃에 추가하기
main_layout.addWidget(title_label)
main_layout.addLayout(top_layout)
main_layout.addLayout(bottom_layout)title_label은 QLabel 위젯이므로 addWidget()으로 추가합니다.
top_layout과 bottom_layout은 레이아웃이므로 addLayout()으로 추가합니다.
main_layout.addWidget(title_label) → QLabel 추가
main_layout.addLayout(top_layout) → QHBoxLayout 추가
main_layout.addLayout(bottom_layout) → QHBoxLayout 추가중요한 점
레이아웃 중첩에서는 addWidget()과 addLayout()을 구분해야 합니다.
위젯은 addWidget(), 레이아웃은 addLayout()으로 추가합니다.
5. Qt Qt Designer에서 내부 레이아웃 먼저 만들기
5.1 위쪽 버튼 묶음을 가로 레이아웃으로 만들기
Qt Designer에서 Nesting Layouts를 만들 때는 먼저 작은 레이아웃 묶음을 만드는 것이 좋습니다.
예를 들어 위쪽 버튼 2개를 선택한 뒤 Lay Out Horizontally를 누르면, 선택한 버튼들만 하나의 QHBoxLayout으로 묶입니다.
Form(QWidget)
└── top_layout : QHBoxLayout
├── QPushButton("위쪽 버튼 1")
└── QPushButton("위쪽 버튼 2")이때 만들어진 QHBoxLayout은 아직 폼 전체를 관리하는 최상위 레이아웃이 아닙니다.
선택한 위쪽 버튼 2개만 관리하는 부분 레이아웃입니다.
5.2 아래쪽 버튼 묶음을 가로 레이아웃으로 만들기
같은 방식으로 아래쪽 버튼 3개를 선택한 뒤 Lay Out Horizontally를 누릅니다.
그러면 아래쪽 버튼들도 하나의 QHBoxLayout으로 묶입니다.
Form(QWidget)
├── top_layout : QHBoxLayout
│ ├── QPushButton("위쪽 버튼 1")
│ └── QPushButton("위쪽 버튼 2")
└── bottom_layout : QHBoxLayout
├── QPushButton("아래쪽 버튼 1")
├── QPushButton("아래쪽 버튼 2")
└── QPushButton("아래쪽 버튼 3")| 작업 | 결과 |
| 위쪽 버튼 2개 선택 후 Lay Out Horizontally | 위쪽 버튼 묶음만 관리하는 QHBoxLayout 생성 |
| 아래쪽 버튼 3개 선택 후 Lay Out Horizontally | 아래쪽 버튼 묶음만 관리하는 QHBoxLayout 생성 |
| 폼 전체 레이아웃 여부 | 아직 폼 전체를 관리하는 최상위 레이아웃은 아님 |
중요한 점
Nesting Layouts에서는 먼저 작은 부분 레이아웃을 만들고, 그다음 전체 레이아웃 안에 넣는 흐름으로 생각하면 좋습니다.
위쪽 버튼 묶음과 아래쪽 버튼 묶음은 각각 독립적인 내부 레이아웃입니다.
6. Qt Qt Designer에서 최상위 레이아웃으로 묶기
6.1 폼 자체를 선택하고 세로 레이아웃 적용하기
내부 레이아웃을 만든 뒤에는 폼 전체를 관리하는 최상위 레이아웃이 필요합니다.
이때 폼 바탕을 선택한 뒤 Lay Out Vertically를 누르면, 폼 전체에 QVBoxLayout이 적용됩니다.
Form(QWidget)
└── main_layout : QVBoxLayout
├── QLabel("빈 레이블에 출력")
├── top_layout : QHBoxLayout
│ ├── QPushButton("위쪽 버튼 1")
│ └── QPushButton("위쪽 버튼 2")
└── bottom_layout : QHBoxLayout
├── QPushButton("아래쪽 버튼 1")
├── QPushButton("아래쪽 버튼 2")
└── QPushButton("아래쪽 버튼 3")이 구조가 바로 레이아웃 중첩입니다.
QVBoxLayout 안에 QLabel과 QHBoxLayout들이 함께 들어가 있습니다.
6.2 코드 관점으로 비교하기
Qt Designer에서 만든 중첩 레이아웃 구조는 코드로 보면 다음과 비슷합니다.
top_layout = QHBoxLayout()
bottom_layout = QHBoxLayout()
main_layout = QVBoxLayout(self)
main_layout.addWidget(title_label)
main_layout.addLayout(top_layout)
main_layout.addLayout(bottom_layout)| Designer 작업 | 코드 관점 |
| 위쪽 버튼 묶음에 가로 레이아웃 적용 | top_layout = QHBoxLayout() |
| 아래쪽 버튼 묶음에 가로 레이아웃 적용 | bottom_layout = QHBoxLayout() |
| 폼 전체에 세로 레이아웃 적용 | main_layout = QVBoxLayout(self) |
| 부분 레이아웃을 전체 레이아웃 안에 포함 | main_layout.addLayout(top_layout) |
6.3 실습에서 확인할 핵심 흐름
Qt Designer에서 Nesting Layouts를 확인할 때는 다음 흐름으로 보면 이해하기 쉽습니다.
1. QLabel을 폼 위쪽에 배치한다.
2. 위쪽 버튼 2개를 배치한다.
3. 위쪽 버튼 2개를 선택하고 Lay Out Horizontally를 누른다.
→ 위쪽 버튼 묶음이 QHBoxLayout이 된다.
4. 아래쪽 버튼 3개를 배치한다.
5. 아래쪽 버튼 3개를 선택하고 Lay Out Horizontally를 누른다.
→ 아래쪽 버튼 묶음이 QHBoxLayout이 된다.
6. 폼 바탕을 선택한다.
7. Lay Out Vertically를 누른다.
→ QLabel, 위쪽 QHBoxLayout, 아래쪽 QHBoxLayout이
최상위 QVBoxLayout 안에 세로로 배치된다.따라서 Qt Designer에서도 레이아웃 중첩은 특별한 기능 하나로 끝나는 것이 아니라, 부분 레이아웃을 먼저 만들고 폼 전체 레이아웃으로 감싸는 흐름으로 이해하면 됩니다.
이번 단계의 핵심
Qt Designer에서 Nesting Layouts를 만들 때는 먼저 내부 레이아웃을 만들고, 그다음 폼 전체에 최상위 레이아웃을 적용합니다.
위젯 선택은 부분 레이아웃을 만들고, 폼 선택은 최상위 레이아웃을 만듭니다.
7. 정리
이번 단계에서는 PySide6에서 레이아웃을 중첩해서 사용하는 Nesting Layouts를 살펴보았습니다.
Nesting Layouts는 복잡한 화면을 만들 때 매우 중요한 구조입니다.
작은 내부 레이아웃 생성
↓
내부 레이아웃에 위젯 추가
↓
최상위 레이아웃 생성
↓
최상위 레이아웃에 내부 레이아웃 추가
↓
복잡한 화면 구조 완성| 개념 | 정리 |
| Nesting Layouts | 레이아웃 안에 다른 레이아웃을 넣는 구조입니다. |
| 내부 레이아웃 | 특정 영역의 위젯들을 먼저 묶는 작은 레이아웃입니다. |
| 최상위 레이아웃 | 창 전체를 관리하는 가장 바깥쪽 레이아웃입니다. |
| addWidget() | 레이아웃 안에 위젯을 추가할 때 사용합니다. |
| addLayout() | 레이아웃 안에 다른 레이아웃을 추가할 때 사용합니다. |
| 이번 예제 구조 | QVBoxLayout 안에 QLabel과 두 개의 QHBoxLayout을 넣는 구조입니다. |
| Qt Designer 방식 | 부분 레이아웃을 먼저 만들고, 폼 전체에 최상위 레이아웃을 적용합니다. |
이번 단계에서 기억할 문장
복잡한 화면은 하나의 레이아웃으로 만드는 것이 아니라, 여러 레이아웃을 중첩해서 만듭니다.
위젯은 addWidget(), 레이아웃은 addLayout()으로 추가합니다.
참고. 공식 문서로 확인하기
이번 예제에서 사용한 Nesting Layouts, Layout Management, QBoxLayout, Qt Designer Layouts, .ui 파일, pyside6-uic는 Qt 공식 문서에서 확인할 수 있습니다.
특히 이번 단계에서 중요한 부분은 레이아웃 안에 다른 레이아웃을 넣어 계층 구조를 만들 수 있다는 점입니다.
1. 공식 문서 참고 표
| 구분 | 공식 문서 | 확인할 내용 |
| Nested Layouts | Qt for Python - Nested Layouts | QHBoxLayout을 만든 뒤 QVBoxLayout 안에 넣는 중첩 구조 예제를 확인할 수 있습니다. |
| Layout Management | Qt for Python - Layout Management | addLayout()을 사용해 레이아웃 안에 레이아웃을 넣는 구조를 확인할 수 있습니다. |
| QBoxLayout | PySide6.QtWidgets.QBoxLayout | QHBoxLayout과 QVBoxLayout이 Box Layout 계열의 편의 클래스라는 점을 확인할 수 있습니다. |
| QHBoxLayout | PySide6.QtWidgets.QHBoxLayout | 위젯을 가로 방향으로 배치하는 레이아웃 클래스를 확인할 수 있습니다. |
| QVBoxLayout | PySide6.QtWidgets.QVBoxLayout | 위젯이나 레이아웃을 세로 방향으로 배치하는 구조를 확인할 수 있습니다. |
| Using Layouts in Qt Widgets Designer | Using Layouts in Qt Widgets Designer | Qt Designer에서 레이아웃을 계층 구조로 중첩하는 방법을 확인할 수 있습니다. |
| Using .ui files | Using .ui files from Designer or QtCreator | Qt Designer에서 만든 .ui 파일을 PySide6 프로젝트에서 사용하는 방법을 확인할 수 있습니다. |
| pyside6-uic | Qt for Python - pyside6-uic | .ui 파일을 Python 코드 파일로 변환하는 명령 도구를 확인할 수 있습니다. |
2. Nesting Layouts 공식 문서 연결
공식 문서에서는 레이아웃 안에 다른 레이아웃을 넣을 수 있으며, 내부 레이아웃은 삽입된 레이아웃의 자식 구조가 된다고 설명합니다.
이번 예제에서 top_layout과 bottom_layout을 main_layout 안에 넣는 이유가 바로 이 구조 때문입니다.
QHBoxLayout 생성
↓
버튼들을 가로로 배치
↓
QVBoxLayout 생성
↓
addLayout()으로 QHBoxLayout을 QVBoxLayout 안에 넣음
↓
중첩 레이아웃 구조 완성
3. 이번 예제와 공식 문서 연결
| 이번 예제 코드 | 공식 문서와 연결되는 의미 |
| top_layout = QHBoxLayout() | 위쪽 버튼들을 가로 방향으로 묶는 내부 레이아웃을 생성합니다. |
| bottom_layout = QHBoxLayout() | 아래쪽 버튼들을 가로 방향으로 묶는 내부 레이아웃을 생성합니다. |
| main_layout = QVBoxLayout(self) | 창 전체를 위에서 아래 방향으로 관리하는 최상위 레이아웃을 생성합니다. |
| main_layout.addWidget(title_label) | 최상위 레이아웃에 QLabel 위젯을 추가합니다. |
| main_layout.addLayout(top_layout) | 최상위 레이아웃 안에 위쪽 가로 레이아웃을 추가합니다. |
| main_layout.addLayout(bottom_layout) | 최상위 레이아웃 안에 아래쪽 가로 레이아웃을 추가합니다. |
| pyside6-uic form.ui -o ui_form.py | Designer에서 만든 .ui 화면을 Python 코드 파일로 변환합니다. |
4. 정리 흐름도
공식 문서 기준으로 정리하면 다음과 같습니다.
QWidget
↓
최상위 QVBoxLayout
↓
addWidget(title_label)
↓
addLayout(top_layout)
↓
addLayout(bottom_layout)
↓
세로 구조 안에 가로 구조가 들어간 중첩 레이아웃 완성즉, Nesting Layouts는 PySide6에서 복잡한 화면을 구조적으로 구성하기 위한 기본 설계 방식입니다.