시스템 분석 및 설계 글로컬 IT 학과 김정기

Chapter 11: 유저 인터페이스 설계

목적 유저 인터페이스(User Interface; UI) 설계 법칙의 여러 가지 기초를 이해 UI 설계 과정, UI 구조 설계 방법, UI 표준 설계 방법의 이해 네비게이션 설계, 입력 설계, 출력 설계에 공통적으로 사용되는 법칙과 기술을 이해 유저 인터페이스 설계 기술 습득 인간 컴퓨터 상호작용 (HCI) 계층 상 비기능적 요구사항의 현상 이해 글로컬IT학과 김정기 2012-05-24

개요 인터페이스 설계는 외부 엔티티와 시스템 간의 상호작용을 형식화 한 것 인터페이스 설계는 외부 엔티티와 시스템 간의 상호작용을 형식화 한 것 시스템 인터페이스(System Interfaces )는 시스템 통합의 한 부분으로 기계 간 처리 유저 인터페이스(User Interfaces) 는 인간 컴퓨터 간의 소통이며 이번 장에서 주로 다룸 글로컬IT학과 김정기 2012-05-24

유저인터페이스 설계의 법칙

유저인터페이스 설계의 법칙 글로컬IT학과 김정기 2012-05-24

일반 레이아웃(General Layout) Navigation Area Reports & Forms Area Status Area 글로컬IT학과 김정기 2012-05-24

Form Content Awareness Name Area Phone Numbers Area 글로컬IT학과 김정기 2012-05-24

Report Content Awareness First Record Area Second Record Area 글로컬IT학과 김정기 2012-05-24

미학적으로 나쁜 예 글로컬IT학과 김정기 2012-05-24

