표제지
목차
논문개요 10
Ⅰ. 서론 12
A. 연구의 배경 및 목적 12
B. 연구 방법 및 범위 14
Ⅱ. 이론적 배경 17
A. 웹툰과 모바일 애플리케이션 17
1. 코로나 팬데믹 이후 문화 소비에 대한 사회적 변화 양상 17
2. 웹툰 정의 및 현황 18
3. 모바일 웹툰 애플리케이션의 사용성 동향 20
B. UI 디자인의 이해 21
1. UI 디자인의 정의 21
2. 모바일 UI 디자인 구성요소 23
C. 사용성 평가의 이해 27
1. 사용성 27
2. 사용성 평가 29
3. 모바일 웹툰 애플리케이션의 사용성 평가 기준 31
Ⅲ. 사례 분석 32
A. 모바일 웹툰 애플리케이션 사례 32
1. 대상 선정 및 범위 32
2. 사례 분석 32
B. 작업지원수준 분석 34
1. 콘텐츠 정보구조 34
C. 사용편의성 분석 35
1. 조작순서 35
2. 내비게이션 37
D. 미학적 구성 분석 38
1. 레이아웃 38
2. 아이콘 41
3. 타이포그래피 42
4. 컬러 44
E. 소결 46
Ⅳ. 사용성 조사 50
A. 연구 개요 및 방법 50
B. 사용성 평가 51
1. 조사 목적 및 개요 51
2. 사용성 테스트 (Usability Testing) 52
3. 사용자 인터뷰 (User interview) 65
C. 사용자 요구사항 도출 75
1. 어피니티 다이어그램(Affinity Diagram) 75
D. 모바일 웹툰 애플리케이션 UI 디자인 가이드라인 제안 80
1. 콘텐츠 정보구조 83
2. 조작순서 84
3. 내비게이션 85
4. 레이아웃 86
5. 아이콘 88
6. 타이포그래피 89
7. 컬러 90
Ⅴ. 결론 및 한계 91
참고문헌 94
부록 1. 사용성 조사 동의서 97
ABSTRACT 98
〈표 1〉 연구 프로세스 16
〈표 2〉 세대별 웹툰의 특징 19
〈표 3〉 UI 디자인의 개념 정의 22
〈표 4〉 선행연구 UI 구성요소 23
〈표 5〉 모바일 UI 설계 분류 24
〈표 6〉 정보구조의 종류 25
〈표 7〉 사용성의 속성 28
〈표 8〉 모바일 디바이스 사용성 요소 28
〈표 9〉 앨리슨 제이 헤드(Alison J. Head)의 UI 평가 원칙 30
〈표 10〉 허니콤 모델의 평가 요소 30
〈표 11〉 모바일 웹툰 애플리케이션 사용성 평가 기준 31
〈표 12〉 사례 분석 연구 개요 33
〈표 13〉 사례 분석 기준표 33
〈표 14〉 모바일 웹툰 애플리케이션 메인 화면 34
〈표 15〉 요일 연재 웹툰 이용 과정 조작순서 35
〈표 16〉 내비게이션 구성 유형 37
〈표 17〉 요일 연재 화면 레이아웃 비교 39
〈표 18〉 작품 회차 화면 레이아웃 비교 40
〈표 19〉 메인 화면, 요일 연재 화면, 작품 회차 화면 아이콘 41
〈표 20〉 하단 탭바 아이콘 42
〈표 21〉 타이포그래피 비교 43
〈표 22〉 컬러 비교 44
〈표 23〉 사례 분석 결과 48
〈표 24〉 작업지원수준 분석 종합결론 49
〈표 25〉 사용편의성 분석 종합결론 49
〈표 26〉 미학적 구성 분석 종합결론 49
〈표 27〉 모바일 웹툰 애플리케이션 사용성 평가 개요 51
〈표 28〉 사용성 평가 집단 52
〈표 29〉 사전 인터뷰 문항 53
〈표 30〉 태스크 시나리오 53
〈표 31〉 태스크 성공에 따른 측정 체계 54
〈표 32〉 이용 계기 55
〈표 33〉 선정 기준 56
〈표 34〉 네이버 웹툰 태스크 성공수위 결과 57
〈표 35〉 네이버 웹툰 평가 항목 분석 58
〈표 36〉 다음 웹툰 태스크 성공수위 결과 59
〈표 37〉 다음 웹툰 평가 항목 분석 60
〈표 38〉 레진코믹스 태스크 성공수위 결과 61
〈표 39〉 레진코믹스 평가 항목 분석 62
〈표 40〉 카카오페이지 태스크 성공수위 결과 63
〈표 41〉 카카오페이지 평가 항목 분석 64
〈표 42〉 사용성 테스트 사후 인터뷰 문항 65
〈표 43〉 평가 요인 인터뷰 문항 65
〈표 44〉 사용성 테스트 사후 인터뷰 응답 내용 66
〈표 45〉 유용성에 대한 응답 내용 68
〈표 46〉 검색성에 대항 응답 내용 69
〈표 47〉 사용성에 대한 응답 내용 70
〈표 48〉 접근성에 대한 응답 내용 71
〈표 49〉 유연성에 대한 응답 내용 71
〈표 50〉 매력성에 대한 응답 내용 72
〈표 51〉 어피니티 다이어그램(Affinity Diagram) 구축 프로세스 75
〈표 52〉 어피니티 다이어그램(Affinity Diagram) 결과 79
〈표 53〉 사례 분석, 어피니티 다이어그램 요약정리 80
〈표 54〉 모바일 웹툰 애플리케이션 UI 디자인 가이드라인 제안 82
〈표 55〉 콘텐츠 정보구조 설계 시 체크리스트 83
〈표 56〉 조작순서 설계 시 체크리스트 84
〈표 57〉 내비게이션 설계 시 체크리스트 85
〈표 58〉 레이아웃 디자인 시 체크리스트 87
〈표 59〉 아이콘 디자인 시 체크리스트 88
〈표 60〉 타이포그래피 디자인 시 체크리스트 89
〈표 61〉 컬러 디자인 시 체크리스트 90
[그림 1] 작업지원수준 어피니티 다이어그램(Affinity Diagram) 76
[그림 2] 사용편의성 어피니티 다이어그램(Affinity Diagram) 77
[그림 3] 미학적 구성 어피니티 다이어그램(Affinity Diagram) 78
[그림 4] 레이아웃 가이드라인 86