홈페이지 구조 세 부분, 헤더, 메인, 푸터 영역

오늘은 홈페이지 구조에 관한 이야기를 해 볼까 합니다. 뭐.. 홈페이지 뿐 아니라 블로그나 기타 웹페이지들도(제대로 된 페이지라면..) 거의 대부분은 아래의 헤더, 메인, 푸터로 구성됩니다.

 

개인적으로는..

 

과거에 홈페이지 제작에 관한 공부를 할 때.. 프레임이라는 개념이 있어서 하나의 화면을 일정하게 나누고 여기에 서로 독립된 페이지를 노출하는 그런 방법들을 자주 사용했는데요.. 요즘에는 그렇지는 않고 전부다 하나의 페이지에 헤더, 메인, 푸터 영역을 넣는 추세입니다.

 

다시.. 거진 15년 만에 홈페이지 제작 공부를 시작하려는데.. 이게, 과거와는 완전히 그 개념이 다른 부분도 많고, 태그나 이런 부분도 많은 변화가 있어서.. 개인적으로 좀 버겁네요.. 나이가 들어 까먹기는 참 뭐하게 잘 까먹는데 말이죠.. -_-(역시, 공부는 때가 있나 봅니다.;;;)

 

아래는, 개인적으로 제가 작업을 하고 있는 워드프레스 블로그 입니다. 만들어 놓은지는 좀 됐는데 거의 방치하다 싶히 해서 뭐.. 별거 없습니다. 워드프레스 공부를 하는 김에.. 앞으로 좀 잘 구성해 나가봐야 겠습니다. ^^

 

아무튼, 헤더 영역은 가장 윗쪽, 메인은 본문을 포함한 주요 컨텐츠 영역을 이야기 합니다. 그리고 푸터는 웹 페이지의 가장 끝 부분을 이야기 하는 것이죠..

 

블로그나 웹 사이트를 만들 때.. 헤더, 메인, 푸터로 나누어 그 영역을 구분하고 메뉴를 배치할 필요가 있죠.. 각 영역별 포인트를 짚어 보자면 아래와 같습니다.

 

 

1. 헤더(Header)

 

헤더 영역은 웹 페이지의 가장 상단을 차지하는 부분이죠.. 당연히 메인 영역을 잘 채우는 것이 좋은 사이트나 블로그를 만들어 가는 중요한 포인트이겠지만.. 헤더 영역도 무시할 수는 없겠죠..

 

헤더영역은 사이트 방문자에게 첫인상을 주는 그런 영역이기도 합니다. 우리가, 사람을 만날 때에도 첫인상에 많이 좌우되고 선입견 같은 것들이 생기듯.. 웹 사이트 방문자 역시 마찬가지라는 생각입니다. 따라서, 디자인 적으로 잘 꾸며야 하는게 바로 헤더영역 이기도 합니다.

 

이와 더불어..

 

헤더 영역은 해당 사이트의 정체성을 나타낼 수 있는 것들을 표현해야 합니다. 기업이라면 로고같은 것을 활용해야 할 것이고 개인이라면, 내 웹사이트의 정체성을 나타낼 수 있는 타이틀 등을 달아야 하겠죠.. 통상, 헤더 영역에서는 로고, 메뉴, SNS리스트, 검색창 등을 넣습니다.

 

 

2. 메인(Main)

 

메인영역은 해당 사이트의 컨텐츠를 보여주는 주 영역입니다. 아무리 잘 꾸며놓은 사이트라 하더라도 컨텐츠가 부실하다면 그 사이트의 가치는 당연히 떨어지는 것이겠죠? 디자인도 중요한 것이지만.. 결국, 중요한 것은 컨텐츠라는 점! 블로그를 오랜기간 운영하면서 절절하게 느끼는 부분이기도 합니다.

 

메인 영역에서 신경 쓸 것은..

 

당연히, 사용자 중심의 컨텐츠 배치와 구성입니다. 흔히, 가독성이라고 하죠.. 글을 읽는 분에게 적당한 레이아웃인지, 문장간격, 글자 폰트 크기는 괜찮은지등을 체크하도록 합니다. 긴 글이라면 적절하게 이미지 등을 사용해 지루함을 덜고 이해를 돕는 장치들을 할 필요도 있겠습니다.

 

 

3. 푸터(Footer)

 

푸터영역은 가장 주목도가 떨어지는 그런 영역입니다. 누리꾼들은 생각보다 인내심이 많지 않습니다. 정성들여 쓴 글을 끝까지 읽어주면 감사한 것이지만.. 사실, 그런 분들은 드물죠.. 물론, 자신에게 필요한 정보를 촘촘하게 구성해 놓고 있다면 다르겠지만.. 보통의 경우, 자신에게 필요한 정보만을 읽고 휭~!! 냉정하게 나가버립니다. -_-

 

따라서, 푸터영역에까지 눈길을 주는 분들은 상대적으로 적습니다. 이런 이유로 푸터 영역에는 중요한 정보들 보다는 부수적인 정보들 예를들면 저작권 정보라든지, 사업자표시 등의 법적으로 강제된 표시들을 해 둡니다.