[정보처리기사 실기 요약정리] 2. 화면 설계

UI 요구사항 확인

UI 요구사항 확인

1) UI 개념

• 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체
• UX(사용자 경험)은 UI를 포함하고 있다.

 

2) UI 유형

• CLI: 명령어를 텍스트로 입력하여 조작
• GUI: 그래픽 환경을 기반으로 한 마우스를 이용
• NUI: 마우스 키보드 없이 신체 부위를 이용
• OUI: 현실에 존재하는 모든 사물이 입출력장치로 변화

3) UI 설계 원칙 [직유학유]

• 직관성: 누구나 쉽게 이해하고 사용
• 유효성: 정확하고 완벽하게 사용자의 목표 달성
• 학습성: 초보와 숙련자 모두가 쉽게 배우고 사용
• 유연성: 사용자의 요구사항 최대한 수용, 실수 방지

4) UI 요구사항 확인

UI 품질 요구사항

• 기능성
• 신뢰성
• 사용성
• 효율성
• 유지보수성
• 이식성

 

UI 지침

1) UI 개발 목표 및 범위

UI 개발을 위한 주요 기법

• 3C 분석: Customer, Company, Competitor
• SWOT 분석: Strength(강점) Weakness(약점) Opportunity(기회) Threat(위협) 
• 시나리오 플래닝
• 사용성 테스트
• 워크숍

 

스토리보드

1) 스토리보드

스토리보드는 UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분의 정보가 수록된 문서이다.

• 와이어프레임: 이해 관계자들과의 화면구성을 협의, 서비스의 간략한 흐름 공유, 화면 단위의 레이아웃을 설계
• 스토리보드: 정책 프로세스, 콘텐츠 구성, 와이어프레임 기능 정의, 데이터베이스 연동 등 모든 정보
• 프로토타입: 정적인 화면으로 설계된 것에 동적 효과 적용

UI 설계

UI 설계를 위한 UML

1) UML

 

UML의 특징 [가구명문]

• 가시화
• 구축
• 명세화
• 문서화

UML의 구성요소

• 사물
• 관계
• 다이어그램

UML 다이어그램

• 구조적 다이어그램 / 정적 다이어그램
  • 클래스: 클래스의 속성 및 연산과 클래스 간 관계 표현
  • 객체: 인스턴스 표현
  • 컴포넌트
  • 배치: 컴포넌트 사이의 종속성을 표현
  • 복합체
  • 패키지
• 행위적 다이어그램 / 동적 다이어그램
  • 유스케이스: 외부 요소를 사용자 관점에서 표현
  • 시퀀스: 객체 간 동적 상호 작용을 시간적 개념을 중심으로 메시지 흐름으로 표현
  • 커뮤니케이션: 동작에 참여하는 객체들이 주고받는 메세지를 표현, 객체 간의 연관도 표현
  • 상태: 하나의 객체가 자신이 속한 클래스의 상태 변화, 다른 객체와 상호 작용에 따라 상태 변화 표현
  • 활동: 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름 순서대로 표현
  • 타이밍

UML 확장 모델의 스테레오 타입 ( 길러멧 기호 사용 )

• <<include>> 포함 관계 
• <<extend>> 확장 관계
• <<interface>> 모든 메서드가 추상 메서드
• <<entity>> 정보 또는 오래 지속되는 연관된 행위 형상화하는 클래스
• <<boundary>> 시스템과 외부 액터와의 상호 작용 담당
• <<control>> 시스템이 제공하는 기능의 로직 및 제어를 담당

 

2) UML의 유형

 

클래스 다이어그램

객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계 표현한 다이어그램이다.

 

구성 요소

구성요소	설명
클래스	속성, 연산, 관계, 의미를 공유하는 객체들의 집합
속성	클래스의 구조적 특성에 이름 붙인 것, 특성에 해당하는 인스턴스가 보유 할 수 있는 값의 범위 기술
연산, 메서드	이름, 타입, 매개변수들과 연관된 행위 호출하는데 요구되는 제약사항들 명시하는 클래스의 행위적 특징
접근 제어자	클래스에 접근할 수 있는 정도 표현 - : 클래스 내부 접근만 허용 (private) +: 클래스 외부 접근을 허용 (public) #: 동일 패키지 / 파생 클래스에서 접근 가능 (protected) ~: 동일 패키지 클래스에서 집근 가능 (default)

 

