정보처리기사 실기 스터디[2022-09-21] - UI 설계

📌 Study

🔸 2022-09-21

[UI 설계]

1. UML 유형

• 유스케이스 다이어그램: 시스템이 제공하고 있는 기능, 외부 요소를 사용자 관점에서 표현하는 다이어그램
  • 구성 요소 : 유스케이스, 액터, 시스템, 시나리오
    • 유스케이스 : 시스템이 제공해야 하는 서비스, 기능
    • 액터 : 사용자가 시스템에 대해 수행하는 역할, 이벤트 흐름을 시작하게 하는 객체
    • 시스템 : 전체 시스템의 영역을 표현
    • 시나리오 : 발생되는 이벤트 흐름
  • 관계 : 포함(Include), 확장(Extend), 일반화(Generalization)
  • 예시 - 학생 - 교수 수강신청

 

• 시퀀스 다이어그램 : 객체 간 상호작용을 메시지 흐름으로 표현한 다이어그램
  • 구성 요소 : 객체, 생명선, 실행, 메시지
  • 객체 : 객체는 위쪽으로 푯되며 아래로 생명선을 가짐, 사각형 안에 밑줄 친 이름
  • 생명선 : 객체로부터 뻗어 나가는 점선,
  • 실행 : 직사각형은 실행되는 시간
  • 메시지 : 객체 간 상호작용은 메시지 교환으로 이루어짐, 실선 화살표
  • 예시 - 손님 - 메뉴 요리주문

 

• 패키지 다이어그램 : 서로 다른 패키지들 사이의 의존 관계를 표현한 다이어그램
  • 구성요소 : 패키지, 의존관계
    • 패키지 : 요소들을 그룹으로 조직하기 위한 요소
    • 의존관계 : 하나의 패키지가 다른 패키지를 사용하는 관계, <>, <>

 

• 활동 다이어그램 : 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
  • 구성 요소 : 시작점, 전이, 액션/액티비티, 종료점, 조건 노드, 병합 노드, 포크 노드, 조인 노드, 구획면
  • 시작점 : 활동 시작, 검은 동그라미
  • 전이 : 실행 흐름, 실선 화살표
  • 액션 : 어떤 일들의 처리와 실행, 모서리가 둥근 사각형
  • 종료점 : 처리 종료, 검은 동그라미를 포함한 원
  • 조건 노드 : 조건에 따른 제어 흐름의 분리 표현, 마름모 표현
  • 병합 노드 : 여러 겨올의 흐름이 하나로 합쳐진 것 표현, 마름모 표현
  • 포크 노드 : 평행적으로 수행되는 흐름을 나누는 노드
  • 조인 노드 : 호크 노드로 나눠진 흐름을 다시 하나로 합치는 노드
  • 구획면 : 액티비티 수행을 담당하는 주체를 구분하는 면
  • 예시 : 손님 - 도서 대여

 

• 상태 다이어그램 : 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호작용으로 상태의 변화 표현 다이어그램
  • 구성 요소 : 상태, 시작 상태, 종료 상태, 전이, 이벤트, 전이 조건
  • 상태 : 객체가 존재할 수 있는 조건 중 하나, 둥근 사각형
  • 시작 상태 : 객체의 시작 상태, 속이 채워진 원
  • 종료 상태 : 객체의 종료 상태, 원 안에 속이 채워진 원
  • 전이 : 객체의 상태가 다른 상태로 변경되는 상태, 화살표 실선
  • 이벤트 : 객체의 전이를 유발하는 자극
  • 전이 조건 : 특정 조건 만족 시 전이 발생하도록 함
  • 예시 : 컴퓨터 - 부팅

 

• 커뮤니케이션 다이어그램 : 객체들이 주고받는 메시지를 표현, 객체간 연관까지 표현 다이어그램
  • 구성 요소 : 액터, 객체, 링크, 메시지
  • 액터 : 시스템으로부터 서비스를 요청하는 외부 요소
  • 객체 : 메시지를 주고받는 객체
  • 링크 : 객체들 간의 관계 표현
  • 메시지 : 객체가 상호 작용을 위해 주고받는 메시지
  • 예시 : 발신자 - 수신자 전화

 

• 컴포넌트 다이어그램 : 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존관계를 나타내는 다이어그램
  • 구성 요소 : 컴포넌트, 인터페이스, 의존 관계
  • 컴포넌트 : 반드시 이름 포함, 탭이 달린 직사각형 표현
  • 인터페이스 : 인터페이스를 적용한다는 의미, 점선
  • 의존 관계 : 의존 관계 표현

 

2. UI 상세 설계

• Radio Box : 많은 메뉴들 중에서 한 개만 선택하도록 강제하는 버튼
• Check Box : 많은 메뉴들 중에서 한 개 또는 여러 개를 동시에 선택 가능

 

• UI 시나리오 문서의 작성 요건
  • 완전성 : 누락이 없어야 하고, 최대한 빠짐없이 상세하게 기술
  • 일관성 : 사용자 요구사항이 일관성, UI 일관적
  • 이해성 : 이해하기 쉽도록 구성, 설명 가능
  • 가독성 : 문서를 쉽게 읽을 수 있어야 함
  • 추적 용이성 : 쉽게 추적 가능, 변경 사항들 추적 쉬움
  • 수정 용이성 : 쉽게 변경 가능, 개선사항 반영 쉽게 적용

 

3. UI 설계 도구

• 화면 설계 도구
  • 파워 목업 : 파워포인트에 추가 메뉴를 설치해 목업 기능 사용 지원
  • 발사믹 목업 : 스케치한 느낌, 심플하게 서비스 콘셉트 전달 가능
  • 카카오 오븐 : 카카오, 온라인 프로토타이핑 도구

 

• 프로토타이핑 도구
  • UX 핀 : 웹을 통해 와이어프레임과 프로토타이핑 동시 작업 가능
  • 액슈어 : 스토리 보드에 포함되는 정책, 디스크립션까지 모두 작성 가능
  • 네이버 프로토나우 : 네이버, 프로토타이핑 툴