정처기 소프트웨어 설계 - 1.2 화면 설계

<사용자 인터페이스> ★★★★

(1) 사용자 인터페이스(UI, User Interface)의 개요
- 사용자와 시스템간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미
- 사용자 인터페이스의 세 가지 분야
     - 정보 제공과 전달을 위한 물리적 제어에 관한 분야
     - 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
     - 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

(2) 사용자 인터페이스(UI)의 특징
- 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소. 변경이 가장 많이 발생
- 편리성, 가독성 높임 --> 작업시간 단축, 업무에 대한 이해도 높여줌
- 최소한 노력, 원하는 결과 얻음
- 수행 결과 오류 줄임
- 구체적인 방법 제시
- 정보 제공자와 공급자간의 매개 역할 수행
- 소프트웨어 아키텍처를 반드시 숙지해야 설계 할 수 있음

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

(4) 사용자 인터페이스이 기본 원칙
- 직관성, 유효성, 학습성, 유연성

(5) 사용자 인터페이스 설계 지침
- 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

---

<UI 표준 및 지침> ★★★☆

(1) UI 표준 및 지침
- 기술의 중립성(웹 표준), 보편적 표현 보장성(웹 접근성), 기능의 호환성(웹 호환성)이 고려되었는지 확인
- UI 표준 : 모든 UI에 공통적으로 적용될 내용
- UI 지침 : UI 개발 과정에서 꼭 지켜야 할 공통의 조건을 의미

(2) 한국형 웹 콘텐츠 접근성 지침(KWCAG, Korean Web Content Accessibility Guidelines)
- 장애인과 비장애인이 동등하게 접근할 수 있는 웹 콘텐츠의 제작 방법 제시
-웹 콘텐츠 접근성(사용성) 지침 준수를 위한 고려 사항
     - 인식의 용이성 : 데체 텍스트, 멀티미디어 대체 수단, 명료성
     - 운용의 용이성 : 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 네비게이션
     - 이해의 용이성 : 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움
     - 견고성 : 문법 준수, 접근성

(3) 전자정부 웹 표준 준수 지침
- 정부기관의 홈페이지 구축 시 바녕해야 할 최소한의 규약을 정한 것
- 모든 사람이 시스템 환경에 구애받지 않고 정부기관의 홈페이지를 이용할 수 있도록 하기 위한 것
- 전자정부 웹 표준 준수 지침 사항
     - 내용의 문법 준수, 내용과 표현의 분리, 동작의 기술 중립성 보장, 플러그인의 호환성
     - 콘텐츠의 보편적 포현, 운영체제에 독립적인 콘텐츠 제공, 부가 기능의 호환성 확보, 다양한 프로그램 제공

---

<UI 설계 도구> ★★★★

(1) UI 설계 도구
- 사용자의 요구사항에 맞게 UI 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구
- 와이어프레임, 목업, 스토리보드 프로토타입, 유스케이스 등이 있음

(2) 와이어프레임(Wireframe)
- 기획 단계의 초기에 작성하는 것
- 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설치하는 단계
- 와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

(3) 목업(Mockup)
- 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
- 시각적으로만 구성요소를 배치. 실제 구현 x
- 목업 툴 : 파워 목업, 발사믹 목업 등

(4) 스토리 보드(Story Board)
- 와이어프레임 + 콘텐츠에 대한 설명 + 페이지 간 이동 흐름.. 추가한 문서
- 디자이너와 개발자가 최종적으로 참고하는 작업 지침서
- 스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등

(5) 프로토타입(Prototype)
- 와이어플임이나 스토리보드 등에 인터렉션을 적용 --> 실제 구현된 것처럼 테스트가 가능한 동작인 형태의 모형
- 사용성 테스트나 작업자간 서비스 이해르 위해 작성하는 샘플
- 페이퍼 프로토타입 / 디지털 프로토타입
- 프로토타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

(6) 유스케이스(Use Case)
- 사용자 측면에서의 요구사항
- 사용자가 원하는 목표를 달성하기 위해 수행햐야 할 내용을 기술
- 일반적으로 다이어그램 형식으로 묘사 --> 유스케이스 명세서 작성

---

<UI 요구사항 확인> ★★★☆

(1) UI 요구사항 확인
- 새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계
- 다양한 경로를 통해 사용자의 요구사항을 조사하고 분석한 후 작성해야 함
- 목표 정의 --> 활동 사항 정의 --> UI 요구사항 작성

