스페이스 인터내셔널(주) 블로그

지난번의 내용(Qt - 텍스트 편집기 제작 #2) 에서 이어집니다.

이제 각 액션의 동작을 구현하기 위한 핵심이 되는 Signal&Slot만 설명하고 넘어가도록 하겠습니다.

Signal&Slot

QObject 를 상속받은 클래스들은 Signal과 Slot이라는 기능을 사용할 수 있습니다. 하나의 Signal에 여러 Slot을 연결하고 Signal발생시 연결된 함수가 일괄적으로 실행되는 구조를 가지고 있습니다. 옵저버패턴과 유사합니다.

예를 들어 UI를 디자인 할때 만들어졌던 QAction의 경우, 메뉴를 누르거나 툴바의 버튼을 누르면 triggered()라는 시그널이 발생됩니다. 이때, 이 시그널에 슬롯을 만들어 연결해 두면 버튼이 눌렸을때의 동작을 정의 할 수 있습니다.

다음과 같이 함수의 접근권한 뒷쪽에 slots라고 적어주면 그 범위에 해당하는 함수는 slot으로 작동 하게 됩니다.

public slots:
    void slot1();
    void slot2();

이렇게 만들어진 슬롯을 QAction::triggered()에 연결해 두면 Signal발생 시점에 연결된 모든 함수가 실행됩니다.

예)

connect(saveAction, SIGNAL(triggered()), this, SLOT(slot1()));

텍스트에디터의 중앙에 위치한 QTextEdit는 기능을 지니고 있습니다. 미리 만들어둔 액션들 다음의 5개는 액션의 signal에 QTextEdit의 슬롯을 연결 하기만 하면 구현이 됩니다.

• Copy (복사)
• cut (잘라내기)
• paste (붙여넣기)
• undo (실행취소)
• redo (되돌리기)

이 액션들을 연결하는 코드는 다음과 같습니다.

connect(ui->actionCopy, SIGNAL(triggered()), ui->textEdit, SLOT(copy()));
connect(ui->actionCut, SIGNAL(triggered()), ui->textEdit, SLOT(cut()));
connect(ui->actionPaste, SIGNAL(triggered()), ui->textEdit, SLOT(paste()));
connect(ui->actionUndo, SIGNAL(triggered()), ui->textEdit, SLOT(undo()));
connect(ui->actionRedo, SIGNAL(triggered()), ui->textEdit, SLOT(redo()));

Source

전체 소스 코드입니다.

