Qt) Designer로 UI 구성하기(1) - mainwidget (Windows 환경)

mommers·2026년 4월 1일

QT

목록 보기

5/15

Qt Designer를 사용하여 mainwidget UI를 단계적으로 구성하는 과정을 정리하였습니다. 위젯 배치부터 Signal/Slot 연결까지 순서대로 진행하겠습니다.

1. 프로젝트 구조

이번 글에서 구성하는 UI의 최종 구조는 다음과 같습니다.

MainWidget (QWidget)
└── Tab Widget
    ├── Tab 1 (pTab1) → Tab1DeviceControl 객체 배치 예정
    └── Tab 2 (pTab2)

Tab1DeviceControl 구현은 다음 글에서 진행합니다.
이번 글에서는 mainwidget의 기본 UI 구성과 Signal/Slot 연결에 집중합니다.

verticalLayout 안에 가로 줄 4개(각각의 horizontalLayout)를 넣어주는 것이 큰 틀입니다.

============================================
| 1 | PB(Start) | C(timervalue) | PB(Quit) |
| 2 |       DialLED    |     LCDNumber     |
| 3 |              progressBar             |
| 4 |       4*2 CB     |     LCDNumber     |
============================================

PB : QPushButton
C : QComboBox
CB : QCheckBox

2. 위젯 배치

2-1. 1번째 줄 - 상단 버튼 영역

horizontalLayout을 만들고 아래 위젯 3개를 배치합니다.

위젯	objectName	역할
QPushButton	pPBtimerStart	타이머 시작/정지
QComboBox	pCtimerValue	타이머 간격 선택
QPushButton	pPBquit	앱 종료

objectName 앞에 p가 붙는 이유는 코드에서 포인터로 사용하기 때문입니다.

horizontalLayout의 layoutStretch를 0,0,0 → 2,2,1로 수정합니다.

2-2. 2번째 줄 - Dial + LCDNumber 영역

horizontalLayout_2를 만들고 아래 위젯 2개를 배치합니다.

위젯	objectName	역할
QDial	pDialLed	다이얼 입력
QLCDNumber	pLcdNumberLed	다이얼 값 표시

2-3. 3번째 줄 - ProgressBar 영역

QProgressBar 하나를 배치합니다.
나중에 크기 조정을 쉽게 하기 위해 verticalLayout 안에 넣어줍니다.

위젯	objectName	역할
QProgressBar	pProgressBar	다이얼 값 표시

2-4. 전체 레이아웃 합치기

verticalLayout_2를 만들고 위에서 만든 레이아웃들을 순서대로 배치합니다.

verticalLayout_2
├── horizontalLayout   (1번째 줄)
├── horizontalLayout_2 (2번째 줄)
└── verticalLayout     (3번째 줄 - progressBar)

verticalLayout_2의 layoutStretch를 0,0,0 → 1,8,1로 설정합니다.

이후 MainWidget 우클릭 → Layout → Lay Out Vertically 를 선택하면 화면 비율이 전체 크기에 맞게 설정됩니다.

3. Signal/Slot 연결 (Qt Designer)

Qt Designer의 Signals and Slots Editor 탭에서 코드 없이 위젯 간 Signal/Slot을 연결할 수 있습니다.

Dial → LCDNumber

Sender	Signal	Receiver	Slot
pDialLed	valueChanged(int)	pLcdNumberLed	display(int)

Dial → ProgressBar

Sender	Signal	Receiver	Slot
pDialLed	valueChanged(int)	pProgressBar	setValue(int)

설정을 완료하면 이렇게 구성됩니다.

MainWidget에 작성된 파일들을 Tab1DeviceControl로 옮기기 위해, Qt Widgets Designer From Class 로 선택하여 아래 사진과 같이 New File을 생성합니다.

아래 사진은 오타입니다. Tab1DeviceControl로 class name을 작성하시면 됩니다.

Widget Box에서 Tab Widget을 캔버스에 드래그합니다.
Tab 페이지의 objectName을 각각 pTab1, pTab2로 설정합니다.

Tab1에는 다음 글에서 Tab1DeviceControl 객체를 배치할 예정입니다.

5. mainwidget 코드

mainwidget.h

#ifndef MAINWIDGET_H
#define MAINWIDGET_H

#include <QWidget>
#include "tab1devicecontrol.h"

QT_BEGIN_NAMESPACE
namespace Ui {
class MainWidget;
}
QT_END_NAMESPACE

class MainWidget : public QWidget
{
    Q_OBJECT

public:
    explicit MainWidget(QWidget *parent = nullptr);
    ~MainWidget() override;

private:
    Ui::MainWidget *ui;
    Tab1DeviceControl *pTab1DeviceControl;
};
#endif // MAINWIDGET_H

mainwidget.cpp

#include "mainwidget.h"
#include "ui_mainwidget.h"
#include <QVBoxLayout>

MainWidget::MainWidget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::MainWidget)
{
    ui->setupUi(this);
    pTab1DeviceControl = new Tab1DeviceControl(ui->pTab1);
    QVBoxLayout *layout = new QVBoxLayout(ui->pTab1);
    layout->addWidget(pTab1DeviceControl);
    ui->pTab1->setLayout(layout);
}

MainWidget::~MainWidget()
{
    delete ui;
}