[2020 정보처리기사 실기 - 화면설계] 1. UI요구사항 확인하기

 

 

 

* 화면설계의 개요

 

1) 화면설계

   - 화면UI란 사람과 시스템간의 접정이 되고, 사용자와 각각의 시스템 사이의 정보채널

   - 화면 설계는 사용하기 편한 시스템을 만들기 위해 사용자와 시스템 사이의 상호정보교환의 방법을 체계화하여 설계 디자인

 

2) 화면설계의 방향

   - 사용자 중심

   - 단순한 설계

   - 현명한 색상 사용

   - 일관성 유지

   - 사용자 경험 지식화

   - 지속적인 테스트 및 반복

 

3) UI의 유형

   - 명령어 방식 : 컴퓨터에 명령문을 직접 입력하는 방식

                               장점 - 유연성, 반복적 작업에 유용하게 이용

                               단점 - 명령어 암기 필요, 작업지시에 도움이 되는 정보가 없어서 전문성을 갖춘 이용자에게 적합

   - 메뉴방식 : 기억보다 인식에 의존, 메뉴 아이템의 집합과 구성이 이용자에게 유용한 암시를 제공

   - 자연언어 이용방식 : 자연언어의 모호성이 혼동을 가져옴, 이용 가능한 영역에 제한이 있음

   - 윔프 WIMP : 윈도우에 있는 기본 사용자 인터페이스를 이용하는 시스템

   - 포인터와 클릭 : 하이퍼텍스트를 클릭하고 실행

 

4) 그래픽 기반 사용자 인터페이스 GUI 구성요소

   - 윈도우 : 응용 프로그램에 의행 결정된 내용을 보여줌, 키보드나 마우스를 통한 데이터 입력과 결과를 보여줌

   - 아이콘 : 의미를 가진 그림, 오브젝트 등, 어떤 종류의 정보를 기호로 표현한 상징적 그림

   - 메뉴 : 명령어를 입력하지 않고 마우스나 키보드로 명령어를 선택할 수 있도록 하는 조직 순서 알람표

                      테어오프메뉴 - 메뉴바를 드래그하여 임의의 장소에 배치할 수 있는 메뉴

   - 포인팅 : 마우스나 트랙볼 같은 장비로 화면의 아이콘이나 메뉴 윈도우등 선택 실행하는 포인팅 장비

 

5) 화면 설계 수행 절차

   - UI 표준 수립 : 전사 UI  표준 참고하고, 프로젝트 특성을 반영하여 UI스타일가이드, UI패턴모델, UI적용 정책 기준 등 정의

   - UI 요구사항 분석 : 기능 요구사항 도출, 사용자가 조작과 제어를 위한 화면이 필요한 요구사항을 도출, 상세화, 유즈케이스 작성

   - 프로토타입 작성 : 주요화면에 대한 프로토타입을 작성하고 구현 화면에 대한 개념 모델링, 사용자 요구사항 검증

   - UI 흐름 설계 : 업무흐름도, 사용자 유즈케이스 작성으로 단위 기능 목록 정의, 사용자 요구사항 검증

   - UI 상세 설계 : 전체 시스템에 대한 UI 구조 및 메뉴구조 설계, 각 화면에 대한 상세설계

   - UI 검토 및 보안 : UI설계 내역에 대한 검토, 개선사항 도출 후 보완 검증을 반복

 

 

* UI 스타일 가이드 작성

 

1) UI 스타일 가이드

   - 사용자 인터페이스를 만들 때 기준이 되는 각종 규칙의 집합

   - 필요성 : 시스템의 화면이 많아지고 복잡해짐

                      다수의 디자이너와 개발자가 작업을 수행

                      화면의 일관성 유지가 필요

                      화면을 비즈니스 목적에 부합하도록 최적화 필요

                      사용자 경험을 표준화하여 제공

 

