Page 1


INDEX Plan 01. 두부플러스 워밍업 두부플러스 소개 두부플러스 구조 두부플러스 페이지 구조 웹사이트 화면구성 두부플러스 기능 용어 설명

p3 p4 p6 p8 p12

Plan 02. 두부플러스 밸런스업 웹사이트 만들기 STEP별 구성 회원가입 및 기본정보 설정하기 페이지 생성하기 서브컨텐츠 만들기 - 1 텍스트 서브컨텐츠 만들기 - 2 이미지 서브컨텐츠 만들기 - 3 동영상 서브컨텐츠 만들기 - 4 지도 서브컨텐츠 만들기 - 5 소스코드 게시판 생성하기 페이지에 연결하기 메인페이지 구성하기 - 1 로고 메인페이지 구성하기 - 2 슬라이드쇼 메인페이지 구성하기 - 3 팝업 메인페이지 구성하기 - 4 슬라이더갤러리 모바일웹사이트 편집하기

p22 p24 p33 p35 p37 p38 p39 p40 p41 p47 p48 p50 p52 p54 p57

Plan 03. 두부플러스 초이스업 문자상담 퀵메뉴 소셜스트림 숙박예약 쇼핑몰

p60 p62 p64 p68 p77

Plan 04. 두부플러스 레벨업 웹사이트 꼼꼼하게 관리하기 두부디스크e 활용하기

p90 p97

Plan 05. 두부플러스 파워업 업종/업태별 컬러 찾기 FAQ

* 두부플러스 마스터플랜은 웹사이트제작에 꼭 필요한 기능 위주로 설명되어있습니다. 기능 상세설명은 [ 두부플러스 웹사이트 > 매뉴얼 ] http://master.dubuplus.com을 참고해주시기 바랍니다.

p104 p106


웹사이트만들기STEP별구성

플랜2.

두부플러스 밸런스업 웹사이트를 제작하기에 앞서 두부플러스에서 회원가입을 하고 사이트에 필요한 페이지를 생성합니다. 페이지는 서브페이지를 이어주는 매개체가 됩니다. 서브페이지에서는 서브 컨텐츠와 게시판을 활용하여 상세한 설명이 가능하기 때문에, 여러 페이지 를 생성하여 페이지별 주제에 맞는 컨텐츠를 작성하는 것이 가장 좋은 방향 입니다. 한 서브페이지에 모든 컨텐츠를 담게 된다면 페이지의 내용이 많아져 방문자의 가독성이 떨어지며, 스크롤을 계속 내리며 컨텐츠를 확인해야 하는 단점이 있습니다. 서브페이지를 완성하셨다면, 웹사이트의 얼굴인 메인페이지를 주목도 있게 구성하시기 바랍니다. 메인페이지에 꼭 필요한 요소와 앱을 확인하셔서 이탈율이 적고 매출이 올라가는 메인페이지를 만드실 수 있습니다.

21


웹사이트만들기STEP별구성

웹사이트만들기 STEP 별구성 두부플러스 마스터 플랜에서는 웹사이트 구조 및 웹사이트를 만드는 STEP별 구성을 알아볼 수 있으며, 앱과 요소, 두부플러스 기능 및 환경의 상세 설명은 [ 두부플러스 웹사이트 > 매뉴얼 ] http://master.dubuplus.com 에서 확인이 가능합니다.

STEP

STEP

STEP

STEP

01

02

03 ~ 07

08

기본정보입력

페이지 생성하기

서브컨텐츠만들기

게시판 생성하기

텍스트 / 이미지 / 동영상 / 지도 / 소스코드 운영모드 > 환경설정

22

디자인편집 > 페이지

운영모드 > 앱 > 서브컨텐츠

운영모드 > 앱 > 게시판


웹사이트만들기STEP별구성

STEP

STEP

STEP

09

10 ~ 13

14

페이지 연결하기

메인페이지 구성하기

모바일사이트 편집하기

OPEN

PC, 모바일 웹사이트 완성

로고 / 슬라이드쇼 / 팝업/슬라이더갤러리 디자인편집 > 페이지

디자인편집 > 앱, 요소

