SlideShare a Scribd company logo
1 of 112
Download to read offline
두부플러스 이용가이드
두부플러스
마스터플랜
www.dubuplus.com
웹사이트 제작은 쉽게, 사이트 운영은 편리하게,
두부플러스를 활용하여 웹사이트 만들기
INDEX
Plan01.두부플러스워밍업
두부플러스소개
두부플러스구조
두부플러스페이지구조
웹사이트화면구성
두부플러스기능용어설명
Plan02.두부플러스밸런스업
웹사이트만들기STEP별구성
회원가입및기본정보설정하기
페이지생성하기
서브컨텐츠만들기-1텍스트
서브컨텐츠만들기-2이미지
서브컨텐츠만들기-3동영상
서브컨텐츠만들기-4지도
서브컨텐츠만들기-5소스코드
게시판생성하기
페이지에연결하기
메인페이지구성하기-1로고
메인페이지구성하기-2슬라이드쇼
메인페이지구성하기-3팝업
메인페이지구성하기-4슬라이더갤러리
모바일웹사이트편집하기
Plan03.두부플러스초이스업
문자상담
퀵메뉴
소셜스트림
숙박예약
쇼핑몰
Plan04.두부플러스레벨업
웹사이트꼼꼼하게관리하기
두부디스크e활용하기
Plan05.두부플러스파워업
업종/업태별컬러찾기
FAQ
p03
p04
p06
p08
p12
p22
p24
p33
p35
p37
p38
p39
p40
p41
p47
p48
p50
p52
p54
p57
p60
p62
p64
p68
p77
p90
p97
p104
p106
* 두부플러스 마스터플랜은 웹사이트제작에 꼭 필요한 기능 위주로 설명되어있습니다.
기능 상세설명은 [두부플러스 웹사이트> 매뉴얼] http://master.dubuplus.com을 참고해주시기 바랍니다.
플랜1.
두부플러스
워밍업
두부플러스는 포토샵과 코딩이 필요없이 운영모드와 디자인편집 기능으로 웹사이트와 모바일사이트를
한 번에 제작할 수 있도록 구성되었습니다.
워밍업에서는 두부플러스를 처음 사용하시는 사용자를 위해 웹사이트 구조와 메인페이지와 서브페이지
구성화면을 상세하게 설명해드립니다.
운영자의 편리성을 담은 운영모드와 디자인활용도가 높은 디자인편집 용어를 확인하셔서 두부플러스를
시작하시고 사용하시는 데 손쉽게 활용하시기 바랍니다.
두부플러스소개	 3
두부플러스 소개
두부플러스에서 웹사이트를 제작하면 모바일과 PC에서 동시에 노출되며
한 번의 제작으로 모바일컨텐츠까지 유용하게 사용하실 수 있습니다.
기업홍보용 웹사이트뿐만 아니라 장바구니와 결제시스템(PG)을 장착하여
쇼핑몰과 숙박예약과 같은 다양한 웹사이트를 제작하실 수 있습니다.
클릭만으로 쉽게 제작하는 빌더
코딩할 필요없이 반응형 웹사이트를 만들 수 있습니다. 드래그 앤 드롭으로
기술적 지식 없이도 세련되고 전문적인 웹사이트를 쉽게 만들 수 있습니다.
두부플러스 구조
디자인편집
디자인편집에서는 사용자가 직접 레이아웃을 만들고 요소와 앱을 추가하여 컨텐츠를 구성할 수 있습니다.
웹사이트의 메인 페이지와 서브 페이지를 만들 수 있으며 코딩과 포토샵 없이 마우스 드래그 앤 드롭으로 편리하게 디자인 제작이 가능하
도록 구성된 화면입니다.
웹사이트에 구성할 요소들을 충분히 생각해 보신 후 기본적으로 사이트에 꼭 필요한 텍스트, 이미지 등을 추가하시기 바랍니다.
기본 구성을 생각하셨다면, 좌측의 앱과 요소를 디자인할 수 있는 우측 섹션으로 드래그하여 원하는 위치에 드롭 후 컨텐츠의 설정에 따
라 디자인하며 편집할 수 있습니다.
쇼핑이나 숙박 예약 앱으로는 판매와 예약이 가능한 웹사이트를 구성할 수 있으며, 문자상담과 소셜스트림 앱을 통해서는 숙박예약 고객
과 소통이 가능한 웹사이트를 구현할 수 있습니다.
두부플러스의 디자인편집은 미리보기가 가능하며, 작업한 화면이 그대로 나의 사이트로 반영되기 때문에 보기 쉽고 사용하기 편리한 장
점이 있습니다.
두부플러스로 웹사이트를 만들려면, 디자인편집과 운영모드의 주요기능을 다룰 줄 알아야 합니다.
4	 두부플러스구조
두부플러스구조	 5
운영모드
운영모드는 관리자가 웹사이트를 운영하기 위해 필요한 관리 및 환경설정을 포함하고 있습니다.
게시글 및 정보를 기록하고 회원을 관리할 수 있는 환경설정과 회원관리, 웹사이트의 인기 있는 페이지와 이전 접속경로를 확인할 수 있
는 로그분석이 가능한 통계, 웹사이트 페이지마다 다양한 스타일로 글과 사진을 등록 및 관리할 수 있는 게시판, 이 외 쇼핑몰 사용자를 위
해 상품관리, 주문관리, 마켓관리 기능도 구성되어 있습니다.
다양한 기능을 가진 앱들과 운영모드의 세부 내용은 웹사이트를 만들고 난 후에도 지속적으로 확인이 필요한 부분입니다.
손에 익도록 하고 눈에 익히셔서 운영과 정보관리에 편리하고 스마트하게 이용하시기 바랍니다.
우상단의 디자인편집 버튼을 클릭하면, 디자인편집 페이지로 이동되며, 내 아이디를 클릭하면 나의 사이트로 바로가
기나 로그아웃을 할 수 있습니다.
버튼은 두부플러스를 사용하시다가 궁금한 점을 바로 확인할 수 있는 고객지원센터 페이지로 이동됩니다.
템플릿으로 디자인하여 웹사이트를 만드는 것은 누구나 쉽게 할 수 있지만 웹사이트를 방문자가 편리하게 이용하려면, 관리자가 운영모
드의 세부내용에 대해 상세하게 정보를 입력해야 합니다.
운영모드를 스마트하게 활용하신다면, 조금 더 안정적이고 전문적인 웹사이트를 구현하실 수 있습니다.
이에 두부플러스에서는 사용자의 편의와 웹사이트를 통한 매출증대를 위해 꾸준한 기능업데이트를 진행하고 있습니다.
실제 코딩이나 포토샵을 다루지 못해도 손쉽게 웹사이트를 제작할 수 있도록 구성되어 있습니다.
6	 두부플러스페이지구조
두부플러스 페이지구조
두부플러스는 갯수 제한없이 3Depth까지
페이지(메뉴)를 생성할 수 있으며, 설정된 페
이지는 [디자인편집>요소>네비게이션]에
노출됩니다.
두부플러스페이지구조	 7
8	 웹사이트메인화면구성
웹사이트 메인화면구성
1
3
2
4
5
6
7
웹사이트메인화면구성	 9
방문자가 웹사이트 주소를 클릭 후 처음 보게 되는 화면인 메인페이지를 완성도 있게 디자인 한다면,방문자의 웹
사이트 이탈율을 보다 많이 줄일 수 있습니다.
메인페이지의 완벽한 구성을 두부플러스에서 소개해 드립니다.
1 로고, 상징의 중요성
로고는 웹사이트의 분위기, 형태를 압축하여 나타낼 수 있는 함축적이고 상징적인 이미지입니다.
최근 들어 웹사이트의 로고를 [메인 페이지로 바로가기] 버튼으로 많이 사용하는데, 방문자가 웹사이트에서 로고를 가장 많이 보
고 가장 많이 클릭한다는 점을 확인할 수 있습니다.
그러므로 로고를 단순한 텍스트로 만들어 사용하는 것보다는 사이트 방문자에게 각인시킬 수 있는 색채와 폰트로 제작한다면 기
억도가 높아질 수 있습니다.
2 상단 메뉴 및 내비게이션
header의 상단 메뉴는 웹사이트의 최상단 위치 부분으로 홈, 로그인, 사이트맵을 노출할 수 있으며, 내비게이션은 서브 페이지로
이동할 수 있는 메뉴의 이름이 노출됩니다.
3 한눈에 웹사이트의 분위기를 파악할 수 있는 이미지 슬라이드쇼
웹사이트를 처음 방문하면 가장 먼저 눈에 띄는 이미지가 메인 슬라이드쇼입니다. 여러 장의 의미 있는 이미지를 슬라이드 형식으
로 보여줌으로써 해당 웹사이트 방문자가 어떤 사이트인지 한눈에 알아볼 수 있습니다.
추가적으로 이미지 위에 텍스트 요소를 추가하여 세부 설명을 기입한다면 웹사이트의 슬라이드쇼 효과는 플러스 됩니다.
4 메인 컨텐츠
메인 페이지에 컨텐츠가 노출되는 부분입니다.
디자인 편집의 요소와 앱을 메인 컨텐츠 섹션에 추가하거나 게시판과 쇼핑, 숙박예약앱에서 메인 페이지에 노출하기를 사용하여
노출하고 싶은 정보를 손쉽게 소개할 수 있습니다.
5 모아진 후기를 한 번에 확인하는 소셜 스트림
여기저기 흩어져 있는 다양한 소셜미디어의 후기 정보를 한 번에 모아 페이지에서 노출합니다.
방문자는 모아져 있는 소셜미디어를 통해 손쉽게 웹사이트의 모든 후기 정보를 확인할 수 있습니다.
6 하단 메뉴
웹사이트 최하단에 노출되는 footer정보로 웹사이트 운영에 필요한 정보가 하단에 노출됩니다.
7 활발한 홍보활동, 팝업
팝업을 통해 방문자에게 중요한 공지나 이벤트를 알림으로써 웹사이트의 홍보 및 마케팅을 강화할 수 있습니다.
이로 인해 매출을 증대시킬 수도 있으며, 홍보와 이벤트가 활성화 된 웹사이트라는 인식 또한 심어줄 수 있습니다.
설정을 통해 PC나 모바일에 각각 노출이 가능하고, 노출 기간 또한 설정할 수 있으므로 선택적인 홍보활동이 가능합니다.
10	 웹사이트서브화면구성
웹사이트 서브화면구성
1 서브페이지 레이아웃
메인페이지와 차별점을 주어 서브페이지 별로 레이아웃을 다르게 설정할 수 있습니다.
상단메뉴를 클릭 후 하위메뉴인 서브페이지로 이동되면, 서브페이지의 내용에 따라 레이아웃의 디자인을 설
정하여 세세한 디자인까지 신경 쓰는 특별한 웹사이트를 구성하실 수 있습니다.
2 상단 메뉴 및 내비게이션
웹사이트에서 부각시켜야 할 문의, 상담, 예약 등의 관리자가 노출하고 싶은 주요 기능을 보여줍니다.
퀵메뉴는 메인페이지에서도 서브페이지에서도 노출되기 때문에 방문자가 웹사이트에서 헤매지 않고 빠르게
컨텐츠를 찾을 수 있도록 도움을 줍니다.
웹사이트의 세부적인 내용을 메인페이지나 하나의 페이지에 모두 담는다면, 정보의 양이 너무 많아 방문자가
찾고싶은 내용을 쉽게 찾기 어려울 것입니다.
1
3
웹사이트서브화면구성	 11
상단메뉴의 하위메뉴인 서브페이지를 구성한다면, 주제별로 컨텐츠를 활용할 수 있습니다.
3 서브페이지 하위메뉴와 서브컨텐츠
메인페이지의 상단메뉴를 클릭하면 하위메뉴인 서브페이지로 이동됩니다.
페이지설정에서 페이지의 메뉴명과 메뉴순서를 설정할 수 있으며, 사이트의 용도에 따라 페이지를 연결할 앱
을 선택할 수 있습니다.
앱은 메인페이지, 게시판, 소스코드, 서브컨텐츠, 소셜스트림, 쇼핑, 숙박예약, 외부주소로 연결이 가능하며,
선택된 APP의 컨텐츠가 서브컨텐츠에 노출됩니다.
4 페이지 경로
현재 화면에 보여지는 페이지의 이동 경로를 확인할 수 있습니다.
2
4
12	 두브플러스기능용어설명
두부플러스 기능용어설명
디자인편집구성
1
• : 운영모드로 이동
•레이아웃: 디자인편집의 현재페이지 명칭
•페이지 : 페이지(메뉴)만들기로 이동
•앱: 나의 앱으로 이동
2
•요소추가 : 웹사이트를 구성하는 다양한 요소 및 앱
을 마우스로 드래그하여 설정
•섹션추가 : 섹션을 열(Colum)로 구분
•디자인 : 템플릿 변경 및 폰트 설정
•전체설정 : 전체 레이아웃 영역 설정
3
•소스편집 : Code Editor로 코딩
•미리보기 : 현재 편집 중인 화면 미리보기
•환경설정 : [운영모드> 환경설정> 기본정보] 페이지
로 이동
•도움말 : 튜토리얼과 가이드보러가기로 이동
•나의 사이트 : 현재까지 작업한 나의 사이트를 웹상
으로 확인
4
PC, 태블릿, 모바일 미리보기버튼을 통해 나의 사이트
화면 확인
5
•Undo : 이전작업환경으로 되돌리기
•Redo : 이전에서 이후 작업환경으로 되돌리기
•저장목록 : 저장목록 불러오기.
•저장 : 변경사항 저장
•게시하기 : 마지막 작업환경 저장 및 사이트 적용
1
2
3
두브플러스기능용어설명	 13
레이아웃구성
4
5
두부플러스는 디자인편집의 레이아웃을 통해 요소 및 앱을 활용하여 웹사이트를 쉽고 편리하게 디자인 할 수
있습니다.
※ 저장과 게시하기 버튼을 누르지 않으면, 이전 작업 환경은 저장되지 않습니다.
mobile_header:
모바일에서 보여지는 Header 부분이며, 모든 페이지에 노출됩니다. Mobile_Header는 삭제할 수 없습니다.
header:
모든 페이지에 노출됩니다. 일반적으로 로고, 메뉴가 포함됩니다.
content:
웹사이트의 컨텐츠가 포함되는 부분입니다.
footer:
모든 페이지에 노출됩니다. 일반적으로 연락처, 소셜아이콘, 카피라이터가 포함됩니다.
14	 두브플러스기능용어설명
텍스트요소
6
7
6 텍스트요소 설명
•제목 : 타이틀 글자(텍스트)를 입력할 수 있습니다.
•단락 : 제목의 자세한 설명을 넣어 사용자들에게 정보를 쉽게 전달할 수 있습니다.
7 텍스트 EDIT
•스타일 : 텍스트의 스타일을 제목 / 페이지제목 / 본문 등으로 지정하여 입력하면, 장애인들이 스크린리더기를
사용하여 글을 읽을 때 문장의 구조를 확인하며 텍스트를 읽을 수 있습니다.
•폰트 : 다양한 글씨체를 제공합니다.
•크기 : 텍스트 기준 크기에서 수치 만큼의 배수로 작아지거나 커집니다.
•텍스트를 굵게, 기울임꼴, 밑줄, 취소선, 색변경, 색강조, 줄맞춤, 들여쓰기, 내어쓰기가 가능합니다.
두브플러스기능용어설명	 15
미디어요소
8
8 미디어요소 설명
•이미지 : 원하는 이미지를 삽입할 수 있습니다.
•동영상 : 원하는 동영상을 URL로 입력 / 소스코드로 입력하여 연결합니다.
•코드셀 : 소스코드를 삽입할 수 있습니다.
•SNS공유 : 웹사이트방문자가 SNS 계정에 컨텐츠를 공유할 수 있는 기능입니다.
페이스북, 트위터, 밴드, 카카오톡, 카카오스토리, 구글플러스, 핀터레스트, 라인 등이 제공됩니다.
16	 두브플러스기능용어설명
구성요소
9
10
6 구성요소 설명
로고 : 이미지형, 텍스트형으로 로고를 설정할 수 있습니다.
상단메뉴 : 웹사이트의 최상단으로 홈, 로그인, 사이트맵을 노출합니다.
하단메뉴 : 웹사이트의 최하단에 노출되는 정보로 [운영모드> 환경설정> 운영정책관리]의 내용이 보여집니다.
네비게이션 : 페이지(메뉴)가 노출됩니다,
하단주소 : 하단주소의 정보는 [운영모드> 환경설정> 사이트관리> 기본정보]의 저장된 내용으로 노출됩니다.
카피라이터 : 웹사이트 개설년도와 사이트명이 안내됩니다.
예) Copyright ⓒ 웹사이트 개설년도 기업명. All rights reserved. Powered by dubuplus.com
두브플러스기능용어설명	 17
앱설명
10
회원관리 : 회원제로 운영되는 웹사이트의 경우, 메인 또는 서브 디자인에 로그인 창을
노출할 수 있습니다.
게시판 : 유형별 게시판을 삽입하여 노출할 수 있습니다.
슬라이드쇼 : 메인이미지로 많이 사용되며, 여러 이미지들을 슬라이드하여 보여줍
니다.
지도 : 구글, 네이버, 다음 지도를 활용하여 지도를 생성할 수 있습니다.
카운터 : 웹사이트 방문자수를 노출시킬 수 있는 기능입니다.
슬라이더갤러리 : 숙박사이트의 객실안내에서 많이 사용되며, 슬라이드쇼처럼 이미지
이동이 가능하고, 슬라이더 메인이미지와 서브이미지들이 썸네일 형
태로 동시에 노출됩니다.
문자상담 : 실시간으로 고객과 메시지를 주고 받을 수 있는 기능입니다.
검색 : 웹사이트 내 검색을 할 수 있는 앱으로 쇼핑상품 검색시 많이 사용됩니다.
소셜스트림 : 다양한 소셜미디어(NAVER BLOG, YOUTUBE, INSTAGRAM 등)에 업로
드된 내용을 웹사이트 한 페이지에 모아 노출 및 운영할 수 있습니다.
숙박예약 : 숙박사이트를 운영하는 사용자를 위한 특화된 앱으로 숙박예약의 객실안내
를 설정할 수 있습니다.
예약검색 : 웹사이트의 숙박예약을 조건에 맞게 검색하여 보다 편리하게 예약 및 상세
검색이 가능합니다.
쇼핑 : 쇼핑몰을 운영하는 사용자를 위한 특화된 앱으로 웹사이트에서 판매할 상품을
노출합니다.
18	 두브플러스기능용어설명
세부설정설명
11
11
•표시/숨김 : 클릭되어 있는 디바이스에만 노출됩니다.
•높이 : 사이즈나 단위별로 지정된 높이에 활성화됩니다.
•정렬 : 왼쪽, 오른쪽, 가운데정렬로 맞춰집니다.
•패딩 : 설정영역의 안쪽 여백을 조정합니다.
•마진 : 설정영역의 바깥쪽 여백을 조정합니다.
•배경색 : 설정영역의 배경색상을 설정할 수 있습니다.
•테두리선 : 설정영역 테두리의 굵기, 선종류, 선위치를 조절하고
색상을 설정할 수 있습니다.
•박스라운드 : 설정영역의 테두리를 둥글게 합니다.
•배경이미지 : 배경에 이미지를 추가합니다.
•애니메이션 : 첫 등장 효과를 설정합니다.
•앵커 : 앵커 지점을 설정합니다
두브플러스기능용어설명	 19
아이콘설명
12
12
디자인편집의 요소들을 드래그 앤 드롭 방식으로 원하는 섹션/컨텐츠에 추가할 수 있습니다.
섹션/컨텐츠에 추가한 요소는 이동버튼을 통해 위치를 옮길 수 있습니다.
삭제버튼으로 삭제가 가능합니다.
설정버튼으로 셋팅된 기본설정을 수정하여 디자인편집을 활용할 수 있습니다.
플랜2.
두부플러스
밸런스업
웹사이트를 제작하기에 앞서 두부플러스에서 계정생성을 하고 사이트에 필요한 페이지를 생성합니다.
페이지는 서브페이지를 이어주는 매개체가 됩니다. 서브페이지에서는 서브컨텐츠와 게시판을 활용하여
상세한 설명이 가능하기 때문에, 여러 페이지를 생성하여 페이지별 주제에 맞는 컨텐츠를 작성하는 것이
가장 좋은 방향입니다.
한 서브페이지에 모든 컨텐츠를 담게 된다면 페이지의 내용이 많아져 방문자의 가독성이 떨어지며, 스크
롤을 계속 내리며 컨텐츠를 확인해야 하는 단점이 있습니다.
서브페이지를 완성하셨다면, 웹사이트의 얼굴인 메인페이지를 주목도 있게 구성하시기 바랍니다.
메인페이지에 꼭 필요한 요소와 앱을 확인하셔서 이탈율이 적고 매출이 올라가는 메인페이지를 만드실
수 있습니다.
22	 웹사이트만들기STEP별구성
웹사이트 만들기 STEP별 구성
두부플러스 마스터 플랜에서는 웹사이트 구조 및 웹사이트를 만드는 STEP별 구성을 알아볼 수 있으며,
앱과 요소, 두부플러스 기능 및 환경의 상세 설명은 [두부플러스 웹사이트> 매뉴얼] http://master.dubuplus.com에서
확인이 가능합니다.
STEP
03 07~
서브컨텐츠만들기
(텍스트/이미지/
동영상/지도/
소스코드)
운영모드>앱>서브컨텐츠
STEP
01
기본정보입력
운영모드>환경설정
STEP
02
페이지생성하기
디자인편집>페이지
STEP
08
게시판생성하기
운영모드>앱>게시판
OPEN
PC,모바일
웹사이트완성
웹사이트만들기STEP별구성	 23
STEP
13~
메인페이지
구성하기
(로고/슬라이드쇼/
팝업/슬라이더갤러리)
디자인편집>앱요소
10
STEP
페이지연결하기
디자인편집>페이지
09
STEP
모바일사이트
편집하기
디자인편집>모바일
14
24	 웹사이트만들기STEP별구성
STEP01. 계정생성 및 기본정보 설정하기
- 두부플러스에서 웹사이트를 제작하려면, 제일 먼저 계정생성 후 기본정보를 설정해야 합니다.
- 해당정보의 아이디를 바탕으로 도메인이 생성되며, 웹사이트의 개설까지 마스터플랜을 따라오신다면 쉽고 빠르게
웹사이트를 만드실 수 있습니다.
01. 계정생성하기
01-1. 계정정보 입력 및 이메일 인증하기
두부플러스(http://dubuplus.com) 메인페이지의 시작하기를 클릭하여 정보를 입력합니다.
만약 Facebook, KakaoTalk, Naver, Google과 같은 SNS 계정이 있다면,
별도의 입력 없이도 계정을 생성할 수 있습니다.
계정 정보 입력 후, 계정 생성을 클릭하면, 등록한 이메일로 인증 메일이 발송됩니다.
이메일 주소와 아이디는 생성 후 변경할 수 없습니다.
웹사이트만들기STEP별구성	 25
26	 웹사이트만들기STEP별구성
01-2. 상품 선택 및 결제하기
이메일 인증이 완료되면 Free, Basic, Premium, E-Commerce, Booking 중 업종에 맞는 상품을 선
택하여 시작하기를 클릭합니다.
두부플러스는 계정 생성 단계에서 무료 또는 유료를 선택하거나 무료로 셋팅 후, 유료로 업그레이드하
여 사용할 수도 있습니다.
유료 상품의 경우 결제는 신용카드, 실시간 계좌이체, 무통장입금(가상계좌) 중 선택 가능하며, 결제기
간(월/년 단위) 및 결제방식(자동결제/일반결제)도 선택할 수 있습니다.
1년 자동결제를 선택하는 경우, 20% 할인된 가격으로 이용할 수 있습니다.
웹사이트만들기STEP별구성	 27
01-3. 템플릿 선택하기
상품 선택 및 결제를 완료하면 두부플러스에서 제공하는 웹사이트의 템플릿을 선택하여 웹사이트 제작을 시작
할 수 있습니다.
템플릿은 [디자인편집> 디자인> 템플릿 변경]에서 언제든 변경이 가능하며, 탬플릿 만들기를 통해 새로운 템
플릿을 만들 수도 있습니다.
템플릿까지 선택했다면, 계정 생성이 완료됩니다.
템플릿 미리보기로 디자인을 확인해보세요.
28	 웹사이트만들기STEP별구성
디자인편집> [x]> 운영모드 이동
계정생성을 완료하면, 두부플러스에서는 사용자가 웹
사이트의 화면을 디자인할 수 있는 디자인편집 화면으
로 자동이동 됩니다.
디자인편집의 튜토리얼 가이드를 확인하신 후 ,
좌측 상단의 [x]버튼을 클릭하면 두부플러스 운영모드
로 이동할 수 있습니다.
* 두부플러스에서 웹사이트를 처음 사용하는 사용자분들은
[운영모드> 환경설정]으로 이동하여 마스터플랜의 STEP별
가이드에 따라 웹사이트 운영에 필요한 정보를 입력하시기
바랍니다.
* 이미 웹사이트 관리의 기본정보를 입력한 사용자분들은
STEP02의 [디자인편집> 페이지]를 클릭하시기 바랍니다.
두부플러스 디자인편집은 웹사이트의 디자인을 구성하며,
디자인편집의 튜토리얼을 통해 사용방법을 익히실 수 있습니다.
웹사이트만들기STEP별구성	 29
30	 웹사이트만들기STEP별구성
운영모드> 환경설정> 사이트관리> 기본정보
사이트관리에서 기본정보의 계정정보, 기업정보 내용 등을 입력 후 저장합니다.
환경설정에서는 웹사이트 운영에 필요한 기본정보를 입력할 수 있으며
사이트설정 및 도메인설정, 하드용량 등을 체크할 수 있습니다.
02. 환경설정하기
02-1. 기본정보 설정하기
기본정보 및 계정정보는 웹사이트 정보로 노출되며, 상업적 목적으로 웹사이트 구축 시 필수적으로 노출해야
합니다.
웹사이트만들기STEP별구성	 31
운영모드> 환경설정> 사이트관리> 도메인 설정
02-2. 도메인 설정하기
도메인은 웹사이트의 주소로 도메인을 통해 관리자 및 방문자가 해당 웹사이트에 접속할 수 있습니다.
대표도메인은 1개로 설정할 수 있으며, 서브도메인은 최대 3개까지 설정이 가능합니다.
도메인 생성 후, 인터넷 주소창에서 웹사이트의 도메인 주소를 입력하여 검색해 보시기 바랍니다.
도메인 설정은 유료 업데이트 후 사용할 수 있습니다.
기존 보유하고 계신 도메인이 있을 경우, 네임서버를 두부플러스 정보로 변경 후 입력하시면 사용이 가능합
니다. 두부플러스의 네임서버는 [운영모드> 환경설정> 도메인설정> 도움말]에서 확인이 가능합니다,
32	 웹사이트만들기STEP별구성
일반적으로 상단메뉴, 네비게이션은 웹사이트 구성 윗부분 [Header] 에 위치하며,
하단메뉴는 최하단 [Footer]부분에 위치합니다.
일반적으로 [디자인편집> 레이아웃]의 [header] 영역에는 상단메뉴, 로고, 네비게이션이 위치하며,
[footer] 영역에는 하단메뉴, 하단주소, 카피라이터가 위치합니다.
03. 디자인편집으로 웹사이트에 상단메뉴, 하단메뉴 노출하기, 네비게이션 노출하기
디자인편집> 구성요소> 상단메뉴, 하단메뉴, 네비게이션
1
드래그앤드롭으로 원하는 위치에 상단메뉴, 하
단메뉴, 네비게이션 요소를 추가할 수 있습니
다.
2
설정을 클릭하여 원하는 정보와 메뉴의 노출여
부를 수정할 수 있습니다.
상단메뉴의 메뉴 설정은 편집을 통해 메뉴 정보
의 추가와 삭제, 편집이 가능하며, 하단메뉴 또
한 정보설정으로 노출하고 싶은 정보들을 선택
적으로 편집이 가능합니다.
네비게이션의 경우, 글꼴 설정이 가능합니다.
3
저장 및 게시하기 버튼을 클릭 후 미리보기 버
튼과 나의 웹사이트 버튼을 클릭하여 디자인편
집 작업 후 적용된 화면을 확인할 수 있습니다.
1
2
3
설정에서는 표시/숨김으로 클릭되어 있는 디바이스의
노출 여부를 결정할 수 있고, 높이나 정렬, 패딩, 마진,배
경색, 테두리선과 테두리 박스의 라운드 처리, 배경이미
지 등록, 애니메이션, 앵커의 설정을 조절 선택할 수 있습
니다. 해당 설정부분은 모든 요소와 앱에서 설정이 가능
합니다.
웹사이트만들기STEP별구성	 33
STEP02. 페이지 생성하기
01. 기본페이지 설정하기
디자인편집> 페이지> 기본페이지
- 페이지는 생성 후 웹사이트 메인페이지와 서브페이지 [header] 부분에 노출됩니다.
- 기본페이지는 [디자인편집> 구성요소> 상단메뉴 또는 하단메뉴]의 적용된 부분에 노출됩니다.
- 페이지만들기는 선택한 APP으로 페이지가 연결되며, 페이지이름이 메뉴바형태로 웹사이트에 노출됩니다.
[디자인편집> 구성요소> 네비게이션]에서 확인할 수 있습니다.
기본페이지 설정은 홈, 로그인, 웹사이트맵, 마이페이지와 같은 상단메뉴와 개인정보처리방침, 이용약관 등 하단메뉴를 설정하는 작업으
로 페이지의 이름 확인 및 수정 후 APP스킨, 타겟, 페이지레이아웃, SEO 설정 내용 입력 후 저장합니다.
SEO주소, 타이틀, 키워드, 설명은 검색엔진과 브라우저에 노출되기 때문에 페이지 내용을 정확하게 요약하
여 입력해 주시기 바랍니다. [두부플러스 마스터플랜> Plan 04. 두부플러스 레벨업> 웹사이트 꼼꼼하게 관
리하기] 참조.
34	 웹사이트만들기STEP별구성
페이지만들기에서는 메뉴바에 작성될 페이지이름(메뉴명)을 입력합니다.
+페이지추가 버튼을 클릭하여 생성된 페이지의 이름을 입력합니다.
두부플러스의 페이지는 최대 3Depth까지 설정할 수 있
으며, 생성 개수는 제한이 없습니다.
여러 페이지를 만드신 후 숨김버튼을 클릭하여 비활성
화 할 수 있으므로 웹사이트에 맞는 페이지를 생성해 보
시기 바랍니다.
APP선택은 [서브페이지와 게시판을 페이지에 연결하
기]에서 설명드릴 예정입니다.
STEP을 잘 따라오신 후 [STEP09]에서 확인하시기 바
랍니다.
페이지 생성하기 [STEP02]에서는 페이지 이름(메뉴
명), 타켓, 페이지레이아웃, SEO설정 내용을 입력 후 저
장하기를 클릭해주시면 됩니다.
커서버튼을 클릭하면, 페이지만들기의 목록에서 생성된
페이지의 위치를 편집할 수 있으며, 페이지 숨기기가 가
능합니다.
목록의 페이지명을 마우스 위아래로 드래그하여 메뉴순
서를 변경하거나 왼쪽, 오른쪽으로 드래그하여 하위 페
이지를 만들 수 있습니다. 페이지숨기기는 메뉴(네비게
이션)에 페이지가 보이지 않지만 실제로는 존재합니다.
페이지를 사용 안 하시려면 삭제하시거나, APP선택에
서 링크없음으로 변경하시기 바랍니다.
02. 내 사이트에 맞게 페이지 추가하기
디자인편집> 페이지> 페이지만들기
웹사이트만들기STEP별구성	 35
운영모드> 앱> 서브컨텐츠
STEP03. 서브컨텐츠 만들기1 - 텍스트
- 서브컨텐츠는 웹사이트의 컨텐츠를 구성하는 페이지입니다.
- 서브컨텐츠 앱으로 이 페이지를 디자인 및 구성할 수 있습니다.
서브컨텐츠 생성을 클릭하여 생성할 서브컨텐츠명을 입력 후, 서브컨텐츠 설정 페이지로 이동합니다.
페이지에 연결이 안 된 서브컨텐츠는 검정아이콘으로,페
이지에 연결된 서브컨텐츠는 컬러아이콘으로 보여지며
생성된 서브컨텐츠는 복사 및 삭제가 가능합니다.
STEP03에서는 서브컨텐츠 앱으로 서브컨텐츠를 만들 수 있는 방법을 소개하며 텍스트, 이미지,
동영상, 지도, 소스코드를 삽입하여 원하는 형태의 서브컨텐츠를 생성하는 방법을 살펴보겠습니다
36	 웹사이트만들기STEP별구성
글자요소의 제목 및 단락을 노출할 위치에 드래그앤드롭하여 추가합니다.
제목의 내용을 입력하려면 더블클릭 후 텍스트를 입력할 수 있습니다.
생성된 텍스트 박스에서 스타일, 글자색, 크기, 간격 등을 수정하여 서브페이지의 제목이 명확하게 설명될 수 있도록 편집합니다.
단락 또한 더블클릭하여 원하는 내용을 작성 후 수정할 수 있습니다.
단락에 상세정보를 입력한다면 방문자에게 좀 더 쉬운 정보를 전달할 수 있습니다.
서브컨텐츠> 글자요소> 제목
제목과 단락의 내용입력 후 설정버튼을 통해
타이틀과 단락에 맞는 텍스트 기준크기를 변
경할 수 있으며, 링크를 적용할 수 있습니다.
웹사이트만들기STEP별구성	 37
서브컨텐츠> 미디어요소> 이미지
STEP04. 서브컨텐츠 만들기2 - 이미지
- 이미지를 업로드하여 서브컨텐츠에 시각적인 이미지 정보를 한눈에 전달할 수 있습니다.
이미지를 추가하여 서브컨텐츠를 활용해 보시기 바랍니다.
미디어요소의 이미지를 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.
이미지요소의 목록에서는 이전에 이미 생성해 놓은
기존이미지 삽입을 통해 원하는 이미지를 선택 후 업
로드하거나, 신규이미지 삽입의 이미지추가 버튼을
통해 원하는 이미지를 업로드 할 수 있습니다.
38	 웹사이트만들기STEP별구성
미디어요소의 동영상을 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.
서브컨텐츠> 미디어요소> 동영상
STEP05. 서브컨텐츠 만들기3 - 동영상
- 원하는 동영상을 업로드하여 이미지에 국한되었던 정보를 영상으로 풀어 더 상세하고 역동적으로 내용을 설명할 수 있습니다.
- 동영상은 방문자의 이목을 끄는 능력이 탁월하여 시각적 스토리텔링 도구로 사용할 수 있습니다.
동영상 설정은 URL 주소입력과 소스코드 연결 방식이 있습니다.
URL입력은 Youtube, Vimeo, 다음, 판도라TV 에서만 가능하지
만, 소스코드(iframe)는 제한 없이 연결할 수 있습니다.
웹사이트만들기STEP별구성	 39
서브컨텐츠> 앱> 지도
STEP06. 서브컨텐츠 만들기4 - 지도
- 지도 앱의 사용으로 위치정보와 주소를 방문자에게 알려줄 수 있으며 메뉴의 찾아오시는 길, 위치정보안내 페이지로 활용됩니다.
마커기능을 사용한다면 지도에서 업체의 위치를 정확하게 표시할 수 있습니다.
앱의 지도를 드래그앤드롭하여 노출할 위치에 추가합니다. 설정을 클릭하여 목록에서 지도 생성을 합니다.
생성할 지도명을 입력 후 API KEY로 지도 종류를 선택합니다.
지도 API 연동 설정하기는 [두부플러스 웹사이트> 메뉴얼> 외부API연동]
http://master.dubuplus.com/외부API연동을 확인해주시기 바랍니다.
구글, 네이버, 다음지도를 사용하기 위해서는 API KEY값
이나 ID값을 입력해야 이용할 수 있습니다.
KEY값은 [디자인편집> 앱> 지도, 운영모드> 환경설정>
외부API연동> 지도]에서 설정할 수 있으며 설정된 정보
로 연동됩니다.
40	 웹사이트만들기STEP별구성
미디어요소의 코드셀을 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.
서브컨텐츠> 미디어요소> 코드셀
STEP07. 서브컨텐츠 만들기5 - 소스코드
- 두부플러스에서 코딩은 코드셀이라는 미디어요소로 명칭되며 소스코드(코딩)를 사용하여 서브컨텐츠를 구현할 수 있습니다.
코딩을 활용하여 고급 편집기능으로 좀 더 다양한 스타일의 디자인으로 완성할 수 있습니다
코드요소 설정영역 안에 소스코드를 입력하여 삽입하
면 자바스트립트, HTML, CSS와 같은 코드로 서브컨텐
츠를 생성할 수 있습니다.
웹사이트만들기STEP별구성	 41
운영모드> 앱> 게시판> 게시판목록
STEP08. 게시판 생성하기
- 게시판은 업종 및 업태에 따라 사용하는 형태가 다르기 때문에 유형별로 생성이 가능하며, 게시판을 활용하여 방문자와 소통이 가능합
니다.
- 생성한 게시판은 [디자인편집> 페이지]에서 연결이 되어야 웹사이트 서브페이지에 노출되며, 메인 또는 서브레이아웃에 노출하기 위
해서는 게시판추출목록에서 설정 후, [디자인편집> 앱> 게시판]을 설정해주어야 합니다.
게시판 생성을 클릭하여 생성할 게시판명을 입력합니다.
01. 게시판 생성하기
페이지에 연결이 안 된 게시판은 검정 아이콘으
로, 페이지에 연결된 게시판은 컬러아이콘으로
보여지며 생성된 게시판의 수정, 복사 및 삭제가
가능합니다.
42	 웹사이트만들기STEP별구성
게시판설정에서 기본설정의 게시판 형태(리스트, 갤러리, 웹진, 문의형)에 따라 설정항목이 자동으로 바뀌며 사용하는 웹사이트 게시판
형태에 따라 변경할 수 있습니다.
고급설정, 항목설정, 권한설정을 통해 게시판의 세부기능들을 설정할 수 있으며, 원하는 설정의 사용여부를 체크 후 저장합니다.
게시판명 및 게시판설명은 스킨에 따라 게시판 페이지
에 노출되거나 노출되지 않을 수도 있습니다.
고급설정에서는 답글, 댓글, SNS공유, 말머리, 스팸방지, 개인정보정책동의 등의 내용을 사용 /사용안함으로 선택할 수 있습니다.
항목설정에서는 방문자가 게시판 글쓰기 시 노출되는 항목에 대한 설정과 방문자가 게시판을 볼 수 있는 내용에 대한 항목을 설정할 수
있습니다.
권한설정에서는 게시글 목록, 열람 외 댓글, 답글 보기 등의 권한을 모든사용자, 로그인사용자, 선택등급 및 그룹 사용자로 지정하여 설
정할 수 있습니다.
웹사이트만들기STEP별구성	 43
아이콘을 클릭하면 해당 게시판의 등록된 게시글을 확인하고 새로운 게시글을 작성할 수 있는 게시글 관리 페이지로 이동합니다.
페이지에 연결이 안 된 게시판은 검정 아이콘으
로, 페이지에 연결된 게시판은 컬러아이콘으로
보여지며 생성된 게시판의 수정, 복사 및 삭제가
가능합니다.
작성된 글은 저장버튼을 누르면 게시글에 반영되고, 게시글 노출은 생성된 게시판이 페이지에 연결되었을 시 노출됩니다.
글쓰기 버튼을 클릭하시면 새로운 게시글을 작성할 수 있습니다.
44	 웹사이트만들기STEP별구성
02. 레이아웃에 게시판 추출하기
메인레이아웃 또는 서브레이아웃 화면에 노출할 게시판을 추출할 수 있으며, 생성한 게시판 전체 또는 일부만 노출할 수 있습니다.
게시판추출 생성을 클릭하여 생성할 게시판추출명을 입력합니다.
추출게시판 설정> 추출게시판을 통해 생성해 놓은 게시판 전체나
일부를 +버튼으로 선택하여 추출할 수 있습니다.
추출게시판을 확인 후 추출게시판 설정 완료 버튼을 클릭합니다.
웹사이트만들기STEP별구성	 45
앱의 게시판을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 클릭합니다.
게시판 목록에서는 이전에 이미 생성해 놓은 게시판 목록을 확인할 수 있습니다.
목록에서는 이전에 이미 생성해 놓은 게시판추출목록을 확인할 수 있으며, 목록에서 선택한 게시판을 레이아웃에
노출할 수 있습니다.
01. 게시판 생성하기
페이지에 연결이 안 된 게시판은 검정 아이콘으
로, 페이지에 연결된 게시판은 컬러아이콘으로
보여지며 생성된 게시판의 수정, 복사 및 삭제가
가능합니다.
03. 메인에 게시판추출목록 노출하기
46	 웹사이트만들기STEP별구성
DUBU+ Master Key> 게시판 형태
리스트형 갤러리형
문의형 웹진형
목록형 게시판으로 자유게시판과 같은
간단하면서도 기본적인 게시판에 사용합니다.
제품, 메뉴, 시공사례와 같이 목록에 이미지 노출이
필요한 게시판에 사용합니다. 썸네일 높이 고정을 통해
이미지의 높이감을 변경하여 사용할 수 있습니다.
예약, 견적의뢰 등 맞춤형 항목이 필요한 경우 사용하며,
진행상태를 표시할 수 있습니다.
잡지형식 특색을 가지는 형태로,
목록에 이미지와 글이 함께 노출되는 형태입니다.
웹사이트만들기STEP별구성	 47
디자인편집> 페이지> APP선택
STEP09. 서브컨텐츠와 게시판을 페이지에 연결하기
- [디자인편집> 페이지> APP선택]에서는 [운영모드> 나의앱]에서 생성한 서브컨텐츠, 게시판을
메뉴로 연결하는 작업을 합니다.
STEP02에서 이전에 생성해 놓은 페이지(메뉴)의 게시판과 서브컨텐츠를 연결합니다.
연결한 페이지의 APP선택에서 드롭다운 버튼을 클릭하여, 생성해놓은 게시판이나 서브컨텐츠를 선택합니다.
48	 웹사이트만들기STEP별구성
디자인편집> 구성요소> 로고
STEP10. 메인페이지 구성하기 - 1 로고
- 로고는 방문자가 웹사이트를 방문 시 가장 먼저 시선이 가는 메인페이지(메인레이아웃) 상단에 위치해 있습니다.
최근 들어 홈으로 가기 버튼으로 방문자가 로고를 클릭하기 때문에 로고의 중요성은 더 커지고 있습니다.
웹사이트를 상징하는 업체 로고를 이미지나 텍스트를 활용하여 트렌디하면서도 돋보이도록 손쉽게 제작해보시기 바랍니다.
구성요소의 로고를 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.
01.텍스트로고 만들기
로고의 텍스트로고를 클릭하여 업체명을 입력후 글꼴,
색상, 크기,간격을 조정하여 텍스트로 로고를 만들 수
있습니다.
웹사이트만들기STEP별구성	 49
로고의 이미지로고를 클릭하여 이미지를 추가할 수 있습니다.
02.이미지로고 만들기
이미지 크기는 웹사이트 위치 및 비율에 따라 수정할 수 있
으며, 레티나이미지를 적용하여 이미지 사이즈가 줄어들어
도 선명한 화질의 이미지로 사용가능하도록 설정합니다.
로고 이미지와 텍스트의 컬러를 정할 때, 두부플러스 마스터플랜 Plan 04. 레벨업의 [업종 및 업태별 컬러
이미지]를 확인하신 후, 로고의 컬러를 정하시면 웹사이트가 조금 더 돋보이는 컬러를 활용할 수 있습니다.
50	 웹사이트만들기STEP별구성
디자인편집> 앱> 슬라이드쇼
STEP11. 메인페이지 구성하기 - 2 슬라이드쇼
- 메인의 슬라이드쇼는 메인화면의 분위기를 결정지을 수 있는 중요한 이미지이며, 방문자에게 가장 처음 노출되는
이미지 페이지입니다.
눈에 띄는 슬라이드쇼를 제작한다면, 방문자의 호감도 상승 및 웹사이트 이탈율을 줄일 수 있습니다.
앱의 슬라이드쇼를 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.
슬라이드쇼 목록에서는 이전에 이미 생성해놓은 슬라이드 목록을 확인할 수 있으며 목록에
서 선택한 슬라이드를 선택하여 레이아웃에 노출할 수 있습니다. 슬라이드쇼 목록의 설정버
튼을 클릭하면, 현재 구성되어 있는 슬라이드쇼를 수정할 수 있습니다.
슬라이드쇼의 효과를 클릭하시면, 선택된 슬라이드쇼
의 이동/페이지 스킨, 애니메이션, 자동재생 등 슬라이
드쇼 효과를 적용할 수 있습니다.
웹사이트만들기STEP별구성	 51
목록의 슬라이드쇼 생성을 클릭하거나 작업된 슬라이드쇼의 설정을 클릭하면 슬라이드를 새롭게 만들거나
수정할 수 있는 페이지로 이동됩니다.
슬라이드 추가 버튼을 클릭하면 새로운 슬라이드를 구성할 수 있는 빈 화면
이 생성되고, 요소추가에서 사용할 요소(텍스트, 이미지, 버튼, 동영상)를 클릭
하여 슬라이드의 화면을 구성할 수 있습니다.
해당 작업창에서 요소추가의 텍스트, 이미지 버
튼으로 원하는 슬라이드를 구성할 수 있습니다.
만들어진 슬라이드는 복사,
숨김, 삭제가 가능합니다.
슬라이드쇼의 전체 영역설정을 클릭하면 높이,
배경이미지, 배경색, 테두리, 링크를 설정 할 수
있으며 모든 슬라이드에 동시 적용됩니다.
상단바의 버튼을 통해 미리보기, 이전작업 및 이
전에서 이후 작업환경으로 되돌릴 수 있습니다.
52	 웹사이트만들기STEP별구성
팝업 생성을 클릭하여 생성할 팝업명을 입력 후, 팝업 설정 페이지로 이동합니다.
운영모드> 앱> 팝업
STEP12. 메인페이지 구성하기 - 3 팝업
- 팝업앱을 통해 중요한 공지나 이벤트를 방문자에게 알림으로써 웹사이트의 홍보 및 마케팅을 강화할 수 있습니다.
설정을 통해 PC나 모바일에만 노출이 가능하고, 노출기간 또한 설정할 수 있어 배너와는 차별화된 홍보수단으로 활용됩니다.
이전에 이미 저장해 놓은 레이어 팝업의 아이콘
을 클릭하면, 팝업설정 페이지로 이동되어 수정
할 수 있습니다.
01. 팝업 생성하기
버튼을 클릭하면 수정 및 복사, 삭제가 가능합니다.
팝업설정에서 팝업의 노출선택, 팝업형태, 노출기간,
창크기, 창위치, 창닫기 옵션의 설정이 가능합니다.
팝업설정을 통해 여러 개의 팝업을 동시에 노출할 수 있으며 노출위치, 노출기간을 선택할 수 있고, 창의 크기
및 창닫기 옵션 또한 설정할 수 있습니다.
웹사이트만들기STEP별구성	 53
PC와 모바일의 미리보기를 통해 팝업위치를 확인하여 지정할 수 있으며, 팝업의 버튼을 통해 바로가기가 가
능합니다. 노출을 선택하면 팝업 생성 후 바로 웹사이트에 반영됩니다.
02. 팝업 편집하기
해당 작업창에서 요소추가의 텍스트,이미지 버튼으
로 원하는 팝업창을 구성할 수 있습니다.
각 요소의 이동, 순서변경, 추가 및 디자인
을 구성할 수 있습니다.
54	 웹사이트만들기STEP별구성
슬라이더갤러리 생성을 클릭하여 생성할 슬라이더갤러리명을 입력 후, 슬라이더갤러리 설정 페이지로 이동합니다.
운영모드> 앱> 슬라이더갤러리
STEP13. 메인페이지 구성하기- 4 슬라이더갤러리
- 슬라이더갤러리앱을 활용하려면, 이미지가 포함된 갤러리 게시판이 먼저 생성되어 있어야 합니다.
게시판 각각의 이미지를 하나의 페이지에 모아 노출시키는 슬라이더갤러리는 슬라이드쇼처럼 이미지 이동이 가능하며, 슬라이더 메인
이미지가 노출되면 서브 이미지들은 썸네일형태로 노출됩니다.
이전에 이미 저장해 놓은 슬라이더갤러리의 아이
콘을 클릭하면,설정페이지로 이동되어 수정할 수
있습니다.
01. 슬라이더갤러리 생성하기
버튼을 클릭하면 복사, 설정, 삭제가 가능합니다.
설정버튼을 통해 저장된 슬라이더갤러리의 기본설정,
항목설정, 게시판 추출을 수정할 수 있습니다.
슬라이더갤러리는 이미지가 등록되어 있는 게시판으로만 노출이 가능하며, 기본설정의 노출형태, 갤러리형
태, 페이지 연결 여부에 따라 여러형태로 노출이 가능합니다.
웹사이트만들기STEP별구성	 55
항목설정에서 체크한 항목이 노출되려면, [기본설정> 항목표시]에서 표시안함 외 항목으로 선택이 되어야
합니다.
02. 슬라이더갤러리 설정하기
기본설정에서는 슬라이더갤러리 형태, 노출 형태, 항목 표시, 상세페이지 연결 등을 설정할 수 있습니다.
게시판 추출에서는 유형에 상관없이 이미지
가 등록된 게시판이 목록에 노출되며, 목록에
서 +버튼으로 선택된 게시물이 추출한 게시
물로 이동됩니다.
일반으로 설정할 경우 갤러리게시물이 합쳐
서 보이고, 탭으로 설정할 경우 갤러리게시
판들이 탭별로 나눠서 보여집니다.
56	 웹사이트만들기STEP별구성
앱의 슬라이더갤러리를 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.
슬라이더갤러리 목록에서는 이전에 이미 생성해 놓은 슬라이더갤러리 목록을 확인할 수 있으며 목록에서 선택한 슬라이더갤러리를 레이
아웃에 노출할 수 있습니다.
슬라이더갤러리 목록의 설정버튼을 클릭하면, 현재 구성되어 있는 슬라이더갤러리를 수정할 수 있습니다.
슬라이더갤러리 생성 버튼으로 새로운 슬라이더 갤러리 생성이 가능합니다.
디자인편집> 앱> 슬라이더갤러리
03. 슬라이더갤러리 노출하기
웹사이트만들기STEP별구성	 57
STEP14. 모바일사이트 편집하기
- 두부플러스는 PC에서 웹사이트를 만들면, 자동으로 모바일 페이지도 함께 만들어지는 반응형 웹빌더 서비스를 제공하고 있습니다.
미리보기 버튼을 통해 모바일 화면을 확인하신 후 필요에 따라 모바일 메인화면을 편집하여 모바일 맞춤형 사이트를 경험해 보시기 바
랍니다.
PC에서 웹사이트 변경은 모바일 화면에 영향을 미치지만, 모바일 웹사이트의 변경은 모바일 화면에서만
변경됩니다.
mobile_header 위치 이동 시, 모바일 화면에
서는 네비게이션과 상단 메뉴 부분의 위치가 달
라질 수 있으므로, 유의하시어 모바일 웹사이트
를 편집 후 미리보기로 확인하시기 바랍니다.
모바일 페이지는 필요에 따라 모바일설정으로 변경 후 수정이 가능하며, 미리보기 버튼을 통해 확인할 수 있습니다.
모바일 버전 편집기능은 모바일 모드에서 최대한 원하는 결과물을 만들 수 있습니다.
디자인편집> 모바일 설정 / 미리보기
모바일에서는 이미지 해상도에 따라 이미지
의 상하좌우가 잘려 보일 수 있으므로 웹사
이트 제작 후 모바일 페이지를 꼭 확인하시
기 바랍니다.
플랜3.
두부플러스
초이스업
두부플러스에서 무료로 지원되는 앱 뿐만 아니라 유료로 제공되는 앱으로 특화된 서비스를 경험해보시
기 바랍니다.
다양한 기능을 가진 앱을 사용하며 웹사이트 구성에 활용도를 높일 수 있으며 나의 업종/업태에 알맞은
앱을 추가하여 수준 높은 웹사이트를 경험할 수 있습니다.
60	 앱소개
앱 소개
LESSON 01. ‘문자상담’으로 상담창 생성하기
- 방문자가 사이트에서 SMS로 문의하면, 실시간으로 방문자와 문자를 주고받을 수 있는 기능으로 웹사이트에서 구매를 원하는 방문자
의 사이트 이탈율을 줄이고 구매전환율을 높일 수 있는 앱입니다.
01. 문자상담내역 확인하기
운영모드> 앱> 문자상담
02. 문자상담 설정하기
미답변/답변완료 탭을 통해 문자를 상세검색할 수 있으며, 수신된 메시지에 답변을 전송할 수 있습니다.
※ 수신된 메시지는 SMS로 수신할 수 있으며, 건당 20원의 캐쉬가 소진됩니다. 사용 전, [운영모드>환경설정>결제관리>캐쉬관리]에서
캐쉬를 충전하여 사용하시기 바랍니다.
기본설정에서 관리자 통보설정, 상담창 기본문구, 노출방식을 설정할 수 있습니다.
문의글이 등록되었을 시 휴대폰으로 내용을 받을 수 있으며, 상담창 문구에 방문자에게 전달하고 싶은 문구를 작성할 수 있습니다.
노출방식에 따라 웹사이트 레이아웃이나 팝업창으로 노출할 수 있습니다.
앱소개	 61
디자인편집> 앱> 문자상담
노출방식을 레이아웃 안에 넣기로 선택 시 디자인편집 레이아웃으로 이동되며, 앱의 문자상담을 드래그앤드롭으로 노출할 위치에 추가
후 설정을 클릭합니다.
문자상담의 설정에서는 관리자 통보설정을 선택할 수 있으며, 상담기본문구, 노출방식을 편집 및 확인할 수 있습니다.
스킨에서는 레이아웃의 디자인에 어울리는 문자상담의 스킨을 선택할 수 있습니다.
62	 앱소개
LESSON02. ‘퀵메뉴’로 바로가기 메뉴 만들기
- 문의하기, 오시는길 등과 같이 웹사이트에서 부각시켜야 할 컨텐츠를 퀵메뉴로 노출할 수 있습니다.
바로가기 메뉴는 방문자가 빠르게 컨텐츠를 찾을 수 있도록 도움을 줍니다.
01.퀵메뉴 생성하기
운영모드> 앱> 퀵메뉴
퀵메뉴 생성을 클릭하여 생성할 퀵메뉴명을 입력 후, 퀵메뉴 스킨선택을 통해 원하는 퀵메뉴 스킨을 선택합니다.
퀵메뉴가 생성되면, 페이지 노출 선택의 여부에 따라 퀵메뉴가 노출되며 클릭 후 해당 메뉴 바로가기가 가능
합니다. 생성 후에는 사이트에 바로 보여지므로, 노출을 원하지 않을 시 노출설정에서 노출안함으로 상태를
변경해야 합니다.
이전에 이미 생성해 놓은 퀵메뉴의 아이콘을 클릭하
면 설정 페이지로 이동되어 수정할 수 있습니다.
버튼을 클릭하면 수정 및 복사, 삭제가 가능합니다.
설정버튼을 통해 만들어진 퀵메뉴의 이름 수정 및
노출여부와 노출 페이지를 설정하여 선택적인 노출
활동을 할 수 있습니다.
앱소개	 63
메뉴추가 버튼을 통해 기본 제공되는 메뉴 외에도 새로운 퀵메뉴의 메뉴를 추가할 수 있습니다.
퀵메뉴 스킨은 PC와 모바일의 사이즈가 다르므로, 적용 후 각각 화면에서 확인이 필요합니다.
버튼별 설정에 따라 메뉴에 들어갈 아이콘/이미지설정,
텍스트설정, 노출설정, 클릭 시 이동할 링크 설정 외 메
뉴영역별로 수정 및 적용할 수 있습니다.
02.퀵메뉴 편집하기
64	 앱소개
LESSON 03. ‘소셜스트림’으로 웹사이트 홍보하기
- 여기저기 흩어져있는 웹사이트 및 소셜컨텐츠의 후기글이나, 리뷰글들을 한번에 모아 나의 웹사이트에 노출 시킬 수 있습니다.
소셜스트림앱을 적용하여 다양한 소셜미디어(NAVER BLOG, YOUTUBE, INSTAGRAM 등)를 하나로 통합해서 운영해보시기
바랍니다.
01 소셜스트림 생성하고 연결하기
운영모드> 앱> 소셜스트림
소셜스트림 생성을 클릭하여 생성할 소셜스트림명을 입력 후, 소셜스트림 설정 페이지로 이동합니다.
네이버 뉴스 검색에서 상호명으로 검색 후 [뉴스검색RSS보기]를 클릭하여 RSS주소(URL)를 소셜스트림에
연결하면 ‘보도자료’ 메뉴를 저작권 걱정 없이 운영할 수 있습니다.
설정버튼을 통해 저장된 설정의 기본설정, 피드
연결, 메인스타일, 서브스타일을 수정할 수 있습
니다.
버튼을 클릭하면 수정 및 복사, 삭제가 가능합니다.
앱소개	 65
트위터, 유튜브, 네이버블로그는 [검색어]를 설정하면, 방문자 및 회원의 후기를 모아 웹사이트에 노출시킬
수 있습니다.
기본설정에서는 정렬방식과 이미지뷰어, 이미지 게시물만 표
시 등의 사용여부를 설정할 수 있습니다.
메인스타일과 서브스타일에서는 스트림레이아웃에 따라 간격
조정, 컨텐츠의 나열 갯수를 조정할 수 있습니다.
관리의 세부버튼을 통해 피드를 삭제하거나 필터를
통해 제외할 컨텐츠를 지정할 수 있습니다.
소셜스트림 설정에서 연결된 피드의 피드연결 설정을 클릭하
여 연결된 피드와 연결되지 않은 피드를 확인할 수 있습니다.
연결되지 않은 피드의 플러스(+) 아이콘을 클릭하면, 연결된 피
드로 이동하게 됩니다.
피드연결에서는 피드만들기를 클릭 후 노출할 소셜미
디어 컨텐츠를 선택하면 유형에 따라 설정할 수 있는
목록이 변경됩니다.
컨텐츠 선택 후 피드추가를 클릭하면, 피드목록에 선
택한 소셜미디어의 아이콘이 생성되며, 사용여부와
관리여부를 설정할 수 있습니다.
66	 앱소개
02. 소셜스트림 피드 확인하기
생성된 소셜스트림의 게시물 관리는 앱의 아이콘을 클릭하면 가능합니다.
소셜미디어 컨텐츠 전체를 확인하여 게시물별 노출여부를 설정할 수 있으며, 게시물을 클릭하면 해당 소셜미디어로 이동됩니다.
앱소개	 67
디자인편집> 앱> 소셜스트림
앱의 소셜스트림을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 클릭합니다.
소셜스트림의 목록에서는 이전에 이미 생성해 놓은 소셜스트림 목록을 확인 할 수 있으며, 목록에서 선택한 소셜스트림을 레이아웃에 노
출 할 수 있습니다.
스킨 및 글꼴선택을 통해 소셜스트림을 좀 더 디자인적으로 구성하실 수 있습니다.
03. 게시물 관리 및 웹사이트에 노출하기
68	 앱소개
LESSON 04. 쉽고 편리한 ‘숙박예약’
- 숙박사이트를 운영하는 사용자를 위해 특화된 앱으로 숙박예약알림 및 숙박등록에서 관리까지 필요한 모든 기능을 제공합니다.
- 환경설정의 숙박예약관리 및 결제관리를 설정하시면 예약환경설정과 온라인 결제가 가능하여, 별도의 다른 결제 및 예약 프로그램을
사용하지 않으셔도 편리하게 사용하실 수 있습니다.
- 주요기능으로 숙박과 주변 관광지에 대한 등록이 가능하며, 비/성수기에 따라 객실관리의 요금정보에 차등을 둘 수 있습니다. 부가서비
스 관리 또한 가능하여 숙박시설의 부가적인 사용요금 정보를 제공할 수 있습니다.
01. 숙박예약관리 설정하기
운영모드> 환경설정> 숙박예약관리
숙박예약관리의 설정을 통해 예약환경, 예약기간, 예약방식, 규정, 할인, 옵션설정이 가능합니다.
01-1. 기본설정
예약환경설정에서는 예약의 운영방식, 확정방식, 결제방식, 신청형태 등을 선택할 수 있으며, 온라인으로 예약과 결제가 불가한 경우 오
프라인으로 선택할 수 있습니다.
예약기간설정에서는 주말설정을 금, 토, 일, 공휴일, 공휴일 전으로 선택적 설정이 가능하며 성수기와 준성수기의 기간설정을 통해 비수
기와 구분지어 표기할 수 있습니다.
01-2. 일별설정
일별예약방식은 요일뿐만아니라 객실별로 설정이 가능하며, 일벌예약기간은 요일별로 설정이 가능합니다.
기간 변경시에는 변경된 기간의 객실가격으로 노출됩니다.
01-3. 규정설정
기본수수료와 환불규정을 설정할 수 있으며, 설정된 환불규정과 참고사항은 사이트 객실상세페이지와 예약페이지에 노출됩니다.
01-4. 할인설정
할인추가 버튼을 클릭하여 할인명 입력 후, 기간을 설정 후 할인가(율)를 적용할 수 있습니다.
적용대상을 숙박예약별이나 개별로 설정 후 저장하면 할인이 적용됩니다.
01-5. 옵션설정
옵션추가 버튼을 클릭하여 드롭다운박스의 옵션항목을 선택합니다. 바비큐, 조식 등 선택한 옵션의 설명을 기입 후 옵션가격을 지정합니
다. 옵션의 적용대상을 숙박예약별이나 개별로 설정 후 저장하면 옵션이 적용됩니다.
앱소개	 69
객실/예약관리 버튼을 통해 객실관리, 예약관리,
예약현황 등을 확인할 수 있습니다.
70	 앱소개
02.결제관리하기
운영모드> 환경설정> 결제관리
결제설정에서 결제계좌 및 전자결제를 설정 후 저장하시기 바랍니다.
웹사이트에 필요한 정보의 결제계좌관리를 입력합니다.
계좌추가를 클릭하여 은행명과 계좌번호, 예금주를 정확
하게 입력 후 저장합니다.
사용중인 PG사가 있는 경우 계약된 정보를 설정하면 연
동이 되고, 신규신청이 필요하시다면 LG U+를 선택하여
신청하기를 클릭하면 됩니다.
전자결제가 신청되지 않은 상태에서는 무통장입금만 가능합니다.
방문자가 좀 더 편리하게 객실을 예약하고 온라인으로 결제할 수 있도록 전자결제를 설정하세요.
02-1. 결제설정> 기본설정 02-2. 결제설정> 전자결제
앱소개	 71
03. 숙박예약생성하기
운영모드> 앱> 숙박예약> 숙박예약목록
숙박예약 생성을 클릭하여 생성할 숙박예약명을 입력 후, 숙박예약 설정 페이지로 이동합니다.
기본설정에서는 숙박예약유형과, 객식목록의 노출형태를 선택할 수 있으며 페이지에 노출되는 객실목록의 나열 개수를 PC, Tablet,
mobile별로 다르게 설정할 수 있습니다.
지점별, 유형별로 여러 개의 숙박예약을 생성하여 운영할 수 있습니다.
고급설정에서는 카카오톡 등 SNS로 공유하기 기능, 개인정보정책
동의 등을 선택적으로 사용할 수 있으며, 알림설정을 통해 SMS와
메일로 관리자 및 방문자가 예약알림을 받을 수 있습니다.
아이콘의 복사, 설정, 삭제 버튼을 통해 숙박예약을 복사하거
나 삭제할 수 있으며 설정버튼을 통해 저장된 기본설정, 고급
설정, 항목설정, 권한설정을 수정할 수 있습니다.
항목설정에서는 객실의 상세페이지 읽기, 객실목
록, 실시간예약 검색목록에 노출되는 항목을 선택
적으로 설정 후 저장할 수 있습니다.
72	 앱소개
생성된 아이콘을 클릭하면 [앱> 숙박예약> 예약관리]로 이동됩니다.
숙박예약의 객실관리, 예약관리, 예약현황, 휴면/탈퇴회원 예약관리를 설정할 수 있는 화면으로 이동되며, 객실관리탭을 클릭 후 객실등
록 버튼을 클릭하여 객실정보를 등록할 수 있습니다.
객실관리를 세부적으로 작성하면, 방문자가 객실의 정보를 정확하게 확인 후 예약할 수 있으므로 필수항목 외 정보입력까지 명확하게 해
주시는 것이 좋습니다.
객실관리는 객실명, 객실수, 투숙 가능한 기준 인원을 설정할 수 있으며, 가격정보에서는 비/성수기의 가격을
설정할 수 있습니다. 객실 이미지는 최대 20장까지 업로드가 가능하며, 그외 기타 이용안내 등을 등록할 수
있습니다.
기본정보에서는 객실명, 객실수, 인원 등을 설정할 수 있
습니다.
03-1. 객실관리
가격정보에서는 객실의 가격을 비수기, 준성수기, 성수
기로 나누어 세부적으로 지정할 수 있습니다.
이미지정보로 객실의 이미지를 업로드할 수 있으며, 시
설정보에서 객실구조, 객실특성, 편의시설을 클릭하여
선택하거나, 사용자지정을 통해 입력할 수 있습니다.
앱소개	 73
03-2. 예약관리
예약검색의 검색조건에 맞춰 예약건을 검색할 수 있습니다
예약관리에서는 예약번호나 객실명, 예약자, 휴대폰번호로 예약자의 예약확인 및 예약/결제 상태를 변경할
수 있습니다.
예약현황에서는 전체예약현황을 캘린더 형태나 리스트형태로 한눈에 확인할 수 있습니다.
예약상태의 변경은 예약목록에서 변경하고 싶은 예약상태
를 선택하여 변경 버튼을 통해 변경할 수 있습니다.
03-3. 예약현황
전체예약현황을 캘린더형 또는 리스트형으로 확인할 수 있으며, 예약상태를 예약가능, 예약대기, 예약완료로 확인할 수 있습니다.
03-4. 휴면/탈퇴회원 예약관리
1년이상 서비스 이용기록이 없는 회원은 휴면회원으로 관리되며, 휴면회원의 경우 휴면해지 시 기존예약관리에서 확인이 가능합니다.
예약통계버튼을 클릭하면 [운영모드> 통계> 숙박예약>
종합현황]으로 이동됩니다. 예약상태별, 이용/매출별 통
계 등을 검색할 수 있습니다.
예약 엑셀파일을 검색조건에 맞춰 생성할 수 있습니다.
74	 앱소개
04. 페이지에 객실 및 실시간예약(캘린더) 연결하기
디자인편집> 페이지> 숙박 페이지> APP선택> 숙박예약
생성된 숙박예약은 [디자인편집> 페이지> APP선택]으로 연결되어야 웹사이트에 노출됩니다.
연결한 페이지의 APP선택에서 드롭다운 버튼을 클릭하여, 생성해 놓은 숙박예약> 객실 및 실시간예약(캘린더)을 선택합니다.
숙박예약은 객실목록 , 객실상세페이지, 실시간예약(캘린더)을 페이지로 연결할 수 있습니다.
앱소개	 75
05. 숙박예약추출 생성하기
운영모드> 앱> 숙박예약> 숙박예약추출목록
메인페이지 또는 서브페이지에 노출할 객실을 추출할 수 있으며, 객실 전체 또는 일부만 노출할 수 있습니다.
숙박예약 생성을 클릭하여 생성할 숙박예약명을 입력 후 기본설정과 항목설정을 선택 후 저장합니다.
아이콘의 복사, 설정, 삭제버튼을 통해 숙박예약을 복사
하거나 삭제할 수 있으며 설정버튼을 클릭하면 이전에 설
정했던 숙박예약의 설정을 변경할 수 있습니다.
노출할 객실을 추출할 수 있으며, 생생해 놓은 객실
전체나 일부만을 플러스(+) 버튼으로 선택하여 추출
할 수 있습니다.
항목설정에서는 객실목록에 노출되는 항목을 설정할 수
있습니다. 객실명, 가격, 인원 등 노출하고싶은 목록을 체크
하여 저장하면 페이지에 노출할 수 있습니다.
76	 앱소개
06. 메인에 객실 노출하기
디자인편집> 앱> 숙박예약
앱의 숙박예약을 노출할 위치에 드래그앤드롭으로 추가 후
설정을 클릭합니다.
숙박예약 목록에서는 이전에 이미 생성해 놓은 숙박예약
목록을 확인할 수 있습니다.
예약검색앱을 사용하기 위해서는 검색할 숙박예약의 실시간예약(캘린더)가 연결되어 있어야 합니다.
07. 메인에 예약검색 설정하기
앱의 예약검색을 노출할 위치에 드래그앤드롭으로 추가 후
설정을 클릭합니다.
설정된 예약검색에서 조건에 맞게 설정 후 검색 시, 해당 숙
박예약 페이지로 이동됩니다.
현재 구성되어 있는 숙박예약설정을 수정할 수 있습니다.
스킨 및 글꼴을 지정할 수 있습니다.
스킨 및 가로/세로 형태를 지정할 수 있습니다.
디자인편집> 앱> 예약검색
앱소개	 77
LESSON05. 상품등록과 주문 및 배송까지 올인원 ‘쇼핑’
운영모드> 환경설정> 쇼핑몰
- 쇼핑몰 사용자를 위한 쇼핑 최적화 앱으로 상품등록에서 주문/배송관리까지 올인원기능으로 편리하고 체계적인 관리가 가능합니다.
- 주요기능으로는 판매하는 상품을 카테고리별로 등록할 수 있으며 상품별 개별옵션을 추가하여 상품정보를 풍부하게 제공할 수 있
습니다.
- 방문자나 웹사이트 회원이 상품을 구매하면 관리자는 통합관리를 통해 주문관리별 상태를 확인할 수 있고, 상품의 합계금액을 한눈에
확인할 수 있습니다.
01.기본설정하기
상품후기, 상품문의, SNS공유 사용을 활성화하면 상품페이지에 노출됩니다.
02. 배송설정하기
기본설정에서는 배송비에 대한 설정으로 기본/묶음 배송비 설정 및 배송비의 기준에 따라 사용여부를 지정하여 저장할 수 있습니다.
배송비에 대한 자세한 안내사항은 [두부플러스 웹사이트> 매뉴얼> 배송비설정하기]를 참고하시기 바랍니다.
배송업체설정에서는 제공되는 택배사 전체리스트에서 이용할 택배사를선택할 수 있으며 배송업체를 추가
하여 저장도 가능합니다. 지역별 배송비 설정에서 지역을 추가하여 배송비를 추가로 책정할 수 있습니다.
78	 앱소개
03.결제관리하기
운영모드> 환경설정> 결제관리
전자결제가 신청되지 않은 상태에서는 무통장입금만 가능합니다.
방문자가 좀 더 편리하게 상품을 주문하고 온라인으로 결제할 수 있도록 전자결제 설정하세요.
PG신청하기의 자세한 안내사항은 [두부플러스 웹사이트
>매뉴얼>결제계좌/PG설정하기]를 참고하시기 바랍니다.
03-1. 결제설정> 기본설정 03-2. 결제설정> 전자결제
웹사이트에 필요한 정보의 결제계좌관리를 입력합니다.
계좌추가를 클릭하여 은행명과 계좌번호, 예금주를 정확하
게 입력 후 저장합니다.
사용중인 PG사가 있는 경우 계약된 정보를 설정하면 연동
이 되고, 신규신청이 필요하시다면 LG U+를 선택하여 신청
하기를 클릭하면 됩니다.
결제설정에서 결제계좌 및 전자결제, 에스크로 설정 후 저장하시기 바랍니다.
앱소개	 79
네이버 페이를 사용하실 경우, 네이버페이 신청 후 설정의 사용여부를 사용으로 체크 후 네이버 가맹점ID, 연동인증 KEY, 버튼인증KEY,
네이버공동인증KEY 등을 입력합니다.
해당 페이지에서 네이버페이로 결제하지 않을 경우 결제 예외 상품 및 카테고리를 선택할 수 있습니다.
5만원 이상 현금결제 시 에스크로를 필수로 설정하셔야 합니다. 국민은행, 우리은행, NH농협 에스크로를 신청하여 에스크로 ID를 받을
수 있으며, ID와 에스크로전용계좌, 예금주를 입력 후 저장합니다.
네이버페이를 사용하시려면 [두부플러스 웹사이트> 매뉴얼> 네이버페이]를 참고하신 후 신청하시기
바랍니다.
에스크로를 사용하시려면 [두부플러스 웹사이트> 매뉴얼> 에스크로 설정하기]를 참고하시기 바랍니다.
03-3. 결제설정> 네이버페이
03-4. 에스크로 관리
80	 앱소개
04. 상품관리하기
운영모드> 상품관리
상세정보에서는 상품별 품목별로 정보를 드롭다운버튼으로 선택하여 내용을 표로 기입할 수 있으며, 이미지,
동영상, 음악, 플래시를 업로드 할 수 있습니다.
카테고리 설정에서 생성한 카테고리를 선택 후 상
품명과 판매가를 입력합니다.
상품관리에서는 상품의 카테고리를 설정할 수 있고, 전체 상품을 등록하고 관리할 수 있습니다.
04-1. 카테고리 설정
상품에 맞는 카테고리를 상위카테고리 추가하기 버튼으로 추가 후 하위카테고리까지 선택 후 저장합니다.
04-2. 상품등록 및 상품일괄등록하기
상품등록으로 하나의 상품을 등록할 수 있고 상품의 이미지도 일괄등록 할 수 있습니다.
판매상태는 상품등록 시 판매중으로 설정되어 바로 판
매하지 않을 상품은 준비중으로 변경하셔야 합니다.
앱소개	 81
상품일괄등록은 상품추가 버튼을 클릭 후 이미지를 선택하여 업로드하면 이미지 별 카테고리, 상품명, 판매가 상세정보를 입력할 수 있도
록 목록이 생성됩니다. 상품별 이미지 등록은 1개이며, 총 10개의 상품을 등록할 수 있습니다. 카테고리를 확인 후 상품명과 판매가를 설
정 및 저장하면 간편하게 등록이 가능합니다.
05. 페이지에 상품 연결하기
디자인편집> 페이지> APP선택
생성된 쇼핑은 [디자인편집> 페이지> APP선택]으로 연결되어야 웹사이트에 노출됩니다.
연결한 페이지의 APP선택에서 드롭다운 버튼을클릭하여, 생성해 놓은 쇼핑> 상품을 선택합니다.
82	 앱소개
06. 메인에 상품 노출하기
디자인편집> 앱> 쇼핑
쇼핑의 스킨과 글꼴을 통해 전체 디자인과 어울리는 형태로 설정할 수 있습니다.
앱의 쇼핑을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 클릭합니다.
쇼핑의 목록에서는 카테고리명 사용여부를 선택할 수 있고, 이전에 이미 생성해 놓은 쇼핑 목록을 확인할 수 있으며, 목록에서 선택한 쇼
핑을 레이아웃에 노출할 수 있습니다.상품생성을 통해 새로운 상품설정을 통한 상품 추출을 할 수 있습니다.
상품 추출은 기본설정에서 상품의 이름 입력 및 한 줄에 노출될 상품의 개수를 설정 후 상품추출의 리스트에서 플러스(+)버튼으로 상품
카테고리에서 추출할 상품을 노출할 수 있습니다.
앱소개	 83
검색앱을 사용하기 위해서는 검색 시 상품이 보여져야 하기 때문에 노출할 페이지에 해당 상품이 등록되어
있어야 하며, 검색할 쇼핑의 카테고리가 연결되어 있어야 합니다.
07. 메인에 검색 설정하기
디자인편집> 앱> 검색
앱의 검색을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 통해 스킨을 선택할 수 있습니다.
설정 완료 후 웹사이트에서 검색하면 등록된 상품의 명칭으로 검색이 가능합니다.
84	 앱소개
운영모드> 주문관리> 통합관리
앱소개	 85
08. 주문관리하기
주문자가 무통장입금으로 주문 시 결제확인중으로 등록되며,
그 외 결제수단은 결제확인으로 등록됩니다. 결제확인중인 주문건의 입금 여부를 확인한 후, 결제확인으로 상태를 변경합니다.
상품을 배송했다면, 배송중으로 상태를 변경합니다.
상품 선택 > 배송중 선택 > 배송업체 선택 > 운송장번호 입력 > 변경
상품 배송완료 확인 후, 배송완료로 상태를 변경합니다.
배송완료 시, 마이페이지에서는 거래완료 버튼이 생성됩니다. 주문자가 거래완료 버튼 클릭 시 주문건은 거래완료로 이동됩니다.
거래완료는 관리자가 처리할 수 없습니다. 주문자가 마이페이지에서 거래완료로 처리해야 합니다.
단, 배송 완료 후 1주일이 지나면 자동으로 거래완료 처리되며, 에스크로 사용 시 거래완료 처리가 되어야 관리자(판매자) 계좌로 대금이
입급됩니다.
주문자가 구매한 물품을 반품 시, 반송중으로 처리하여 관리합니다.
무통장입금 주문 취소 시, 주문건을 주문취소완료로 상태를 변경하면 환불계좌를 입력할 수 있는 알림창이 생성됩니다.
그 외 결제수단은 자동으로 주문취소완료(자동 환불) 됩니다.
무통장입금 주문취소 상품선택 > 주문취소완료 > 환불계좌입력 > 완료
08-1. 결제확인중/결제확인
08-2. 배송중
08-3. 배송완료
08-4. 거래완료
08-5. 반송중
08-6. 주문취소중/주문취소완료
전체주문관리를 통해 모든 주문내역에 대한 관리를 할 수 있으며, 변경버튼을 통해 주문상태를 변경처리할 수 있습니다.
86	 앱소개
09. 상품관리
운영모드> 상품관리> 상품후기관리
상품관리 목록에서 방문자가 작성한 상품의 후기와 상품의 문의를 확인 및 관리할 수 있습니다.
09-1. 상품후기관리
상품후기 관리에서 등록된 후기를 확인할 수 있습니다.
앱소개	 87
운영모드> 상품관리> 상품문의관리
09-2. 상품문의관리
상품문의는 방문자가 로그인 없이 등록이 가능합니다.
상품문의관리에서 답변을 하면 자동적으로 답변상태가 YES로 변경됩니다.
88	 앱소개
쇼핑몰을 운영하기 위해서는 통신판매업 신고를 먼저 하시기 바랍니다. 통신판매업은 전자상거래를
이용하는 분들이 의무이며, 통신판매업신고를 하지 않았을 경우 전자상거래에 대한 제한 및 벌금을
받게됩니다.
STEP
01
사업자등록증
:세무서/
홈텍스에서
발급가능
통신판매업 신고절차
STEP
02
구매안전서비스
이용확인증
:LGU+,
국민은행,
우리은행,
NH농협은행
에서발급가능
STEP
03
쇼핑몰도메인:
두부플러스에서
도메인발급가능
STEP
04
호스트서버
소재지
두부플러스:
서울시
강남구
언주로616,
10층
(논현동,
KIDC빌딩)
STEP
05
온라인:
민원24
(공인인증서)
오프라인:
관할구청방문
STEP
06
3-5일소요
관할구청에서
신고증받기
플랜4.
두부플러스
레벨업
웹사이트의 디자인을 구성했다면, 해당 사이트의 정보를 관리할 수 있는 관리자의 꼼꼼한 관리가 필요합니다.
두부플러스에서 제공하는 두부디스크e로 웹사이트 파일을 관리 및 저장, 업로드 할 수 있습니다.
90	 웹사이트꼼꼼하게관리하기
웹사이트 꼼곰하게 관리하기
- 디자인편집으로 웹사이트를 디자인했다면, 관리자가 웹사이트를 편리하게 관리 및 사용할 수 있도록 두부
플러스의 관리자 사용법을 안내해드립니다.
01. 관리자 페이지 접속하기
웹사이트 주소/admin ex) aaa.com/admin
웹사이트 상단메뉴의 [관리자]로 접속하시거나, [웹사이트 주소/admin] 을 입력 후 로그인하시면
바로 접속이 가능합니다.
관리자페이지에 접속 및 관리할 수 있는 권한에 따라 대표운영자와 운영자로 로그인이 가능합니다.
대표운영자와 운영자의 등록은 [운영모드> 환경설정> 운영보안관리> 운영자설정]에서 등록 후 관
리할 수 있습니다.
대표운영자와 운영자를 따로 설정하여 여러명의 운영자가 함께 관리할 수 있고, 다양한 상황에 맞춰
권한을 부여할 수 있습니다.
관리자는 웹사이트 회원관리에서 “특별회원” 등급으로 지정되어 있습니다. 두부플러스에서 제작 서비스를
받는 경우는 웹사이트소유자는 바로 특별 회원으로 지정되어 별도로 회원가입을 할 필요가 없습니다.
“
웹사이트꼼꼼하게관리하기	 90
92	 웹사이트꼼꼼하게관리하기
02. 게시판 관리하기
운영모드> 앱> 게시판> 게시판목록
게시판은 관리자페이지에 접속 후 운영모드에서 관리가 가능하며, 웹사이트에서 직접 관리하기도 가능합니다.
02-1. 게시판 글쓰기 및 댓글등록하기
관리할 게시판의 체크박스를 체크하여 상단의 선택한 게시판을 ▼ 버튼을 통해 일괄설정의 게시판 설정으로 이동할 수 있으며, 아이콘의
설정 버튼을 클릭하여 고급설정, 항목설정, 권한설정의 정보를 수정할 수 있습니다.
작성된 게시글의 제목을 클릭하면 수정, 답변, 댓글 등록이 가능합니다.
웹사이트꼼꼼하게관리하기	 93
02-2. 웹사이트에서 게시판 관리하기
설정의 고급설정과 권한설정을 통해 웹사이트 방문자에게 조건에 따라 권한을 설정할 수 있습니다.
고급설정에서 답글, 댓글 기능을 사용으로 변경하였다면 웹사이트에서 글쓰기, 답글, 댓글쓰기가 가능합니다.
웹사이트> 게시판
94	 웹사이트꼼꼼하게관리하기
03. 회원관리하기
운영모드> 회원관리> 회원리스트
웹사이트의 가입회원은 회원리스트에서 관리하며, 회원정보 수정, 탈퇴처리, 회원등록처리, 등급 수정을 관리할 수 있습니다.
최종적으로 가입이 완료된 회원의 목록은 회원리스트에서 확인이 가능합니다.
회원가입환경설정을 통해 가입방식을
승인으로 체크하면 회원가입리스트의
가입대기회원에서 관리자승인이 있어
야 회원이 됩니다.
웹사이트꼼꼼하게관리하기	 95
검색엔진 최적화(SEO)는 검색엔진에서 웹사이트 또는 웹페이지의 노출순위를 높일 수 있는 프로세스로 검색엔진이 내 웹사이트를 찾아
높은 순위로 랭크시킬 수 있는 기술을 뜻합니다.
SEO의 설정은 웹사이트 홍보 및 마케팅을 위해 필수로 작성해야 하며 두부플러스는 검색엔진 최적화 작업을 손쉽게 할 수 있도록 SEO
설정 기능을 제공하고 있습니다.
운영모드> 환경설정> 사이트관리> SEO/SNS공유설정
04. SEO 등록하기
SEO/SNS공유 타이틀은 연관키워드를 구분하여 입력하시기 바랍니다. 검색결과에 반영되므로 컨텐츠를 정확하게 설명하는 제목을 만
드는 것이 가장 이상적입니다.
예) 홈페이지제작 I 반응형 홈페이지 만들기 I 사이트명
SEO/SNS공유 설명은 페이지를 설명하는 글을 간략하게 입력할수 있습니다. 검색결과의 제목 다음으로 노출됩니다.
SEO키워드는 쉼표로 키워드를 입력할 수 있습니다.
SNS공유 이미지는 사이트 SNS공유에 사용될 사이트를 대표할 이미지를 업로드하여 홍보효과를 높일 수 있습니다.
헤더코드는 헤더사이에 들어가는 메타코드를 입력합니다.
구글 및 다른 검색엔진에서 페이지 정보의 요약내용으로 보여지며, 구글 검색에서 결과 페이지 내용 미리보기로 사용 될 수 있으므로 정
확한 입력이 필요합니다.
예) Google 웹 마스터 도구 확인 메타태그
96	 웹사이트꼼꼼하게관리하기
SEO에 관한 자세한 안내사항은 [두부플러스 웹사이트> 매뉴얼> 검색엔진 최적화]를 참고하시기 바랍니다.
두부디스크e활용하기	 97
- 두부디스크e는 웹사이트 관리 및 업무용 데이터를 저장, 관리할 수 있는 웹클라우드 서비스입니다,
- 웹사이트 관리자와 방문자가 함께 사용도 가능하며, 웹사이트 방문자는 기본 익명 사용자로 사용하게 됩니다.
- 두부플러스에서는 파일 업로드 시 두부디스크를 사용하여 페이지의 이미지,동영상, 음악, 플래시를 업로드 할 수 있습니다.
01. 두부디스크e로 파일올리기
게시글 작성하기뿐만 아니라 회원에게 메일보내기에서도 동일하게 활용할 수 있습니다.
[운영모드> 회원관리> 메일관리> 메일보내기> 메일쓰기 파일올리기]
웹사이트> 게시판> 파일올리기
운영모드> 앱> 게시판> 파일올리기
웹사이트 게시판 에디터의 이미지, 동영상, 음악, 플래시의 아이콘을 클릭하여 파일 및 웹상 주소를 업로드 할 수 있습니다.
운영모드 게시판의 글쓰기를 통해 이미지, 동영상, 음악, 플래시의 첨부는 두부디스크를 활용하여 업로드 할 수 있습니다.
웹상에 있는 파일 주소를 가져와 붙여넣기를 하거나, 내 PC나 두부디스크e에 저장되어 있는 파일을 작업대기열로 불러와 업로드 할 수
있습니다.
두부디스크e 활용하기
98	 두부디스크e활용하기
02. 두부디스크로 업로드하기
웹상의 원하는 이미지를 찾은 후, 우클릭하여 이미지 주소를 복사합니다.
복사한 주소를 붙여넣은 후 체크버튼을 클릭하여 이미지를 확인합니다. 업로드 된 이미지는 추가버튼을 통해 저장할 수 있습니다.
(이와 동일한 방법으로 이미지, 동영상, 음악, 플래시를 업로드 할 수 있습니다)
우측에서 이미지의 정렬을 편집할 수 있습니다.
02-1. 웹주소로 업로드하기
두부디스크e활용하기	 99
02-2. 내 PC에서 업로드하기
업로드 버튼을 클릭 후 찾아보기를 클릭하여 내PC의 원하는 이미지를 선택하여 업로드 할 수 있습니다.
(이와 동일한 방법으로 이미지, 동영상, 음악, 플래시를 모두 업로드 할 수 있습니다)
작업대기열로 업로드 된 이미지는 아래 선택이미지로 옮긴 후 추가버튼을 클릭하여 게시판의 내용에 노출되게 합니다.
우측에서 이미지의 크기와 정렬, 회전방향을 편집할 수 있습니다.
100	 두부디스크e활용하기
03. 저장 후 웹사이트에 노출하기
두부에디터의 사용여부 설정은 [운영모드> 환경설정 > 웹사이트관리 > 웹사이트설정 > 텍스트에디터]에서
선택할 수 있습니다.
파일 좌상단의 아이콘이 표시되어야 웹사이트에 업로드할 수 있습니다.
작업대기열에 업로드 된 이미지를 아래의 선택대기열로 드래그앤드롭하여 옮긴 후 추가버튼을 클릭하면 게시판에 내용이 노출됩니다.
[두부디스크e]를 클릭하면, 두부디스크에 업로드 된 파일을 확인할 수 있습니다.
두부디스크e활용하기	 101
두부에디터(이미지에디터)는 이미지파일만 업로드 가능하고, 두부에디터(두부디스크연동)는 이미지, 동영
상, 음악, 플래시파일까지 업로드 가능합니다.
플랜5.
두부플러스
파워업
파워업에서는 방문자의 이탈율을 줄이고 웹사이트를 알차게 운영하실 수 있도록 안내해드립니다.
20년간 25만 개 이상의 웹사이트를 제작해 온 풍부한 디자인 제작경험과 노하우로 다양한 업종과 분야
의 고객들을 위한 업종/업태별 알맞는 컬러 찾기를 제공해드립니다.
또한 두부플러스에 대해 평소 궁금했던, 물어보기 어려웠던 질문들을 FAQ에서 확인하시기 바랍니다.
104	
업종/업태별 추천 컬러의 느낌은 개인적인 차이가 날 수 있으며, 밝고 어두움의 톤에 따라서도 컬러가 가지는 분위기는 달라집니다.
두부플러스에서 제공하는 디자인 제작서비스를 통해 전문적인 컬러상담을 받아보실 수 있으며, 기획서를 토대로 매칭된 컬러의 분위기
를 찾아 로고 및 웹사이트작업을 진행합니다.
업종/업태별 컬러 찾기
업종 컬러 컬러분위기
음식 / 식품 / 유흥
레저 / 여행 / 문화
빨강
식욕과 공복감을 느끼는색
열정, 에너지, 행복, 사랑, 생명력, 활발하고 적극적인 분위기
부동산 / 임대 / 대여
쇼핑 / 편의 / 생활 / 가정용품
학원 / 학교 / 교육
노랑
친근하고 쾌활, 발랄함, 희망적, 햇빛, 젊음, 즐거움, 따뜻함
밝고 싱싱한 분위기
용역 / 전문서비스 주황 조화로움, 이국적, 명랑하고 따뜻한 분위기
건강 / 의료 / 의약 초록
건강과 안정감, 신선함
블안감 해소, 온화하고 자연적인 분위기
건축 / 설비 / 건설 / 자재 / 금융 / 보험
무역 / 법률 / 산업 / 제조 / 철강
비즈니스 / 전기 / 전자 / 가전 / 보안
기계 / 전기 / 전자 / 가전 / 보안
파랑 지적인, 신뢰도높은, 안정적인, 차분한 분위기
광고 / 출판 / 미디어 / 이벤트 보라
크리에이티브적인 신비감
고급스러운 분위기
광고 / 출판 / 미디어 / 이벤트 분홍 로맨틱한, 여성적인 분위기
기관 / 단체 / 종교 / 철학
도서 / 인쇄 / 문구 / 사무
회색 종교적인, 지적인, 도시적인 분위기
인테리어 / 가구 갈색
익숙하고 편안한 느낌
자연에 가까운색, 전통적이고 침착한 분위기
기관 / 단체 / 종교 / 철학 / 이사
용역 / 대행 / 농수산 / 축산 / 임업
광업 / 컴퓨터 / 정보통신
흰색
평온함, 조화, 진실, 밝고 청결함
깨끗하고 자연스러운 심플한 분위기
미용 / 패션 / 잡화 검정
고급스러움, 럭셔리함, 세련됨
권위있는, 모던한, 강하고 중후한 분위기
105
업종과 분야에 따른 신뢰도 높은 컬러를 활용하여 방문자의 호감도를 높이고 웹사이트의 이탈율을 줄여 구매로 연결될 수 있는 컬러찾기
를 확인해 보시기 바랍니다.
컬러이미지
음식 관련 업체 및 활동성이 많은 업종에서 사용되며, 색이 강렬하고 자극적이기 때문에 포인트 컬러로도 사용된다.
또한 빨강은 물건에 비해 가격이 싸다는 느낌으로 충동구매가 유도된다.
눈에 잘 띄며, 시선을 집중시키는 색이다. 골드를 대변하여 부를 불러오는 색으로 알려져 있으며
따뜻한 색으로 느껴지기 때문에 어린이와여성을 대상으로 사용되며, 쇼핑몰에서도 많이사용한다.
24시간 이용할 수 있는 심야비지니스 업종의 느낌도 있다.
업종 불문하고 조화가 잘되는 색으로 이목을 끌며, 악센트색으로 부분 포인트 컬러로도 사용된다.
오렌지색의 사용은 적당한 값이란 느낌으로 부담없는 쇼핑이 가능하다.
건강 하면 떠오르는 색으로 신선도가 높은 음식과 업종, 커피숍, 서비스 관련 업종에 잘 어울리며
주목도가 뛰어나 홍보에 유리한 오래 기억되는 컬러이다.
또한 초록색은 편안한 쇼핑으로 구매에 대한 만족감을 부여해 준다.
첨단기술, 금융, 생활건강, 병원의 업종과 업태에서많이사용되는컬러이다.
그렇기 때문에 차분하고 냉정한 비교구매가 가능한 색으로 활용된다.
주얼리, 의류, 속옷 관련 소규모 판매업종에서 고급스러움을 나타낼 수 있으며,
빨강색의 변화와 파랑의 안정이 섞인 색으로 몽환적인 느낌을 나타낸다.
여성을 돋보이게 하는 색으로 피부마사지나 화장품, 때로는 건강을 부각시키는 색으로도 사용되며,
남성에게는 순간적인 매력과 기념적 축하, 이벤트성 컬러로 사용된다.
승복이나 수녀복이 회색이듯 회색은 억제를 부각시키는 색이며, 종교나 기관, 단체의 지적인 분위기를 나타낸다.
또한 새롭고 세련된 분위기의 연출로 쇼핑에 대한 기대감이 부여되는 색이다.
갈색은 원목의 느낌을 주기 때문에 가구에 많이 사용되며 여성보다는 남성이 시선을 주는 색이다.
상품과 매장에 신뢰감과 고급스러움을 부여하여 격조 높은 쇼핑을 가능하게 한다.
무난하게 많이 활용되나 자칫 차갑게 느껴지는 단점도 있다.
흰색은 부담이 없고 개방적인 쇼핑이 가능하다.
미용실, 명품에 많이 보이는 검정색은 피로를 덜어주고 흥분된 심리를 차분하게 해주는 컬러이다.
검정색에 포인트컬러로 흰색, 회색, 분홍을 덧대주면 산뜻하고 청결한 분위기를 자아낼 수 있으며
컬러의 이미지가 강해 구매심리를 억제시킬 수도 있다는 점을 조심해야 한다.
FAQ
두부플러스 FAQ를 통해 궁금증을 해결해보시기 바랍니다.
추가 문의사항은 유선 상담문의나 1:1 문의하기로 연락주시면 친절하게 답변해드립니다.
Q 두부플러스는 타사와 어떤점이 다른가요?
A1 외부 컨설턴트 없이 두부플러스 자사의 코딩, 디자이너가 1:1로 배치되어 고객님의 업종/업태에
따른 웹사이트를 전문적으로 기획 및 컨설팅하여 제작합니다.
A2 보다 체계적이고 효율적인 웹사이트 운영을 위해 안정적인 서버관리와 다양한 앱기능을 꾸준히
출시하고 있습니다. 신생기업들과 차별화된 20년 이상의 우수한 자사 기술력과 운영실적을 바
탕으로 운영되고 있으며, 25만건 이상의 웹사이트를 제작해온 풍부한 경험과 노하우를 바탕으
로 기업에 최적화된 웹사이트 제작대행이 가능합니다.
Q 웹사이트를 만들려고하는데, 어떤것부터 시작하면 좋을까요?
A 두부플러스 마스터 플랜의 STEP별 구성을 활용하여 단계별로 만드시는 것을 추천해드립니다.
디자인을 조금 더 차별화되게 하고 싶으시거나 전문가의 도움이 필요하시면 합리적인 가격으로
두부플러스 제작센터에서 웹사이트를 제작해 드립니다
Q 웹사이트 고유 도메인 주소를 사용하고싶습니다.
A 업그레이드해서 유료로 사용하시면 두부플러스 도메인을 고유주소로 사용하실 수 있습니다.
예) http://aaa.dubuplus.com -> http://aaa.com 으로 사용가능합니다.
Q 알림이 오지 않아요. 웹사이트에 문제가 있는걸까요?
A 알림이 오려면 우선 웹사이트에 두부캐쉬가 충전되어 있어야 합니다. 두부캐쉬는 유료서비스 및
SMS알림 등을 이용시 현금처럼 사용할 수있는 사이버머니입니다.
캐쉬충전을 먼저 확인해보시기 바랍니다.
FAQ
Q 두부플러스 이용 시 불편한 점은 어디에 문의해야 할까요?
A 인터넷 경로로는 1:1 문의란에 남겨주시거나, 이메일을 보내주시면 상담사가 회신을 드립니다.
유선으로 문의주실 때는 담당상담사에게 문의주시거나 고객센터로 연락주시면 친절하게 답변
해드립니다.
Q 사용하고 싶은 기능이 있는데 두부플러스에는 없는 것 같아요.
A 무료로 사용되는 앱의 기능 외에는 제작서비스를 통해 사용자의 웹사이트에만 맞춤형으로 제작
드리는 방법이 있습니다.
기능이 업그레이드되었으면 하거나 개선되었으면 하는 사항은 1:1 문의하기나 이메일로 내용을
보내주시면 최대한 반영이 가능하도록 검토하겠습니다.
Q 1:1 문의하기 답변은 어디에서 확인할 수 있어요?
A 마이페이지 1:1 문의하기를 통해 질문했던 내용은 고객센터 상담사가 유선으로 답변을 드리며,
유선으로 답변을 받으시기 어려운 경우 메일로 내용을 전달드립니다.
Q 웹사이트 접속이 안됩니다.
A1 사용기간이 경과한 웹사이트는 접속이 불가합니다.
결제 만료 이전에 계약연장 후 사용료를 납부해주시기 바랍니다.
A2 사용하고 계신 웹사이트의 인터넷이 불안정할 경우에도 접속이 불가합니다. 브라우저 상단> 인
터넷옵션> 임시인터넷파일 삭제를 해보시거나 모바일로 접속해보시기 바랍니다.
A3 두부플러스의 서비스점검이 진행중입니다.
보다나은 서비스 제공을 위해 새벽시간대에 정기적으로 웹사이트 점검을 진행하고있습니다.
해당 내용은 고객지원> 새소식 페이지에서 확인할 수 있습니다.
FAQ
Q 두부플러스의 제작서비스란 무엇인가요?
A 웹사이트를 스스로 제작하기 어렵거나 차별화된 웹사이트를 원하시는 분들을 위해 두부플러스
제작팀에서 1:1 상담을 통해 맞춤형 웹사이트를 제작해드립니다.
이미 웹사이트를 가지고 계신 고객님도 리뉴얼 제작을 맡기실 수 있으며, 제작 후에는 1:1 사후
서비스도 꾸준히 받으실 수 있습니다.
Q 두부플러스의 제작서비스는 어떻게 신청하나요?
A 인터넷 경로로 1:1 문의창에 남겨주시거나 이메일을 보내주시면 담당 상담사가 연락을 드립니
다. 고객센터로 연락을 주셔도 신청이 가능합니다.
Q 무료로 사용하는 웹사이트 제작과 유료로 사용하는 제작이 무슨 차이가 있을까요?
A 다년간 웹사이트 디자인을 제작해왔던 웹전문 디자이너가 업종/업태에 따라 차별화된 디자인을
제작하며, 고객을 사로잡는 구성으로 고객님의 웹사이트를 디자인 및 관리해 드립니다.
Q 두부플러스 웹사이트에서 사용하고 싶은 유료앱이 있는데 결제는 어떻게 하나요?
A 무료로 제공되는 앱 외에 추가적인 유료앱을 이용하시려면 두부플러스 사용을 유료로 전환하신
후 사용하고 싶은 앱을 월단위로 구매하시면 됩니다.
Q 두부플러스의 가입비용이나 제작비용을 알고싶어요.
A 가입비용은 별도로 없으며, 회원가입을 하시면 무료로 웹사이트를 사용하실 수 있습니다.
단, 프리미엄, 이커머스, 부킹으로 업그레이드 또는 디자인제작서비스는 별도의 비용이 발생됩
니다. 자세한 사항은 고객센터에 문의주시기 바랍니다.
FAQ
Q 유료제작서비스를 받으면 제작만 해주시는 건가요?
A 1:1 상담서비스로 두부플러스 전문 상담사가 관리자님의 웹사이트를 사후에도 관리해드립니다.
페이지 디자인부터 사후 상담서비스까지 편리한 맞춤형 관리서비스를 경험해보시기 바랍니다.
Q 웹사이트 하단에 두부플러스 광고를 삭제하고싶습니다.
A 업그레이드해서 유료로 사용하시면 두부플러스 광고 삭제 후 사용할 수 있습니다.
Q 웹사이트의 계약기간이 지나면 접속이 중단되나요?
A 계약기간이 지난 후 웹사이트는 차단되며, 관리자로 로그인 시 서비스 기간이 만료되었다는 메
시지가 노출됩니다. 계약만료기간 30일, 15일, 7일, 1일 이전에 사용자님께 메일 및 SMS로 만
료예정 안내를 전달드리고 있으므로 계약기간 이전에 계약연장 후 사용료를 납부하시면 이용이
가능합니다. 안정적인 웹사이트를 위해 계약기간 이전에 계약연장을 진행하시기 바랍니다.
Q 웹사이트를 임시로 중단하고 싶은데 어떻게 해야하나요?
A 제작서비스 기간은 중단되지 않으나 웹사이트는 임시페이지가 노출되도록 설정할 수 있습니다.
[운영모드> 환경설정> 웹사이트노출> 노출안함] 체크하시면 됩니다.
Q 두부플러스 상품결제 시 좀 더 할인된 가격으로 이용하려면 어떻게 해야 하나요?
A 두부플러스 계정업그레이드나 앱구매 시 자동결제를 신청하시면 할인된 금액으로 이용할 수 있
습니다. 계정업그레이드는 자동결제 또는 일반결제로 구매할 수 있으며, 자동결제 주기는 연간
또는 월간으로 선택할 수 있습니다. (월간자동결제, 연간일반결제, 연간자동결제가 가능하며, 연
간자동결제 시 최대 20% 할인) 앱구매는 월간 자동결제로만 구매가 가능합니다.
* 본 [두부플러스 마스터플랜] 내용의 무단전재를 금하며, 가공/인용할 때에는 반드시 출처를 밝혀주시기 바랍니다.
* 두부플러스 기능의 상세한 설명 및 포트폴리오는 http://master.dubuplus.com/ 을 참고하시기 바랍니다.
* 두부플러스 사용에 대한 문의는 아래의 연락처로 문의 바랍니다.
두부플러스 고객센터
Tel 02-6901-6403 Fax 02- 6927-2691 Mail webmaster@dubuplus.com
Adress 121-734 서울특별시 마포구 마포대로 4다길 41(마포동, 마포타워빌딩) 2층 ㈜예스콜닷컴
이용가이드ㅣ마스터플랜ㅣ 2018년 06월 01일 VER

