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

UI 요구사항 확인

(1) UI 개념

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

(2) UI 유형

유형	특징	설명
CLI	정적인 텍스트 기반	명령어를 텍스트로 입력하여 조작
GUI	그래픽 반응 기반	그래픽 환경을 기반으로 마우스나 전자펜을 이용
NUI	직관적 사용자 반응	신체 부위를 이용(터치, 음성)
OUI	유기적 상호 작용	현실의 모든 사물이 입출력장치로 변화할 수 있음

(3) UI분야

• 물리적 제어: 정보 제공과 기능 전달을 위한 하드웨어 기반
• 디자인적 분야: 콘텐츠의 정확하고 상세한 표현과 전체적 구성
• 기능적 분야: 사용자의 편의성에 맞춰 쉽고 간편하게 사용

(4) UI 설계 원칙

설계 원칙	설명
직관성	누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함
유효성	정확하고 완벽하게 사용자의 목표가 달성되도록 제작
학습성	초보와 숙련자 모두 쉽게 배우고 사용하도록 제
유연성	사용자 요구사항을 최대한 수용, 실수를 방지하도록 제작

(5) UI 설계 지침

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

(6) UI 요구사항 확인

• 요구사항 구분
  • 기능적 요구사항
    • 시스템이 제공하는 기능, 서비스에 대한 요구사항
    • 시스템의 입출력, 데이터, 연산에 관한 요구사항
  • 비기능적 요구사항
    • 사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 대한 요구사항
    • 플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항
    • 비용, 일정 등 프로젝트 계획에 관한 요구사항

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

(1) 기능성

- 실제 수행 결과와 품질 요구사항과의 차이를 분석, 실제 사용 시 부정확한 결과의 발생 확률과 관련하여 시스템의 동작을 관찰하기 위한 품질 기준

상세 품질 요구사항	설명
적절성	소프트웨어 제품이 주어진 작업과 사용자의 목표에 필요 적절한 기능들을 제공해 줄 수 있는 소프트웨어 능력
정밀성	소프트웨어 제품이 요구되는 정확도로 올바른 결과를 산출할 수 있는 능력
상호 운용성	소프트웨어 제품이 특정 시스템과 상호 작용하여 운영될 수 있는 능력
보안성	비인가된 접근을 차단하고, 우연 또는 고의적인 접근을 인지하여 대처할 수 있는 능력
호환성	소프트웨어 제품이 비슷한 환경에서 연관된 표준, 관례 및 규정을 준수하는 능력

 

(2)신뢰성

- 시스템이 일정한 시간 또는 작동되는 시간 동안 의도하는 기능을 수행함을 보증하는 품질 기준

상세 품질 요구사항	설명
성숙성	소프트웨어 결함으로 인한 고장을 회피할 수 있는 소프트웨어 능력
고장 허용성	소프트웨어 결함이나 인터페이스 오류 시에도 특정 수준 이상의 성능을 유지할 수 있는 능력
회복성	소프트웨어 고장 발생 시 영향을 받은 데이터를 복구하고 성능의 수준을 다시 확볼할 수 있는 능력

 

(3)사용성

- 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준

상세 품질 요구사항	설명
이해성	소프트웨어의 논리적 개념과 적용 가능성을 구분하는데 필요한 사용자의 노력 정도에 따른 소프트웨어 특성
학습성	소프트웨어 학습에 필요한 사용자의 노력 정도에 따른 특성
운용성	소프트웨어 운용과 운용 통제에 필요한 사용자의 노력 정도에 따른 특성

 

(4) 효율성

- 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준

- 시간 효율성, 자원 효율성

(5) 유지보수성

- 요구사항을 개선하고 확장하는데 있어 얼마나 용이한가에 대한 품질 기준

- 분석성, 변경성, 안정성, 시험성

(6) 이식성

- 다른 플랫폼에서도 추가 작업 없이 얼마나 쉽게 적용이 가능한가에 대한 품질 기준

- 적용성, 설치성, 대체성

스토리보드