다중 인터페이스 (사용자 경험 마이크로 소프트 윈도우는 같은 기능에 대해 다중 인터페이스를 보유 마이크로 소프트 윈도우는 같은 기능에 대해 다중 인터페이스를 보유 대부분의 사용자는 파일을 다룰 때 윈도우 익스플로러를 선호 전문 사용자는 가끔 명령 창 인터페이스를 선호 글로컬IT학과 김정기 2012-05-24

5단계 유저 인터페이스 설계 과정 Use Scenarios Development Interface Structure Design Interface Standards Design Interface Design Prototyping Interface Evaluation 글로컬IT학과 김정기 2012-05-24

사용 시나리오 개발 사용 시나리오는 사용자에 의해 수행되는 작업의 일부에 대한 밑그림 사용 시나리오는 사용자에 의해 수행되는 작업의 일부에 대한 밑그림 사용 시나리오는 필수 유스 케이스를 통한 한가지 경로 간단한 서술적 기술로 표현 가장 공통적인 케이스에 대해 문서화하여 인터페이스 설계로 각 경우에 따라 쉽게 쓰도록 함 글로컬IT학과 김정기 2012-05-24

인터페이스 구조 설계 인터페이스 구조는 다음을 정의 Windows Navigation Diagrams (WND) 은 인터페이스의 기본 요소 사용자에게 기능성을 어떻게 조합해 작동할 지 Windows Navigation Diagrams (WND) 은 시스템과 관련되는 모든 스크린과 폼, 리포트가 어떻게 사용될 지 보여 줌 어떻게 사용자가 한 가지에서 다른 것으로 이동할지 보임 글로컬IT학과 김정기 2012-05-24

인터페이스 표준 설계 인터페이스 표준은 시스템 유저 인터페이스를 통해 기본 요소로 작용 표준은 다음을 요구: 인터페이스 표준은 시스템 유저 인터페이스를 통해 기본 요소로 작용 표준은 다음을 요구: 인터페이스 메타포어(Interface metaphor) 인터페이스 객체(Interface objects) 인터페이스 활동(Interface actions) 인터페이스 아이콘(Interface icons) 인터페이스 템플릿(Interface templates) 글로컬IT학과 김정기 2012-05-24

인터페이스 설계 프로토타입 모형(Mock-ups)이나 컴퓨터 스크린, 폼, 리포트의 시뮬레이션 4가지 공통 접근법 스토리보드 (Storyboard) 윈도우 레이아웃 다이어그램 HTML 프로토타입 언어 프로토타입 글로컬IT학과 김정기 2012-05-24

스토리보드 예 글로컬IT학과 김정기 2012-05-24

네비게이션 기본 설계의 법칙 I 사용자 입장 모든 제어는 명확해야 하고 이해하기 쉽고 스크린 상의 직관적 위치에 와야 한다. 매뉴얼을 읽지 않는다 훈련에 참석하지 않는다 외부 도움을 잘 받질 못한다 모든 제어는 명확해야 하고 이해하기 쉽고 스크린 상의 직관적 위치에 와야 한다. 글로컬IT학과 김정기 2012-05-24

네비게이션 기본 설계의 법칙 II 실수 방지 실수로부터의 복귀를 간소화 일관된 문법 순서를 사용 선택의 제한 사용할 수 없는 명령어는 표시하지 않는다 (혹은 “gray them out”) 취소(undo)가 어렵거나 불가능한 행동을 확인 실수로부터의 복귀를 간소화 일관된 문법 순서를 사용 글로컬IT학과 김정기 2012-05-24

공통 네비게이션 메뉴 Drop-down menu Menu bar Grayed-out commands Cascading menu 글로컬IT학과 김정기 2012-05-24

입력 설계의 기본 법칙 목표는 간단하고 쉽게 시스템에 정확한 정보를 갈무리 하는 것 입력의 천성을 반영 목표는 간단하고 쉽게 시스템에 정확한 정보를 갈무리 하는 것 입력의 천성을 반영 입력 수집을 간소화 하는 방법을 찾는다. 글로컬IT학과 김정기 2012-05-24

입력 유효성 형식 Validation Type When to Use Completeness check Format check When several fields must be entered before the form can be processed Format check When fields are numeric or contain coded data Range check With all numeric data, if possible Check digit check When numeric codes are used, such as when checking credit card numbers Consistency check When data are related, such as when the user enters both a birth date and a date of marriage (birth < marriage) Database check When data are available to be checked, such as when a user selects a user ID and we need to ensure it is not already taken 글로컬IT학과 김정기 2012-05-24

출력 설계의 기본 법칙 리포트 사용법을 이해 정보 부담(load)을 관리 편향(bias)을 최소화 참조 혹은 처음부터 끝까지? 빈도수? 실시간 또는 묶음(batch) 보고서? 정보 부담(load)을 관리 모든 필요한 정보만, 불필요한 부분은 제외 편향(bias)을 최소화 글로컬IT학과 김정기 2012-05-24

비기능적 요구사항 운영상 요구사항(Operational Requirements) 사용 가능한 기술 (예: GUI, 마우스) 성능 요구사항(Performance Requirements) 유저인터페이스 툴킷의 속도와 용량 보안 요구사항(Security Requirements) 유저인터페이스의 제약 (예: ATM 기계) 정치적, 문화적 요구사항 날짜 형식, 색과 아이콘 글로컬IT학과 김정기 2012-05-24

요약 유저인터페이스 설계의 법칙 유저인터페이스 설계 과정 네비게이션 설계 입력 설계 출력 설계 비기능적 요구사항 글로컬IT학과 김정기 2012-05-24

Chapter 12: 구조 (Architecture)

목적 다른 물리적 구조 요소를 이해 서버기반, 클라이언트기반, 클라이언트-서버 물리 구조를 이해 분산 객체 계산에 익숙할 것 서버기반, 클라이언트기반, 클라이언트-서버 물리 구조를 이해 분산 객체 계산에 익숙할 것 전개 다이어그램(deployment diagram)을 이용하여 네트워크 모델 생성 할 수 있을 것 어떻게 운영상, 성능, 보안, 문화, 정치적 요구사항이 물리적 구조 계층에 영향을 미치는 지 이해 어떻게 하드웨어와 소프트웨어 명세를 생성하는 지 익숙할 것 글로컬IT학과 김정기 2012-05-24

구조적 요소 소프트웨어 요소 하드웨어 요소 데이터 저장소(Data storage) 데이터 접근 논리(Data access logic) 응용물 논리(Application logic) 표현 논리(Presentation logic) 하드웨어 요소 컴퓨터 (클라이언트, 서버) 네트워크 글로컬IT학과 김정기 2012-05-24

서버 기반 구조 서버는 모든 4가지 응용 기능을 수행 클라이언트는 오직 모니터와 키보드, 그리고 연결 장치 (예: 모뎀)만 필요 Data Storage Data Access Logic Application Logic Presentation Logic 글로컬IT학과 김정기 2012-05-24

클라이언트 기반 구조 모든 논리가 클라이언트 컴퓨터에 존재 한 분리된 컴퓨터가 데이터를 가질 수도 있음 개발이 용이하지만 유지보수가 어렵다 Data Access Logic Application Logic Presentation Logic Data Storage 글로컬IT학과 김정기 2012-05-24

클라이언트-서버 구조 클라이언트와 서버 사이에 균형 있는 처리 현대 시스템의 주도적 구조 클라이언트 처리의 양은 다양 씬 클라이언트(thin clients) 오직 표현 논리 (presentation logic)만 실행 씩 클라이언트(thick clients)는 표현과 응용 논리를 수행 Application Logic Presentation Logic Data Storage Data Access Logic 글로컬IT학과 김정기 2012-05-24

클라이언트-서버 계층(Tiers) 클라이언트 서버 구조는 응용 논리 분할에 따라 둘 혹은 그 이상의 계층(tiers)을 가질 수 있음 2-tier: 모든 응용과 데이터 논리가 한 서버에 3-tier: 응용 논리는 한 서버, 데이터 논리는 또 다른 서버에 4-tier: 응용 논리가 두 개의 서버에 분리, 데이터 논리는 또 다른 서버에 n-tier architecture로 종종 불리기도 함 글로컬IT학과 김정기 2012-05-24

분산 객체 계산 클라이언트-서버 계산의 다음 세대 클라이언트는 어떤 서버를 부를지 알 필요가 없음 미들웨어(Middleware )가 클라이언트의 요청을 가로채 적당한 서버에 요청을 보내줌 세 개의 경쟁적 접근 코바(CORBA) -> 웹서비스(?) EJB(Enterprise Java Beans) 닷넷(.NET) 글로컬IT학과 김정기 2012-05-24

물리적 구조 선택 기초 구조(infrastructure)의 비용 개발 비용 개발의 용이성 인터페이스 역량(Interface capabilities) 제어와 보안 규모 가변성(Scalability) 글로컬IT학과 김정기 2012-05-24

구조 특징 Server-Based Client-Based Client-Server Cost of infrastructure Very high Medium Low Cost of development High Ease of development Low-Medium Interface capabilities Control and Security Scalability 글로컬IT학과 김정기 2012-05-24

전개 다이어그램 한 정보 시스템의 하드웨어 요소간의 관계를 표현 한 전개 다이어그램(deployment diagram)의 구성 요소 노드(Nodes): 한 계산 자원 아티팩트(Artifacts): 한 노드에 설치될 정보 시스템의 한 조각 연결 경로(Communication paths): 네트워크 연결이나 USB 케이블 같은 연결 고리 글로컬IT학과 김정기 2012-05-24

Deployment Diagram 표본 글로컬IT학과 김정기 2012-05-24

네트워크 모델 정보 시스템의 주요 구성 요소와 그 요소들의 기관에서의 지리적 위치를 보여줌 네트워크 모델의 목적: 정보 시스템의 주요 구성 요소와 그 요소들의 기관에서의 지리적 위치를 보여줌 네트워크 모델의 목적: 시스템의 복잡성을 전함 어떻게 시스템의 소프트웨어 요소가 서로 맞을 지 보여줌 글로컬IT학과 김정기 2012-05-24

네트워크 모델 표본 글로컬IT학과 김정기 2012-05-24

비기능적 요구사항 운영상(Operational) 성능(Performance) 보안(Security) 문화적이고 정치적(Cultural and Political) 글로컬IT학과 김정기 2012-05-24

운영상 요구사항 기술 환경상(Technical Environment) 요구사항 하드웨어와 소프트웨어 유형 시스템 통합 (System Integration ) 요구사항 다른 시스템과 상호작용 호환성 (Portability) 요구사항 변화하는 환경에 반응 유지관리(Maintainability) 요구사항 기대되는 경영 요구사항 변화 글로컬IT학과 김정기 2012-05-24

성능 요구사항 속도 (Speed) 용량 (Capacity) 시스템의 응답 속도 트랜잭션 수정 시간 용량 (Capacity) 사용자 수 데이터 크기 유효성과 안정성 (Availability and Reliability) 가용한 시간을 상세화 허용되는 실패율 보안 (Security) 붕괴와 데이터 손실로부터 보호 글로컬IT학과 김정기 2012-05-24

보안 요구사항 글로컬IT학과 김정기 2012-05-24

문화적이고 정치적 요구사항 다중 언어(Multilingual) 요구사항 주문형(Customization) 요구사항 명확하게 관용적 표준(unstated norms)을 표현 법률적 요구사항(Legal requirements) 글로컬IT학과 김정기 2012-05-24

문화적이고 정치적 요구사항 글로컬IT학과 김정기 2012-05-24

요약 물리적 구조 계층의 구성요소 기초구조 설계(Infrastructure Design) 비기능적 요구사항 글로컬IT학과 김정기 2012-05-24