디자인편집 > 모바일

23


앱소개

58


웹사이트만들기STEP별구성

STEP02. 페이지 생성하기 - 페이지는 생성 후 웹사이트 메인페이지와 서브페이지 [ header ] 부분에 노출됩니다. - 기본페이지는 [ 디자인편집 > 구성요소 > 상단메뉴 또는 하단메뉴 ]의 적용된 부분에 노출됩니다. - 페이지만들기는 선택한 APP으로 페이지가 연결되며, 페이지이름이 메뉴바형태로 웹사이트에 노출됩니다. [ 디자인편집 > 구성요소 > 네비게이션 ]에서 확인할 수 있습니다.

디자인편집 > 페이지 > 기본페이지

01. 기본페이지 설정하기

기본페이지 설정은 홈, 로그인, 웹사이트맵, 마이페이지와 같은 상단메뉴와 개인정보처리방침, 이용약관 등 하단메뉴를 설정하는 작업으로 페이지의 이름 확인 및 수정 후 APP스킨, 타겟, 페이지레이아웃, SEO 설정 내용 입력 후 저장합니다.

SEO주소, 타이틀, 키워드, 설명은 검색엔진과 브라우저에 노출되기 때문에 페이지 내용을 정확하게 요약하여 입력해 주시기 바랍니다. [ 두부플러스 마스터플랜 > Plan 04. 두부플러스 레벨업 > 웹사이트 꼼꼼하게 관리하기 ] 참조. 33


두부플러스소개

102


웹사이트만들기STEP별구성

STEP02. 페이지 생성하기 - 페이지는 생성 후 웹사이트 메인페이지와 서브페이지 [ header ] 부분에 노출됩니다. - 기본페이지는 [ 디자인편집 > 구성요소 > 상단메뉴 또는 하단메뉴 ]의 적용된 부분에 노출됩니다. - 페이지만들기는 선택한 APP으로 페이지가 연결되며, 페이지이름이 메뉴바형태로 웹사이트에 노출됩니다. [ 디자인편집 > 구성요소 > 네비게이션 ]에서 확인할 수 있습니다.

디자인편집 > 페이지 > 기본페이지

01. 기본페이지 설정하기

기본페이지 설정은 홈, 로그인, 웹사이트맵, 마이페이지와 같은 상단메뉴와 개인정보처리방침, 이용약관 등 하단메뉴를 설정하는 작업으로 페이지의 이름 확인 및 수정 후 APP스킨, 타겟, 페이지레이아웃, SEO 설정 내용 입력 후 저장합니다.

SEO주소, 타이틀, 키워드, 설명은 검색엔진과 브라우저에 노출되기 때문에 페이지 내용을 정확하게 요약하여 입력해 주시기 바랍니다. [ 두부플러스 마스터플랜 > Plan 04. 두부플러스 레벨업 > 웹사이트 꼼꼼하게 관리하기 ] 참조. 33


웹사이트만들기STEP별구성

디자인편집 > 페이지 > 페이지만들기

02. 내 사이트에 맞게 페이지 추가하기 페이지만들기에서는 메뉴바에 작성될 페이지 이름( 메뉴명 )을 입력합니다. +페이지추가 버튼을 클릭하여 생성된 페이지의 이름을 입력합니다. 두부플러스의 페이지는 최대 3Depth까지 설정 할 수 있으며, 생성 개수는 제한이 없습니다. 여러 페이지를 만드신 후 숨김버튼을 클릭하여 비활성화 할 수 있으므로 웹사이트에 맞는 페이 지를 생성해 보시기 바랍니다. APP선택은 [ 서브페이지와 게시판을 페이지에 연결하기 ]에서 설명드릴 예정입니다. STEP을 잘 따라오신 후 [ STEP09 ]에서 확인 하시기 바랍니다. 페이지 생성하기 [ STEP02 ]에서는 페이지 이 름( 메뉴명 ), 타켓, 페이지레이아웃, SEO설정 내용을 입력 후 저장하기를 클릭해주시면 됩니 다. 커서버튼을 클릭하면, 페이지만들기의 목록에 서 생성된 페이지의 위치를 편집할 수 있으며, 페이지 숨기기가 가능합니다. 목록의 페이지명을 마우스 위아래로 드래그하 여 메뉴순서를 변경하거나 왼쪽, 오른쪽으로 드 래그하여 하위 페이지를 만들 수 있습니다. 페이 지숨기기는 메뉴(네비게이션)에 페이지가 보이 지 않지만 실제로는 존재합니다. 페이지를 사용 안 하시려면 삭제하시거나, APP선택에서 링크 없음으로 변경하시기 바랍니다.

