GUI(Graphical User Interface)는 사용자에게 데이터를 보여주거나 사용자가 입력이나 선택을 하게 하고, 또는 사용자의 액션을 유도하는 등은 윈도우나 각종 컨트롤, 아이콘, 컬러 등의 GUI 구성 요소들을 사용하게 된다.
그러나 GUI 설계를 하는데 사용자와 그 작업에 적당한 GUI 요소들을 적절히 사용하고 배치하는 것은 쉬운 일이 아니다. 작업에 최적의 메타포를 찾고, 작업 분석이 아무리 잘 되었다 하더라도 사용자와 최전방에서 상호 작용을 하는 것은 바로 이러한 실질적인 구성 요소들이기 때문이다.
따라서 GUI 설계를 하는데 있어 이러한 구성 요소들의 각각의 목적과 적절한 사용방법에 대해서 잘 알아야 한다. 특히 요즘은 프로그래머들이 무분별하게 윈도우나 리스트 박스 등의 GUI 구성 요소들을 사용하고 있음을 볼 수 있다. 비주얼 개발 툴을 사용하는 개발자나 웹 애플리케이션 개발자, 웹디자이너들은 이러한 기본적인 GUI 구성 요소들을 적절한 용도에 맞게 사용해야 한다.
그렇다면 GUI 구성 요소들은 어떠한 것들이 있고 각 기본 요소들을 어떻게 하면 적절히 사용할 수 있을까? 모든 구성 요소를 다루고 싶지만 지면 관계상 중요한 것만 소개하겠다.
 

윈도우

윈도우(window)는 GUI의 근간을 이루는 요소로 일반적으로 화면상의 독립된 표시 영역을 가리킨다. 윈도우는 응용프로그램에 의해 결정된 내용을 보여주는 일종의 박스인데, 키보드나 마우스를 통한 데이터의 입력과 그에 따른 결과를 보여준다.
윈도우를 동시에 여러 개 열 수 있기 때문에 윈도우들간에 정보를 이동시키거나 공유할 수 있고, 윈도우의 크기를 임의대로 조절하여 작업 환경을 원하는 대로 변경할 수 있다. 메뉴나 스크롤바, 커서 등은 결국 윈도우를 조작하는 데 사용하는 오브젝트이므로 프로그래머는 이들 오브젝트를 적절히 조합하여 편리한 윈도우 환경을 지원하게 된다.
 

윈도우의 탄생

1960 년대에 들어서 대화형 단말기로서 CRT(Cathode Ray Tube) 디스플레이 터미널이 사용되게 되자 종래의 텔레타이프와 같이 라인 단위로 번갈아가면서 사용자와 컴퓨터가 대화해야 한다는 구속이 없어졌다. 그리고 디스플레이 스크린에 한정된 표시 영역에서 다양한 정보를 혼란없이 사용자에게 전달하는 것이 필요하게 되었다.
이를 위해서 디스플레이를 가상적으로 몇 개의 직사각형 영역으로 분할하여 각각 메뉴의 제시나 프롬프트의 표시 등 다른 목적으로 할당하는 이용법이 사용되었다.
또한 영역의 몇 개는 개별적으로 스크롤하는 것도 만들어졌다. 이것은 존재하는 공간의 일부를 디스플레이 상에서, 열린 창에서 보고 있다는 느낌을 갖게 하여, 그 당시 각 시스템의 매뉴얼에 윈도우 라는 용어로 자주 설명되었다.
그 후, 1970년대 Xerox PARC에서 개발된 Alto 개인용 컴퓨터에서 알랜 케이는 인간과 컴퓨터 인터페이스 향상을 위해 그래픽 표시가 가능하고 여러 장 중복해서 사용할 수 있는 ‘오버랩 멀티 윈도우 환경’을 제창하였다. 이 개념에 의해 중복된 윈도우는 위치, 크기, 상하 관계를 다른 윈도우와 독립적으로 사용자가 자유롭게 지정할 수 있게 되었다.
결국, 책상 위의 종이와 같이 주목하고 있는 것은 위에, 당분간 필요없는 것은 아래에, 동시에 보고 싶은 것은 열거한다는 사용방법이 가능하게 되었다. 이 Alto의 선진성으로 인해 윈도우는 일반적인 것이 되었다.
 

윈도우 구성 요소

일반적으로 윈도우는 많은 구성 요소를 가지고 있는데, 일관성을 위해 각 구성 요소들은 항상 같은 자리에 있다. 윈도우의 구성 요소는 플랫폼과 상태에 따라 다르다. 다음 그림은 윈도우 95의 주 윈도우(primary window)의 구성 요소이다.

그림 7. 윈도우 95의 주 윈도우 화면

윈도우 타입

