정보처리기사 실기 시나공 6장 화면 설계

사용자 인터페이스

사용자 인터페이스(UI, User Interface)의 개요

• 사용자 인터페이스(UI)는 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미한다.

사용자 인터페이스(UI)의 특징

• 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소로, 소프트웨어 영역 중 변경이 가장 많이 발생한다.
• 수행 결과의 오류를 줄여준다.
• 최소한의 노력으로 원하는 결과를 얻을 수 있게 한다
• 사용자의 편리성과 가독성을 높임으로써 작업 시간을 단축시키고 업무에 대한 이해도를 높여준다

사용자 인터페이스 구분

• CLI(Command Line Interface)
  • 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스
• GUI(Graphical User Interface)
  • 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경 인터페이스
• NUI(Natural User Interface)
  • 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

사용자 인터페이스의 기본 원칙

• 직관성
  • 누구나 쉽게 이해하고 사용할 수 있어야한다
• 유효성
  • 사용자의 목적을 정확하고 완벽하게 달성해야 한다.
• 학습성
  • 누구나 쉽게 배우고 익힐 수 있어야 한다
• 유연성
  • 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 한다

사용자 인터페이스의 설계 지침

• 사용자 인터페이스를 설계할 때 고려할 사항은 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결 등이다.

UI 설계 도구

• UI 설계 도구는 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치등을 설계할 때 사용하는 도구로, 종류에는 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등이 있다.
• 와이어 프레임
  • 기획단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계이다.
  • 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계한다
• 목업
  • 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형이다.
  • 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않는다
• 스토리보드
  • 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서이다.
  • 상단이나 우측에는 제목, 작성자 등을 입력하고, 좌측에는 UI 화면 우측에는 디스크립션(Description)을 기입한다
• 프로토타입
  • 와이어프레임이나 스토리 보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형이다.
• 유스케이스
  • 사용자 측면에서의 요구사항으로 , 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한다.

UI 표준 및 지침

UI 표준 및 지침

• UI 표준과 지침을 토대로 기술의 중립성( 웹 표준), 보편적 표현 보장성(웹 접근성), 기능의 호환성(웹 호환성)이 고려되었는지 확인한다.
  • UI 표준
    • 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용으로, 화면 구성이나 화면 이동 등이 포함된다.
  • UI 지침
    • UI 요구사항, 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야할 공통의 조건을 의미한다.

UI 스타일 가이드 작성

• 개발자나 디자이너들이 UI를 작성할 때 기준이 되는 규칙들로, 구동 환경, 레이아웃, 네비게이션 등을 정의한다
• UI 스타일 가이드 작성 순서
  • 구동환경 정의
  • 레이아웃 정의
  • 네비게이션 정의
  • 기능 정의
  • 구성 요소 정의

UI 프로토타입 제작 및 검토

UI 프로토타입의 개요

• 프로토타입은 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로, 테스트가 가능하다.
  • 사용자의 요구사항을 개발자에 맞게 해석했는지 검증하기 위한 것으로, 최대한 간단하게 만들어야한다
  • 일부 핵심적인 기능만을 제공하지만 최종 제품의 작동 방식을 이해시키는데 필요한 기능은 반드시 포함되어야 한다.

UI 프로토타입의 장단점

• 장점
  • 사용자를 설득하고 이해시키기 쉽다
  • 요구사항과 기능의 불일치 등으로 인한 혼선을 예방할 수 있어 개발 시간을 줄일 수 있다.
  • 사전에 오류를 발견할 수 있다.
• 단점
  • 프로토타입에 사용자의 모든 요구사항을 반영하기 위한 반복적인 개선 및 보완 작업 때문에 작업 시간을 증가 시킬 수 있고, 필요 이상으로 자원을 소모할 수 있다.
  • 부분적으로 프로토타이핑을 진행하다 보면 중요한 작업이 생략될 수 있다.

프로토타이핑의 종류

• 페이퍼 프로토타입(Paper Prototype)
  • 아날로그적인 방법으로, 스케치, 그림, 글 등을 이용하여 손으로 직접 작성하는 방법이다.
  • 제작 기나이 짧은 경우, 제작 비용이 적을 경우, 업무 협의가 빠를 경우 사용한다.
  • 장점
    • 비용이 저렴하다
    • 즉시 변경이 가능하다
    • 회의 중 대화하면서 생성이 가능하다.
  • 단점
    • 테스트하기에 부적당하다
    • 상호 관계가 많은 경우 나타내기 복잡하다
• 디지털 프로토타입(Digital Prototype)
  • 파워포인트, 아크로뱃, 비지오, 옴니그래플 등과 같은 프로그램을 사용하여 작성하는 방법이다.
  • 재사용이 필요한 경우, 산출물과 비슷한 효과가 필요한 경우, 숙련된 전문가가 있을 경우 사용한다
  • 장점
    • 최종 제품과 비슷하게 테스트할 수 있다.
    • 수정하기 쉽다
    • 재사용이 가능하다
  • 단점
    • 프로토 타입을 작성할 프로그램의 사용법을 알아야한다

UI 흐름 설계

UI흐름 설계 순서

• 기능 작성
• 입력 요소 확인
• 유스케이스 설계
• 기능 및 양식 확인

UI 상세 설계

• UI 상세 설계 순서
  • 요구사항 확인
  • UI 설계서 표지 및 개정 이력 작성
  • UI 구조 설계
  • 메뉴 구조 설계
  • 화면 설계