2) 구성

   - introduction : 스타일 가이드의 구성 및 활용 정책 기본환경 규정

   - basic rule : 화면을 구성하는 폰트와 컬러 정의

   - layout : 화면의 기본 구조 정의. 유형은 정보전달형, 서비스 제공형, 커뮤니티형 등으로 분류하여 정의

   - elements : 화면 구성에 필요한 텍스트, 아이콘, 네비게이션, 버튼, 테블릿 등을 정의

   - 정책 : 조직에서 스타일 가이드를 관리 및 운영하는 정책 규정

   - 기본환경구성 : UI 설계를 하는 용량 및 브라우저의 환경을 규정

  

3) 고려사항

   - 전사 UI스타일 가이드를 충분히 검토 후 전사 UI 스타일가이드의 기준을 충족

   - 전사의 아이덴티티를 준수하는 방향에서 프로젝트 특성에 맞는 화면 디자인 고려

 

 

 

* UI 요구사항 정의

 

1) 요구사항

   - 사용자가 정보시스템을 구축하여 얻고자 하는 업무수행의 기준을 의미

   - 시스템 개발 완료 승은에 대한 기준이고, 분석 설계 구현에 대한 기준, 테스트의 기준

   - 요구사항의 7가지 요건 : 명확성, 정확성, 완전성, 일관성, 실현가능성, 추적성, 검증성

   - 요구사항의 분류 

     기능적 요구사항 : 입출력 및 처리과정, SW가 가져야하는 기능적 속성, 주로 사용자가 사용하는 기능

     비기능적 요구사항 : 제품의 품질 기준 등을 만족하기 위한 SW의 성능 용이성 안전성 등, 시스템 기능에 관련되지 않은 사항

   - 요구사항 명세서의 구성 : 요구사항 ID, 요구사항 명, 상세 요구사항 내용, 제약사항, 요청자, 수용여부

 

 

2) UI 요구사항 작성

   - 기능요구사항 중에서 사용자가 활용할 기능요소를 UI 요구사항으로 도출하여 별도의 명세서 작성

   - 고려사항 

       기능 요구사항 중 사용자가 직접 활용하는 화면을 포함

       식별단계에서 관련된 기능 내역, 이벤트 내역, 입출력 데이터 항목 등 상세하게 파악

       UI 요구사항을 상세화하고 분할하여 화면 단위 정의

 

 

 

* UI 유즈케이스 정의

 

1) UI 유스케이스

   - 유스케이스는 사용자가 직접 정보시스템을 통해 처리하기 위한 기능을 사용자 관점에서 상세하게 기술한 산출물

   - 유스케이스는 기존 분석단계에서 작성된 대부분의 사용자 유스케이스 포함

   - UI 유스케이스는 유스케이스 기술서, 유스케이스 다이어그램으로 구성

   - 유스케이스 기술서 : 액터를 중심으로 수행흐름에 따라 상세하게 기술한 문서

   - 유스케이스 다이어그램 : 유스케이스 기술서를 도식화, 각 기능단위로 기능과 관련된 외부요소를 다이어그램으로 표기

 

2) UI 유스케이스 기술서 작성

   - UI 유스케이스 작성 목적 : 각 기능의 외부요소와의 관계를 기능흐름에 따라 정리하여 화면에 필요한 요소 식별

   - UI 유스케이스 기술서 작성

      유스케이스 명, 작업 흐름(정상흐름, 대치흐름, 예외흐름), 시나리오(특정 예) 등으로 구성

 

3) UI 유스케이스 다이어그램 작성

   - UI 유스케이스 다이어그램 구성요소

      시스템 : 만들고자하는 시스템의 범위

      액터 : 시스템 외부에서 시스템과 상ㅇ호작용하는 사람 또는 다른 시스템

      유스케이스 : 시스템이 액터에게 제공해야하는 기능의 집합

      관계 : 액터와 유스케이스 사이의 의미있는 관계

   - UI 유스케이스 다이어그램 작성 절차

      액터  식별 : 사용자, 외부시스템 식별

      유스케이스 식별 : 액터가 요구사하는 시스템/정보 식별, 액터가 시스템과 상호작용하는 행위 식별

      관계 정의 : 액터 간, 유스케이스 간의 일반화 정의

 

 