More Related Content

Similar to Dubuplus guide

투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드병수 김
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용승원 서
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4Usys4u
 
Web Plan1 4
Web Plan1 4Web Plan1 4
Web Plan1 4juhyun
 
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blogSue Hyun Jung
 
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4UiOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4Usys4u
 
왜 워드프레스인가
왜 워드프레스인가왜 워드프레스인가
왜 워드프레스인가bh Kyung
 
네이버modoo[모두] 모바일로제작하기 김현희 강사
네이버modoo[모두] 모바일로제작하기 김현희 강사네이버modoo[모두] 모바일로제작하기 김현희 강사
네이버modoo[모두] 모바일로제작하기 김현희 강사현희 김
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4Usys4u
 
iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto LayoutEunjoo Im
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4Usys4u
 
월간 IM 6월호 기고문
월간 IM 6월호 기고문 월간 IM 6월호 기고문
월간 IM 6월호 기고문 Hoya Kim
 
SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)Youngbin Han
 
09_business blog marketing case
09_business blog marketing case 09_business blog marketing case
09_business blog marketing case websmedia
 
iOS Human Interface Guidlines #10_SYS4U
iOS Human Interface Guidlines #10_SYS4UiOS Human Interface Guidlines #10_SYS4U
iOS Human Interface Guidlines #10_SYS4Usys4u
 

