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

화려한 비주얼과 세련된 디자인으로 다양하게 표현할 수 있는 장점과 사이트를 유연하게 꾸밀 수 있습니다.

※ 여기에서는 시네마 레이아웃에 대한 기본적인 내용을 소개합니다.

1. 시네마 레이아웃 Part. 1 - 소개 및 설정안내
2. 시네마 레이아웃 Part. 2 - 샘플 사이트 각 페이지 설정 팁
3. 레이아웃 최적화 세팅 팁 Part. 1 - 세팅 절차

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

샘플사이트 보러가기  |  문의하기  |  구매하기

패키지 구성 품 소개 및 설치경로

구매하신 시네마 레이아웃 패키지 파일들을 자신의 FTP에 설치된 XE코어 해당 경로에 각각 업로드 하세요.

1) 레이아웃 : 레이아웃 폴더 아래에 업로드하세요.

/layouts/kso_cinema

2) 게시판 스킨 : 기본 게시판 스킨 아래에 업로드하세요.

/modules/board/skins/kso_board

3) 컨텐츠 위젯 스킨 : 위젯폴더 아래 컨텐츠 스킨 아래 업로드하세요.

/widgets/content/skins/kso_unadorned

4) 웹진 위젯 스킨 : 웹진 위젯이 없는 분들을 위젯 webzine 위젯 자체가 포함되어있습니다. /widgets/webzine으로 올리셔도 됩니다.

/widgets/webzine/skins/kso_blog

5) 컨텍트 위젯 스킨 : 컨텍트 위젯 또한 없는 분들을 위해 contactfree 위젯 자체가 포함되어있습니다. /widgets/contactfree로 올리셔도 됩니다.

/widgets/contactfree/skins/kso_contact

6) 위젯 스타일 : 위젯 스타일 폴더 아래에 업로드하세요.

/widgetstyle/kso_widgetstyle

레이아웃 설정 및 안내

관리자 > 확장기능 > 설치된 모듈 > 레이아웃 > KSO 시네마 레이아웃

1.5.1.7 버전 : 관리자 > 확장기능 > 설치된 레이아웃 > KSO 시네마 레이아웃

1. 기본 설정

▶ 배경 스크린 : 슬라이드, 단독 이미지 1~10, 배경 사용안함

※ 레이아웃을 메인, 서브1, 서브2, 서브3 ... 이렇게 각 각 생성을 하시고 각 배경을 다르게 선택하여 활용하셔도 됩니다.

배경 스크린에 사용되는 이미지에 경우 총 10장까지 사용가능하며 아래 경로에서 이미지 추가 및 삭제가 가능합니다.

 /layouts/kso_cinema/layout.html 파일 맨 하단에 10장의 이미지 경로 코드가 있습니다. 같은 형식으로 코드추가 및 삭제하시면 됩니다.                                                

배경 스크린 이미지에 경우 자동으로 브라우저 사이즈에 맞춰서 늘어나거나 줄어드는 jQuery 기능으로 작동을 합니다. 샘플사이트에서 사용된 배경 이미지에 가로사이즈에 경우 약 1000px 정도로 제작하여 사용하였습니다. jQuery 기능으로 인해 브라우저 사이즈에 자동으로 맞춰지는 것이며 이미지가 늘어날 때 화질이 떨어지는 것을 완화하기 위해 도트 패턴 이미지를 배경 이미지 위에 나타나게 적용한 것입니다. 그러므로 로딩 속도를 위해서라도 이미지 파일 용량이 크지 않게 제작하여 사용하시기 바랍니다.

배경 스크린 슬라이드의 인터발을 조정할 수 있습니다.

 /layouts/kso_cinema/preferences.html 파일을 열고 맨 하단에 스크립트에서 slideinterval: 7000 을 조정해주세요. (1000 : 1초)                                                       

▶ 컨텐츠 배경컬러 : 블랙, 화이트

※ 컨텐츠 배경이 되는 컬러를 선택할 수 있습니다.

