2016년 11월 13일 일요일 코코넛냠냠


목차

1. 디자이너(Qt Designer) 개요; 사용 용도

2. 디자이너(Qt Designer) 구하기

3. PyQt 설치하기

4. 빌드하기1: .ui 파일 저장하고 불러오기

5. 빌드하기2: uic 사용

6. 빌드하기3: rcc 사용

7. UI 편집하기: 개요

8. UI 편집하기: 위젯 편집 (기본 위젯)

9. UI 편집하기: 위젯 편집 (메뉴/툴바)

10. UI 편집하기: 시그널/슬롯 편집

11. 작성한 UI를 프로그램에 적용하는 과정

12. 그 외 이런저런 팁


1. 디자이너(Qt Designer) 개요; 사용 용도


- 디자이너(Qt Designer)는 Qt 프레임워크가 지원하는 유저 인터페이스 (UI) 개발 환경입니다.

- 작성하려는 Qt 어플리케이션의 UI를 시각적으로 확인하면서 개발할 수 있게 합니다.

- 아주 간단한 프로그램을 만들 때는 디자이너(Qt Designer)를 이용하지 않고 직접 UI를 설정하는 코드를 작성하는 편이 더 나을 수도 있지만, 프로그램의 규모가 어느 정도 커지면 돌이킬 수 없게 됩니다. 디자이너(Qt Designer)를 이용하면 위젯 좌표나 레이아웃을 조정하는 따위의 시간을 허비하는 단순 작업을 크게 줄입니다.




2. 디자이너(Qt Designer) 구하기


- 디자이너(Qt Designer)는 Qt 프레임워크(PyQt4)의 일부입니다. Qt 프레임워크를 설치하면 기본 제공됩니다.

- 위치(앱의 디렉토리 경로)는 다음과 같습니다: %파이썬이 설치된 경로%\Lib\site-packages\PyQt4

- 참고: 필요한 라이브러리 관리를 편하게 하기 위해서 아나콘다(Anaconda)를 사용하는 파이썬 환경의 경우, 아나콘다의 패키지 매니저인 conda로 pyqtgraph 라이브러리를 설치하면 디자이너(Qt Designer)의 실행 파일(designer.exe)이 없어지는 현상이 있습니다. 이럴 때는 별도로 designer.exe 실행 파일만 구해서 사용해도 좋습니다.



3. PyQt 설치하기


- PyQt는 Python 용의 Qt 프레임워크를 말합니다. PyQt3, PyQt4, PyQt5 등 버전별로 패키지가 나뉘어 있습니다. 최신 버전은 PyQt5지만 2016년 현재 기준 PyQt4에 의존하고 있는 pyqtgraph 라이브러리와의 호환성을 고려해서 PyQt4를 사용합니다.

- 아나콘다를 사용하는 경우: Anaconda Prompt를 실행하고 conda install pyqtgraph 를 입력해서 pyqtgraph 라이브러리를 설치합니다. 설치 과정에서 필요한 PyQt 라이브러리를 업데이트할 것입니다.



- 아나콘다를 사용하지 않고 일반 설치: 아래 웹사이트에서 설치 파일을 다운로드 하고 파이썬 인터프리터가 설치된 경로에 그대로 설치합니다.

- https://sourceforge.net/projects/pyqt/files/PyQt4/PyQt-4.11.4/



4. 빌드하기1: .ui 파일 저장하고 불러오기


1) Qt Designer(designer.exe)를 실행합니다.


2) 디자인할 윈도우 폼 (형태)를 선택하고, 윈도우 모양(UI)을 원하는 대로 편집합니다.


3) “다른 이름으로 저장” 하거나 Ctrl + S를 눌러 현재 작업중인 내용을 저장합니다. 저장되는 UI 파일의 확장자로서 파일명 끝에 .ui가 붙습니다.


4) 저장한 파일을 디자이너(Qt Designer) 로 실행하면 이전에 작업하던 중간부터 이어서 편집할 수 있습니다.


5) 메모장 등의 텍스트 편집기로 저장된 UI 파일을 열어서 XML 형식으로 편집할 수 있습니다.


5. 빌드하기2: uic 사용


