UI 설계도구

• 소프트웨어 아키텍처: 개발할 소프트웨어의 기본 틀을 만드는 것

1. UI 설계도구

    : 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구

 

2. UI 설계도구의 종류

    : 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등

 

① 와이어프레임(Wireframe): 기획 단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계 / ex) 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

Keynote

 

② 목업(Mockup): 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형 / ex) 파워목업, 발사믹 목업 등

Power Mockup

 

③ 스토리보드(Story Board): 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서, 디자이너와 개발자가 최정적으로 참고하는 작업 지침서 / ex) 파워포인트, 키노트, 스케치, Axure 등

Axure

 

④ 프로토타입(Prototype): 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형, 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플 / ex) Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

Kakao Oven

 

⑤ 유스케이스(Use Case): 유스케이스는 사용자 측면에서 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술, 일반적으로 다이어그램 형식으로 묘사 - 유스케이스 다이어그램이 완성되면 유스케이스 명세서를 작성

Usecase diagram(from wikipedia)