1과목.소프트웨어 설계
- 2장. 화면설계
* 사용자 인터페이스(UI)
★ 사용자 인터페이스 : 사용자가 시스템을 편리하게 활용하기 위한 매개체
* 인터페이스 : 각 사용자와 시스템 간의 매개체 기능을 하는 모든것들
=> 사용자와 시스템은 서로 정보를 주고 받는데 이걸 처리하는 방식이 서로 다르기 때문에 이 차이를 해석해 줄 장치가 필요하다 => 여기에 적용 되는 모든 장치나 소프트웨어들이다.
EX) - 컴퓨터 메인보드 <-> 저장장치 간의 하드웨어적인 연결방식
- 스마트폰 OR 태블릿PC <-> 터치입력
- 3가지 분야로 나눈다
1. 구성
2. 기능
3. 제어
- 특징
1. 사용자의 만족도에 가장 큰 영향을 미치는 요소이다.(**) =>가장많이 변경된다.
2. 가독성을 높임 / 작업시간 단축 / 이해도 상승
3. 최소한의 노력으로 원하는 결과를 얻을 수 있게 한다.
4. 수행결과의 오류를 줄인다 / 구체적인 방법을 제시한다.
5. 정보 제공자와 공급자 간의 매개역할
6. 소프트웨어 아키텍처를 반드시 숙지해야 한다.(**)
- 사용자 인터페이스의 구분
1. CLI(텍스트)
2. GUI(마우스)
3, NUI(말,행동)
- UI개발의 기본 원칙
1. 유연성
2. 직관성
3. 학습성
4. 유효성
- 사용자 인터페이스의 설계 지침
: - 사용자중심,일관성,단순성,결과 예측 가능,표준화,접근성
- 명확성,가시성,오류 발생 해결
* UI표준 및 지침
* 표준 : 공통으로 적용되는것
* 지침 : 꼭 지켜야 하는 것
* 웹 표준 : 웹상에서 지켜야할 표준
- 접근성 향상 : 누구나 동등하게 시스템을 이용할 수 있도록 하는 (**)
- 크로스 브라우징 : 어떤 환경의 인터넷 브라우저 에서도 같은 형태의 인터페이스를 나타낼 수 있어야 한다.
* 접근성의 지침
1. 인식(대체) : 누구나 대상을 판단할 수 있어야 한다.
2. 운용(포인팅) : 서비스 이용시 편해야 한다.
3. 이해(논리적) : 서비스 이용의 결과가 논리적으로 납득이 되어야 한다.
4. 견고함 : 제작에 필요한 문법을 준수하여 개발해야 한다.
** 모든 콘텐츠는 각적으로 구분 될 수 있도록 설계해야 한다.
용도를 정확하게 이해 할 수 있도록 텍스트를 제공해야 한다.
웹 서비스에서는 비표준 문법에 대한 확장성은 고려하지 않는다.
* UI 설계 도구
* 표준 및 지침에 따라 UI를 제작하기 위해서는 설계도가 필요하다.
: 설계도 => 미리보기가 가능하여 좀더 완성도 있는 소프트웨어를 개발할 수 있다.
* 설계도
1. 와이어프레임(Wireframe)
: 화면단위 대략적인 레이아웃을 구성하는 단계
2. 목업(Mockup)
: 실제화면과 유사한 형태로 만드는 단계 => 기능X,껍데기만 유사하게만든다.
3. 스토리보드(Story Board)
: 와이어프레임에다가 콘텐츠에 대한 설명과 콘텐츠의 이동경로를 정적(실제로 이동X)으로 나타낸다.
4. 프로토타입(Prototype)
: 기존의 설계에 상호작용,인터렉션을 적용한 => 실제로 화면이동이 가능한 동적인 형태,최종 결과물과 가장 유사한 형태 이다.
5. 유스케이스(Use Case)
: 사용자의 요구사항을 다이어그램 형식으로 완성하고 완성된 다이어그램에 대한 각각의 명세서(내용정리)를 작성하는 것
* UI 요구사항 확인
* 목표 정의
1. 개별 인터뷰 진행 : 사업적,기술적 요구사항을 이해한다.
2. 인터뷰 내용을 토대로 리서치 진행
3. 활동사항 협의
: - 목표 이해,필요한 예산 분배방법, 세부적인 계획,작업의 우선순위 지정
4. 요구사항 작성
: 실사용자 중심으로 다양한 의견을 수렴할 수 있도록 한다. => 작성된 요구사항을 기반으로 소프트웨어 구조를 파악할 수 있도록 하는 것
==> 1. UI요구사항 요소 확인
- 데이터 : 가장 먼저 확인, 특성을 기반으로 정리
- 기능 : 무엇을 실행하는지? 동사형으로 정리
- 품질 : 품질,서비스,감성적인 부분
- 제약 : 비용과 데드라인, 규제 등
2. 정황 시나리오 작성
- 6하원칙을 토대로 이야기 형식, 완성된 서비스를 상상
3. 요구사항 작성
- 완료된 정황 시나리오를 토대로 최종 요구사항을 작성한다.
* 품질 요구사항
* SW품질에 대한 국제 표준 지침 : ISO/IEC 9126
- 분류
1. 기능 : 적절,정확,호환,상호운용,보안 => 적절한 기능이 정확하게
2. 신뢰 : 성숙,회복,고장허용 => 고장나도 문제 없는지
3. 사용 : 이해,학습,운용,친밀 => 얼마나 쉽고 편한지
4. 효율 : 시간,자원 => 한정된 시간,자원으로 많은 일처리가 가능한지
5. 유지보수 : 분석,변경,시험,안정 => 개선 및 확장이 가능한지
6. 이식 : 설치,설치,대체,공존 => 다른 환경에서 적응이 가능한지
* UI프로토타입 제작 및 검토
* 프로토타입
: 실제로 동작하는 것처럼 테스트 할 수 있는 모델
=> 필수기능을 포함하지 최대한 간단하게 만들어 실 사용자가 테스트 해볼 수 있게끔 하 기능을 검증하여 수정,보완을 할 수 있게 만든 모델
- 시각적으로 이해가 쉬워 문제점을 발견하기에 수월하다.=> 인력과 시간을 소모하게 되고 제시된 기능들 이외에는 생략 될 가능성이 있어 주의 해야한다.
1. 페이퍼 타입(손으로)
: 저렴,즉시 그릴수 있다,단계가 간단하여 빠른 의사소통이 가능하다.
2. 디지털(SW로)
: 결가와 비슷,테스트 및 수정, 어렵다.
* 고려사항
- 계획 단계
: 1. 목적 : 개발의 목적을 확인
2. 환경 : 필요한 환경을 구성
3. 핵심UI : 핵심기능(아키텍처)을 나타낼 UI요소 지정
4. 인원 : 개발에 필요한 인원 할당
5. 검증 : 테스트 진행후 발생하는 이슈 해결
6. 가이드 : 가이드 작성
- 작성 단계
: 1. 범위 확인 : 핵심UI 요소의 범위를 최종 확인
2. 목표 확인 : 목표를 최종 확인
3. 자원 확인 : 소모되는 인력,시간 자원을 최종확인 후 UI작성
* UI제작 단계
1. 분석 : 요구사항 분석
2. 작성 : UI프로토타입 작성
3. 검증 : 작성된 프로토타입 테스트 및 이슈해결(피드백)
4. 승인 : 수정 및 승인
★ 테스트의 주체는 사용자라는 것 3,4단계는 계속 반복 될 수 있다.
* UI설계서 작성
* 설계서 작성과정
- 1. 표지 : 프로젝트나 시스템명을 적는다.
2. 개정 이력 : 초안을 작성한 뒤로 내용이 변경 될 때마다 이력을 적는것.=> 초안버전 1.0을 시작으로 0.1씩 증가시켜 값을 기록
3. 요구사항 정의서 : 요구사항 기록,각 요구사항의 반영여부도 함께 기록
4. 시스템 구조 : 사용자의 UI요구사항이 전체 시스템에 어떻게 적용되는지 나타낸다.
5. 사이트맵 : 시스템 구조를 바탕으로 콘텐츠를 메뉴별로 설계 => 완성후 추가로 상세 내용을 표 형태로 작성한다.
6. 프로세스 정의서 : 사용자 입장에서 사용자가 요구한 사항들 실제로 어떻게 진행되는지 작업 진행 순서위주로 정리
7. 화면 설계 : 각 UI화면별로 표지와 스토리보드로 구분해 설계하는 과정 => 표지 : 화면을 구분하기 위해 넣는다.
* UI유용성평가,상세설계,감성공학
* UI유용성평가 : 사용자 입장에서 얼마나 유용한지 나타낸것 => UI의 주 목적
- 실행차이(기능) : 불필요하거나 중복되는 기능이 있거나 쉽고 간편하지 않은 순서 등
- 결과차이(평가) : 즉각적이지 않은 피드백, 이해 또는 파악하기 어려운 경우
* 상세설계 : 앞서 작성한 설계서를 바탕으로 기능,구조,인터렉션(상호작용),예외처리 등의 내용이 담 시나리오를 작성 => 구체적으로 작성하고 순서소 형태로 작성하는게 좋다
- 시나리오 작성을 위해서는 일반규칙을 정해야 한다.
: UI및 레이아웃의 위치와 기능,인터렉션과 작업흐름(태스크),여러 예외적인 케이스에 대한 처리법 등을 일반규칙으로 정해놓은 뒤 세부적인 기능을 정의해 나간다.
* 감성공학
: - HCI : 편리하고 안전한 시스템을 개발,최적의 사용자 경험(UX)이 최종목표
- UX : 시스템 이용중 얻게되는 모든경험,주관전/심리적/정황성(상황에따라),UI(객관적 지표가 있는 편리성과 사용성)와 반대개념
- 감성공학 : 시스템을 통해 얻게 될 모든 감성을 고려하여 심리적,인간적으로 친화적인 개발을 할 수 있게끔 하는 것.