- uic는 ui 파일의 컴파일러입니다.

- 디자이너(Qt Designer)로 작업한 내용은 XML 형식으로 .ui 파일에 저장됩니다. 만들어진 UI 파일을 실행 가능한 파이썬 코드로 변환해 주는 과정이 필요한데 이를 컴파일이라고 부릅니다. UI 파일을 파이썬 코드로 컴파일하기 위해서 uic(ui 컴파일러)를 사용해야 합니다.


- uic는 다음 경로에 위치해 있습니다.

- %파이썬이 설치된 경로%\Lib\site-packages\PyQt4\uic\pyuic.py



- 파이썬 인터프리터로 pyuic.py를 수행하고 인자로 컴파일할 ui 파일의 경로와 컴파일의 결과로 생성되는 파일의 이름을 지정하는 것만으로 컴파일이 완료합니다.




6. 빌드하기3: rcc 사용


- rcc는 리소스 컴파일러입니다. 사용법은 uic와 비슷합니다.

- 디자이너(Qt Designer)로 작업할 수 있는 것은 ui와 리소스의 두 가지가 있습니다. UI 파일에 .ui 확장자가 붙듯이 리소스는 .qrc 형식 파일로 저장됩니다.

- .qrc 파일에 정의된 데이터를 파이썬 코드로 변환하기 위해서 rcc가 필요합니다.


- rcc는 다음 경로에 위치해 있습니다.

- %파이썬이 설치된 경로%\Lib\site-packages\PyQt4\pyrcc4.exe



- 명령 프롬프트에 다음 명령어를 입력해서 컴파일합니다.

- pyrcc4 -py3 %입력파일명% -o %출력파일명%




7. UI 편집하기: 개요



- 디자이너(Qt Designer)는 메뉴바 / 툴바 / 독 / 윈도우 편집 부분으로 나뉩니다.


1) 메뉴바

- 메뉴 항목을 선택해서 파일 열기, 저장, 설정 등을 할 수 있습니다.

- 하위 항목을 나열하는 메뉴바 아이템을 ‘메뉴’라고 합니다. 메뉴 하위에는 다른 메뉴나 동작(action)이 포함됩니다.


2) 툴바

- 툴바는 메뉴바에서 자주 사용되는 몇 가지 액션(동작)들을 아이콘으로 묶어 놓은 것입니다. 우클릭해서 표시/숨김 여부를 설정할 수 있습니다.


3) 독

- 디자이너(Qt Designer) 프로그램에서 위젯상자, 객체 탐색기, 속성 편집기 등은 모두 독입니다.

- 독은 메인윈도우 하위의 윈도우를 말합니다. 사용자가 임의로 켜고 끄거나 창의 한 모서리에 배치할 수 있습니다.


8. UI 편집하기: 위젯 편집 (기본 위젯)


- 위젯이란 객체로서 그래픽으로 그려지는 하나의 UI 요소를 뜻합니다. 윈도우와 윈도우 하위에 포함된 모든 그래픽 UI 요소가 위젯입니다.


- 위젯에 대한 정보가 필요할 때마다 Qt 레퍼런스 페이지에서 쓰고 싶은 위젯의 사용법을 확인해야 합니다. 버튼, 레이아웃, 스페이서 등 각각의 위젯들의 용도나 속성에 대해서 자세한 정보를 Qt 공식 문서에서 찾을 수 있습니다.


1) 위젯 상자

- 위젯 상자를 이용하면 윈도우에 위젯을 배치할 수 있습니다.

- 위젯을 배치하려면 위젯 상자의 위젯 목록에서 배치하고자 하는 위젯을 클릭하고 드래그해서 원하는 위치에 올려 놓습니다.


2) 객체 탐색기

- 현재 편집중인 윈도우와 윈도우에 포함된 모든 위젯을 이름과 계층구조로 나타냅니다.

- 위젯 사이의 관계를 확인하고 위젯을 이름 짓는 데에 사용합니다.

- 객체: 각 위젯의 이름(변수명)입니다. 더블 클릭해서 수정할 수 있습니다. 컴파일된 클래스에서 해당 이름으로 객체에 접근할 수 있습니다.

- 클래스: 해당 위젯의 클래스입니다.


