표제지
목차
국문초록 10
제I장 서론 12
1. 연구 배경 및 목적 12
2. 연구 방법 및 범위 14
제II장 마이크로사이트 개념과 유형 15
1. 마이크로사이트의 개념과 특징 15
2. 마이크로사이트의 유형 16
가. 브랜드 사이트(brand site) 유형 16
나. 컨셉 사이트(concept site) 유형 18
다. 스폰서 쉽(Sponsor ship) 사이트 19
라. 웹 브로슈어 유형 19
제III장 인터랙티브 모션그래픽의 일반적 고찰 21
1. 인터랙션에 대한 기존 논의 22
가. 인터랙션 정의 23
나. 인터랙션 디자인 25
다. 인터랙션 디자인의 시각적 구성요소 29
2. 모션그래픽의 이론적 접근 40
가. 모션그래픽의 개념 40
나. 모션그래픽의 상호작용 41
다. 모션그래픽의 구성요소 43
제IV장 Web site에 적용된 표현 분석 54
1. 사례분석을 위한 마이크로사이트 선정 범위 54
2. 마이크로사이트에 활용된 표현 분석 방법 56
3. Micro site에 적용된 표현 분석 58
가. 삼성 Galaxy S 58
나. 소니 Xperiax10 65
다. HTC Desire HD 74
라. 모토로라 Motorpoi 81
4. 표현 방법의 분석 결과 86
가. 레이아웃 86
나. 모션그래픽 87
다. 아이콘 88
라. 타이포그래피 90
마. 사운드 91
제V장 문제점 및 개선방향 93
제VI장 결론 95
참고문헌 97
Abstract 101
〈표 1〉 객관적 시간의 요소 48
〈표 2〉 주관적 시간 요소 48
〈표 3〉 추출된 마이크로사이트 54
〈표 4〉 최종 선정된 마이크로사이트 55
〈표 5〉 마이크로사이트에 활용된 인터랙티브 모션그래픽의 세부 분석 항목 57
〈표 6〉 레이아웃 종합 분석표 86
〈표 7〉 모션그래픽 종합 분석표 87
〈표 8〉 아이콘 종합 분석표 88
〈표 9〉 타이포그래피 종합분석표 90
〈표 10〉 사운드 종합 분석표 91
〈그림 1〉 삼성전자 브랜드사이트 17
〈그림 2〉 베네통 코리아 컨셉 사이트 18
〈그림 3〉 코스모 플라워 컨셉 사이트 18
〈그림 4〉 현대자동차 스폰서 쉽 사이트 19
〈그림 5〉 모션그래픽과 인터랙티브 22
〈그림 6〉 인터랙션의 개념 24
〈그림 7〉 인터랙션 디자인의 개념 26
〈그림 8〉 리차드 뷰캐넌의 인터랙션의 4가지 유형 27
〈그림 9〉 인터랙션 디자인 프로세스 28
〈그림 10〉 기본적인 레이아웃 1 (한게임 게임 톡) 30
〈그림 11〉 기본적인 레이아웃2 (매일아이) 31
〈그림 12〉 다양한 레이아웃 적용 (한스 벨리, 메리츠 화재) 31
〈그림 13〉 마이크로사이트에 적용된 그래픽 (쟈뎅 커피, 옵티머스 마하) 34
〈그림 14〉 타이포그래피로 표현한 사이트 (SKY 더 플레이어) 35
〈그림 15〉 모션 타이포그래픽으로 표현한 사이트(강남 밝은 세상 안과) 35
〈그림 16〉 apple사의 아이콘 36
〈그림 17〉 HTC Desire HD 사이트 화면 전환 브릿지(좌), 화면전환(우) 37
〈그림 18〉 마우스 방향에 따른 메인 이미지의 변화 38
〈그림 19〉 모션그래픽 개념의 확장 40
〈그림 20〉 모션그래픽과 인터랙티브 모션그래픽의 특징 42
〈그림 21〉 모션그래픽의 감성전달 43
〈그림 22〉 데카르트 좌표계 44
〈그림 23〉 3차원 공간감을 보여주는 모션그래픽 45
〈그림 24〉 프레임 종횡 비 45
〈그림 25〉 종횡비 별 레이아웃 활용 46
〈그림 26〉 다양한 움직임을 보여주는 모션그래픽 적용 사이트 카카로드) 49
〈그림 27〉 타이포 모션그래픽 50
〈그림 28〉 메타포에 컬러를 이용한 모션그래픽 사이트 53
〈그림 29〉 삼성 Galaxy S 마이크로사이트 레이아웃 58
〈그림 30〉 콘텐츠 표현 영역에서 활성화된 콘텐츠와 비활성화 콘텐츠의 모습 59
〈그림 31〉 삼성 Galaxy S 콘텐츠 표현 영역 레이아웃 59
〈그림 32〉 삼성 Galaxy S 모션그래픽을 활용한 화면전환 60
〈그림 33〉 삼성 Galaxy S 화면전환 시퀀스 타임라인 61
〈그림 34〉 삼성 Galaxy S 화면전환 시퀀스 타임라인 그래프 61
〈그림 35〉 삼성 Galaxy S 아이콘의 색상 변화 62
〈그림 36〉 삼성 Galaxy S 서브메뉴 아이콘의 움직임 63
〈그림 37〉 삼성 Galaxy S 아이콘에 적용된 폰트 64
〈그림 38〉 소니 Xperia X10 마이크로 사이트 레이아웃 65
〈그림 39〉 소니 Xperia X10 콘텐츠 영역 레이아웃 66
〈그림 40〉 소니 Xperia X10 메뉴 바의 슬라이드 움직임 67
〈그림 41〉 소니 Xperia X10 마우스 조작에 따른 모션그래픽 68
〈그림 42〉 소니 Xperia X10 콘텐츠의 화면 전환 69
〈그림 43〉 소니 Xperia X10 콘텐츠의 시퀀스 타임라인 69
〈그림 44〉 소니 Xperia X10 콘텐츠의 시퀀스 타임라인 그래프 70
〈그림 45〉 소니 Xperia X10 마우스 조작에 의한 아이콘의 변형 71
〈그림 46〉 소니 Xperia X10 메인메뉴 아이콘 분석 72
〈그림 47〉 소니 Xperia X10 메뉴에 적용된 타이포그래피 분석 72
〈그림 48〉 소니 Xperia X10 메인메뉴 타이포그래피에 적용된 컬러 73
〈그림 49〉 HTC Desire HD 레이아웃 74
〈그림 50〉 HTC Desire HD 콘텐츠 영역 레이아웃 75
〈그림 51〉 HTC Desire HD 메뉴의 상관관계 75
〈그림 52〉 HTC Desire HD 화면전환 76
〈그림 53〉 HTC Desire HD 화면전환 시퀀스 타임라인 77
〈그림 54〉 HTC Desire HD 화면전환 시퀀스 타임라인 그래프 77
〈그림 55〉 HTC Desire HD 메인메뉴 아이콘 분석 78
〈그림 56〉 HTC Desire HD 기타 메뉴 분석 78
〈그림 57〉 HTC Desire HD 마우스 조작에의한 컬러 변화 79
〈그림 58〉 HTC Desire HD 콘텐츠 영역의 아이콘 구성과 표현 79
〈그림 59〉 HTC Desire HD 타이포그래피 분석 80
〈그림 60〉 모토로라 Motoroi 마이크로사이트 레이아웃 81
〈그림 61〉 모토로라 Motoroi 콘텐츠 영역 레이아웃 82
〈그림 62〉 모토로라 Motoroi 마우스의 위치에 의한 제품이미지의 모션 82
〈그림 63〉 모토로라 Motoroi 마우스를 따라오는 콘텐츠 아이콘 83
〈그림 64〉 모토로라 Motoroi 콘텐츠 아이콘의 드래그 83
〈그림 65〉 모토로라 Motoroi 타입형식 아이콘의 형태 변화 84
〈그림 66〉 모토로라 Motoroi 기타메뉴 아이콘 형태 변화 84
〈그림 67〉 모토로라 Motory 마우스 명령 시 콘텐츠 아이콘의 크기 변화 85
〈그림 68〉 모토로라 Motoroi 타이포그래피 분석 85
〈그림 69〉 레이아웃 종합 분석 87
〈그림 70〉 모션그래픽 종합 분석 88
〈그림 71〉 아이콘 최종분석 89
〈그림 72〉 타이포그래피 종합 분석 91
〈그림 73〉 사운드 종합 분석 92