IT/정보처리기사실기 공부

[정보처리기사실기] 화면 설계

phobi-k 2020. 10. 5. 20:14

1. 사용자 인터페이스 (A) - (여기서 2회차에 출제됨)

  • 사용자 인터페이스 종류
    • CLI (Command Line Interface) : 명령과 출력이 텍스트 형태로 이루어지는 인터페이스
    • GUI (Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
    • NUI (Natural User Interface) : 사용자의 말이나 행동으로 조작
    • VUI (Voice User Interface) : 음성으로 기기를 조절
    • OUI (Organic User Interface) : 모든 사물과 상호작용하기 위한 인터페이스
  • 사용자 인터페이스 기본 원칙
    • 직관성 : 누구나 쉽게 이해할 수 있어야 한다.
    • 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 한다. (2020 2회차 출제)
    • 학습성 : 누구나 쉽게 배울수 있어야 한다.
    • 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 한다.
  • UI 설계 도구
    • 와이어프레임 : 기획 초기단계에 제작하는 것으로 페이지의 개략적인 레이아웃이나 UI요소등의 뼈대를 설계
    • 목업 : 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
    • 스토리보드 : 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름을 추가한 문서
    • 프로토타입 : 와이어프레임이나 스토리보드에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
    • 유스케이스 : 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술

2. UI 표준 및 지침 (B)

  • UI 표준과 지침을 토대로 웹 표준, 웹 접근성, 웹 호환성이 고려되었는지 확인한다
    • UI 표준 : 모든 UI에 공통적으로 적용될 내용 - 화면 구성, 화면 이동
    • UI 지침 : UI 개발 과정에서 꼭 지켜야 할 조건 - UI 요구사항, 구현 시 제약사항
  • 웹의 3요소
    • 웹 표준
    • 웹 접근성
    • 웹 호환성
  • UI 스타일 가이드 작성
    • 개발자나 디자이너들이 UI를 작성할 때 기준이되는 규칙
    • 구동 환경 정의 -> 레이아웃 정의 -> 네비게이션 정의 -> 기능 정의 -> 구성 요소 정의

3. UI 요구사항 확인 (B)

  • UI 요구사항 확인 순서
    • 목표 정의 -> 활동 사항 정의 -> UI 요구사항 작성
  • 1. 목표 정의 : 사용자들을 대상으로 인터뷰를 진행한 후 비즈니스 요구사항을 정의
    • 인터뷰 진행 시 유의사항
      • 사용자 리처지 전에 진행한다.
      • 인터뷰는 개별적으로 진행한다.
  • 2. 활동 사항 정의 : 요구 사항을 토대로 앞으로 해야 할 활동 사항을 정의
  • 3. UI 요구사항 작성 : 사용자의 요구사항을 검토하고 분석하여 UI개발 목적에 맞게 작성
    • 반드시 실사용자 중심으로 작성
    • 작성 순서
      • 요구사항 요소 확인 -> 정황 시나리오 작성 -> 요구사항 작성
        • 요구사항 요소 확인
          • 요구사항 요소: 데이터 요구, 기능 요구, 제품/서비스 품질, 제약 사항
        • 정황 시나리오 작성 : 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것
          • ex) 회의 내용을 메모하고, 다음 약속을 확인하는 한편, 회의 동안 전화가 왔는지 확인한다.
        • 요구사항 작성 : 정황 시나리오를 통해 작성
          • ex) 문자 입력 가능, 약속 추적 가능, 메시지 리스트를 확인할 수 있어야 함

4. UI 프로토타입 제작 및 검토 (A)

  • 프로토타입 : 사용자 요구사항을 기반으로 실제 동작한는 것 처럼 만든 모형
  • UI 프로토타입 : 최종적으로 구현할 화면의 주요 기능을 직접 테스트 해 볼 수 있게 만든 임시 화면
  • UI 프로토타입 장,단점
    • 장점
      • 사용자를 설득시키고 이해시키기 쉽다
      • 사전에 오류 발견
    • 단점
      • 반복적으로 개선하다보면 비용이 많이 들 수 있다
      • 중요한 작업이 생략 될 수 있다
  • 프로토타이핑의 종류 (프로토타이핑: 프로토타입을 만드는 과정)
    • 페이퍼 프로토타입
      • 비용 저렴, 고객이 과다한 기대 안함
    • 디지털 프로토타입
      • 재사용 가능, 최종 제품과 비슷하게 테스트 가능
  • UI 프로토타입 제작 단계
    • 1단계 : 사용자의 요구사항 분석
    • 2단계 : 프로토타입 작성
    • 3단계 : 사용자가 직접 테스트
    • 4단계 : 작성한 프로토타입을 기반으로 수정과 합의 진행하며 최종 승인 전까지 3단계, 4단계 반복

5. UI 흐름 설계 (B)

  • UI 흐름 설계 : 화면과 폼을 설계하는 단계
  • 설계 순서
    • 기능 작성 -> 입력 요소 확인 -> 유스케이스 설계 -> 기능 및 양식 확인
  • 기능 작성: 기능, 비기능적 요구사항 작성
  • 입력 요소 확인: 화면에 표현되어야 할 기능 확인 후 입력할 요소 확인
  • 유스케이스 설계: UI 유스케이스 설계
  • 기능 및 양식 확인: 텍스트 박스, 콤보 박스, 체크 박스 등을 확인하고 규칙 정의

6. UI 상세 설계 (B)

  • UI 상세 설계: 실제 설계 및 구현을 위해 모든 화면에 대해 자세하게 설계하는 단계
  • 순서
    • 요구사항 확인 -> UI 구조 설계 -> 메뉴 구조 설계(사이트맵) -> (프로세스 정의서 작성) -> 화면 설계
  • UI 구조 설계: UI 요구사항과 UI 프로토타입에 기초하여 UI 구조 설계
  • 메뉴 구조 설계: 사이트 맵 구조 이용
    • 사이트 맵
      • 화면의 정보를 한눈에 파악하기 위한 시각적인 콘텐츠 모형
      • 일반적으로 테이블 형태로 되어 있고, 계층형으로 되어 있다