표제지
목차
국문초록 8
Ⅰ. 서론 10
1. 연구의 목적 10
2. 연구범위 및 방법 13
Ⅱ. 현황과 분석 15
1. 웹 환경의 변화 15
1) 디스플레이 변천과정 15
2) 디스플레이 화면 비율의 변화 20
3) 디자인 환경의 변화 25
2. 국내 웹사이트들의 화면 비율 현황과 문제점 27
1) 웹사이트별 분석 27
2) 분석결과 29
3. 16:9 와이드 화면비율 적용사례 31
1) 국내사례 31
2) 해외사례 32
Ⅲ. 웹 사용자의 선호도 조사 34
1. 설문조사 및 분석 34
1) 분석결과 34
2) 시사점 44
Ⅳ. 모니터 화면비율변화에 따른 웹디자인 방향제안 45
Ⅴ. 결론 56
참고문헌 58
ABSTRACT 60
〈표 01〉 웹사이트별 해상도 및 와이드해상도에서의 가로길이 중 여백비율분석 31
〈표 02〉 컴퓨터 디스플레이 모니터 크기 사용 현황 34
〈표 03〉 컴퓨터 디스플레이 모니터 사용 해상도 및 선호도 35
〈표 04〉 컴퓨터 디스플레이 모니터 화면 비율 사용현황 36
〈표 05〉 컴퓨터 디스플레이 모니터 선호 화면 크기 37
〈표 06〉 컴퓨터 디스플레이 모니터 선호 화면 비율 38
〈표 07〉 와이드 화면 비율 선호 이유 39
〈표 08〉 인터넷 이용 시 웹브라우저의 이용 40
〈표 09〉 웹사이트의 화면 정렬방법 41
〈표 10〉 와이드 화면비율 모니터에서 웹사이트 정보 또는 콘텐츠 디자인 방향 42
〈표 11〉 와이드 화면비율 모니터에서의 웹사이트 여백활용 43
〈그림 1〉 영화 벤허의 한 장면, 1926년에 만들었던 〈벤허〉를 컬러판 와이드스크린에 부활시켜 성공한 1959년 영화이다. TV화면비율에서는 아쉽게도 영상의 많은 부분을 놓치게 되어 영화가 제공하는 놀라운 스펙터클을 느낄 수 없다. 11
〈그림 2〉 컴퓨터 디스플레이 모니터의 변화 12
〈그림 3〉 디스플레이의 분류 16
〈그림 4〉 디스플레이의 개발 역사와 그 사용 19
〈그림 5〉 디스플레이 해상도 비교 21
〈그림 6〉 디스플레이 화면비율 4:3과 16:9 모니터 23
〈그림 7〉 4:3(1280*960)비율과 16:9(1920*1080)비율에서의 웹페이지 비교 24
〈그림 8〉 윈도우 비스타가 적용된 와이드비율의 모니터 화면 25
〈그림 9〉 Adobe Photoshop CS2의 기본 UI화면 (화면 해상도 1280X1024시) 26
〈그림 10〉 Adobe Photoshop CS3의 기본 UI화면 (화면 해상도 1920X1200시) 27
〈그림 11〉 화면해상도별 웹사이트의 모습 (좌 : 가운데 정렬, 우 : 좌측 정렬) 29
〈그림 12〉 애경그룹 55주년 캠페인 사이트 (화면해상도 좌:1280X960, 우:1920X1080) 32
〈그림 13〉 일본의 광고회사 Dentsu의 채용사이트 (화면해상도 좌:1280X960, 우:1920X1080) 33
〈그림 14〉 일반적인 웹 화면 구조 46
〈그림 15〉 네이버 초기화면의 웹 화면 구조 47
〈그림 16〉 16:9 와이드 화면비율을 위한 확장형 웹 화면 구조 48
〈그림 17〉 화면 분할 조절 막대 49
〈그림 18〉 화면 분할 조절 막대를 이용한 쇼핑몰의 예 50
〈그림 19〉 음악서비스 사이트의 예 51
〈그림 20〉 Flash Book 화면 52
〈그림 21〉 16:9 와이드 화면비율을 위한 확장형 웹 화면 구조의 eBook 화면 53
〈그림 22〉 16:9 와이드 화면비율에 배경을 활용한 화면 (위는 4:3 화면비율, 아래 : 16:9 화면비율) 54
〈그림 23〉 수평구조 화면 55