Ch6_01 UI 요구사항 확인

1. UI 요구사항 확인

 

1. UI의 개념

  A. 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체

  B. 정보 기기나 SW의 화면 등에서 사람이 접하게 되는 화면

 

2. UI유형

  A. CLI : 정적 텍스트 기반 인터페이스

  B. GUI : 그래픽 반응 기반 인터페이스

  C. NUI : 직관적 사용자 반응 기반 인터페이스 (신체 부위를 이용하는, 터치, 음성)

  D. OUI : 유기적 상호작용 기반 인터페이스 (현실에 존재하는 모든 사물이 입출력 장치로)

 

3. UI분야

  A. 물리적 제어 분야 : 정보 제공과 기능 전달을 위한 하드웨어 기반

  B. 디자인적 분야 : 콘텐츠의 정확하고 상세한 표현과 전체적 구성

  C. 기능적 분야 : 사용자의 편의성에 맞춰 쉽고 간편하게 사용 가능

 

4. UI 설계 원칙

  A. 직관성 : 누구나 쉽게 이해하고, 쉽게 사용할 수 있도록

  B. 유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록

  C. 학습성 : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있도록

  D. 유연성 : 사용자의 인터랙션을 최대한 포용하고 실수를 방지할 수 있도록

 

5. UI 설계 지침

  A. 사용자 중심

  B. 일관성

  C. 단순성

  D. 결과 예측 가능

  E. 가시성

  F. 표준화

  G. 접근성

  H. 명확성

  I. 오류 발생 해결

 

6. UI 요구사항 확인

  A. UI 요구사항 개요

    i. 사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준

    ii. 개발 과정 전체에 대한 기준, 개발 종료 및 검수의 기준

  B. UI 요구사항 구분

    i. 기능적 요구사항

    ii. 비기능적 요구사항

  C. UI 요구사항 확인

 

2. UI 표준

 

1. UI 표준 개념

  A. 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약

 

2. UI 표준 구성

  A. 전체적인 UX원칙

  B. 정책 및 철학

  C. UI 스타일 가이드

  D. UI 패턴 모델 정의 (CRUD 방식)

  E. UI 표준 수립을 위한 조직 구성

 

3. UI 표준 수립 시 고려사항

  A. 사용자가 불편해하지 않도록

  B. 많은 업무케이스를 포함

  C. 다양한 사용상황에 대처

  D. 표준 적용이 쉽도록 충분한 가이드와 활용 수단 제공

 

4. UI 스타일 가이드 구성

  A. UI 구동 환경의 정의

    i. 컴퓨터 OS 확인

    ii. 웹 브라우저 확인

    iii. 모니터 해상도 확인 (1280 1024 기본)

    iv. 프레임 세트 확인

      1. 프레임 세트 적용

  B. 레이아웃 정의

    i. 화면 구조 정의

    ii. 상단 메뉴 구성 정의

      1. 로고 구역

      2. 접속자 정보

      3. 바로 가기 메뉴

      4. 주 메뉴

    iii. 좌측 메뉴 구성 정의

    iv. 내용 구성 정의

    v. 하단 메뉴 구성 정의

    vi. 사용 환경에 맞춰 페이지 폭 정의

  C. 메뉴 내비게이션 정의

    i. 기본 내비게이션

    ii. 기본 내비게이션의 변형

    iii. 메뉴 구조가 2뎁스인 경우

    iv. 메뉴 구조가 복잡할 경우

  D. 공통표준화면 정의

  E. 기능 정의

  F. 구성요소 정의

    i. 그리드 : UI를 구성하는 방법 중 테이블 형태

    ii. 버튼 / 컨트롤 타입

    iii. Page 요소 : 폰트, 아이콘, 체크박스 등

    iv. 팝업 요소

    v. Alert 요소

 

5. UI 패턴 모델 정의

  A. CRUD 방식을 기반으로 데이터의 입출력을 처리하는 화면을 포함하여 오퍼레이션 방식에 대한 표준 절차 표시, 패턴모델 개발

  B. 패턴별 표준 개발 방법 정의

    i. 업무 화면 클라이언트 정의

    ii. 서버 컨트롤러 정의

    iii. 서버 메시지 및 예외 처리 정의 (시스템 에러 인포메이션)

    iv. 클라이언트 서버 간 데이터 변환 정의

    v. 기업 포털 연계 정의

    vi. 보고서 정의

    vii. 외부 컴포넌트 연계 정의

 