지난번의 내용(Qt - 텍스트 편집기 제작 #1) 에서 이어집니다. 이번에 만들어 볼 내용은 다음과 같습니다.

• 메뉴 추가
• 리소스 생성 및 아이콘 불러오기
• 툴바에 버튼 추가

메뉴와 툴바

UI편집화면에서 메뉴부분을 더블클릭하면 바로 메뉴아이템을 입력해 나갈 수 있습니다. 이때, 메뉴의 이름 중, 단축키로 이용할 글자 앞에 &를 붙입니다. (예: &File)
만들어진 메뉴는 자동으로 QAction이 생성됩니다. 그리고 이 메뉴를 Ctrl+드래그하면 툴바에 집어 넣을 수 있습니다. 그냥 드래그하면 메뉴에서 툴바로 이동되므로 꼭 Ctrl을 사용해서 복사하세요.
툴바에 버튼이 생기면 위와같이 메뉴의 이름 그대로 글자가 쓰여진 버튼이 됩니다. 이것은 액션에 그림을 지정하지 않아서 입니다. 프로그램에 사용할 아이콘을 준비해야겠군요. 저는 BC Tango KDE를 사용했습니다. 어떤 아이콘이든 좋습니다. Qt는 대부분의 파일 포맷을 지원하니까요. 아이콘을 받거나 제작해서 적당한 위치에 넣어둡시다. 이제 아이콘을 사용하기위해 리소스를 만들어볼까요.

리소스 파일 생성

File메뉴의 New를 눌러봅시다. Qt의 하위에 Resource file이 있습니다. 리소스파일에는 프로그램에서 사용할 파일의 대부분을 추가합니다. 이곳에 추가하면 실행파일에 같이 들어가게 되므로 프로그램의 구성이 깔끔해집니다. 리소스가 추가되면 텅빈 리소스 파일이 열립니다. 아랫쪽의 Add버튼을 누르면 아직 Add Files를 누를 수 없습니다. 먼저 Prefix를 추가해야 그 하위에 파일을 추가할 수 있습니다. 파일들의 분류를 위해 카테고리를 추가한다고 생각하시면 됩니다.
사용할 아이콘들만 추가합니다. 실제로 사용하지 않더라도 이곳에 추가하면 실행파일에 들어가기 때문에 용량이 증가하기 때문입니다.

액션의 편집

위에서 메뉴아이템을 추가할때 QAction이라는 이름의 아이템들이 오른쪽에 생겨났을 겁니다. 실제 코딩을 할때는 이 액션을 이용하여 메뉴나 툴바를 눌렀을때의 동작을 결정하게 됩니다. 이제 액션에 아이콘을 지정할 겸, 액션의 설정을 살펴봅시다.
UI편집화면 아랫쪽에 보시면 액션들의 목록이 있습니다. 더블클릭을 하거나 오른쪽버튼을 눌러서 Edit를 선택하면 위와같은 윈도가 나오게 됩니다. 각 요소는 다음과 같습니다.

• Text : 사용자에게 보여지는 액션의 이름입니다. 메뉴의 텍스트와 일치합니다.
• Object name : 실제 코딩시 사용할 액션의 변수명입니다.
• ToolTip : 말그대로 툴팁입니다.
• Icon : 아이콘을 지정합니다. 오른쪽의 버튼을 누르면 리소스에서 아이콘을 고르는 윈도가 나옵니다.
• Checkable : 설정이나 창의 보이기/숨기기와 같은 체크가 가능하게 설정합니다.
• Shortcut : 단축키입니다. 텍스트 편집위젯같이 생긴걸 누르고 사용할 단축키를 누르면 설정이 가능합니다. 오른쪽의 작은 버튼을 누르면 리셋 할 수 있습니다.

각각의 액션을 설정하고 나면 툴바에 제대로 그림이 나오게 됩니다. 이제 메뉴를 완성 해 봅시다. 제가 만든 메뉴는 다음과 같습니다.

• File
• New
• Open
• Save
• Save As
• Exit
• Edit
• Undo
• Redo
• Copy
• Cut
• Paste

그리고 툴바에 구분선을 넣으려면 툴바를 오른쪽 버튼을 눌러 Append Separator를 선택하면 됩니다. 순서는 드래그로 변경 가능합니다.

얼마전 Nokia에서 Qt Creator라는 Qt전용 IDE의 RC버전을 발표했습니다. Designer와 Assistant가 IDE안에 내장된 형태로, Qt4.5로 제작되었습니다.

이 IDE를 사용하여 텍스트 편집기를 제작해 봅시다.

프로젝트 생성

Qt Creator를 설치하고, File메뉴의 New를 눌러 새로운 프로젝트를 생성합니다. 텍스트편집기를 만들 것이므로 "Qt4 GUI Application"를 선택하고, 적당한 프로젝트명과 경로를 지정합니다. 메뉴와 툴바를 사용하기 위해 클래스는 QMainWindow로 지정해주세요.

생성이 완료되면 화면에 프로젝트의 파일 목록이 보이는데 pro는 프로젝트 설정파일이고, ui는 GUI디자인폼 파일입니다. 이대로 빌드하여 실행해 봅시다. 실행버튼은 왼쪽아래에 있는 세개의 버튼 중 가장 위의 재생버튼입니다.

아무버튼도 없는 툴바가 붙은 윈도가 나왔다면 정상적으로 실행 된 것입니다.
이제 이 윈도에 텍스트편집위젯을 붙여봅시다.

textEdit 위젯 추가

mainwindow.ui를 열면 다음과 같은 UI편집화면이 나옵니다. 화면이 좁다면 왼쪽밑의 검색바 옆의 버튼으로 사이드바를 숨길 수 있습니다.왼쪽에 사용가능한 위젯과 레이아웃 등이 있습니다. 스크롤을 내려보면 Input Widgets에 TextEdit라는 위젯이 있습니다. 그걸 끌어다가 가운데에 있는 윈도에 놓으세요.
이대로 실행하면 현재 보고 계신 화면 그대로 작은 위젯이 하나 붙어서 나오게 됩니다. 윈도 크기를 조정해도 위젯의 크기는 변하지 않습니다. 레이아웃을 적용하여 위젯의 크기를 윈도 크기에 맞게 바꿔야 합니다. 왼쪽의 목록에서 MainWindowClass를 선택하거나 가운데의 화면에서 윈도를 선택하면 화면 위쪽의 툴바가 활성화됩니다.왼쪽에서 5번째부터가 레이아웃 지정 버튼입니다. 위젯이 하나 이므로 정렬할 것도 없으니 5번째를 누릅시다. 그러면 TextEdit위젯이 창크기에 맞게 커지지만, 상하좌우로 공백이 있습니다. 이것은 레이아웃에 의한 공백입니다. 오른쪽 밑의 속성부분에서 조절 가능합니다. 왼쪽의 목록에서 centralWidget을 선택하고 속성창에서 레이아웃의 공백의 조절합시다.
Layout부분의 layoutLeftMargin, layoutRightMargin, layoutTopMargin, layoutBottomMargin을 전부 0으로 만들어주면 됩니다.

다시 실행해보면 TextEdit위젯이 윈도 크기에 맞게 조절될 것입니다.

Qt를 이용하여 위와 같이 윈도 안에 버튼이 하나 있는 프로그램을 만들어 보겠습니다.

소스코드

적당한 디렉토리를 생성하여 그 안에 다음의 내용을 가진 .cpp 파일을 만들어봅시다.

#include <QApplication>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QPushButton button("Hello, World!");
    button.show();

    return app.exec();
}

