[정보처리기사] 실기 정리 - 6과목 (2)

inbdni·2020년 10월 14일
4

정보처리기사

목록 보기
18/34
post-thumbnail

🧀 UI 흐름 설계


1. 개념

업무의 흐름이나 업무 수행과 관련된 일련의 클릭에 의한 화면의 위치와 흐름도 형식으로 표현하는 활동


2. UI 설계서 구성

  • UI 설계서 표지
  • UI 설계서 개정 이력
  • UI 요구 사항 정의
  • 시스템 구조
  • 사이트 맵
  • 프로세스 정의
  • 화면 설계

3. UI 설계 원리

(1) 실행 차를 줄이기 위한 원리

  • 사용 의도 파악
  • 행위 순서 규정
  • 행위의 순서대로 실행

(2) 평가 차를 줄이기 위한 원리

  • 수행한 키 조작 결과를 사용자가 빠르게 자각하도록 유도
  • 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
  • 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도

4. 흐름 설계 절차

(1) UI 설계안의 적정성 확인

설계 원리에 따라 적정성을 확인함

(2) 화면과 폼의 흐름 설계

  • 화면에 표현되어야 할 요구 사항 검토
    • 기능적 요구 사항 검토
    • 비기능적 요구 사항 검토
  • 화면의 입력 요소 및 유스케이스를 통한 UI 요구 사항 확인
    • 화면에 표현되어야 할 기능 확인
    • 화면의 입력 요소 확인
    • 기능을 표현하기 위해 필요한 페이지 확인
    • 각 화면 간 이동과 흐름 확인
  • 유스 케이스 설계
    • UI 요구 사항을 바탕으로 액터별 시나리오 구상
    • UI 요구 사항을 바탕으로 액터 세분화
    • UI 유스케이스 설계
  • 기능 및 양식 확인
    • Input Box 확인 및 규칙 정의
    • Combo Box 확인 및 규칙 정의
    • Radio Box 확인 및 규칙 정의
    • Check Box 확인 및 규칙 정의


🧀 UI 상세 설계


1. UI 상세 설계 프로세스

  • UI 요구 사항 최종 확인
  • UI 구조 설계
  • 사용자 기반 메뉴 구조 설계
  • 화면 설계
  • 하위 시스템 단위의 내부 및 외부 상세 화면과 폼 설계

2. UI 검토 및 보완

  • UI 검토 수행
  • UI 검토 보완
  • 사용성 검토 및 검증 수행



🧀 UI 설계 도구


1. 개념

사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구

  • 분석 도구 : UI 패턴, UI 모델링
  • 설계 도구 : UI 설계
  • 구현 도구 : 프로토타이핑 툴

2. 유형

(1) 화면 설계 도구

  • 파워 목업
    파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴

  • 발사믹 목업
    스케치한 느낌으로 바르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구

  • 카카오 오븐
    카카오에서 제작한 온라인 프로토타이핑 도구

(2) 프로토타이핑 도구

  • UX 핀
    웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구

  • 액슈어
    UI 설계보다는 스토리보드에 포함되는 정책, 플로 차트, 디스크립션까지 모두 작성 가능한 도구

  • 네이버 프로토나우
    네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로 차트 등의 기능 지원 가능 도구

(3) UI 디자인 도구

  • 스케치
    다양한 목업과 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구

  • Adove XD
    UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스를 제공하는 도구

(4) UI 디자인 산출물로 작업하는 프로토타이핑 도구

  • 인비전
    포토샵, 스케치 등으로 디자이너가 작업한 작업 결과를 사이트에 업로드한 다음에 UI를 연결해 간단한 인터랙션 적용이 가능한 도구

  • 픽사에이트
    모바일 앱 프로토타이핑에 최적화되어 있고 디테일한 인터랙션을 설정할 수 있는 도구

  • 프레이머
    커피 스크립트라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 도구




🐭 참고문헌

  • NCS 정보처리기술사 연구회. (2020). 수제비 정보처리기사 실기 (2판). 건기원.

0개의 댓글