8장 웹 페이지의 디자인

8.1 웹 페이지 디자인의 기본 8.1.1 웹 페이지의 구성 요소 웹 페이지의 기본 구성 머리말 본문 머리말 꼬리말 본문 2

머리말 본문 꼬리말 웹 페이지의 맨 위 부분 구성 요소 웹 페이지의 제목, 다른 페이지로의 링크, 배너 광고 웹 페이지의 실질적인 내용 문장, 그림, 애니메이션, 다른 페이지로의 링크, 표(table), 양식(form) 등 꼬리말 웹 페이지와 관련된 부가 정보 최근 수정된 날짜, 웹 마스터의 e-mail 주소, 저작권 정보(copyright), 방문객 카운터, 배너 광고 등 3

8.1.2 웹 페이지의 기획 (1)대상의 결정 누구를 대상으로 하는 웹 페이지를 만들 것인지를 결정하고 그에 따라 웹 페이지의 스타일 결정 어린이를 대상으로 한 웹 페이지 4

(2) 내용의 구성 웹 사이트에 들어갈 내용을 분류 및 정리 흐름도(flowchart)나 사이트 맵 이용 5

(3)스토리보드 작성 방법 (4)웹 페이지 작성의 준비 (5) 웹 페이지의 작성 ① 아이디어 도출 (Brainstorming) ② 사이트 맵 구성 (사이트 맵은 추후에 웹 사이트를 관리하는 데에도 유용) ③ 내용의 검토 (4)웹 페이지 작성의 준비 종이 위에 미리 그려 보기 (5) 웹 페이지의 작성 HTML을 이용해 웹 페이지 작성 웹 페이지에 사용될 이미지들을 먼저 준비한 뒤 각각의 웹 페이지를 작성하고, 마지막으로 페이지간의 링크 추가 6

종이 위에 그려 보기 실제로 작성한 웹 페이지 7

8.2 사용자 인터페이스와 탐색 기법 8.2.1 사용자 인터페이스의 설계 웹 페이지의 사용자 인터페이스 설계의 기본 원칙 원하는 정보를 쉽게 찾을 수 있도록 사용자에게 편리하게 구성 웹 사이트 전체에 대한 구조정보 제공 웹 사이트에 어떠한 정보가 있는지를 전달 사용자의 탐색에 도움 웹 사이트의 탐색 구조와 연관 각 웹 페이지의 내용을 독립적으로 구성 웹 페이지 구성에 일관성 유지 독창성 8

