레이아웃 최적화 세팅 팁 Part. 1 - 세팅 절차

시네마 레이아웃 출시를 하면서 그 동안 XE를 접하신지 얼마 되지 않은 분들께서 주로 주신 문의를 토대로 보다 상세한 매뉴얼을 준비하다 이렇게 분리를 하여 팁이 될만한 내용들을 소개합니다.

시네마 레이아웃을 예로 설명을 하지만 포괄적으로 설명하므로 XE초보자분들께 이해할 수 있도록 기초적인 부분을 설명하려고 합니다. 초보자분들께 조금이나마 도움이 되시길 바랍니다.

1. 시네마 레이아웃 Part. 1 - 소개 및 설정안내 

2. 시네마 레이아웃 Part. 2 - 샘플 사이트 각 페이지 설정 팁

3. 레이아웃 최적화 세팅 팁 Part. 1 - 세팅 절차

4. 레이아웃 최적화 세팅 팁 Part. 2 - 위젯 페이지 세팅(컨텐츠 위젯)
5. 레이아웃 최적화 세팅 팁 Part. 3 - 블로그 페이지, 사이드 세팅(웹진 위젯)
6. 레이아웃 최적화 세팅 팁 Part. 4 - 게시판 세팅
7. 레이아웃 최적화 세팅 팁 Part. 5 - 컨텍트 페이지 세팅

순서는 상관없으며 개인적으로 주로 하는 방법이니 참고하세요.

1. 사이트 맵 설정

- 제일 먼저 체크를 할 부분이 사이트 맵에 메뉴입니다. 레이아웃을 생성하고 페이지나 게시판을 연결하기 위해서는 하나의 공통된 모듈 이름(링크)이 연결 고리가 되기 때문입니다. 그러므로 사이트 맵에서 먼저 메뉴를 생성하시길 권장합니다.

위 이미지처럼 메뉴 명을 적고 모듈 또는 URL부분에서 원하는 방식을 선택하시면 되겠습니다.

- 모듈 생성 : 메뉴를 생성과 동시에 연결될 게시판이나 페이지 등을 함께 생성할 수 있습니다.
- 모듈 선택 : 메뉴 생성 전에 게시판이나 페이지를 먼저 생성하고 해당 게시판 또는 페이지를 찾아 연결하는 방식입니다.
- 연결 URL : 모듈 이름을 직접 입력하여 연결하는 방식입니다.

위 방식에서 자신한테 적합한 방식을 선택하시면 됩니다. 모듈 생성의 경우 메뉴생성과 동시에 게시판 또는 페이지를 생성하므로 굉장히 편한 방식이라 할 수 있습니다.

개인적으로는 연결 URL을 많이 사용하는데 이유는 게시판의 경우 옵션을 설정해야 될 부분들이 많이 있습니다. 그래서 각 페이지, 게시판을 따로 생성을 하고 복사하는 방식을 사용합니다. 게시판 복사에 경우 모든 옵션이 복사되는 것은 아니지만 게시판정보, 권한관리 등은 복사가 되기 때문에 조금이라도 설정을 줄이기 위해 선호하는 편입니다.

하나의 사이트를 제작하는 분이라면 참고만하시고 제 경우 제작의뢰, 세팅의뢰를 통해 사이트 구축을 많이 하므로 연결 URL을 주로 사용합니다.

1.4 버전에서 위자드XE라는 모듈이 있었는데 이 기능중에 게시판에 모든 옵션까지 함께 복사하는 기능이 있어서 유용하게사용했었는데 개발하신 분께서 1.5버전 패치를 하지 않아 더 이상 사용을 못해 아쉬워 하고 있습니다.

2. 레이아웃 생성

이제 레이아웃을 생성할 차례입니다. 시네마 레이아웃이 아닌 다른 레이아웃도 세부 설정은 하지 않고 기본적인 설정만 하고 생성한 사이트 맵을 레이아웃 하단 메뉴 연결부분에 지정을 하고 레이아웃 생성을 합니다.

시네마 레이아웃의 경우 레이아웃 생성시 아무 설정을 하지 않은 상태에 메뉴만 연결하고 해당 게시판 url을 볼 때에 모습입니다.