▶ 포인트 컬러 : 콘블루, 딥핑크, 씨그린, 퍼플, 골드, 다크

※ 핵심 폰트 컬러나 라인 등에 포인트가 되는 컬러를 선택할 수 있습니다.

▶ 컨텐츠 구성 : 1단 단독, 2단 사이드 좌측, 2단 사이드 우측

※ 레이아웃 단 구조를 선택할 수 있습니다. 샘플 사이트에 디스플레이된 형태를 참조하세요.

▶ 로고 이미지 : 로고 이미지 업로드

※ 세로 사이즈 70~100px 권장. 가로 사이즈는 유동적입니다. png 파일로 제작하여 업로드하세요.

▶ 로고 링크 : 링크 값 입력

※ 로고 클릭 시 이동할 링크를 입력. mid값(모듈 이름)을 입력 ex. main

▶ 지정 페이지 : mid 값 입력. (이동할 페이지의 모듈 이름을 입력합니다. ex. sub_page)

※ 회원가입, 마이페이지, 검색 등 이용 시 원하는 페이지로 이동시켜줍니다.

기본적으로 메인 페이지에서 회원가입을 클릭할 경우 메인 페이지에서 가입 페이지가 나타나므로 원하는 페이지로 이동하여 회원가입 페이지가 나타나게 할 수 있습니다. 지정페이지 입력 란에 이동하고자 하는 페이지의 모듈 이름을 입력하면 이동합니다. 다수로 설정한 레이아웃에 모두 입력하세요.

▶ 하단정보 : 출력할 텍스트를 입력합니다. 

※ 하단에 출력할 텍스트를 입력합니다. 회사정보 등으로 이용할 수 있습니다.

▶ 카피라이트 : 카피라이트 정보를 입력합니다.

※ ex. 2012 KSODESIGN

▶ 메뉴 간격 : 원하는 간격의 숫자를 입력합니다.

※ 1차 메뉴의 간격으로 메뉴 수에 따라 간격조정을 할 수 있습니다.(기본 50) 숫자만 입력합니다.

샘플페이지에서의 1차 메뉴의 수는 6개이므로 수가 적거나 많을 경우 메뉴가 가로사이즈에 적당히 배치가 될 수 있도록 조정할 수 있습니다. 

▶ 사이트 전체가로 : 가로 사이즈를 입력하여 조정 할 수 있습니다. (숫자만 입력)

※ 기본 960픽셀로 맞춰져 있으며 기본 사이즈로 사용하시길 권장합니다.

현재 전 세계적으로 가장 기본적으로 사용되는 사이트의 가로 사이즈가 960~980 픽셀입니다. 경우에 따라 사이즈를 늘이고 줄일 수 있으나 가급적이면 기본 사이즈로 사용하시길 권장합니다. 가장 최적화된 사이즈라고 보시면 됩니다.

▶ 사이드 가로 : 사이드 영역에 가로 사이즈를 조정 할 수 있습니다. (숫자만 입력)

※ 기본 250픽셀로 맞춰져 있으며 사이드 영역 컨텐츠에 따라 간격을 조정할 수 있습니다.

2. 프로모션

▶ 프로모션 스타일 : 메인용 슬라이드, 서브 탑 이미지, 영상코드, 사용안함

※ 프로모션 영역에 스타일을 선택할 수 있습니다. 페이지 성격에 따라 사용하면 됩니다.

주로 메인 페이지에 메인용 슬라이드 또는 영상코드를 선택하여 사용하시면 프로모션 역활을 극대화 시킬 수 있으며 서브페이지에서는 서브 탑 이미지를 선택하여 서브 페이지를 꾸밀 수 있습니다.

▶ 슬라이드 세로 : 세로 사이즈 입력 (기본 920X300픽셀. 숫자만 입력)

※ 메인 용 슬라이드 선택 시 세로 사이즈를 조정할 수 있습니다.