사용자 인터페이스의 예 독창적인 인터페이스의 예 서울 국제 영화제의 홈페이지 ( http://kiffoc.ik.co.kr/home.html ) Amtrak(미국 철도회사) 홈 페이지 ( http://www.amtrak.com ) 9

내용을 알아보기 힘든 인터페이스 ( http://www.oink.demon.co.uk/kids.htm ) 좋지 못한 인터페이스의 예 내용을 알아보기 힘든 인터페이스 ( http://www.oink.demon.co.uk/kids.htm ) 10

8.2.2 웹 사이트의 탐색 구조 웹 사이트의 탐색 구조 전체적인 사이트에서 페이지간의 연결 상태 탐색 구조의 종류 11

사용자가 자유롭게 탐색을 할 수 없다는 것이 단점이지만, 강의노트 같이 순서를 지켜야 하는 경우에 유용 계층구조 선형구조 사용자가 자유롭게 탐색을 할 수 없다는 것이 단점이지만, 강의노트 같이 순서를 지켜야 하는 경우에 유용 계층구조 웹사이트의 전체적인 내용을 구조적으로 보여 줄 수 있다는 것이 장점 웹 사이트의 규모가 커 메뉴가 많은 경우에 비슷한 내용의 메뉴끼리 묶어 사용하면 효율적 선형구조 + 계층구조 두 가지 형태를 혼합한 형태 로 실질적으로 가장 많이 사용 망 구조 전체 웹 사이트를 망 구조로 구성하는 것은 좋지 않으나 부분적으로는 유용 12

8.2.3 탐색 구조의 구현 기법 메뉴 웹 사이트 내의 주요 페이지로의 링크를 모아 만듦. 예 13

이미지 링크 텍스트에 링크를 연결하는 것과 같은 방법 링크의 내용을 잘 나타낼 수 있는 이미지를 사용 홈 페이지로의 링크, 다음 페이지 또는 이전 페이지로의 링크, 상위 메뉴로의 링크 등 웹 페이지에 공통적으로 사용되는 링크는 해당 링크를 나타낼 수 있는 버튼을 이용 => 일관성 있는 인터페이스 제공 가능 예 14

이미지 맵 그림의 일부분만을 링크로 만드는 것 하나의 이미지에 여러 개의 서로 다른 페이지로의 링크를 만들 수 있다. 메뉴도 이미지 맵 형태로 만들 수도 있다. 예 15

사이트 맵 웹 사이트의 전체 모양을 보여 주어 사이트의 전체적인 구조 파악 가능 원하는 페이지로의 이동이 편리 하나의 웹 페이지로 제공하거나 별도의 작은 창을 띄워 리모콘처럼 사용 예 16

8.2.4 적절한 메타포의 선택 메타포(metaphor) 메타포(metaphor)의 뜻은 '은유' 웹 페이지의 내용을 어떠한 다른 사물을 통해 상징적으로 표현 예 17

8.3 짜임새 있는 웹 페이지의 구성 8.3.1 다양한 텍스트의 사용 일반 문자와 그래픽 문자(Font text와 Graphical text) 그래픽 문자는 어디에서나 동일하게 보이는 장점이 있으나, 전송에 시간이 걸리므로 중요한 부분에만 사용 예 18

Initial Caps와 Drop Caps 글자에 변화를 주기 위한 방법 Initial Caps Drop Caps 19

8.3.2 열거목록(List) 웹 페이지의 내용을 간결하게 나타내기 위해 사용 종류 무순서 목록(Unordered List) 정의 목록(Definition List) 예 20

8.3.3 테이블의 사용 투명 테이블 투명 테이블의 용도 border=0인 테이블 웹 페이지의 구성 요소를 원하는 위치에 배치 예 21

복잡한 모양의 테이블은 로딩에 시간이 걸리므로 적절히 사용 웹 페이지에 부분별로 색을 넣기 위해 사용 웹 페이지를 세로로 분할하여 열(column)로 구성 복잡한 모양의 테이블은 로딩에 시간이 걸리므로 적절히 사용 22

8.3.4 여백을 고려한 구성 요소의 배치 가장자리 여백 (Margin) 문서의 상, 하, 좌, 우에 남은 공간 웹 페이지의 경우는 좌우 여백만 고려 테이블을 이용해 가로 폭을 고정할 수도 있음. 예 23

구성 요소간의 간격 (Spacing) 문자간 간격 <PRE> 태그 이용 <BLOCKQUOTE> 태그를 이용하여 왼쪽 여백 넓힐 수 있음.   를 이용해 글자간 간격 조절 테이블을 이용한 세로 여백 조절 1X1의 투명 테이블 이용 테이블의 height 속성으로 높이를 지정하거나 <P>태그, <BR>태그를 이용해 테이블의 높이 조절 투명 GIF를 이용한 여백 조절 1X1 크기의 투명 GIF를 만들어 원하는 위치에 삽입하고 width, height 속성으로 필요한 여백 만큼 크기 지정 24

8.3.5 프레임의 사용 웹 페이지를 효율적으로 구성할 수 있게 해 줌. 내용이 바뀌는 부분과 그렇지 않은 부분을 프레임으로 나누어 놓으면 같은 내용을 반복해 전송할 필요가 없어 효율적 프레임의 일반적 형태 25

8.4 색 사용의 기본 원칙 8.4.1 색의 사용법 웹 페이지의 색 색의 의미 융합, 대조와 조화를 얻기 위해 사용 웹 페이지의 분위기를 결정하기도 함. 색의 의미 빨간색 : 뜨거움, 정열, 멈춤 초록색 : 선망, 자연, 진행 파란색 : 차가움, 슬픔, 하늘 노란색 : 따뜻함, 소심함, 주의 갈색 : 더러움, 지구 흰색 : 순수, 맑음, 선함 검은색 : 사악함, 공포, 죽음 26

효과적인 색 사용의 예 시원한 느낌의 웹 페이지 공포감을 주는 웹 페이지 27

색의 관계 기본색 : 빨간색, 노란색, 파란색 이차색 : 주황색, 보라색, 초록색 보색 : 색상환에서 마주보는 색 따뜻한 색 : Yellow부터 Red-Violet까지 시원한 색 : Violet에서 Yellow-Green까지 28

8.4.2 컴퓨터에서 색을 표현하는 방법 (Color Model) 빛의 삼원색 물감의 삼원색 29

RGB 모델 CMYK 모델 빨강, 초록, 파랑의 빛의 삼원색을 이용해 색을 만들어 내는 것 디스플레이(모니터)에 사용 Cyan, Magenta, Yellow, Black의 조합으로 색을 만들어 내는 것 컬러 프린터에 사용 30

HSV 모델 RGB 모델의 변형 색상(Hue), 채도(Saturation), 명도(Value)의 조합으로 색을 표현 현실 세계에서 색을 말할 때 사용하는 요소들로 표현을 하므로 실질적으로 색을 선택할 때 유용 한 가지 톤으로 웹 페이지를 꾸민다면 같은 색상에서 채도만을 바꾼 색들을 선택 31

팔레트 실세계의 모든 색을 표현하기는 색을 표현하기 위해 사용되는 비트 수가 많아지므로 자주 사용되는 색만을 선정하여 그 색만 사용하는 방식 GIF 형식의 이미지의 경우는 8비트 팔레트를 사용 팔레트의 예 32

8.5 그래픽과 애니메이션의 사용 8.5.1 웹 페이지에 어울리는 이미지, 그래픽, 아이콘 의미가 잘 전달 될 수 있는 이미지나 그래픽, 아이콘을 선택 내용에 맞는 이미지의 사용 아이콘의 예 33

배경 이미지 복잡하지 않으며 너무 튀지 않는 것으로 선택 배경 이미지는 반복해서 타일 형태로 나오므로 부드럽게 이어지도록 만들어야 함. 부드럽게 이어지는 배경 만들기 : 배경을 사등분하여 위치를 바꾸고, 중심의 경계 부분을 없앤다. 34

그래픽의 효과적 사용 배너, 헤더, 로고 등에 그래픽을 이용해 웹 페이지의 내용을 효과적으로 전달할 수 있음 웹 페이지의 내용을 반영한 로고 (스미소니언 박물관) 이미지를 이용한 수평선 35

8.5.2 웹 페이지에 사용하는 이미지 파일의 형식 : GIF와 JPEG 웹 페이지에서 사용하는 그래픽 GIF 형식 팔레트를 사용하며 8비트 색상만을 지원 최대 256색을 사용 사진의 경우에는 압축 효과가 크지 않으나 일러스트레이션으로 제작된 그래픽 파일의 경우에는 높은 압축 효과 투명 효과 및 이미지에 관한 설명 추가 가능 JPEG 형식 최대 1600만 색을 표현 GIF보다 압축률이 높고, 사진에 많이 사용 36

사진의 GIF와 JPEG 파일 크기 비교 (a) JPEG - 40KB (b) GIF - 123KB 37

사진이 아닌 이미지의 파일 크기 비교 (단위 KB) (a) (b) (c) (d) 38

이미지 파일 형식의 선택 GIF 파일은 단일 색상이 많고, 가로 선으로 반복되는 색이 많은 경우에 압축 효과가 큼. 따라서 단일 색상 영역이 많은 경우나 일러스트레이션으로 제작된 파일에는 GIF를 사용하고, 사진이나 색의 미묘한 변화가 많은 그림의 경우에는 JPEG으로 하는 것이 일반적인 방법 39

디더링 팔레트에 없는 색을 표현하기 위해 팔레트에 포함된 두 개 이상의 색을 근접하게 놓아 멀리서 보았을 때 원래 색처럼 보이도록 하는 기법 디더링을 적용하지 않은 이미지와 적용한 이미지의 비교 (a) 원본 이미지 (b) 디더링하지 않은 GIF (c) 디더링한 GIF 40

인터레이스드 GIF(Interlaced GIF) 대략적인 모습을 먼저 보여준 다음 점차 자세한 모습을 보여주는 것 이미지의 크기가 너무 커 다운로드에 시간이 걸릴 경우에 사용 41

8.5.3. 이미지의 조작 이미지 잘라내기(Cropping) 그래픽 파일이 너무 큰 경우, 또는 불필요한 영역이 많은 경우 영역 선택 툴을 이용해 필요한 영역만을 남기고 나머지를 잘라냄. 한번에 잘라 내기 보다는 일단 불필요한 부분을 제거한 후 그래픽의 크기와 모양을 고려하여 남길 영역을 선택 42

미리보기 그림(Thumbnail Image) 큰 그림을 다운로드 하기에는 시간이 걸리므로 큰 그림을 축소하여 보여 주는 것. 큰 이미지에서 중요하지 않은 부분을 잘라낸 후 중요한 부분만 남겨 축소 (a) 축소된 그림 (b) 원래의 그림 43

앤티앨리어스드 이미지 (Anti-aliased Image) 작은 이미지를 확대했을 때 경계선이 계단형으로 나타나는 것을 없애기 위해 물체와 배경과의 경계면의 픽셀이 얼마나 많이 접촉하였느냐에 따라 물체의 색과 바탕면 색의 중간값을 계산하여 색을 표시 (a) 앤티앨리어싱하기 전 (b) 앤티앨리어싱 후 44

그래픽 필터의 사용 예 원본 Noise filter Blur filter Embossing filter Mosaic filter Motion Blur filter 45

8.5.4 애니메이션의 생성과 이용 웹 페이지의 애니메이션 애니메이션 : 사람이 그려서 만든 그림을 연속적으로 보여 주어 영화와 같은 효과를 얻는 것 46

8.6 웹 페이지의 일관성과 조화 8.6.1 텍스트와 그래픽의 일관성 글자와 그래픽의 일관성이 주는 효과 웹 사이트의 전체적인 분위기를 조성 사용자가 그 형태에 익숙해지고, 편안함을 느끼게 해 줌. 글자와 머리말의 일관성 글자체(Font Face)와 크기가 일정 그래픽 문자를 이용한 제목도 비슷한 스타일 사용 47

탐색 요소(Navigational element)의 일관성 그래픽의 일관성 비슷한 스타일의 그래픽을 선택 그래픽의 크기, 위치, 외곽선 등 외적인 속성을 통일 잘못된 예 - 일관성 없는 아이콘 탐색 요소(Navigational element)의 일관성 반드시 같은 모양의 아이콘을 사용 일정한 위치 48

8.6.2 웹 페이지의 색과 균형 웹 페이지의 색 웹 페이지의 내용을 효과적으로 표현할 수 있는 것으로 선택 웹 페이지 구성 요소의 색깔이 서로 조화를 이루도록 웹 페이지에 사용하는 색깔의 종류가 적을수록 오히려 색의 일관성 유지가 쉬움. 크기나 스타일도 균형을 맞추어야 함. 조화로운 웹 페이지의 예 49

텍스쳐(Texture) 웹 페이지의 내용에 직접적으로 필요한 것은 아니지만 전체적인 분위기를 조성하고, 특별한 느낌을 표현하기 위해 웹 페이지에 추가되는 요소 웹 페이지의 배경이나 이미지, 불릿 등을 이용 적절한 텍스쳐의 사용 50

8.7 웹 페이지 설계의 힌트 8.7.1 웹 페이지 디자인의 10가지 원칙 ① 웹 페이지 로드 시간은 10초 이상 걸리지 않도록 해야 한다. ② 내용을 자주 업데이트 한다. ③ 링크의 색을 마음대로 바꾸거나 파란 글씨에 밑줄을 넣어, 링크가 혼동되도록 해서는 안된다. ④ 방문객이 사이트의 구조를 쉽게 파악할 수 있도록 구성한다. ⑤ 길게 스크롤되는 문서를 만들지 않는다. ⑥ 각 페이지마다 이전 페이지나 상위 페이지, 홈 페이지로의 링크를 만들어 페이지간의 이동이 용이하게 만든다. ⑦ 사이트 내의 링크는 상대 경로를 사용한다. ⑧ 지나치게 애니메이션을 많이 사용해서는 안된다. ⑨ 별로 중요하지 않은 내용을 강조해서는 안된다. ⑩ 프레임 투성이의 페이지는 금물이다. 51

8.7.2 더 나은 웹 페이지를 디자인하는 방법 ① 웹 페이지의 제목을 의미있게 붙인다. ② 좋은 미리보기 그림을 사용한다. ③ 특정한 환경을 가정하고 웹 페이지를 만들면 안된다. ④ 간결한 내용을 작성하고 독자가 쉽게 내용을 파악할 수 있는 페이지를 만든다. ⑤ 다운로드에 시간이 오래 걸리는 웹 페이지로 이동할 때는 미리 경고를 해서 독자가 기다림을 감수할 수 있는지를 확인하는 것이 좋다. 이미지에도 크기 정보를 넣어서 독자가 다운로드전에 판단을 할 수 있도록 하는 것이 좋다. ⑥ 단락에 링크를 넣는 것은 좋지 못하다. 즉, 문장 내에 링크를 넣는 것은 바람직하지 못하다. 52

8.7.3 웹 페이지 체크 리스트 자신의 웹 페이지의 문제점을 다음을 통해 체크 개설 목적이 명확한가? 개념이 잘 나타나 있는가? 자료 갱신은 잘 되는가? 다운로드 속도는 적당한가? 웹마스터에게 오는 메일에는 잘 답장하는가? 네비게이션이 잘 되는가? 모든 브라우저에서 잘 보이는가? 불필요한 정보를 제공하지는 않는가? 53