Transcript 웹 페이지의 디자인
8장 웹 페이지의 디자인 8장 웹 페이지의 디자인 8.1 웹 페이지 디자인의 기본 8.1.1 웹 페이지의 구성 요소 머리말 웹 페이지의 기본 구성 • 머리말 • 본문 • 꼬리말 본문 꼬리말 2 8장 웹 페이지의 디자인 머리말 • 웹 페이지의 맨 위 부분 • 구성 요소 • 웹 페이지의 제목, 다른 페이지로의 링크, 배너 광고 본문 • 웹 페이지의 실질적인 내용 • 구성 요소 • 문장, 그림, 애니메이션, 다른 페이지로의 링크, 표(table), 양식(form) 등 꼬리말 • 웹 페이지와 관련된 부가 정보 • 구성 요소 • 최근 수정된 날짜, 웹 마스터의 e-mail 주소, 저작권 정보(copyright), 방문객 카운터, 배너 광고 등 3 8장 웹 페이지의 디자인 8.1.2 웹 페이지의 기획 (1)대상의 결정 • 누구를 대상으로 하는 웹 페이지를 만들 것인지를 결정하고 그에 따라 웹 페이지의 스타일 결정 어린이를 대상으로 한 웹 페이지 4 8장 웹 페이지의 디자인 (2) 내용의 구성 • 웹 사이트에 들어갈 내용을 분류 및 정리 • 흐름도(flowchart)나 사이트 맵 이용 5 8장 웹 페이지의 디자인 (3)스토리보드 작성 방법 ① 아이디어 도출 (Brainstorming) ② 사이트 맵 구성 (사이트 맵은 추후에 웹 사이트를 관리하는 데에도 유용) ③ 내용의 검토 (4)웹 페이지 작성의 준비 • 종이 위에 미리 그려 보기 (5) 웹 페이지의 작성 • HTML을 이용해 웹 페이지 작성 • 웹 페이지에 사용될 이미지들을 먼저 준비한 뒤 각각의 웹 페이지를 작 성하고, 마지막으로 페이지간의 링크 추가 6 8장 웹 페이지의 디자인 종이 위에 그려 보기 실제로 작성한 웹 페이지 7 8장 웹 페이지의 디자인 8.2 사용자 인터페이스와 탐색 기법 8.2.1 사용자 인터페이스의 설계 웹 페이지의 사용자 인터페이스 설계의 기본 원칙 • • • • • • • • 원하는 정보를 쉽게 찾을 수 있도록 사용자에게 편리하게 구성 웹 사이트 전체에 대한 구조정보 제공 웹 사이트에 어떠한 정보가 있는지를 전달 사용자의 탐색에 도움 웹 사이트의 탐색 구조와 연관 각 웹 페이지의 내용을 독립적으로 구성 웹 페이지 구성에 일관성 유지 독창성 8 8장 웹 페이지의 디자인 사용자 인터페이스의 예 • 독창적인 인터페이스의 예 서울 국제 영화제의 홈페이지 ( http://kiffoc.ik.co.kr/home.html ) Amtrak(미국 철도회사) 홈 페이지 ( http://www.amtrak.com ) 9 8장 웹 페이지의 디자인 • 좋지 못한 인터페이스의 예 내용을 알아보기 힘든 인터페이스 ( http://www.oink.demon.co.uk/kids.htm ) 10 8장 웹 페이지의 디자인 8.2.2 웹 사이트의 탐색 구조 웹 사이트의 탐색 구조 • 전체적인 사이트에서 페이지간의 연결 상태 탐색 구조의 종류 11 8장 웹 페이지의 디자인 • 선형구조 • 사용자가 자유롭게 탐색을 할 수 없다는 것이 단점이지만, 강의 노트 같이 순서를 지켜야 하는 경우에 유용 • 계층구조 • 웹사이트의 전체적인 내용을 구조적으로 보여 줄 수 있다는 것이 장점 • 웹 사이트의 규모가 커 메뉴가 많은 경우에 비슷한 내용의 메뉴 끼리 묶어 사용하면 효율적 • 선형구조 + 계층구조 • 두 가지 형태를 혼합한 형태 로 실질적으로 가장 많이 사용 • 망 구조 • 전체 웹 사이트를 망 구조로 구성하는 것은 좋지 않으나 부분적 으로는 유용 12 8장 웹 페이지의 디자인 8.2.3 탐색 구조의 구현 기법 메뉴 • 웹 사이트 내의 주요 페이지로의 링크를 모아 만듦. • 예 13 8장 웹 페이지의 디자인 이미지 링크 • 텍스트에 링크를 연결하는 것과 같은 방법 • 링크의 내용을 잘 나타낼 수 있는 이미지를 사용 • 홈 페이지로의 링크, 다음 페이지 또는 이전 페이지로의 링크, 상위 메 뉴로의 링크 등 웹 페이지에 공통적으로 사용되는 링크는 해당 링크를 나타낼 수 있는 버튼을 이용 => 일관성 있는 인터페이스 제공 가능 • 예 14 8장 웹 페이지의 디자인 이미지 맵 • • • • 그림의 일부분만을 링크로 만드는 것 하나의 이미지에 여러 개의 서로 다른 페이지로의 링크를 만들 수 있다. 메뉴도 이미지 맵 형태로 만들 수도 있다. 예 15 8장 웹 페이지의 디자인 사이트 맵 • 웹 사이트의 전체 모양을 보여 주어 사이트의 전체 적인 구조 파악 가능 • 원하는 페이지로의 이동이 편리 • 하나의 웹 페이지로 제공 하거나 별도의 작은 창을 띄워 리모콘처럼 사용 • 예 16 8장 웹 페이지의 디자인 8.2.4 적절한 메타포의 선택 메타포(metaphor) • 메타포(metaphor)의 뜻은 '은유' • 웹 페이지의 내용을 어떠한 다른 사물을 통해 상징적으로 표현 • 예 17 8장 웹 페이지의 디자인 8.3 짜임새 있는 웹 페이지의 구성 8.3.1 다양한 텍스트의 사용 일반 문자와 그래픽 문자(Font text와 Graphical text) • 그래픽 문자는 어디에서나 동일하게 보이는 장점이 있으나, 전송에 시 간이 걸리므로 중요한 부분에만 사용 • 예 18 8장 웹 페이지의 디자인 Initial Caps와 Drop Caps • 글자에 변화를 주기 위한 방법 • Initial Caps • Drop Caps 19 8장 웹 페이지의 디자인 8.3.2 열거목록(List) 웹 페이지의 내용을 간결하게 나타내기 위해 사용 종류 • • • • 무순서 목록(Unordered List) 순서 목록(Ordered List) 정의 목록(Definition List) 예 20 8장 웹 페이지의 디자인 8.3.3 테이블의 사용 투명 테이블 • border=0인 테이블 투명 테이블의 용도 • 웹 페이지의 구성 요소를 원하는 위치에 배치 • 예 21 8장 웹 페이지의 디자인 • 웹 페이지에 부분별로 색을 넣기 위해 사용 • 웹 페이지를 세로로 분할하여 열(column)로 구성 복잡한 모양의 테이블은 로딩에 시간이 걸리므로 적절히 사용 22 8장 웹 페이지의 디자인 8.3.4 여백을 고려한 구성 요소의 배치 가장자리 여백 (Margin) • • • • 문서의 상, 하, 좌, 우에 남은 공간 웹 페이지의 경우는 좌우 여백만 고려 테이블을 이용해 가로 폭을 고정할 수도 있음. 예 23 8장 웹 페이지의 디자인 구성 요소간의 간격 (Spacing) • 문자간 간격 • <PRE> 태그 이용 • <BLOCKQUOTE> 태그를 이용하여 왼쪽 여백 넓힐 수 있음. • 를 이용해 글자간 간격 조절 • 테이블을 이용한 세로 여백 조절 • 1X1의 투명 테이블 이용 • 테이블의 height 속성으로 높이를 지정하거나 <P>태그, <BR>태 그를 이용해 테이블의 높이 조절 • 투명 GIF를 이용한 여백 조절 • 1X1 크기의 투명 GIF를 만들어 원하는 위치에 삽입하고 width, height 속성으로 필요한 여백 만큼 크기 지정 24 8장 웹 페이지의 디자인 8.3.5 프레임의 사용 웹 페이지를 효율적으로 구성할 수 있게 해 줌. 내용이 바뀌는 부분과 그렇지 않은 부분을 프레임으로 나누어 놓으 면 같은 내용을 반복해 전송할 필요가 없어 효율적 프레임의 일반적 형태 25 8장 웹 페이지의 디자인 8.4 색 사용의 기본 원칙 8.4.1 색의 사용법 웹 페이지의 색 • 융합, 대조와 조화를 얻기 위해 사용 • 웹 페이지의 분위기를 결정하기도 함. 색의 의미 • • • • • 갈색 : 더러움, 지구 • 흰색 : 순수, 맑음, 선함 • 검은색 : 사악함, 공포, 죽음 빨간색 : 뜨거움, 정열, 멈춤 초록색 : 선망, 자연, 진행 파란색 : 차가움, 슬픔, 하늘 노란색 : 따뜻함, 소심함, 주의 26 8장 웹 페이지의 디자인 효과적인 색 사용의 예 시원한 느낌의 웹 페이지 공포감을 주는 웹 페이지 27 8장 웹 페이지의 디자인 색의 관계 • • • • • 기본색 : 빨간색, 노란색, 파란색 이차색 : 주황색, 보라색, 초록색 보색 : 색상환에서 마주보는 색 따뜻한 색 : Yellow부터 Red-Violet까지 시원한 색 : Violet에서 Yellow-Green까지 28 8장 웹 페이지의 디자인 8.4.2 컴퓨터에서 색을 표현하는 방법 (Color Model) 빛의 삼원색 물감의 삼원색 29 8장 웹 페이지의 디자인 RGB 모델 CMYK 모델 • Cyan, Magenta, Yellow, Black 의 조합으로 색을 만들어 내는 것 • 컬러 프린터에 사용 • 빨강, 초록, 파랑의 빛의 삼원 색을 이용해 색을 만들어 내는 것 • 디스플레이(모니터)에 사용 30 8장 웹 페이지의 디자인 HSV 모델 • RGB 모델의 변형 • 색상(Hue), 채도(Saturation), 명도(Value)의 조합으로 색을 표현 • 현실 세계에서 색을 말할 때 사용하는 요소들로 표현을 하므로 실질적 으로 색을 선택할 때 유용 • 한 가지 톤으로 웹 페이지를 꾸민다면 같은 색상에서 채도만을 바꾼 색 들을 선택 31 8장 웹 페이지의 디자인 팔레트 • 실세계의 모든 색을 표현하기는 색을 표현하기 위해 사용되는 비트 수 가 많아지므로 자주 사용되는 색만을 선정하여 그 색만 사용하는 방식 • GIF 형식의 이미지의 경우는 8비트 팔레트를 사용 • 팔레트의 예 32 8장 웹 페이지의 디자인 8.5 그래픽과 애니메이션의 사용 8.5.1 웹 페이지에 어울리는 이미지, 그래픽, 아이콘 의미가 잘 전달 될 수 있는 이미지나 그래픽, 아이콘을 선택 내용에 맞는 이미지의 사용 아이콘의 예 33 8장 웹 페이지의 디자인 배경 이미지 • 복잡하지 않으며 너무 튀지 않는 것으로 선택 • 배경 이미지는 반복해서 타일 형태로 나오므로 부드럽게 이어지도록 만들어야 함. • 부드럽게 이어지는 배경 만들기 : 배경을 사등분하여 위치를 바꾸고, 중심의 경계 부분을 없앤다. 34 8장 웹 페이지의 디자인 그래픽의 효과적 사용 • 배너, 헤더, 로고 등에 그래픽을 이용해 웹 페이지의 내용을 효과적으 로 전달할 수 있음 웹 페이지의 내용을 반영한 로고 (스미소니언 박물관) 이미지를 이용한 수평선 35 8장 웹 페이지의 디자인 8.5.2 웹 페이지에 사용하는 이미지 파일의 형식 : GIF와 JPEG 웹 페이지에서 사용하는 그래픽 • GIF 형식 • 팔레트를 사용하며 8비트 색상만을 지원 • 최대 256색을 사용 • 사진의 경우에는 압축 효과가 크지 않으나 일러스트레이션으로 제작된 그래픽 파일의 경우에는 높은 압축 효과 • 투명 효과 및 이미지에 관한 설명 추가 가능 • JPEG 형식 • 최대 1600만 색을 표현 • GIF보다 압축률이 높고, 사진에 많이 사용 36 8장 웹 페이지의 디자인 사진의 GIF와 JPEG 파일 크기 비교 (a) JPEG - 40KB (b) GIF - 123KB 37 8장 웹 페이지의 디자인 사진이 아닌 이미지의 파일 크기 비교 (단위 KB) (a) (b) (c) 38 (d) 8장 웹 페이지의 디자인 이미지 파일 형식의 선택 • GIF 파일은 단일 색상이 많고, 가로 선으로 반복되는 색이 많은 경우 에 압축 효과가 큼. • 따라서 단일 색상 영역이 많은 경우나 일러스트레이션으로 제작된 파 일에는 GIF를 사용하고, 사진이나 색의 미묘한 변화가 많은 그림의 경 우에는 JPEG으로 하는 것이 일반적인 방법 39 8장 웹 페이지의 디자인 디더링 • 팔레트에 없는 색을 표현하기 위해 팔레트에 포함된 두 개 이상의 색을 근접하게 놓아 멀리서 보았을 때 원래 색처럼 보이도록 하는 기법 • 디더링을 적용하지 않은 이미지와 적용한 이미지의 비교 (a) 원본 이미지 (b) 디더링하지 않은 GIF 40 (c) 디더링한 GIF 8장 웹 페이지의 디자인 인터레이스드 GIF(Interlaced GIF) • 대략적인 모습을 먼저 보여준 다음 점차 자세한 모습을 보여주는 것 • 이미지의 크기가 너무 커 다운로드에 시간이 걸릴 경우에 사용 41 8장 웹 페이지의 디자인 8.5.3. 이미지의 조작 이미지 잘라내기(Cropping) • 그래픽 파일이 너무 큰 경우, 또는 불필요한 영역이 많은 경우 영역 선 택 툴을 이용해 필요한 영역만을 남기고 나머지를 잘라냄. • 한번에 잘라 내기 보다는 일단 불필요한 부분을 제거한 후 그래픽의 크 기와 모양을 고려하여 남길 영역을 선택 42 8장 웹 페이지의 디자인 미리보기 그림(Thumbnail Image) • 큰 그림을 다운로드 하기에는 시간이 걸리므로 큰 그림을 축소하여 보 여 주는 것. • 큰 이미지에서 중요하지 않은 부분을 잘라낸 후 중요한 부분만 남겨 축 소 (a) 축소된 그림 (b) 원래의 그림 43 8장 웹 페이지의 디자인 앤티앨리어스드 이미지 (Anti-aliased Image) • 작은 이미지를 확대했을 때 경계선이 계단형으로 나타나는 것을 없애 기 위해 물체와 배경과의 경계면의 픽셀이 얼마나 많이 접촉하였느냐 에 따라 물체의 색과 바탕면 색의 중간값을 계산하여 색을 표시 (a) 앤티앨리어싱하기 전 (b) 앤티앨리어싱 후 44 8장 웹 페이지의 디자인 그래픽 필터의 사용 예 원본 Noise filter Blur filter Embossing filter Mosaic filter Motion Blur filter 45 8장 웹 페이지의 디자인 8.5.4 애니메이션의 생성과 이용 웹 페이지의 애니메이션 • 애니메이션 : 사람이 그려서 만든 그림을 연속적으로 보여 주어 영화와 같은 효과 를 얻는 것 46 8장 웹 페이지의 디자인 8.6 웹 페이지의 일관성과 조화 8.6.1 텍스트와 그래픽의 일관성 글자와 그래픽의 일관성이 주는 효과 • 웹 사이트의 전체적인 분위기를 조성 • 사용자가 그 형태에 익숙해지고, 편안함을 느끼게 해 줌. 글자와 머리말의 일관성 • 글자체(Font Face)와 크기가 일정 • 그래픽 문자를 이용한 제목도 비슷한 스타일 사용 47 8장 웹 페이지의 디자인 그래픽의 일관성 • 비슷한 스타일의 그래픽을 선택 • 그래픽의 크기, 위치, 외곽선 등 외적인 속성을 통일 • 잘못된 예 - 일관성 없는 아이콘 탐색 요소(Navigational element)의 일관성 • 반드시 같은 모양의 아이콘을 사용 • 일정한 위치 48 8장 웹 페이지의 디자인 8.6.2 웹 페이지의 색과 균형 웹 페이지의 색 • 웹 페이지의 내용을 효과적으로 표현할 수 있는 것으로 선택 • 웹 페이지 구성 요소의 색깔이 서로 조화를 이루도록 • 웹 페이지에 사용하는 색깔의 종 류가 적을수록 오히려 색의 일관 성 유지가 쉬움. • 크기나 스타일도 균형을 맞추어 야 함. • 조화로운 웹 페이지의 예 49 8장 웹 페이지의 디자인 텍스쳐(Texture) • 웹 페이지의 내용에 직접적으로 필요한 것은 아니지만 전체적인 분위기를 조성하고, 특별한 느낌을 표현하기 위해 웹 페이지에 추가되는 요소 • 웹 페이지의 배경이나 이 미지, 불릿 등을 이용 • 적절한 텍스쳐의 사용 50 8장 웹 페이지의 디자인 8.7 웹 페이지 설계의 힌트 8.7.1 웹 페이지 디자인의 10가지 원칙 ① 웹 페이지 로드 시간은 10초 이상 걸리지 않도록 해야 한다. ② 내용을 자주 업데이트 한다. ③ 링크의 색을 마음대로 바꾸거나 파란 글씨에 밑줄을 넣어, 링크가 혼동되도록 해서는 안된다. ④ 방문객이 사이트의 구조를 쉽게 파악할 수 있도록 구성한다. ⑤ 길게 스크롤되는 문서를 만들지 않는다. ⑥ 각 페이지마다 이전 페이지나 상위 페이지, 홈 페이지로의 링크를 만들어 페이 지간의 이동이 용이하게 만든다. ⑦ 사이트 내의 링크는 상대 경로를 사용한다. ⑧ 지나치게 애니메이션을 많이 사용해서는 안된다. ⑨ 별로 중요하지 않은 내용을 강조해서는 안된다. ⑩ 프레임 투성이의 페이지는 금물이다. 51 8장 웹 페이지의 디자인 8.7.2 더 나은 웹 페이지를 디자인하는 방법 ① 웹 페이지의 제목을 의미있게 붙인다. ② 좋은 미리보기 그림을 사용한다. ③ 특정한 환경을 가정하고 웹 페이지를 만들면 안된다. ④ 간결한 내용을 작성하고 독자가 쉽게 내용을 파악할 수 있는 페이지를 만든다. ⑤ 다운로드에 시간이 오래 걸리는 웹 페이지로 이동할 때는 미리 경고를 해서 독자가 기다림을 감수할 수 있는지를 확인하는 것이 좋다. 이미지 에도 크기 정보를 넣어서 독자가 다운로드전에 판단을 할 수 있도록 하는 것이 좋다. ⑥ 단락에 링크를 넣는 것은 좋지 못하다. 즉, 문장 내에 링크를 넣는 것은 바람직하지 못하다. 52 8장 웹 페이지의 디자인 8.7.3 웹 페이지 체크 리스트 자신의 웹 페이지의 문제점을 다음을 통해 체크 • • • • • • • • 개설 목적이 명확한가? 개념이 잘 나타나 있는가? 자료 갱신은 잘 되는가? 다운로드 속도는 적당한가? 웹마스터에게 오는 메일에는 잘 답장하는가? 네비게이션이 잘 되는가? 모든 브라우저에서 잘 보이는가? 불필요한 정보를 제공하지는 않는가? 53