[정보처리기사 실기 2020 개정] Ⅵ.화면 설계 - 2. UI 설계

1. UI 흐름 설계

• UI 설계서 구성
  • UI 설계서 표지
  • UI 설계서 개정 이력
  • UI 요구사항 정의
  • 시스템 구조
  • 사이트 맵
  • 프로세스 정의
  • 화면 설계
• UI 설계 원리
  • 실행 차를 줄이기 위함 
    • 사용의도 파악
    • 행위 순서 규정
    • 행위의 순서대로 실행
  • 평가 차를 줄이기 위함
    • 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도
    • 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
    • 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도
• UI 흐름 설계 수행 절차
  • UI 설계안의 적정성 확인
  • 화면과 폼의 흐름 설계

 

2. UI 상세 설계

• UI 상세설계 프로세스
  • UI 요구사항 최종확인
  • UI 구조 설계
  • 사용자 기반 메뉴 구조 설계
  • 화면 설계
  • 화면 시스템 단위 내/외부 상세 화면과 폼 설계
• UI 검토 및 보완
  • UI 검토 수행
  • UI 검토 보완
  • 사용성 검토 및 검증 수행

 

3. UI 설계 도구

• UI 개발 단계별 활용 가능한 설계 도구
  
  • 화면 설계 도구
    • 파워 목업
    • 발사믹 목업
    • 카카오 오븐
  • 프로토타이핑 도구
    • UI핀
    • 액슈어
    • 네이버 프로토나우
  • UI 디자인 도구
    • 스캐치
    • 어도비 익스피리언스 디자인
  • UI 디자인 산출물로 작업하는 프로토타이핑 도구
    • 인비전
    • 픽사에이트
    • 프레이머