서두
UI 는 프로그램의 가장 기본적인 요소이고
사용자가 제일 처음으로 보게 되는 내용이며
사용자 입/출력이 발생하는 요소이기 때문에 매우 중요하다
UI 요구사항 확인
UI 표준과 지침을 근거로 요구사항을 수용한다
- 요구사항을 확인한다
- 요구사항을 반영할 스토리보드를 작성한다
- 요구사항을 반영할 와이어프레임을 작성한다
- 요구사항을 반영할 프로토타입을 개발한다
UX (User Experience)
-
사용자 경험이라는 뜻으로
프로그램에 무엇이 있어야 하는지
전체적인 정보를 수집하여 설계하는 작업이다 -
객관적인 데이터를 이용하여 효과적인 방안을 찾는 기술이다
(소비 분석, 판매 분석)
UX 고려사항
- 직관적이고 쉬운 방법을 선택한다
- 웹이나 모바일 서비스 특성에 적합한 디자인을 선택한다
- 사용자 입력을 최소화 하고 자동 완성 기능을 추가한다
- 사용자 입력 실수를 원래 상태로 되돌릴 수 있는 기능을 추가한다
UI 표준
1) 웹 스타일 가이드 구성
① Instruction
웹 스타일 가이드의 기본 활용 및 적용 범위 등을 정한다
② Basic Rules
색(Color),글자 폰트(Font), 이미지 폰트 등을 정한다
③ Layout
- 웹 페이지의 작업 유형이나 목적별로 시안을 정한다
- 시안은 PC, 모바일, 테블릿 등 기기의 유형에 따라 정한다
- 주 메뉴와 서브 메뉴 위치, 고정 영역과 가변 영역등을 구체적으로 정한다
Layout의 구성요소
1. Indicator
서비스 상태 알림 및 수신 상태, 네트워크 연결 상태, 배터리 상태 등을 아이콘으로 제공한다
2. Header
회사 로고, 사이트명을 제공한다
3. Navicator
웹 페이지에서 자신의 경로 위치를 제공한다
4. Contents Area
정보 내용을 제공한다
5. Button
웹 페이지 메뉴 선택을 제공한다 버튼 위치는 아래에 배치하는 것일 일반적이나 상단에 위치시키는 경우도 있다
6. Footer
저작권 정보, 전화번호, E-Mail의 내용을 제공한다
④ Element
웹 스타일 가이드의 기본 활용 및 적용 범위 등을 정한다
2) 기본 환경
① 용량 규정
- 메인 화면의 전체 용량은 1MB 이내로 한다
- 메인 화면의 이미지 용량은 500KB 이내로 한다
- 서브 화면의 전체 페이지 용량은 200KB 이내로 한다
- 서브 화면의 이미지 용량은 100KB 이내로 한다
- 공통으로 사용하는 이미지 용량은 30KB 이내로 한다
② PC 웹 브라우저 규정
- 해상도는 1280 X 1024 를 기준으로 한다
- 메인 페이지 크기의 가로는 1110px 이내,
세로는 가변 영역으로 처리 한다 - 인터넷 익스플로러(Internet Exprolorer)는
8.0 버전 이상을 지원하도록 한다 - 화면은 중앙 정렬을 기본으로 한다
- 가로 스크롤바(Scrollbar)는 가능한 사용하지 않는다
세로 스크롤바는 메인 페이지에서 2개 이하,
서브 페이지에서는 3개 이하로 한다 - 프레임(Frame)은 가능한 사용하지 않는다
③ 모바일 웹 규정
- 해상도는 640 X 480을 기준으로 한다
- 메인 페이지 크기의 가로는 600px 이내,
세로는 가변 영역으로 처리한다 - 화면은 중앙 정렬을 기본으로 한다
- 가로,세로 스크롤바(Scrollbar)는 사용하지 않는다
- 프레임(Frame)은 가능한 사용하지 않는다
④ 테블릿 웹 브라우저 규정
- 해상도는 1024 X 768을 기준으로 한다
- 메인 페이지 크기의 가로는 825px 이내,
세로는 가변 영역으로 처리 한다 - 가로,세로 스크롤바(Scrollbar)는 사용하지 않는다
- 프레임(Frame)은 가능한 사용하지 않는다
UI 지침
UI 지침의 개념
- 웹이나 모바일 서비스 구축 시 효율적인 정보 전달이 가능하게 하기 위하여 UI설계에서 지켜야 할 세부 사항을 규정 짓는 것이다
1. 핵심 기능
웹이나 모바일 기기 화면의 크기를 고려하여 메뉴 구조를 단순화하고 간결한 정보를 제공하도록 한다
2. 호환성과 확장성
웹이나 모바일 웹에서 3개 이상의 웹 브라우저가 동등한 서비스를 제공하도도록 설계한다
3. 정보 소외 계층의 접근성
웹이나 모바일 구축 시 장애인, 고령자 등을 고려한다
4. 일관성
웹이나 모바일 구축 시 글자체, 색상, 용어 선택 등에 있어서 일관성이 있도록 한다
5. 이미지
웹이나 모바일 구축 시 전송 속도, 전송량 등을 고려하여 용량이 적은 이미지를 사용하도록 한다
6. 사용자 중심
사용자가 쉽게 이해하고 사용할 수 있는 환경을 제공하도록 한다
7. 단순성
간단하고 단순하게 조작할 수 있도록 한다
8. 결과 예측
실행한 결과를 어느 정도는 예측이 가능하도록 한다
9. 가시성
메인화면에 주요 기능을 보이게 하여 쉽게 접근, 조작할 수 있도록 한다
10. 표준화
UI를 표준화 하여 기능 구조를 쉽게 이해할 수 있도록 한다
11. 접근성
업무 분야, 연령, 성별 등의 다양한 계층이 접근할 수 있어야 한다
12. 명확성
사용자가 정확히 인지할 수 있도록 한다
13. 오류 발생
오류 발생 시 사용자가 오류에 대한 이해와 오류를 쉽게 해결할 수 있도록 한다
UI 설계
UI 설계의 개념
-
UI 요구사항과 UI 표준 및 지침을 기준으로 UI 설계를 한다
1). 화면의 전체 폼(Form)을 설계한다
2). 제약사항을 화면과 폼(Form)에 적용한다
3). 흐름 설계에 반영한다 -
사용자의 편의성을 고려한 메뉴 구조를 설계한다
-
하위시스템 단위의 내부, 외부화면과 폼(Form) 등의 상세 설계를 한다
UI 설계 원칙
1. 직관성
누구나 쉽게 이해하고 사용할 수 있어야 한다
2. 유효성
사용자의 목적을 정확하게 전달할 수 있어야 한다
3. 학습성
누구나 쉽게 배우고 익힐 수 있어야 한다
4. 유연성
사용자의 요구사항을 최대로 수용해야 하며, 사용자 인터페이스 시에 오류가 최소화 되어야 한다
UI 설계 절차
1). 문제 정의
- 개발할 소프트웨어의 목적을 정의한다
- 개발할 소프트웨어의 해결할 문제를 정의한다
2). 사용자 모델 정의
- 사용자의 명확한 특성을 결정한다
- 사용자는 컴퓨터 지식 정도에 따라 초보자, 중급자, 숙련자로 분류한다
3). 작업 분석
- 해결해야 할 문제를 정의한다
- 사용자의 특성을 세부적으로 분류한다
- 개발할 소프트웨어를 통해 처리해야 하는 작업을 정의한다
4). 컴퓨터 오브젝트 및 기능 정의
- 분석한 작업을 어떤 사용자가 인터페이스를 통해 표현할 것인지 정의한다
- 분류된 사용자별로 작업할 오브젝트 및 기능을 정의한다
5). 사용자 인터페이스 정의
- 사용자와 상호 작용하는 오브젝트를 선택하고 선택한 오브젝트의 운영 상태를 명확히 정의한다
6). UI 설계 평가
- 설계한 UI가 분석한 작업에 맞게 설계 되었는지 평가한다
- 설계한 UI가 사용자의 능력이나 지식에 맞게 설계되었는지 평가한다
- 설계한 UI가 사용자가 사용하기 쉽고 편리한지 평가한다
GOMS, 휴리스틱, 사용성 공학을 통해서 사용성 평가를 할 수있다
용어 설명
- GOMS (Goals, Operation, Methods, Selection rule)
사용자가 설계된 UI를 어떻게 이해하고 배우며 사용하는지를 예측하여 소요되는 시간이나 학습 시간 등을 평가하기 위한 방법이다
- 휴리스틱
과학적인 것보다는 경험이나 직관에 의해 의사를 결정하는 방식
- 사용성 공학 (Usability Engineering)
넓은 의미의 HCI (Human-Computer Interface, 인간과 컴퓨터의 상호 작용)으로 사용자와 컴퓨터간의 상호 자굥ㅇ에 대해 연구하는 학문 분야이다
UI 흐름 설계
1). 화면에 구현 기능을 정의
① 기능적 요구사항에 대한 설명을 정리한다
- 입출력 데이터를 설계하고 명세화한다
- 데이터 등록, 수정, 삭제 등의 기능을 설계하고 명세화 한다
- 이벤트에 따른 수행 기능을 설계하고 명세화한다
② 비기능적 요구사항에 대한 설명을 정리한다
- 플랫폼 및 적용 기술 등의 환경적 요구 기능을 명세화한다
- 처리속도, 용량 등의 성능을 명세화한다
- 제약사항을 명세화한다
2). 화면의 입력 요소를 파악
- 화면에서 수행되어야 할 기능을 파악한다
- 화면에 입력 항목을 파악한다
- 화면 간 이동과 흐름을 파악한다
3). UI 요구사항의 유스케이스 설계
- 액터별 시나리오를 설계한다
- 액터의 상호 작용을 세분화 하여 설계한다
용어 설명
- 유스케이스 (Usecase)
- 시스템의 행동을 나타낸다
- 소프트웨어가 액터에게 제공하기 위한 기능이다
- 액터 (Actor)
사용자를 나타낸다
소프트웨어 외부에 존재하면서 소프트웨어와 상호 작용하는 객체이다
UI 상세 설계
1). 메뉴 구조 설계
- 사이트 맵의 구조를 설계하고 명세화한다
- 전체화면과 하위 시스템의 내부, 외부 화면과 폼(Form) 등을 설계하고 명세화한다
2). UI 검토 및 보완
- UI의 반복적인 검토를 통해 상세 설계한다
- 주요 UI나 완성도가 필요한 UI를 검토하여 상세 설계한다
- UI 평가를 수행하고, 결과를 바탕으로 상세 설계를 보완한다
UI 설계 도구
- 1. 문서작성 도구 및 드로잉 전문 도구
- 일반 문서 작성 프로그램이다
웹 사이트, 윈도 컴포넌트, 블록 다이어그램 등
다양한 스탠실을 제공하는 도구이다
- 2. 화면 설계를 위한 전문 도구
- 화면 스케치를 위한 단순하고 전문화된 기능을 제공하는 프로그램이다
- 3. UI 설계 및 개발 전문도구
- UI 패턴, UI 설계, UI 디자인, UI 소스 코드 생성 등을 수행하는 도구이다
화면의 품질 확보와 생산성 향상을 위한 전문 프로그램이다
- 4. 해당 UI 플랫폼에 포함된 도구
- 해당 플랫폼에서 프로토타이핑하여 협의를 할 수 있는 도구이다
협의한 내용을 바탕으로 바로 코딩을 해볼 수 있는 프로그램이다
- 5. 인터랙션 (Interaction) 도구
- 계획 단계에서 화면 UI 설계 및 인터랙션 적용에 적합한 도구이다
설계 작업 이후 이미 설계된 이미지의 인터랙션 적용에 적합한 도구이다
