화면 설계

UI 요구사항 확인

User Inferface

사용자가 시스템을 원활히 사용하도록 돕는 장치/소프트웨어

사용자와 컴퓨터 상호 간의 소통을 원할히 하게 도와주는 연계 작업

 

UI의 종류

CLI(Command Line Interface) : 테스트 기반 인터페이스

GUI(Graphic User Interface) : 그래픽 반응 기반 인터페이스

NUI(Natural User Interface) : 직관적 사용자 반응 인터페이스(터치, 음성등)

 

UI의 세 가지 분야

 

 

 

UI의 설계 원칙

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

유효성 : 사용자의 목적을 정확하게 달성할 수 있도록

학습성 : 누구나 쉽게 배우고 익힐 수 있도록

유연성 : 사용자의 요구사항을 최대한 수용, 오류를 최소화 하도록

 

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

사용자 중심 : 사용자가 이해하기 편하고 쉽게 사용할 수 있는 환경을 제공하며 실사용자에 대한 이해가 바탕이 되어야 함

일관성 : 버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠른 습득이 가능하게 설계하여야 함

단순성 : 조작 방법은 가장 간단하게 작동이 가능하도록 하여 인지적 부담을 감소시켜야 함

결과 예측 기능 : 작동시킬 기능만 보고도 결과 예측이 가능하여아 함

가시성 : 주요 기능을 메인 화면에 누출하여 조작이 쉽도록 하여야 함

표준화 : 디자인을 표준화하여 기능 구조의 선행 학습 이후 쉽게 사용할 수 있어야 함

접근성 : 사용자의 직무, 연령, 성별 등 다양한 계층을 수용하여야 함

명확성 : 사용자가 개념적으로 쉽게 인지하여야 함

오류 발생 해결 : 사용자가 오류에 대한 상황을 인지할 수 있어야 함

 

UI가 필요한 이유

오류 최소화, 적은 노력으로 원하는 결과를 얻도록

막연한 기능에 대해 구체적인 방법 제시

작업 시간 단축, 이해도 향상

정보 제공자와 공급자의 매개 역할

 

UI 요구사항 확인

기능적 요구사항	비기능적 요구사항
1) 시스템의 입력 2) 시스템의 출력 3) 시스템이 저장할 데이터 4) 시스템이 수행할 연산 5) 기타 요구사항	1) 품질 - 사용성, 효율성, 신뢰성, 유지 보수성, 재사용성 3) 환경 - 플랫폼, 사용 기술 3) 프로젝트 계획 - 비용, 일정

 

UI 표준 설계 과정

UI 표준 : 전체 시스템에 공통으로 적용되는 화면구성 등에 관한 규약

 

1. UI 스타일 가이드를 정의

(1) 구동 환경을 정의

    (가) 컴퓨터 OS를 확인

           : 기업이 운영하고 있는 업무와 보안성이 높은 운영 체제(OS)를 확인

    (나) 웹 브라우저를 확인

           : 웹 브라우저는 익스플로러, 크롬, x-internet 등 기업 환경에 가장 적합한 것으로 확장함

    (다) 모니터 해상도를 확인

           : 모니터 해상도는 1280px & 1024px을 표준으로 함

    (라) 프레임 세트를 확인

           :  각 영역별(Top, Left, Contents 영역) 프레임을 구분해 적용

 

구분	Fame 구분	One Frame
Contents 구성	프레임별 Contents 구성 각 프레임 페이지에서 메뉴, 배너 구성 등 일괄 적용됨	전체 페이지에서 각 area별 Contents를 자유롭게 구성
Design	각 Fame별 이미지 적용	전체 페이지에 적용되는 이미지 기능
속도	변경되는 프레임만 새로 고침	페이지 전체가 새로 로딩
스크롤

 

