UI 설계 도구

와이어프레임 (Wireframe)

• 기획 단계 초기 제작
• 대략적인 레이아웃, UI 요소 등 뼈대 설계
• 개발자, 디자이너 등 레이아웃 협의 및 진행상태 등 공유
• ex) 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

 

목업 (Mockup)

• 실제화면과 유사하게 만든 정적인 형태의 모형
• 실제 구현 X
• ex) 파워 목업, 발사믹 목업 등

 

스토리보드 (Story Board)

• 와이어프레임 + 콘텐츠 설명, 페이지 간 이동 흐름 등
• 최종적으로 참고하는 작업 지침서 (문서)
• 서비스 구축을 위한 모든 정보가 있다.
• 좌측 : UI화면
• 우측 : 디스크립션 (명확하고 세부적으로 화면에 대한 설명)
• ex) 파워포인트, 키노트, 스케치, Axure 등

 

프로토타입 (Prototype)

• 와이어프레임 or 스토리보드 등 + 인터랙션 적용
• 실제 구현된 것처럼 테스트 가능한 동적인 형태
• ex) HTML/CSS, Axure Flinto, 네이버 프로토나우, 카카오 오븐 등

 

유스케이스 (UseCase)

• 사용자 측면의 요구사항
• 초기에 기능적인 요구 결정 -> 문서화
• 자연어로 작성 -> 요구사항 구조적 표현
• 유스케이스 명세서 작성