위의 소스가 윈도 위에 "Hello, World!"라고 적힌 버튼을 올리는 내용입니다. 그럼, 한 줄씩 살펴볼까요.

#include <QApplication>
#include <QPushButton>

QApplication과 QPushButton이라는 두 클래스를 사용하기 위해 각각 Include 합니다.

int main(int argc, char *argv[])

메인함수입니다. MFC처럼 메인함수가 숨겨지거나 하지 않습니다. 보통의 C++메인 함수와 같습니다.

QApplication app(argc, argv);

QApplication의 인스턴스를 생성합니다. QApplication은 Qt의 GUI를 사용하기 전에 먼저 생성해줘야 합니다. 프로그램 실행 시 Qt자체적인 옵션을 사용하기 위해 argc와 argv를 넘깁니다.

QPushButton button("Hello!");

버튼을 생성합니다. Qt에서는 윈도를 만들지 않고 아무 위젯이나 생성하게 되면 자동으로 윈도를 생성해줍니다.

button.show();

버튼을 화면에 보이게 합니다. 화면에 버튼을 보이게 하려면 윈도가 필요하므로 이 함수를 실행하지 않으면 윈도를 생성하지 않습니다. 아무일도 하지 않고 종료되는 프로그램이 만들어집니다.

return app.exec();

프로그램을 시작합니다. 윈도를 닫으면 exec 함수가 끝나면서 프로그램이 종료됩니다.

빌드

이제 위의 소스를 빌드하여 실행파일로 만들어 볼까요. Qt를 위해 구성한 IDE를 사용하는 경우에는 그냥 버튼 하나만 누르면 됩니다만, 여기서는 커맨드라인으로 빌드하는 법을 살펴보도록 하죠.
리눅스나 맥이시면 터미널을 엽니다. 윈도라면 cmd를 실행해도 되지만, Qt설치 시 들어있는 터미널을 이용하시는 것이 좋습니다. Qt4.4.3을 쓰시면 "Qt 4.4.3 Command Prompt"이라는 단축 아이콘이 시작메뉴에 있을 것입니다.

준비가 되셨으면 소스코드가 있는 곳까지 이동합시다.
먼저, 프로젝트 파일을 생성해야 합니다. 다음의 명령을 실행합니다.

qmake -project

소스코드가 위치한 디렉토리명을 이름으로 하여 ".pro"의 확장자를 가진 파일이 생성됩니다. qmake가 디렉토리내의 소스파일을 검색하여 스스로 프로젝트 파일을 생성한 것입니다.

다음의 명령을 실행하여 빌드합니다.

make

프로젝트파일과 같은 이름의 실행파일이 생성됩니다.

마치며

프로그램을 실행해 봅시다. 윈도의 사이즈를 조절해 보면 Qt의 레이아웃 기능에 의해 윈도의 사이즈에 맞게 버튼의 크기도 변경됩니다. 하지만, 버튼을 클릭하면 아무 반응이 없군요. 다음과 같이 한줄을 추가하면 버튼클릭시, 프로그램이 종료됩니다.

button.show();
QObject::connect(&button, SIGNAL(clicked()), &app, SLOT(quit()));

return app.exec();

button의 clicked라는 신호가 오면 app의 quit를 실행하라는 의미입니다. 이것에 대해선 추후에 더 살펴보도록 하죠.

3월에 릴리즈될 Qt4.5부터 LGPL라이센스도 선택 할 수 있게된다는 소식이 발표되면서, Qt의 저변은 더욱 넓어지고 있습니다. 이제 상용 프로그램을 만들때 라이센스 때문에 Qt를 포기하는 일이 없어져, 더욱 많은 Qt기반의 프로그램들이 나오겠군요.

Mac OS X의 Cocoa지원도 있으니 4.5부터는 더더욱 활용도가 높아집니다. 그런의미에서 앞으로도 Qt에 대해 살펴보고자 합니다.