1

컴포넌트및 GUI 설계

copyright © 2016한국항공대학교소프트웨어학과지승도교수

R.S. Pressman

Monolithic

Monolithic vs. ModularØ Unified

è constructed by one single module

Multi-facetted

Monolithic vs. ModularØ Hierarchical, Abstraction, Divide & conquer

è constructed by multiple module in hierarchical fashion

4

컴포넌트란?

n Component is a modular building block for computer software

n “a modular, deployable, and replaceable part of a system that encapsulates implementation and exposes a set of interfaces.”

ABC

AB C A B

AB

C1 C2

C2C1

BA+ =

ABCAB

A

B

C1

C2

C

5

컴포넌트란? (계속)

n OO view (Object-Oriented Design): a component contains a set of collaborating classes. Each class within a component has been fully elaborated to include all attributes and operations that are relevant to its implementation.

n Conventional view (Structured Design): logic, the internal data structures that are required to implement the processing logic, and an interface that enables the component to be invoked and data to be passed to it.

6

Componentbased on Object-oriented Design

Analysis Class

Component(in architecture design)

Design Class(in component design)

7

Component based on Structured Design

8

Component based on Structured Design

9

컴포넌트 설계 지침

n Components

n Naming conventions should be established for components that are specified as part of the architectural model and then refined and elaborated as part of the component-level model

(problem-oriented à implementation-specific)

n Interfaces

n Interfaces provide important information about communication and collaboration

n Dependencies and Inheritance

n it is a good idea to model dependencies from left to right and inheritance from bottom (derived classes) to top (base classes).

InheritanceDependency

11

Cohesion (응집도)

n Conventional view:

n the “single-mindedness” of a module

n OO view:

n cohesion implies that a component or class encapsulates only attributes and operations that are closely related to one another and to the class or component itself

n Levels of cohesion

n Functional

n Layer

n Communicational

n Sequential

n Procedural

n Temporal

n utility

12

Coupling (결합도)

n Conventional view: n The degree to which a component is connected

to other components and to the external world

n OO view:n a qualitative measure of the degree to which

classes are connected to one another

n Level of couplingn Contentn Inclusion or importn Commonn Externaln Controln Stampn Datan Routine calln Type use

13

컴포넌트설계

n Step 1. Identify all design classes that correspond to the problem domain.

n Step 2. Identify all design classes that correspond to the infrastructure domain. (GUI, O/S etc. that are not described in the analysis model)

n Step 3. Elaborate all design classes that are not acquired as reusable components.

n Step 3a. Specify message details when classes or component collaborate.

n Step 3b. Identify appropriate interfaces for each component.

14

컴포넌트설계 (계속)

n Step 3c. Elaborate attributes and define data types and data structures required to implement them.

n Step 3d. Describe processing flow within each operation in detail.

n Step 4. Describe persistent data sources (databases and files) and identify the classes required to manage them.

n Step 5. Develop and elaborate behavioral representations for a class or component.

n Step 6. Elaborate deployment diagrams to provide additional implementation detail.

n Step 7. Factor every component-level design representation and always consider alternatives.

15

Collaboration Diagram

16

Refactoring Interface

17

Activity Diagram

18

Statechart Diagram

19

Designing Conventional Components

n options:n graphical (e.g. flowchart, box diagram)

n decision table

n Pseudo-code (e.g., PDL)

uses a limited set of logical constructs:“Structured Programming”

sequencecondition if-then-else, caseloops

20

Flow Chart

21

Decision Table

22

Program Design Language (PDL)

23

24

GUI 역사

• “User friendly”

1. Command-based2. Menu-driven3. Point&pick

• GUI (Graphic User Interface)

• HCI (Human Computer Interaction)à e.g., 아이폰, 3-D TV, VR, AI

• Story à Emotion

현실과가상의공존: LVC(Live-Virtual-Constructive)

항공대 LVC 실험실구축계획

활주로 비행시뮬레이터 UAV 비행제어컴퓨터 쿼드콥터 실험공간

안전그물

VirtualLive Constructive

대화면시스템

보유장비및공간

구축예정장비

LVC실험실습실

제어용워크스테이션헤드마운트디스플레이

한국항공대학교

Virtual 시뮬레이터

HLA/RTIHLA/RTI

Live 인터페이스Constructive 시뮬레이션

Live

합성 상황실 무인항공기(UAV)

29

인터페이스설계

Easy to use?Easy to understand?

Easy to learn?

30

인터페이스설계

lack of consistencytoo much memorizationno guidance / helpno context sensitivitypoor responseArcane/unfriendly

Typical Design Errors

31

황금 법칙

n Place the user in control

n Reduce the user’s memory load

n Make the interface consistent

32

인터페이스설계 원칙: Place the User in Control

• Define interaction modes in a way that does not force a user

into unnecessary or undesired actions.

• Provide for flexible interaction.

• Allow user interaction to be interruptible and undoable.

• Streamline interaction as skill levels advance and allow the

interaction to be customized.

• Hide technical internals from the casual user.

• Design for direct interaction with objects that appear on the

screen.

33

인터페이스설계 원칙:Reduce the User’s Memory Load

• Reduce demand on short-term memory. (remember past actions)

• Establish meaningful defaults.

• Define shortcuts that are intuitive. (e.g., ALT-P)

• The visual layout of the interface should be based on a real

world metaphor.

• Disclose information in a progressive fashion. (e.g., menu-driven)

34

인터페이스설계 원칙:Make the Interface Consistent

• Allow the user to put the current task into a meaningful

context.

• Maintain consistency across a family of applications.

• If past interactive models have created user expectations,

do not make changes unless there is a compelling reason

to do so. (e.g., CTRL-C)

35

User Interface Design Modelsn User model — a profile of all end users of the

system (Novice, Knowledgeable/intermittent user, Knowledgeable/frequent user)

n Design model — a design realization of the user model (data, architecture, interface, procedure)

n Mental model (system perception) — the user’s mental image of what the interface is

n Implementation model — the interface “look and feel” coupled with supporting information that describe interface syntax and semantics

“Know the user, know the tasks”

36

User Interface Design Process

37

User Analysis

n User Interviews

n Sales Input

n Marketing input

n Support input

e.g., Big Data Analysis

38

Task Analysis and Modeling

n Use-cases define basic interaction

n Task elaboration refines interactive tasks

n Object elaboration identifies interface objects

(classes)

n Workflow analysis defines how a work process is

completed when several people (and roles) are

involved

n Hierarchical representation is derived by a stepwise

elaboration of each task identified for the user

39

Swimlane Diagram

40

Analysis of Display Content

n Character-based report (e.g., spreadsheet)

n Graphical display (e.g., histogram, 3-D model,

picture)

n Specialized information (e.g., audio or video files)

41

Design Issues

n Response time

n Help facilities

n Error handling

n Menu and command labeling

n Application accessibility

n Internationalization

42

Design Evaluation Cycle

43

Homework #6

n Design 모델 제출

1. Class design (class diagram)

2. Architecture design (DFD => Architecture)

3. Component-level design (activity diagram,

Statechart diagram, PDL/Flowchart/Table)

4. Interface design (swim-lane diagram, GUI sample)