사이트 전체 가로사이즈를 기본인 960px로 사용할 경우 슬라이드 이미지에 가로사이즈는 920px입니다. 이유는 양쪽에 간격이 20픽셀 씩 합 40px이 차지하기 때문입니다.

▶ 슬라이드 이미지 1 : 슬라이드에 사용할 이미지를 업로드합니다.

※ 기본 920x300 픽셀 사이즈이며 숫자만 입력합니다. ex. 300

▶ ㄴ링크 : 이동할 링크를 입력합니다.

※ 슬라이드 이미지를 클릭할 경우 이동할 링크 값을 입력합니다.

▶ 슬라이드 이미지 2,3,4,5 : 위 내용과 동일

※ 위 내용과 동일

▶ 서브 탑 이미지 : 서브 탑에 사용될 이미지를 업로드 합니다.

※ 서브 탑 이미지 선택 시 이미지를 업로드하세요. (기본 920x150 권장)

서브 탑 이미지의 경우 세로사이즈의 정해진 것이 없으며 가로사이즈만 정확히 맞춰서 사용하시면 됩니다.

▶ 영상코드 : 출력할 영상 코드를 입력합니다.

※ 영상코드 선택 시 사용할 영상코드를 입력합니다. 기본 가로사이즈 960px (ex. vimeo, youtube) 

영상의 경우 레이아웃 양쪽에 간격을 두지않고 정확하게 맞춰서 사용하게끔 제작이 되었습니다. 그러므로 영상 코드를 입력할 때 가로사이즈를 사이트 가로사이즈와 동일한 값을 사용하시면 되고 세로 사이즈의 경우 영상 사이즈 그대로 사용하시면 됩니다.

3. AD 배너

▶ AD 배너 사용 : 배너사용, 사용안함

※ AD 배너영역의 사용여부를 선택할 수 있습니다.

샘플사이트에서 사용된 배너에 PSD를 제공하므로 필요하신 분은 활용하시면 됩니다. 사이즈의 경우 기본 960 사이즈일 때 배너 가로 사이즈가 450px 이므로 사이트 전체사이즈를 조정할 경우 배너 사이즈도 함께 변경이 되므로 참고하시기 바랍니다.

▶ AD 배너 좌측 : 좌측에 사용될 배너 이미지를 업로드합니다.

※ 기본 450x150 픽셀 사이즈의 이미지를 업로드합니다.

▶ ㄴ링크 : 이동할 링크 값을 입력.

※ 이미지 클릭시 이동할 링크를 연결할 경우 링크 값을 입력합니다.

▶ AD 배너 우측 : 우측에 사용될 배너 이미지를 업로드합니다.

※ 기본 450x150 픽셀 사이즈의 이미지를 업로드합니다.

▶ ㄴ링크 : 이동할 링크 값을 입력

※ 이미지 클릭시 이동할 링크를 연결할 경우 링크 값을 입력합니다.

4. 사이드 설정

▶ 통합 검색 창 : 사용함, 사용안함

※ 사이드 영역에 검색 창 사용여부를 선택합니다.

▶ 서브 메뉴 : 사용함, 사용안함

※ 사이드 영역에 서브메뉴(2차메뉴)의 사용여부를 선택합니다.

서브메뉴을 사용함으로 선택해도 내부적으로 연동이 되지 않을 경우 출력이 되지 않습니다. 해당 페이지가 연결이 되어야만 서브메뉴가 동작이 되므로 메뉴에 링크를 입력하고 해당 링크 값으로 정해진 페이지나 게시판을 생성해야만 그 해당 페이지에서 서브메뉴가 출력이 됩니다.

▶ 사이드 컨텐츠 01 : 사용함, 사용안함

※ 사이드 영역에 컨텐츠 영역의 사용여부를 선택할 수 있습니다.

▶ ㄴ타이틀 : 제목을 입력합니다. 

※ 입력한 텍스트가 제목으로 출력이 됩니다.

▶ ㄴ컨텐츠 : 출력할 컨텐츠 소스를 입력합니다.