6. UI 표준 수립을 위한 조직의 구성

  A. 조직의 구성

    i. 조직 구성 및 역할 정의

    ii. 커뮤니케이션 방안 수립

 

3. UI 지침

 

1. UI 지침 개념 : UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부사항을 규정하는 가이드라인

 

2. UI 표준 적용을 위한 환경 분석

  A. 사용자 트렌드 분석

  B. 기능 및 설계 분석

    i. 기능 조작성 분석

    ii. 오류 방지 분석

    iii. 최소한의 조작으로 업무 처리 가능 여부 확인

    iv. UI의 정보 전달력 확인

 

3. UI 개발 목표 및 범위

  A. UI 개발 목표 및 범위 정의

    i. 경영진의 UI 관련 개발 요구사항 조사 및 정의

    ii. 자사-타사-사용자 분석 (3C 분석) 및 트렌드 분석

    iii. 관계자 간 개발 목표 협의 및 공유 워크샵

  B. UI개발을 위한 주요 기법

    i. 3C 분석 : 자사-타사-사용자 분석

    ii. SWOT 분석

    iii. 시나리오 플래닝 : 불확실성이 높은 상황 변화 사전 예측, 다양한 시나리오 설계하여 불확실성 제거

    iv. 사용자 테스트 : 사용자가 직접 제품 사용, 미리 작성된 시나리오에 맞추어 과제 수행 후 질문에 답함

    v. 워크샵 : 소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어 방법 서로 교환

 

4. 사용자 분석 및 니즈 조사

  A. 리서치 대상 선정 및 내용 설계

  B. 리서치 진행

  C. 리서치 결과 정리

 

5. 사용자 요구사항 도출

  A. 페르소나 정의 : 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자

  B. 콘셉트 모델 정의

  C. 사용자 요구사항 정의 : 요구사항 매트릭스, 정황 시나리오 제작

  D. UI 컨셉션

 

6. UI 상세설계

 

7. UI화면 디자인

 

8. UI 시연을 통한 사용성 검토 / 검증

 

9. 테스트, 배포 및 관리 : 사용성 테스트 수행

 

4. 스토리보드

 

1. 스토리보드 개념 : UI 화면 설계를 위해 정책이나 프로세스 및 콘텐츠의 구성, 와이퍼 프레임, 기능에 대한 정의, DB연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서

  A. 와이어 프레임 : 이해관계자들과의 화면 구성을 협의하거나 서비스간 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃 설계

  B. 스토리보드 : 정책, 프로세스, 콘텐츠 구성, 와이퍼 프레임, 기능 정의, DB 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물

  C. 프로토타입 : 정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용, 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형

 

2. 스토리보드 작성 절차

  A. 전체 개요 작성

  B. 서비스 흐름 작성

  C. 스타일 확정

  D. 메뉴별 화면 설계도 작성 및 상세설명

  E. 추가 관련 정보 작성

 

3. 스토리보드 작성 시 유의사항

  A. 일관된 기호의 표시

  B. 공통 영역의 정의

  C. 영역별 세부 설계

  D. 버전 업 관리

 

4. 스토리보드 작성 사례

 

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

 

1. UI 프로토타입 이해

  A. 프로토타입 개념 : 컴퓨터 시스템이나 SW의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품

  B. 프로토타입의 의의 : 추후 발생 가능한 오류들을 사전에 방지

  C. 장점 및 단점

    i. 장점 : 사용자 설득과 이해가 쉬움, 개발 기간 감소, 오류 발견

    ii. 단점 : 작업 시간 증가, 적절한 타협, 자원 소모

  D. UI 프로토타입 유형

    i. 아날로그 : 종이와 펜으로 화면 구조 스케치

    ii. 디지털 : 디지털 편집기, HTML 등의 프로토타이핑 도구를 이용해 화면의 구조를 만듬

 

2. UI 프로토타입 계획 및 작성 시 고려사항

  A. UI 프로토타입 계획 시 고려 사항

    i. 목표, 환경, 일정, 범위, 인원, 아키텍처 검증, 이슈 및 해결, 가이드 확정, 개발 생산성, 결과 시연

  B. UI 프로토타입 작성 시 고려 사항

    i. 계획, 범위, 목표, 기간 및 비용, 산출물, 유의사항

 

3. UI 프로토타입 제작 및 검토 프로세스

  A. 소프트웨어 아키텍처 설계 원리 확인

  B. 프로토타입 유스케이스 작성

  C. UI 요구사항을 반영한 프로토타입 제작

  D. UI 적정성 검토