(2) 레이아웃을 정의

   (가) 화면 구조를 정의

          : 기본 배치(Layout)는 크게 Top, Left, Contents 영역의 3개 부분으로 설계

   (나) 상단 메뉴 구성(Top Area)을 정의

          : 필수적으로 적용하는 사항.

            시스템 로고(System Logo), 로그인 사용자(Login User), 바로가기 메뉴(Quick Menu), 주 메뉴(Main 

             Navigation).

 

    (다) 좌측 메뉴 구성(Left Area)을 정의

           : 선택적으로 적용하는 사항.

              서브 메뉴(Sub Menu), 배너(Banner)

 

    (라) 내용 구성(Contents Area)을 정의

           : 필수적으로 적용하는 사항.

              구성 요소로는 메인 이미지(Main Image), 시스템별로 구성 콘텐츠.

    (마) 하단 메뉴 구성(Footer Area을 정의

           : 선택적으로 적용하는 사항.

              구성 요소로는 회사 CJ, Copyright가 있음

    (바) 사용 환경에 맞춰 페이지 폭을 정의

 

(3) 네비게이션을 정의

    (가) 메뉴 네비게이션(Menu navigation)을 정의

 

(4) 기능을 정의

    (가) 프로세스 모델링(Process Modeling)을 정의 - 업무 과정에서 일어나는 모든 활동

    (나) 데이터 모델(Data Model)을 정의 - 적용할 업무 영역에 필요한 데이터 엔티티 식별

 

(5) 구성 요소를 정의

     (가) 그리드를 정의 - 테이블 형태로 구성

     (나) 버튼을 정의 - 기능 버튼, 검색 버튼, 그리드(Grid) 관련 버튼, 기타 버튼

 

2. UI 패턴 모델을 정의

(1) 업무 화면 클라이언트(Client)를 정의

(2) 서버 컨트롤러(Controller)를 정의

(3) 서버 메시지 및 예외(Exception) 처리를 정의

유형	설명
S(System)	시스템 오류로 인해 발생. 런타임 에외를 전달할 때 사용되며, 모든 트랜잭션은 자동으로 복원(Rollback)
E(Error)	업무 처리 로직의 일환으로 애플리케이션 예외(Application Exception)를 throw할 때 사용 이때 모든 트랜잭션은 자동으로 복원 (ex: E0001: 금액이 마이너스 값)
I(Information)	정상저인 업무 처리 결과나 관련 정보에 대한 확인 메시지를 사용자에게 알려주고자 할 때 사용함 이때 모든 트랜잭션은 실행(commit) (ex: 고객 정보가 성공적으로 조회)

 

(4) 클라이언트(Client) - 서버 간 데이터 변환을 정의

(5) EP(Enterprise Portal) 연계를 정의 - EP-SSO(Single Sign On)-Client 간 연계 방안

(6) 보고서를 정의 - 클라이언트와 리프트 솔루션 간의 연계 방식

(7) 신 클라이언트(Thin Client)에 외부 컴포넌트 연계를 정의

      - 외부 UI 컴포넌트를 도입할 시 서버와의 연계 방식을 결정

      - 중앙 서버에 있는 여러 소프트웨어 및 자원들을 사용자에게 보여주는 인터페이스로 기능을 한정시킨 단만기를 의미

      - 단말기 자체에제는 연산을 위한 중앙처리정치나 저장을 위한 하드디스크 등이 거의 탑재되지 않거나 최소화되어 있음

 

3. UI 표준 수립을 위한 조작을 구성

(1) 조직 구성 및 역할을 정의

(2) 커뮤니케이션 방안을 수립

 

4. UI표준을 위한 환경을 분석

(1) 사용자 트렌드를 분석

(2) 기능 및 설계를 분석

 

UI의 설계 원칙

프로토타입(Prototype)의 뜻

: "새로운 컴퓨터 시스템이나 소프트웨어의 설계 도는 성능, 구현 가능성, 운영 가능성을 평가하거나 요구 사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간랸힌 형태로 구현한 시제품"

 

프로토타입의 의미

: 사전에 프로토타입을 먼저 제작하고 이를 바탕으로 햘후 설계될 UI의 작정성을 평가해 수정 보완함으로써 추후 발생 가능한 오류들을 사전에 방지하여 시스템 설계 및 개발에 소요되는 총 비용 및 노력을 절감할 수 있음

 

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

(1) 장점

   (가) 사용자 설득과 이해가 쉬움

   (나) 개발 시간이 감소

   (다) 오류를 사전에 발견할 수 있음

 

(2) 단점

   (가) 너무 많은 수정 과정으 거치다면 오히려 작업 시간이 늘어날 수 있음

          사용자의 요구사항은 가능한 들어주되 적절한 타협이 필요

   (나) 자원 효율성 관점에서 보면 필요 이상으로 자원을 많이 소모

   (다) 정확한 문서 작업이 생략될 수 있음

 

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