Design blueb manual_1.0

디자인 블루비 모바일웹 레이아웃 제작툴 메뉴얼
- 1 - 작성자: 한중진 blueb@blueb.co.kr데모 : http://mobile.blueb.co.kr
디자인 블루비 모바일
메뉴얼V1.0

목 차
디자인 블루비 모바일 ..................................................................................................... 3
메인화면 구조 ................................................................................................................. 4
메인화면 가로모드 회전시 구성 ...................................................................................... 5
레이아웃 환경 설정 진입 방법 .............................................................................. 6
환경설정 기능 항목 설명 .............................................................................................. 7
레이아웃 설정 - 기본 설정 .......................................................................................... 8
레이아웃 설정 - 헤더 설정 #1 ........................................................................................ 9
레이아웃 설정 - 헤더 설정 #2 (디자인 테마) ................................................................ 10
레이아웃 설정 - 헤더 설정 #3 (심플 테마) ................................................................... 11
레이아웃 설정 - 왼쪽 메뉴 설정 ................................................................................... 12
레이아웃 설정 - 오른 메뉴 설정 ................................................................................... 13
레이아웃 설정 - 푸터 설정 ........................................................................................... 14
레이아웃 설정 - 메인화면 설정 .................................................................................... 15
레이아웃 설정 - 메인화면 설정(비주얼 스타일 #1) ...................................................... 16
레이아웃 설정 - 메인화면 설정(비주얼 스타일 #2) ...................................................... 17
레이아웃 설정 - 메인화면 설정(스와이프 배너) ............................................................ 18
레이아웃 설정 - 메인화면 설정(스와이프 게시판) ........................................................ 19
레이아웃 설정 - 메인화면 설정(스와이프 갤러리) ........................................................ 20
레이아웃 설정 - 모바일 출력 메뉴 ................................................................................ 21
레이아웃 설정 - 기본 템플릿 ........................................................................................ 22
레이아웃 설정 - 백업파일 ............................................................................................ 23

메인화면 구조
1
2
3
4
5
6
7
8
9
10
1. 헤더 (#header) 영역
- 홈페이지 제목 및 서브타이틀 출력
- 인터페이스 아이콘 배치
2. 메인비주얼(#main_b_wrap) 영역
- 메인화면 설정에서 비주얼스타일 활성시 출력됨
(비활성시 1Depth 메뉴는 제목바 하단으로 출력)
- 배경이미지, 장식, 사용자이미지, 사용자텍스트, 1Depth 메뉴출력
- 1Depth 메뉴는 메뉴가 화면크기 보다 클 경우 터치 스와이프 기능 구동
- 1Depth 아이콘은 레프트 메뉴 항목에서 지정된 아이콘이 출력됨
3. 스와이프 배너(#mainVisual) 영역
- 배너 및 사용자 이미지 등록가능
- 최대 10개까지 등록 가능하며 각각의 이미지는 링크 추가 가능
- 다음 배너 이동은 터치스와이프 또는 자동재생 설정 가능
4. 스와이프 탭게시판(#tabContents) 영역
- 탭은 최대 2~4개 까지 설정 가능
- 탭에 출력될 최근 게시물은 포탈형 및 목록형 중 선택
- 각 탭의 이동은 터치 스와이프 또는 탭클릭으로 이동
- 각탭의 내용에 따라 세로 크기가 유동적일 경우 자동으로 콘텐츠 길이에 맞게 박스 사이즈
자동조정
5. 스와이프 갤러리(#mainGallery) 영역
- 게시물 중 이미지가 있는 목록전체를 가져오거나 특정 포토갤러리 게시판만 지정 가능
- 10~30개 이미지를 가로형태로 출력
6. 최근게시물(.newPost) 영역
- 전체 게시판중 가장 최근에 등록된 게시물 순으로 지정된 갯수만큼 목록 출력
- 첫번째 게시물은 포탈형으로 출력
7. 최근댓글(.newComment) 영역
- 전체 게시판중 가장 최근에 등록된 댓글 순으로 지정된 갯수만큼 목록 출력
8. 공지사항(.newNotice) 영역
- 전체 게시판중 공지 체크 되어 있는 게시물중 최근등록 순으로 목록 출력
9. 태그(.tags) 영역
- 게시물 입력시 추가 입력된 태그 목록 출력
- 태그 클릭시 해당 태그 명칭으로 검색 실행
10. 푸터(#footer) 영역
- PC모드, 로그인, 로그아웃, 나의계정, 검색, 탑버튼출력
- 전화, 팩스, 주소 선택 출력 가능
- Copyrights 정보및 이용약관 및 개인정보 취급방침 링크 출력
※ (#name)- 코딩에 사용된 ID 입니다. (.name)- 코딩에 사용된 class 입니다.
6 7 8 9 항목은 가로모드시 우측에 출력됩니다.
(가로 640px 해상도가 안되는 디바이스 기기 제외)

메인화면 가로모드 회전시 구성
<세로모드> <가로모드>
디바이스 기기 회전에 따른 메인화면 콘텐츠 배치 화면입니다.
가로 모드는 디바이스 기기 가로 해상도 640픽셀 이상일때 2단 형태로 구성됩니다.
640픽셀 미만인 기기에서는 세로모드와 동일하게 출력됩니다.
가로모드시 양쪽 배치된 항목 높이는 게시물 수를 적절하게 조정하여
레벨을 맞추는게 좋습니다.
높이 높이

레이아웃 환경 설정 진입 방법
관리자 ID로 로그인 하면 헤더 상단 우측에
USER 아이콘이 생성됩니다.
USER 아이콘을 터치하면 오른메뉴가 화면에 출력됩니다.
레이아웃 설정 아이콘을 터치하면
관리자전용 레이아웃 편집 툴로 이동합니다.
환경설정 중 오른메뉴 출력을 OFF로 설정하면
USER 아이콘 대신 설정창으로 바로 이동가능한
아이콘으로 변경됩니다.
해당 아이콘은 관리자로 로그인시만 나타납니다. 일반 회원 및 GUEST에게는 보이지 않습니다.
관리자 설정 페이지로 이동하면 메인메뉴는 사라지고 그 위치에 관리자 전용 메뉴가 생성됩니다.

환경설정 기능 항목 설명
【스위치】
【슬라이더】
【칼라 피커】
스위치는 기능을 켜거나 끌때 사용합니다. 총 3가지 색상(블루, 그린, 오렌지)의 종류가 있습니다.
한가지 알아두셔할 사항은 켜져 있는 오브젝트를 끌때는 화면에 바로 미리보기 되지만, 꺼져 있는 기능을 다시 켤때는 해당 오브
젝트가 미리보기 되지 않습니다.
슬라이더는 크기 또는 높이 등의 값을 터치기기에서 쉽게 입력할 수 있게 해주는 인터페이스 입니다. 좌우로 이동 하면 해당 값
이 변경됩니다. 핸들을 터치하고 있는 순간 터치 포커스가 이동해도 좌우로 움직일 수 있으니 디테일하게 움직이고자 할때는 터
치에서 손을 떼지 말고 천천히 움직여 보세요.
슬라이더로 설정되는 항목은 MIN~MAX값 내에서만 값을 입력 할 수 있습니다.
색상 변경시 필요한 인터페이스 입니다. 색상 아이콘을 클릭하면 레이어 팝업으로 팔레트가 열립니다. 원하는 색상을 터치 드래
그로 색상값을 이동 한 후 꼭 선택 버튼을 터치해야만 값이 입력됩니다. 창을 닫을 때는 취소 버튼 또는 배경 아무곳이나 터치하
면 닫힙니다.
블루 스위치는 화면에 특정 기능을 실행하거나, 특정 오브젝트를 보이게 하거나 끌때 사용합니다.
오렌지 스위치는 모바일 출력 메뉴 항목중 메뉴감춤 기능에 사용 됩니다.
메뉴 감춤은 PC버전 및 모바일 웹 모두 메뉴가 사라지게 되니 주의해야 하는 의미 입니다.
스위치를 껏을때 회색으로 변경됩니다.
그린 스위치는 즉시 실행 되는 스위치입니다. 관리의 편의성 위주의 기능입니다. 해당 스위치는 on되면 쿠키에 저
장되어 관리자 모드 재접속해도 켜져 있는 상태를 유지합니다.
(기능 버튼 위치 : 기본 설정 - submit버튼, 헤더 설정 - #header고정, 메인화면 설정 - 미리보기 고정)

레이아웃 설정 - 기본 설정
1
2
3
4
5
6
7
8
9
1. 버전 및 라이센스 안내
솔루션 버전 및 라이센스에 대해 명기되어 있습니다.
2. 홈페이지 제목
홈페이지 제목은 메인화면 #header h1 영역에 표시됩니다.
3. 대 메뉴 제한갯수
1차 메뉴 갯수를 제한합니다. 기본으로는 생성한 대메뉴 갯수를 입력합
니다.
다른 사용 방법은 예를 들어 총 11개의 메뉴가 있지만 10개로 제한하
면 마지막 메뉴는 출력되지 않습니다. 페이지 그룹은 필요하지만 메뉴
노출이 불필요할때 적절하게 이용하시면 됩니다.
4. 헤더 메뉴 고정
#headMenu를 페이지를 하단으로 스크롤해도 항상 TOP에 고정 하
는 기능입니다. 웹페이지 메뉴 및 관리자 메뉴 모두 고정됩니다.
5. 스크롤 탑버튼 출력
페이지 스크롤을 100픽셀만큼 내리면 오른쪽 하단에 아이콘을
출력합니다.
OFF하면 아이콘은 사라지며 #footer영역에 버튼을 배치합
니다.
6. 홈페이지 정보 입력
대표 전화번호, 팩스번호, 주소 등을 입력합니다. 해당 정보는 #footer
영역에 출력됩니다.
단 입력 후 즉시 출력되지는 않습니다. 필요에 따라 푸터 설정에서 스위
치를 켜주십시요.
7. Submit 버튼
환경설정창에 여러가지 값들을 조작하고 저장하기 위해서는 페이지 하
단으로 매번 이동해야 합니다. 이런 불편함을 줄일 수 있는 기능입니다.
ON으로 설정하면 즉시 구동됩니다.
9. Viewport 정보
모바일웹에서는 viewport 정보에 따라 화면에 보여지는 형태가 달라
집니다.
KimsQ에 기본 설정되어 있는 정보를 보여줍니다.
수정은 CMS ROOT/index.php 파일을 수정합니다.

레이아웃 설정 - 헤더 설정 #1
1. #header 확인
터치하면 #header위치에 검은색 테두리가 생깁니다. 정확한 #header위치가 어디인지 알려주기 위한 기능입니다.
2. #header 고정
ON하면 ［레이아웃 설정 - 헤더 설정］페이지에서만 #header 영역이 상단에 고정됩니다. 설정창에서 각각의 항목을 변경시 수시로 #header 부분으로 Scroll
UP 해야 하는 불편함을 덜 수 있습니다. 해당 스위치는 ON하는 순간 바로 실행됩니다.
설정하는 값이 어떻게 변화 되는지 즉시 확인 가능하게 하기 위한 개발자의 배려입니다.
3. #header 테마
헤더 테마는 2가지 종류(Design테마, Simple테마)를 제공합니다.
테마중 한가지를 선택하면 그 즉시 현재까지 설정된 내용은 바로 저장 되고 각각의 테마를 설정할 수 있는 환경으로 변경이 됩니다.
- 디자인 테마 :
ㆍ헤더 색상 및 광택 효과 등 기본 디자인된 구성 내에서만 변경 가능합니다.
ㆍ#headMenu는 Dark버전 한가지만 제공합니다.
- 심플 테마 :
ㆍ사용자가 원하는 형태로 변형이 가능한 테마입니다.
ㆍ색상 및 폰트, 높이 값, 검색폼 출력 등 다양한 형태로 변형이 가능합니다.
디자인 테마
심플 테마
1
2
3

레이아웃 설정 - 헤더 설정 #2 (디자인 테마)
1
2
3
디자인 테마 설정영역은 오른쪽 그림 빨간색 박스 영역입니다.
1. #header 색상
디자인 테마에서는 #header 색상을 투톤 그라데이션으로 표현합니
다. 총 26가지 색상중 원하는 타입을 터치 후 저장하면 즉시 Header
Bar 색상이 변경됩니다.
2. glossy 효과
Header Bar에 반사 효과를 적용합니다. 스위치를 켜면 하단에 glossy
Style을 선택할 수 있습니다.
3. glossy Style
광택 효과 4가지 중 한가지를 선택 할 수 있습니다.
디자인 테마 css는
./layouts/bluebmobile/_cross/plugin/_header_a.css
위 경로에 위치합니다.
다음 페이지

레이아웃 설정 - 헤더 설정 #3 (심플 테마)
1. #header 배경색상
#header 영역 배경 색상을 지정합니다.
2. #header 배경 패턴
#header영역에 13가지 스타일의 배경 패턴을 지정 할 수 있습니다.
배경 패턴은 배경색상 명도 차이에 따라 보이는 정도 차이가 있을 수 있
습니다.
3. #header <H1> 제목 색상
#header 영역 중앙 홈페이지 제목 또는 페이지 제목 텍스트 색상을 변
경할 수 있습니다. 배경 색상에 맞춰 명도 차이가 뚜렷한 색상을 지정하
세요.
4. #header 버튼
#header영역 좌우에 있는 버튼 타입을 지정합니다. 배경 색상에 맞춰
밝은 색상 또는 어두운 색상을 선택합니다.
5. #header 높이
#header높이 설정은 #header영역에 검색 폼을 배치 하기 위해서는
값을 적절하게 조절 해야합니다. 검색폼을 사용하지 않는 다면 최소 사
이즈 44px을 권장합니다.
6. 검색폼 사용
#header영역에 포탈 스타일의 검색폼을 노출합니다.
검색폼을 사용하기전에 #header높이가 검색폼이 노출될 수 있을 정
도의 높이값을 가지고 있는지 확인하십시요.
7. 검색폼 설정
검색폼의 위치 및 테두리 라운드 효과, 보더 두께 값을 지정합니다.
폼위치는 #header영역 0px부터의 위치 값입니다.
폼라운드는 사각 테두리에 부드러운 라운드 효과를 적용하고자 할때 사
용합니다.
폼보더는 검색폼 테두리에 라인을 적용합니다. 0으로 설정하면 나타나
지 않습니다.
8. #header 메뉴
#header에 위치한 1Depth 메인 메뉴 배경 메뉴 텍스트 및 메뉴 활성
색상, 그림자 등을 지정합니다.
메뉴배경색상은 메뉴가 위치한 부분의 배경 Bar의 색상을 변경합니다.
메뉴 색상 및 활성 색상은 메뉴 텍스트의 색상을 변경합니다.
메뉴 활성 밑줄은 현재 활성된 메뉴의 하단에 밑줄을 표시합니다. (밑
줄 색상은 메뉴 활성 색상과 동일합니다.)
하단 그림자는 메뉴 영역 박스 하단에 은은한 그림자를 적용해 본문 영
역(#contents)과의 입체감을 부각시킵니다.
1
2
3
4
5
6
7
8
심플 테마 css는
./layouts/bluebmobile/_cross/plugin/_header_b.css
위 경로에 위치합니다.

레이아웃 설정 - 왼쪽 메뉴 설정
1. 메뉴확인
왼쪽 메뉴를 열거나 닫을 수 있습니다.
2. 메뉴 테마
왼쪽 메뉴 테마는 Dark, Light 2가지 테마를 지원합니다.
각각의 테마 CCS 파일은 아래와 같습니다.
Dark : ./layouts/bluebmobile/_cross/plugin/_sidemenu_b.css
Light : ./layouts/bluebmobile/_cross/plugin/_sidemenu_a.css
각 테마를 터치하면 즉시 변경됩니다.
3. 메뉴제목바
왼쪽 메뉴 상단 제목 부분을 켜거나 끌 수 있습니다. 단 닫기 버튼 및 메
뉴 확장 버튼은 사라집니다.(닫기 버튼은 배경 클릭으로 가능)
4. 회원정보 박스
회원정보 박스를 켜거나 끌 수 있습니다. (회원정보 박스는 회원로그인
시에만 나타납니다.)
5. 대메뉴 아이콘 사용
1Depth 텍스트 앞에 아이콘이 지정됩니다. 해당 아이콘 사용 여부를
결정합니다.
6. 대메뉴 아이콘 선택
현재 등록된 1Depth 대메뉴에 각각의 아이콘을 지정할 수 있습니다.
각 대메뉴별 을 터치하면 나타나는 아이콘 박스 중에서 원하
는 아이콘을 선택하면 됩니다.
7. 게시물수 표시
각 메뉴별 게시판이 지정되어 있다면 해당 게시판의 게시물 수를 출력
할 수 있습니다.
8. 메뉴 가로 크기
메뉴의 가로 크기를 200~300픽셀 사이에서 조정 가능합니다.
9. 어코디언 기능
해당 기능을 OFF하면 메뉴 전체가 1~3Depth까지 전체 펼쳐진 상태
로 나타납니다. (메뉴 갯수가 적을때 사용하면 불필요한 클릭수를 줄일
수 있습니다.)
1
2
3
4
5
6
7
8
9
• 왼쪽 메뉴가 열려진 상태에서 가로모드시 iphone에서는
마지막 메뉴 끝부분이 살짝 안보일 수 있습니다. iphone
주소 창 제어가 버전 마다 상이한 부분이 있는좀 참고하
시기 바랍니다.
• 간헐적으로 메뉴가 스크롤이 안되는 경우는 시스템 스크
롤이 메뉴 스크롤 제어권보다 우선하는 경우에 발생 할
수 있습니다.

레이아웃 설정 - 오른 메뉴 설정
오른 메뉴는 관리자 환경설정 버튼과 회원 마이페이지 관련 링크를 로그인
시에 출력합니다.
1. 오른 메뉴 버튼
오른 메뉴 사용여부를 결정합니다.
OFF로 하면 USER아이콘( )이 설정 아이콘( )으로 변경됩니다.
2. 오른 메뉴 목록
사용자 마이페이지 목록 링크가 아이콘 메뉴 형태로 출력됩니다.
해당 목록 중 사용하고자 하는 메뉴만 선택해서 출력 가능합니다.
각각의 페이지는 kimsQ 설치시 기본으로 설치된 modules내에 마이
페이지 부분 모바일 페이지가 출력됩니다.
기능이나 디자인에 대한 부분은 본 솔루션과 관계 없으며, 단순히 링크
만 제공합니다.
1
2

레이아웃 설정 - 푸터 설정
1. #footer 위치 확인하기
버튼을 터치하면 #footer위치에 빨간색 테두리가 생깁니다. 정확한
#footer위치가 어디인지 알려주기 위한 기능입니다.
2. #footer 색상
#footer 영역 배경 색상을 변경할 수 있습니다.
3. #footer border 색상
#footer와 #content 영역 경계선 색상을 지정합니다.
4. #footer 높이
#footer영역 높이 값을 지정합니다.
80~200픽셀 사이값을 지정할 수 있습니다.
5. 전화 및 주소 출력
기본 설정에서 입력해 둔 전화 및 주소 정보를 #footer영역에 표시할
수 있습니다.
1
2
3
4
5

레이아웃 설정 - 메인화면 설정
1. #1 직접구성
메인화면을 직접 디자인 및 코딩한 내용을 연결합니다.
#2 블루비 콘텐츠와 같이 사용할 경우 #2 보다 하단에 배치됩니다.
페이지 생성 및 수정 방법은 킴스큐 사용 방법을 어느 정도 이해하고 숙
지하셔야 합니다.
2. #2 블루비 콘텐츠 사용
본 솔루션에서 제공하는 메인화면 꾸미는 방식을 사용합니다.
꾸미는 방식은 출력항목에서 원하는 항목을 선택하고 각각의 항목의 설
정하기 버튼을 눌러 각종 게시판 연결 또는 메인화면 디자인을 구성합
니다.
3. 출력항목 1
3번 항목은 디바이스 기기 가로모드시 좌측에 출력됩니다.
- 비주얼스타일 :
메인화면을 비주얼 형태로 디자인 합니다. 직접 찍은 사진 및 기본 제
공되는 배경이미지와 비주얼 이미지, 캐치 프레이즈 등을 조합하여
메인화면을 좀 더 비주얼하게 보여질수 있도록 구성합니다.
- 스와이프배너 :
이미지 여러장을 터치 스와이프 기능으로 넘겨 볼 수 있는 항목을 추
가합니다.
- 스와이프게시판 :
게시판 2~4개를 묶음으로 연결하여 탭메뉴 형태로 구성합니다. 각
각의 탭은 터치 스와이프로 넘겨 볼 수 있습니다.
- 스와이프갤러리 :
특정 게시판 또는 전체 게시판에 등록된 게시물중 이미지만 출력합니다.
4. 출력항목 2
4번 항목은 디바이스 기기 가로모드시 우측에 출력됩니다.
- 최근게시물 :
게시판 게시글중 최근 등록된 목록을 불러옵니다.
- 최근댓글 :
게시판에 등록된 댓글중 최근 목록을 불러옵니다.
- 공지사항 :
게시판 게시글 중 공지항목 체크된 게시물만 불러옵니다.
- 태그 :
게시물 입력시 추가 입력한 태그 목록을 불러옵니다.
1
2
3
4
메인화면 설정은 4개의 서브메뉴를 가지고 있습니다.
비주얼 스타일, 스와이프 배너, 스와이프 게시판, 스와이프 갤러리등 각각의 설정 페이지를 별도로 가지고 있습니다.
해당 설정 페이지에서 다시 현재 창(메인화면 설정 창)으로 이동하는 방법은 상단의 메인화면 설정 메뉴를 누르거나 취소를 누르면 현재
페이지로 돌아옵니다.

레이아웃 설정 - 메인화면 설정(비주얼 스타일 #1)
1
8
2
9
3
10
4
5
6
7
11

레이아웃 설정 - 메인화면 설정(비주얼 스타일 #2)
1. 미리보기 창
메인화면 변경사항이 어떻게 적용되는지 미리 볼 수 있는 Preview Box 입
니다. 해당 영역에 등록된 오브젝트는 터치 드래그를 통해 위치 이동이 가능
합니다.
하단의 RESIZE를 드래그하면 박스 세로 크기 또한 늘릴 수 있습니다.
2. 미리보기 고정
메인화면 설정을 위해 하단으로 스크롤 되면 미리보기 창을 확인하기 위해
매번 위로 다시 스크롤해야 합니다. 그런 불편함을 줄이기 위해 미리보기 창
을 화면 상단에 스크롤과 상관없이 고정시킵니다. 스위치를 켜는 즉시 작동
됩니다.
※ 단 작은 사이즈의 디바이스 기기는 화면을 많이 가려 불편할 수 있습니다.
3. 비주얼 영역 높이
비주얼 영역 높이를 설정합니다. 직접 타이핑 입력하거나 상단 미리보기 창
을 드래그 하여 설정 할 수 있습니다. 되도록 지정된 배경 이미지에 맞춰 더
작은 값을 설정 하십시요.
해당 값이 0이면 등록된 이미지 또는 기본 배경 이미지 크기에 따라 세로값
이 적용됩니다. 하지만 가로모드시 비주얼 영역이 세로로 많이 길어질 수 있
으니 적정값(약 300px)을 지정하는것도 방법입니다.
※ PC에서 설정시 브라우저 창 크기에 따라 이미지 세로 폭이 가변적으로
늘어나기 때문에 모바일에서는 정상적인 크기로 보이지 않을 수
있습니다.
4. 배경 선택
기본 제공되는 배경 중 하나를 선택 지정 할 수 있습니다.
5. 배경 직접 등록
직접 제작한 이미지를 등록할 수도 있고, 스마트폰으로 직접 촬영한 이미지
를 등록할 수도 있습니다.
모바일의 장점을 관리 기능에 추가했기 때문에 언제 어디서나 메인화면을
항상 다른 이미지로 교체할 수 있는 장점이 있습니다.
※ 스마트폰으로 직접 촬영시에는 가로모드로 촬영해주세요.
배경 이미지는 고품질을 유지하기 위해 가로 640픽셀 이상 이미지를 등록
하십시요. 640이하 이미지는 등록되지 않습니다.
큰 이미지는 640픽셀로 GD를 이용하여 자동 RESIZE되니 용량 걱정은 하
지 않아도 됩니다.
이미지가 등록되면 기본 제공 배경은 사라지고 사용자 이미지가 출력됩니
다. 사용자 이미지를 삭제 하면 다시 기본 배경 이미지로 변경됩니다.
6. 장식 선택
배경화면과 잘 어울리는 장식 이미지를 선택하여 차별화된 메인화면으로 꾸
밀 수 있습니다.
장식이 필요 없는 경우 장식 삭제를 누른 후 저장하십시요.
7. 그림자
#header와 비주얼 메인 경계 사이에 은은한 그림자를 추가하여 경계 부분
입체감을 조성할 수 있습니다.
8. 대메뉴 아이콘 사용
메인 화면 비주얼 영역에 1Depth 대메뉴를 추가합니다. 해당 메뉴는 아이
콘 형식으로 왼쪽 메뉴 설정에서 지정된 아이콘 모양으로 출력됩니다.
디바이스 기기 가로 크기 보다 메뉴 갯수가 많을 경우는 터치 스와이프 형식
으로 변경됩니다.
배경이 밝거나 어두을 경우를 대비하여 밝은톤 아이콘과 어두운톤 아이콘
두가지를 제공합니다.
9. 이미지 등록
메인 화면 비주얼 영역에 사용자 로고 및 텍스트 이미지를 등록할 수 있습니
다. 되도록 배경이 투명한 PNG 이미지를 등록해야 배경이미지와 어우러 지
는 메인화면이 될 수 있습니다.
이미지는 가로 500 X 100px 미만 사이즈로 등록 가능합니다.
이미지 등록 후 최초 이미지 사이즈 대비 % 비율로 축소 할 수 있습니다.
10. 텍스트 #1
텍스트 #1 입력후 색상 및 크기 등을 변화시킬 수 있습니다.
홈페이지 캐치프레이즈 및 광고 문구등을 적절하게 삽입하는 용도입니다.
11. 텍스트 #2
텍스트 #2 입력후 색상 및 크기 등을 변화시킬 수 있습니다.
텍스트 #1, #2 입력창은 간단한 태그를 포함하여 단어별 글자색상을 변경하
거나 폰트 크기를 다르게 할 수도 있습니다. 이때 쌍따옴표(")는 입력이 안
되니 홑따옴표(')로 입력하십시요.
• 미리보기 창에 등록된 오브젝트는 모두 Center 정렬 입니다.
해당 오브젝트는 상, 하로 위치 이동만 가능합니다.
이는 세로, 가로 모드시 이미지 밀림 및 불필요한 스크롤바
생성을 방지하기 위한 조치입니다.
• 이미 배경 이미지 및 사용자 로고가 등록된 상태에서 다시
등록하면 기존에 등록된 이미지를 덮어씁니다.
파일 유실에 주의하시기 바랍니다.

레이아웃 설정 - 메인화면 설정(스와이프 배너)
스와이프 배너는 구성하는 웹의 특징적인 내용 또는 사진 등을 배너 형태로
구성, 터치 스와이프 기능을 이용하여 페이지를 넘겨 보거나 자동 재생할
수 있는 방식 입니다.
1. 이미지 갯수
로테이션 될 이미지 갯수를 지정합니다.
2~10장까지 지정 가능합니다.
2. 3D Cube 효과
Beta Version 성격이 강한 기능입니다.
배너 슬라이드를 회전하는 3D 큐브 형태로 디스플레이 합니다. 익스플
로어에서는 해당 기능이 정상적으로 출력되지 않으니 되도록 데모는 파
이어폭스, 크롬을 이용하십시요.
해당 스위치 ON시 이미지 하단에 페이지 네비게이션 Circle은 사라집
니다.
※ 안드로이드 4.X 이하, iOS 올드 버전에서는 구동되지 않습니다.
※ 디바이스 기기가 슬립에서 깨어날때 및 디바이스 기기 회전시
간헐 적으로 큐브 회전이 정지된 상태로 보일 수도 있습니다.
3. 자동 재생
지정된 시간 후 다음 배너로 자동 슬라이드 되는 기능입니다.
시간은 1~10초 중 지정가능합니다.
4. 이미지 등록
이미지 등록은 되도록 가로 640픽셀 크기 정도가 적정합니다.
각각의 링크 정보가 필요시에는 이미지 하단 입력폼에 링크주소를 입력
하면 해당 배너는 링크가 가능해집니다.
링크 정보 미입력시 링크되지 않습니다.
※ 링크 타겟 지정은 지원하지 않습니다.
1
2
3
4
등록한 전체 이미지는 가로, 세로 크기를 동일해야만
화면 깨짐이나 오류가 발생하지 않습니다.

레이아웃 설정 - 메인화면 설정(스와이프 게시판)
스와이프 게시판은 특정 게시판 또는 전체 게시물을 탭 형태로 구성하여
터치 스와이프로 넘겨 볼 수 있는 방식입니다.
1. 탭 갯수
탭 갯수를 지정합니다. 2~4개까지 지정 가능합니다.
2. 썸네일 원형
이미지가 등록된 게시물은 목록에 썸네일이 생성됩니다. 해당 썸네일
을 원형으로 표시합니다. OFF면 정사각형으로 디스플레이 합니다.
3. 출력대상
특정 게시판 또는 전체 게시물을 선택 할 수 있습니다.
4. 정렬/갯수
게시물 정렬 방식(등록순, 조회순, 추천순, 댓글순, 다운순 중 선택) 및
출력 갯수를 선택합니다.
5. 기간
가져올 게시물의 기간을 설정합니다. 공란은 전 기간중 정렬 형식에 맞
는 게시물을 가져옵니다.
6. 제목
탭에 보여질 제목을 입력합니다. (게시판 제목과 똑같이 하거나 연관성
있는 제목을 입력합니다.)
7. 형태
목록 형태를 포탈형과 단순 목록형 두가지중 하나를 선택할 수
있습니다. (상단 : 포탈형, 하단 : 목록형)
1
2
3
4
5
6
7
<포탈형>
<목록형>

레이아웃 설정 - 메인화면 설정(스와이프 갤러리)
스와이프 갤러리는 갤러리 게시판 또는 전체 게시판 중 이미지가 등록된 게
시물만 불러와 썸네일 형식으로 목록을 구성하여 터치 스와이프 형태로 구
동되는 방식입니다.
목록 지정이나 설정방법은 스와이프 게시판과 같습니다.
1. 출력대상
특정 게시판 또는 전체 게시물을 선택하면 이미지가 첨부된 게시물만
가져옵니다.
2. 제목
썸네일 목록 상단에 보여질 제목을 입력합니다. (게시판 제목과 똑같이
하거나 연관성 있는 제목을 입력합니다.)
3. 정렬
게시물 정렬 방식(등록순, 조회순, 추천순, 댓글순, 다운순 중 선택) 을
선택합니다.
4. 기간
가져올 게시물의 기간을 설정합니다. 공란은 전 기간중 정렬 형식에 맞
는 게시물을 가져옵니다.
5. 갯수
불러올 이미지 갯수를 입력합니다. 10~30개 중 선택 가능합니다.
1
2
3
4
5
<스와이프 갤러리 예시>

레이아웃 설정 - 모바일 출력 메뉴
모바일 출력 메뉴는 스마트폰을 이용하여 운영중인 홈페이지 메뉴중 부득
이하게 히든 처리하거나 모바일에서만 히든 처리가 필요할때 유용한 기능
입니다.
1. 메뉴명
생성된 메뉴 목록입니다. 메뉴 목록은 1~4차 메뉴까지 트리 형태로 출
력 됩니다.
메뉴명 앞의 숫자는 Depth를 의미합니다.
2. 메뉴감춤
메뉴감춤은 스위치가 ON으로 된 상태가 홈페이지에 정상적으로 서비
스 되고 있는 상태입니다. OFF로 설정하면 PC버전 홈페이지 및 모바일
홈페이지 모두 메뉴가 안보이게 됩니다.(삭제 되지는 않습니다.)
주의할점은 상위 Depth에서 스위치를 꺼버리면 하위 Depth까지 메
뉴가 출력되지 않으니 신중하게 스위치를 조절하셔야 합니다.
※ PC버전 홈페이지 메뉴 구성을 CMS 연동, 자동 생성되게
제작되어 있지 않으면 본 기능은 PC버전 웹을 제어할 수 없습니다.
3. 모바일 출력
모바일 출력은 ON으로 된 상태가 모바일웹에서 메뉴가 출력됩니다.
OFF로 설정하면 모바일웹에서만 메뉴가 안보이게 됩니다.
1 2 3
메뉴 Depth 5단계부터는 본 화면에 메뉴명이 나타나지
않습니다.

레이아웃 설정 - 기본 템플릿
기본 템플릿은 미리 정의된 10종의 템플릿을 선택만 하면 즉시 모바일웹에 반영할 수 있
습니다.
제공된 템플릿을 먼저 선택한 후 디테일한 설정을 해주면 수백만가지의 조합으로 모바일
웹디자인을 생성 할 수 있습니다.
제공된 10개의 템플릿 중 하나를 터치하면 메인화면으로 이동하면서 템플릿 기반 미리
보기 화면으로 바뀝니다.
메인화면 하단에는 파란색 박스가 나타나며 적용 버튼을 터치하면 해당 템플릿으로 바뀌
게 됩니다.
취소를 누르면 다시 템플릿 목록페이지로 이동합니다.

레이아웃 설정 - 백업 파일
디자인 블루비 모바일은 많은 기능을 가지고 있습니다. 많은 기능은 많은
설정값을 가지고 있다는 뜻인데요. 이 설정값이 유실되면 모바일웹은 정상
적으로 서비스가 되지 않습니다.
또한 디자인 블루비 모바일은 다양한 디자인을 구사할 수 있습니다. 여러가
지 디자인을 저장했다가 즉시 다른 디자인으로 변경하는데 유용하게 쓸 수
있는 기능입니다.
백업 저장 경로는
./layouts/bluebmobile/_var/홈페이지코드/usersave/
폴더에 저장됩니다.
백업파일이 30개가 되면 더이상 저장되지 않습니다.
오래된 백업 파일을 삭제 후 저장할 수 있습니다.
1. 백업 파일명
저장될 파일명을 입력 후 버튼을 터치하면 현재 환경 상태 그대로 백업
파일이 생성됩니다. (단 사용자가 등록한 이미지 등은 백업되지 않습니
다.)
2. 백업파일
현재까지 저장된 백업파일 목록입니다.
파일명은 저장한 일시 정보를 가지고 있으니 파일명으로 대략 언제 저
장된 내용인지 유추할 수 있습니다.
파일명 - 년월일 - 시분초
백업파일을 클릭하면 해당 백업 내용으로 메인화면이 변경됩니다. (실
제 변경되지는 않습니다.)
메인화면 하단 빨간색 박스 적용 버튼을 누르면 해당 백업으로 즉시 변
경됩니다.
3. 삭제
삭제버튼을 누르면 해당 파일은 즉시 삭제됩니다.
1
2 3
백업 파일은 30개까지 저장이 됩니다. 만약 더 많은 백업 파
일 생성을 원하면
./bluebmobile/_admin/_user.php
4번째줄
$totalfile = 30;
30 숫자를 증가시켜주세요.

디자인 블루비 모바일 버전 데모
http://mobile.blueb.co.kr
문의 : 1661-3432

Design blueb manual_1.0

Recommandé

Recommandé

Contenu connexe

Similaire à Design blueb manual_1.0

Similaire à Design blueb manual_1.0 (20)

Design blueb manual_1.0