| 2020 정보처리기사 (필기) | 1. 소프트웨어 설계 - 화면 설계

10. 사용자 인터페이스

 

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

사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치, 소프트웨어

 

• 사용자 인터페이스의 3가지 분야

- 물리적 제어에 관한 분야 : 정보 제공과 전달

- 기능에 관한 분야 : 모든 사용자가 편리하고 간편하게 사용

- 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야

 

• 사용자 인터페이스의 특징

- 소프트웨어 영역 중 변경이 가장 많이 발생

- 사용자의 만족도에 가장 큰 영향을 미침

- 수행 결과의 오류를 줄임

- 작업 시간 단축, 업무에 대한 이해도 높임

- 편리성과 가독성 높임

- 사용자 인터페이스 설계를 위해선 소프트웨어 아키텍처를 반드시 숙지해야 함

 

소프트웨어 아키텍처 : 개발할 소프트웨어의 기본 틀을 만드는 것, 복잡한 소프트웨어 개발 과정을 체계적으로 접근하기 위한 밑그림

 

• 사용자 인터페이스의 구분

- CLI (Command Line Interface) : 명령, 출력이 텍스트 형태로 이뤄지는 인터페이스

- GUI (Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스

- NUL (Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

 

• 기본 원칙

- 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 함

- 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함

- 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함

- 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함

 

• 설계 지침

사용자 중심 / 일관성 /  단순성 /  결과 예측 가능 / 가시성 / 표준화 /  접근성 / 명확성 / 오류 발생 해결

 

11. UI 표준 및 지침

 

UI 표준 및 지침

UI 표준 및 지침을 토대로 웹 표준, 웹 접근성, 웹 호환성이 고려되었는지 확인

- UI 표준 : 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용으로

- UI 지침 : UI 개발 과정에서 꼭 지켜야 할 공통의 조건

 

웹의 3요소 : 웹 표준 , 웹 접근성, 웹 호환성

 

 

한국형 웹 콘텐츠 접근성 지침 (KWCAG)

장애인이 비장애인과 동등하게 접근할 수 있는 웹 콘텐츠의 제작 방법을 제시 

- 인식의 용이성 : 대체 텍스트, 멀티미디어 대체 수단, 명료성

- 운용의 용이성 : 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션

- 이해의 용이성 : 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움

- 견고성 : 문법 준수, 접근성

 

내비게이션 구조의 요소

- 사이트 맵 : 사이트의 전체 구조를 한 눈에 알아볼 수 있도록 트리 구조 형태로 만든 것

- 이미지 맵 : 그림에 하이퍼링크를 연결하여 원하는 페이지로 이동할 수 있게 함

- 디렉터리 : 주제나 항목을 카테고리별로 표현한 방식

 

 

전자정부 웹 표준 준수 지침

정부기관의 홈페이지 구축 시 반영해야 할 최소한의 규약을 정의

 

12. UI 설계 도구

 

UI 설계 도구

사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구

 

1. 와이어프레임(Wireframe)

기획 단계의 초기에 제작하는 것, 페이지에 대한 개략적인 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 단계

- 와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

 

2. 목업(Mockup)

디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형

- 목업 툴 : 파워 목업, 발사믹 목업 등

 

3. 스토리보드(Story Board)

와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서

- 스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등

 

4. 프로토타입(Prototype)

와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형

인터렉션 : UI를 통해 시스템을 사용하는 일련의 상호 작용

- 프로토타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

 

5. 유스케이스(Use Case)

사용자 측면에서의 요구사항, 사용자가 원하는 목표를 달성하기 위해 수행할 내용 기술

- 일반적으로 다이어그램 형식으로 묘사

 

13. UI 요구사항 확인

 

UI 요구사항 확인

새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계

( 목표 정의 -> 활동 사항 정의 -> UI 요구사항 작성 (요구사항 요소 확인 -> 정황 시나리오 작성 -> 요구사항 작성) )

 

1단계 ) 목표 정의

사용자들을 대상으로 인터뷰를 진행한 후 사용자들의 의견이 수렴된 비즈니스 요구사항을 정의

 

2단계 ) 활동 사항 정의

조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의

 

3단계 ) UI 요구사항 작성

여러 경로를 통해 수집된 사용자들의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성

 

• 3-1단계 ) 요구사항 요소 확인

파악된 요구사항 요소의 종류와 각각의 표현 방식 등을 검토

요구사항 요소 : 데이터 요구, 기능 요구, 제품/서비스의 품질, 제약 사항

 

• 3-2단계 ) 정황 시나리오 작성

사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사

- 요구사항 정의에 사용되는 초기 시나리오

- 개발하는 서비스의 모습을 상상하는 첫 단계로 사용자 관점에서 시나리오를 작성

- 사용자가 주로 사용하는 기능 위주로 작성

- 육하 원칙에 따라 간결하고 명확하게 작성

 

• 3-3단계 ) 요구사항 작성

정황 시나리오를 토대로 작성

 

14. 품질 요구사항

 