윈 도우의 타입은 크게 주 윈도우(primary window)와 부 윈도우(secondary window)로 나눌 수 있다. 주 윈도우는 프로그램이 시작했을 때 보이는 윈도우로 다른 윈도우들에 대한 가장 최상의 윈도우이다.
IBM의 SAA CUA와 마이크로소프트 윈도우 95에서는 주 윈도우(primary window)라 하고, 마이크로소프트 윈도우 3.1에서는 애플리케이션 윈도우(application window) 혹은 메인 윈도우(main window)라고 하기도 한다.
부 윈도우는 주 윈도우의 자식 윈도우로 일반적으로 실질적인 데이터를 처리하는 윈도우이다.
IBM의 SAA CUA와 마이크로소프트 윈도우 95는 부 윈도우라고 하고, 마이크로소프트 윈도우 3,1에서는 다큐먼트 윈도우(document window)라고 한다. 윈도우 95의 부 윈도우에는 속성 윈도우(property window), 대화상자(Dialog boxes), 메시지 상자(message box), 팔레트 윈도우, 팝업 윈도우(pop-up window)가 있다.
 

SDI와 MDI 윈도우

윈도우는 구성상 단일 윈도우(SDI : Single Document Interface)와 다중 윈도우(MDI :Multiple Document Interface)로 나눌 수 있다. SDI는 부 윈도우 셋을 갖는 한 개의 주 윈도우로 일반적으로 쓰이는 윈도우를 말하고, MDI는 한 윈도우 안에 여러 개의 부 윈도우 셋을 갖는 윈도우를 말한다. SDI 오브젝트나 윈도우의 내용이 단순하거나 일대일 관계일 때나, 오브젝트가 주요한 표현이나 한 개의 단위로 사용될 때 적합하다
예를 들어 마이크로소프트의 아웃룩은 SDI 윈도우로 그림처럼 아웃룩 메인 화면과 각 작성 창들이 각각 독립적으로 일대일 관계를 가진다.

그림 8. 마이크로소프트 아웃룩의 SDI 윈도우

MDI 는 일반적으로 부모 윈도우라는 윈도우 안에 자식 윈도우들을 가지는 형태이다. 따라서 일정한 오브젝트 셋을 관리하거나 주 윈도우에 종속되는 자식 윈도우들을 표현할 때 좋다. 예를 들어 워드프로세서의 경우에 많이 사용하는 윈도우 형태로, 각 문서들은 한 개의 부모 윈도우 안에서 자식 윈도우로 존재하게 하는 것이다.
그림의 훈민정음 예처럼 MDI는 한 개의 부모 윈도우 안에 자식 윈도우들이 존재하게 되므로 자식 윈도우들간의 작업 이동시 편리성을 위해 계단식 배열이나 바둑판식 배열을 할 수 있게 한다.

그림 9. 훈민정음의 MDI 윈도우 정렬 예

모달 윈도우와 모달리스(modalless) 윈도우

부 윈도우(secondary window)는 모드리스(modeless)와 모달(modal)이 될 수 있다. 모드리스 부 윈도우는 사용자가 부 윈도우나 주 윈도우를 사용할 수 있는데, 일반적으로 사용자가 반복적인 작업을 할 때 적합하다. 예를 들어 본문에서 단어를 찾을 경우, 본문은 주 윈도우에서 있고, 단어 검색은 부 윈도우에 있게 하면 사용자는 주 윈도우와 윈도우를 동시에 작업할 수 있다.
모달 윈도우는 부 윈도우에서 사용자가 어떤 작업을 완료할 때까지 이전 윈도우로 포커스가 가지 못하도록 한다. 어떤 조건이 만족할 때까지 사용자의 선택이나 명령에 제한을 가할 때 사용하면 된다. 예를 들어 다음과 같이 편지 작성 주 윈도우에서 수신처를 입력받는데 새로운 부 윈도우를 사용할 경우, 수신처를 입력한 후에 다시 편지 작성 윈도우로 돌아가게 해야 한다. 이 경우 수신처 입력 부 윈도우를 모달 윈도우를 사용하면 사용자의 작업 포커스를 유도할 수 있다.
웹 애플리케이션의 경우, 아래의 화면을 웹으로 변환할 경우 대표적인 웹 브라우저인 인터넷 익스플로러와 넷스케이프 네비게이터는 단일 윈도우(Single Document Window) 형태이다. 따라서 작성 주 윈도우에서 수신처 부 윈도우를 생성할 경우, 모달로 부 윈도우를 생성하지 못하므로 수신처 윈도우가 뜬 상태에서 수신처를 지정하지 않고, 작성 윈도우를 클릭하면 수신처 창은 뒤로 숨게 되어 디자이너가 의도한 대로 사용자의 포커스를 유도할 수 없게 된다. 인터넷 익스플로러의 경우에는 VBScript로 모달 윈도우를 처리할 수 있기는 하다.

그림 10. 아웃룩의 편지 작성 윈도우에서 받는 사람 지정시 이름 선택창의 모달 윈도우