(2) 목표 정의
- 사용자들을 대상으로 인터뷰를 진행 --> 사용자들의 의견이 수렴된 비즈니스 요구사항을 정의함
- 인터뷰를 통해 사업적, 기술적인 요구사항을 명확히 이해함
- 인터뷰 진행 시 유의사항
     - 가능하면 개별적 진행
     - 다양한 의견 수렴, 개인의 의견 놓치지 않기
     - 한 시간 넘지 않기
     - 반드시 사용자 리서치를 시작하기 전에 해야 함

(3) 활동 사항 정의
- 조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의함

(4) UI 요구사항 작성
- 사용자들의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성해야 함
- 실사용자 중심, 다양한 의견 수렴, UI 전체적인 구조 파악 및 검토
- 요구사항 요소 확인 --> 정황 시나리오 작성 --> 요구사항 작성 

(5) 요구사항 요소 확인
- 파악된 요구사항 요소와 종류와 각각의 표현 방식 등을 검토
- 요구사항 요소 : 데이터 요구, 기능 요구, 제품/서비스의 품질, 제약 사항

(6) 정황 시나리오 작성
- 사용자의 요구사항을 도출하기 위해 작성하는 것
- 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것
- 첫번째 단계로 사용자 관점에서 시나리오를 작성해야 함

(7) 요구사항 작성
- 정황 시나리오를 토대로 작성함

---

<품질 요구사항> ★★★☆
 
(1) 품질 요구사항
- 소프트웨어에 대한 요구사항이 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체
- ISO/IEC 9126 : 소프트웨어의 품질 특성과 평가를 위한 표준 지침. 국제 표준으로 널리 사용됨
     - 기능성 : 적절성/정합성, 정밀성/정확성, 상호운용성, 보안성, 준수성
     - 신뢰성 : 성숙성, 고장 허용성, 회복성
     - 사용성 : 이해성, 학습성, 운용성, 친밀성
     - 효율성 : 시간 효율성, 자원 효율성
     - 유지 보수성 : 분석성, 변경성, 안정성, 시험성
     - 이식성 : 적용성, 설치성, 대체성, 공존성

(2) 기능성(Functionality)
- 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부 나타냄 
- 적절성/정합성 : 지정된 작업, 목적 달성 위해 적절한 기능 제공할 수 있는 능력
- 정밀성/정확성 : 요구하는 결과를 정확하게 산출할 수 있는 능력 
- 보안성 : 정보 접근을 권한에 따라 허용 / 차단 능력
- 준수성 : 기능과 관련된 표준, 관례, 규정을 준수할 수 있는 능력

(3) 신뢰성(Realiability)
- 요구된 기능을 정확하고 일관되게 오류없이 수행할 수 있는 정도
- 성숙성 : 결함으로 인한 고장을 피해갈 수 있는 능력
- 고장 허용성 : 결함, 인터페이스 결여 시에도 규정된 성능 수준을 유지할 수 있는 능력
- 회복성 : 고장 시 규정된 성능 수준까지 다시 회복하고 직접적으로 영향 받은 데이터를 복구할 수 있는 능력

(4) 사용성(Usability)
- 사용자와 컴퓨터 사이에 발생하는 어떠한 행위에 대해 사용자가 정확하게 이해하고 사용
- 향후 다시 사용하고 싶은 정도를 나타냄
- 이해성: 사용자가 이해할 수 있는 능력
- 학습성 : 학습할 수 있도록 하는 능력
- 운용성 : 운용하고 제어할 수 있도록 하는 능력
- 친밀성 : 다시 사용하고 싶어하도록 하는 능력

(5) 효율성(Efficency)
- 사용자가 요구하는 기능을 할당된 시간 동안 한정된 자원으로 얼마나 빨리 처리할 수 있는 정도
- 시간 효율성 : 적절한 반응 시간 및 처리 시간, 처리율을 제공할 수 있는 능력
- 자원 효율성 : 적절한 자원의 양과 종류를 제공할 수 있는 능력

(6) 유지 보수성(Maintainability)
- 환경의 변화, 새로운 요구 사항이 발생했을 때, 소프트웨어를 개선, 확장할 수 있는 정도
- 분석성 : 결함, 고장의 원인, 수정될 부분들의 식별을 가능하게 하는 능력
- 변경성 : 결함 제거, 환경 변화로 인한 수정 등을 쉽게 구현할 수 있는 능력
- 시험성 : 소프트웨어의 변경이 검증될 수 있는 능력