Similar to Dubuplus guide (20)

투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드
 
Clippingmini
ClippingminiClippingmini
Clippingmini
 
Jinyweb
JinywebJinyweb
Jinyweb
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용
 
Ia
IaIa
Ia
 
Hellotutorial
HellotutorialHellotutorial
Hellotutorial
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
 
Web Plan1 4
Web Plan1 4Web Plan1 4
Web Plan1 4
 
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
 
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4UiOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4U
 
왜 워드프레스인가
왜 워드프레스인가왜 워드프레스인가
왜 워드프레스인가
 
네이버modoo[모두] 모바일로제작하기 김현희 강사
네이버modoo[모두] 모바일로제작하기 김현희 강사네이버modoo[모두] 모바일로제작하기 김현희 강사
네이버modoo[모두] 모바일로제작하기 김현희 강사
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4U
 
iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto Layout
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4U
 
월간 IM 6월호 기고문
월간 IM 6월호 기고문 월간 IM 6월호 기고문
월간 IM 6월호 기고문
 
SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)
 
09_business blog marketing case
09_business blog marketing case 09_business blog marketing case
09_business blog marketing case
 
iOS Human Interface Guidlines #10_SYS4U
iOS Human Interface Guidlines #10_SYS4UiOS Human Interface Guidlines #10_SYS4U
iOS Human Interface Guidlines #10_SYS4U
 