* 프로토타입 작성

 

1) 프로토타입

   - 새로운 컴퓨터 시스템이나 SW 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나

      요구사항을 좀 더 잘 이해하고 결정하기 위해 전체적인 기능을 간략하게 구현한 시제품

   - 사전에 프로토타입 먼저 제작 후 이를 바탕으로 향후 설계될 UI의 적정성을 평가하여 수정 보완함

      사용자의 요구사항 검증과 추후 발생 가능한 오류를 사전에 방지

   - 장점 : 사용자 설득과 이해가 쉬움, 개발시간 감소, 오류를 사전에 발견

   - 단점 : 너무 많은 수정 -> 작업 시간 늘어남, 자원 효율성 관점에서 필요 이상으로 자원 소모, 정확한 문서작업 생략 가능성

 

2) 프로토타입의 유형

   - 종이 프로토타입 

     종이를 이용해서 수행한 프로토타입

     장점 : 짧은 시간에 만듦, 아이디어 테스팅에 적절, 비용이 저렴, 그룹으로 함께 일을 하여 유대감 강화

     단점 : 디지털 시스템을 대체하기엔 사용성 데이터 수집 및 표현 한계, 정확히 표현하고 테스트할 수 없음

   - 디지털 프로토타입

     소프트웨어를 이용하여 수행한 프로토타입

     장점 : 최종 제품과 비슷한 환경과 인터랙션 하는지 테스트 가능, 유동적, HTML보다 제작 속도 빠름

     단점 : 소프트웨어를 배워야 함, 그대로 사용할 수 없고 디자인을 코드로 변환해야 함

   - HTML 프로토타입

     HTML 코딩을 통해 수행한 프로토타입

     장점 : 모든 OS와 기기에서 테스트 가능, 별도의 외부 SW 불필요, 별도의 프로토타이핑 SW 살 필요 없어서 경제적

     단점 : HTML 코딩 실력 필요, 자신이 없으면 별도 프로토타이핑 SW 쓰는 것이 바람직

 

3) 프로토타입 작성 방안

   - 종이 프로토타입 : 종이와 펜으로 UI 요구사항을 바탕으로 구상, 화면에 표현될 각 요소 설계

   - 디지털 프로토타입 실행 : 종이 프로토타입을 기반으로 파워포인트 등 프로토타입 SW를 이용하여 수행

                                                      종이 프로토타입에서 구상한 입력요소, 입력방법, 배치방법 구체화

   - HTML 프로토타입 실행 : 종이, 디지털 프로토타입을 기반으로 수행

                                                    화면구조와 구성요소 파악, HTML 다양한 태그로 화면 레이아웃 구상,

                                                    적정한 HTML 구성요소 이용해서 UI표현, 작성 후 브라우저를 통해 구성요소와 조작 방법 적정성 확인

   - UI 적정성 검토 및 보완 : 구현된 UI 화면의 구성요소가 사용자에게 쉽게 인지되고 이해되는 지

                                                   화면의 네비게이션 등 화면조작 과정에서 편의성을 확보했는지 점검

                                                   수행한 키조작 결과를 사용자가 빠르게 인지가 가능한 지 점검

 

 

4) 프로토타입 작성 시 고려사항

   - 프로토타입 범위 확인 : 프로젝트 범위나 리스크 상황 등 주변 여건을 감안하여 정함

   - 프로토타입 목표 확인 : 얻고자 하는 목표, 기능/성능/개발환경 중 무엇에 관련된 것인지 명확하게 준비하고 진행

   - 프로토타입 기간 및 비용 확인 : 투입되는 기간 비용 최소화

   - 프로토타입 산출물 확인 : 실제 개발에 그대로 참조될 수 있는 수준

 

 

---