표제지
목차
서론 8
1. 연구의 배경 및 목적 8
2. 연구의 내용 및 방법 12
3. 선행연구 14
제I장 모바일 서비스와 웹 접근성 17
1. 용어의 정의 17
2. 모바일 서비스 21
가. 모바일 서비스의 정의 21
나. 모바일 서비스의 유형 25
3. UI 디자인과 모바일 서비스 UI 디자인 29
가. UI 디자인의 개념 및 필요성 29
나. 모바일 서비스 UI 디자인의 개념 32
다. 모바일 서비스 UI 디자인의 구성요소 34
라. 모바일 서비스 UI 디자인의 특징과 고려사항 44
제II장 국내사이버대학별 모바일 서비스 UI디자인의 조사 및 분석 47
1. 조사 대상 선정 47
2. 조사 방법 및 기준 49
3. UI 디자인 구성요소별 비교분석 51
1) 콘텐츠 정보구조 51
2) 네비게이션 53
3) 레이아웃 59
4) 레이블 65
5) 아이콘 66
6) 타이포그래피 69
7) 컬러 70
4. 조사 결과 및 분석 79
1) 콘텐츠 정보구조 종합결론 79
2) 네비게이션 분석 종합결론 80
3) 레이아웃 분석 종합결론 81
4) 레이블 분석 종합결론 82
5) 아이콘 분석 종합결론 83
6) 타이포그래피 분석 종합결론 83
7) 컬러 분석 종합결론 84
제III장 모바일 서비스 UI 디자인 제안 86
1. 제안 범위 86
2. 디자인 제안 87
1) 콘텐츠 정보구조 87
2) 네비게이션 87
3) 레이아웃 88
4) 레이블 88
5) 아이콘 89
6) 타이포그래피 89
7) 컬러 90
결론 91
참고문헌 94
Abstract 98
[표 1] 데스크탑 PC 웹과 모바일 웹 서비스 환경 비교 24
[표 2] 앱 방식과 웹 방식의 차이 26
[표 3] 네비게이션의 유형 35
[표 4] 네비게이션의 메뉴 유형 36
[표 5] 모바일 해상도 종류 38
[표 6] 레이블의 유형 40
[표 7] 아이콘 디자인의 3원칙 41
[표 8] 아이콘의 유형 42
[표 9] 사이버대학 및 원격대학형태의 평생교육시설 현황 47
[표 10] 사이버대학 모바일 웹&앱 아이콘 48
[표 11] 사이버대학 모바일 웹 서비스 메인 콘텐츠 분류 체계 51
[표 12] 콘텐츠 제공 빈도 52
[표 13] 콘텐츠 레이블링 종합분석표 66
[표 14] 강의/강좌 아이콘 비교 67
[표 15] 학과소개 비교 67
[표 16] 공지사항 비교 68
[표 17] 대학소개 비교 68
[표 18] 입학안내 비교 69
[표 19] 타이포그래피 비교 70
[표 20] 경희사이버대학교 컬러 분석 72
[표 21] 고려사이버대학교 컬러 분석 73
[표 22] 서울디지털대학교 컬러 분석 74
[표 23] 서울사이버대학교 컬러 분석 75
[표 24] 한양사이버대학교 컬러 분석 76
[표 25] 영진사이버대학 컬러 분석 77
[표 26] 영남사이버대학교 컬러 분석 78
[표 27] 통합 콘텐츠 분류표 80
[표 28] 네비게이션 구조 분석표 81
[표 29] 레이아웃 메뉴 방식 분석표 82
[표 30] 타이포그래피 서체 분석표 84
[그림 1] 스마트폰을 통한 인터넷 접속 경로 10
[그림 2] 다양한 종류의 휴대폰 22
[그림 3] 모바일 웹 서비스 등장 배경 23
[그림 4] UI(User Interface) 구조 29
[그림 5] 사람과 컴퓨터 시스템에서의 인터페이스 30
[그림 6] 인터페이스 디자인 과정 32
[그림 7] 레이아웃 영역 요소 38
[그림 8] 레이아웃 세로형 배치 39
[그림 9] 스마트폰 화면 크기 변화 추세 44
[그림 10] 모바일 서비스 UI의 특징 46
[그림 11] iPhone 49
[그림 12] 스마트폰 화면 구성 요소 50
[그림 13] 네비게이션 구조(모바일 서비스 사용자 인터페이스 지침) 53
[그림 14] 경희사이버대학교 네비게이션 구조 54
[그림 15] 고려사이버대학교 네비게이션 구조 54
[그림 16] 서울디지털대학교 네비게이션 구조 55
[그림 17] 서울사이버대학교 네비게이션 구조 56
[그림 18] 한양사이버대학교 네비게이션 구조 57
[그림 19] 영진사이버대학 네비게이션 구조 57
[그림 20] 영남사이버대학교 네비게이션 구조 58
[그림 21] 경희사이버대학교 레이아웃 59
[그림 22] 고려사이버대학교 레이아웃 60
[그림 23] 서울디지털대학교 레이아웃 61
[그림 24] 서울사이버대학교 레이아웃 62
[그림 25] 한양사이버대학교 레이아웃 63
[그림 26] 영진사이버대학 레이아웃 64
[그림 27] 영남사이버대학교 레이아웃 65
[그림 28] I.R.I & Tone 898 system 71
[그림 29] 콘텐츠 정보구조 분석결과 79
[그림 30] I.R.I 단색 Image Scale 분석결과 85
[그림 31] I.R.I 형용사 Image Scale 분석결과 85