D+32 [Qt for Python] Designer 적용 구조 및 Layout 이해

ㅇ 주 제 : 프로그램 및 문서의 전체 흐름 이해 (Layout)
ㅇ 목 표 : 
     1. GUI 프로그램 화면 전체의 구조를 설계하는 방법을 이해한다.
     2. PySide6 환경에서 Designer 적용구조 및 Layout 을 활용한다.
 
ㅇ 내 용
 
1. 전체 흐름 이해하기
    가. 각종 회의록을 요약해서 저장하는 경우
        (예) Slack ----->  GPT Wrokspace  ------>  Google Drive
                           ↑ 협업툴                          ↑ Github
    나. 환경설정은 각 기업체의 특성과 이익과 연계되는 한 해결이 다소 어렵다. 각각의 프로그램이 연동되는지가 관건
         ---> 프로그램간 연동을 가능케 하는 버젼의 드라이버를 별도로 설치해야 하는 번거로움 
         -- >> 발전방향 :  모든과정의 자동화
 
2. 시대적 흐름의 변화에 적응하는 자세
   가. 스스로 노력하고 교육 내용을 이해 하지 않으면 발전이 없다. 
   나. 인공지능 서버는 편하지만 편한 것만 사용하면서 현실에 안주해서는 안된다. 무언가 발전을 위해 노력을 해야만 한다.
   다. AI가 프롬프트에 의해 코드생성은 해 주지만 본인이 알고 이해할 수 있어야 한다.  직접 작성을 해보고 고민해 봐야 한다.
 
3. PySide6 환경에서 Layout  이해       
3.1. 레이아웃 (배치, 구성, 배열 방식) 
   가.  어디에, 어떤 크기로, 어떤 순서로 배치할 것인가?
   나. GUI 프로그램 : 버튼, 라벨, 입력창 같은 위젯을 화면에 조화롭게 배치한다
   다. Qt 레이아웃 시스템 : 프로그램 부모위젯 안에서 자식 위젯 들의 위치, 크기를 자동관리 해주는 구조
        (직접 좌표로 배치하는 방식이 아니라, 위젯 위치/크기를 "자동"관리)
   라. 레이아웃은 창 크기 변화에 맞춰 화면을 자동 정리 해주는 역할 
        (예) 아이디 입력창, 비밀번호 입력창, 로그인 버튼, 기타 안내문구 등
   마.  창의 바탕화면(=부모 위젯),  바탕에 버튼, 라벨, 입력창, 문구 등(=자식 위젯)
 
 3.2. 레이아웃 종류
      - QVBoxLayout : 세로 배치형
      - QHBoxLayout : 가로 배치형
      - QGridLayotut : 표 형태  (계산기 버튼과 같이 규칙적인 표 구조에 유용)
      - QFormLayout : 라벨 + 입력폼 (회원가입, 로그인, 설정화면 등 입력창 구조 적합)
 
 3.3. 레이아웃 중첩과 공간 제어
     -  중첩  :  복잡한 GUI화면에서 레이아웃 안에 또다른 레이아웃을 포함시키는 중첩 방식 사용 
                    (예) 전체화면 세로방향(QVBoxLayout),  버튼 묶음들은 가로방향(QHBoxLayout )
    - 공간 제어 
       Stretch Facto : 위젯 간 공간비율 조절 ( 1:2:1 공간 배분)
       SpacerIteam : 빈 공간을 늘어나게 함  (버튼 사이 간격 벌이기)
       SizePolicy : 위젯의 가로,세로 확장 정책 (Fixed, Expanding)
※ 프로그램 개발시 복잡한 화면 구성을 할 때에는 레이아웃 종류와 중첩, 공간 제어를 통합해서 사용하는 것이 효과적이다.
 
[예제 1] Layout 이해하기 실습 
>>> 파이참에서 코드를 실행하면 "윈도우젯 레이아웃 살펴보기" 화면이 생성된다      

파이참 에서 "레이아웃 살펴보기" 실행 화면

 
4. 단계별 분석

단 계 별	구 문  활 용  분 석
1단계 필요한 클래스 가져오기	from PySide6.QtWidgets import QApplication, QWidget, QLabel, QPushButton, QVBoxLayout, QHBoxLayout  from PySide6.QtWidgets(파이사이드 환경에서 기본창 만들기)  import QApplication, QWidget, QLabel(텍스트 표시), QPushButton(버튼 만듬), QVBoxLayout(위젯 세로배치), QHBoxLayout(버튼 가로배치)
2단계 위젯 생성	title_label = QLabel("레이아웃 예제") description_label = QLabel("버튼을 가로로 배치하고, 전체 화면은 세로로 구성합니다.") button_ok = QPushButton("확인") button_cancel = QPushButton("취소")  // 화면에 표시할 위젯 생생 후 아직 화면에 배치된 것이 아니므로 레이아웃에 추가해서 실제 화면 구조가 만들어짐
3단계 버튼 영영 가로 레이아웃 만들기	button_layout = QHBoxLayout()   // 레이아웃 가로 배치 button_layout.addWidget(button_ok) button_layout.addWidget(button_cancel) ok 확인버튼과 cancel 취소버튼의 레이아웃을 가로로 배치한다.
4단계 전체 화면 세로 레이아웃 만들기	main_layout = QVBoxLayout()    // 레이아웃 세로 배치 main_layout.addWidget(title_label) main_layout.addWidget(description_label) main_layout.addLayout(button_layout) 전체 화면을 세로 방향으로 구성한다. 그리고 , title제목, description 설명, button버튼을 레이아웃에 추가한다.
5단계 부모 위젯에 레이아웃 적용	window.setLayout(main_layout)   셋레이아웃(부모위젯에 레이아웃 적용)을 호출하면 메인 레이아웃이 윈도우 레이아웃으로 적용된다.

 
5. QT Creator 환경에서 Layout 구현하기
5.1. Widget Design 
       새프로젝트 만들기 --> 파일명 작성 --> Widget class명을 선택 --> 인터프리터를 PySide6을 선택 --> Kits 선택
       -->  파일 목록 확인 후 마침 -->  Design Layout 
