정보처리기사 - 제1과목 소프트웨어 설계 / 화면 설계 (1)

 제 1과목 화면 설계 

▷ 화면설계 A

> 사용자 인터페이스(UI)

1. 사용자 인터페이스 : 사용자와 시스템간의 원활한 소통(물리적 제어: 전달방식, 구성, 기능: 간편, 편리)

2. 사용자 인터페이스의 특징 : 사용자의 만족에 영향, SW에서 가장 많은 변경이 생김, 시간↓ 이해도↑ 노력↓ 결과에 영향

3. 사용자 인터페이스의 구분

- CLI: Command Line, 텍스트

- GUI: Graphic User Interface, 아이콘, 메뉴, 마우스

- NUI: 사용자의 말이나 행동으로 기기를 조작하는 interface

- TUI: Text User Interface

- WUI: Web User Interface 인터넷, 웹브라우저를 통해 열람 및 조작

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

- 직관성 : 쉽게 이해

- 유효성 : 사용자의 목적을 정확, 완벽히 달성

- 학습성 : 쉽게 배움

- 유연성 : 사용자의 요구사항 수용, 실수 최소화

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

- 사용자 중심, 일관성, 단순성

- 결과예측 가능, 가시성, 표준화

- 접근성, 명확성, 오류 발생 해결

 

> UI(User Interface) 표준

- 웹 스타일 가이드 구성(사례)

  스타일 가이드 : 각종 규칙들의 기준이 되는 집합

  Introduction : 스타일가이드의 기본 활용, 적용범위

  Basic Rules : 폰트, 컬러 등

  Layout : 시안

  Elements : 텍스트, 아이콘, 버튼, 테이블 등

 

- 정책

  웹 스타일 가이드 운영 정책 : 지속적 업데이트

  조직의 IDENTITY 유지 정책 

 

- 기본환경

  용량규정 : 메인화면 전체페이지 및 이미지 사이즈 / 서브화면 전체페이지 및 이미지 사이즈 / 공통아이콘 이미지 사이즈

 

- 한국형 웹 콘텐츠 접근성 지침 : 장애인과 비장애인 모두 동등한 접근을 위한 제작방법 제시

  인식의 용이성 : 대체 텍스트(=이미지), 멀티미디어(동영상) 대체수단, 명료성(색, 크기, 소리와 무관하게 명확한 전달)

  운용의 용이성 : 키보드 접근성(키보드만으로 접근), 충분한 시간 제공, 광과민성 발작 예방, 쉬운 네비게이션(링크 텍스트)

  이해의 용이성 : 가독성, 예측 가능성, 콘텐츠의 논리성(선형구조(앞->뒤)), 입력 도움(오류방지 및 정정)

  견고성 : 문법 준수, (웹 어플리케이션에 대한)접근성

 

- 전자정부 웹 표준 준수 지침 : 정부기관 홈페이지 제작시 반영해야하는 최소한의 규약

  내용의 문법 준수 : 적절한 문서타입 명시, 문법 준수

  내용과 표현의 분리 : 웹 문서 구조화, 표준 문법 준수

  동작의 기술 중립성 보장 : 비표준문법x, 대체 텍스트 정보 제공

  플러그인의 호환성 : 다양한 브라우저 호환 고려

  콘텐츠의 보편적 표현 : 다양한 브라우저 접근

  운영체제의 독립적인 콘텐츠 제공 : 범용적 운영체제 고려

  부가 기능의 호환성 확보 : 브라우저 무관하게 실명인증 등 사용가능

  다양한 프로그램 제공

 

> UI 지침

- 사용자 경험(UX)의 고려사항 : 사용대상, 환경, 목적, 빈도, 모바일 서비스 특성에 적합한 디자인, 사용자 입력 최소화, 자동완성 기능 제공, 입력실수 되돌리기

- 핵심 기능의 고려사항 : (디바이스 크기를 고려해서) 메뉴 구조를 단순화하고 간결한 정보 제공, 중요한 기능 중심, 서비스 목적에 맞는 기능 중심

- 호환성 확장성의 고려사항 : 3개 이상의 브라우저에서 동등한 서비스를 제공

- 정보 소외계층의 접근성 : 장애인, 고령자 등의 정보 접근 및 이용 편의 증진을 위한 지침

- 일관성

- 이미지 : 용량 최적화, 전송속도를 고려한 경량이미지, 사회적 갈등유발 이미지x, 저작권 확보

- 기타 설계 지침 : 사용자 중심, 단순성, 결과 예측 기능, 가시성, 표준화, 접근성, 명확성, 오류발생 해결

- 스토리보드의 개념 : 디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서

  UI 화면설계 구분 : 개념, 도구 / 스토리보드-PPT, 키노트  와이어프레임-PPT, 키노트  프로토타입(동적효과적용)-html,css