• 개념
  • UI화면 설계를 위해 정책이나 프로세스및 콘텐츠의 구성, 와이어프레임, 기능에 대한 정의 등 서비스를 위한 대부분의 정보가 수록된 문서
  • 디자이너와 개발자가 최종적으로 참고하는 산출 문서

(1) UI화면 설계 구분

• 와이어 프레임: 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면단위의 레이아웃을 설계하는 작업
• 스토리보드: UI화면 설계를 위해 정책이나 프로세스및 콘텐츠의 구성, 와이어프레임, 기능에 대한 정의 등 서비스를 위한 대부분의 정보가 수록된 문서
• 프로토타입: 정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시물레이션 가능한 모형

UI 설계를 위한 UML

(1) UML

• 개념
  • UML은 객체 지향 소프트웨어개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어
• 특징
  • 가시화 언어: 개념모델 작성 시 오류가 적고 의사소통 용이
  • 구축 언어: 다양한 프로그래밍 언어로 실행 시스템 예측 가능
  • 명세화 언어: 정확한 모델 제시, 완전한 모델 작성
  • 문서화 언어: 시스템에 대한 평가 및 의사소통
• 구성요소
  • 사물: 추상적인 개념으로, 주제를 나타내는 요소
  • 관계: 사물의 의미를 확장하고 명확히 하는 요소
  • 다이어그램: 사물과 관계를 모아 그림으로 표현한 형태
• UML다이어그램
  구조적(정적) 다이어그램, 행위적(동적) 다이어그램으로 구분

구조적 다이어그램

다이어그램	설명
객체	- 클래스에 속한 객체들, 즉 인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현 - 연관된 모든 인스턴스를 표현
컴포넌트	컴포넌트 다이어그램은 시스템을 구성하는 컴포넌트와 그들 사이의 의존 관계를 표현
배치	컴포넌트 사이의 종속성을 표현하고, 결과물, 프로세스, 컴포넌트 등 물리적 요소들의 위치를 표현
복합체 구조	클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현
패키지	유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계

 

행위적 다이어그램

다이어그램	설명
시퀸스	객체 간 동적 상호 작용을 시간적 개념을 중심으로 메시지 흐름으로 표현
커뮤니케이션	동작에 참여하는 객체들이 주고 받는 메시지를 표현, 메시지 뿐만 아니라 객체 간의 연관까지 표현
상태	하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현
활동	시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현
타이밍	객체 상태 변화와 시간 제약을 명시적으로 표현

• UML 확장 모델의 스테레오 타입
  • UML의 스테레오 타입은 UML의 기본적 요소 이외의 새로운 요소를만들어 내기 위한 확장 메커니즘
  • 종류
    • << include>>: 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계
    • << extend>>: 하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행 할 수도 있고, 그렇지 않을 수도 있음
    • << interface>>: 모든 메서드가 추상 메서드이며 바로 인스턴스를 만들 수 없는 클래스로 추상 메서드와 상수만으로 구성된 클래스
    • << entity>>: 정보 또는 오래 지속되는 연관행위를 형상화하는 클래스, 유스케이스 처리 흐름이 수행되는 과정에서 기억 장치에 저장되어야할 정보를 표현하는 클래스
    • << boundary>>: 시스템과 외부 액터와의 상호 작용을 담당하는 클래스
    • << control>>: 시스템이 제공하는 기능의 로직 및 제어를 담당하는 클래스

(2) UML의 유형

