'GUI'에 해당되는 글 2건

  1. 2008/03/20 귀차니스트 QT4 GUI 프로그래밍 - Linux GUI 라이브러리
  2. 2008/02/28 귀차니스트 유저 인터페이스를 생각하라!? (2)

저번에에 올렸던 포스팅에서는 KDevelop 를 설치하고 실행하여 간단하게 Hello World! 를 찍어보았죠. 그런데 실제로 최근 프로그램은 콘솔프로그램은 사용되지 않죠. 콘솔은 시스템의 서비스나, 서버같은 부분에서는 사용되지만 일반 엔드유저가 사용하는 프로그램에서는 사용되지 않습니다. 불편하기 때문이죠. 그럼 KDevelop에서는 어떻게 해야 할까요??
  먼저 KDevelop를 저번 콘솔 개발때 처럼 동일한 메뉴를 사용하여 실행시킵니다. 그런 뒤 새로 생성해야할 프로젝트에서 다른 프로젝트 종류를 선택하시면 되죠.

 C++ -> KDE -> Simple Designer based KDE Application

  선택해야할 프로젝트는 위와 같죠. 일단 생성하시면 프로젝트명.cpp 파일이 생성되면서 창을 표시하기 위한 코드가 자동생성됩니다.

 /***************************************************************************
 *   Copyright (C) 2008 by FilePointer,,,   *
 *   filepointer@filepointer-desktop   *
 *                                                                         *
 *   This program is free software; you can redistribute it and/or modify  *
 *   it under the terms of the GNU General Public License as published by  *
 *   the Free Software Foundation; either version 2 of the License, or     *
 *   (at your option) any later version.                                   *
 *                                                                         *
 *   This program is distributed in the hope that it will be useful,       *
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of        *
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the         *
 *   GNU General Public License for more details.                          *
 *                                                                         *
 *   You should have received a copy of the GNU General Public License     *
 *   along with this program; if not, write to the                         *
 *   Free Software Foundation, Inc.,                                       *
 *   59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.             *
 ***************************************************************************/
#include <kmainwindow.h>
#include <klocale.h>
#include "testhello.h"
#include "testhellowidget.h"
TestHello::TestHello()
    : KMainWindow( 0, "TestHello" )
{
    setCentralWidget( new TestHelloWidget( this ) );
}
TestHello::~TestHello()
{
}
#include "testhello.moc"

  이 코드를 가지고 Shift + F9 키를 눌러 컴파일을 해야 겠죠? 대충 코드를 봐도 짐작상 TestHelloWidgets 를 추가하는 것을 알 수 있죠. 그런데 컴파일을 정작하게 되면 다음과 같은 에러메시지가 발생합니다.

 configure: error: Can't find X libraries. Please check your installation and add the correct paths!

  X Libraries를 찾을 수 없다는 메시지네요. 아시다시피 리눅스는 GUI 환경이 X-Window 라는 것이므로 그에 해당하는 개발을 하기위해서는 X 라이브러리가 필요하게 되죠 그런데 프로젝트에서 찾지 못하니 에러가 발생하는 것입니다. 그럼 어떻게 해결을 해야 할까요?

 filepointer@filepointer-desktop:~$ sudo apt-get install kdelibs4-dev
꾸러미 목록을 읽는 중입니다... 완료
의존성 트리를 만드는 중입니다
Reading state information... 완료
다음 꾸러미를 더 설치할 것입니다:
  comerr-dev gettext-kde hspell kdesdk-scripts libacl1-dev libart-2.0-dev
  libarts1-dev libartsc0-dev libasound2-dev libaspell-dev libattr1-dev
  libaudio-dev libaudiofile-dev libavahi-client-dev libavahi-common-dev
  libavahi-qt3-dev libbz2-dev libcupsys2-dev libdbus-1-dev libesd0-dev
  libexpat1-dev libfontconfig1-dev libfreetype6-dev libgcrypt11-dev
  libgl1-mesa-dev libglib2.0-dev libglu1-mesa-dev libgnutls-dev libgnutlsxx13
  libgpg-error-dev libice-dev libidn11-dev libjasper-dev libjpeg62-dev
  libkadm55 libkrb5-dev libkrb53 liblcms1-dev liblua50-dev liblualib50-dev
  liblzo2-dev libmng-dev libogg-dev libopencdk8-dev libopenexr-dev
  libpcre3-dev libpcrecpp0 libpng12-dev libpopt-dev libqt3-headers
  libqt3-mt-dev libsasl2-dev libsm-dev libssl-dev libtasn1-3-dev libtiff4-dev
  libtiffxx0c2 libvorbis-dev libx11-dev libxau-dev libxcursor-dev libxdmcp-dev
  libxext-dev libxfixes-dev libxft-dev libxi-dev libxinerama-dev libxml2-dev
  libxml2-utils libxmu-dev libxmu-headers libxrandr-dev libxrender-dev
  libxslt1-dev libxt-dev lua50 mesa-common-dev pkg-config qt3-dev-tools
  x11proto-core-dev x11proto-fixes-dev x11proto-input-dev x11proto-kb-dev
  x11proto-randr-dev x11proto-render-dev x11proto-xext-dev
  x11proto-xinerama-dev xtrans-dev zlib1g-dev