- 스토리보드 작성 절차

  1단계 : 메뉴 구성도 만들기(순서, 구성단계, 용어)

  2단계 : 스타일 확정(레이아웃, 글자, 크기, 색상)

  3단계 : 설계하기

 

▷ 화면설계 B

> UI 설계 도구

- UI 설계 도구

  와이어프레임 : 기획초기, 개략적 뼈대 구성 / 손그림, PPT, 키노트, 일러스트, 포토샵

  목업 : 정적인 시안, 실제구현x / 파워목업, 발사믹목업

  스토리보드 : 와이어프레임 + 설명, 페이지 이동흐름, 개발자가 최종적으로 참고하는 작업지침서

  프로토타입 : 동적, 실제처럼 구현 / HTML, CSS, 카카오 오븐, 네이버 프로토나우, Flinto

  유스케이스 : 사용자측면 요구사항 문서화, 자연어의 구조적 표현

 

- 요구사항 확인

  목표정의 : 사용자 대상 인터뷰, 의견 수렴, 요구사항 정의, 개별적, 다수의견, 최대1시간, 리서치 전에 하기

  활동 사항 정의 : 추후 사용자와 회사의 의견 수용, 예산, 일정, 기간 협의

  UI 요구사항 작성 : 목적에 맞춰서 실사용자 중심 작성, 다양한 의견 수렴, 전체적인 구조 파악 검토

 

> UI 요구사항 확인

- 요구사항 요소 확인

  데이터 요구 : 사용자가 요구기반의 데이터 정의, 전반적 인터페이스 구성에 영향, 초기확인 필

  기능요구 : 무엇을 실행해야하는가를 동사형으로 설명, 상세히

  제품, 서비스 품질 : 속도, 정량화

  제약 사항 : 비용, 시스템준수 규제, 일정

 

- 정황 시나리오 작성 : 초기에 사용자 요구사항 도출을 위해 작성, 사용자 관점에서 육하원칙으로, 검토 필요

- 요구사항 작성 : 문자입력, 약속추적, 메시지리스트 확인, 모바일 구현

 

> 품질 요구사항

- 품질 요구사항 : 사용자의 요구사항이 얼마나 충족되었는가, 국제표준

  ISO/IEC 9126 : 기능성, 신뢰성, 효율성, 유지보수성, 이식성

  ISO/IEC 25010의 품질특성 : 기능성, 사용성, 이식성, 유지보수성, 기능 적합성, 실행 효율성, 호환성, 보안성

 

- 기능성 : 사용자의 요구사항을 정확히 만족하는 기능을 제공하였는가

  적절성/정합성 : 사용자의 요구사항 목적 달성을 위한 적절한 기능 제공 능력

  정밀성/정확성 : 사용자의 요구사항 정확한 산출 능력

  상호 운용성 : 다른 시스템과 어울릴 수 있는 능력

  보안성 : 접근권한에 따른 접근 및 차단 능력

  호환성 : 기능과 관련된 표준 준수 능력

 

- 신뢰성 : 요구된 기능을 오류없이 수행할 수 있는가

  성숙성 : 결함으로 인한 오류를 피할 수 있는 능력 (ex. 엑셀)

  고장 허용성 : 결함발생시 성능유지 능력

  회복성 : 결함발생시 회복 능력

 

- 사용성 : 사용자와 컴퓨터사이의 행위에 대해 사용자가 정확히 이해하고 사용하도록

  이해성 : SW에 대한 사용방법 이해

  학습성 : SW 어플리케이션 학습 능력

  운용성 : SW 운용 및 제어 능력

  친밀성 : SW를 다시 사용하고자하는 능력

 

- 효율성 : 할당된 시간내 한정된 자원으로 얼마나 빠르게 처리가능한가

  시간 효율성 : 반응시간, 처리시간, 처리율, 명령~결과까지 반응 및 처리시간

  자원 효율성 : 적절한 자원의 양과 종류

 

- 유지보수성 : 새로운 요구사항 발생시 SW 개선 및 확장 정도

  분석성 : 고장의 원인 식별 능력

  변경성 : 환경의 변화에 원활한 수정 능력

  안정성 : 예외사항 최소화 능력

  시험성 : 변경이 검증될 수 있는 능력

 

- 이식성 : 다른 환경에서 얼마나 적응이 가능한지

  적용성 : 다른 환경으로 변경될 수 있는 능력

  설치성 : 임의 환경에 SW를 설치할 수 있는 능력

  대체성 : 동일한 목적을 위해 다른 SW를 대신해서 사용될 수 있는 능력

  공존성 : 자원을 공유하는 환경에서 다른 SW와 공존할 수 있는 능력