2022 정보처리기사 실기 Chapter 02 화면 설계

01 UI 요구사항 확인

▶ UI, UX 개념

(UI와 UX 개념 매우 중요!! )

• UI(User Interface; 사용자 인터페이스): 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체/좁은 의미에서 소프트웨어의 화면 등에서 사람이 접하게 되는 화면
• UX(User Experience; 사용자 경험): 제품, 시스템, 서비스 등을 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 총체적 경험을 의미

▶UI 유형

=> CG NO(CUI, GUI, NUI, OUI)

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

▶ UI 설계 원칙

=> 직유학유

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

▶ UI 설계 지침

=> 사일단결 가표접명오

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

▶ UI 품질 요구사항(ISO/IEC 9126 기반)

=> 기신사효유이

• 기능성(Functionality)
  • 적절성(Suitability): 소프트웨어 제품이 주어진 작업과 사용자의 목표에 필요 적절한 기능들을 제공해 줄 수 있는 소프트웨어의 능력
  • 정밀성(Accuracy): 소프트웨어 제품이 요구되는 정확도로 올바른 결과를 산출할 수 있는 능력
  • 상호 운용성(Interoperability): 소프트웨어 제품이 특정 시스템과 상호 작용하여 운영될 수 있는 능력
  • 보안성(Security): 비인가된 접근을 차단하고, 우연 또는 고의적인 접근을 인지하여 대처할 수 있는 능력
  • 호환성(Compliance): 소프트웨어 제품이 비슷한 환경에서 연관된 표준, 관례 및 규정을 준수하는 능력
• 신뢰성(Reliability)
  • 성숙성
  • 고장 허용성
  • 회복성
• 사용성(Usability)
  • 이해성(Understandability): 소프트웨어의 논리적인 개념과 적용 가능성을 구분하는 데 필요한 사용자의 노력 정도에 따른 소프트웨어 특성
  • 학습성(Learnability): 소프트웨어 애플리케이션 학습에 필요한 사용자의 노력 정도에 따른 특성
  • 운용성(Operability): 소프트웨어의 운용과 운용 통제에 필요한 사용자의 노력 정도에 따른 특성
• 효율성(Efficiency)
  • 시간 효율성
  • 자원 효율성
• 유지보수성(Maintainability) 
  • 분석성
  • 변경성
  • 안정성
  • 시험성
• 이식성(Portability)
  • 적용성
  • 설치성
  • 대체성

▶ UI 표준 구성 

=> 액정 스패조

• 전체적인 UX 원칙: 사용자의 관점에서 사용자의 업무를 효율적으로 수행할 수 잇는 UX 원칙 정의
• 정책 및 철학: 조직의 목표나 정체성을 포함하는 정책 및 철학 설정
• UI 스타일 가이드: UI에 대한 구동 환경 및 레이아웃 등을 정의
• UI 패턴 모델 정의: CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의
• UI 표준 수립을 위한 조직 구성: UI 팀 및 표준 개발팀을 주축으로 추진 조직 구성

▶ UI 개발을 위한 주요 기법

• 3C 분석: 고객(Customer), 경쟁하고 있는 자사(Company), 경쟁사(Competitor)를 비교 분석 -> 자사를 어떻게 차별화하여 경쟁에서 이길 것인가를 분석하는 기법
• SWOT 분석: Strength(강점), Weakness(약점), Opportunity(기회), Threat(위협) 요인을 규정 -> 이를 토대로 경영 전략을 수립하는 방법
• 시나리오 플래닝(Scenario Planning): 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략 방법
• 사용성 테스트(Usability Test): 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트
• 워크숍(Workshop)

▶ UI 화면 설계 구분

=> 와스프

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

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

02 UI 설계

▶UML(Unified Modeling Language)

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

▶ UML 구성요소

=> 사관다; 사물, 관계, 다이어그램

▶ UML 특성

=> 가구명문

• 가시화 언어: 개념 모델 작성 시 오류가 적고 의사소통이 용이
• 구축 언어: 다양한 프로그래밍 언어로 실행 시스템의 예측 가능/UML을 소스코드로 변환하여 구축 가능, 
• 명세화 언어: 정확한 모델 제시, 완전한 모델 작성 가능
• 문서화 언어: 시스템에 대한 평가 및 의사소통의 문서

▶ UML 다이어그램

• 구조적 다이어그램(=정적 다이어그램) => 클객 컴배 복패
  • 클래스: 클래스의 속성 및 연산과 클래스 간 정적 관계를 표현한 다이어그램
  • 객체 : 클래스에 속한 사물(객체)를 즉, 인스턴스(Instance)를 특정 시점의 객체와 객체 사이의 관계로 표현한 다이어그램
  • 컴포넌트: 컴포넌트와 그들 사이의 의존 관계
  • 배치(Deployment): 컴포넌트 사이의 종속성, 물리적 요소들의 위치
  • 복합체 구조(Composite Structure): 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램
  • 패키지: 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계, 서로 다른 패키지들 사이의 의존 관계 표현
• 행위적 다이어그램(=동적 다이어그램) => 유시커 상활타
  • 유스케이스: 시스템이 제공하고 있는 기능 관련된 외부 요소를 사용자의 관점에서 표현
  • 시퀀스(Sequence): 객체 간 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현
  • 커뮤니케이션: 동작에 참여하는 객체들이 주고받는 메시지, 객체 간의 연관
  • 상태(State): 상호작용에 따라 상태가 어떻게 변화하는지
  • 활동(Activity): 어떤 기능을 수행하는지, 객체의 처리 로직, 조건에 따른 처리의 흐름
  • 타이밍: 객체 상태 변화와 시간 제약을 명시적으로 표현

