|UI 설계 도구

• 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구
• 종류
  • 와이어프레임
  • 목업
  • 스토리보드
  • 프로토타입
  • 유스케이스 등
• 사용자의 요구 사항이 실제 구현되었을 때 구성을 미리 보여주기 위한 용도로 사용

|와이어프레임(Wireframe)

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

|목업 Mockup

• 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
• 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않는다.
• 도구
  • 파워 목업
  • 발사믹 목업 등

|스토리 보드 Story Board

• 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
• 디자이너와 개발자가 최종적으로 참고하는 작업 지침서
• 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어있다.