정보처리기사 - 6.화면설계

사용자 인터페이스(UI; User Interface)

• 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상적 매개체(넓은 의미)
• 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면(좁은 의미)

 

UI 유형 : CG NO

• CLI(Command Line Interface) : 명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스
• GUI(Graphical User Interface) : 그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스
• NUI(Natural User Interface) : 키보드나 마우스 없이 신체부위를 이용하는 사용자 인터페이스
• OUI(Organic User Interface) : 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 인터페이스

 

UI설계 원칙 : 직유학유

• 직관성(Intuitiveness) : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야함.
• 유효성(Efficiency) : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작
• 학습성(Learnability) : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작
• 유연성(Flexibility) : 사용자의 요구사항을 최대한 수용하고 실수를 방지할 수 있도록 제작

 

UI 설계 지침 : 사일단결 가표접명오

• 사용자 중심 : 사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공하며, 실사용자에 대한 이해가 바탕이 되어야함
• 일관성 : 버튼이나 조작방법을 사용자가 기억하기 쉽고 빠르게 습득할 수 있어야함
• 단순성 : 조작방법은 가장 간단하게 작동되도록 해야함
• 결과 예측 가능 : 작동시킬 기능만 보고도 결과 예측이 가능해야함
• 가시성 : 주요 기능을 메인화면에 노출하여 쉬운 조작이 가능하게 해야함
• 표준화 : 디자인을 표준화하여 기능구조의 선행 학습 이후 쉽게 사용가능해야 함
• 접근성 : 사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 함
• 명확성 : 사용자가 개념적으로 쉽게 인지해야 함
• 오류 발생 해결 : 사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야함

 

UI 요구사항

• 사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준
• 구분
  • 기능적 요구사항 : 시스템이 제공하는 기능, 서비스에 대한 요구사항
  • 비기능적 요구사항 : 사용성,효율성,신뢰성,유지보수성,재사용성 등 품질에 관한 요구사항

 

UI 품질 요구사항 : 기신사효유이

• 기능성(Functionality) : 실제 사용시 정확하지 않은 결과가 발생할 확률과 시스템의 동작 관찰 
  • 적절성,정밀성,상호운용성,보안성,호환성
• 신뢰성(Realiability): 일정한 시간, 작동되는 시간동안 의도하는 기능을 수행함을 보증
  • 성숙성, 고장 허용성, 회복성
• 사용성(Usability) : 사용자와 컴퓨터사이에 발생하는 어떤한 행위를 정확하고 쉽게 인지할 수 있는
  • 이해성, 학습성, 운용성
• 효율성(Efficiency): 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가
  • 시간 효율성, 자원 효율성
• 유지보수성(Maintainability): 요구사항 개선, 확장에 있어 얼마나 용이한가
  • 분석성, 변경성, 안정성, 시험성
• 이식성(Portability) : 다른 운영체제에서도 얼마나 쉽게 적용이 가능한가
  • 적용성, 설치성, 대체성

 

UI개발을 위한 주요 기법

• 3C 분석 : 고객(Customer), 자사(Comapny), 경쟁사(Competitor) 비교하고 분석
• SWOT 분석 : 기업 내부 환경과 외부환경을 분석해 Strength(강점), Weakness(약점), Opportunity(기회), Threat(위협) 요인을 규정하고 이를 토대로 경영 전략 수립
• 시나리오 플래닝(Scenario Planning) : 상황변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법
• 사용성 테스트(Useability Test) : 사용자가 직접제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트
• 워크숍(Workshop) : 소집단 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어들을 서로 교환하고 검토하는 세미나

 

UI화면설계

• 스토리보드 : 정책, 프로세스, 와이어프레임, 기능정의, 데이터베이스 연동 등 서비스구축을 위한 정보가 수록된 문서, 디자이너와 개발자가 최종적으로 참고하는 산출 문서
• 와이어 프레임 : 화면 단위의 레이아웃을 설계하는 작업
• 프로토타입 : 정적인 화면(와이어프레임, 스토리보드)에 동적 효과를 적용해 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형

 

 

UML(Unified Modeling Language)

• 객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화 할때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어

UML구성요소

• 사물(Things) : 추상적인 개념으로 주제를 나타내는 요소
• 관계(Relationships) : 사물의 의미를 확장하고 명확히 하는 요소
• 다이어그램(Diagram) : 사물과 관계를 모아 그림으로 표현한 형태

UML 다이어그램

