[객체지향설계] 12. UI Design

목적

• 기본적 UI 설계 원칙 이해
• UI 설계 절차 이해
• 설계 방법 이해
  • UI 구조
  • UI 기준
• UI 설계에 일반적으로 사용되는 원칙들과 기술을 이해
• UI 설계 가능

 
3개 layer

• HCI layer
• PD(Problem Domain) layer
• DM(Database Management) layer

 
Principles(원칙들)

• Layout: 각기 다른 목적의 공간 부분.
• Content awareness: 어디가 어떤 역할을 하는 부분인지를 인지할 수 있어야 한다.
• Aesthetics: 배치, 색, 공간, 글자, 공백 등을 유의.
• User experience(UX): 초보유저도, 숙련 유저도 사용하기 쉬운 디자인
• Consistency: 유저가 시스템이 작동하기 전에 무엇이 일어날지 예측할 수 있게 하는 것
• Minimal user effort: 간단해야 함. 유저가 3번 이상 클릭하지 않게.

 
주요 용어 정의
GUI: 개발 시스템에서 가장 보편적 방법의 인터페이스
Navigation mechanism: 시스템이 무엇을 할 수 있는지 유저들에게 알려주는 방법
Input mechanism: 시스템이 정보를 얻는 방법 정의
Output mechanism: 유저나 다른 시스템에게 시스템이 정보를 공유하는 방법 정의
 
UI 설계 절차

 
User 시나리오
 
Interface 구조 설계(예시. UML 아님)
 

Interface 표준 설계

• 시스템의 각 화면, 폼, 보고서에서 보편적으로 나타나는 기본 설계 요소
• 기본 요소
  • templates
  • metaphor
  • objects
  • actions
  • icons

Interface 설계 프로토타입

• 스토리보드
• HTML 프로토타입
• 언어 프로토타입

Interface 혁명

• 휴리스틱
• Walkthrough
• Interactive
• Formal Usability Testing

 
Nevigation 설계
내가 원하는 동작을 시스템이 하게 하기 위해 어떻게 navigation control을 조작할 것인가
사용자는 설명을 읽지 않고, 훈련하지 않고, 외부 도움을 직접 하려 하지 않는다.
Navigation Control 설계의 기본 원칙

• 실수를 방지하라
• 실수에서 회복을 간단히 하라
• 일관된 문법 명령을 사용하라

 
프로그래밍 GUI
그래픽 프로그래밍을 위해 Java APIs를 사용

• JDK 1.0의 JDK의 AWT(Abstract Windowing Toolkit) API
• JDK 1.2의 API를 Java Foundation Class의 일부로 사용
• JDK 8..0의 최근 JavaFX

Others
또한 자바에서 구동되는 graphic API들을 제공한다.

• Eclipse의 표준 Widget Toolkit(SWT)
• Google Web Toolkit(GWT)(안드로이드에서 사용)
• 3D Graphics API (OpenGL의 Java 바인딩과 같은)(JOGL)
• HTML5와 같은 webapp들의 기본