[정보처리기사 필기] 1과목 - UI

UI(User Interfaces, 사용자 인터페이스)

• 넓은 의미에서 사용자와 시스템 사이에서 의사소통을 할 수 있도록 고안된 물리적, 가상의 매개체(medium)를 뜻함
• 좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면을 뜻한다고 할 수 있음
• 즉, UI는 사용자와 시스템 간의 접점을 최적화해 주는 활동을 의미함
• 요소
  • 윈도우 - 응용 프로그램 내용이 표시되는 영역
  • 탭 - 응용 프로그램이 여러 인스턴스를 실행할 수 있는 경우 별도의 창으로
  • 메뉴 - 표준 명령의 배열
  • 아이콘 - 응용 프로그램을 나타내는 작은 그림
  • 커서 - 포인터
  • 명령 버튼 - 사용자의 명령을 지시 받으려 할 때 사용
  • 다이얼로그 박스 - 시스템이 수행할 작업에 대한 정보를 사용자에게 입력하게 할 때
  • 체크 박스(Check Box) - 여러 개의 선택 상황에서 1개 이상의 값을 선택할 수 있는 버튼
  • 라디오 버튼(Radio Button) - 여러 항목 중 하나만 선택할 수 있는 버튼
  • 텍스트 박스(Text Box) - 사용자가 데이터를 입력하고 수정할 수 있는 상자
  • 콤보 상자(Combo Box) - 이미 지정된 목록 상자에 내용을 표시하여 선택하거나 새로 입력할 수 있는 상자
  • 목록 상자(List Box) - 콤보 상자와 같이 목록을 표시하지만 새로운 내용을 입력할 수 없는 상자

 

UX(User eXperience, 사용자 경험)

• 한 개인이 특정한 제품, 시스템, 또는 서비스를 사용하면서 느끼는 모든 것을 의미한다고 할 수 있음
• 사용자 경험은 시스템 사용에 대한 느낌과 생각에 대한 것이기 때문에 주관적이고 정서적이며 동적인 측면을 가진다고 할 수 있음

 

인터페이스 개념의 발전

• CLI(Command Line Interface)
• GUI(Graphical User Interface)
• NUI(Natural User Interface)
• OUI(Organic User Interface)
  • IoT, VR, AR, MR 등의 발전과 함께 하드웨어 분야를 중심으로 

 

UI 설계

• 1. 사용자 분석
  • 사용자의 유형
    • 청소년, 숙련된 사용자, 초보자
  • 사용자 유형에 대한 질문
    • 사용자의 목표는 무엇인가?
    • 사용 스킬과 경험은 무엇인가?
• 2. UI 태스크 분석
  • UI를 설계하려면 소프트웨어가 수행할 작업 분석 필요
  • 유스케이스 별로 UI 흐름을 파악하는 것이 중요
  • 하위 작업 간의 정보 흐름에 따라 소프트웨어의 GUI 내용 흐름이 결정
• 3. UI 설계와 구현
  • GUI를 디자인하고 코드로 구현
  • 설계와 구현에 사용되는 개념
    • 마법사(Wizard)- 미리 저장된 순서로 사용자를 안내
    • 사이트 이동경로(Breadcrumb Navigation)- 웹사이트나 애플리케이션에서 사용자의 위치를 표시하는 내비게이션
    • 메타포(Metaphor)- 사용자의 개념적 인식 모델
• 4. 사용성 테스트
  • 테스트 목적 설정
    • 학습성, 오류율, 예측성
  • 대표 사용자 선정
    • 5명 이상의 사용자
  • 설문 준비 및 테스트
    • 테스트 대상을 준비
    • 사전, 사후 테스트 설문지 및 작업 시나리오 정의
    • 참가자에게 수행 요청
    • 사용성 테스트를 수행하고 데이터를 기록
• 사용자와의 상호작용 설계
  • 상호작용 요소
  • 워크플로우
• 사용용이성
  • 제품의 차별화 요소
• 심리학, 인간공학, 사회학 등 여러 분야의 지식과 관련
  • 인간 컴퓨터 상호 작용
  • 인터랙션 디자인
  • 사용자 경험
  • 인간 공학
• 제약사항
  • 일반적인 사용자들은 소프트웨어를 사용하기 위하여 매뉴얼을 읽기 싫어함
  • 일반적인 사용자는 선택에 익숙하지 않음
  • 사용자를 두렵게 하는 경고 메시지 사용 자제
