정보처리기사(012) - UI 설계 도구

1. UI 설계 도구

UI종류에는 와이어프레임, 목업, 스토리보드 , 프로토타입, 유스케이스 등이 있다.

 

2. 와이퍼프레임(Wireteframe)

초기에 제작하는 것, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계

• 와이어프레임을 제작할 때는 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계

• 개발자, 디자이너 등이 레이아웃을 협의 or 현재 진행 상태 등을 공유하기 위해 사용

• 와이어프레임 툴: 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

3. 목업(Mockup)

디자인, 사용방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형

• 시각적으로 구성 요소를 배치

• 목업 툴 : 파워목업, 발사믹 목업 등

4. 스토리보드(Story Board)

와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서

• 최종적으로 참고하는 작업 지침서, 정책, 프로세스, 콘텐츠 구성, 와이어프레임 등 서비스 구축을 위한 모든 정보

• 상단,우측에는 제목, 작성자 등으 입력, 좌측에는 UI화면, 우측에는 디스크립션을 기입

• 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리 등을 작성하는 부분

• 스토리보드 툴 : 파워포인트, 키노트,  스케치, Axure 등

5. 프로토타입(Prototype)

와이어프레임, 스토리보드 등에 인터랙션을 적용하면서 실제 구현 된 것처럼 테스트가 가능한 동적인 형태의 모형

• 사용성 테스타트나 작업자 간 서비스 이해를 위해 작성하는 샘플

• 작성 방법에 따라 페이퍼 프로토타입과 디지털 프로토타입으로 나뉜다.

• 프로타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, ㅏ카오 오븐 등

6. 유스케이스(USe Case)

사용자 측면에서의 요구사항, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술

• 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화 할 수 있다.

• 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것으로, 다이어그램형식으로 묘사

• 유스케이스가 다이어그램이 완성되면, 각각의 유스케이스에 대해 유스케이스 명세서를 작성한다.

인터랙션(Interaction)이란?

사용자와 시스템을 연결하는 것이 UI라면 인터랙션은 UI를 통해 시스템을 사용하는 일련의 상호 작용을 의미

즉, 마우스로 화면의 어떤 아이콘을 클릭하면 화면이 그에 맞게 반응하는 것

 

 

이상포스터를 마치겠습니다.