(7) 이식성(Portability)
- 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도
- 적용성 : 다른 환경으로 변경될 수 있는 능력
- 설치성 : 임의의 환경에 소프트웨어를 설치할 수 있는 능력
- 대체성 : 동일한 환경에서 동일 한 목적을 위해 다른 소프트웨어를 대신하여 사용될 수 있는 능력
- 공존성 : 자원을 공유하는 환경에서 다른 소프트웨어와 공존할 수 있는 능력

---

 

<UI 프로토타입 제작 및 검토> ★★★★


(1) UI 프로토타입의 개요
- 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형
- 테스트 가능
- 최대한 간단하게 만들어야 함
- 일부 핵심적인 기능만을 제공해야 함
- 최종 제품의 작동방식을 이해시키는데 필요한 기능은 반드시 포함되어야 함
- 계속해서 개선, 보안
- 실제 사용자를 대상으로 테스트 하는 것이 좋음

(2) UI 프로토타입의 장, 단점
- 장점 
     - 사용자를 설득하고 이해시키기 쉬움
     - 혼선을 예방 --> 개발 시간 줄임
     - 사전에 오류 발견 가능
- 단점
     - 모든 요구사항 반영 위한 반복적인 개산 및 보안 작업 --> 작업 시간 증가, 필요 이상 자원 소모
     - 부분적으로 프로토타이핑 진행 --> 중요한 작업 생략 가능

(3) 프로토타이핑의 종류
- 페이퍼 프로토타입
     - 아날로그적인 방법
     - 제작 기간이 짧은 경우, 제작 비용이 적을 경우, 업무 협의가 빠를 경우 사용
- 디지털 프로토타입
     - 프로그램을 사용하여 작성하는 방법
     - 재사용이 필요한 경우, 산출물과 비슷한 효과가 필요한 경우, 숙련된 전문가가 있을 경우 사용

(4) UI 프로토타입 계획 및 작성 시 고려 사항
- 계획 시 고려 사항
     - 일정은 일반적으로 아키택처가 확정된 이후 프로젝트의 실제 분석 작업이 완료되기 이전에 진행
     - 아키텍처의 핵심이 되는 UI 요소를 프로토타입의 범위로 잡음
     - 발생하는 이슈를 모두 취합, 해결방법 제시
- 작성 시 고려사항
     - 주변 여건 감안 프로토타입의 범위 정함
     - 개발 목표를 달성하기 위해 필요한 최소한의 기간과 비용 확인

(5) UI 프로토타입 제작 단계
- 1단계 : 사용자 요구사항 분석. 사용자 관점에서 기본적 요구사항이 확정될 때 까지 수행
- 2단계 : 요구사항을 충족하는 프로토타입을 작성, 개발할 시스템의 핵심적인 기능을 중심으로 개발
- 3단계 : 요구사항을 잘 수행하고 있는지 사용자가 직접 확인. 다양한 추가 및 수정 의견 제안 가능
- 4단계 : 수정과 합의가 이뤄짐. 보완작업. 작업 완료 후 3단계로 돌아감. 
--> 사용자가 최종적으로 승인을 완료할 때 까지 3, 4단계 반복

---

 

<UI 설계서 작성> ★★★☆

(1) UI 설계서의 개요
- UI 설계서 : 사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서
                 상세 설계 전에 대표적인 화면들을 설계함

(2) UI 설계서 표지 작성 
- 프로젝트명 or 시스템명을 포함시켜 작성

(3) UI 설계서 개정 이력 작성
- UI 설계서가 수정될 때마다 어떤 부분이 어떻게 수정되었는지 정리해놓은 문서
- 첫 번째 항목 = 초안 작성, 버전 1.0으로 설정
- 변경사항 있을 때마다 변경 사항 적고, 버전을 0.1씩 높임

(4) UI 요구사항 정의서 작성
- 사용자의 요구사항을 확인하고 정리한 문서
- 사용자 요구사항의 UI 적용 여부를 요구사항별로 표시

(5) 시스템 구조 작성
- UI 요구사항과 UI 프로토타입에 기초하여 전체 시스템의 구조를 설계한 것
- 사용자의 요구사항이 어떻게 시스템에 적용되는지 알 수 o

