CG11 - GUI와 대화식 입력 기법

GUI(Graphical User Interface)

사용자 인터페이스

   - 컴퓨터와 사용자 간의 의사소통 방법

   - 사용자가 어떻게 객체(Object)들을 생성하고 조작하는가 하는 방법을 의미

   - CUI(character user interface)와 GUI

 

# CLI(Command-Line Interface)가 CUI보다 더 많이 쓰이는 단어 같다.

 

그래픽 사용자 인터페이스(GUI)의 기본요소 : WIMP

   - 윈도우(Window), 아이콘(Icon), 메뉴(Menu), 포인터/커서(Pointer / Cursor)

 

인터페이서 설계시 고려사항

   - 일관성(Consistency)    <- 사용자에게 혼란을 주지 말아야 한다.

   - 예측성(Predictability)   <-  직관성과 관련이 있을 수 있다

   - 안전성(Stability)   <- 사용자가 실수를 적게 하도록

   - 피드백(Feedback)

 

 

인터페이스 디자인의 정의

인간은 사물을 사용하기 위해 다양한 형태의 정보 인식과 기계적 조작 및 행동을 필요로함

   - 인간의 세계와 사물의 세계가 근본적으로 분리되었기 떄문

 

인터페이스

   - 인간의 세계와 사물의 세계 사이의 접촉면 또는 의사소통 공간

   - Jef Raskin - 제품을 가지고 하고자 하는 것을 행하는 방식

   - Joann T. Hackos - 제품 또는 시스템의 세계와 사용자의 세계를 연결하는 다리

   - 사용자가 자신의 목표를 얻기 위해 제품과 상호작용하는 방법 그리고 시스템이 사용자의 필요에 관계해 사용자에게 보여주고 행동하는 방식

 

인터페이스 디자인

 디자인에서 인터페이스는 접촉면에 추가적으로, 더욱 효율적이면서 명확한 소통 경로 즉, 커뮤니케이션에 초점을 맞춤

실제 사용자에게 제시되는 구체적인 디자인도 중요하지만, 그에 앞서 어떤 방식으로 상호작용이 이루어지게 할 것인가를 우선 고려함

 

 디자인 영역 - 컴퓨터와 사용자 사이를 연결하는 상호소통 매개체(프로그램, 툴)의 모양과 동작의 흐름

 

 효과적인 디자인은

   - 프로그램으로부터 사용자가 얻어갈 정보의 요소를 빠르고 정확하게 찾을 수 있도록

   - 시작적인 결과물에서 시작하는 것이 아니라 사람들을 이해하는 것에서부터 시작함

 

 다양한 학문 분야에서 연구

   - 인간공학, 기호학, 인지공학, 컴퓨터공학, 인공지능, 심리학 등

 

 

사용자 - 인터페이스에 영향을 미치는 3가지 요인

사용자(인간)

   - 사회통념, 기술적 지식, 기기 고유의 지식, 단기기억, 사용자의 상태 등

기술 제품

   - 기기의 상태, 음신호, 빛신호, 매뉴얼, 디스플레이, 문자, 기호, 색체, 형태, 위치

 인간의 기술을 둘러싼 환경

   - 조작 대상의 상태, 물리적 환경, 사회적 환경, 공동 작업자의 상황

 

 

좋은 인터페이스 디자인 조건

 

 인터페이스는

   - 시스템의 가치모형, 기능모형 그리고 구조모형을 명확하게 표현해 주어야 하고 시스템의 정보와 기능을 표현해야함

   - 개발자가 의도했던 미적 인상이나 개성(통칭하여 감성)을 추일하게 표현해 주어야 함

 

 

애플의 '인터페이스 디자인 원칙' 14가지

 

1. 은유(metaphor) : 적절한 심성모형 구축을 위해 사용자가 해야 하는 시스템 - 특징적인 학습의 양을 최소화시키는 유추적 모형

2. 직접조작(direct manipulation)

3. 보고 지정하기(see and point)

4. 일관성(consistency)

5. WYSIWYG(What You See Is What You Get)

6. 사용자 조절(user control)

7. 피드백과 대화(feedback and dialogue)

8. 관대함(forgiveness)

9. 인지된 안정감(perceived stability)

10. 미적 안정감(aesthetic integrity)

 

이후 추가된 4가지

 

11. 비정형화(modelessness)

12. 추가검토이슈(additional issues to consider)

13. 사용자에 대한 이해(knowledge of your audience)

14. 접근 가능성(accessibility)

 

 

 

효과적인 인터페이스 디자인을 위한 주요 원칙 10가지

 

   - 가시성의 원칙(visibility) : 기능의 이해를 쉽게 하고 조작은 자유롭게

   - 조작 결과 예견의 원칙(natural mapping) : 사전 지식 없이도 공간적/기능적 유추 가능

   - 일관성의 원칙(consistency) : 조작 방식의 일관성

   - 제한점 이용의 원칙(constraints) : 제한 사항을 이용해 가능한 선택 여지를 줄임

   - 단순성의 원칙(simplicity) : 인지구조에 적합하게 단순화시켜 조작 노력을 최소화

   - 지식 분배의 원칙(knowledge in the wordl & head) : 제품과 사용자 모두에게 상호보완적 분배

   - 조작 오류의 원칙(design error) : 오류를 쉽게 발견하고 수정을 용이하게

   - 표준화의 원칙(standadization) : 임의적 디자인 지양

   - 행동 유도성의 원칙(affordance) : 제품을 다루는 행동 방식을 자연스럽게 도출(직관성)

   - 인체 데이터 적용의 원칙(anthropometry) : 다양하고 많은 종류/배경/계층의 사용자를 포괄

 

 

인터페이스 디자인 절차

 

