표제지
목차
국문초록 7
ABSTRACT 9
Ⅰ. 서론 11
1. 연구목적 및 배경 11
2. 연구범위 및 방법 12
Ⅱ. 웹사이트 인터페이스 디자인과 긴장감의 이론적 고찰 14
1. 웹사이트 인터페이스 디자인 14
1.1. 웹사이트 인터페이스 디자인의 개념 14
1.2. 웹사이트 인터페이스 디자인의 기능과 역할 16
1.3. 웹사이트 인터페이스 디자인의 필요성 16
2. 긴장감의 이론적 고찰 18
2.1. 인지심리학에서의 긴장감 18
2.2. 게쉬탈트(gestalt)심리학에서의 긴장감 22
2.2.1. 군집화(law of Grouping) 22
2.2.2. 간결성(law of Simplicity)분석 23
2.2.3. 연속성(law of continuation)분석 23
2.2.4. 폐쇄성(law of Closure)분석 24
2.3. 디지털 매체를 중심으로 한 긴장감의 활용 사례 25
2.3.1. 화상처리 25
2.3.2. 광고 및 방송 26
2.3.3. 게임 27
2.3.4. 교육 및 출판 27
2.3.5. 예술 28
3. 웹사이트 인터페이스 디자인의 구성요소 28
3.1. 웹사이트 인터페이스 디자인의 시각적 요소 29
3.1.1. 레이아웃 29
3.1.2. 타이포그래피 (Typography) 30
3.1.3. 색채 (Color) 31
3.1.4. 모션 (Motion) 32
3.1.5. 기타 33
3.2. 웹사이트 인터페이스 디자인의 청각적 요소 37
3.2.1. 배경음악 37
3.2.2. 음향효과(Effect Sound) 38
Ⅲ. 웹사이트 인터페이스 디자인에서 긴장감 표현의 사례분석 39
1. 긴장감 표현의 분석 기준 39
1.1. 시각적 요소에서의 긴장감 표현 39
1.1.1. 레이아웃에서의 긴장감 표현 39
1.1.2. 타이포그래픽에서의 긴장감 표현 42
1.1.3. 색채에서의 긴장감 표현 44
1.1.4. 모션에서의 긴장감 표현 46
2. 웹사이트 인터페이스 디자인에서 긴장감 표현의 사례분석 49
2.1. 분석 대상 및 분석 방법 49
2.2. 긴장감 표현 사례분석 1(HYUNDA CLICK) 51
2.2.1. 스토리보드 51
2.2.2. 사례 분석 52
2.3. 긴장감 표현 사례분석 2(SILKROAD) 53
2.3.1. 스토리보드 53
2.3.2. 사례 분석 54
2.4. 긴장감 표현 사례분석 3(Stop Thinking) 55
2.4.1. 스토리보드 55
2.4.2. 사례분석 56
2.5. 긴장감 표현 사례분석4(제일기획-예비광고인) 57
2.5.1. 스토리보드 57
2.5.2. 사례분석 58
2.6. 긴장감 표현 사례분석5(ID 10100-에피소드 1) 59
2.6.1. 스토리보드 59
2.6.2. 사례분석 60
3. 평가를 위한 사례분석 결과 61
Ⅳ. 웹사이트 인터페이스 디자인에서 긴장감 표현에 대한 인지.감성실험 63
1. 실험계획 63
2. 실험목적 64
3. 실험방법 64
3.1. 인터넷 설문조사 64
3.2. 자료 분석 방법 65
3.3. 설문구성 65
3.4. 실험모델제작 67
4. 표본집단의 선정 68
4.1. 피 실험자의 유형 68
4.2. 표본 집단의 추출 69
5. 실험의 실시 70
6. 실험 결과 73
6.1. 집단간 유의도 결과 및 논의 76
Ⅴ. 결론 및 제언 80
참고문헌 83
Appendix 85
Appendix1. 유형 A 설문지 85
Appendix2. 유형 B 설문지 88
Appendix3. 유형 A 결과 91
Appendix4. 유형 B 결과 92
Appendix5. 국내 웹에이전시 93
[표 1] 레이아웃에서의 긴장감 표현 40
[표 2] 타이포그래픽에서의 긴장감 표현 42
[표 3] 색채에서의 긴장감 표현 44
[표 4] 모션에서의 긴장감 표현 46
[표 5] 웹사이트 인터페이스 디자인의 시각적 요소에서 효과적인 긴장감 표현의 분석 기준 48
[표 6] 분석대상 50
[표 7] hyunda click story board 51
[표 8] 긴장감 표현 분석 52
[표 9] SILKROAD story board 53
[표 10] 긴장감 표현 분석 54
[표 11] Stop Thinking story board 55
[표 12] 긴장감 표현 분석 56
[표 13] 제일기획-예비광고인 story board 57
[표 14] 긴장감 표현 분석 58
[표 15] ID10100 story board 59
[표 16] 긴장감 표현 분석 60
[표 17] 실험 웹사이트 선정 67
[표 18] 인터넷 사용자의 표본선택에 따른 편중(Sampling Bias) 68
[표 19] 인터넷 사용 인구통계학적 데이터 73
[표 20] 두 그룹간의 웹사이트 인터페이스 디자인에서 긴장감 표현의 인지·감성에 대한 비교 74
[표 21] 유형A1-1, 유형A1-2와 B1에서 긴장감 표현의 인지·감성에 대한 비교 76
[표 22] 유형A2-1, 유형A2-2와 B2 에서 긴장감 표현의 인지·감성에 대한 비교 76
[표 23] 유형A3-1, 유형A3-2와 B3 에서 긴장감 표현의 인지·감성에 대한 비교 77
[표 24] 유형A4-1, 유형A4-2와 B4 에서 긴장감 표현의 인지·감성에 대한 비교 78
[표 25] 유형A5-1, 유형A5-2와 B5에서 긴장감 표현의 인지·감성에 대한 비교 78
[그림 1] 지각과정 11
[그림 2] 컴퓨터와 사용자의 인터페이스 구조도 15
[그림 3] 지각의 생리적 구조 19
[그림 4] 기억 모델에 대한 도식 20
[그림 5] 간결성 23
[그림 6] 인터페이스 흐름도 24
[그림 7] 폐쇄성 25
[그림 8] http://ww.desktopimage.com 40
[그림 9] http://www.dform1shiftfunc.net/# 40
[그림 10[http://www.telecable.es/personales/pnt 41
[그림 11] http://www.taigkhris.com 41
[그림 12] http://www.shorn.com 43
[그림 13] http://www.frostdesign.co.uk/done.html 43
[그림 14] http://www.thedesignersrepublic.com 43
[그림 15] http://www.threeoh.com/v06/structure.html 43
[그림 16] 45
[그림 17] http://towatei.co.kr/towa_album.htm 45
[그림 18] http://www.designunion.net 45
[그림 19] http://www.designunion.net 45
[그림 20] http://www.mjau-mjau.com/eidesound/index7.html 47
[그림 21] http://www.gecko9.com/hi.html 47
[그림 22] http://www.kokingfc.com 47
[그림 23]http://www.zubvector.com/zv/flash_index.htm 47
[그림 23] 실험계획도 63
[그림 24] 연령별 인터넷 이용률 70
[그림 25] 학력별 인터넷 이용률 70
[그림 26]유형 A 설문지 멜 발송 71
[그림 27]유형 B 설문지 멜 발송 71
[그림 28] 인구통계학적 데이터를 위한 설문 71
[그림 29] 설문내용 72
[그림 30] 설문완료 72
[그림 31] 결과보기 72
[그림 32] 결과 72
[그림 33] 두 그룹간의 웹사이트 인터페이스 디자인에서 긴장감 표현의 인지·감성에 대한 평균의 막대 그래프 75