[1과목 소프트웨어 설계] 화면설계 - 013. ⭐ UI 설계 도구

1. 와이어프레임 (Wireframe)

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

 

2. 목업 (Mockup)

• 와이어프레임보다 좀 더 실제화면과 유사하게 만든 정적인 모형
• 시각적으로만 구성요소를 배치하는 것, 실제로 구현되지 않음
• 파워 목업, 발사믹 목업

 

3. 스토리보드 (Story board)

• 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름을 추가한 문서
• 최종적으로 참고하는 작업 지침서
  • 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보
• 제목, 작성자, UI화면, Description 기입
  • Description : 화면 설명, 전반적인 로직, 분기처리, 예외처리 등 명확하고 세부적으로 작성
• 파워포인트, 키노트, 스케치, Axure

 

4. 프로토타입 (Prototype)

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

💡 인터랙션 (Interaction)

• 사용자와 시스템을 연걸하는 것 = UI
• UI를 통해 시스템을 사용하는 일련의 상호작용 = 인터랙션
  • ex) 마우스로 화면의 아이콘을 클릭하면 화면이 그에 맞게 반응

 

5. 유스케이스 (Use Case)

• 사용자 측면에서의 요구사항
• 사용자가 원하는 목표를 달성하기 위해 수행할 내용 기술
• 시스템의 기능적 요구를 결정하고 결과를 문서화
• 다이어그램 형식 → 유스케이스 명세서 작성

 

📖 Reference

2023 시나공 정보처리기사 필기 : 네이버 도서