▶ 스테레오 타입

UML의 기본적 요소 이외의 새로운 요소를 만들어내기 위한 확장 메커니즘 << >>

UML의 스테레오 타입은 길러멧 사용!

• <<include>>: 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함관계
• <<extend>>: 다른 유스케이스를 실행할 수도 있고, 그렇지 않을 수도 있는 확장관계
• <<interface>>
• <<entity>>
• <<boundary>>
• <<control>>

▶ UML의 유형

1. 클래스 다이어그램

• 클래스의 구성요소
  • 클래스, 속성, 연산(메서드), 접근 제어자 
• 클래스 간의 관계 => 연의 일실 포집
  • 연관관계(Association): 클래스가 서로 개념적으로 연결, 실선 연결, 방향성 화살표, 양방향인 경우 화살표 생략
  • 의존관계(Dependency): 사물 사이에 서로 연관은 있으나 필요에 따라 서로에게 영향을 주는 짧은 시간동안만 연관을 유지하는 관계/영향 주는 사물 --> 영향 받는 사물, 점선 화살표
  • 일반화 관계(Generalization): 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지 표현/구체적(하위)인 사물 ~ 일반적(상위)인 사물 쪽으로 속이 빈 화살표로 연결
  • 실체화 관계(Realization): 추상 클래스나 인터페이스를 상속받아 자식 클래스가 추상 메서드를 구현할 때 사용/속이 빈 화살표, 실선 extends/속이 빈 화살표, 점선 implements
  • 포함(=복합) 관계(Composition): 영구적이고, 집합 관계보다 더 강한 관계로 구성/포함되는 쪽에서 포함하는 쪽(Whole)으로 속이 채워진 마름모 연결(포함 하는 사물의 변화가 포함되는 사물에게 영향으로 미치는 관계)
  • 집합 관계(Aggregation): 하나의 객체에 여러 개의 독립적인 객체들이 구성되는 관계/포함되는 쪽에서 포함하는 쪽(Whole)으로 속이 채워진 마름모 연결

2. 유스케이스 다이어그램

시스템이 제공하고 있는 기능 관련된 외부 요소를 사용자의 관점에서 표현

• 유스케이스 다이어그램 구성요소
  • 유스케이스, 액터, 시스템, 시나리오, 이벤트의 흐름
• 유스케이스 다이어그램의 관계
  • 포함관계: 유스케이스를 수행할 때 다른 유스케이스가 반드시 수행되는 관계 <<include>>
  • 확장관계: 특정 조건에서 한 유스케이스로만 확장되는 관계 <<extend>>
  • 일반화관계: 추상적인 액터와 좀 더 구체적인 액터 사이에 맺어주는 관계/속이 빈 삼각형 화살표를 실선으로 연결

3. 시퀀스 다이어그램

객체간의 상호작용을 메시지 흐름으로 표현한 다이어그램

• 시퀀스 다이어그램 구성요소
  • 객체, 생명선, 실행, 메시지

4. 패키지 다이어그램

시스템의 서로 다른 패키지 사이의 의존 관계를 표현하기 위한 다이어그램

• 패키지 다이어그램 구성요소
  • 패키지(패키지 표기법->폴더모양), 의존관계(<<import>>, <<access>>)

5. 활동 다이어그램

시스템이 어떤 기능을 수행하는지를 객체의 처리 조직이나 조건에 따른 처리의 흐름으로 순서대로 표현하는 다이어그램

• 활동 다이어그램 구성요소
  • 시작점(검은색 동그라밍), 전이(실행의 흐름, 화살표로 표현), 액션/액티비티(모서리가 둥근 사각형), 종료점(검은색 동그라미를 포함한 원), 조건(판단) 노드(마름모로 표현), 병합 노드(마름모로 표현), 포크 노드, 조인노드, 구획명

6. 상태 다이어그램

하나의 객체가 자신이 속한 클래스의 상태변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램/객체의 상태 => 객체가 갖는 속성값의 변화

• 상태 다이어그램 구성요소
  • 상태, 시작상태, 종료 상태, 전이, 이벤트, 전이조건

7. 커뮤니케이션 다이어그램

시퀀스 다이어그램과 같이 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 메시지 뿐만 아니라 객체간의 연관까지 표현하는 다이어그램

=> 시스템이나 객체들이 메시지를 주고 받으며, 시간의 흐름에 따라 상호 작용하는 과정을 표현하고, 문제 객체의 연관을 표현하는 다이어그램

• 커뮤니케이션다이어그램 구성요소
  • 액터, 객체, 링크, 메시지

8. 컴포넌트 다이어그램

시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램

• 커뮤니케이션다이어그램 구성요소
  • 컴포넌트(탭이 달린 직사각형으로 표현), 인터페이스, 의존 관계

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

=> 완일이가 추수(완일이가 추수했음)

• 완전성
• 일관성
• 이해성
• 가독성
• 추적 용이성
• 수정 용이성

* 추상클래스: 객체 인스턴스를 생성하지 않고, 단지 유사 클래스들의 공통된 특징을 정의하고, 하나 이상의 추상 메서드와 일반 필드 및 일반 메서드를 포함하는 클래스

=> 객체 인스턴스 생성 x, 공통 특징 정의, 하나 이상의 추상메서드와 일반 메서드 포함 클래스

 

* UI 설계 기법 중 UI 흐름 설계

업무의 흐름이나 업무 수행과 관련된 일련의 클릭에 의한 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동