34


웹사이트만들기STEP별구성

STEP03. 서브컨텐츠 만들기1 - 텍스트 - 서브컨텐츠는 웹사이트의 컨텐츠를 구성하는 페이지입니다. - 서브컨텐츠 앱으로 이 페이지를 디자인 및 구성할 수 있습니다.

운영모드 > 앱 > 서브컨텐츠

서브컨텐츠 생성을 클릭하여 생성할 서브컨텐츠명을 입력 후, 서브컨텐츠 설정 페이지로 이동합니다.

페이지에 연결이 안 된 서브컨텐츠는 검정아이 콘으로,페이지에 연결된 서브컨텐츠는 컬러아이 콘으로 보여지며 생성된 서브컨텐츠는 복사 및 삭제가 가능합니다.

STEP03에서는 서브컨텐츠 앱으로 서브컨텐츠를 만들 수 있는 방법을 소개하며 텍스트, 이미지, 동영상, 지도, 소스코드 를 삽입하여 원하는 형태의 서브컨텐츠를 생성하는 방법을 살펴보겠습니다 35


웹사이트만들기STEP별구성

서브컨텐츠 > 글자요소 > 제목

글자요소의 제목 및 단락을 노출할 위치에 드래그 앤 드롭하여 추가합니다. 제목의 내용을 입력하려면 더블클릭 후 텍스트를 입력할 수 있습니다. 생성된 텍스트 박스에서 스타일, 글자색, 크기, 간격 등을 수정하여 서브페이지의 제목이 명확하게 설명될 수 있도록 편집합니다. 단락 또한 더블클릭하여 원하는 내용을 작성 후 수정할 수 있습니다. 단락에 상세정보를 입력한다면 방문자에게 좀 더 쉬운 정보를 전달할 수 있습니다.

제목과 단락의 내용입력 후 설정버튼을 통해 타이 틀과 단락에 맞는 텍스트 기준크기를 변경할 수 있으며, 링크를 적용할 수 있습니다.

36


웹사이트만들기STEP별구성

STEP04. 서브컨텐츠 만들기2 - 이미지 - 이미지를 업로드하여 서브컨텐츠에 시각적인 이미지 정보를 한눈에 전달할 수 있습니다. 이미지를 추가하여 서브컨텐츠를 활용해 보시기 바랍니다.

서브컨텐츠 > 미디어요소 > 이미지

미디어요소의 이미지를 드래그앤드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.

이미지요소의 목록에서는 이전에 이미 생성해 놓은 기존이미지 삽입을 통해 원하는 이미지를 선택 후 업로드하거나, 신규이미지 삽입의 이미지추가 버튼 을 통해 원하는 이미지를 업로드 할 수 있습니다.

37


웹사이트만들기STEP별구성

STEP05. 서브컨텐츠 만들기3 - 동영상 - 원하는 동영상을 업로드하여 이미지에 국한되었던 정보를 영상으로 풀어 더 상세하고 역동적으로 내용을 설명할 수 있습니다. - 동영상은 방문자의 이목을 끄는 능력이 탁월하여 시각적 스토리텔링 도구로 사용할 수 있습니다.

서브컨텐츠 > 미디어요소 > 동영상

미디어요소의 동영상을 드래그 앤 드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.

동영상 설정은 URL 주소입력과 소스코드 연결 방 식 이 있 습 니 다. URL입 력 은 Youtube, Vimeo, 다 음, 판 도 라TV 에 서 만 가 능 하 지 만, 소 스 코 드 (iframe)는 제한 없이 연결할 수 있습니다.

38


웹사이트만들기STEP별구성