품질 요구사항

소프트웨어의 품질은 소프트웨어의 기능, 성능, 만족도 등 소프트웨어에 대한 요구사항이 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체

 

ISO/IEC 9126 

소프트웨어의 품질 특성과 평가를 위한 표준 지침으로, 아래 6가지 특성은 ISO/IEC 9126에서 제시한 품질 특성

 

1. 기능성(Functionality)

사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부를 나타냄

- 적절성/정합성, 정밀성/정확성, 상호 운용성, 보안성, 호환성

 

2. 신뢰성(Reliability)

소프트웨어가 요구된 기능을 정확하고 일관되게 오류 없이 수행할 수 있는 정도를 나타냄

- 성숙성, 고장 허용성, 회복성

 

3. 사용성(Usability)

사용자와 컴퓨터 사이에 발생하는 어떠한 행위에 대하여 사용자가 정확하게 이해하고 사용하며, 향후 다시 사용하고 싶은 정도를 나타냄

- 이해성, 학습성, 운용성, 친밀성

 

4. 효율성(Efficiency)

사용자가 요구하는 기능을 할당된 시간 동안 한정된 자원으로 얼마나 빨리 처리할 수 있는지 정도를 나타냄

- 시간 효율성, 자원 효율성

 

5. 유지 보수성(Maintainability)

환경의 변화 또는 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도를 나타냄

- 분석성, 변경성, 안전성, 시험성

 

6. 이식성(Portability)

소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도를 나타냄

- 적용성, 설치성, 대체성, 공존성

 

15. UI 프로토타입 제작 및 검토

 

UI 프로토 타입

사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로 테스트가 가능

- 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것, 최대한 간단하게 만들어야 함

 

• UI 프로토 타입의 장점과 단점

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

 

• 프로토타이핑의 종류

페이퍼 프로토타입	- 아날로그적인 방법으로, 스케치, 그림, 글 등을 이용하는 것 - 제작 기간이 짧고, 제작 비용이 적고, 업무 협의가 빠를 경우 사용 - 장점 : 저렴한 비용, 즉시 변경 가능, 고객의 과다한 기대X - 단점 : 테스트하기에 부적당, 공유하기 어려움, 상호 관계가 많은 경우 나타내기 복잡함
디지털 프로토타입	- 파워포이트, 비지오, 아크로뱃 등과 같은 프로그램을 사용하는 것 - 재사용이 필요하고, 산출물과 비슷한 효과가 필요하고, 숙련된 전문가가 있을 경우 사용 - 장점 : 최종제품과 비슷한 테스트 가능, 쉬운 수정, 재사용 가능 - 단점 : 프로그램의 사용법 숙지

 

• UI 프로토타입 제작 단계

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

 

16. UI 설계서 작성

 

UI 설계서

사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서

- 기획자, 개발자, 디자이너 등과의 원활한 의사소통을 위해 작성

 

• UI 설계서 작성 순서

 

1. UI 설계서 표지 작성

프로젝트명 또는 시스템명을 포함 시켜 작성

 

2. UI 설계서 개정 이력 작성

UI 설계서가 수정될 때마다 어떤 부분이 어떻게 수정되었는지를 정리

- 변경 사항이 있을 때마다 0.1씩 버전을 높이며 작성

 

3. UI 요구사항 정의서 작성

사용자의 요구사항을 확인하고 정리한

 

4. 시스템 구조 작성

UI 요구사항과 UI 프로토타입에 기초해 전체 시스템의 구조를 설계

 

5. 사이트 맵 작성

시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있도록 메뉴별로 구분하여 설계

 

6. 프로세스 정의서 작성

사용자 관점에서 사용자가 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리

 

18. UI 상세 설계

 

UI 시나리오 문서

UI 상세 설계는 UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계로, UI 상세 설계를 할 때는 반드시 시나리오를 작성해야 함

 

UI 시나리오 문서 : UI의 기능 구조, 대표 화면, 화면 간 인터렉션의 흐름, 다양한 상황에서의 예외 처리 등을 문서로 정리한 것

 

• 작성 원칙

- 개발자가 전체적인 UI의 기능과 작동 방식을 한눈에 이해할 수 있도록 구체적으로 작성, 보통 계층 구조 또는 플로우 차트 표기법으로 작성

- 모든 기능에 공통적으로 적용될 UI 요소와 인터랙션을 일반 규칙으로 정의

- 인터랙션의 흐름을 정의하며, 화면 간 인터랙션의 순서, 분기, 조건, 루프 등을 명시

- 예외 상황에 대비한 다양한 케이스 정의

- UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오 정의

 

• UI 시나리오 문서의 요건

완전성, 일관성, 이해성, 가독성, 수정 용이성, 추적 용이성

 

• 기대 효과

- 요구사항이나 의사소통에 대한 오류 감소

- 개발 과정에서의 재작업 감소, 혼선 최소화

- 불필요한 기능 최소화

- 소프트웨어 개발 비용 절감

- 개발 속도 향상