• 클래스 다이어그램
  • 개념
    • 객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
  • 구성요소
    • 클래스: 공통의 속성, 연산, 관계, 의미를 공유하는 객체들의 집합
    • 속성: 클래스의 구조적 특성에 이름을 붙인 것으로 특성에 해당하는 인스턴스가 보유할 수 있는 값의 범위
    • 연산: 이름, 타입, 매개변수들과 연관된 행위를 호출하는데 요구되는 제약사항들을 명시하는 클래스의 행위적 특징
    • 접근 제어자: private(-), public(+), protected(#), default(~)
  • 관계
    • 연관 관계
      • 클래스가 서로 개념적으로 연결된 선
      • 2개 이상의 사물이 서로 관련되어 있는 상태
      • 사물 사이를 실선으로 연결하여 표현, 방향성은 화살표
      • 양방향 관계의 경우 실선으로만 연결
    • 집합 관계
      • 하나의 객체에 여러 개의 독립적인 객체들이 구성
      • 하나의 사물이 다른 사물에 포함되어 있는 관계 표현
      • 포함되는 쪽에서 포함하는 쪽으로 속이 빈 마름모 연결
    • 포함 관계
      • 영구적이고, 집합 관계보다 더 강한 관계로 구성
      • 포함되는 쪽에서 포함하는 쪽으로 속이 채워진 마름모로 연결
      • 집합 관계의 특수한 형태로, 포함하는사물의 변화가 포함되는 사물에게 영향을 미침
    • 일반화 관계
      • 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현
      • 일반적인 개념을 부모, 구체적인 개념을 자식
      • 상속 관계
    • 의존 관계
      • 하나의 클래스가 또 다른 클래스를 사용하는 관계
      • 다른 클래스의 멤버 함수 사용
      • 하나의 클래스에 있는 멤버 함수 인자가 변함에 따라 다른 클래스에 영향을 미칠 때의 관계
      • 영향을 주는 사물 => 영향을 받는 사물 방향으로 점선 화살표
    • 실체화 관계
      • 추상 클래스나 인터페이스를 상속 받아 자식 클래스가 추상 메서드를 구현하는데 사용
• 유스케이스 다이어그램
  • 개념
    • 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램
  • 구성요소
    • 유스케이스: 시스템이 제공해야 하는 서비스, 기능
    • 액터: 사용자가 시스템에 대해 수행하는 역할
    • 시스템: 전체 시스템의 영역을 표현
    • 시나리오
    • 이벤트의 흐름
  • 유스케이스 다이어그램의 관계
    • 포함, 확장, 일반화
• 시퀸스 다이어그램
  • 개념
    • 객체 간 상호 작용을 메시지 흐름으로 표현한 다이어그램
    • 객체 간의 동적 상호 작용을 시간적 개념을 중심으로 모델링하느 ㄴ과정
  • 구성요소
    • 객체: 사각형 안에 밑줄 친 이름으로 명시, 아래로 생명선을 가짐
    • 생명선: 시간이 흐름에 따라 객체의 생명주기 동안 발생하는 이벤트를 명시
    • 실행: 오퍼레이션이 실행되는 시간을 의미
    • 메시지: 객체 간의 상호작용은 메시지 교환으로 이루어짐
• 패키지 다이어그램
  • 개념
    • 시스템의 서로 다른 패키지들 사이의 의존관계를 표현하기 위한 다이어그램
  • 구성요소
    • 패키지: 요소들을 그룹으로 조직하기 위한 요소
    • 의존관계: 하나의 패키지가 다른 패키지를 사용하는 관계( << import>>, << access>>)
• 활동 다이어그램
  • 개념
    • 시스템이 어떤 기능을 수행하는지를 객체의 처리로직이나 조건에 따른 처리의 흐름을 순서대로 표현
    • 처리과정이 수행되는 동안 일어나는 일들을 단계적으로 표현
  • 구성요소
    • 시작점, 전이, 액션, 종료점, 조건 노드, 병합 노드, 포크 노드, 조인 노드, 구획면
• 상태 다이어그램
  • 개념
    • 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램
  • 구성요소
    • 상태, 시작 상태, 종료 상태, 전이, 이벤트, 전이 조건
• 커뮤니케이션 다이어그램
  • 개념
    • 시퀸스 다이어그램과 같이 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 메시지 뿐만 아니라객체 간의 연관까지 표현
  • 구성요소
    • 액터, 객체, 링크, 메시지
• 컴포넌트 다이어그램
  • 개념
    • 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존관계를 나타내는 다이어그램
  • 구성요소
    • 컴포넌트, 인터페이스, 의존 관계