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

지난번의 내용(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

Qt는 트롤테크에서 제작한 GUI Toolkit으로 현재는 노키아가 인수한 상태입니다. 저도 최근까지 '큐티'라고 읽었지만, 공식홈페이지를 보니 '큐트'라고 합니다.
지원 플랫폼으로는 Windows, Mac, Linux/X11, Embedded Linux, Windows CE 등이 있고, 플랫폼 종속적인 라이브러리를 사용하지 않았다면 하나의 소스로 모든 지원 플랫폼에서 빌드 할 수 있습니다.

다운로드

Qt는 오픈소스 버전과 상업 버전이 존재합니다. 하지만 4.5버전이 나오면 LGPL버전이 나오게 되므로, 오픈소스(GPL) 버전으로 살펴보도록 하겠습니다. 이곳으로 이동하여 자신의 플랫폼에 맞는 버전을 받도록 합시다. 축복받은 윈도는 바이너리가 존재합니다. 다른 플랫폼은 소스를 받아 컴파일 해야 하죠. 하지만, 윈도 바이너리는 MinGW만 지원합니다. 다른 걸 쓰시고 싶으시다면 컴파일 해야하죠. Visual Studio를 쓰실 건가요? 컴파일입니다.

설치

바이너리 설치 버전을 받으셨다면, 그냥 인스톨러를 통해 쭈욱 설치하시면 됩니다.
소스를 빌드하는 법은 공식 홈페이지의 문서에 잘 나와있습니다. 여기서는 윈도 기준으로 설명하겠습니다.

일단, 적당한 곳에 압축을 풀어봅시다. 그리고 터미널(예: cmd)을 열어서 해당 폴더로 이동합니다.
C:\Qt 에 압축을 풀었다고 가정합시다. 기본적인 설정으로 빌드하려면 다음과 같이 실행합니다.
Visual Studio를 이용하시려면 configure뒤에 옵션이 좀 필요합니다. 다음과 같이 말이죠.
이렇게 설정이 종료되면, 빌드만 하면 됩니다. MinGW라면 make, Visual Studio라면 nmake일 것입니다.
아, 잠깐만요. 뭔가 시간 때울 거리부터 준비하세요. 오래 걸립니다. 매우 오래 걸려요.

마치며

설치나 끝났다면, 시작메뉴나 빌드한 폴더의 bin폴더에 assistant, designer, liguist가 있을 것입니다. 데모빌드 옵션을 꺼두지 않으셨다면 qtdemo도 보이실 겁니다. 보이시나요? 그렇다면, 실행해서 화려한 데모를 보시도록 하세요.

다음부터는 기초적인 GUI를 만드는 법을 살펴보도록 하겠습니다.

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

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