01. 홈페이지형 레이아웃 제작

홈페이지 형태의 레이아웃을 제작하는 예제를 통해 레이아웃 제작 하는 방법을 소개합니다.

레이아웃등을 포함한 모든 스킨은 다음과 같은 순서로 제작됩니다.

스킨 제작을 위한 필수 사항^#

1. 디자인
   zbXE의 스킨들은 로그인 유무에 따라서 모양이나 기능이 변할 수 있습니다. 
   이에 맞춰서 디자인을 해주어야 합니다. 
2. 퍼블리싱
   퍼블리싱이란 이미지로 되어 있는 디자인을 HTML과 CSS 혹은 Javascript로 만드는 것을 이야기합니다.
   이 과정에는 적절한 크기와 형태로 이미지를 나누어야 하고 HTML/CSS를 이용하여 이를 다시 합치는 작업이 있습니다. 
3. 스킨 제작
   퍼블리싱이 끝난 결과물은 브라우저에서 잘 보여지지만 내용이 없는 껍데기일 뿐입니다.
   여기에 zbXE에서 작성된 컨텐츠와 연동될 수 있도록 생명력을 부여해야 합니다.
   이때는 02. zbXE 템플릿 스크립트 문법을 이용합니다. 

1. 디자인 - 스킨 제작을 위한 구성 설계^#

레이아웃은 홈페이지 혹은 블로그등의 사이트 껍데기라고 간단히 이야기할 수 있습니다.

즉 내용이 출력되는 부분을 제외한 나머지를 담당하고 있는 것입니다.

여기에 메뉴(menu) 모듈에서 생성한 메뉴를 연동하게 되면 하나의 훌륭한 사이트 레이아웃이 되어 멋지게 동작할 수 있습니다.

레이아웃에는 다음과 같은 구성 요소 및 고민 사항이 필요합니다.

1. 메뉴와의 연동
   레이아웃에 연동되는 메뉴를 몇개를 할 것인지와 각 메뉴마다 몇단계까지 지원할 것인지를 정해야 합니다.
   Javascript로 구성될 경우에 한해서 무한 단계까지 가능하겠지만 보통의 UI(usre interface)들은 2~3단계로 구성되어 있습니다.
2. 기본으로 탑재될 위젯
   레이아웃에 위젯들을 기본설치 할 수 있습니다.
   이 위젯들은 위젯 관리 페이지에서 생성된 코드를 삽입함으로서 편하게 추가가 가능합니다.
   보통 홈페이지형 레이아웃에는 로그인정보만을 기본으로 탑재하고 블로그형  레이아웃은 최신글/댓글등의 블로그툴에서 자주 사용되는 위젯들을 기본 탑재하게 됩니다.

위 사항을 고려하여 먼저 디자인을 합니다.

디자인시에 마우스 오버시 혹은 선택되었을때의 효과도 미리 고려하는 것이 좋습니다.

2. 퍼블리싱 - 최대한 가볍고 여러가지 환경에서 변함 없이..^#

최근에는 웹표준을 준수하는 것에 대한 요구가 높아지고 있습니다.

웹표준을 준수하는 방법이나 지침서들은 많이 있으니 여유가 있을때 공부하시는 것을 추천드립니다.

다만 웹표준이란 결국 다양한 환경에서, 그리고 출력되는 컨텐츠가 단순히 이쁘게 하기만을 위한 것이 아니라 의미를 가지도록 하기 위한 방법이므로 웹표준이 최우선이지는 않습니다.

하지만 웹표준을 준수하여 퍼블리싱을 할 경우 차후 유지보수시에 매우 편하기도 하니 가능한 준수하는 것이 좋습니다.

웹표준과 별도로 다양한 브라우저에서 잘 보이게 하기 위한 크로스 브라우징은 늘 고민거리이지만 가능한 지키는 것이 좋습니다.

크로스 브라우징은 정성을 들여야 하는 것이니만큼 충분한 시간적 여유를 두고 진행하시는 것이 좋습니다.

레이아웃의 퍼블리싱은 대부분 간단하지만 메뉴의 선택에 따른 동적 변화를 준다든지 컨텐츠의 양에 따라 레이아웃이 깨어지지 않도록 하는 부분등은 유의를 하여 테스트를 하여야 합니다.

3. 스킨제작 - 생명을 부여하자^#

zbXE의 스킨으로 생명력을 부여하기 위해서는 02. zbXE 템플릿 스크립트 문법을 이용합니다.

다행히 레이아웃에는 많은 문법이 사용되지 않고 대부분 기존에 제작된 레이아웃들의 문법을 가져오는 것으로 쉽게 적용할 수 있습니다.

그리고 레이아웃에서 동적으로 변화를 주고 싶은 부분을 변수화 하여 직접 입력받아 사용하도록 할 수 있습니다.

위의 3단계로 실제 레이아웃을 만들어 보는 예제를 소개하도록 하겠습니다.

01. 디자인 으로 넘어가봅시다.