클래스 간의 관계

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

 

유스케이스 다이어그램

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

 

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

• 유스케이스: 시스템이 제공해야 하는 서비스 기능
• 액터: 사용자가 시스템에 대해 수행하는 역할
• 시스템: 전체 시스템의 영역
• 시나리오: 발생되는 이벤트의 흐름
• 이벤트의 흐름: 사람, 시스템, 하드웨어, 시간의 흐름에 의해 시작

유스케이스 다이어그램의 관계

• 포함 관계 (include):  <<include>> 로 표현 , 유스케이스 수행할 때 다른 유스케이스가 반드시 수행되는 관계
• 확장 관계(extend):  <<extend>>로 표현, 특정 조건에서 한 유스케이스로만 확장
• 일반화 관계:  추상적인 액터와 좀 더 구체적인 액터 사이에 맺어주는 관계, 속이 빈 삼각형 화살표를 실선으로 연결

 

시퀀스 다이어그램

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

 

시퀀스 다이어그램 구성요소

• 객체: 위쪽에 표시되며 아래로 생명선을 가짐, 사각형 안에 밑줄 친 이름으로 명시
• 생명선: 객체로부터 뻗어 나가는 점선, 실제 시간이 흐름에 따라 객체의 생명주기 동안 발생하는 이벤트를 명시
• 실행: 직사각형은 함수가 실행되는 시간을 의미, 길어질수록 오퍼레이션 수행시간이 길다
• 메세지: 객체 간의 상호 작용은 메시지 교환으로 이루어짐

 

패키지 다이어그램

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

 

패키지 다이어그램 구성요소

• 패키지: 요소들을 그룹으로 조직하기 위한 요소
• 의존관계: 스테레오 타입에는 <<import>>, <<access>>가 있다.

 

활동 다이어그램

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

 

활동 다이어그램 구성요소

• 시작점: 검은색 동그라미로 표현
• 전이: 실행의 흐름을 나타냄, 화살표로 표현 ->
• 액션 / 액티비티: 모서리가 둥근 사각형으로 표현, 안에 액션이나 액티비티 명칭 기술
• 종료점: 검은색 동그라미를 포함한 원으로 표현
• 조건 노드: 마름모로 표현 들어오는 제어 흐름은 한 개이고 나가는 제어 흐름 여러 개
• 병합 노드: 마름모, 들어 오는 제어 흐름 여러 개이고 나가는 제어 흐름은 한 개
• 포크 노드: 굵은 가로선으로 표현 들어오는 액티비티 흐름 한 개 나가는 액티비티 흐름은 여러 개
• 조인 노드: 포크 노드로 나눠진 흐름 다시 하나로 합치는 노드 
• 구획면: 가로 또는 세로 실선을 그어 구분

 

상태 다이어그램

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

 

상태 다이어그램 구성요소

• 상태: 둥근 사각형 안에 객체의 상태 기술
• 시작 상태: 속이 채워진 원
• 종료 상태: 원 안에 속이 채워진 원
• 전이: 화살표로 표현 ->
• 이벤트: 전이 위에 이벤트 이름 표시
• 전이 조건: 특정 조건 만족 시 전이 발생하도록 하기 위해 사용되는 속성값의 불리언 식

 

커뮤니케이션 다이어그램

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

 

커뮤니케이션 다이어그램 구성요소

• 액터
• 객체: 콜론을 기준으로 앞쪽에 객체명, 뒤쪽에 클래스 명
• 링크: 객체들 간의 관계, 실선
• 메시지: 객체가 상호 작용 위해 주고받는 메시지, 메시지 받는 쪽으로 화살표 방향

 

컴포넌트 다이어그램

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

 

컴포넌트 다이어그램 구성요소

• 컴포넌트: 탭이 달린 직사각형으로 표현 
• 인터페이스
• 의존 관계

 

UI 상세 설계

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

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