※ 사용할 컨텐츠를 입력합니다. (ex. 위젯코드, 영상코드, 텍스트 등)

▶ 사이드 컨텐츠 02 : 사용함, 사용안함

※ 사이드 영역에 컨텐츠 영역의 사용여부를 선택할 수 있습니다.

▶ ㄴ타이틀 : 제목을 입력합니다. 

※ 입력한 텍스트가 제목으로 출력이 됩니다.

▶ ㄴ컨텐츠 : 출력할 컨텐츠 소스를 입력합니다.

※ 사용할 컨텐츠를 입력합니다. (ex. 위젯코드, 영상코드, 텍스트 등)

▶ 오가닉 탭 : 사용함, 사용안함

※ 사이드 영역에 오가닉(유동적인) 탭 사용여부를 선택할 수 있습니다.(3개의 탭 방식 위젯영역)

오가닉 탭은 바로 위에 사이드 컨텐츠 1,2와 동일하게 사용할 수 있으며 오가닉 탭의 장점은 3가지 탭으로 분류하여 해당 탭을 클릭할 경우 지정한 위젯이 나타나므로 3개의 위젯을 적은 공간을 활용할 수 있는 장점이 있고, 탭을 클릭할 때 부드럽게 탭이 활성화 되는 jQuery기능을 사용하였습니다.

▶ 타이틀 1 : 탭 제목을 입력합니다.

※ 입력한 텍스트가 탭 제목으로 출력이 됩니다.

▶ ㄴ위젯코드 : 사용할 위젯코드를 입력합니다.

※ 위젯코드 값을 입력하면 출력이 됩니다.

▶ 타이틀 2 : 탭 제목을 입력합니다.

※ 입력한 텍스트가 탭 제목으로 출력이 됩니다.

▶ ㄴ위젯코드 : 사용할 위젯코드를 입력합니다.

※ 위젯코드 값을 입력하면 출력이 됩니다.

▶ 타이틀 3 : 탭 제목을 입력합니다.

※ 입력한 텍스트가 탭 제목으로 출력이 됩니다.

▶ ㄴ위젯코드 : 사용할 위젯코드를 입력합니다.

※ 위젯코드 값을 입력하면 출력이 됩니다. 

5. 탑 슬라이드 설정

▶ 탑 위젯 타이틀 1 :  사용할 제목을 입력합니다.

※ 텍스트를 입력하면 제목으로 출력이 됩니다.

▶ 탑 위젯영역 1 : 출력할 위젯코드를 입력합니다.

※ 위젯코드를 입력하여 출력할 수 있습니다.(최근 글, 영상, 텍스트 등)

▶ 탑 위젯 타이틀 2 :  사용할 제목을 입력합니다.

※ 텍스트를 입력하면 제목으로 출력이 됩니다.

▶ 탑 위젯영역 2 : 출력할 위젯코드를 입력합니다.

※ 위젯코드를 입력하여 출력할 수 있습니다.(최근 글, 영상, 텍스트 등)

탑 슬라이드의 경우 최초 가려져 있으므로 중요한 컨텐츠를 담기보다 추가적인 공간으로 활용을 하시면 좋습니다. 로그인을 하기 위해서는 탑 슬라이드를 이용해야 하므로 회원들을 위한 정보를 담는 것도 하나의 방법이 될 수 있겠습니다.

▶ 트위터 링크 : 사용할 트위터 링크 값을 입력합니다.

※ 본인의 트위터 계정 URL을 입력합니다.

▶ 페이스북 링크 : 사용할 페이스북 링크 값을 입력합니다.

※ 본인의 페이스북 계정 URL을 입력합니다.

※ 보다 상세한 매뉴얼과 팁을 위해 아래링크를 참조하세요.

1. 시네마 레이아웃 Part. 1 - 소개 및 설정안내 
2. 시네마 레이아웃 Part. 2 - 샘플 사이트 각 페이지 설정 팁
3. 레이아웃 최적화 세팅 팁 Part. 1 - 세팅 절차

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

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