사이트 기본 구조 잡기

사이트 기본 구조 잡기                                          

 

웹 표준을 이용한 사이트 디자인에서 HTML이 해주는 정확한 역할은 사이트의 구조를 잡아주는 것입니다.

즉 구조는 HTML이 잡고, 디자인은 CSS가 해준다고 보시면 됩니다.

 

일반적으로 사이트의 구조는 생각보다 많지 않은 기본구조로 이루어져 있습니다.

 

 

가장 기본적은 사이트의 구조는 위와 같습니다.

상단은 메인 메뉴와 로고들이 배치되는 자리이고, 하단은 보통 저작권 표시나 기타 사이트 소개, 저작권 안내 등이 들어가며, 왼쪽 혹은 오른쪽 메뉴에는 서브메뉴들이 들어가게 됩니다.

 

하지만 사이트에 따라서는 많은 변형이 존재하게 되며 그림에서와 같이 상단, 하단, 가운데 콘텐츠 부분만으로도 이루어진 사이트들도 상당히 많이 있습니다.

또한 아주 단순하게 왼쪽과 오른쪽 이렇게 사이트의 구조가 된 곳도 많이 있습니다.

 

또 하나의 변형된 사이트 구조를 보겠습니다.

 

 

여기서도 보면 처음 나온 사이트의 구조와는 별 차이가 나지 않는 것을 볼 수 있습니다만, 상당히 많은 사이트들이 이런 구조를 채택한 것을 볼 수 있습니다.

 

이런 사이트 구조로 된 곳을 몇가지 예를 들어 보겠습니다.

 

대한민국에서 가장 유명한 사이트인 네이버를 보겠습니다.

 

네이버를 잘 보시면 조금 5번과 같은 사이트 구조를 지녔지만, 실질적으로 보시면 2번 사이트 구조라는 것을 알 수 있습니다. 네이버는 메인 콘텐츠 부분을 부분적으로 모듈화 하여 배치한 것을 알 수 있습니다.

                           

이제는 다음을 한번 보겠습니다.

 

다음은 확실하게 5번의 구조를 지녔다는 것을 알 수 있습니다. 왼쪽과 오른쪽이 분리 되었고, 콘텐츠의 배치도 확실하게 정리 된 것을 알 수 있습니다.

 

요즘은 모든 인터넷 사용자들이 트위터를 많이 사용합니다.

그럼 트위터의 사이트 구조는 어떤지 한번 보겠습니다.

 

 

트위터의 기본 구조는 3번의 구조를 지녔다는 것을 알 수 있습니다.

 

이렇듯이 사이트의 전체적인 구조는 정형화되어 있다고 봐도 무방합니다.

그리고 현재까지 많은 사용자들이 이런 구조에 익숙해 지다 보니, 사이트를 제작할때 먼저 어떤 레이아웃을 사용할지 먼저 사이트의 구조를 잡고, 거기에 맞게 메뉴와 이미지 로고 등을 배치하는 것이 좋습니다.

 

여기 예제에서는 현재 가장 많이 사용하는 1번과 3번 구조를 이용해서 직접 가상의 사이트를 만들어서 제작해 보도록 하겠습니다.