1. 사용자 인터페이스
2. UI 표준 및 지침
3. UI 요구사항 확인
4. UI 프로토타입 제작 및 검토
5. UI 흐름 설계
6. UI 상세 설계
사용자 인터페이스 : 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어
*발달 과정: 사용자와 컴퓨터 간의 상호작용 -> 사용자가 수행할 작업을 구체화시키는 기능 위주 -> 정보내용을 전달하기 위한 표현 방법
*인터페이스: 서로 다른 두 시스템이나 소프트웨어 등을 서로 이어주는 부분 또는 접속 장치
사용자 인터페이스의 세 가지 분야
- 정보 제공과 전달을 위한 물리적 제어에 관한 분야
- 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
- 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 대한 분야
- 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소, 변경이 자주 발생
- 사용자의 편리성과 가독성을 높이고, 작업 시간 단축, 업무에 대한 이해도 높여줌.
- 최소한의 노력으로 원하는 결과 얻을 수 있음
- 수행 결과의 오류를 줄임
- 막연한 작업 기능에 대해 구체적인 방법을 제시
- 사용자 인터페이스를 설게하기 위해서는 소프트웨어 아키텍처를 반드시 숙지해야 한다.
- 정보 제공자와 공급자 간의 매개 역할을 수행
* 소프트웨어 아키텍처: 개발할 소프트웨어의 기본 틀을 만드는 것
- CLI: 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스
- GUI: 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
- NUI: 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
- VUI: 사람의 음성으로 기기를 조작하는 인터페이스
- OUI: 모든 사물과 사용자 간의 상호작용을 위한 인터페이스
-직관성 : 누구나 쉽게 이해하고 사용할 수 있어야한다.
-유효성: 사용자의 목적을 정확하고 완벽하게 달성 할 수 있어야한다.
-학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다.
-유연성: 사용자의 요구사항을 최대한 수용하고, 실수를 최소화해야한다.
-사용자 중심: 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경을 제공하며, 실사용자에 대한 이해가 바탕이 되어야한다.
-일관성: 버튼이나 조작 방법 등을 일관성있게 제공하므로 사용자가 쉽게 기억하고 습득 할 수 있게 설계해야 한다.
-단순성: 조작 방법을 단순화시켜 인지적 부담을 감소시켜야 한다.
-결과 예측 가능: 작동시킬 기능마 보고도 결과를 미리 예측할 수 있게 설계 해야 한다.
-가시성: 메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계 해야한다.
-표준화: 기능 구조와 디자인을 표준화하여 한 번 학습한 이후에는 쉽게 사용 할 수 있도록 설계해야 한다.
-접근성: 사용자의 연령,성별,인종 등 다양한 계층이 사용할 수 있도록 설계 해야한다.
-명확성: 사용자가 개념적으로 쉽게 인지할 수 있도록 설계해야 한다.
-오류 발생 해결: 오류가 발생하면 사용자가 쉽게 인지 할 수 있도록 설계해야 한다.
-와이어프레임: 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계
-목업: 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형이다.
-스토리보드: 와이어프레임에 콘텐츠에 대한 설명,페이지 간 이동 흐름 등을 추가한 문서이다.
-프로토타입: 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써, 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모양
-유스케이스: 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술
-UI 표준: 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용으로, 화면 구성이나, 화면 이동 등이 포함된다.
-UI 지침: UI 요구사항, 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야 할 공통의 조건을 의미한다.
-UI 표준과 지침을 토대로 웹의 3요소가 고려되었는지 확인한다.
o 웹의 3요소
- 웹 표준: 웹에서 사용되는 규칙 또는 기술로서, 웹 사이트 작성시 이용하는 HTML, Javascript 등에 대한 규정, 웹 페이지가 다른 기종이나 플랫폼에서도 구현되도록 제작하는 기법 등을 포함함.
- 웹 접근성 : 누구나, 어떤 환경에서도 웹 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장하는 것
- 웹 호환성: 하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비스를 제공하는 것을 의미
- ui 스타일 가이드 작성 순서
o 구동 환경 정의-> 레이아웃 정의 -> 네비게이션 정의 -> 기능 정의 -> 구성 요소 정의
-구동 환경 정의 단계는 컴퓨터 OS,웹 브라우저,모니터 해상도,프레임 세트 등을 사용 환경에 적합하도록 규정하는 단계
o 프레임 세트: 업무 처리의 편의성이나 속도를 고려하여 화면을 top,left,contents 등의 영역을 프레임을 구분해 적용한다.
-레이아웃 정의 단계는 화면 구조를 정의하고 각 영역의 메뉴를 구성하는 단계이다.
o 레이아웃 영역에는 top,left,contents,footer가 있으며, 기본적으로 top,left,contents 영역으로 구성
o left와 footer 영역은 상황에 따라 표시 여부를 선택적으로 결정
-상단 메뉴(top): 필수 영역으로 시스템 전체 페이지에 동일하게 적용 (시스템 로고, 로그인 사용자, 주 메뉴 등)
-좌측 메뉴(left): 선택 영역이며, 시스템별 서브 페이지에 선택적으로 적용( 서브 메뉴,배너 등)
-내용 구성(contents): 필수 영역으로 시스템의 전체 콘셉트를 나타내는 메인 이미지와 시스템 별로 필요한 콘텐츠를 표시하는 부분( 메인 이미지, 시스템별 구성 콘텐츠 등)
-하단 메뉴(footer): 선택 영역이며, 회사 상황에 따라 표시 여부 결정 (회사 CI, 저작권 등)
*CI: 회사에 대한 역할이나 비전등을 나타내는 회사 이미지나 행동,전략
-네비게이션 정의 단계는 네비게이션의 메뉴 타입을 선택하여 적용하는 단계
o 네비게이션은 사용자가 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것으로 메뉴, 버튼, 링크 등으로 구성된다.
-기능 정의 단계는 시스템에 적용할 업무 과정에서 일어나는 모든 활동이나 필요한 데이터 간의 관계 등을 논리적인 모델로 상세화하는 단계이다.
o 프로세스 모델링 정의: 시스템에 적용할 업무에서 발생할 수 있는 모든 활동들을 쉽게 파악할 수 있도록 업무 기능 모델링 정의함.
o 데이터 모델 정의: 업무 처리 과정에서 필요한 데이터를 엔티티로 정의하고, 이를 기반으로 엔티티 간의 관계를 논리적 데이터 모델로 정의함
-구성 요소 정의 단계는 화면에 표시할 그리드나 버튼 등을 정의 하는 단계이다.
o 그리드: 데이터를 테이블 형식으로 쉽게 표시할 수 있도록 해주는 도구
o 버튼: 기능,검색,그리드 관련,기타로 구분
-새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계 (사용자 요구사항 조사,분석,작성)
o 순서: 목표 정의 -> 활동 사항 정의 -> UI 요구사항 작성
-사용자들을 대상으로 인터뷰를 진행한 후 의견이 수렴된 비즈니스 요구사항을 정의
-인터뷰 진행 시 유의사항
o 인터뷰는 가능하면 개별적으로 진행
o 가능한 많은 사람을 인터뷰하여 다양한 의견을 수렴하되, 개인의 중요한 의견을 놓치지 않도록 주의함.
o 인터뷰는 한 시간을 넘지 않도록 한다.
o 인터뷰 진행은 반드시 사용자 리서치를 시작하기 전에 해야 함
*리서치: 사용자들의 요구사항이나 불편사항 등을 파악하기 위해 진행되는 것
-조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의함
o 사용자와 회사의 비전을 일치시키는 작업을 진행함.
o 리서치 규모, 디자인 목표 등을 결정할 수 있도록 각각에 필요한 예산과 일정을 결정함.
o 기술의 발전 가능성을 파악하고 UI 디자인의 방향을 제시함.
o 인터뷰한 내용을 기반으로 경영진들에게 프로젝트를 정확히 이해시키고 협의하도록 도움.
o 사업 전략 및 목표, 프로세스의 책임자 선정, 회의 일정 및 계획 작성, 우선 순위의 선정, 개별적인 단위 업무를 구분함.
-UI 요구사항을 작성할 때는 여러 경로를 통해 수집된 사용자들의 요구사항을 검토하고 분석하여 UI개발 목적에 맞게 작성 해야함.
o UI 요구사항은 반드시 실사용자 중심으로 작성해야 함.
o UI 요구사항은 여러 사람의 인터뷰를 통해 다양한 의견을 수렴해서 작성해야 함.
o UI 요구사항을 바탕으로 UI의 전체적인 구조를 파악 및 검토해야함.
o UI 요구사항 작성 순서 : 요구사항 요소 확인 -> 정황 시나리오 작성 -> 요구사항 작성
-요구사항 요소 (종류와 각각의 표현 방식)
데이터 요구 | ex) 이메일의 메시지 속성은 제목,발신일,발신인,참조인,답변 등 |
기능 요구 | ex) 사용자는 이메일의 메시지를 읽거나 삭제하며, 일정한 양식으로 다른 메시지와 함꼐 보관한다. |
제품/ 서비스의 품질 | ex) 시스템이 파일을 얼마나 빠르게 처리할 수 있는지 여부 등 정량화가 가능한 요구사항들을 확인한다. |
제약 사항 | o 사전에 제약사항의 변경 가능 여부를 확인 한다. |
-사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것임.
o 정황 시나리오는 요구사항 정의에 사용되는 초기 시나리오이다.
o 정황 시나리오는 개발하는 서비스의 모습을 상상하는 첫 번째 단계로 사용자 관점에서 시나리오를 작성해야 한다.
o 사용자가 주로 사용하는 기능 위주로 작성해야 하며, 함께 발생되는 기능들은 하나의 시나리오에 통합해야 함.
o 육하원칙에 따라 간결하고 명확하게 작성해야 함.
o 작성된 시나리오는 외부 전문가 도는 경험이 풍부한 사람에게 검토를 의뢰한다.
- 요구사항은 정황 시나리오를 토대로 작성함.
- 프토토타입: 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써, 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모양
o 프로토타입은 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것으로, 최대한 간단하게 만들어야 함.
o 프로토타입은 최종 제품의 작동 방식을 이해시키는데 필요한 기능은 반드시 포함해야 함.
o 사용자 요구사항이 모두 반영될 때 까지 계속 개선하고 보완해야한다.
o 프로토타이핑 및 테스트는 실제 사용자를 대상으로 테스트하는 것이 좋다.
* 프토토타이핑: 프로토타입을 만드는 과정
-장점
o 사용자를 설득하고 이해시키기 쉽다.
o 사전에 오류를 발견할 수 있다.
o 요구사항과 기능의 불일치 등으로 인한 혼선을 예방 할 수 있어 개발 시간을 줄일 수 있다.
-단점
o 반복적인 개선 및 보완 작업 때문에 작업 시간을 증가 시킬 수 있고, 필요 이상으로 자원을 소모하게 됨.
o 부분적으로 프로토타이핑을 진행하다보면 중요한 작업이 생략될 수 있다.
-페이퍼 프로토타입: 아날로그적인 방법으로, 스케치,그림 글 등을 이용하여 손으로 직접 작성
o when do we use this? 제작 기간이 짧은 경우, 제작 비용이 적을 경우, 업무 회의가 빠를 경우
o 장점
1) 회의 중 대화하면서 생성 가능함.
2) 즉시 변경 가능함
3) 비용 저렴
4) 고객이 과다한 기대를 하지 않음
o 단점
1) 테스트하기에 부적당하다
2) 상호 관계가 많을 경우 나타내기 복잡함
3) 여러 사람에게 나눠주거나 공유하기 어렵다.
-디지털 프로토타입: 파워포인트, 아크로뱃, 비지오 같은 프로그램을 사용하여 작성하는 방법
o when do we use this? 재사용이 필요,산출물과 비슷한 효과가 필요, 숙련된 전문가가 있을 경우
o 장점
1) 최종 제품과 비슷하게 테스트 할 수 있음
2) 재사용이 가능함
3) 수정하기 쉽다.
o 단점
1) 프로토타입을 작성할 프로그램의 사용법을 알아야 한다.
-계획 시 고려 사항
o 프로토타입의 개발 목적을 확인한다.
o 소프트웨어,하드웨어 등 프로토타입 개발에 필요한 환경을 마련한다.
o 프로토타이핑 일정은 일반적으로 아키텍처가 확정된 이후 프로젝트의 실제 분석 작업이 완료되기 전에 진해해야함.
o 프로토타입 개발 인원을 확인한다.
o 주어진 비즈니스 요구사항을 모두 만족하는지 프로토타입 아키텍처를 검증한다
o 프로토타입을 통해서 발생하는 이슈를 모두 취합하고 해결 방법을 제시한다. (프로토타입 리더)
o 고객과 프로젝트 매니저,프로젝트 리더 등에게 완성된 프로토타입을 시연한다.
- 작성 시 고려 사항
o 프로토타입의 작성 계획을 세운다.
o 프로젝트의 범위나 리스크를 고려하여 프로토타입의 범위를 정한다.
o 프로토타입을 통해서 얻고자하는 목표를 확인한다.
o 프로토타입의 개발 목표 달성을 위해 필요한 최소한의 기간과 비용을 확인 한다.
-1단계 : 사용자의 요구사항 분석하는 단계로, 기본적인 요구사항이 확정될 때 까지 수행
-2단계 : 요구사항을 충족하는 프로토타입을 작성하고 개발할 시스템의 핵심적인 기능을 중심으로 개발함.
-3단계 : 사용자가 직접확인하고, 프로토타입에 대해 다양한 추가 및 수정 의견을 제안함.
-4단계 : 작성된 프로토타입을 기반으로 수정과 합의가 이뤄지고 최종 승인이 이뤄질 때 까지 3~4단계를 반복함.
- 순서 : 기능 작성-> 입력 요소 확인 -> 유스케이스 설계 -> 기능 및 양식 확인
- 구축할 시스템에서 필요한 기능적/비기능적 요구사항을 정리하고 그에 대한 설명을 정리한다.
기능적 요구사항 | o 시스템이 어떤 연산을 수행해야 하는지 분석한다.. |
비기능적 요구사항 | o 플랫폼,사용 기술 등 시스템 호나경에 관한 요구사항으로 어떤 것들이 있는지 분석한다. |
-기능을 표현하기 위해 필요한 화면이나 각 화면 간 이동 및 흐름 등도 확인 한다.
-유스케이스는 화면에 표현할 입력요스들의 형태나 입력 방법,배치 등을 고려해서 설계 한다.
-순서: 요구사항 확인-> UI 설계서 표지 및 개정 이력 작성 -> UI 구조 설계 -> 메뉴 구조 설계 -> 화면 설계
- 구조 및 디자인은 사용자의 목적에 맞게 동선의 편리함과 기능을 위주로 철저히 준비한다.
- 수집된 요구사항을 바탕으로 기능 및 제약 조건을 확인한다.
- UI 설계서 표지는 다른 문서와 혼동되지 않도록 프로젝트명이나 시스템명을 포함시켜 작성한다.
- UI 설계서 개정 이력은 UI 설계서가 수정될 때마다 어떤 부분이 어떻게 수정되었는지를 정리해 놓은 문서이다.
o 처음 작성 시 첫 번째 항목을 '초안 작성', 버전을 1.0을 설정한다.
o UI 설계 변경사항이 있을 때마다 변경 내용을 적고 버전을 0.1씩 높인다.
-메뉴 구조 설계 순서
1) UI 시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있도록 메뉴별로 구분한 사이트 맵 구조를 설계 한다.
2) 작성한 사이트 맵의 상세 내용은 표 형태로 작성한다
3) 사용자 관점에서 사용자가 요구하는 프로세스들에 대해 작업 진행 순서에 맞춰 프로세스 정의서를 작성한다.
- 필요한 화면 수를 산출한다.
- 화면을 구분하기 위해 화면별 고유 ID를 부여하고 별도 표지를 작성한다.
- 각 화면별로 필요한 화면 내용을 설계 한다.
[新정보처리기사 실기] SQL 응용 (1/2) (0) | 2020.07.17 |
---|---|
[新정보처리기사 실기] 애플리케이션 테스트 관리 (2/2) (0) | 2020.07.16 |
[新정보처리기사 실기] 애플리케이션 테스트 관리 (1/2) (0) | 2020.07.16 |
댓글 영역