UI 설계도구

와이어프레임

• 기획 단계의 초기에 제작하며 페이지에 대한 대략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계
• 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계
• 개발자, 디자이너 등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 사용
• 툴: 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

목업 (Mockup)

• 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
• 실제로 구현하지 않음
• 툴: 파워 목업, 발사믹 목업 등

스토리보드 (Story Board)

• 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
• 디자이너, 개발자가 최종적으로 참고하는 작업 지침서
• 상단, 우측) 제목, 작성자 등을 입력
• 좌측) UI 화면
• 우측) 디스크립션 기입
  • 디스크립션: 화면에 대한 설명, 전반적 로직, 분기처리, 예외처리 등을 작성하는 부분
• 툴: 파워포인트, 키노트, 스케치, Axure 등

프로토타입 (Prototype)

• 와이어프레임 or 스토리보드 등에 인터렉션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
• 서비스 이해를 위해 작성하는 샘플
• 작성 방법에 따라) 페이퍼 프로토타입 / 디지털 프로토타입
• 툴: HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

유스케이스 (Usecase)

• 사용자 측면에서의 요구사항
• 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술
• 요구사항을 빠르게 파악함 > 프로젝트 초기에 시스템의 기능적인 요구를 결정, 그 결정을 문서화 가능
• 다이어그램 형식으로 묘사
• 유스케이스 다이어그램 완성 시, 각각 유스케이스에 대해 유스케이스 명세서 작성