[2021 정보처리기사 필기] UI 설계도구 (와이어프레임, 프로토타입 등)

[정보처리기사 1과목 필기 예상 키워드] 목록으로 돌아가기
과목: 1. 소프트웨어 설계 챕터: 2장 화면설계 키워드: UI 설계도구	#와이어프레임 #목업 #스토리보드 #프로토타입 #유스케이스

 

 

 

 

 

UI 설계도구

개요
사용자의 요구사항에 맞도록 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구로, UI 설계 도구로 작성된 결과물은 사용자의 요구사항이 실제 구현되었을 때 화면은 어떻게 구성되는지, 어떤 방식으로 수행되는지 등을 기획단계에서 미리 보여주기 위한 용도로 사용된다.


와이어프레임(Wireframe)
- 뼈대(레이아웃) 배치, 화면단위


목업
- 실제 화면과 유사하게 만든 정적인 형태의 모형, 기능구현 아님


스토리보드
- 와이어프레임 + 콘텐츠 설명(Description) + 이동경로(흐름)로 구성되며, 작업 지침서로 활용할 수 있다.
- 스토리보드 툴은 파워포인트, 키노트, 스케치, Axure 등이 있다.


프로토타입
- 인터렉션(클릭하면 반응)이 적용되어 있는 상태(동적인 형태), 데이터X
- 프로토타입 툴은 HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등이 있다.


유스케이스
- 유저의 요구사항(기능적)을 다이어그램 형식으로 문서화, 각각의 유스케이스에 대한 명세서(설명) 작성 = 정리, 기록
- 사용자 측면에서의 요구사항으로 프로젝트 초기에 시스템의 기능적인 요구를 결정하고 결과를 문서화 할 수 있다
- 작성예시

(1) 개요: 사용자는 반납기기를 통하여 원하는 도서를 반납한다.
(2) 액터: 사용자
(3) 이벤트 흐름: 
  (a. 기본사항)
     (a-1) 사용자는 '도서대출/반납화면'에서 반납 버튼을 누른다
     (a-2) 시스템은 반납할 도서의 인식을 요청하는 '반납도서인식요청화면'을 출력한다
     (a-3) 사용자는 반납하고자 하는 도서를 반납 기기에 인식시킨다
  (b. 추가사항)
     (b-1) 사용자가 '반납도서인식요청화면'에서 취소를 누를 경우
     (b-2) 시스템은 도서대출/반납메인화면 을 출력한다.
.
.
.
(4) 처리내용: 데이터베이스에서 대출 정보가 수정된다.

 

 

 

 

 

 

[2021 정보처리기사 키워드 정리] 1. 소프트웨어 설계 (상시업데이트)

참고: 시나공 정보처리기사 필기 (저자: 강윤석, 김용갑, 김우경, 김정준 | 출판사: 길벗), 유튜브 주간컴공TV