(6) 사이트 맵 작성
- 시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 메뉴별로 구분하여 설계한 것
- 사이트 맵을 작성 후 사이트 맵의 상세 내용을 표 형태로 작성

(7) 프로세스 정의서 작성
- 사용자 관점에서 사용자가 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리한 것
- UI 전체적인 흐름 파악 가능

(8) 화면 설계
- UI 프로토타입과 UI 프로세스를 참고 --> 필요한 화면을 페이지별로 설계한 것
- 화면별 고유ID 부여, 별도 표지 작성

---

<UI 유용성 평가> ★★☆☆

(1) UI의 유용성 평가
- 사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도
- 사용자 측면에서 복잡한 시스템으 얼마나 편리하게 사용할 수 있는지 평가
- 시스템의 문제 찾아냄, 개선 방향 제시하기 위한 조사 과정
- 사용자 모형과 개발자 모형간의 차이 최소화 해야 함
- 실행 차 : 사용자가 원한느 목적과 실행 기능이 다르기 때문에 발생
- 평가 차 : 사용자가 원하는 목적과 실행 결과가 다르기 때문에 발생

(2) 실행 차를 줄이기 위한 UI 설계 원리 검토
- 1. 사용자 의도 파악
- 2. 행위 순서 규정
- 3. 행위의 순서대로 실행

(3) 평가 차를 줄이기 위한 UI 설계 원리 검토
- 1. 수행한 키 조작의 결과를 사용자가 빠르게 지각하도록 유도
- 2. 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
- 3. 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도

---

 
<UI 상세 설계> ★★★☆

(1) UI 시나리오 문서 개요
- UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계
- 반드시 시나리오를 작성해야 함
- 사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 묘사되어 있음
- UI 설계자, 인터렉션 디자이너가 UI 시나리오 문서 작성
- 그래픽 디자이너가 시나리오 바탕으로 디자인
- 개발자가 UI 구현

(2) UI 시나리오 문서 작성 원칙
- 구체적으로 작성
- 보통 계층 구조 또는 플로차트 표기법으로 작성
- UI 요소와 인터랙션을 일반 규칙으로 정의
- 대표 화면 레이아웃, 화면에 속할 기능 정의
- 인터랙션 흐름 정의
- 예외상황에 대비한 다양한 케이스 정의

(3) UI 시나리오 문서 작성을 위한 일반 규칙
- 주요 키의 위치와 기능, 공통 UI 요소, 기본 스크린 레이아웃, 기본 인터랙션 규칙, 공통 단위 태스크 흐름, 케이스 문서

(4) UI 시나리오 문서의 요건
- 완전성 : 누락 x, 최대한 상세하게 기술
- 일관성 : 일관성 유지
- 이해성 : 불분명 x, 추상적 표현 x
- 가독성 : 문서를 쉽게 읽을 수 있도록
- 수정 용이성 : 수정, 개선이 쉬워야 함
- 추적 용이성 : 변경사항 쉽게 추적 사능해야 함

(5) UI 시나리오 문서로 인한 기대 효과
- 요구사항, 의사호통에 대한 오류 감소
- 개발 과정에서의 재작업 감소, 혼선 최소화
- 불필요한 기능 최소화
- 소프트웨어 개발 비용 절감
- 개발 속도 향상

---

<HCI / UX / 감성공학> ★★☆☆

(1) HCI (Human Computer Interaction or Interface)
- 사람이 시스템을 보다 편리하노 안전하게 사용할 수 있도록  연구하고 개발하는 학문
- 최종 목표 : 최적의 사용자 경험(UX)을 만드는 것

(2) UX (User Experience)
- 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험
- 기능 절차상 만족 + 사용자 참여, 사용, 관찰, 상호 교감을 통해 알 수 있는 가치 있는 경험 말함
- UX의 특징 : 주관성, 정황성, 총체성

(3) 감성 공학
- 제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술
- 여러 분야의 학문이 공존하는 종합 과학
- 목적 : 인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것
- 신체적 + 정신적 + 감성
- 감성공학의 요소 기술 : 기반 기술, 구현 기술, 응용 기술

 

www.yes24.com/Product/Goods/82838724?OzSrank=6

2020 시나공 정보처리기사 필기

* 2020 시나공 정보처리기사 필기 요약한 내용입니다.