3) 속성 편집기

- 선택한 위젯의 모든 속성을 확인하고 수정할 수 있도록 나열합니다.

- 알아보기 쉽게 부모 클래스와 자식 클래스의 속성이 구분되어 표시됩니다.

- StyleSheet 속성에서는 CSS 문법을 이용해서 위젯의 시각적인 형태를 정의할 수 있습니다. (참고: http://doc.qt.io/qt-4.8/stylesheet-examples.html)


4) 위젯 승격 (상속)

- 기본 위젯 클래스를 임의로 확장한 클래스를 디자이너(Qt Designer)에서 사용하고 싶을 때 클래스 승격을 추가하고 위젯을 승격시켜 윈도우에 배치할 수 있습니다.

- 위젯 승격은 다음과 같은 과정으로 진행합니다. 예시에서는 QDockWidget 클래스 객체인 독(위젯)을 윈도우에 배치하고 pyqtgraph.dockarea.Dock 클래스로 승격(확장)시킬 것입니다.


① 승격시키고 싶은 위젯을 객체 탐색기에서 선택하고 우클릭하여 “다음으로 승격…”을 실행합니다.


② ‘기반 클래스 이름’은 승격 클래스의 직속 부모 클래스를 의미합니다. ‘승격된 클래스 이름’에 승격시킬 클래스의 이름(Dock)을 정의합니다. ‘헤더 파일’ 란에는 클래스(Dock)가 속한 패키지 이름을 적습니다. 그 다음 추가 버튼을 누릅니다.


③ 이렇게 하면 승격 클래스가 디자이너(Qt Designer)의 UI 파일에 추가된 것입니다. 이제 승격 버튼을 눌러서 객체 탐색기에서 선택했던 위젯을 새롭게 추가된 승격 클래스로 승격시킵니다.


④ 승격이 완료되어 해당 위젯의 클래스가 QDockWidget에서 Dock으로 변한 것을 확인할 수 있습니다.


9. UI 편집하기: 위젯 편집 (메뉴/툴바)


1) 메뉴 편집하기


- 위젯 편집 모드에서 메뉴 항목을 더블 클릭해서 편집할 수 있습니다. 문자 앞에 ‘&’ 사인을 붙이면 해당 알파벳이 단축키 문자로 지정됩니다.




- 추가된 동작(액션)들은 동작 편집기에서 확인합니다. 동작 편집기에서 동작을 더블클릭하면 해당 동작의 속성을 수정할 수 있습니다. 동작별로 아이콘(이미지)이나 단축키를 지정할 수 있습니다.




2) 툴바 편집하기


- 편집하고 있는 윈도우를 우클릭하고 ‘도구 모음 추가’를 선택하면 메인 윈도우에 툴바(도구 모음)를 더할 수 있습니다.


- 툴바 항목을 추가하기 위해서는 툴바에 더하고 싶은 동작을 동작 편집기에서 클릭하고 끌어서 툴바에 올려 놓습니다.


10. UI 편집하기: 시그널/슬롯 편집


1) 시그널/슬롯 개념

- Qt의 이벤트 처리는 시그널과 슬롯을 이용합니다. 시그널은 발생한 이벤트, 슬롯은 이벤트 핸들러에 대응하는 개념입니다. 마우스 클릭 등 사용자가 위젯을 조작할 때 위젯은 해당 조작에 대해서 시그널을 발생시킬 수 있습니다. 시그널에 연결된 슬롯에는 그런 이벤트가 발생했을 때의 처리가 정의되어 있습니다.

- 시그널/슬롯은 하나의 쌍으로 표현됩니다.


2) 편집모드

- 디자이너(Qt Designer)에는 4가지 편집 모드가 있습니다. 편집 모드는 [ 메뉴 – 편집(E) ]이나 3번째 툴바에서 확인 및 변경할 수 있습니다. 보통은 위젯 편집과 시그널/슬롯 편집의 두 가지만을 사용합니다.

① 위젯 편집 (단축키 F3): 기본 편집 모드입니다. 위젯, 동작을 배치하고 속성을 수정할 수 있습니다.