제안하는 꾸러미:
  doc-base kdesdk-doc-html dmalloc kdelibs4-doc qt3-doc valgrind devscripts
  libasound2-doc aspell-doc libgcrypt11-doc libglib2.0-doc gnutls-doc
  gnutls-bin krb5-doc krb5-user libqt3-i18n
추천하는 꾸러미:
  gawk libqt3-compat-headers
다음 새 꾸러미를 설치할 것입니다:
  comerr-dev gettext-kde hspell kdelibs4-dev kdesdk-scripts libacl1-dev
  libart-2.0-dev libarts1-dev libartsc0-dev libasound2-dev libaspell-dev
  libattr1-dev libaudio-dev libaudiofile-dev libavahi-client-dev
  libavahi-common-dev libavahi-qt3-dev libbz2-dev libcupsys2-dev libdbus-1-dev
  libesd0-dev libexpat1-dev libfontconfig1-dev libfreetype6-dev
  libgcrypt11-dev libgl1-mesa-dev libglib2.0-dev libglu1-mesa-dev
  libgnutls-dev libgnutlsxx13 libgpg-error-dev libice-dev libidn11-dev
  libjasper-dev libjpeg62-dev libkadm55 libkrb5-dev liblcms1-dev liblua50-dev
  liblualib50-dev liblzo2-dev libmng-dev libogg-dev libopencdk8-dev
  libopenexr-dev libpcre3-dev libpcrecpp0 libpng12-dev libpopt-dev
  libqt3-headers libqt3-mt-dev libsasl2-dev libsm-dev libssl-dev
  libtasn1-3-dev libtiff4-dev libtiffxx0c2 libvorbis-dev libx11-dev libxau-dev
  libxcursor-dev libxdmcp-dev libxext-dev libxfixes-dev libxft-dev libxi-dev
  libxinerama-dev libxml2-dev libxml2-utils libxmu-dev libxmu-headers
  libxrandr-dev libxrender-dev libxslt1-dev libxt-dev lua50 mesa-common-dev
  pkg-config qt3-dev-tools x11proto-core-dev x11proto-fixes-dev
  x11proto-input-dev x11proto-kb-dev x11proto-randr-dev x11proto-render-dev
  x11proto-xext-dev x11proto-xinerama-dev xtrans-dev zlib1g-dev
다음 꾸러미를 업그레이드할 것입니다:
  libkrb53
1개 업그레이드, 89개 새로 설치, 0개 지우기 및 6개 업그레이드 안 함.
7539k바이트/31.4M바이트 아카이브를 받아야 합니다.
압축을 풀면 121M바이트의 디스크 공간을 더 사용하게 됩니다.
계속 하시겠습니까 [Y/n]? y

  KDE 에서 사용하는 QT4 프로그래밍을 하므로 kdelibs-dev를 깔아야 합니다. 용량이 장난 아니군요^^; 그래도 필요한데 깔아야죠. 설치가 모두 끝난 뒤, 다시 Shift + F9를 눌러 컴파일 후 실행을 합니다. 창이 뜨는군요.
  그런데 우린 여기서 만족할 수 없죠? 버튼을 하나 더 추가해서 하나 묶어 보고도 싶고 그렇습니다. 그럼 어떻게 해야 될까요??

왼 쪽 FilSelector 메뉴에 들어가셔서 UI파일을 하나 수정하시면 됩니다. /src/프로젝트명widgetbase.ui 파일을 더블클릭하면 해당 창에 대한 위지윅 컨트롤 배치 화면이 나타납니다.

  VS.net 의 Dialog Editor 같은 부분과 비슷하게 컨트롤을 배치합니다. 전 PushButton을 선택하여 추가하였습니다. 경고 메시지가 뜨긴 하는데, 레이아웃에 추가하니 혹시나 실수로 클릭한게 아닌지 확인하는 것이므로 그냥 삽입하겠다라고 선택하시면됩니다. 그럼 이제 버튼을 클릭했을때 이 코드가 작동하도록 만들어주어야 겠죠.

 1. 배치한 버튼에서 마우스 오른쪽을 눌러 "Connections..." 메뉴를 선택합니다.
