1. GUI 개발 방식

더보기

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

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

 

 

 

 

1.2. 소스 코드 기반

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

 

 

 

 

1.3. 목표

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


실무 

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

2. UI 디자이너(WYSIWYG) 란?

3. UI Designer ▶ .ui 파일 ▶ .py 파일 ▶ UI 적용 

더보기
: PySide6의 UI designer사용하기

 

윈도우에서 designer 찾아 실행하기
우분투에서 designer 찾아 실행하기

 

Widget 템플릿을 찾아 생성합니다.

 

창(화면)이 Widget 템플릿으로 생성됩니다.

 

왼쪽 위젯 상자에서, Push Button 하나를 마우스로 끌어서 Widget 창 위에 놓습니다.

 

이전 예제 디렉토리에 window.ui 파일명으로 저장합니다.

 

파이참에서 window.ui 파일을 확인하면, xml 기반의 코드를 확인 할 수 있습니다.

4. UI Designer ▶ .ui 파일 ▶ .py 파일 ▶ UI 적용 

더보기
: .ui 파일을 파이썬 소스코드로 변환하기

 

4.1 .ui 파일을 .py 파일로 변환하기

윈도우에서 .ui 파일을 .py 파일로 변환하는 pyside6-uic 프로그램 경로

 

우분투에서 .ui 파일을 .py 파일로 변환하는 pyside6-uic 프로그램 경로

 

.ui 파일을 .py 파일로 변환하기
pyside6-uic window.ui -o mainwindow.py

 

부분 의미
pyside6-uic Qt Designer의 .ui 파일을 Python 코드로 변환하는 도구
window.ui 변환할 .ui 파일
-o mainwindow.py 변환 결과를 mainwindow.py 파일로 저장

 

 

 

 

4.2 .ui 파일과 변환된 .py 파일 비교하기

두 파일을 비교해보면, 값이 동일한 것을 확인 할 수 있습니다.

 

 

 

 

4.3 변환된 .py 파일 실행하고 이해하기

실행 후, 이전 포스트(1.2 ~ 1.3 GUI 실행 이해) 코드와 비교해 이해된것이 맞는지 확인해봅니다.

5. UI Designer ▶ .ui 파일 ▶ .py 파일 ▶ UI 적용 

더보기

 

5.1 예제 준비하기

이전 포스트(1.1 파이참에서 PySide6 실행) 에서 제일 처음 실행했던 예제를 가져와서 진행합니다.

import sys
from PySide6.QtWidgets import QApplication, QWidget
 
app = QApplication(sys.argv)
widget = QWidget()
widget.show()
sys.exit(app.exec())

 

 

 

 

5.2 변환한 .ui 모듈을 firstwindow.py 예제의 widget 에 적용시키기

디자이너에서 작업한 window.ui 파일을 mainwindow.py 로 변환했습니다.

이 작업은 mainwindow.py 라는 모듈을 만드는 작업입니다.

from mainwindow import Ui_Form

 

 

 

 

5.3 변환한 .ui 모듈을 firstwindow.py 예제의 widget 에 적용시키기

ui = Ui_Form()     # UI 생성
ui.setupUi(widget) # UI 적용

 

 

 

 

5.4 UI 디자이너에서 작업한 widget 실행해보기

 

티스토리툴바