어느정도 레이아웃에 대해 파악이 되어있다면 초기 생성시 서브형태로 생성을 하세요. 이유는 다음으로 게시판을 생성하고 샘플로 게시물을 등록하기 위함입니다. 일반적으로 메인 페이지에 위젯페이지로 생성하고 위젯으로 꾸미기 때문에 출력이 될 게시물이 필요하기 때문입니다.

- 시네마 레이아웃을 생성할 때 예를 들어 메인형은 1단 구조, 서브형은 2단 사이드 좌측 구조로 구성을 한다면 서브 사이드 2단 좌측형으로 생성을 합니다. 사이트 구축을 위해 어떻게 구성할 것인가 계획이 모두 되어있다면 레이아웃 생성시 각 페이지에 맞는 형태로 레이아웃들을 모두 생성해도 되겠죠.

- 일단 레이아웃 서브 형을 먼저 생성해둔 것을 가정하고 다음 게시판을 생성합니다.

3. 게시판 생성

이제 게시판만 생성해주면 됩니다. 메뉴 - 게시판 - 레이아웃. 이렇게 3가지가 연결되어 웹사이트의 기본 연결고리가 생성이 되게됩니다.

게시판 생성시 필수로 입력해야 되는 부분들입니다. 추가로 아래쪽에 목록 수, 검색 목록 수, 페이지 수 입력 란이 있는데 기본이 모두 20개로 입력이 되어있습니다. 게시판의 형태 목록, 웹진형, 갤러리형에 따라 수를 조정해 주시면 됩니다.

개인적으로 모두 기본 10을 입력하고 갤러리형의 경우 가로 섬네일 수에 따라 목록 수만 조정을 합니다.
     게시판 옵션 설정에 대해서는 따로 보다 상세하게 설명하도록 하겠습니다.

기본적인 방식이라고 한다면 위 이미지에서처럼 메뉴 - 레이아웃 - 게시판이 서로 연결됨으로서 사이트가 생성이 되는 것입니다.

여기까지 진행해서 기본적인 사이트의 모습을 확인하였습니다. 이제 본격적으로 사이트를 구축해 나갑니다.

레이아웃 구성을 대충 메인 페이지와 각 서브 페이지를 어떻게 할 것인가 생각을 해두시는게 좋습니다. 하지만, 레이아웃을 완전히 파악이 안된 상태라면 어려운 부분이 있을 것입니다. 그러므로 아예 각 형태를 만들어 둡니다. 계속해서 아래에 자세히 설명을 하겠습니다.

4. 레이아웃 파악 및 추가등록

시네마 레이아웃에 각 컨텐츠에 대한 설명입니다.

예로 메인페이지를 프로모션 슬라이드와 AD 배너를 사용하고 아래 구조를 1단 형, 2단 사이드 우측형을 각각 생성을 합니다. 레이아웃 생성시 제목으로 쉽게 파악할 수 있게 <시네마 레이아웃 메인 1단형 + 슬라이드 + AD배너> 이런 식으로 생성한 레이아웃이 어떤 구조인지 알 수 있게 생성을 합니다.

참고로 샘플사이트를 확인해보세요.

<메인 1단형 + 슬라이드 + AD배너> http://ksostudio.com/nov/cinema1_main

<메인 2단형 + 영상 + AD배너> http://ksostudio.com/nov/cinema4_main

이렇게 서브 페이지도 여러가지 형태로 생성을 합니다.

<서브 2단 사이드 좌측 + 서브탑이미지 + AD배너> http://ksostudio.com/nov/cinema1_2ac

<서브 2단 사이드 우측 + 웹진위젯> http://ksostudio.com/nov/cinema1_blog

<서브 1단 구조 + 갤러리용> http://ksostudio.com/nov/cinema1_gallery

<서브 2단 컨텍트 페이지용> http://ksostudio.com/nov/cinema3_contact