2. View & Edit Connections 창이 표시되면 New 버튼을 눌러 새 연결을 하나 만들어줍니다.
3. 추가로 만든 컨트롤이 button2 일 때, Sender를 pushButton2로 선택하고 Signal, Receiver, Slot을 원래있던 버튼과 동일하게 만들어줍니다.
4. 모두 저장한 뒤, Shift + F9를 눌러 실행해봅시다.

 ui 디자이너에서 추가한 버튼이 새로생성된 프로그램에서도 보이는 군요. 버튼을 클릭하면 원래 존재하던 버튼과 동일한 역할을 수행하게 됩니다. Label이 보였다 안보였다 하죠. 새로운 것은 아마 따로 개인적으로 하면 추가될 것 같네요. 간단하게 GUI 프로그램을 만들어보니 괜찮네요. 나중엔 더 쓸만한걸 만들 그 날까지 달려봅니다.

크리에이티브 커먼즈 라이센스
Creative Commons License
2008/03/20 23:22 2008/03/20 23:22

댓글을 달아 주세요

유저 인터페이스를 생각하라!?

Small Talk 2008/02/28 22:34 귀차니스트




  위 스크린샷은 제가 임의로 비주얼 스튜디오의 Dialog 편집툴을 사용하여 Install Sheild 화면같이 만들어본 창 입니다. 두 개의 화면을 보고 어떤 창이 더 자연스럽고 어색하지 않다고 느끼시나요?? 전 개인적으로 첫 번째 창이 더 자연스럽다고 생각합니다. 입력창의 위치 비율이 아래의 것보다는 더 잘 매치된다고 느끼니까요. 그런데 의외로 프로그래밍을 하다보면 이러한 점들이 중요하답니다. 왜냐하면 엔드유저인 사용자가 맞닥뜨리는 가장 큰것은 바로 그래픽 인터페이스 이기 때문이죠.
  위 그림들과 비슷한 창을 사용한 글이 인터넷 어딘가에 있을 것입니다. 아쉽게도 저도 오래전에 보았고 기억이 가물가물해서 지금와서는 찾지를 못하겠군요. 그런데 그 글을 보았을 당시 많은 생각을 하게 되었습니다. 사실 프로그래밍( 코딩이라고 해야 할까요^^? )하는 사람치고 일반인이 프로그램을 접했을 때 느끼는 생각을 해보기란 사실상 어렵습니다. 그래서 의외로 불편한 프로그램이 나올 때가 많죠. 물론 사용자가 건의를 하고 반영되어 편해지는 경우도 존재합니다. 하지만 그 것은 프로그램 이미지에 영향을 적지않게 미치겠죠.
  이런 것에 관심을 엄청 많이 가진 것은 아니었지만 그 글을 보고 난 후 이러한 책이 있었다면 좋겠다고 생각했었고 몇 일전 운 좋게 검색을 하다 비슷한 내용인 듯한 책을 찾게 되었습니다. 물론 컨트롤의 위치 같은 그러한 내용은 아닌것 같았습니다. 하지만 유용하게 보였죠. 그 책의 이름은 "humane interface 인간 중심 인터페이스" 입니다. 저자는 Hewlett-Packard, IBM, Motorola, NCR, Xerox, Ricoh, Cannon, McKesson, AT&T, Apple 등에서 유저 인터페이스 개발을 하던 사람이라고 합니다. 알고 있던 사람은 아니라서 내용이 어느정도가 될 것이다라고 추측은 못하겠지만 여타 다른 사람들 보다야 나은 뭔가가 있지 않을까 라고 생각하고 있는 중입니다.
  책 내용등의 자세한 것들은 저작권도 있으니 따로 올리거나 하기는 힘들 것 같고 한 번씩 포스팅 주제가 될지도 모르겠군요. 프로그래밍만이 기술이라고 생각하는 것에서 벗어나 이러한 점도 한 번 생각해보는 자세가 필요할 것 같기도 합니다.

크리에이티브 커먼즈 라이센스
Creative Commons License
2008/02/28 22:34 2008/02/28 22:34

댓글을 달아 주세요

  1. 준호씨 2008/02/28 23:46  댓글주소  수정/삭제  댓글쓰기

    오타발견~ 사싱상(X) -> 사실상(O)