Dubuplus guide

  • 1. 두부플러스 이용가이드 두부플러스 마스터플랜 www.dubuplus.com 웹사이트 제작은 쉽게, 사이트 운영은 편리하게, 두부플러스를 활용하여 웹사이트 만들기
  • 2.
  • 3. INDEX Plan01.두부플러스워밍업 두부플러스소개 두부플러스구조 두부플러스페이지구조 웹사이트화면구성 두부플러스기능용어설명 Plan02.두부플러스밸런스업 웹사이트만들기STEP별구성 회원가입및기본정보설정하기 페이지생성하기 서브컨텐츠만들기-1텍스트 서브컨텐츠만들기-2이미지 서브컨텐츠만들기-3동영상 서브컨텐츠만들기-4지도 서브컨텐츠만들기-5소스코드 게시판생성하기 페이지에연결하기 메인페이지구성하기-1로고 메인페이지구성하기-2슬라이드쇼 메인페이지구성하기-3팝업 메인페이지구성하기-4슬라이더갤러리 모바일웹사이트편집하기 Plan03.두부플러스초이스업 문자상담 퀵메뉴 소셜스트림 숙박예약 쇼핑몰 Plan04.두부플러스레벨업 웹사이트꼼꼼하게관리하기 두부디스크e활용하기 Plan05.두부플러스파워업 업종/업태별컬러찾기 FAQ p03 p04 p06 p08 p12 p22 p24 p33 p35 p37 p38 p39 p40 p41 p47 p48 p50 p52 p54 p57 p60 p62 p64 p68 p77 p90 p97 p104 p106 * 두부플러스 마스터플랜은 웹사이트제작에 꼭 필요한 기능 위주로 설명되어있습니다. 기능 상세설명은 [두부플러스 웹사이트> 매뉴얼] http://master.dubuplus.com을 참고해주시기 바랍니다.
  • 4. 플랜1. 두부플러스 워밍업 두부플러스는 포토샵과 코딩이 필요없이 운영모드와 디자인편집 기능으로 웹사이트와 모바일사이트를 한 번에 제작할 수 있도록 구성되었습니다. 워밍업에서는 두부플러스를 처음 사용하시는 사용자를 위해 웹사이트 구조와 메인페이지와 서브페이지 구성화면을 상세하게 설명해드립니다. 운영자의 편리성을 담은 운영모드와 디자인활용도가 높은 디자인편집 용어를 확인하셔서 두부플러스를 시작하시고 사용하시는 데 손쉽게 활용하시기 바랍니다.
  • 5. 두부플러스소개 3 두부플러스 소개 두부플러스에서 웹사이트를 제작하면 모바일과 PC에서 동시에 노출되며 한 번의 제작으로 모바일컨텐츠까지 유용하게 사용하실 수 있습니다. 기업홍보용 웹사이트뿐만 아니라 장바구니와 결제시스템(PG)을 장착하여 쇼핑몰과 숙박예약과 같은 다양한 웹사이트를 제작하실 수 있습니다. 클릭만으로 쉽게 제작하는 빌더 코딩할 필요없이 반응형 웹사이트를 만들 수 있습니다. 드래그 앤 드롭으로 기술적 지식 없이도 세련되고 전문적인 웹사이트를 쉽게 만들 수 있습니다.
  • 6. 두부플러스 구조 디자인편집 디자인편집에서는 사용자가 직접 레이아웃을 만들고 요소와 앱을 추가하여 컨텐츠를 구성할 수 있습니다. 웹사이트의 메인 페이지와 서브 페이지를 만들 수 있으며 코딩과 포토샵 없이 마우스 드래그 앤 드롭으로 편리하게 디자인 제작이 가능하 도록 구성된 화면입니다. 웹사이트에 구성할 요소들을 충분히 생각해 보신 후 기본적으로 사이트에 꼭 필요한 텍스트, 이미지 등을 추가하시기 바랍니다. 기본 구성을 생각하셨다면, 좌측의 앱과 요소를 디자인할 수 있는 우측 섹션으로 드래그하여 원하는 위치에 드롭 후 컨텐츠의 설정에 따 라 디자인하며 편집할 수 있습니다. 쇼핑이나 숙박 예약 앱으로는 판매와 예약이 가능한 웹사이트를 구성할 수 있으며, 문자상담과 소셜스트림 앱을 통해서는 숙박예약 고객 과 소통이 가능한 웹사이트를 구현할 수 있습니다. 두부플러스의 디자인편집은 미리보기가 가능하며, 작업한 화면이 그대로 나의 사이트로 반영되기 때문에 보기 쉽고 사용하기 편리한 장 점이 있습니다. 두부플러스로 웹사이트를 만들려면, 디자인편집과 운영모드의 주요기능을 다룰 줄 알아야 합니다. 4 두부플러스구조
  • 7. 두부플러스구조 5 운영모드 운영모드는 관리자가 웹사이트를 운영하기 위해 필요한 관리 및 환경설정을 포함하고 있습니다. 게시글 및 정보를 기록하고 회원을 관리할 수 있는 환경설정과 회원관리, 웹사이트의 인기 있는 페이지와 이전 접속경로를 확인할 수 있 는 로그분석이 가능한 통계, 웹사이트 페이지마다 다양한 스타일로 글과 사진을 등록 및 관리할 수 있는 게시판, 이 외 쇼핑몰 사용자를 위 해 상품관리, 주문관리, 마켓관리 기능도 구성되어 있습니다. 다양한 기능을 가진 앱들과 운영모드의 세부 내용은 웹사이트를 만들고 난 후에도 지속적으로 확인이 필요한 부분입니다. 손에 익도록 하고 눈에 익히셔서 운영과 정보관리에 편리하고 스마트하게 이용하시기 바랍니다. 우상단의 디자인편집 버튼을 클릭하면, 디자인편집 페이지로 이동되며, 내 아이디를 클릭하면 나의 사이트로 바로가 기나 로그아웃을 할 수 있습니다. 버튼은 두부플러스를 사용하시다가 궁금한 점을 바로 확인할 수 있는 고객지원센터 페이지로 이동됩니다. 템플릿으로 디자인하여 웹사이트를 만드는 것은 누구나 쉽게 할 수 있지만 웹사이트를 방문자가 편리하게 이용하려면, 관리자가 운영모 드의 세부내용에 대해 상세하게 정보를 입력해야 합니다. 운영모드를 스마트하게 활용하신다면, 조금 더 안정적이고 전문적인 웹사이트를 구현하실 수 있습니다. 이에 두부플러스에서는 사용자의 편의와 웹사이트를 통한 매출증대를 위해 꾸준한 기능업데이트를 진행하고 있습니다. 실제 코딩이나 포토샵을 다루지 못해도 손쉽게 웹사이트를 제작할 수 있도록 구성되어 있습니다.
  • 8. 6 두부플러스페이지구조 두부플러스 페이지구조 두부플러스는 갯수 제한없이 3Depth까지 페이지(메뉴)를 생성할 수 있으며, 설정된 페 이지는 [디자인편집>요소>네비게이션]에 노출됩니다.
  • 11. 웹사이트메인화면구성 9 방문자가 웹사이트 주소를 클릭 후 처음 보게 되는 화면인 메인페이지를 완성도 있게 디자인 한다면,방문자의 웹 사이트 이탈율을 보다 많이 줄일 수 있습니다. 메인페이지의 완벽한 구성을 두부플러스에서 소개해 드립니다. 1 로고, 상징의 중요성 로고는 웹사이트의 분위기, 형태를 압축하여 나타낼 수 있는 함축적이고 상징적인 이미지입니다. 최근 들어 웹사이트의 로고를 [메인 페이지로 바로가기] 버튼으로 많이 사용하는데, 방문자가 웹사이트에서 로고를 가장 많이 보 고 가장 많이 클릭한다는 점을 확인할 수 있습니다. 그러므로 로고를 단순한 텍스트로 만들어 사용하는 것보다는 사이트 방문자에게 각인시킬 수 있는 색채와 폰트로 제작한다면 기 억도가 높아질 수 있습니다. 2 상단 메뉴 및 내비게이션 header의 상단 메뉴는 웹사이트의 최상단 위치 부분으로 홈, 로그인, 사이트맵을 노출할 수 있으며, 내비게이션은 서브 페이지로 이동할 수 있는 메뉴의 이름이 노출됩니다. 3 한눈에 웹사이트의 분위기를 파악할 수 있는 이미지 슬라이드쇼 웹사이트를 처음 방문하면 가장 먼저 눈에 띄는 이미지가 메인 슬라이드쇼입니다. 여러 장의 의미 있는 이미지를 슬라이드 형식으 로 보여줌으로써 해당 웹사이트 방문자가 어떤 사이트인지 한눈에 알아볼 수 있습니다. 추가적으로 이미지 위에 텍스트 요소를 추가하여 세부 설명을 기입한다면 웹사이트의 슬라이드쇼 효과는 플러스 됩니다. 4 메인 컨텐츠 메인 페이지에 컨텐츠가 노출되는 부분입니다. 디자인 편집의 요소와 앱을 메인 컨텐츠 섹션에 추가하거나 게시판과 쇼핑, 숙박예약앱에서 메인 페이지에 노출하기를 사용하여 노출하고 싶은 정보를 손쉽게 소개할 수 있습니다. 5 모아진 후기를 한 번에 확인하는 소셜 스트림 여기저기 흩어져 있는 다양한 소셜미디어의 후기 정보를 한 번에 모아 페이지에서 노출합니다. 방문자는 모아져 있는 소셜미디어를 통해 손쉽게 웹사이트의 모든 후기 정보를 확인할 수 있습니다. 6 하단 메뉴 웹사이트 최하단에 노출되는 footer정보로 웹사이트 운영에 필요한 정보가 하단에 노출됩니다. 7 활발한 홍보활동, 팝업 팝업을 통해 방문자에게 중요한 공지나 이벤트를 알림으로써 웹사이트의 홍보 및 마케팅을 강화할 수 있습니다. 이로 인해 매출을 증대시킬 수도 있으며, 홍보와 이벤트가 활성화 된 웹사이트라는 인식 또한 심어줄 수 있습니다. 설정을 통해 PC나 모바일에 각각 노출이 가능하고, 노출 기간 또한 설정할 수 있으므로 선택적인 홍보활동이 가능합니다.
  • 12. 10 웹사이트서브화면구성 웹사이트 서브화면구성 1 서브페이지 레이아웃 메인페이지와 차별점을 주어 서브페이지 별로 레이아웃을 다르게 설정할 수 있습니다. 상단메뉴를 클릭 후 하위메뉴인 서브페이지로 이동되면, 서브페이지의 내용에 따라 레이아웃의 디자인을 설 정하여 세세한 디자인까지 신경 쓰는 특별한 웹사이트를 구성하실 수 있습니다. 2 상단 메뉴 및 내비게이션 웹사이트에서 부각시켜야 할 문의, 상담, 예약 등의 관리자가 노출하고 싶은 주요 기능을 보여줍니다. 퀵메뉴는 메인페이지에서도 서브페이지에서도 노출되기 때문에 방문자가 웹사이트에서 헤매지 않고 빠르게 컨텐츠를 찾을 수 있도록 도움을 줍니다. 웹사이트의 세부적인 내용을 메인페이지나 하나의 페이지에 모두 담는다면, 정보의 양이 너무 많아 방문자가 찾고싶은 내용을 쉽게 찾기 어려울 것입니다. 1 3
  • 13. 웹사이트서브화면구성 11 상단메뉴의 하위메뉴인 서브페이지를 구성한다면, 주제별로 컨텐츠를 활용할 수 있습니다. 3 서브페이지 하위메뉴와 서브컨텐츠 메인페이지의 상단메뉴를 클릭하면 하위메뉴인 서브페이지로 이동됩니다. 페이지설정에서 페이지의 메뉴명과 메뉴순서를 설정할 수 있으며, 사이트의 용도에 따라 페이지를 연결할 앱 을 선택할 수 있습니다. 앱은 메인페이지, 게시판, 소스코드, 서브컨텐츠, 소셜스트림, 쇼핑, 숙박예약, 외부주소로 연결이 가능하며, 선택된 APP의 컨텐츠가 서브컨텐츠에 노출됩니다. 4 페이지 경로 현재 화면에 보여지는 페이지의 이동 경로를 확인할 수 있습니다. 2 4
  • 14. 12 두브플러스기능용어설명 두부플러스 기능용어설명 디자인편집구성 1 • : 운영모드로 이동 •레이아웃: 디자인편집의 현재페이지 명칭 •페이지 : 페이지(메뉴)만들기로 이동 •앱: 나의 앱으로 이동 2 •요소추가 : 웹사이트를 구성하는 다양한 요소 및 앱 을 마우스로 드래그하여 설정 •섹션추가 : 섹션을 열(Colum)로 구분 •디자인 : 템플릿 변경 및 폰트 설정 •전체설정 : 전체 레이아웃 영역 설정 3 •소스편집 : Code Editor로 코딩 •미리보기 : 현재 편집 중인 화면 미리보기 •환경설정 : [운영모드> 환경설정> 기본정보] 페이지 로 이동 •도움말 : 튜토리얼과 가이드보러가기로 이동 •나의 사이트 : 현재까지 작업한 나의 사이트를 웹상 으로 확인 4 PC, 태블릿, 모바일 미리보기버튼을 통해 나의 사이트 화면 확인 5 •Undo : 이전작업환경으로 되돌리기 •Redo : 이전에서 이후 작업환경으로 되돌리기 •저장목록 : 저장목록 불러오기. •저장 : 변경사항 저장 •게시하기 : 마지막 작업환경 저장 및 사이트 적용 1 2 3
  • 15. 두브플러스기능용어설명 13 레이아웃구성 4 5 두부플러스는 디자인편집의 레이아웃을 통해 요소 및 앱을 활용하여 웹사이트를 쉽고 편리하게 디자인 할 수 있습니다. ※ 저장과 게시하기 버튼을 누르지 않으면, 이전 작업 환경은 저장되지 않습니다. mobile_header: 모바일에서 보여지는 Header 부분이며, 모든 페이지에 노출됩니다. Mobile_Header는 삭제할 수 없습니다. header: 모든 페이지에 노출됩니다. 일반적으로 로고, 메뉴가 포함됩니다. content: 웹사이트의 컨텐츠가 포함되는 부분입니다. footer: 모든 페이지에 노출됩니다. 일반적으로 연락처, 소셜아이콘, 카피라이터가 포함됩니다.
  • 16. 14 두브플러스기능용어설명 텍스트요소 6 7 6 텍스트요소 설명 •제목 : 타이틀 글자(텍스트)를 입력할 수 있습니다. •단락 : 제목의 자세한 설명을 넣어 사용자들에게 정보를 쉽게 전달할 수 있습니다. 7 텍스트 EDIT •스타일 : 텍스트의 스타일을 제목 / 페이지제목 / 본문 등으로 지정하여 입력하면, 장애인들이 스크린리더기를 사용하여 글을 읽을 때 문장의 구조를 확인하며 텍스트를 읽을 수 있습니다. •폰트 : 다양한 글씨체를 제공합니다. •크기 : 텍스트 기준 크기에서 수치 만큼의 배수로 작아지거나 커집니다. •텍스트를 굵게, 기울임꼴, 밑줄, 취소선, 색변경, 색강조, 줄맞춤, 들여쓰기, 내어쓰기가 가능합니다.
  • 17. 두브플러스기능용어설명 15 미디어요소 8 8 미디어요소 설명 •이미지 : 원하는 이미지를 삽입할 수 있습니다. •동영상 : 원하는 동영상을 URL로 입력 / 소스코드로 입력하여 연결합니다. •코드셀 : 소스코드를 삽입할 수 있습니다. •SNS공유 : 웹사이트방문자가 SNS 계정에 컨텐츠를 공유할 수 있는 기능입니다. 페이스북, 트위터, 밴드, 카카오톡, 카카오스토리, 구글플러스, 핀터레스트, 라인 등이 제공됩니다.
  • 18. 16 두브플러스기능용어설명 구성요소 9 10 6 구성요소 설명 로고 : 이미지형, 텍스트형으로 로고를 설정할 수 있습니다. 상단메뉴 : 웹사이트의 최상단으로 홈, 로그인, 사이트맵을 노출합니다. 하단메뉴 : 웹사이트의 최하단에 노출되는 정보로 [운영모드> 환경설정> 운영정책관리]의 내용이 보여집니다. 네비게이션 : 페이지(메뉴)가 노출됩니다, 하단주소 : 하단주소의 정보는 [운영모드> 환경설정> 사이트관리> 기본정보]의 저장된 내용으로 노출됩니다. 카피라이터 : 웹사이트 개설년도와 사이트명이 안내됩니다. 예) Copyright ⓒ 웹사이트 개설년도 기업명. All rights reserved. Powered by dubuplus.com
  • 19. 두브플러스기능용어설명 17 앱설명 10 회원관리 : 회원제로 운영되는 웹사이트의 경우, 메인 또는 서브 디자인에 로그인 창을 노출할 수 있습니다. 게시판 : 유형별 게시판을 삽입하여 노출할 수 있습니다. 슬라이드쇼 : 메인이미지로 많이 사용되며, 여러 이미지들을 슬라이드하여 보여줍 니다. 지도 : 구글, 네이버, 다음 지도를 활용하여 지도를 생성할 수 있습니다. 카운터 : 웹사이트 방문자수를 노출시킬 수 있는 기능입니다. 슬라이더갤러리 : 숙박사이트의 객실안내에서 많이 사용되며, 슬라이드쇼처럼 이미지 이동이 가능하고, 슬라이더 메인이미지와 서브이미지들이 썸네일 형 태로 동시에 노출됩니다. 문자상담 : 실시간으로 고객과 메시지를 주고 받을 수 있는 기능입니다. 검색 : 웹사이트 내 검색을 할 수 있는 앱으로 쇼핑상품 검색시 많이 사용됩니다. 소셜스트림 : 다양한 소셜미디어(NAVER BLOG, YOUTUBE, INSTAGRAM 등)에 업로 드된 내용을 웹사이트 한 페이지에 모아 노출 및 운영할 수 있습니다. 숙박예약 : 숙박사이트를 운영하는 사용자를 위한 특화된 앱으로 숙박예약의 객실안내 를 설정할 수 있습니다. 예약검색 : 웹사이트의 숙박예약을 조건에 맞게 검색하여 보다 편리하게 예약 및 상세 검색이 가능합니다. 쇼핑 : 쇼핑몰을 운영하는 사용자를 위한 특화된 앱으로 웹사이트에서 판매할 상품을 노출합니다.
  • 20. 18 두브플러스기능용어설명 세부설정설명 11 11 •표시/숨김 : 클릭되어 있는 디바이스에만 노출됩니다. •높이 : 사이즈나 단위별로 지정된 높이에 활성화됩니다. •정렬 : 왼쪽, 오른쪽, 가운데정렬로 맞춰집니다. •패딩 : 설정영역의 안쪽 여백을 조정합니다. •마진 : 설정영역의 바깥쪽 여백을 조정합니다. •배경색 : 설정영역의 배경색상을 설정할 수 있습니다. •테두리선 : 설정영역 테두리의 굵기, 선종류, 선위치를 조절하고 색상을 설정할 수 있습니다. •박스라운드 : 설정영역의 테두리를 둥글게 합니다. •배경이미지 : 배경에 이미지를 추가합니다. •애니메이션 : 첫 등장 효과를 설정합니다. •앵커 : 앵커 지점을 설정합니다
  • 21. 두브플러스기능용어설명 19 아이콘설명 12 12 디자인편집의 요소들을 드래그 앤 드롭 방식으로 원하는 섹션/컨텐츠에 추가할 수 있습니다. 섹션/컨텐츠에 추가한 요소는 이동버튼을 통해 위치를 옮길 수 있습니다. 삭제버튼으로 삭제가 가능합니다. 설정버튼으로 셋팅된 기본설정을 수정하여 디자인편집을 활용할 수 있습니다.
  • 22.
  • 23. 플랜2. 두부플러스 밸런스업 웹사이트를 제작하기에 앞서 두부플러스에서 계정생성을 하고 사이트에 필요한 페이지를 생성합니다. 페이지는 서브페이지를 이어주는 매개체가 됩니다. 서브페이지에서는 서브컨텐츠와 게시판을 활용하여 상세한 설명이 가능하기 때문에, 여러 페이지를 생성하여 페이지별 주제에 맞는 컨텐츠를 작성하는 것이 가장 좋은 방향입니다. 한 서브페이지에 모든 컨텐츠를 담게 된다면 페이지의 내용이 많아져 방문자의 가독성이 떨어지며, 스크 롤을 계속 내리며 컨텐츠를 확인해야 하는 단점이 있습니다. 서브페이지를 완성하셨다면, 웹사이트의 얼굴인 메인페이지를 주목도 있게 구성하시기 바랍니다. 메인페이지에 꼭 필요한 요소와 앱을 확인하셔서 이탈율이 적고 매출이 올라가는 메인페이지를 만드실 수 있습니다.
  • 24. 22 웹사이트만들기STEP별구성 웹사이트 만들기 STEP별 구성 두부플러스 마스터 플랜에서는 웹사이트 구조 및 웹사이트를 만드는 STEP별 구성을 알아볼 수 있으며, 앱과 요소, 두부플러스 기능 및 환경의 상세 설명은 [두부플러스 웹사이트> 매뉴얼] http://master.dubuplus.com에서 확인이 가능합니다. STEP 03 07~ 서브컨텐츠만들기 (텍스트/이미지/ 동영상/지도/ 소스코드) 운영모드>앱>서브컨텐츠 STEP 01 기본정보입력 운영모드>환경설정 STEP 02 페이지생성하기 디자인편집>페이지 STEP 08 게시판생성하기 운영모드>앱>게시판
  • 26. 24 웹사이트만들기STEP별구성 STEP01. 계정생성 및 기본정보 설정하기 - 두부플러스에서 웹사이트를 제작하려면, 제일 먼저 계정생성 후 기본정보를 설정해야 합니다. - 해당정보의 아이디를 바탕으로 도메인이 생성되며, 웹사이트의 개설까지 마스터플랜을 따라오신다면 쉽고 빠르게 웹사이트를 만드실 수 있습니다. 01. 계정생성하기 01-1. 계정정보 입력 및 이메일 인증하기 두부플러스(http://dubuplus.com) 메인페이지의 시작하기를 클릭하여 정보를 입력합니다. 만약 Facebook, KakaoTalk, Naver, Google과 같은 SNS 계정이 있다면, 별도의 입력 없이도 계정을 생성할 수 있습니다. 계정 정보 입력 후, 계정 생성을 클릭하면, 등록한 이메일로 인증 메일이 발송됩니다. 이메일 주소와 아이디는 생성 후 변경할 수 없습니다.
  • 28. 26 웹사이트만들기STEP별구성 01-2. 상품 선택 및 결제하기 이메일 인증이 완료되면 Free, Basic, Premium, E-Commerce, Booking 중 업종에 맞는 상품을 선 택하여 시작하기를 클릭합니다. 두부플러스는 계정 생성 단계에서 무료 또는 유료를 선택하거나 무료로 셋팅 후, 유료로 업그레이드하 여 사용할 수도 있습니다. 유료 상품의 경우 결제는 신용카드, 실시간 계좌이체, 무통장입금(가상계좌) 중 선택 가능하며, 결제기 간(월/년 단위) 및 결제방식(자동결제/일반결제)도 선택할 수 있습니다. 1년 자동결제를 선택하는 경우, 20% 할인된 가격으로 이용할 수 있습니다.
  • 29. 웹사이트만들기STEP별구성 27 01-3. 템플릿 선택하기 상품 선택 및 결제를 완료하면 두부플러스에서 제공하는 웹사이트의 템플릿을 선택하여 웹사이트 제작을 시작 할 수 있습니다. 템플릿은 [디자인편집> 디자인> 템플릿 변경]에서 언제든 변경이 가능하며, 탬플릿 만들기를 통해 새로운 템 플릿을 만들 수도 있습니다. 템플릿까지 선택했다면, 계정 생성이 완료됩니다. 템플릿 미리보기로 디자인을 확인해보세요.
  • 30. 28 웹사이트만들기STEP별구성 디자인편집> [x]> 운영모드 이동 계정생성을 완료하면, 두부플러스에서는 사용자가 웹 사이트의 화면을 디자인할 수 있는 디자인편집 화면으 로 자동이동 됩니다. 디자인편집의 튜토리얼 가이드를 확인하신 후 , 좌측 상단의 [x]버튼을 클릭하면 두부플러스 운영모드 로 이동할 수 있습니다. * 두부플러스에서 웹사이트를 처음 사용하는 사용자분들은 [운영모드> 환경설정]으로 이동하여 마스터플랜의 STEP별 가이드에 따라 웹사이트 운영에 필요한 정보를 입력하시기 바랍니다. * 이미 웹사이트 관리의 기본정보를 입력한 사용자분들은 STEP02의 [디자인편집> 페이지]를 클릭하시기 바랍니다. 두부플러스 디자인편집은 웹사이트의 디자인을 구성하며, 디자인편집의 튜토리얼을 통해 사용방법을 익히실 수 있습니다.
  • 32. 30 웹사이트만들기STEP별구성 운영모드> 환경설정> 사이트관리> 기본정보 사이트관리에서 기본정보의 계정정보, 기업정보 내용 등을 입력 후 저장합니다. 환경설정에서는 웹사이트 운영에 필요한 기본정보를 입력할 수 있으며 사이트설정 및 도메인설정, 하드용량 등을 체크할 수 있습니다. 02. 환경설정하기 02-1. 기본정보 설정하기 기본정보 및 계정정보는 웹사이트 정보로 노출되며, 상업적 목적으로 웹사이트 구축 시 필수적으로 노출해야 합니다.
  • 33. 웹사이트만들기STEP별구성 31 운영모드> 환경설정> 사이트관리> 도메인 설정 02-2. 도메인 설정하기 도메인은 웹사이트의 주소로 도메인을 통해 관리자 및 방문자가 해당 웹사이트에 접속할 수 있습니다. 대표도메인은 1개로 설정할 수 있으며, 서브도메인은 최대 3개까지 설정이 가능합니다. 도메인 생성 후, 인터넷 주소창에서 웹사이트의 도메인 주소를 입력하여 검색해 보시기 바랍니다. 도메인 설정은 유료 업데이트 후 사용할 수 있습니다. 기존 보유하고 계신 도메인이 있을 경우, 네임서버를 두부플러스 정보로 변경 후 입력하시면 사용이 가능합 니다. 두부플러스의 네임서버는 [운영모드> 환경설정> 도메인설정> 도움말]에서 확인이 가능합니다,
  • 34. 32 웹사이트만들기STEP별구성 일반적으로 상단메뉴, 네비게이션은 웹사이트 구성 윗부분 [Header] 에 위치하며, 하단메뉴는 최하단 [Footer]부분에 위치합니다. 일반적으로 [디자인편집> 레이아웃]의 [header] 영역에는 상단메뉴, 로고, 네비게이션이 위치하며, [footer] 영역에는 하단메뉴, 하단주소, 카피라이터가 위치합니다. 03. 디자인편집으로 웹사이트에 상단메뉴, 하단메뉴 노출하기, 네비게이션 노출하기 디자인편집> 구성요소> 상단메뉴, 하단메뉴, 네비게이션 1 드래그앤드롭으로 원하는 위치에 상단메뉴, 하 단메뉴, 네비게이션 요소를 추가할 수 있습니 다. 2 설정을 클릭하여 원하는 정보와 메뉴의 노출여 부를 수정할 수 있습니다. 상단메뉴의 메뉴 설정은 편집을 통해 메뉴 정보 의 추가와 삭제, 편집이 가능하며, 하단메뉴 또 한 정보설정으로 노출하고 싶은 정보들을 선택 적으로 편집이 가능합니다. 네비게이션의 경우, 글꼴 설정이 가능합니다. 3 저장 및 게시하기 버튼을 클릭 후 미리보기 버 튼과 나의 웹사이트 버튼을 클릭하여 디자인편 집 작업 후 적용된 화면을 확인할 수 있습니다. 1 2 3 설정에서는 표시/숨김으로 클릭되어 있는 디바이스의 노출 여부를 결정할 수 있고, 높이나 정렬, 패딩, 마진,배 경색, 테두리선과 테두리 박스의 라운드 처리, 배경이미 지 등록, 애니메이션, 앵커의 설정을 조절 선택할 수 있습 니다. 해당 설정부분은 모든 요소와 앱에서 설정이 가능 합니다.
  • 35. 웹사이트만들기STEP별구성 33 STEP02. 페이지 생성하기 01. 기본페이지 설정하기 디자인편집> 페이지> 기본페이지 - 페이지는 생성 후 웹사이트 메인페이지와 서브페이지 [header] 부분에 노출됩니다. - 기본페이지는 [디자인편집> 구성요소> 상단메뉴 또는 하단메뉴]의 적용된 부분에 노출됩니다. - 페이지만들기는 선택한 APP으로 페이지가 연결되며, 페이지이름이 메뉴바형태로 웹사이트에 노출됩니다. [디자인편집> 구성요소> 네비게이션]에서 확인할 수 있습니다. 기본페이지 설정은 홈, 로그인, 웹사이트맵, 마이페이지와 같은 상단메뉴와 개인정보처리방침, 이용약관 등 하단메뉴를 설정하는 작업으 로 페이지의 이름 확인 및 수정 후 APP스킨, 타겟, 페이지레이아웃, SEO 설정 내용 입력 후 저장합니다. SEO주소, 타이틀, 키워드, 설명은 검색엔진과 브라우저에 노출되기 때문에 페이지 내용을 정확하게 요약하 여 입력해 주시기 바랍니다. [두부플러스 마스터플랜> Plan 04. 두부플러스 레벨업> 웹사이트 꼼꼼하게 관 리하기] 참조.
  • 36. 34 웹사이트만들기STEP별구성 페이지만들기에서는 메뉴바에 작성될 페이지이름(메뉴명)을 입력합니다. +페이지추가 버튼을 클릭하여 생성된 페이지의 이름을 입력합니다. 두부플러스의 페이지는 최대 3Depth까지 설정할 수 있 으며, 생성 개수는 제한이 없습니다. 여러 페이지를 만드신 후 숨김버튼을 클릭하여 비활성 화 할 수 있으므로 웹사이트에 맞는 페이지를 생성해 보 시기 바랍니다. APP선택은 [서브페이지와 게시판을 페이지에 연결하 기]에서 설명드릴 예정입니다. STEP을 잘 따라오신 후 [STEP09]에서 확인하시기 바 랍니다. 페이지 생성하기 [STEP02]에서는 페이지 이름(메뉴 명), 타켓, 페이지레이아웃, SEO설정 내용을 입력 후 저 장하기를 클릭해주시면 됩니다. 커서버튼을 클릭하면, 페이지만들기의 목록에서 생성된 페이지의 위치를 편집할 수 있으며, 페이지 숨기기가 가 능합니다. 목록의 페이지명을 마우스 위아래로 드래그하여 메뉴순 서를 변경하거나 왼쪽, 오른쪽으로 드래그하여 하위 페 이지를 만들 수 있습니다. 페이지숨기기는 메뉴(네비게 이션)에 페이지가 보이지 않지만 실제로는 존재합니다. 페이지를 사용 안 하시려면 삭제하시거나, APP선택에 서 링크없음으로 변경하시기 바랍니다. 02. 내 사이트에 맞게 페이지 추가하기 디자인편집> 페이지> 페이지만들기
  • 37. 웹사이트만들기STEP별구성 35 운영모드> 앱> 서브컨텐츠 STEP03. 서브컨텐츠 만들기1 - 텍스트 - 서브컨텐츠는 웹사이트의 컨텐츠를 구성하는 페이지입니다. - 서브컨텐츠 앱으로 이 페이지를 디자인 및 구성할 수 있습니다. 서브컨텐츠 생성을 클릭하여 생성할 서브컨텐츠명을 입력 후, 서브컨텐츠 설정 페이지로 이동합니다. 페이지에 연결이 안 된 서브컨텐츠는 검정아이콘으로,페 이지에 연결된 서브컨텐츠는 컬러아이콘으로 보여지며 생성된 서브컨텐츠는 복사 및 삭제가 가능합니다. STEP03에서는 서브컨텐츠 앱으로 서브컨텐츠를 만들 수 있는 방법을 소개하며 텍스트, 이미지, 동영상, 지도, 소스코드를 삽입하여 원하는 형태의 서브컨텐츠를 생성하는 방법을 살펴보겠습니다
  • 38. 36 웹사이트만들기STEP별구성 글자요소의 제목 및 단락을 노출할 위치에 드래그앤드롭하여 추가합니다. 제목의 내용을 입력하려면 더블클릭 후 텍스트를 입력할 수 있습니다. 생성된 텍스트 박스에서 스타일, 글자색, 크기, 간격 등을 수정하여 서브페이지의 제목이 명확하게 설명될 수 있도록 편집합니다. 단락 또한 더블클릭하여 원하는 내용을 작성 후 수정할 수 있습니다. 단락에 상세정보를 입력한다면 방문자에게 좀 더 쉬운 정보를 전달할 수 있습니다. 서브컨텐츠> 글자요소> 제목 제목과 단락의 내용입력 후 설정버튼을 통해 타이틀과 단락에 맞는 텍스트 기준크기를 변 경할 수 있으며, 링크를 적용할 수 있습니다.
  • 39. 웹사이트만들기STEP별구성 37 서브컨텐츠> 미디어요소> 이미지 STEP04. 서브컨텐츠 만들기2 - 이미지 - 이미지를 업로드하여 서브컨텐츠에 시각적인 이미지 정보를 한눈에 전달할 수 있습니다. 이미지를 추가하여 서브컨텐츠를 활용해 보시기 바랍니다. 미디어요소의 이미지를 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다. 이미지요소의 목록에서는 이전에 이미 생성해 놓은 기존이미지 삽입을 통해 원하는 이미지를 선택 후 업 로드하거나, 신규이미지 삽입의 이미지추가 버튼을 통해 원하는 이미지를 업로드 할 수 있습니다.
  • 40. 38 웹사이트만들기STEP별구성 미디어요소의 동영상을 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다. 서브컨텐츠> 미디어요소> 동영상 STEP05. 서브컨텐츠 만들기3 - 동영상 - 원하는 동영상을 업로드하여 이미지에 국한되었던 정보를 영상으로 풀어 더 상세하고 역동적으로 내용을 설명할 수 있습니다. - 동영상은 방문자의 이목을 끄는 능력이 탁월하여 시각적 스토리텔링 도구로 사용할 수 있습니다. 동영상 설정은 URL 주소입력과 소스코드 연결 방식이 있습니다. URL입력은 Youtube, Vimeo, 다음, 판도라TV 에서만 가능하지 만, 소스코드(iframe)는 제한 없이 연결할 수 있습니다.
  • 41. 웹사이트만들기STEP별구성 39 서브컨텐츠> 앱> 지도 STEP06. 서브컨텐츠 만들기4 - 지도 - 지도 앱의 사용으로 위치정보와 주소를 방문자에게 알려줄 수 있으며 메뉴의 찾아오시는 길, 위치정보안내 페이지로 활용됩니다. 마커기능을 사용한다면 지도에서 업체의 위치를 정확하게 표시할 수 있습니다. 앱의 지도를 드래그앤드롭하여 노출할 위치에 추가합니다. 설정을 클릭하여 목록에서 지도 생성을 합니다. 생성할 지도명을 입력 후 API KEY로 지도 종류를 선택합니다. 지도 API 연동 설정하기는 [두부플러스 웹사이트> 메뉴얼> 외부API연동] http://master.dubuplus.com/외부API연동을 확인해주시기 바랍니다. 구글, 네이버, 다음지도를 사용하기 위해서는 API KEY값 이나 ID값을 입력해야 이용할 수 있습니다. KEY값은 [디자인편집> 앱> 지도, 운영모드> 환경설정> 외부API연동> 지도]에서 설정할 수 있으며 설정된 정보 로 연동됩니다.
  • 42. 40 웹사이트만들기STEP별구성 미디어요소의 코드셀을 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다. 서브컨텐츠> 미디어요소> 코드셀 STEP07. 서브컨텐츠 만들기5 - 소스코드 - 두부플러스에서 코딩은 코드셀이라는 미디어요소로 명칭되며 소스코드(코딩)를 사용하여 서브컨텐츠를 구현할 수 있습니다. 코딩을 활용하여 고급 편집기능으로 좀 더 다양한 스타일의 디자인으로 완성할 수 있습니다 코드요소 설정영역 안에 소스코드를 입력하여 삽입하 면 자바스트립트, HTML, CSS와 같은 코드로 서브컨텐 츠를 생성할 수 있습니다.
  • 43. 웹사이트만들기STEP별구성 41 운영모드> 앱> 게시판> 게시판목록 STEP08. 게시판 생성하기 - 게시판은 업종 및 업태에 따라 사용하는 형태가 다르기 때문에 유형별로 생성이 가능하며, 게시판을 활용하여 방문자와 소통이 가능합 니다. - 생성한 게시판은 [디자인편집> 페이지]에서 연결이 되어야 웹사이트 서브페이지에 노출되며, 메인 또는 서브레이아웃에 노출하기 위 해서는 게시판추출목록에서 설정 후, [디자인편집> 앱> 게시판]을 설정해주어야 합니다. 게시판 생성을 클릭하여 생성할 게시판명을 입력합니다. 01. 게시판 생성하기 페이지에 연결이 안 된 게시판은 검정 아이콘으 로, 페이지에 연결된 게시판은 컬러아이콘으로 보여지며 생성된 게시판의 수정, 복사 및 삭제가 가능합니다.
  • 44. 42 웹사이트만들기STEP별구성 게시판설정에서 기본설정의 게시판 형태(리스트, 갤러리, 웹진, 문의형)에 따라 설정항목이 자동으로 바뀌며 사용하는 웹사이트 게시판 형태에 따라 변경할 수 있습니다. 고급설정, 항목설정, 권한설정을 통해 게시판의 세부기능들을 설정할 수 있으며, 원하는 설정의 사용여부를 체크 후 저장합니다. 게시판명 및 게시판설명은 스킨에 따라 게시판 페이지 에 노출되거나 노출되지 않을 수도 있습니다. 고급설정에서는 답글, 댓글, SNS공유, 말머리, 스팸방지, 개인정보정책동의 등의 내용을 사용 /사용안함으로 선택할 수 있습니다. 항목설정에서는 방문자가 게시판 글쓰기 시 노출되는 항목에 대한 설정과 방문자가 게시판을 볼 수 있는 내용에 대한 항목을 설정할 수 있습니다. 권한설정에서는 게시글 목록, 열람 외 댓글, 답글 보기 등의 권한을 모든사용자, 로그인사용자, 선택등급 및 그룹 사용자로 지정하여 설 정할 수 있습니다.
  • 45. 웹사이트만들기STEP별구성 43 아이콘을 클릭하면 해당 게시판의 등록된 게시글을 확인하고 새로운 게시글을 작성할 수 있는 게시글 관리 페이지로 이동합니다. 페이지에 연결이 안 된 게시판은 검정 아이콘으 로, 페이지에 연결된 게시판은 컬러아이콘으로 보여지며 생성된 게시판의 수정, 복사 및 삭제가 가능합니다. 작성된 글은 저장버튼을 누르면 게시글에 반영되고, 게시글 노출은 생성된 게시판이 페이지에 연결되었을 시 노출됩니다. 글쓰기 버튼을 클릭하시면 새로운 게시글을 작성할 수 있습니다.
  • 46. 44 웹사이트만들기STEP별구성 02. 레이아웃에 게시판 추출하기 메인레이아웃 또는 서브레이아웃 화면에 노출할 게시판을 추출할 수 있으며, 생성한 게시판 전체 또는 일부만 노출할 수 있습니다. 게시판추출 생성을 클릭하여 생성할 게시판추출명을 입력합니다. 추출게시판 설정> 추출게시판을 통해 생성해 놓은 게시판 전체나 일부를 +버튼으로 선택하여 추출할 수 있습니다. 추출게시판을 확인 후 추출게시판 설정 완료 버튼을 클릭합니다.
  • 47. 웹사이트만들기STEP별구성 45 앱의 게시판을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 클릭합니다. 게시판 목록에서는 이전에 이미 생성해 놓은 게시판 목록을 확인할 수 있습니다. 목록에서는 이전에 이미 생성해 놓은 게시판추출목록을 확인할 수 있으며, 목록에서 선택한 게시판을 레이아웃에 노출할 수 있습니다. 01. 게시판 생성하기 페이지에 연결이 안 된 게시판은 검정 아이콘으 로, 페이지에 연결된 게시판은 컬러아이콘으로 보여지며 생성된 게시판의 수정, 복사 및 삭제가 가능합니다. 03. 메인에 게시판추출목록 노출하기
  • 48. 46 웹사이트만들기STEP별구성 DUBU+ Master Key> 게시판 형태 리스트형 갤러리형 문의형 웹진형 목록형 게시판으로 자유게시판과 같은 간단하면서도 기본적인 게시판에 사용합니다. 제품, 메뉴, 시공사례와 같이 목록에 이미지 노출이 필요한 게시판에 사용합니다. 썸네일 높이 고정을 통해 이미지의 높이감을 변경하여 사용할 수 있습니다. 예약, 견적의뢰 등 맞춤형 항목이 필요한 경우 사용하며, 진행상태를 표시할 수 있습니다. 잡지형식 특색을 가지는 형태로, 목록에 이미지와 글이 함께 노출되는 형태입니다.
  • 49. 웹사이트만들기STEP별구성 47 디자인편집> 페이지> APP선택 STEP09. 서브컨텐츠와 게시판을 페이지에 연결하기 - [디자인편집> 페이지> APP선택]에서는 [운영모드> 나의앱]에서 생성한 서브컨텐츠, 게시판을 메뉴로 연결하는 작업을 합니다. STEP02에서 이전에 생성해 놓은 페이지(메뉴)의 게시판과 서브컨텐츠를 연결합니다. 연결한 페이지의 APP선택에서 드롭다운 버튼을 클릭하여, 생성해놓은 게시판이나 서브컨텐츠를 선택합니다.
  • 50. 48 웹사이트만들기STEP별구성 디자인편집> 구성요소> 로고 STEP10. 메인페이지 구성하기 - 1 로고 - 로고는 방문자가 웹사이트를 방문 시 가장 먼저 시선이 가는 메인페이지(메인레이아웃) 상단에 위치해 있습니다. 최근 들어 홈으로 가기 버튼으로 방문자가 로고를 클릭하기 때문에 로고의 중요성은 더 커지고 있습니다. 웹사이트를 상징하는 업체 로고를 이미지나 텍스트를 활용하여 트렌디하면서도 돋보이도록 손쉽게 제작해보시기 바랍니다. 구성요소의 로고를 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다. 01.텍스트로고 만들기 로고의 텍스트로고를 클릭하여 업체명을 입력후 글꼴, 색상, 크기,간격을 조정하여 텍스트로 로고를 만들 수 있습니다.
  • 51. 웹사이트만들기STEP별구성 49 로고의 이미지로고를 클릭하여 이미지를 추가할 수 있습니다. 02.이미지로고 만들기 이미지 크기는 웹사이트 위치 및 비율에 따라 수정할 수 있 으며, 레티나이미지를 적용하여 이미지 사이즈가 줄어들어 도 선명한 화질의 이미지로 사용가능하도록 설정합니다. 로고 이미지와 텍스트의 컬러를 정할 때, 두부플러스 마스터플랜 Plan 04. 레벨업의 [업종 및 업태별 컬러 이미지]를 확인하신 후, 로고의 컬러를 정하시면 웹사이트가 조금 더 돋보이는 컬러를 활용할 수 있습니다.
  • 52. 50 웹사이트만들기STEP별구성 디자인편집> 앱> 슬라이드쇼 STEP11. 메인페이지 구성하기 - 2 슬라이드쇼 - 메인의 슬라이드쇼는 메인화면의 분위기를 결정지을 수 있는 중요한 이미지이며, 방문자에게 가장 처음 노출되는 이미지 페이지입니다. 눈에 띄는 슬라이드쇼를 제작한다면, 방문자의 호감도 상승 및 웹사이트 이탈율을 줄일 수 있습니다. 앱의 슬라이드쇼를 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다. 슬라이드쇼 목록에서는 이전에 이미 생성해놓은 슬라이드 목록을 확인할 수 있으며 목록에 서 선택한 슬라이드를 선택하여 레이아웃에 노출할 수 있습니다. 슬라이드쇼 목록의 설정버 튼을 클릭하면, 현재 구성되어 있는 슬라이드쇼를 수정할 수 있습니다. 슬라이드쇼의 효과를 클릭하시면, 선택된 슬라이드쇼 의 이동/페이지 스킨, 애니메이션, 자동재생 등 슬라이 드쇼 효과를 적용할 수 있습니다.
  • 53. 웹사이트만들기STEP별구성 51 목록의 슬라이드쇼 생성을 클릭하거나 작업된 슬라이드쇼의 설정을 클릭하면 슬라이드를 새롭게 만들거나 수정할 수 있는 페이지로 이동됩니다. 슬라이드 추가 버튼을 클릭하면 새로운 슬라이드를 구성할 수 있는 빈 화면 이 생성되고, 요소추가에서 사용할 요소(텍스트, 이미지, 버튼, 동영상)를 클릭 하여 슬라이드의 화면을 구성할 수 있습니다. 해당 작업창에서 요소추가의 텍스트, 이미지 버 튼으로 원하는 슬라이드를 구성할 수 있습니다. 만들어진 슬라이드는 복사, 숨김, 삭제가 가능합니다. 슬라이드쇼의 전체 영역설정을 클릭하면 높이, 배경이미지, 배경색, 테두리, 링크를 설정 할 수 있으며 모든 슬라이드에 동시 적용됩니다. 상단바의 버튼을 통해 미리보기, 이전작업 및 이 전에서 이후 작업환경으로 되돌릴 수 있습니다.
  • 54. 52 웹사이트만들기STEP별구성 팝업 생성을 클릭하여 생성할 팝업명을 입력 후, 팝업 설정 페이지로 이동합니다. 운영모드> 앱> 팝업 STEP12. 메인페이지 구성하기 - 3 팝업 - 팝업앱을 통해 중요한 공지나 이벤트를 방문자에게 알림으로써 웹사이트의 홍보 및 마케팅을 강화할 수 있습니다. 설정을 통해 PC나 모바일에만 노출이 가능하고, 노출기간 또한 설정할 수 있어 배너와는 차별화된 홍보수단으로 활용됩니다. 이전에 이미 저장해 놓은 레이어 팝업의 아이콘 을 클릭하면, 팝업설정 페이지로 이동되어 수정 할 수 있습니다. 01. 팝업 생성하기 버튼을 클릭하면 수정 및 복사, 삭제가 가능합니다. 팝업설정에서 팝업의 노출선택, 팝업형태, 노출기간, 창크기, 창위치, 창닫기 옵션의 설정이 가능합니다. 팝업설정을 통해 여러 개의 팝업을 동시에 노출할 수 있으며 노출위치, 노출기간을 선택할 수 있고, 창의 크기 및 창닫기 옵션 또한 설정할 수 있습니다.
  • 55. 웹사이트만들기STEP별구성 53 PC와 모바일의 미리보기를 통해 팝업위치를 확인하여 지정할 수 있으며, 팝업의 버튼을 통해 바로가기가 가 능합니다. 노출을 선택하면 팝업 생성 후 바로 웹사이트에 반영됩니다. 02. 팝업 편집하기 해당 작업창에서 요소추가의 텍스트,이미지 버튼으 로 원하는 팝업창을 구성할 수 있습니다. 각 요소의 이동, 순서변경, 추가 및 디자인 을 구성할 수 있습니다.
  • 56. 54 웹사이트만들기STEP별구성 슬라이더갤러리 생성을 클릭하여 생성할 슬라이더갤러리명을 입력 후, 슬라이더갤러리 설정 페이지로 이동합니다. 운영모드> 앱> 슬라이더갤러리 STEP13. 메인페이지 구성하기- 4 슬라이더갤러리 - 슬라이더갤러리앱을 활용하려면, 이미지가 포함된 갤러리 게시판이 먼저 생성되어 있어야 합니다. 게시판 각각의 이미지를 하나의 페이지에 모아 노출시키는 슬라이더갤러리는 슬라이드쇼처럼 이미지 이동이 가능하며, 슬라이더 메인 이미지가 노출되면 서브 이미지들은 썸네일형태로 노출됩니다. 이전에 이미 저장해 놓은 슬라이더갤러리의 아이 콘을 클릭하면,설정페이지로 이동되어 수정할 수 있습니다. 01. 슬라이더갤러리 생성하기 버튼을 클릭하면 복사, 설정, 삭제가 가능합니다. 설정버튼을 통해 저장된 슬라이더갤러리의 기본설정, 항목설정, 게시판 추출을 수정할 수 있습니다. 슬라이더갤러리는 이미지가 등록되어 있는 게시판으로만 노출이 가능하며, 기본설정의 노출형태, 갤러리형 태, 페이지 연결 여부에 따라 여러형태로 노출이 가능합니다.
  • 57. 웹사이트만들기STEP별구성 55 항목설정에서 체크한 항목이 노출되려면, [기본설정> 항목표시]에서 표시안함 외 항목으로 선택이 되어야 합니다. 02. 슬라이더갤러리 설정하기 기본설정에서는 슬라이더갤러리 형태, 노출 형태, 항목 표시, 상세페이지 연결 등을 설정할 수 있습니다. 게시판 추출에서는 유형에 상관없이 이미지 가 등록된 게시판이 목록에 노출되며, 목록에 서 +버튼으로 선택된 게시물이 추출한 게시 물로 이동됩니다. 일반으로 설정할 경우 갤러리게시물이 합쳐 서 보이고, 탭으로 설정할 경우 갤러리게시 판들이 탭별로 나눠서 보여집니다.
  • 58. 56 웹사이트만들기STEP별구성 앱의 슬라이더갤러리를 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다. 슬라이더갤러리 목록에서는 이전에 이미 생성해 놓은 슬라이더갤러리 목록을 확인할 수 있으며 목록에서 선택한 슬라이더갤러리를 레이 아웃에 노출할 수 있습니다. 슬라이더갤러리 목록의 설정버튼을 클릭하면, 현재 구성되어 있는 슬라이더갤러리를 수정할 수 있습니다. 슬라이더갤러리 생성 버튼으로 새로운 슬라이더 갤러리 생성이 가능합니다. 디자인편집> 앱> 슬라이더갤러리 03. 슬라이더갤러리 노출하기
  • 59. 웹사이트만들기STEP별구성 57 STEP14. 모바일사이트 편집하기 - 두부플러스는 PC에서 웹사이트를 만들면, 자동으로 모바일 페이지도 함께 만들어지는 반응형 웹빌더 서비스를 제공하고 있습니다. 미리보기 버튼을 통해 모바일 화면을 확인하신 후 필요에 따라 모바일 메인화면을 편집하여 모바일 맞춤형 사이트를 경험해 보시기 바 랍니다. PC에서 웹사이트 변경은 모바일 화면에 영향을 미치지만, 모바일 웹사이트의 변경은 모바일 화면에서만 변경됩니다. mobile_header 위치 이동 시, 모바일 화면에 서는 네비게이션과 상단 메뉴 부분의 위치가 달 라질 수 있으므로, 유의하시어 모바일 웹사이트 를 편집 후 미리보기로 확인하시기 바랍니다. 모바일 페이지는 필요에 따라 모바일설정으로 변경 후 수정이 가능하며, 미리보기 버튼을 통해 확인할 수 있습니다. 모바일 버전 편집기능은 모바일 모드에서 최대한 원하는 결과물을 만들 수 있습니다. 디자인편집> 모바일 설정 / 미리보기 모바일에서는 이미지 해상도에 따라 이미지 의 상하좌우가 잘려 보일 수 있으므로 웹사 이트 제작 후 모바일 페이지를 꼭 확인하시 기 바랍니다.
  • 60.
  • 61. 플랜3. 두부플러스 초이스업 두부플러스에서 무료로 지원되는 앱 뿐만 아니라 유료로 제공되는 앱으로 특화된 서비스를 경험해보시 기 바랍니다. 다양한 기능을 가진 앱을 사용하며 웹사이트 구성에 활용도를 높일 수 있으며 나의 업종/업태에 알맞은 앱을 추가하여 수준 높은 웹사이트를 경험할 수 있습니다.
  • 62. 60 앱소개 앱 소개 LESSON 01. ‘문자상담’으로 상담창 생성하기 - 방문자가 사이트에서 SMS로 문의하면, 실시간으로 방문자와 문자를 주고받을 수 있는 기능으로 웹사이트에서 구매를 원하는 방문자 의 사이트 이탈율을 줄이고 구매전환율을 높일 수 있는 앱입니다. 01. 문자상담내역 확인하기 운영모드> 앱> 문자상담 02. 문자상담 설정하기 미답변/답변완료 탭을 통해 문자를 상세검색할 수 있으며, 수신된 메시지에 답변을 전송할 수 있습니다. ※ 수신된 메시지는 SMS로 수신할 수 있으며, 건당 20원의 캐쉬가 소진됩니다. 사용 전, [운영모드>환경설정>결제관리>캐쉬관리]에서 캐쉬를 충전하여 사용하시기 바랍니다. 기본설정에서 관리자 통보설정, 상담창 기본문구, 노출방식을 설정할 수 있습니다. 문의글이 등록되었을 시 휴대폰으로 내용을 받을 수 있으며, 상담창 문구에 방문자에게 전달하고 싶은 문구를 작성할 수 있습니다. 노출방식에 따라 웹사이트 레이아웃이나 팝업창으로 노출할 수 있습니다.
  • 63. 앱소개 61 디자인편집> 앱> 문자상담 노출방식을 레이아웃 안에 넣기로 선택 시 디자인편집 레이아웃으로 이동되며, 앱의 문자상담을 드래그앤드롭으로 노출할 위치에 추가 후 설정을 클릭합니다. 문자상담의 설정에서는 관리자 통보설정을 선택할 수 있으며, 상담기본문구, 노출방식을 편집 및 확인할 수 있습니다. 스킨에서는 레이아웃의 디자인에 어울리는 문자상담의 스킨을 선택할 수 있습니다.
  • 64. 62 앱소개 LESSON02. ‘퀵메뉴’로 바로가기 메뉴 만들기 - 문의하기, 오시는길 등과 같이 웹사이트에서 부각시켜야 할 컨텐츠를 퀵메뉴로 노출할 수 있습니다. 바로가기 메뉴는 방문자가 빠르게 컨텐츠를 찾을 수 있도록 도움을 줍니다. 01.퀵메뉴 생성하기 운영모드> 앱> 퀵메뉴 퀵메뉴 생성을 클릭하여 생성할 퀵메뉴명을 입력 후, 퀵메뉴 스킨선택을 통해 원하는 퀵메뉴 스킨을 선택합니다. 퀵메뉴가 생성되면, 페이지 노출 선택의 여부에 따라 퀵메뉴가 노출되며 클릭 후 해당 메뉴 바로가기가 가능 합니다. 생성 후에는 사이트에 바로 보여지므로, 노출을 원하지 않을 시 노출설정에서 노출안함으로 상태를 변경해야 합니다. 이전에 이미 생성해 놓은 퀵메뉴의 아이콘을 클릭하 면 설정 페이지로 이동되어 수정할 수 있습니다. 버튼을 클릭하면 수정 및 복사, 삭제가 가능합니다. 설정버튼을 통해 만들어진 퀵메뉴의 이름 수정 및 노출여부와 노출 페이지를 설정하여 선택적인 노출 활동을 할 수 있습니다.
  • 65. 앱소개 63 메뉴추가 버튼을 통해 기본 제공되는 메뉴 외에도 새로운 퀵메뉴의 메뉴를 추가할 수 있습니다. 퀵메뉴 스킨은 PC와 모바일의 사이즈가 다르므로, 적용 후 각각 화면에서 확인이 필요합니다. 버튼별 설정에 따라 메뉴에 들어갈 아이콘/이미지설정, 텍스트설정, 노출설정, 클릭 시 이동할 링크 설정 외 메 뉴영역별로 수정 및 적용할 수 있습니다. 02.퀵메뉴 편집하기
  • 66. 64 앱소개 LESSON 03. ‘소셜스트림’으로 웹사이트 홍보하기 - 여기저기 흩어져있는 웹사이트 및 소셜컨텐츠의 후기글이나, 리뷰글들을 한번에 모아 나의 웹사이트에 노출 시킬 수 있습니다. 소셜스트림앱을 적용하여 다양한 소셜미디어(NAVER BLOG, YOUTUBE, INSTAGRAM 등)를 하나로 통합해서 운영해보시기 바랍니다. 01 소셜스트림 생성하고 연결하기 운영모드> 앱> 소셜스트림 소셜스트림 생성을 클릭하여 생성할 소셜스트림명을 입력 후, 소셜스트림 설정 페이지로 이동합니다. 네이버 뉴스 검색에서 상호명으로 검색 후 [뉴스검색RSS보기]를 클릭하여 RSS주소(URL)를 소셜스트림에 연결하면 ‘보도자료’ 메뉴를 저작권 걱정 없이 운영할 수 있습니다. 설정버튼을 통해 저장된 설정의 기본설정, 피드 연결, 메인스타일, 서브스타일을 수정할 수 있습 니다. 버튼을 클릭하면 수정 및 복사, 삭제가 가능합니다.
  • 67. 앱소개 65 트위터, 유튜브, 네이버블로그는 [검색어]를 설정하면, 방문자 및 회원의 후기를 모아 웹사이트에 노출시킬 수 있습니다. 기본설정에서는 정렬방식과 이미지뷰어, 이미지 게시물만 표 시 등의 사용여부를 설정할 수 있습니다. 메인스타일과 서브스타일에서는 스트림레이아웃에 따라 간격 조정, 컨텐츠의 나열 갯수를 조정할 수 있습니다. 관리의 세부버튼을 통해 피드를 삭제하거나 필터를 통해 제외할 컨텐츠를 지정할 수 있습니다. 소셜스트림 설정에서 연결된 피드의 피드연결 설정을 클릭하 여 연결된 피드와 연결되지 않은 피드를 확인할 수 있습니다. 연결되지 않은 피드의 플러스(+) 아이콘을 클릭하면, 연결된 피 드로 이동하게 됩니다. 피드연결에서는 피드만들기를 클릭 후 노출할 소셜미 디어 컨텐츠를 선택하면 유형에 따라 설정할 수 있는 목록이 변경됩니다. 컨텐츠 선택 후 피드추가를 클릭하면, 피드목록에 선 택한 소셜미디어의 아이콘이 생성되며, 사용여부와 관리여부를 설정할 수 있습니다.
  • 68. 66 앱소개 02. 소셜스트림 피드 확인하기 생성된 소셜스트림의 게시물 관리는 앱의 아이콘을 클릭하면 가능합니다. 소셜미디어 컨텐츠 전체를 확인하여 게시물별 노출여부를 설정할 수 있으며, 게시물을 클릭하면 해당 소셜미디어로 이동됩니다.
  • 69. 앱소개 67 디자인편집> 앱> 소셜스트림 앱의 소셜스트림을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 클릭합니다. 소셜스트림의 목록에서는 이전에 이미 생성해 놓은 소셜스트림 목록을 확인 할 수 있으며, 목록에서 선택한 소셜스트림을 레이아웃에 노 출 할 수 있습니다. 스킨 및 글꼴선택을 통해 소셜스트림을 좀 더 디자인적으로 구성하실 수 있습니다. 03. 게시물 관리 및 웹사이트에 노출하기
  • 70. 68 앱소개 LESSON 04. 쉽고 편리한 ‘숙박예약’ - 숙박사이트를 운영하는 사용자를 위해 특화된 앱으로 숙박예약알림 및 숙박등록에서 관리까지 필요한 모든 기능을 제공합니다. - 환경설정의 숙박예약관리 및 결제관리를 설정하시면 예약환경설정과 온라인 결제가 가능하여, 별도의 다른 결제 및 예약 프로그램을 사용하지 않으셔도 편리하게 사용하실 수 있습니다. - 주요기능으로 숙박과 주변 관광지에 대한 등록이 가능하며, 비/성수기에 따라 객실관리의 요금정보에 차등을 둘 수 있습니다. 부가서비 스 관리 또한 가능하여 숙박시설의 부가적인 사용요금 정보를 제공할 수 있습니다. 01. 숙박예약관리 설정하기 운영모드> 환경설정> 숙박예약관리 숙박예약관리의 설정을 통해 예약환경, 예약기간, 예약방식, 규정, 할인, 옵션설정이 가능합니다. 01-1. 기본설정 예약환경설정에서는 예약의 운영방식, 확정방식, 결제방식, 신청형태 등을 선택할 수 있으며, 온라인으로 예약과 결제가 불가한 경우 오 프라인으로 선택할 수 있습니다. 예약기간설정에서는 주말설정을 금, 토, 일, 공휴일, 공휴일 전으로 선택적 설정이 가능하며 성수기와 준성수기의 기간설정을 통해 비수 기와 구분지어 표기할 수 있습니다. 01-2. 일별설정 일별예약방식은 요일뿐만아니라 객실별로 설정이 가능하며, 일벌예약기간은 요일별로 설정이 가능합니다. 기간 변경시에는 변경된 기간의 객실가격으로 노출됩니다. 01-3. 규정설정 기본수수료와 환불규정을 설정할 수 있으며, 설정된 환불규정과 참고사항은 사이트 객실상세페이지와 예약페이지에 노출됩니다. 01-4. 할인설정 할인추가 버튼을 클릭하여 할인명 입력 후, 기간을 설정 후 할인가(율)를 적용할 수 있습니다. 적용대상을 숙박예약별이나 개별로 설정 후 저장하면 할인이 적용됩니다. 01-5. 옵션설정 옵션추가 버튼을 클릭하여 드롭다운박스의 옵션항목을 선택합니다. 바비큐, 조식 등 선택한 옵션의 설명을 기입 후 옵션가격을 지정합니 다. 옵션의 적용대상을 숙박예약별이나 개별로 설정 후 저장하면 옵션이 적용됩니다.
  • 71. 앱소개 69 객실/예약관리 버튼을 통해 객실관리, 예약관리, 예약현황 등을 확인할 수 있습니다.
  • 72. 70 앱소개 02.결제관리하기 운영모드> 환경설정> 결제관리 결제설정에서 결제계좌 및 전자결제를 설정 후 저장하시기 바랍니다. 웹사이트에 필요한 정보의 결제계좌관리를 입력합니다. 계좌추가를 클릭하여 은행명과 계좌번호, 예금주를 정확 하게 입력 후 저장합니다. 사용중인 PG사가 있는 경우 계약된 정보를 설정하면 연 동이 되고, 신규신청이 필요하시다면 LG U+를 선택하여 신청하기를 클릭하면 됩니다. 전자결제가 신청되지 않은 상태에서는 무통장입금만 가능합니다. 방문자가 좀 더 편리하게 객실을 예약하고 온라인으로 결제할 수 있도록 전자결제를 설정하세요. 02-1. 결제설정> 기본설정 02-2. 결제설정> 전자결제
  • 73. 앱소개 71 03. 숙박예약생성하기 운영모드> 앱> 숙박예약> 숙박예약목록 숙박예약 생성을 클릭하여 생성할 숙박예약명을 입력 후, 숙박예약 설정 페이지로 이동합니다. 기본설정에서는 숙박예약유형과, 객식목록의 노출형태를 선택할 수 있으며 페이지에 노출되는 객실목록의 나열 개수를 PC, Tablet, mobile별로 다르게 설정할 수 있습니다. 지점별, 유형별로 여러 개의 숙박예약을 생성하여 운영할 수 있습니다. 고급설정에서는 카카오톡 등 SNS로 공유하기 기능, 개인정보정책 동의 등을 선택적으로 사용할 수 있으며, 알림설정을 통해 SMS와 메일로 관리자 및 방문자가 예약알림을 받을 수 있습니다. 아이콘의 복사, 설정, 삭제 버튼을 통해 숙박예약을 복사하거 나 삭제할 수 있으며 설정버튼을 통해 저장된 기본설정, 고급 설정, 항목설정, 권한설정을 수정할 수 있습니다. 항목설정에서는 객실의 상세페이지 읽기, 객실목 록, 실시간예약 검색목록에 노출되는 항목을 선택 적으로 설정 후 저장할 수 있습니다.
  • 74. 72 앱소개 생성된 아이콘을 클릭하면 [앱> 숙박예약> 예약관리]로 이동됩니다. 숙박예약의 객실관리, 예약관리, 예약현황, 휴면/탈퇴회원 예약관리를 설정할 수 있는 화면으로 이동되며, 객실관리탭을 클릭 후 객실등 록 버튼을 클릭하여 객실정보를 등록할 수 있습니다. 객실관리를 세부적으로 작성하면, 방문자가 객실의 정보를 정확하게 확인 후 예약할 수 있으므로 필수항목 외 정보입력까지 명확하게 해 주시는 것이 좋습니다. 객실관리는 객실명, 객실수, 투숙 가능한 기준 인원을 설정할 수 있으며, 가격정보에서는 비/성수기의 가격을 설정할 수 있습니다. 객실 이미지는 최대 20장까지 업로드가 가능하며, 그외 기타 이용안내 등을 등록할 수 있습니다. 기본정보에서는 객실명, 객실수, 인원 등을 설정할 수 있 습니다. 03-1. 객실관리 가격정보에서는 객실의 가격을 비수기, 준성수기, 성수 기로 나누어 세부적으로 지정할 수 있습니다. 이미지정보로 객실의 이미지를 업로드할 수 있으며, 시 설정보에서 객실구조, 객실특성, 편의시설을 클릭하여 선택하거나, 사용자지정을 통해 입력할 수 있습니다.
  • 75. 앱소개 73 03-2. 예약관리 예약검색의 검색조건에 맞춰 예약건을 검색할 수 있습니다 예약관리에서는 예약번호나 객실명, 예약자, 휴대폰번호로 예약자의 예약확인 및 예약/결제 상태를 변경할 수 있습니다. 예약현황에서는 전체예약현황을 캘린더 형태나 리스트형태로 한눈에 확인할 수 있습니다. 예약상태의 변경은 예약목록에서 변경하고 싶은 예약상태 를 선택하여 변경 버튼을 통해 변경할 수 있습니다. 03-3. 예약현황 전체예약현황을 캘린더형 또는 리스트형으로 확인할 수 있으며, 예약상태를 예약가능, 예약대기, 예약완료로 확인할 수 있습니다. 03-4. 휴면/탈퇴회원 예약관리 1년이상 서비스 이용기록이 없는 회원은 휴면회원으로 관리되며, 휴면회원의 경우 휴면해지 시 기존예약관리에서 확인이 가능합니다. 예약통계버튼을 클릭하면 [운영모드> 통계> 숙박예약> 종합현황]으로 이동됩니다. 예약상태별, 이용/매출별 통 계 등을 검색할 수 있습니다. 예약 엑셀파일을 검색조건에 맞춰 생성할 수 있습니다.
  • 76. 74 앱소개 04. 페이지에 객실 및 실시간예약(캘린더) 연결하기 디자인편집> 페이지> 숙박 페이지> APP선택> 숙박예약 생성된 숙박예약은 [디자인편집> 페이지> APP선택]으로 연결되어야 웹사이트에 노출됩니다. 연결한 페이지의 APP선택에서 드롭다운 버튼을 클릭하여, 생성해 놓은 숙박예약> 객실 및 실시간예약(캘린더)을 선택합니다. 숙박예약은 객실목록 , 객실상세페이지, 실시간예약(캘린더)을 페이지로 연결할 수 있습니다.
  • 77. 앱소개 75 05. 숙박예약추출 생성하기 운영모드> 앱> 숙박예약> 숙박예약추출목록 메인페이지 또는 서브페이지에 노출할 객실을 추출할 수 있으며, 객실 전체 또는 일부만 노출할 수 있습니다. 숙박예약 생성을 클릭하여 생성할 숙박예약명을 입력 후 기본설정과 항목설정을 선택 후 저장합니다. 아이콘의 복사, 설정, 삭제버튼을 통해 숙박예약을 복사 하거나 삭제할 수 있으며 설정버튼을 클릭하면 이전에 설 정했던 숙박예약의 설정을 변경할 수 있습니다. 노출할 객실을 추출할 수 있으며, 생생해 놓은 객실 전체나 일부만을 플러스(+) 버튼으로 선택하여 추출 할 수 있습니다. 항목설정에서는 객실목록에 노출되는 항목을 설정할 수 있습니다. 객실명, 가격, 인원 등 노출하고싶은 목록을 체크 하여 저장하면 페이지에 노출할 수 있습니다.
  • 78. 76 앱소개 06. 메인에 객실 노출하기 디자인편집> 앱> 숙박예약 앱의 숙박예약을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 클릭합니다. 숙박예약 목록에서는 이전에 이미 생성해 놓은 숙박예약 목록을 확인할 수 있습니다. 예약검색앱을 사용하기 위해서는 검색할 숙박예약의 실시간예약(캘린더)가 연결되어 있어야 합니다. 07. 메인에 예약검색 설정하기 앱의 예약검색을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 클릭합니다. 설정된 예약검색에서 조건에 맞게 설정 후 검색 시, 해당 숙 박예약 페이지로 이동됩니다. 현재 구성되어 있는 숙박예약설정을 수정할 수 있습니다. 스킨 및 글꼴을 지정할 수 있습니다. 스킨 및 가로/세로 형태를 지정할 수 있습니다. 디자인편집> 앱> 예약검색
  • 79. 앱소개 77 LESSON05. 상품등록과 주문 및 배송까지 올인원 ‘쇼핑’ 운영모드> 환경설정> 쇼핑몰 - 쇼핑몰 사용자를 위한 쇼핑 최적화 앱으로 상품등록에서 주문/배송관리까지 올인원기능으로 편리하고 체계적인 관리가 가능합니다. - 주요기능으로는 판매하는 상품을 카테고리별로 등록할 수 있으며 상품별 개별옵션을 추가하여 상품정보를 풍부하게 제공할 수 있 습니다. - 방문자나 웹사이트 회원이 상품을 구매하면 관리자는 통합관리를 통해 주문관리별 상태를 확인할 수 있고, 상품의 합계금액을 한눈에 확인할 수 있습니다. 01.기본설정하기 상품후기, 상품문의, SNS공유 사용을 활성화하면 상품페이지에 노출됩니다. 02. 배송설정하기 기본설정에서는 배송비에 대한 설정으로 기본/묶음 배송비 설정 및 배송비의 기준에 따라 사용여부를 지정하여 저장할 수 있습니다. 배송비에 대한 자세한 안내사항은 [두부플러스 웹사이트> 매뉴얼> 배송비설정하기]를 참고하시기 바랍니다. 배송업체설정에서는 제공되는 택배사 전체리스트에서 이용할 택배사를선택할 수 있으며 배송업체를 추가 하여 저장도 가능합니다. 지역별 배송비 설정에서 지역을 추가하여 배송비를 추가로 책정할 수 있습니다.
  • 80. 78 앱소개 03.결제관리하기 운영모드> 환경설정> 결제관리 전자결제가 신청되지 않은 상태에서는 무통장입금만 가능합니다. 방문자가 좀 더 편리하게 상품을 주문하고 온라인으로 결제할 수 있도록 전자결제 설정하세요. PG신청하기의 자세한 안내사항은 [두부플러스 웹사이트 >매뉴얼>결제계좌/PG설정하기]를 참고하시기 바랍니다. 03-1. 결제설정> 기본설정 03-2. 결제설정> 전자결제 웹사이트에 필요한 정보의 결제계좌관리를 입력합니다. 계좌추가를 클릭하여 은행명과 계좌번호, 예금주를 정확하 게 입력 후 저장합니다. 사용중인 PG사가 있는 경우 계약된 정보를 설정하면 연동 이 되고, 신규신청이 필요하시다면 LG U+를 선택하여 신청 하기를 클릭하면 됩니다. 결제설정에서 결제계좌 및 전자결제, 에스크로 설정 후 저장하시기 바랍니다.
  • 81. 앱소개 79 네이버 페이를 사용하실 경우, 네이버페이 신청 후 설정의 사용여부를 사용으로 체크 후 네이버 가맹점ID, 연동인증 KEY, 버튼인증KEY, 네이버공동인증KEY 등을 입력합니다. 해당 페이지에서 네이버페이로 결제하지 않을 경우 결제 예외 상품 및 카테고리를 선택할 수 있습니다. 5만원 이상 현금결제 시 에스크로를 필수로 설정하셔야 합니다. 국민은행, 우리은행, NH농협 에스크로를 신청하여 에스크로 ID를 받을 수 있으며, ID와 에스크로전용계좌, 예금주를 입력 후 저장합니다. 네이버페이를 사용하시려면 [두부플러스 웹사이트> 매뉴얼> 네이버페이]를 참고하신 후 신청하시기 바랍니다. 에스크로를 사용하시려면 [두부플러스 웹사이트> 매뉴얼> 에스크로 설정하기]를 참고하시기 바랍니다. 03-3. 결제설정> 네이버페이 03-4. 에스크로 관리
  • 82. 80 앱소개 04. 상품관리하기 운영모드> 상품관리 상세정보에서는 상품별 품목별로 정보를 드롭다운버튼으로 선택하여 내용을 표로 기입할 수 있으며, 이미지, 동영상, 음악, 플래시를 업로드 할 수 있습니다. 카테고리 설정에서 생성한 카테고리를 선택 후 상 품명과 판매가를 입력합니다. 상품관리에서는 상품의 카테고리를 설정할 수 있고, 전체 상품을 등록하고 관리할 수 있습니다. 04-1. 카테고리 설정 상품에 맞는 카테고리를 상위카테고리 추가하기 버튼으로 추가 후 하위카테고리까지 선택 후 저장합니다. 04-2. 상품등록 및 상품일괄등록하기 상품등록으로 하나의 상품을 등록할 수 있고 상품의 이미지도 일괄등록 할 수 있습니다. 판매상태는 상품등록 시 판매중으로 설정되어 바로 판 매하지 않을 상품은 준비중으로 변경하셔야 합니다.
  • 83. 앱소개 81 상품일괄등록은 상품추가 버튼을 클릭 후 이미지를 선택하여 업로드하면 이미지 별 카테고리, 상품명, 판매가 상세정보를 입력할 수 있도 록 목록이 생성됩니다. 상품별 이미지 등록은 1개이며, 총 10개의 상품을 등록할 수 있습니다. 카테고리를 확인 후 상품명과 판매가를 설 정 및 저장하면 간편하게 등록이 가능합니다. 05. 페이지에 상품 연결하기 디자인편집> 페이지> APP선택 생성된 쇼핑은 [디자인편집> 페이지> APP선택]으로 연결되어야 웹사이트에 노출됩니다. 연결한 페이지의 APP선택에서 드롭다운 버튼을클릭하여, 생성해 놓은 쇼핑> 상품을 선택합니다.
  • 84. 82 앱소개 06. 메인에 상품 노출하기 디자인편집> 앱> 쇼핑 쇼핑의 스킨과 글꼴을 통해 전체 디자인과 어울리는 형태로 설정할 수 있습니다. 앱의 쇼핑을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 클릭합니다. 쇼핑의 목록에서는 카테고리명 사용여부를 선택할 수 있고, 이전에 이미 생성해 놓은 쇼핑 목록을 확인할 수 있으며, 목록에서 선택한 쇼 핑을 레이아웃에 노출할 수 있습니다.상품생성을 통해 새로운 상품설정을 통한 상품 추출을 할 수 있습니다. 상품 추출은 기본설정에서 상품의 이름 입력 및 한 줄에 노출될 상품의 개수를 설정 후 상품추출의 리스트에서 플러스(+)버튼으로 상품 카테고리에서 추출할 상품을 노출할 수 있습니다.
  • 85. 앱소개 83 검색앱을 사용하기 위해서는 검색 시 상품이 보여져야 하기 때문에 노출할 페이지에 해당 상품이 등록되어 있어야 하며, 검색할 쇼핑의 카테고리가 연결되어 있어야 합니다. 07. 메인에 검색 설정하기 디자인편집> 앱> 검색 앱의 검색을 노출할 위치에 드래그앤드롭으로 추가 후 설정을 통해 스킨을 선택할 수 있습니다. 설정 완료 후 웹사이트에서 검색하면 등록된 상품의 명칭으로 검색이 가능합니다.
  • 87. 앱소개 85 08. 주문관리하기 주문자가 무통장입금으로 주문 시 결제확인중으로 등록되며, 그 외 결제수단은 결제확인으로 등록됩니다. 결제확인중인 주문건의 입금 여부를 확인한 후, 결제확인으로 상태를 변경합니다. 상품을 배송했다면, 배송중으로 상태를 변경합니다. 상품 선택 > 배송중 선택 > 배송업체 선택 > 운송장번호 입력 > 변경 상품 배송완료 확인 후, 배송완료로 상태를 변경합니다. 배송완료 시, 마이페이지에서는 거래완료 버튼이 생성됩니다. 주문자가 거래완료 버튼 클릭 시 주문건은 거래완료로 이동됩니다. 거래완료는 관리자가 처리할 수 없습니다. 주문자가 마이페이지에서 거래완료로 처리해야 합니다. 단, 배송 완료 후 1주일이 지나면 자동으로 거래완료 처리되며, 에스크로 사용 시 거래완료 처리가 되어야 관리자(판매자) 계좌로 대금이 입급됩니다. 주문자가 구매한 물품을 반품 시, 반송중으로 처리하여 관리합니다. 무통장입금 주문 취소 시, 주문건을 주문취소완료로 상태를 변경하면 환불계좌를 입력할 수 있는 알림창이 생성됩니다. 그 외 결제수단은 자동으로 주문취소완료(자동 환불) 됩니다. 무통장입금 주문취소 상품선택 > 주문취소완료 > 환불계좌입력 > 완료 08-1. 결제확인중/결제확인 08-2. 배송중 08-3. 배송완료 08-4. 거래완료 08-5. 반송중 08-6. 주문취소중/주문취소완료 전체주문관리를 통해 모든 주문내역에 대한 관리를 할 수 있으며, 변경버튼을 통해 주문상태를 변경처리할 수 있습니다.
  • 88. 86 앱소개 09. 상품관리 운영모드> 상품관리> 상품후기관리 상품관리 목록에서 방문자가 작성한 상품의 후기와 상품의 문의를 확인 및 관리할 수 있습니다. 09-1. 상품후기관리 상품후기 관리에서 등록된 후기를 확인할 수 있습니다.
  • 89. 앱소개 87 운영모드> 상품관리> 상품문의관리 09-2. 상품문의관리 상품문의는 방문자가 로그인 없이 등록이 가능합니다. 상품문의관리에서 답변을 하면 자동적으로 답변상태가 YES로 변경됩니다.
  • 90. 88 앱소개 쇼핑몰을 운영하기 위해서는 통신판매업 신고를 먼저 하시기 바랍니다. 통신판매업은 전자상거래를 이용하는 분들이 의무이며, 통신판매업신고를 하지 않았을 경우 전자상거래에 대한 제한 및 벌금을 받게됩니다. STEP 01 사업자등록증 :세무서/ 홈텍스에서 발급가능 통신판매업 신고절차 STEP 02 구매안전서비스 이용확인증 :LGU+, 국민은행, 우리은행, NH농협은행 에서발급가능 STEP 03 쇼핑몰도메인: 두부플러스에서 도메인발급가능 STEP 04 호스트서버 소재지 두부플러스: 서울시 강남구 언주로616, 10층 (논현동, KIDC빌딩) STEP 05 온라인: 민원24 (공인인증서) 오프라인: 관할구청방문 STEP 06 3-5일소요 관할구청에서 신고증받기
  • 91. 플랜4. 두부플러스 레벨업 웹사이트의 디자인을 구성했다면, 해당 사이트의 정보를 관리할 수 있는 관리자의 꼼꼼한 관리가 필요합니다. 두부플러스에서 제공하는 두부디스크e로 웹사이트 파일을 관리 및 저장, 업로드 할 수 있습니다.
  • 92. 90 웹사이트꼼꼼하게관리하기 웹사이트 꼼곰하게 관리하기 - 디자인편집으로 웹사이트를 디자인했다면, 관리자가 웹사이트를 편리하게 관리 및 사용할 수 있도록 두부 플러스의 관리자 사용법을 안내해드립니다. 01. 관리자 페이지 접속하기 웹사이트 주소/admin ex) aaa.com/admin 웹사이트 상단메뉴의 [관리자]로 접속하시거나, [웹사이트 주소/admin] 을 입력 후 로그인하시면 바로 접속이 가능합니다. 관리자페이지에 접속 및 관리할 수 있는 권한에 따라 대표운영자와 운영자로 로그인이 가능합니다. 대표운영자와 운영자의 등록은 [운영모드> 환경설정> 운영보안관리> 운영자설정]에서 등록 후 관 리할 수 있습니다. 대표운영자와 운영자를 따로 설정하여 여러명의 운영자가 함께 관리할 수 있고, 다양한 상황에 맞춰 권한을 부여할 수 있습니다. 관리자는 웹사이트 회원관리에서 “특별회원” 등급으로 지정되어 있습니다. 두부플러스에서 제작 서비스를 받는 경우는 웹사이트소유자는 바로 특별 회원으로 지정되어 별도로 회원가입을 할 필요가 없습니다. “
  • 94. 92 웹사이트꼼꼼하게관리하기 02. 게시판 관리하기 운영모드> 앱> 게시판> 게시판목록 게시판은 관리자페이지에 접속 후 운영모드에서 관리가 가능하며, 웹사이트에서 직접 관리하기도 가능합니다. 02-1. 게시판 글쓰기 및 댓글등록하기 관리할 게시판의 체크박스를 체크하여 상단의 선택한 게시판을 ▼ 버튼을 통해 일괄설정의 게시판 설정으로 이동할 수 있으며, 아이콘의 설정 버튼을 클릭하여 고급설정, 항목설정, 권한설정의 정보를 수정할 수 있습니다. 작성된 게시글의 제목을 클릭하면 수정, 답변, 댓글 등록이 가능합니다.
  • 95. 웹사이트꼼꼼하게관리하기 93 02-2. 웹사이트에서 게시판 관리하기 설정의 고급설정과 권한설정을 통해 웹사이트 방문자에게 조건에 따라 권한을 설정할 수 있습니다. 고급설정에서 답글, 댓글 기능을 사용으로 변경하였다면 웹사이트에서 글쓰기, 답글, 댓글쓰기가 가능합니다. 웹사이트> 게시판
  • 96. 94 웹사이트꼼꼼하게관리하기 03. 회원관리하기 운영모드> 회원관리> 회원리스트 웹사이트의 가입회원은 회원리스트에서 관리하며, 회원정보 수정, 탈퇴처리, 회원등록처리, 등급 수정을 관리할 수 있습니다. 최종적으로 가입이 완료된 회원의 목록은 회원리스트에서 확인이 가능합니다. 회원가입환경설정을 통해 가입방식을 승인으로 체크하면 회원가입리스트의 가입대기회원에서 관리자승인이 있어 야 회원이 됩니다.
  • 97. 웹사이트꼼꼼하게관리하기 95 검색엔진 최적화(SEO)는 검색엔진에서 웹사이트 또는 웹페이지의 노출순위를 높일 수 있는 프로세스로 검색엔진이 내 웹사이트를 찾아 높은 순위로 랭크시킬 수 있는 기술을 뜻합니다. SEO의 설정은 웹사이트 홍보 및 마케팅을 위해 필수로 작성해야 하며 두부플러스는 검색엔진 최적화 작업을 손쉽게 할 수 있도록 SEO 설정 기능을 제공하고 있습니다. 운영모드> 환경설정> 사이트관리> SEO/SNS공유설정 04. SEO 등록하기 SEO/SNS공유 타이틀은 연관키워드를 구분하여 입력하시기 바랍니다. 검색결과에 반영되므로 컨텐츠를 정확하게 설명하는 제목을 만 드는 것이 가장 이상적입니다. 예) 홈페이지제작 I 반응형 홈페이지 만들기 I 사이트명 SEO/SNS공유 설명은 페이지를 설명하는 글을 간략하게 입력할수 있습니다. 검색결과의 제목 다음으로 노출됩니다. SEO키워드는 쉼표로 키워드를 입력할 수 있습니다. SNS공유 이미지는 사이트 SNS공유에 사용될 사이트를 대표할 이미지를 업로드하여 홍보효과를 높일 수 있습니다. 헤더코드는 헤더사이에 들어가는 메타코드를 입력합니다. 구글 및 다른 검색엔진에서 페이지 정보의 요약내용으로 보여지며, 구글 검색에서 결과 페이지 내용 미리보기로 사용 될 수 있으므로 정 확한 입력이 필요합니다. 예) Google 웹 마스터 도구 확인 메타태그
  • 98. 96 웹사이트꼼꼼하게관리하기 SEO에 관한 자세한 안내사항은 [두부플러스 웹사이트> 매뉴얼> 검색엔진 최적화]를 참고하시기 바랍니다.
  • 99. 두부디스크e활용하기 97 - 두부디스크e는 웹사이트 관리 및 업무용 데이터를 저장, 관리할 수 있는 웹클라우드 서비스입니다, - 웹사이트 관리자와 방문자가 함께 사용도 가능하며, 웹사이트 방문자는 기본 익명 사용자로 사용하게 됩니다. - 두부플러스에서는 파일 업로드 시 두부디스크를 사용하여 페이지의 이미지,동영상, 음악, 플래시를 업로드 할 수 있습니다. 01. 두부디스크e로 파일올리기 게시글 작성하기뿐만 아니라 회원에게 메일보내기에서도 동일하게 활용할 수 있습니다. [운영모드> 회원관리> 메일관리> 메일보내기> 메일쓰기 파일올리기] 웹사이트> 게시판> 파일올리기 운영모드> 앱> 게시판> 파일올리기 웹사이트 게시판 에디터의 이미지, 동영상, 음악, 플래시의 아이콘을 클릭하여 파일 및 웹상 주소를 업로드 할 수 있습니다. 운영모드 게시판의 글쓰기를 통해 이미지, 동영상, 음악, 플래시의 첨부는 두부디스크를 활용하여 업로드 할 수 있습니다. 웹상에 있는 파일 주소를 가져와 붙여넣기를 하거나, 내 PC나 두부디스크e에 저장되어 있는 파일을 작업대기열로 불러와 업로드 할 수 있습니다. 두부디스크e 활용하기
  • 100. 98 두부디스크e활용하기 02. 두부디스크로 업로드하기 웹상의 원하는 이미지를 찾은 후, 우클릭하여 이미지 주소를 복사합니다. 복사한 주소를 붙여넣은 후 체크버튼을 클릭하여 이미지를 확인합니다. 업로드 된 이미지는 추가버튼을 통해 저장할 수 있습니다. (이와 동일한 방법으로 이미지, 동영상, 음악, 플래시를 업로드 할 수 있습니다) 우측에서 이미지의 정렬을 편집할 수 있습니다. 02-1. 웹주소로 업로드하기
  • 101. 두부디스크e활용하기 99 02-2. 내 PC에서 업로드하기 업로드 버튼을 클릭 후 찾아보기를 클릭하여 내PC의 원하는 이미지를 선택하여 업로드 할 수 있습니다. (이와 동일한 방법으로 이미지, 동영상, 음악, 플래시를 모두 업로드 할 수 있습니다) 작업대기열로 업로드 된 이미지는 아래 선택이미지로 옮긴 후 추가버튼을 클릭하여 게시판의 내용에 노출되게 합니다. 우측에서 이미지의 크기와 정렬, 회전방향을 편집할 수 있습니다.
  • 102. 100 두부디스크e활용하기 03. 저장 후 웹사이트에 노출하기 두부에디터의 사용여부 설정은 [운영모드> 환경설정 > 웹사이트관리 > 웹사이트설정 > 텍스트에디터]에서 선택할 수 있습니다. 파일 좌상단의 아이콘이 표시되어야 웹사이트에 업로드할 수 있습니다. 작업대기열에 업로드 된 이미지를 아래의 선택대기열로 드래그앤드롭하여 옮긴 후 추가버튼을 클릭하면 게시판에 내용이 노출됩니다. [두부디스크e]를 클릭하면, 두부디스크에 업로드 된 파일을 확인할 수 있습니다.
  • 103. 두부디스크e활용하기 101 두부에디터(이미지에디터)는 이미지파일만 업로드 가능하고, 두부에디터(두부디스크연동)는 이미지, 동영 상, 음악, 플래시파일까지 업로드 가능합니다.
  • 104.
  • 105. 플랜5. 두부플러스 파워업 파워업에서는 방문자의 이탈율을 줄이고 웹사이트를 알차게 운영하실 수 있도록 안내해드립니다. 20년간 25만 개 이상의 웹사이트를 제작해 온 풍부한 디자인 제작경험과 노하우로 다양한 업종과 분야 의 고객들을 위한 업종/업태별 알맞는 컬러 찾기를 제공해드립니다. 또한 두부플러스에 대해 평소 궁금했던, 물어보기 어려웠던 질문들을 FAQ에서 확인하시기 바랍니다.
  • 106. 104 업종/업태별 추천 컬러의 느낌은 개인적인 차이가 날 수 있으며, 밝고 어두움의 톤에 따라서도 컬러가 가지는 분위기는 달라집니다. 두부플러스에서 제공하는 디자인 제작서비스를 통해 전문적인 컬러상담을 받아보실 수 있으며, 기획서를 토대로 매칭된 컬러의 분위기 를 찾아 로고 및 웹사이트작업을 진행합니다. 업종/업태별 컬러 찾기 업종 컬러 컬러분위기 음식 / 식품 / 유흥 레저 / 여행 / 문화 빨강 식욕과 공복감을 느끼는색 열정, 에너지, 행복, 사랑, 생명력, 활발하고 적극적인 분위기 부동산 / 임대 / 대여 쇼핑 / 편의 / 생활 / 가정용품 학원 / 학교 / 교육 노랑 친근하고 쾌활, 발랄함, 희망적, 햇빛, 젊음, 즐거움, 따뜻함 밝고 싱싱한 분위기 용역 / 전문서비스 주황 조화로움, 이국적, 명랑하고 따뜻한 분위기 건강 / 의료 / 의약 초록 건강과 안정감, 신선함 블안감 해소, 온화하고 자연적인 분위기 건축 / 설비 / 건설 / 자재 / 금융 / 보험 무역 / 법률 / 산업 / 제조 / 철강 비즈니스 / 전기 / 전자 / 가전 / 보안 기계 / 전기 / 전자 / 가전 / 보안 파랑 지적인, 신뢰도높은, 안정적인, 차분한 분위기 광고 / 출판 / 미디어 / 이벤트 보라 크리에이티브적인 신비감 고급스러운 분위기 광고 / 출판 / 미디어 / 이벤트 분홍 로맨틱한, 여성적인 분위기 기관 / 단체 / 종교 / 철학 도서 / 인쇄 / 문구 / 사무 회색 종교적인, 지적인, 도시적인 분위기 인테리어 / 가구 갈색 익숙하고 편안한 느낌 자연에 가까운색, 전통적이고 침착한 분위기 기관 / 단체 / 종교 / 철학 / 이사 용역 / 대행 / 농수산 / 축산 / 임업 광업 / 컴퓨터 / 정보통신 흰색 평온함, 조화, 진실, 밝고 청결함 깨끗하고 자연스러운 심플한 분위기 미용 / 패션 / 잡화 검정 고급스러움, 럭셔리함, 세련됨 권위있는, 모던한, 강하고 중후한 분위기
  • 107. 105 업종과 분야에 따른 신뢰도 높은 컬러를 활용하여 방문자의 호감도를 높이고 웹사이트의 이탈율을 줄여 구매로 연결될 수 있는 컬러찾기 를 확인해 보시기 바랍니다. 컬러이미지 음식 관련 업체 및 활동성이 많은 업종에서 사용되며, 색이 강렬하고 자극적이기 때문에 포인트 컬러로도 사용된다. 또한 빨강은 물건에 비해 가격이 싸다는 느낌으로 충동구매가 유도된다. 눈에 잘 띄며, 시선을 집중시키는 색이다. 골드를 대변하여 부를 불러오는 색으로 알려져 있으며 따뜻한 색으로 느껴지기 때문에 어린이와여성을 대상으로 사용되며, 쇼핑몰에서도 많이사용한다. 24시간 이용할 수 있는 심야비지니스 업종의 느낌도 있다. 업종 불문하고 조화가 잘되는 색으로 이목을 끌며, 악센트색으로 부분 포인트 컬러로도 사용된다. 오렌지색의 사용은 적당한 값이란 느낌으로 부담없는 쇼핑이 가능하다. 건강 하면 떠오르는 색으로 신선도가 높은 음식과 업종, 커피숍, 서비스 관련 업종에 잘 어울리며 주목도가 뛰어나 홍보에 유리한 오래 기억되는 컬러이다. 또한 초록색은 편안한 쇼핑으로 구매에 대한 만족감을 부여해 준다. 첨단기술, 금융, 생활건강, 병원의 업종과 업태에서많이사용되는컬러이다. 그렇기 때문에 차분하고 냉정한 비교구매가 가능한 색으로 활용된다. 주얼리, 의류, 속옷 관련 소규모 판매업종에서 고급스러움을 나타낼 수 있으며, 빨강색의 변화와 파랑의 안정이 섞인 색으로 몽환적인 느낌을 나타낸다. 여성을 돋보이게 하는 색으로 피부마사지나 화장품, 때로는 건강을 부각시키는 색으로도 사용되며, 남성에게는 순간적인 매력과 기념적 축하, 이벤트성 컬러로 사용된다. 승복이나 수녀복이 회색이듯 회색은 억제를 부각시키는 색이며, 종교나 기관, 단체의 지적인 분위기를 나타낸다. 또한 새롭고 세련된 분위기의 연출로 쇼핑에 대한 기대감이 부여되는 색이다. 갈색은 원목의 느낌을 주기 때문에 가구에 많이 사용되며 여성보다는 남성이 시선을 주는 색이다. 상품과 매장에 신뢰감과 고급스러움을 부여하여 격조 높은 쇼핑을 가능하게 한다. 무난하게 많이 활용되나 자칫 차갑게 느껴지는 단점도 있다. 흰색은 부담이 없고 개방적인 쇼핑이 가능하다. 미용실, 명품에 많이 보이는 검정색은 피로를 덜어주고 흥분된 심리를 차분하게 해주는 컬러이다. 검정색에 포인트컬러로 흰색, 회색, 분홍을 덧대주면 산뜻하고 청결한 분위기를 자아낼 수 있으며 컬러의 이미지가 강해 구매심리를 억제시킬 수도 있다는 점을 조심해야 한다.
  • 108. FAQ 두부플러스 FAQ를 통해 궁금증을 해결해보시기 바랍니다. 추가 문의사항은 유선 상담문의나 1:1 문의하기로 연락주시면 친절하게 답변해드립니다. Q 두부플러스는 타사와 어떤점이 다른가요? A1 외부 컨설턴트 없이 두부플러스 자사의 코딩, 디자이너가 1:1로 배치되어 고객님의 업종/업태에 따른 웹사이트를 전문적으로 기획 및 컨설팅하여 제작합니다. A2 보다 체계적이고 효율적인 웹사이트 운영을 위해 안정적인 서버관리와 다양한 앱기능을 꾸준히 출시하고 있습니다. 신생기업들과 차별화된 20년 이상의 우수한 자사 기술력과 운영실적을 바 탕으로 운영되고 있으며, 25만건 이상의 웹사이트를 제작해온 풍부한 경험과 노하우를 바탕으 로 기업에 최적화된 웹사이트 제작대행이 가능합니다. Q 웹사이트를 만들려고하는데, 어떤것부터 시작하면 좋을까요? A 두부플러스 마스터 플랜의 STEP별 구성을 활용하여 단계별로 만드시는 것을 추천해드립니다. 디자인을 조금 더 차별화되게 하고 싶으시거나 전문가의 도움이 필요하시면 합리적인 가격으로 두부플러스 제작센터에서 웹사이트를 제작해 드립니다 Q 웹사이트 고유 도메인 주소를 사용하고싶습니다. A 업그레이드해서 유료로 사용하시면 두부플러스 도메인을 고유주소로 사용하실 수 있습니다. 예) http://aaa.dubuplus.com -> http://aaa.com 으로 사용가능합니다. Q 알림이 오지 않아요. 웹사이트에 문제가 있는걸까요? A 알림이 오려면 우선 웹사이트에 두부캐쉬가 충전되어 있어야 합니다. 두부캐쉬는 유료서비스 및 SMS알림 등을 이용시 현금처럼 사용할 수있는 사이버머니입니다. 캐쉬충전을 먼저 확인해보시기 바랍니다.
  • 109. FAQ Q 두부플러스 이용 시 불편한 점은 어디에 문의해야 할까요? A 인터넷 경로로는 1:1 문의란에 남겨주시거나, 이메일을 보내주시면 상담사가 회신을 드립니다. 유선으로 문의주실 때는 담당상담사에게 문의주시거나 고객센터로 연락주시면 친절하게 답변 해드립니다. Q 사용하고 싶은 기능이 있는데 두부플러스에는 없는 것 같아요. A 무료로 사용되는 앱의 기능 외에는 제작서비스를 통해 사용자의 웹사이트에만 맞춤형으로 제작 드리는 방법이 있습니다. 기능이 업그레이드되었으면 하거나 개선되었으면 하는 사항은 1:1 문의하기나 이메일로 내용을 보내주시면 최대한 반영이 가능하도록 검토하겠습니다. Q 1:1 문의하기 답변은 어디에서 확인할 수 있어요? A 마이페이지 1:1 문의하기를 통해 질문했던 내용은 고객센터 상담사가 유선으로 답변을 드리며, 유선으로 답변을 받으시기 어려운 경우 메일로 내용을 전달드립니다. Q 웹사이트 접속이 안됩니다. A1 사용기간이 경과한 웹사이트는 접속이 불가합니다. 결제 만료 이전에 계약연장 후 사용료를 납부해주시기 바랍니다. A2 사용하고 계신 웹사이트의 인터넷이 불안정할 경우에도 접속이 불가합니다. 브라우저 상단> 인 터넷옵션> 임시인터넷파일 삭제를 해보시거나 모바일로 접속해보시기 바랍니다. A3 두부플러스의 서비스점검이 진행중입니다. 보다나은 서비스 제공을 위해 새벽시간대에 정기적으로 웹사이트 점검을 진행하고있습니다. 해당 내용은 고객지원> 새소식 페이지에서 확인할 수 있습니다.
  • 110. FAQ Q 두부플러스의 제작서비스란 무엇인가요? A 웹사이트를 스스로 제작하기 어렵거나 차별화된 웹사이트를 원하시는 분들을 위해 두부플러스 제작팀에서 1:1 상담을 통해 맞춤형 웹사이트를 제작해드립니다. 이미 웹사이트를 가지고 계신 고객님도 리뉴얼 제작을 맡기실 수 있으며, 제작 후에는 1:1 사후 서비스도 꾸준히 받으실 수 있습니다. Q 두부플러스의 제작서비스는 어떻게 신청하나요? A 인터넷 경로로 1:1 문의창에 남겨주시거나 이메일을 보내주시면 담당 상담사가 연락을 드립니 다. 고객센터로 연락을 주셔도 신청이 가능합니다. Q 무료로 사용하는 웹사이트 제작과 유료로 사용하는 제작이 무슨 차이가 있을까요? A 다년간 웹사이트 디자인을 제작해왔던 웹전문 디자이너가 업종/업태에 따라 차별화된 디자인을 제작하며, 고객을 사로잡는 구성으로 고객님의 웹사이트를 디자인 및 관리해 드립니다. Q 두부플러스 웹사이트에서 사용하고 싶은 유료앱이 있는데 결제는 어떻게 하나요? A 무료로 제공되는 앱 외에 추가적인 유료앱을 이용하시려면 두부플러스 사용을 유료로 전환하신 후 사용하고 싶은 앱을 월단위로 구매하시면 됩니다. Q 두부플러스의 가입비용이나 제작비용을 알고싶어요. A 가입비용은 별도로 없으며, 회원가입을 하시면 무료로 웹사이트를 사용하실 수 있습니다. 단, 프리미엄, 이커머스, 부킹으로 업그레이드 또는 디자인제작서비스는 별도의 비용이 발생됩 니다. 자세한 사항은 고객센터에 문의주시기 바랍니다.
  • 111. FAQ Q 유료제작서비스를 받으면 제작만 해주시는 건가요? A 1:1 상담서비스로 두부플러스 전문 상담사가 관리자님의 웹사이트를 사후에도 관리해드립니다. 페이지 디자인부터 사후 상담서비스까지 편리한 맞춤형 관리서비스를 경험해보시기 바랍니다. Q 웹사이트 하단에 두부플러스 광고를 삭제하고싶습니다. A 업그레이드해서 유료로 사용하시면 두부플러스 광고 삭제 후 사용할 수 있습니다. Q 웹사이트의 계약기간이 지나면 접속이 중단되나요? A 계약기간이 지난 후 웹사이트는 차단되며, 관리자로 로그인 시 서비스 기간이 만료되었다는 메 시지가 노출됩니다. 계약만료기간 30일, 15일, 7일, 1일 이전에 사용자님께 메일 및 SMS로 만 료예정 안내를 전달드리고 있으므로 계약기간 이전에 계약연장 후 사용료를 납부하시면 이용이 가능합니다. 안정적인 웹사이트를 위해 계약기간 이전에 계약연장을 진행하시기 바랍니다. Q 웹사이트를 임시로 중단하고 싶은데 어떻게 해야하나요? A 제작서비스 기간은 중단되지 않으나 웹사이트는 임시페이지가 노출되도록 설정할 수 있습니다. [운영모드> 환경설정> 웹사이트노출> 노출안함] 체크하시면 됩니다. Q 두부플러스 상품결제 시 좀 더 할인된 가격으로 이용하려면 어떻게 해야 하나요? A 두부플러스 계정업그레이드나 앱구매 시 자동결제를 신청하시면 할인된 금액으로 이용할 수 있 습니다. 계정업그레이드는 자동결제 또는 일반결제로 구매할 수 있으며, 자동결제 주기는 연간 또는 월간으로 선택할 수 있습니다. (월간자동결제, 연간일반결제, 연간자동결제가 가능하며, 연 간자동결제 시 최대 20% 할인) 앱구매는 월간 자동결제로만 구매가 가능합니다.
  • 112. * 본 [두부플러스 마스터플랜] 내용의 무단전재를 금하며, 가공/인용할 때에는 반드시 출처를 밝혀주시기 바랍니다. * 두부플러스 기능의 상세한 설명 및 포트폴리오는 http://master.dubuplus.com/ 을 참고하시기 바랍니다. * 두부플러스 사용에 대한 문의는 아래의 연락처로 문의 바랍니다. 두부플러스 고객센터 Tel 02-6901-6403 Fax 02- 6927-2691 Mail webmaster@dubuplus.com Adress 121-734 서울특별시 마포구 마포대로 4다길 41(마포동, 마포타워빌딩) 2층 ㈜예스콜닷컴 이용가이드ㅣ마스터플랜ㅣ 2018년 06월 01일 VER