이런 방식으로 여러개의 레이아웃을 생성을 합니다. 다소 번거로울수 있습니다만 여러가지 형태로 미리 생성을 해두면 나중에 게시판이나 페이지를 추가할 때 생성해둔 레이아웃을 바꿔가며 연결 할 수 있습니다.

5. 페이지 및 추가 게시판 생성

메뉴 생성시 페이지나 게시판을 생성했다면 생성한 게시판에 옵션만 설정하면 됩니다. 아직 페이지 및 게시판을 생성하지 않았다면 먼저 페이지를 생성합니다.

위 이미지와 같이 필수 입력란을 입력하고 해당된 레이아웃을 연결합니다.

페이지 타입이 <위젯페이지, 문서페이지, 외부페이지> 3가지로 나뉘는데 일반적으로 위젯페이지로 생성하면 됩니다.

- 위젯페이지 : 말 그대로 위젯으로 페이지를 꾸밀 수 있고 <직접입력>을 통해 문서페이지를 사용할 수도 있습니다.

- 문서페이지 : 위젯없이 간단하게 문서페이지를 꾸밀 수 있습니다. 단, 제목입력 등 입력란이 있는데 출력이 될 때 고정된 형태로 출력이 됩니다. 이 부분은 사용자분들이 바꿀 수가 없습니다. 그래서 문서페이지도 위젯페이지로 생성해서 문서페이지로 꾸미면 됩니다.

- 외부페이지 : 말 그대로 특정 경로에 html파일로 페이지를 꾸며서 페이지설정 란 하단에 외부문서위치 경로를 입력하면 html파일을 연결해주는 역활을 합니다. html과 css를 할 수 있어야 하므로 보통의 사용자분들은 사용이 힘들겠죠.

이렇게 하나의 페이지를 생성했다면 나머지 필요한 페이지는 복사를 통해 한 번에 생성을 할 수 있습니다.

페이지 목록을 보면 오른쪽에 위 이미지에서 처럼 설정, 복사, 삭제 중에서 복사를 클릭합니다.

팝업 창이 나타나는데 필요한 페이지를 모두 입력하고 저장을 클릭합니다. 이 모든 페이지들이 모두 생성이 됩니다.

단, 복사를 하는 페이지에 연결된 레이아웃에 형태를 파악해서 생성해야 됩니다. 페이지에 연결될 레이아웃을 여러개 생성했다면 복사할 페이지와 레이아웃이 같은 형태인지 파악해야겠죠.

게시판의 경우도 페이지와 마찬가지로 최초 게시판을 생성해서 옵션을 미리 설정한 다음 복사를 통해서 한 번에 생성을 하면 됩니다. 게시판도 연결된 레이아웃을 꼭 체크하시기 바랍니다.

게시판은 옵션 설정이 많습니다. 복사시 옵션 설정도 함께 복사가 된다면 정말 좋을거 같은데 아직 코어자체에서 옵션까지 복사가 되지는 않습니다. 고작 게시판 정보와 권한관리까지 옵션이 복사됩니다.

이렇게 핵심이 되는 절차에 대해 알아보았습니다. 이 후에 세부 설정 및 위젯 세팅, 애드온 적용 등 할 일이 참 많습니다. 여기서 이 모든 것을 설명할 수는 없고 위젯과 게시판등 설정하는 방법은 아래 링크를 참조하세요.

1. 시네마 레이아웃 Part. 1 - 소개 및 설정안내 

2. 시네마 레이아웃 Part. 2 - 샘플 사이트 각 페이지 설정 팁

3. 레이아웃 최적화 세팅 팁 Part. 1 - 세팅 절차

4. 레이아웃 최적화 세팅 팁 Part. 2 - 위젯 페이지 세팅(컨텐츠 위젯)
5. 레이아웃 최적화 세팅 팁 Part. 3 - 블로그 페이지, 사이드 세팅(웹진 위젯)
6. 레이아웃 최적화 세팅 팁 Part. 4 - 게시판 세팅
7. 레이아웃 최적화 세팅 팁 Part. 5 - 컨텍트 페이지 세팅

이해가 안되는 부분이나 궁금한 내용은 댓글로 남겨주세요~! 댓글은 로그인을 하셔야 합니다.