• 원리
  • 단순하고 자연스럽게 만들어야함
    • 추가로 설명하는 정보를 주지 않고 단순하게 개발
    • 사용자에게 친숙한 단어, 구절, 개념 사용
  • 안전한 사용과 오류 회복이 쉽게 해야함
    • 프로그램이 사용자의 오류를 허용하도록 개발
    • 데이터 손실을 유발하는 작업의 경우 시작 전에 항상 경고
  • 직접 조작하고 바로 피드백 받게 해야함
    • 명령어 UI보다 화면 아이콘 등 개체를 직접 조작하도록 함
    • 사용자가 작업 중인 대상을 직접 제어하도록 함
  • 일관성을 유지해야 함
    • 일관성 있는 UI를 통해 한 소프트웨어에서 다른 소프트웨어로 쉽게 옮겨 갈 수 있음
    • 플랫폼 규약 및 표준을 따라야 하며 표준 요소를 사용 
  • 즉각적으로 만족시켜야 함
    • 사용자는 소프트웨어 사용 후 처음 몇 초 안에 어느 정도의 성공을 거두어야 만족함
    • 즉각적인 만족으로 사용자에게 신뢰감을 줌
  • 단축 명령을 제공해야 함
  • 인식하기 쉽게 만들어야 함
  • 공간 기억을 활용해야 함
    • 공간 기억을 사용하여 UI의 개체나 명령을 찾아 감
    • 공간 기억은 일관성과 관련됨
    • 항상 같은 위치에 있게 하면 기억하기 쉬움
  • 접근 성이 좋게 하라
    • 이미지에 대한 비디오 캡션, 대체 텍스트 태그를 사용하면 검색 엔진을 통해 비디오 및 이미지를 보다 쉽게 접근할 수 있음
    • 장애자 등의 접근성 고려
  • 도움말과 문서는 최후의 수단
    • 설명서가 필요 없는 UI를 위해 노력

 

사용성

• 시스템이 얼마나 사용하기 편한 지를 나타내는 척도
• 인간과 컴퓨터 상호 작용을 개선하기 위한 방법, 기술
• 사용성에 영향을 주는 요소
  • 학습용이성
  • 효율성
  • 기억용이성
  • 낮은 오류율
  • 자신감과 만족

 

멘탈 모델(Mental Model)

• 현실 세계의 사물이나 과정이 어떻게 작동하는지에 대한 개인의 이해
  • 예 - GUI는 사무실 책상 위(Desktop)를 연상
• 시스템과의 상호 작용, 다른 컴퓨터 프로그램에 대한 사용 경험 및 응용 분야에 대한 지식으로 구성

 

피드백(Feedback)

• 명령에 대한 진행 상황과 입력 내용의 해석이 궁금한 사용자에게 피드백 제공
• 사용자 지시에 대한 효과를 보여줌
  • 예 -회전 필,반응 시간의 표시

 

UI 설계 도구

• 와이어프레임(Wireframe)
  • 와이어프레임은 기획 단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계
  • 개발자나 디자이너 등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 와이어프레임을 사용 함
  • 툴 - 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
• 목업(Mockup)
  • 목업은 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
  • 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지 않음
  • 툴 - 파워 목업, 발사믹 목업 등
• 스토리보드(Story Board)
  • 스토리보드는 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
  • 디자이너와 개발자가 최종적으로 참고하는 작업 지침 서로, 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어 있음
  • 툴 - 파워포인트, 키노트, 스케치, Axure 등
• 프로토타입(Prototype)
  • 프로토타입은 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형임
  • 프로토타입은 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플
• 유스케이스(Use Case)
  • 유스케이스는 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술 함
  • 사용자의 요구사항을 빠르게 파악함으로써 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화할 수 있음

 

화면 설계

• 쉽게 배울 수 있고 사용할 수 있는 자료 입력 화면 가이드 라인
  • 항목의 입력이 끝났음을 알리기 위한 키를 반드시 정함
  • 콤보 박스를 사용하여 입력하게 하면 입력 오류를 줄일 수 있음
• 입력 양식
  • 처리할 자료를 요청하고 모으는데 사용하는 양식

 

출력물 설계

• 출력물은 다양한 종류가 있고 다양한 기술이 사용
• 출력물의 대부분은 인쇄된 리포트
  • 리포트는 매력적이고 전문적이어야 하며 무엇보다 읽기 쉬어야 함
  • 모든 리포트는 머리말과 꼬리말이 있어야 함
  • 항목은 논리적인 순서로 디스플레이하고 그루핑 되어야 함