GUI (그래픽 유저 인터페이스)  그래픽 유저 인터페이스의 구성요소 GUI의 기본 구성요소 및 기능 제록스가 Star를 소개하고 그 대중적인 성공으로 Apple사는 Macintosh를 내놓자 소위 ‘ WIMP’ 가 소프트웨어의 인터페이스 분야에서 유력시되었다. WIMP 란 윈도우, 아이콘, 메뉴, 포인팅의 영문 머리글자를 조합해서 만든 명칭인 데, 이 네가지가 GUI의 기본 개념이자 구성요 소이다. 1) 윈도우 윈도우(window)는 GUI의 가장 핵심요소이다. 윈도우는 응용 프로그램에 의해서 결정된 내용을 보여주는 일종의 상자인데, 키보드나 마우스를 통한 데이터 입력과 그에 따른 결과를 보여 준다. 윈도우는 동시에 여러 개를 열 수 있기 때문에 윈도우간에 정보를 이동시키거나 공유할 수 있고, 윈도우의 크기를 임의로 조절하여 작업 환경을 원하는 대로 변경하는 것도 가능하다. 메뉴, 스크롤바, 커서 등은 윈도우를 조작하는 데 사용되는 오브젝트이므로 디자이너들은 이들 오브젝트를 적절히 조합해서 편리한 윈도우 환경을 구성하게 된다. 1972년 케이(Alan Kay)가 이끄는 제록스 PARC의 Small taik 프로그래밍 언어그룹은 그들의 윈도우 버전을 구현해냈다. 그 시스템에서 이미지는 화면상에 점으로 표현되었다. 이것이 PARC에서 발명한 비트맵(bitmap)이다. 비트맵을 이용한 디스플레이는 1980년대 동안 계속적인 프로세스 로직(logic)과 메모리 속도의 수행 향상으로 유지되다가 PARC에서 겹치는 윈도우를 개발해냈다. ① 초기화면 초기화면((initial window)은 프로그램 수행 처음에 등장하는 데, 사용자가 가장 먼저 접하게 되는 부분이기도 하다. 초기화면을 통해 그 응용프로그램에 대한 사용자의 최초의 판단이 이루어지므로 GUI 디자인에 있어 초기화면은 중요하다. ② 수행화면 응용프로그램의 GUI 디자인을 할 때 가장 중요하게 다루어야 할 부분은 수행화면이다. 그것이야말로 가장 많은 디자인 요소와 원칙들이 복합적으로 작용되는 부분이다. 수행화면을 디자인하면서 아이콘, 문자, 레이아웃 등의 구성요소들을 원칙에 적용시킨다. ③ 대화상자 대화상자(dialogue box)란 컴퓨터 시스템의 특정 기능에 관련하여 사용자로부터 정보를 필요로 할 경우에 안내해주는 팝업(pop-up) 디스플레이 윈도우이며, GUI의 구성요소로써 중요하게 쓰이고 있다. 이는 GUI 디자이너가 주어진 시스템의 지침에 따라 디자인해야 할 부분이다. 주로 기존 화면에 중첩되어 나타나며, 단순히‘ 예’ ‘ 아니요’ 를 요구하는 것, 시스템의 옵션을 체크하고 내용을 기입하는 것, 메시지만 전달하는 경고 상자 등이 있다. 2) 아이콘 아이콘((icon)이란 의미를 가진 또는 의미를 이해하기 쉽게 해주는 그림, 오브젝트 등을 말한다. 어떤 종류의 정보를 기호로 시각적으로 표현한 상징적인 그림이다. 아이콘은 컴퓨터의 기능이나 화일의 종류, 응용프로그램이 곧바로 연상되도록 표현된 것이다. 3) 메뉴 윈도우 환경에서는 명령어를 암기하지 않아도 되게끔 다양한 메뉴((menu)를 지원받을 수 있다. 메뉴는 모양이나 나타내는 방식에 따라 풀다운, 팝업, 팝다운, 테어오프 등으로 구분된다. ① 팝업 메뉴 팝업((pop-up) 메뉴란 키나 마우스의 입력으로 현재의 메뉴 위의 한 부분에 중첩되어 디스플레이되는 메뉴를 말한다. 어떤 특징위치를 누르면 그 영역에서 선택할 수 있는 내용들이 나타나는 방식을 취한다. 직접대상 Icon 기호적 Icon 간접대상 Icon 도큐멘트 Icon 애플리케이션 Icon ② 풀다운 메뉴 풀다운(pull-down) 메뉴란 ?글에서 볼 수 있는 것으로, 대부분의 MS-DOS 응용프로그램이 풀다운 메뉴를 지원하고 있다. 하나의 상위 메뉴를 선택하면 상위 메뉴가 사라지지 않고 그 메뉴의 하위메뉴가 꼬리표처럼 펼쳐지는 표현 방식을 취한다. 4) 포인팅 GUI 환경의 인터페이스는 마우스와 아이콘으로 이루어진다. 따라서 마우스나 트랙볼과 같은 포인팅(pointing) 장비가 필수적이다. 모든 작업 내용들이 아이콘에 표현되고, 그 아이콘의 선택을 통해“ 무엇(object)"을 할 것인가를 결정하고, 컴퓨터를 ”어떻게(action)" 사용할 것인가는 마우스로 결정하게 된다. 그러나 포인팅 장비는 GUI 디자인 범주에 들어가지 않는다. 커서 (cursor)는 포인터(pointer)로서, 작업영역 상에 나타나는 그래픽 이미지이며 마우스나 다른 포인팅 장비의 위치를 나타내준다. 출처 : 디자인 실무를 위한 PRODUCT USER INTERFACE DESIGN HAND BOOK,  홍익대학교 미술디자인 공학연구소, 디자인기반기술개발사업의 연구결과보고서, 2003 http://www.designdb.com/psd/information/research_detail.asp?pyear=2002&chasu=1&projectid=62&filename=011317.html&folderseq=9 [참고자료2] GUI 구성요소 데스크탑 메타포를 도입한 GUI가 보편화되면서 소위 WIMP 인터페이스라는 말이 자주 사용되고 있는데 WIMP인터페이스는 인터페이스의 구성요소로 윈도우(window), 아이콘(icon), 메뉴(menu),포인터(pointer)의 네 가지를 규정하고 있다. 1> 윈도우 윈도우는 화면 상에 정보가 표현되는 영역이다. 윈도우를 구성하고 있는 구성요소는 타이틀 바(title bar),시스템 메뉴 (system menu), 아이콘, 메뉴바 (menu bar), 툴바( tool bar), 스크롤바(scroll bar) 등이 있다. 일반적인 윈도우 응용프로그램에서는 시스템이 규정하는 것을 그대로 활용한다. 그러나 멀티미디어 타이틀에서는 윈도우 구성요소를 프로그램으로 변형시켜 제품의 외관이나 기능에 맞게 개발하는 경우가 많다. 1) 초기화면 (Initial Screen) 초기화면은 프로그램 수행 처음에 등장하게 되는데, 아이콘 다음으로 사용자가 가장 먼저 접하게 되는 부분이기도 하다. 초기화면을 통해서 사용자는 그 응용프로그램이나 멀티미디어 타이틀에 대한 최초의 판단이 이루어 진다. 한편 멀티미디어 제품이나 서비스에서 초기화면을 통해서 이 제품이 무엇을 위한 것인지, 어떻게 사용하는지 등의 정보를 제공하기도 하며 제작사의 로고나 제품의 분위기만을 전달하는 용도로 사용하는 경우도 많다. 웹사이트의 경우 초기화면 없이 제작된 경우도 흔히 있다. 2) 메뉴화면 (Menu Screen) 멀티미디어 제품이나 서비스에서 정보가 계층 구조로 이루어져 있는 경우 흔히 메뉴 화면이 사용된다. 메뉴 화면은 사용자가 원하는 정보에 접근할 수 있도록 정보를 구획하여 전달하는 역할을 한다. 사용자는 메뉴화면을 보면서 원하는 정보에 단계별로 접근해 갈 수 있다. 정보 계층의 깊이에 따라 메뉴화면은 하나 이상의 단계를 가질 수도 있다. 3) 수행 및 내용화면 (Working Window) 응용프로그램의 GUI를 디자인 할 때 가장 중요하게 다루어져야 할 부분은 수행화면이며 가장 많은 GUI디자인 요소와 원칙들이 복합적으로 작용하게 되는 부분이다. 최근 윈도우 응용프로그램에서는 이 수행화면의 레이아웃을 완전히 확정짓는 것이 아니라 사용자가 자신의 쓰임새에 맞도록 조절 할 수 있는 기능을 지원하는 것이 일반적이다. 4) 대화상자 (Dialog Box) 대화상자는 시스템이 사용자로부터 정보를 필요로 할 경우나 사용자가 실수할 가능성이 있거나 또는 위급한 상황인 경우 사용자에게 이를 알리는 데 사용되기도 한다. 대화상자에는 리스트 박스, 푸쉬 버튼, 라디오 버튼, 체크 버튼 등 시스템의 각종 컨트롤을 포함하고 있다. 사용자는 이러한 컨트롤을 사용함으로써 응용프로그램이 필요로 하는 정보를 입력할 수 있다. 2> 아이콘 (Icon) 아이콘은 정보의 종류나 기능을 의미하는 상징적인 그림이다. 멀티미디어 분야에서는 그림으로 표현된 단추 모양의 상징물을 아이콘으로 부르기도 한다. 멀티미디어 제작에서 아이콘은 프로그램의 시작에서부터 메뉴 및 도구의 선택 등에서 광범위하게 활용된다. [그림3-16]아이콘으로 가득 찬 윈도우와 응용 프로그램   3> 메뉴 (Menu) GUI 환경은 명령어를 암기하지 않아도 되도록 다양한 형태의 메뉴를 지원한다. 메뉴란 일련의 명령어를 논리적으로 연관된 것끼리 묶어 사용자가 원하는 것을 선택할 수 있도록 보여주는 명령어 목록을 의미한다. 메뉴는 그 모양이나 나타내는 방식에 따라 풀다운(pull-down), 팝업(pop-up), 테어오프(tear-off) 등으로 구분된다. 멀티미디어에서 메뉴라고 부르는 것은 대개 다음 단계의 선택을 위해 제시되는 화면을 일컫는 경우가 많다. 4> 포인터 (Pointer) 포인터는 작업영역 상에 나타나는 그래픽 이미지로서 마우스나 다른 포인팅 장비의 위치를 나타내주는 것으로서 커서(cursor)라고도 부른다. 멀티미디어 프로그램을 사용할 때 사용자의 주의가 보편적으로 포인터의 근처로 가게 되기 때문에 포인터의 모양을 상황의 의미를 돕도록 디자인하여야 하며, 최적의 가독성을 위하여 단순하게 디자인하여야 한다. 멀티미디어 프로그램에서 포인터는 다음과 같은 역할을 한다. 1) 현재 마우스와 같은 포인팅 장비가 가르치는 위치를 알려준다. 이는 포인터가 가진 가장 기본적인 기능이다. 2) 작업 모드에 대한 실마리를 제공한다. 대체로 무엇인가 대상물을 지적해야 하는 작업 모드에는 화살표, 손가락 등이 적합하고, 사용자가 입력을 해야 하는 모드라면 포인터는 대체로 I자 모양이며, 대상물을 옮겨야 할 경우는 사방에 화살표가 있는 포인터를 보여주어 현재의 작업 모드에 대한 실마리를 사용자에게 전달해 준다. 3) 사용자가 나아가야 할 방향에 대한 방향을 제시해 준다. 화면에서 상하좌우로 이동할 수 있는 위치로 포인터가 가면 이동 방향을 지시하는 형태로 바뀌도록 한다. 4) 시스템이 이상이 없다는 사실을 알려준다. 모래시계와 같은 포인터는 현재 시스템이 아무런 이상이 없으니 기다리라는 실마리를 사용자에게 전해준다. 5> 메타포 (Metaphore) 문학에서 메타포는 시적인 상상력의 기법이나 수사학적인 측면으로 이해되지만, GUI에서 메타포를 활용하는 것은 사람들의 일상적인 사고체계나 언어체계를 활용하여 컴퓨터 시스템의 개념과 특징을 사용자에게 직관적으로 전달하기 위한 것이다. 메타포를 활용할 때에는 멀티미디어 제품이나 서비스의 외관 뿐 아니라 활용하는 메타포가 가진 개념, 특징, 논리, 시스템 등이 적용되어야 한다. 출처 : Car Mobile Navigation System 디자인전략연구, 아이더스디자인(주), 디자인기반기술개발사업의 연구결과보고서, 2002 http://www.designdb.com/psd/information/research_index.asp?pyear=2001&chasu=1&projectid=14 [참고자료3] GUI elements ; 그래픽 사용자 인터페이스 구성요소 check box ; 체크박스 항목을 on/off시킬 때 사용하며, 해당 항목에 대한 선택의 여지가 on과 off의 2가지 상태일 때 주로 사용한다. 배타적인 선택을 하는 라디오 버튼과는 달리, 필요한 항목이 있으면 얼마든지 선택할 수 있다. 항목의 수는 2~8개가 적당하며, 키보드를 통해 항목간의 이동 및 선택이 가능해야 한다. 선택된 항목의 상자 내에는 "x" 또는 "v" 표시가 나타난다. combo box/drop-down list ; 콤보박스 또는 드롭다운 리스트 텍스트 상자와 리스트 박스의 조합이다. 이것은 보통 때에는 단 하나의 줄 항목을 표시하지만, 화살모양을 클릭하면 리스트가 펼쳐짐으로써, 그 중 하나를 선택할 수 있다.         dialog box ; 대화상자 정보나 요구사항을 입력을 보여주기 위한 표시화면이다. 대화상자는 대체로, 요구한 정보를 사용자가 입력하고 나면 화면에서 사라진다. 매킨토시와 마이크로소프트 윈도우 인터페이스에서, 메뉴항목의 끝 부분에 "..."이라고 표시되어 있는 항목을 선택하면 반드시 대화상자가 나타나도록 약속되어 있다. 그 외에 "..." 표시가 없는 메뉴항목은 그 기능이 곧바로 실행된다. icon ; 아이콘 객체나 프로그램을 나타내는 작은 그림이다. 아이콘은 윈도우를 사용하는 응용프로그램에서 매우 유용하게 사용되는데, 그 이유는 마우스로 최소화단추를 한번 클릭 함으로써 전체 창을 작은 아이콘으로 만들 수 있기 때문이다. 아이콘은 그래픽 사용자 인터페이스의 주요한 특색이다. menu bar ; 메뉴 표시줄 창의 상단에 수평으로 나타나 있는 메뉴들이 차지하고 있는 줄을 말한다. 대체로, 메뉴 표시줄의 각 항목은 풀다운 메뉴로 구성되어 있는 것이 보통이다. push-button ; 푸시버튼 대화상자 내에 있는 단추로서, 어떤 항목을 선택하거나 명령하려는 경우에 누르게 된다. radio buttons ; 라디오버튼 옵션버튼이라고도 하며, 여러 개의 서로 배타적인 항목 중 단 한 개만 선택할 수 있다. 한 항목을 선택하면, 나머지 항목들은 자동적으로 선택이 해제된다. scroll bar ; 스크롤바 창의 아래나 오른쪽에 있으며, 현재 창의 프레임에 있는 문서의 보이지 않는 부분을 움직여 조절할 수 있다. 스크롤 바는 파일의 어느 부분에라도 쉽게 옮겨갈 수 있게 해준다. 스크롤바는 대체로, 양끝에 화살표시의 단추가 있고 중간에 회색으로 채색된 스크롤 상자(엘리베이터라고도 부른다)가 있어서 문서의 현재 위치를 반영하면서 스크롤 바의 제일 위부터 제일 아래까지 움직인다. 화살표시의 단추를 클릭하면 문서가 표시된 방향으로 스크롤한다. 스크롤 박스를 마우스로 잡아끌기 함으로써 문서의 원하는 위치에 쉽게 옮겨갈 수도 있다. 많은 윈도우 시스템에서 수평 및 수직방향의 스크롤바를 지원한다. slider ; 슬라이더 한정된 연속적인 값에서 한 값을 지정할 때 유용하게 사용된다. 가능한 범위에서 현재의 값을 보는데 편리하다. spin box ; 스핀박스 텍스트 박스에 업/다운 컨트롤을 조합한 것으로 직접 값을 입력하거나 버튼을 눌러 값을 입력할 수 있게 한다. text box ; 텍스트 상자 텍스트 입력이나 수정시 이를 표시한다. 처음 표시할 때, 공백 또는 디폴트값을 제공하며 읽기 전용 텍스트 표시이다. title bar ; 제목 표시줄 창의 최상단에 있는 줄로서, 대개 현재 작업중인 데이터 파일이나 응용프로그램의 이름을 표시한다. 매킨토시나 윈도우 등 많은 그래픽 사용자 인터페이스에서, 제목 표시줄을 잡아끌면 윈도우의 위치가 옮겨진다. toolbar ; 툴바 응용프로그램에서 자주 사용되는 기능들을 모아서 별도의 버튼모양으로 만들어 놓은 줄이다. 일부 툴바는 추가나 삭제 등 사용자의 의사에 따라 편집이 가능하다. tool tip ; 도구 도움말 툴바 버튼에 마우스를 올려놓으면, 해당 버튼의 기능을 몇 초 동안 보여준다. 이는 아이콘이나 컨트롤의 모양으로 설명이 모두 안 되는 경우 사용자에게 보충설명을 주기 위해 사용한다. * 출처 : 최영완님의 "최적의 UI 설계 가이드"에서 발췌한 내용으로 만든 페이지(http://www.terms.co.kr/GUIelements.htm)에서 복사함. 따끈 : 참고자료1번, 2번은 디자인기반기술개발사업의 연구결과보고서로서 www.designdb.com/psd 에서 전문을 볼 수 있다. GUI개요에 관한 부분에서 아마 같은 참고도서를 배낀 때문이라 생각하는데, 상당 부분이 유사하다. 여기 인용된 GUI 요소에 대해서도 동일한 기준으로 설명하고 있으며 3번은 보다 실제적으로 각 요소의 특징과 기능을 설명한 자료이다. 컴퓨터 시스템 사용자 인터페이스의 구성요소 (The Interface Elements) 의 정의와 설명에 관해서는 1992년, 매킨토시 휴먼 인터페이스 가이드라인(Macintosh Human Interface Guidelines) 이 가장 교본이라 할 만하다. 1995년 우리나라에서도 '매킨토시 휴먼 인터페이스'라는 제목으로 (주)인포메이션이란 업체를 통해 번역 출간된 적이 있다. 인터페이스의 구성요소와 인터페이스 디자인을 함에 있어 지켜야 할 가이드라인들이 궁금하신 분들은 그의 손자뻘이라 할 만한... Aqua Human Interface Guidelines 을 검토해보길 권한다.  운영체계 뿐 아니라, 윈도우 어플리케이션, 각종 사용자 인터페이스를 개발하는 디자이너 또는 프로그래머라면  필독하여야 할 자료. http://developer.apple.com/documentation/UserExperience/Aqua-date.html 이 페이지에서 PDF 파일 전문을 다운로드 할 수 있다.