웹디자인에도 다양한 분야가 있습니다. 그 중 가장 크게 구분되는 것이 구축과 운영입니다. 그 외에 기업이나 직무에 따라 구분이 되기도 하는데요, 먼저 구축과 운영에 대해 자세히 알아보겠습니다.
구축이란? 간단하게 말하면 웹사이트를 만드는 일이라고 생각하시면 됩니다. 사이트를 새롭게 만들거나 리뉴얼하는 등의 일을 말합니다. 구축과 관련 된 업무는 사이트의 기획과 마케팅, UX디자인, UI디자인, 퍼블리싱, 개발 등 많은 작업과정이 필요합니다. 그래서 에이전시 취업의 경우 구축에 참여를 하는 것을 기회라 생각하는 디자이너들이 많은데요. 이는 대형에이전시에서 조금 규모있는 프로젝트에 참여할때의 이야기 입니다. 하지만 그러한 경우가 아닌 홈페이지를 제작해주는 작은 업체에서는 대부분 저렴한 비용으로 일을 하다보니 워드프레스, 윅스와 같은 템플릿이나 솔루션을 이용해 빠르게 작업을 진행하는 경우도 많은데요. 이런 경우에도 물론 좋은 경험이 될 수는 있지만 포트폴리오로써 좋은 결과물을 쌓기에는 조금 어려움도 있습니다. 그래서 최소 중대형 에이전시에서 대기업, 중견기업, 강소기업 수준의 사이트구축 경험을 쌓는것을 추천드리며, 지디웹 사이트에서 다양한 에이전시가 어떤 일을 해왔는지를 참고하시면 도움이 될 것 같습니다. 추가로 구축업무는 운영에 비해 일정의 타이트함이나 업무강도가 조금 더 높아, 편한 업무를 원한다면 운영업무가 조금이나마 더 좋습니다. 코딩의 경우에는 회사규모에 따라 차이가 있습니다. 업무의 분담이 잘되어 있는 경우 디자이너는 디자인만 신경쓰면되지만 그렇지 못한 경우 간단한 HTML, CSS , JavaScript 정도는 가능한 것이 좋습니다.
운영과 관련 된 일은 정말 다양합니다. 기본적으로 사이트의 유지와 보수를 담당하며, 추가적으로 프로모션 관련업무가 있습니다. 보통 에이전시 취업의 경우 클라이언트 본사에 파견되어 운영업무를 담당하는 경우도 있으며, 에이전시 내에서 업무를 처리하는 경우도 있습니다. 구축보다는 타이트하지 않아 조금 더 편하게 일을 할 수는 있지만 이 또한 프로모션 비중에 따라 업무강도는 차이가 있을 수 있습니다. 웹디자인 분야로 취업하는 경우 구축보다는 운영업무의 비율이 훨씬 많습니다. 구축과 운영을 스스로 원한다고 해서 선택가능한 것은 아니지만 다양한 경험을 해보는 것이 더 좋으며, 만약 인하우스 디자이너로 이직을 한다면 구축 및 운영 경험이 큰 도움이 될 것이라 생각됩니다. 사이트 유지보수를 제외한 프로모션에는 이벤트페이지, 광고배너, SNS카드뉴스 등 홍보나 광고관련 업무들이 있습니다. 운영의 경우 특별히 코딩을 배울 필요는 없지만 경우에 따라 수정이 필요한 경우도 있으니 수정 가능한 정도의 HTML, CSS, JavaScript를 배워두시면 좋습니다.
웹디자인에서 가장 대표적인 작업으로 기업이나 브랜드뿐만아니라 개인까지 사이트를 제작하는 경우가 많습니다. 웹디자인의 시작이라고 할 수 있는 사이트디자인에 대해 알아보고 작업 시 필요한 가이드를 알아보겠습니다.
사이트에는 반응형 사이트와 적응형 사이트가 있습니다. 웹표준이라는 것이 나오고 반응형사이트의 중요성이 높아 졌는데요. 반응형 사이트란 디스플레이의 크기에 따라 레이아웃이나 요소의 크기를 자동으로 바뀌도록 코딩하여, 어떤 환경에서도 사이트를 잘 볼 수 있도록 만드는 방식입니다. 이 방식은 대부분 데스크탑을 기본으로 디자인하고, 브라우저의 크기나 디스플레이 크기에 변경이 있을때 그에 맞춰 스타일을 변경하는 방식을 사용합니다. 그래서 기기별로 따로 제작하지 않고 한번의 제작으로 다양한 기기에 반응하도록 만드는 것이 특징입니다. 정보의 양이 너무 많지 않은 사이트에 적합하며, 적응형에 비해 제작비용이 저렴하다는 장점이 있습니다. 다만 환경별 특징에 완벽하게 적응하기에는 어려움도 있습니다. 적응형 사이트란 기기별로 따로 사이트를 제작하는 방식입니다. 반응형과는 다르게 사이트가 사용자의 기기를 인식해 해당디자인으로 연결 시켜주는 방식입니다. 정보의 양이 너무 많거나 기기별로 완벽하게 적응한 사이트를 제작하기에 좋습니다. 단순히 스타일 변경을 하는 것이 아닌 디바이스 별 특징을 잘 고려해 완벽하게 적응한 사이트를 만들기에 좋습니다. 다만 반응형에 비해 비용이 비싸다는 단점이 있습니다. 웹표준에서는 반응형 사이트를 권장하고 있습니다.
사이트의 구조는 크게 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영역과 마찬가지로 전체페이지에 일관 된 디자인으로 표현해야 합니다.
정보구조의 설계란 사이트의 전체 페이지 구조를 설계하는 일을 말합니다. 사이트제작에 앞서 가장 중요한 작업이라 생각이 됩니다. 사이트는 메인과 서브 페이지로 구분이 되어 있으며, 사이트 성격에 따라 페이지의 구성은 달라집니다. 무엇보다 사용자가 정보를 찾아감에 있어서 불편함이 없도록 설계하는 것이 좋습니다. 보통 메뉴트리를 이용해 전체적인 계층구조와 파일명 기능등을 간략하게 정리하는 것이 좋습니다. 사이트맵 역시 이와 비슷한 개념이라고 보시면 됩니다. 사이트의 성격에 따라 사용자의 사이트 이용 동선을 플로우차트를 통해 정리하는 경우도 있습니다.
앞서 베이직 가이드에서 그리드 시스템의 기본적인 구조에 대해 설명했습니다.
----- 지속적으로 업데이트중 입니다.