개발 프로젝트의 목적, 소통 매체 종류, 사용자층 등에 따라 여러 방법론이 존재함

 

기본단계

    - 디자인 하려는 프로그램과 유사한 프로그램을 익숙하게 사용함

사용자 분석 단계 사례 연구

   - 사용자 중 대표적인 몇 명을 추려내어 일정 기간동안 집중적으로 관찰함

   - 소수를 위한 어플리케이션이나 한 분야에 전문성을 가진 사용자들의 사례를 조사

설문조사
   - 개별 사용자들의 세밀한 정보 파악은 힘들지만 큰 사용자층에 대한 객관적인 경향을 얻을 수 있음

페르소나

   - 어플리케이션을 사용할 가상의 인물이 프로그램에서 얻어 가려는 것을 어떻게 적용하는지 이해하는데 효과적

 

 

논리적 입력장치의 분류

 

위치 장치(Locator Device)

   - 위치의 좌표(x, y)를 입력하는 ㅈ아치

   - 연속적으로 처리하면 획 좌표(Stroke)의 입력 가능

 

지적 장치(Pick Device)

   - 그림의 구성요로를 직접 선택

 

수량 장치(Valuator Device)

   - 정해진 범위 내의 수량 값을 지정

 

선택 장치(Choice Device)

   - 메뉴에서와 같이 나열된 여러 항목 중 하나를 선택

 

문자열 장치(String Device)

  - 텍스트 문자열을 입력

 

물리적 입력 장치

 

위치 장치(Locator Device)

   - 화면상의 위치를 지정하는 지시(Pointing / Positioning) 장치

   - 입력 피드백으로 화면상 해당 위치에 커서

   - 절대좌표(x, y) 입력 : 태블릿, 터치스크린 등

 

상대좌표(△x, △y) : 마우스, 트랙볼, 터치패드, 조이스틱, 데이터 글러브 등

 

지적 장치(Pick Device)

   - 대표적인 장치로 라이트펜(Light Pen)

 

수량 장치(Valuator Device)

   - 슬라이드 형 전위차계(Potentiometer)와 다이얼 방식의 회전형 수량 입력장치

   - 스피커 볼륨 스위치, 라디오 다이얼등

 

선택 장치(Choice Device)

   - 대표적인 장치로 PFK(Programmable Function Key)

   - 소프트웨어에서 GUI의 메뉴, 선택 목록, 버튼 등이 해당

 

# 맥북도 잘 구현되어 있다.

 

문자역 장치(String Device)

   - 키보드가 대표적인 문자열 장치이다.

 

 

 

위치지정(Positioning) 기법

 

고무물(Rubber - band) 기법

   - 선, 사각형, 원 등을 그릴 떄 자주 사용

   - 커서를 따라 시작위치에서 현위치까지 그림이 계속하여 변한다.

 

# 시작점에서 마우스를 놓은 지점까지 그림

 

드래깅(Dragging) 기법

   - 객체를 이동시킬 때 커서를 따라서 선택된 그림이 따라 다닌다.

 

제한 기법(Constraints) 기법

   - 정해진 방향 또는 정렬에 맞도록 데이터가 제한적으로 입력

   - 수직선, 수평선, 일정 각도의 선그리기, 고정된 가로 / 세로 비율의 원이나 사각형

 

# 직선을 그리려 할때 덜덜 떠는 직선이 아닌 보정되도록 입력

 

 

격자(Grid) 기법

   - 입력 데이터가 양 방향 격자선의 교차점에 위치, 일정간격을 유지

 

# 격자를 얼마나 세밀하게(정밀도) 할지도 중요

 

 

스케치(Sketching) 기법

   - 마우스 버튼을 누르고 움직이면 버튼을 놓을 때 까지 계속해서 그려진다.

 

 

지적/선택 (Picking / Selection) 기법

 

시각적 피드백(Visual Feedback)

   - 클릭한 객체에 대하여 선택되었음을 확인할 수 있도록 한다.

   - 선택할 수 있는 대상에 따라 커서의 모양을 바꾼다.

 

핸들(Handle) 기법

   - 객체를 선택한 후 그림의 둘레에 핸들을 표시한다.

   - 크기 변경 또는 다각형의 꼭지점 변경 시에 해당하는 핸들을 드래깅한다.

 

중력장(Gravity Field) 기법

   - 정확한 위치가 아니어도 객체 근처에 가까우면 선택이 되도록 한다.

 

선택 레벨 및 그룹핑 기법

   - 여러 객체가 겹쳐있을 떄에 앞에서부터 순서대로 선택이 되도록 한다.

   - 복잡한 객체는 그룹핑하여 한번에 처리하도록 한다.

 

 

탐색항해(Navigation)를 위한 기법

 

둘러보기(Traveling) 기법 : 장소의 이동에 대한 움직임을 지정하는 기법

   - 운전(Steering)

   - 목적지 지정(Target - based)

   - 시점 조작(Viewpoint Manipulation) : 바라보는 시점을 변경 HMD또는 데이터글러브를 사용

 

길찾기(Wayfinding) 기법

   - 항해 도중에 의사결정을 위하여 필요한 정보를 부가적으로 보여주는 기법

   - 예) 지도(Map)나 모형(Miniature), 표지판(Landmark)등

 

   

 

선택 및 조작을 위한 기법

 

선택 / 지적(Selection / Picking) 기법

   - 3차원 객체의 선택이나 지적을 위한 표시를 해주는 기법

   - 사용자 입력에 대한 피드백, 선택된 객체의 표시, 선택할 개체에 대한 표시가 필요

 

조작(Manipulation) 기법

   - 3차원 공간 내에서 객체의 위치 및 방향에 대한 표시

   - 선택된 객체의 확대, 이동, 조립, 작동 등 조작에 대한 결과 표시