① 새프로젝트 만들기 : Qt for Python - Window UI 선택 (윈도우 화면에 구현할 버튼을 포함한 Layout 준비를 한다)

 
 
② 사용할 파일명을 작성 입력 한다.

 
③ Widget class명을 선택한다.

 
④ 인터프리터를 PySide6을 선택한다. 

 
⑤ Kits 선택하기 : 파이썬 버전을 선택한다. 나중에 파일분리 할 때  install 창이 뜨면 클릭하여 설치를  적용할 수 있다.  

 
⑥ 하단 목록에서 추가할 파일 목록 확인 후 추가 없으면 None 선택 후 마침 (Finish)  

 
⑦ Widget.py 파일이 생성됨 : 이때 파이사이드 6에서 설치 버전이 필요하면 install 클릭

 
⑧ 좌측에 Design 버튼 클릭하여 화면으로 이동해서 Layout 구성하자 (이때 .ui 파일이 선택되어 있어야만 디자인 버튼이 활성화)

 
⑨  Design Layout 화면 : 만들고 싶은 디자인을 좌측 버튼에서 마우스로 끌어와서 중앙 Layout 화면에 배치하여 구성한다. 

디자인 선택 화면 (form.ui@PySide Widgets)

 
⑩  Layout에 디자인이 되었다면 좌측상단에 Edit를 클릭해서 Widget 화면으로 돌아간다.    

 
 
5.2.  Widget.py 에서 main.py 파일을 분리하여 만들기 
 
① 메인파일 만들기 :  Qt 메뉴창에서 File -- New file (ctrl + n) 선택한다. 

 
② main.py 파일일 생성 후 분리하기 : 메인 파일 선택 후 화면과 같이 Split Side by Side 선택한다. 그러면 파일이 분리된다.

 
 
③ Widget.py와 main.py 분리하기 : 위젯 파일에서 메인파이의 코드만 잘라내어 붙인 후 좌하단의 모니터를 실행시켜 본다.

 
④ 실행시켰을 때 "애러" 메시지가 발생한다면 main.py에서 문법에 맞게 코드를 수정해 주어야 한다.

 
⑤ Widget.py 와 main.py가 분리되었으니 모두 저장(Save All) 한다.

 
⑥ main.py를 선택하고 좌하단의 ▷ 실행버튼을 클릭하면 아래 화면과 같이 윈도우 Widget가 실행되었다.
    이것은 윈도우 웹브라우저에서 화면의 Layout를 표현해 준다. 이때 from 파일경로 꼭 확인 import *

 
5.2.1. 실습 간 오류 수정

• 클래스 정의 추가 : Ui_Widget은 디자인 틀일 뿐이며, 이를 화면에 띄우려면 QWidget을 상속받은 실제 클래스가 필요하다.
• setupUi(self) 호출: 이 메서드를 실행해야만 Qt Designer에서 배치한 버튼, 텍스트 상자 등의 컴포넌트가 화면에 실제로 생성
• 인스턴스 접근 : 추후 버튼 클릭 이벤트 등을 연결할 때는 self.ui.버튼이름 형태로 접근하게 된다.

# This Python file uses the following encoding: utf-8
import sys

from PySide6.QtWidgets import QApplication, QWidget

# Important:
# You need to run the following command to generate the ui_form.py file
#     pyside6-uic form.ui -o ui_form.py, or
#     pyside2-uic form.ui -o ui_form.py
from ui_form import Ui_Widget

class Widget(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.ui = Ui_Widget()
        self.ui.setupUi(self)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    widget = Widget()
    widget.show()
    sys.exit(app.exec())

 
 
ㅇ 교육 후기
    - 파이썬과 C++ 언어의 수많은 코드들을 작성하고 다 외울수는 없으나, 이제 이해하고 해석은 할 수 있겠다.  class의 사용이 다양한  환경과 프로그램에서 사용되듯이 대다수 많은 반복되는 프로그램 환경들이 그렇겠다는 생각이 든다.
    -  처음에는 낯선 용어들이 점차 익숙해지고, 복잡한 UI 환경이 조금씩 이해되면서 우리가 흔히 사용하고 있는 인터넷 웹브라우저 환경, 응용프로그램 들이 모두 유사한 코드로 구현되고 있겠구나 생각이 든다.  
    - 웹브라우저 화면을 이해하고 구현하는데 파이참, Qt 환경에서 class,  모듈, 라이브러리, Signal, Slot, Layout를 복합적으로 활용할 수 있다면 교육의 성과는 있었다. 
    - 비전공자로서 각종 함수 문법을 잘 작성하지는 못해도 찾아보고 이해하는 데는 많은 도움이 되었다. 앞으로 어떤 환경에서 프로그램 개발을 위한 일원이 될지 알 수 없지만 "도전은 계속된다."