STEP06. 서브컨텐츠 만들기4 - 지도 - 지도 앱의 사용으로 위치정보와 주소를 방문자에게 알려줄 수 있으며 메뉴의 찾아오시는 길, 위치정보안내 페이지로 활용됩니다. 마커기능을 사용한다면 지도에서 업체의 위치를 정확하게 표시할 수 있습니다.

서브컨텐츠 > 앱 > 지도

앱의 지도를 드래그 앤 드롭하여 노출할 위치에 추가합니다. 설정을 클릭하여 목록에서 지도 생성을 합니다. 생성할 지도명을 입력 후 API KEY로 지도 종류를 선택합니다.

구글, 네이버, 다음지도를 사용하기 위해서는 API KEY값이나 ID값을 입력해야 이용할 수 있습니다. KEY값은 [ 디자인편집 > 앱 > 지도, 운영모드 > 환경설정 > 외부API연동 > 지도 ]에서 설정할 수 있으며 설정된 정보로 연동됩니다.

지도 API 연동 설정하기는 [ 두부플러스 웹사이트 > 메뉴얼 > 외부API연동 ] http://master.dubuplus.com/외부API연동을 확인해주시기 바랍니다. 39


웹사이트만들기STEP별구성

STEP07. 서브컨텐츠 만들기5 - 소스코드 - 두부플러스에서 코딩은 코드셀이라는 미디어요소로 명칭되며 소스코드(코딩)를 사용하여 서브컨텐츠를 구현할 수 있습니다. 코딩을 활용하여 고급 편집기능으로 좀 더 다양한 스타일의 디자인으로 완성할 수 있습니다

서브컨텐츠 > 미디어요소 > 코드셀

미디어요소의 코드셀을 드래그 앤 드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.

코드요소 설정영역 안에 소스코드를 입력하여 삽입하면 자바스트립트, HTML, CSS와 같은 코 드로 서브컨텐츠를 생성할 수 있습니다.

40


두부플러스소개

102


웹사이트만들기STEP별구성

STEP10. 메인페이지 구성하기 - 1 로고 - 로고는 방문자가 웹사이트를 방문 시 가장 먼저 시선이 가는 메인페이지( 메인레이아웃 ) 상단에 위치해 있습니다. 최근 들어 홈으로 가기 버튼으로 방문자가 로고를 클릭하기 때문에 로고의 중요성은 더 커지고 있습니다. 웹사이트를 상징하는 업체 로고를 이미지나 텍스트를 활용하여 트렌디하면서도 돋보이도록 손쉽게 제작해 보시기 바랍니다.

디자인편집 > 구성요소 > 로고

01. 텍스트로고 만들기 구성요소의 로고를 드래그 앤 드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.

로고의 텍스트로고를 클릭하여 업체명을 입력 후 글꼴, 색상, 크기,간격을 조정하여 텍스트로 로고를 만들 수 있습니다.

48


웹사이트만들기STEP별구성

02. 이미지로고 만들기 로고의 이미지로고를 클릭하여 이미지를 추가할 수 있습니다.

이미지 크기는 웹사이트 위치 및 비율에 따라 수정할 수 있으며, 레티나이미지를 적용하여 이미지 사이즈가 줄어들어도 선명한 화질의 이미지로 사용가능하도록 설정합니다.

로고 이미지와 텍스트의 컬러를 정할 때, 두부플러스 마스터플랜 Plan 04. 레벨업의 [ 업종 및 업태별 컬러이미지 ]를 확인하신 후, 로고의 컬러를 정하시면 웹사이트가 조금 더 돋보이는 컬러를 활용할 수 있습니다. 49


웹사이트만들기STEP별구성

STEP11. 메인페이지 구성하기 - 2 슬라이드쇼 - 메인의 슬라이드쇼는 메인화면의 분위기를 결정지을 수 있는 중요한 이미지이며, 방문자에게 가장 처음 노출되는 이미지 페이지입니다. 눈에 띄는 슬라이드쇼를 제작한다면, 방문자의 호감도 상승 및 웹사이트 이탈율을 줄일 수 있습니다.

