사이트

웹디자인에서 가장 대표적인 작업으로 기업이나 브랜드뿐만아니라 개인까지 사이트를 제작하는 경우가 많습니다. 웹디자인의 시작이라고 할 수 있는 사이트디자인에 대해 알아보고 작업 시 필요한 가이드를 알아보겠습니다.

01.반응형/적응형

사이트에는 반응형 사이트와 적응형 사이트가 있습니다. 웹표준이라는 것이 나오고 반응형사이트의 중요성이 높아 졌는데요. 반응형 사이트란 디스플레이의 크기에 따라 레이아웃이나 요소의 크기를 자동으로 바뀌도록 코딩하여, 어떤 환경에서도 사이트를 잘 볼 수 있도록 만드는 방식입니다. 이 방식은 대부분 데스크탑을 기본으로 디자인하고, 브라우저의 크기나 디스플레이 크기에 변경이 있을때 그에 맞춰 스타일을 변경하는 방식을 사용합니다. 그래서 기기별로 따로 제작하지 않고 한번의 제작으로 다양한 기기에 반응하도록 만드는 것이 특징입니다. 정보의 양이 너무 많지 않은 사이트에 적합하며, 적응형에 비해 제작비용이 저렴하다는 장점이 있습니다. 다만 환경별 특징에 완벽하게 적응하기에는 어려움도 있습니다. 적응형 사이트란 기기별로 따로 사이트를 제작하는 방식입니다. 반응형과는 다르게 사이트가 사용자의 기기를 인식해 해당디자인으로 연결 시켜주는 방식입니다. 정보의 양이 너무 많거나 기기별로 완벽하게 적응한 사이트를 제작하기에 좋습니다. 단순히 스타일 변경을 하는 것이 아닌 디바이스 별 특징을 잘 고려해 완벽하게 적응한 사이트를 만들기에 좋습니다. 다만 반응형에 비해 비용이 비싸다는 단점이 있습니다. 웹표준에서는 반응형 사이트를 권장하고 있습니다.

02.구조이해하기

사이트의 구조는 크게 Header, Body, Footer 영역으로 구분되어 있습니다. header영역은 보통 GNB(Global Navigation Bar)가 들어가는 영역으로 Logo, Menu, Search, Login, Join, Mypage 등의 버튼이나 아이콘이 들어갑니다. 높이는 디자인에 따라 다르지만 100~200px 사이를 사용하는 것이 일반적이며, 전체페이지에서 일관되게 표현되어야하는 영역입니다. body영역은 컨텐츠가 들어가는 영역이라 생각하시면 됩니다. 각 페이지에 맞는 정보나 데이터를 배치하는 영역으로 다양한 섹션으로 구분해서 사용자가 정보를 쉽게 볼 수 있도록 디자인하는 것이 중요합니다. 보통 시작부분을 비주얼영역으로 넓게 사용하고 아래에 컨텐츠를 배치하는 경우가 많으며, 메인페이지의 경우에는 서브페이지에 있는 주요한 정보에 대해서 배치하고 서브페이지로 연결을 유도하는 컨텐츠가 많습니다. 서브페이지의 경우에는 각 페이지에 맞는 정보들을 보기좋게 정리합니다. 경우에 따라 SNB(Side Navigation Bar)와 같은 추가적인 메뉴가 포함되기도 합니다. Footer영역의 경우에는 최하단 영역으로 보통 FNB(Foot Navigation Bar)와 브랜드나 기업에 대한 정보, 사이트에 대한 정보, Copyright, Contact 등의 정보를 기입합니다. Header영역과 마찬가지로 전체페이지에 일관 된 디자인으로 표현해야 합니다.

03.정보구조설계

정보구조의 설계란 사이트의 전체 페이지 구조를 설계하는 일을 말합니다. 사이트제작에 앞서 가장 중요한 작업이라 생각이 됩니다. 사이트는 메인과 서브 페이지로 구분이 되어 있으며, 사이트 성격에 따라 페이지의 구성은 달라집니다. 무엇보다 사용자가 정보를 찾아감에 있어서 불편함이 없도록 설계하는 것이 좋습니다. 보통 메뉴트리를 이용해 전체적인 계층구조와 파일명 기능등을 간략하게 정리하는 것이 좋습니다. 사이트맵 역시 이와 비슷한 개념이라고 보시면 됩니다. 사이트의 성격에 따라 사용자의 사이트 이용 동선을 플로우차트를 통해 정리하는 경우도 있습니다.

04.그리드시스템

----- 지속적으로 업데이트중 입니다.

05.타이포그래피

06.컬러시스템

07.이미지의 사용

08.아이콘 디자인

09.다양한 Form

10.코딩에 대해