② 시그널/슬롯 편집 (단축키 F4): 위젯과 동작들의 시그널/슬롯 연결을 편집할 수 있습니다.

③ 친구 편집: 불명

④ 탭 순서 편집: 탭키를 눌렀을 때 선택되는 위젯의 순서를 정합니다.


3) 시그널 슬롯 추가하기

- 디자이너(Qt Designer)에서도 시그널과 슬롯을 이용한 이벤트 처리를 정의할 수 있습니다. 입력 받아서 값을 수정하거나 열고 닫는 등 간단한 것들을 처리하는 경우에 주로 사용합니다. 편리합니다. 사용자 지정 함수도 지원하지만 어느 수준 이상의 복잡한 이벤트 처리는 디자이너(Qt Designer)보다 직접 코드로 구현하는 편이 좋을 것입니다.


① 시그널 슬롯을 편집하기 위해서는 우선 시그널/슬롯 편집 모드로 설정된 상태에 있어야 합니다. F4를 눌러 모드를 전환합니다.


② 시그널/슬롯 편집 모드에서 위젯을 클릭하고 드래그해서 나타나는 화살표를 시그널을 받을 위젯 쪽으로 잇고 마우스 버튼 눌림을 떼면 연결 설정 창이 나타납니다. 여기에서 송신 측의 시그널과 시그널을 받는 쪽의 슬롯(수신자 위젯의 멤버함수)을 정하고 확인을 누릅니다.


③ 이렇게 해서 시그널/슬롯 한 쌍이 추가되었습니다. 시그널/슬롯 편집기에서 해당 항목을 확인할 수 있습니다.


④ 시그널/슬롯 편집기에서 시그널/슬롯을 수정하거나 삭제할 수 있습니다.


11. 작성한 UI를 프로그램에 적용하는 과정


① .ui 파일을 저장합니다. 여기에서 편집하고 저장한 것은 MainWindow 형의 UI를 정의하고 있습니다.


② uic로 컴파일합니다. (예시에서) 컴파일의 결과 생성된 파이썬 코드가 Ui_MainWindow 클래스를 정의하고 있는 것을 확인할 수 있습니다. 이 클래스가 만들고자 하는 프로그램 창의 UI를 정의하는 클래스입니다.


③ rcc로 리소스를 컴파일합니다. (리소스가 있다면)


④ 컴파일의 결과로 생성된 파이썬 모듈들을 프로젝트 패키지에 추가합니다.


⑤ 작성중인 프로그램의 윈도우 창을 정의하는 부분에서 Ui_MainWindow 클래스를 정의하는 파이썬 모듈을 임포트합니다. (생성된 파이썬 코드를 별도의 모듈로 추가하지 않았다면 이렇게 하지 않아도 됩니다.)

import QtDesigner.UI_Main


Ui_MainWindow 클래스를 상속 받는 QMainWindow 클래스를 새롭게 만들고, 초기자 안에서 Ui_MainWindow.setupUi(self) 함수를 호출하면 윈도우가 완성됩니다.

class MainWindow(pyqtgraph.QtGui.QMainWindow, QtDesigner.UI_Main.Ui_MainWindow):

    def __init__(self):
        super(MainWindow, self).__init__()
        self.setupUi(self)

(참고) 앞서 디자이너(Qt Designer)에서 디자인했던 UI가 QMainWindow 형태의 윈도우였기 때문에 QWidget이나 QDialog가 아닌 QMainWindow 클래스를 상속합니다. 디자이너(Qt Designer)에서 ‘새로 만들기’를 통해서 메인 윈도우 이외의 다른 형태의 윈도우를 선택해 디자인할 수 있습니다. 하나의 UI 파일은 하나의 윈도우가 됩니다.


12. 그 외 이런저런 팁


- 디자이너(Qt Designer)에서 Ctrl + R 입력으로 작성중인 윈도우를 미리보기 실행해 볼 수 있습니다.


- Qt와는 별도의 라이브러리가 제공하는 어떤 위젯들은 승격을 지원하지 않습니다. 이를 디자이너(Qt Designer)로 구현하고 싶을 때는 코드를 직접 수정하거나 자동으로 변환하는 프로그램을 만들어 쓸 수 있습니다.


Top