디자인편집 > 앱 > 슬라이드쇼 앱의 슬라이드쇼를 드래그 앤 드롭하여 노출할 위치에 추가 후 설정을 클릭합니다.

슬라이드쇼 목록에서는 이전에 이미 생성해놓은 슬라이드 목록을 확인할 수 있으며 목록에서 선택한 슬라이드를 선택하여 레이아웃에 노출할 수 있습니다. 슬라이드쇼 목록의 설정버튼을 클릭하면, 현재 구성되어 있는 슬라이드쇼를 수정할 수 있습니다.

슬라이드쇼의 효과를 클릭하시면, 선택된 슬라이드쇼의 이동/페이지 스킨, 애니메이션, 자동재생 등 슬라이드쇼 효과를 적용할 수 있습니다.

50


웹사이트만들기STEP별구성

목록의 슬라이드쇼 생성을 클릭하거나 작업된 슬라이드쇼의 설정을 클릭하면 슬라이드를 새롭게 만들거나 수정할 수 있는 페이지로 이동됩니다.

해당 작업창에서 요소추가의 텍스트, 이미지 버튼으로 원하는 슬라이드를 구성할 수 있습니다.

슬라이드 추가 버튼을 클릭하면 새로운 슬라이드를 구성할 수 있는 빈 화면이 생성되고, 요소추가에서 사용할 요소(텍스트, 이미지, 버튼, 동영상)를 클릭하여 슬라이드의 화면을 구성할 수 있습니다.

상단바의 버튼을 통해 미리보기, 이전작업 및 이전에서 이후 작업환 경으로 되돌릴 수 있습니다.

슬라이드쇼의 전체 영역설정을 클릭하면 높이, 배경 이미지, 배경색, 테두리, 링크를 설정 할 수 있으며 모 든 슬라이드에 동시 적용됩니다.

만들어진 슬라이드는 복사, 숨김, 삭제가 가능합니다.

51


웹사이트만들기STEP별구성

STEP12. 메인페이지 구성하기 - 3 팝업 - 팝업앱을 통해 중요한 공지나 이벤트를 방문자에게 알림으로써 웹사이트의 홍보 및 마케팅을 강화할 수 있습니다. 설정을 통해 PC나 모바일에만 노출이 가능하고, 노출기간 또한 설정할 수 있어 배너와는 차별화된 홍보수단으로 활용됩니다.

운영모드 > 앱 > 팝업

01. 팝업 생성하기 팝업 생성을 클릭하여 생성할 팝업명을 입력 후, 팝업 설정 페이지로 이동합니다.

이전에 이미 저장해 놓은 레이어 팝업의 아이콘을 클릭하면, 팝업설정 페이지로 이동되어 수정할 수 있습니다.

버튼을 클릭하면 수정 및 복사, 삭제가 가능합니다.

팝업설정에서 팝업의 노출선택, 팝업형태, 노출기간, 창크기, 창위치, 창닫기 옵션의 설정이 가능합니다.

팝업설정을 통해 여러 개의 팝업을 동시에 노출할 수 있으며 노출위치, 노출기간을 선택할 수 있고, 창의 크기 및 옵션 또한 설정할 수 있습니다. 52


웹사이트만들기STEP별구성

02. 팝업 편집하기

해당 작업창에서 요소추가의 텍스트,이미지 버튼으로 원하는 팝업창을 구성할 수 있습니다.

각 요소의 이동, 순서변경, 추가 및 디자인을 구성할 수 있습니다.

PC와 모바일의 미리보기를 통해 팝업위치를 확인하여 지정할 수 있으며, 팝업의 버튼을 통해 바로가기가 가능합니다. 노출을 선택하면 팝업 생성 후 바로 웹사이트에 반영됩니다. 53


두부플러스 - 웹사이트 만들기  

① 기본정보 입력 ② 서브콘텐츠 ③ 메인 페이지 제작 ④ 제작한 서브콘텐츠 서브페이지 연결

두부플러스 - 웹사이트 만들기  

① 기본정보 입력 ② 서브콘텐츠 ③ 메인 페이지 제작 ④ 제작한 서브콘텐츠 서브페이지 연결