• 구조적 다이어그램(Structural Diagram) / 정적(Static) 다이어그램
  • 클래스(Class) : 클래스 간 정적인 관계를 표현
  • 객체(Object) : 클래스에 속한 사물, 인스턴스
  • 컴포넌트(Component) : 컴포넌트와 그들 사이 의존 관계
  • 배치(Deployment) : 컴포넌트 사이의 종속성, 물리적 요소들의 위치
  • 복합체 구조(Compositie Structure) : 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부구조를 표현
  • 패키지(Package) : 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계를 표현
• 행위적(Behavioral) 다이어그램 / 동적(Dynamic) 다이어그램
  • 유스케이스 : 시스템 외부 요소를 사용자의 관점에서 표현
  • 시퀀스 : 시간적 개념을 중심으로 메시지 흐름으로 표현
  • 커뮤니케이션 : 객체들이 주고받는 메시지를 표현하고 객체 간의 연관까지 표현
  • 상태 : 상태가 어떻게 변화하는지 표현
  • 활동 : 어떤 기능을 수행하는지, 처리 로직이나 처리 흐름
  • 타이밍 : 객체 상태 변화와 시간 제약을 명시적으로 표현

 

UML 확장 모델의 스테레오 타입

• '<< >>'(길러멧; Guillemet) 기호를 사용하여 표현

 

클래스 다이어그램

• 객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
• 클래스 다이어그램 구성 요소
  • 클래스(Class) : 공통의 속성, 연산(메서드), 관계, 의미를 공유하는 객체들의 집합
  • 속성(Attribute) : 클래스의 구조적 특성에 이름을 붙인 것
  • 연산(Operation), 메서드(Method) : 클래스의 행위적 특징
  • 접근 제어자(Access Modifier)
    • -  : 클래스 내부 접근만 허용(private)
    • + : 클래스 외부 접근을 허용(public)
    • # : 동일 패키지/파생 클래스에서 접근가능(protected)
    • ~ : 동일 패키지 클래스에서 접근가능(default)
• 클래스 간의 관계 
  • 연관(Association) 관계 : 실선, 2개 이상의 사물이 서로 관련되어 있는 상태
  • 의존(Dependency) 관계 : 점선 화살표, 서로 연관은 있으나 필요에 따라 짧은 시간동안만 연관을 유지
  • 일반화(Generalization) 관계 : 속이 빈 화살표, 부모-자식, 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현
  • 실체화(Realization) 관계 : 추상 클래스나 인터페이스를 상속받아 자식 클래스가 추상 메서드를 구현할 때 사용
  • 포함(Composition)관계 : 속이 채워진 마름모, 영구적이고 집합 관계보다 더 강한 관계로 구성
  • 집합(Aggregation)관계 : 하나의 객체에 여러 개의 독립적인 객채들이 구성되는 단계

 

유스케이스 다이어그램(Usecase Diagram)

• 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램
• 유스케이스 다이어그램 구성요소
  • 유스케이스(Usecase) : 시스템이 제공해야 하는 서비스, 기능
  • 엑터(Actor) : 사용자가 시스템에 대해 수행하는 역할
  • 시스템
  • 시나리오
  • 이벤트의 흐름
• 유스케이스 다이어그램의 관계
  • 포함관계
  • 확장관계
  • 일반화관계

 

UI 시나리오 문서의 작성 요건 

• 완일이가 추수
• 완전성(Complete) : UI 시나리오는 누락이 없어야 하고, 최대한 빠짐없이 가능한 상세하게 기술
• 일관성(Consistent) : 서비스에 대한 목표, 시스템 및 사용자의 요구사항에 일관성이 있어야 하고, 모든 문서의 UI스타일을 일관적으로 구성
• 이해성(Understandable) : 처음 접하는 사람도 이해하기 쉽도록 구성하고 설명해야 하고, 이해하지 못하는 추상적인 표현이나 이해하기 어려운 용어는 사용하지 않아야 함
• 가독성(Redable) : 문서를 쉽게 읽을 수 있어야 하고, 표준화된 템플릿을 작성하여 사용
• 추적 용이성(Traceable) : 쉽게 추적이 가능해야 하고, 변경 사항들이 언제,어디서,어떤 부분들이 왜 발생하였는지 추적이 쉬워야 함
• 수정 용이성(Modifiable) : 쉽게 변경이 가능해야 하고, 수정 또는 개선 사항을 시나리오에 반영하는데 있어 쉽게 적용할 수 있어야 함.