파이썬 gui #2 - Qt 디자이너 기초 사용 (pyqt5) 1편 layout 잡아보기

안녕하세요 자유로여정입니다.

오늘은 지난 시간에 이어서 파이썬 gui 두번째 시간입니다.

Qt 디자이너라는 툴을 본격적으로 사용하여 간단한 gui 프로그램을 만들어보고자 합니다.

오늘 우리가 만들 것은 단순히 레이아웃을 꾸미는 것을 해보겠습니다.

어려워 보여도 기초부터 차근차근 해나가다 보면 금방 따라오실 수 있으실 것입니다.

 

---

Qt 디자이너를 기본 layout 실습해보기

위 프로그램의 기본적인 구조를 잡아보는 시간을 가져봅시다.

일단 지난 포스팅에서처럼 gui 프로그래밍을 위한 기본적인 환경셋팅이 끝났고 본격적으로 화면을 봐봅시다.

처음 Qt디자이너 기초편을 진행하는데 먼저 Qt디자이너를 실행시키면 다음처럼 화면이 나타날 것입니다.

기본 화면 구성에 대한 내용

처음 시작되는 환경에서 먼저 위 그림처럼 Create를 눌러서 실행해줍니다.

그러면 아무것도 없는 창이 하나 발생할 것인데 그 창 위로 우리가 위젯들을 드래그&드롭을 통하여 구성할 수 있습니다.

오늘 배워볼 부분은 크게 2가지로 좌측에 있는 1) 위젯 박스 , 오른쪽에 있는 2) Property Editor 입니다.

 

 

위젯박스 : 직관적으로 알 수 있듯이 다양한 위젯들을 포함하고 있습니다. 

input 위젯은 당연히 사용자의 입력이 필요한 부분에 대한 영역이고 , display는 프로그램의 출력이나 상태창과 같은 프로그램을 동작시킴으로서 발생되는 화면의 변화에 대한 영역을 담고 있습니다.

 

Property Editor : 각 위젯들과 화면구성 요소들에 대한 속성 값입니다.

이를테면 색상의 변경, 이름의 변경, 위치값 설정 등 요소들에 대한 모든 속성값을 구성/변경하는 영역입니다.

 

 

자 이제부터 하나하나 해보도록하겠습니다. 오늘 만들 gui 화면은 아래와 같습니다.

다음 시간에 기능까지 넣어줄 것인데 오늘은 일단 텍스트 입력하고 버튼을 통해 아래에 출력되는 프로그램의 전체적인 레이아웃을 구성해보도록 해봅시다. 모든 프로그램이 마찬가지지만 사용자의 입력공간과 출력공간이 나뉘게 됩니다.

위에서 기본적으로 보여지는 display 영역과 입력 영역을 구분한다면 다음과 같습니다.

크게 3가지의 위젯을 사용하여 레이아웃을 구성했습니다. 좌측단에 보시면 아래처럼 위젯들이 있고 마우스 좌클릭을 한채로 보이는 칸으로 가져다가 놓으시면 안착되게 됩니다.

 

위젯 박스,  휠로 조정하여 위아래 위젯을 확인해보세요

 

버튼 위젯 (Push Button) , input 위젯 (textEdit) , display (Label) 위젯을 사용하였습니다.

지금 창을 켜놓고 좌측에 있는 위젯 툴을 이용하여 하나하나 위치에 끌어다가 놓아보세요.

기본적으로 드래그드롭으로 원하시는 위치에 안착했다면 더블클릭으로 내부 텍스트를 변경할 수 있을 것입니다.

 

드래그 드롭으로 위젯을 가져다가 놓았다면 font를 변경해봅시다. 속성값을 변경하는 부분은 바로 Property Editor에 다 있습니다. 폰트를 바꾸기 위해서 우측 아랫부분에 font를 눌러 글씨체와 크기까지 변경할 수 있습니다.

Qt디자이너 font 변경 생각보다 간단하죠 ? 위젯들에 속성의 영역을 변경함으로서 클릭 몇 번이면 간단하게 진행 할 수 있습니다.

 

 

잘 따라 오셨는지 모르겠습니다. 오늘은 이렇게 Qt디자이너 기본편으로 layout 환경을 한번 구성해봤습니다.

가장 기본적인 활용내용이지만 모든 프로그램에 적용되는 부분으로 확실히 기억하셔야할 부분은 Qt디자이너에서 layout 을 잡을 때 위젯박스와 Property Editor를 이용한다라는 부분입니다. 다 제작을 했으면 Ctrl + r을 눌러서 만드신 레이아웃을 실행시켜 화면에 생성해봅시다.