수학은 아름답습니다. 처음 디자인을 시작했을 때 저는 그렇게 확신했습니다. 수학은 너무 지루해요. 가장 아름다운 디자인, 예술 작품, 사물, 심지어 사람까지도 모두 수학적 공통점을 가지고 있다는 사실에 놀랄 수도 있습니다. 특히 그리스 문자 Φ(phi)로 표시되는 황금 비율(신의 비율)에 대해 이 튜토리얼에서는 웹사이트의 레이아웃을 분석하고 이를 황금 비율로 나누는 방법을 설명합니다.
웹페이지 뼈대
이것이 웹페이지의 주요 요소입니다. 구성하는 방법은 다양하지만 아마도 이 레이아웃이 가장 일반적으로 사용되는 것 같습니다.
컨테이너
모든 웹 페이지는 주로 동일한 목적, 즉 일부 페이지 요소를 포함하기 위해 컨테이너를 사용합니다. 그러나 이 방법은 다르게 구현됩니다. 예를 들어 body 태그 또는 가장 일반적으로 사용되는 div가 있습니다. 과거에 일반적으로 사용되었던 테이블도 마찬가지입니다(테이블을 컨테이너로 사용하지 마십시오. 이는 잘못된 방법입니다). 컨테이너를 침실, 주방, 거실 등이 포함된 집의 외벽으로 생각해보세요.
컨테이너 유형:
액체: 브라우저 너비에 따라 채웁니다.
고정: 지정된 너비는 브라우저 너비에 따라 변경되지 않습니다.
헤더
헤더는 실제로 특정 요소가 아니지만 일부 사람들은 그렇다고 주장합니다. 로고, 탐색 모음 및 태그라인을 배치하는 웹페이지의 최상위 수준에서 더 많이 사용됩니다. 많은 사람들은 페이지 스타일과 콘텐츠를 쉽게 분리하기 위해 이러한 요소를 div에 포함하는 것을 선호합니다. 헤더는 컨테이너로 간주되므로 위에서 언급한 액체 또는 고정이라는 두 가지 유형의 옵션이 있습니다.
심벌 마크
귀하의 로고는 귀하의 정체성이자 브랜드입니다. 가장 일반적으로 사용되는 방법은 로고를 헤더의 왼쪽 상단에 배치하는 것입니다. 우리의 독서 습관은 왼쪽에서 오른쪽, 위에서 아래로 이루어지므로 방문자가 첫눈에 볼 수 있는 위치에 로그를 배치해야 합니다.
항해
페이지 탐색은 방문자가 사이트를 사용하는 데 필요한 가장 중요한 요소 중 하나입니다. 쉽게 찾고 사용할 수 있어야 합니다. 이것이 바로 대부분의 사람들이 헤더 섹션, 적어도 페이지 상단 근처에 배치하는 이유입니다.
탐색 유형:
수평: 수평 디스플레이, '탐색'이라고 함
수직: '메뉴'라고 불리는 수직 디스플레이
주요 내용
사람들이 귀하의 사이트를 방문할 때 콘텐츠가 가장 중요하다는 것을 모든 사람이 알아야 합니다. 방문자가 원하는 내용을 빠르게 찾을 수 있도록 웹페이지의 중심이 되어야 합니다.
사이드바
사이드바는 일부 광고, 사이트 검색, 구독 링크(RSS, Twitter, 이메일 등), 연락 방법 등과 같은 보조 콘텐츠를 배치하는 요소입니다. 이 요소는 필수는 아니지만 많은 사이트에서 사용됩니다. 대부분 오른쪽에 배치되지만, 주요 콘텐츠 탐색을 방해하지 않는 한 왼쪽이나 양쪽에 배치할 수도 있습니다. 웹사이트는 가로 또는 세로 탐색을 사용하며 사이드바는 세로 탐색을 사용하는 경우가 많습니다.
보행인
방문자가 웹 페이지 끝에 도달했음을 알리기 위해 웹 페이지 끝에는 항상 바닥글이 있습니다. 머리글과 마찬가지로 바닥글도 특별한 요소가 아닙니다. 바닥글에 저작권, 법적 고지, 기본 연락처 정보를 포함하세요. 홈 페이지, 연락처 페이지 등과 같은 몇 가지 중요한 링크를 포함하는 것이 좋습니다. 일부 웹사이트에서는 이 영역을 사용하여 관련 자료나 기타 중요한 정보를 제공합니다.
"공백"
이 페이지의 빈칸을 채우고 싶은 마음이 강할 수도 있지만 그러지 마십시오. "공백"도 매우 중요합니다. NetTuts 웹사이트가 공백을 효과적으로 사용하여 페이지 균형을 만들고 좋은 느낌을 주는 방법을 확인할 수 있습니다.
위는 웹 페이지의 뼈대입니다. 이제 이러한 요소를 골든 섹션으로 나누는 방법을 살펴보겠습니다.
황금분할과 그리드 사용
앞서 제가 수학이 아름답다고 말한 것을 기억하시나요? 우리는 시각적 매력이 비율(예: 황금분할)에 기초한다고 생각합니다. 수천년 동안 예술가, 디자이너, 건축가 등은 자신의 작품의 아름다움을 높이기 위해 의식적으로든 무의식적으로든 공통 비율을 사용해 왔습니다. 이 매직넘버는 무엇인가요? 1.62 (실제로는 1.618...) 이 숫자의 유래는 말씀드리지 않겠지만 사용법은 알려드리겠습니다.
황금분할을 사용하는 방법은 매우 간단합니다. 예를 들어 기본 콘텐츠와 사이드바 목록의 너비를 찾고 싶을 수 있습니다. 콘텐츠 영역의 전체 너비를 1.62로 나누면 555.55px가 됩니다. 그렇게 정확할 필요는 없으므로 555px만 사용하겠습니다. 이제 기본 콘텐츠 요소의 너비가 555픽셀이고 사이드바의 너비가 345픽셀이라는 것을 알았습니다. 얼마나 쉬운지 보시죠?!
하지만 재미는 여기서 끝나지 않습니다. 황금 분할을 다른 요소의 너비와 높이에 적용할 수도 있습니다.
그리드 사용
당신이 대부분의 사람들과 같다면, 황금 비율을 계산하기 위해 매번 계산기를 들고 싶지 않을 것입니다. 그렇다면 가장 쉬운 방법은 그리드를 사용하는 것입니다. 따라서 당신이 해야 할 일은 너비나 높이를 3분의 1로 나누는 것입니다.
더 자세한 그리드를 생성하려면 계속해서 3분할로 나누세요. 이전 기사 "Blueprint CSS 프레임워크와의 긴밀한 접촉"을 읽으면 Blueprint CSS 프레임워크가 상세한 그리드 시스템을 사용한다는 것을 알 수 있습니다. 그리드 디자인이 더 쉽고 빨라질 뿐만 아니라 아름다운 레이아웃도 만들어줍니다. 아직 그리드 디자인을 사용해 본 적이 없다면 사용해 볼 수 있는 좋은 기회입니다. http://960.gs에서 불꽃놀이, 포토샵 또는 기타 소프트웨어용 그리드 템플릿을 다운로드할 수 있습니다.
보시다시피 NetTuts는 황금 비율을 매우 잘 따릅니다. 페이지의 상단 1/3은 다시 3등분으로 나누어져 황금비에 매우 가깝습니다. NetTuts의 디자인이 그토록 매력적인 것은 당연합니다!
새로운 디자인을 만들 예정이라면 인기 있는 사이트를 찾아 해당 사이트의 레이아웃과 황금 비율 및 그리드가 어떻게 적용되는지 검토해 보는 것이 좋습니다. 그런 다음 레이아웃에서 황금색 분할 사용과 그리드 사용을 연습하는 데 시간을 투자하세요.