두부플러스

📝 상세 설명

[AI 분석 요약] 두부플러스는 포토샵과 코딩 없이 운영모드와 디자인편집 기능으로 웹사이트와 모바일 사이트를 한 번에 제작할 수 있는 웹사이트 빌더입니다. 드래그 앤 드롭 방식으로 반응형 웹사이트를 쉽게 만들 수 있으며, 기업홍보용 웹사이트부터 쇼핑몰, 숙박예약 사이트 등 다양한 용도로 활용 가능합니다. 사용자는 텍스트, 이미지, 동영상, 지도, 소스코드 삽입 및 게시판, 소셜스트림, 문자상담 등 다양한 앱을 활용하여 컨텐츠를 구성할 수 있습니다. [혜택] 1년 자동결제 시 20% 할인 적용. [매체 소개 (원본)] 똘똘한 홈페이지 제작 플랫폼 두부플러스. PC뿐 아니라 모바일에 최적화된 반응형 홈페이지를 만들 수 있습니다. [매체 제안서 전문] INDEX Plan 01. 두부플러스 워밍업 두부플러스 소개 두부플러스 구조 두부플러스 페이지 구조 웹사이트 화면구성 두부플러스 기능 용어 설명 Plan 02. 두부플러스 밸런스업 웹사이트 만들기 STEP별 구성 회원가입 및 기본정보 설정하기 페이지 생성하기 서브컨텐츠 만들기 - 1 텍스트 서브컨텐츠 만들기 - 2 이미지 서브컨텐츠 만들기 - 3 동영상 서브컨텐츠 만들기 - 4 지도 서브컨텐츠 만들기 - 5 소스코드 게시판 생성하기 페이지에 연결하기 메인페이지 구성하기 - 1 로고 메인페이지 구성하기 - 2 슬라이드쇼 메인페이지 구성하기 - 3 팝업 메인페이지 구성하기 - 4 슬라이더갤러리 모바일웹사이트 편집하기 Plan 03. 두부플러스 초이스업 문자상담 퀵메뉴 소셜스트림 숙박예약 쇼핑몰 Plan 04. 두부플러스 레벨업 웹사이트 꼼꼼하게 관리하기 두부디스크e 활용하기 Plan 05. 두부플러스 파워업 업종/업태별 컬러 찾기 FAQ p3 p4 p6 p8 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을 참고해주시기 바랍니다. 두부플러스소개 2 플랜1. 두부플러스 워밍업 두부플러스는 포토샵과 코딩이 필요없이 운영모드와 디자인편집 기능으로 웹사이트와 모바일사이트를 한 번에 제작할 수 있도록 구성되었습니다. 워밍업에서는 두부플러스를 처음 사용하시는 사용자를 위해 웹사이트 구조와 메인페이지와 서브페이지 구성화면을 상세하게 설명해드립니다. 운영자의 편리성을 담은 운영모드와 디자인활용도가 높은 디자인편집 용어를 확인하셔서 두부플러스를 시작하시고 사용하시는데 손쉽게 활용하시기 바랍니다. 두부플러스소개 3 두부플러스 소개 두부플러스에서 웹사이트를 제작하면 모바일과 PC에서 동시에 노출되며 한 번의 제작으로 모바일컨텐츠까지 유용하게 사용하실 수 있습니다. 기업홍보용 웹사이트뿐만 아니라 장바구니와 결제시스템(PG)을 장착하여 쇼핑몰과 숙박예약과 같은 다양한 웹사이트를 제작하실 수 있습니다. 클릭만으로 쉽게 제작하는 빌더 코딩할 필요없이 반응형 웹사이트를 만들 수 있습니다. 드래그앤드롭으로 기술적 지식 없이도 세련되고 전문적인 웹사이트를 쉽게 만들 수 있습니다. 두부플러스구조 4 두부플러스 구조 디자인편집 디자인편집에서는 사용자가 직접 레이아웃을 만들고 요소와 앱을 추가하여 컨텐츠를 구성할 수 있습니다. 웹사이트의 메인 페이지와 서브 페이지를 만들 수 있으며 코딩과 포토샵 없이 마우스 드래그 앤 드롭으로 편리하게 디자인 제작이 가능 하도록 구성된 화면입니다. 웹사이트에 구성할 요소들을 충분히 생각해 보신 후 기본적으로 사이트에 꼭 필요한 텍스트, 이미지 등을 추가하시기 바랍니다. 기본 구성을 생각하셨다면, 좌측의 앱과 요소를 디자인할 수 있는 우측 섹션으로 드래그하여 원하는 위치에 드롭 후 컨텐츠의 설정에 따라 디자인하며 편집할 수 있습니다. 쇼핑이나 숙박 예약 앱으로는 판매와 예약이 가능한 웹사이트를 구성할 수 있으며, 문자상담과 소셜스트림 앱을 통해서는 숙박 예약 고객과 소통이 가능한 웹사이트를 구현할 수 있습니다. 두부플러스의 디자인편집은 미리보기가 가능하며, 작업한 화면이 그대로 나의 사이트로 반영되기 때문에 보기 쉽고 사용하기 편리한 장점이 있습니다. 두부플러스로 웹사이트를 만들려면, 디자인편집과 운영모드의 주요기능을 다를 줄 알아야합니다 두부플러스구조 5 운영모드 운영모드는 관리자가 웹사이트를 운영하기 위해 필요한 관리 및 환경설정을 포함하고 있습니다. 게시글 및 정보를 기록하고 회원을 관리할 수 있는 환경설정과 회원관리, 웹사이트의 인기 있는 페이지와 이전 접속경로를 확인 할 수 있는 로그분석이 가능한 통계, 웹사이트 페이지마다 다양한 스타일로 글과 사진을 등록 및 관리할 수 있는 게시판, 이 외 쇼핑몰 사용자 를 위해 상품관리, 주문관리, 마켓관리 기능도 구성되어 있습니다. 다양한 기능을 가진 앱들과 운영모드의 세부 내용은 웹사이트를 만들고 난 후에도 지속적으로 확인이 필요한 부분입니다. 손에 익도록 하고 눈에 익히셔서 운영과 정보관리에 편리하고 스마트하게 이용하시기 바랍니다. 우상단의 디자인편집 버튼을 클릭하면, 디자인편집 페이지로 이동되며, 내 아이디를 클릭하면 나의 사이트로 바로가기나 로그아웃을 할 수 있습니다. 버튼은 두부플러스를 사용하시다가 궁금한 점을 바로 확인할 수 있는 고객지원센터 페이지로 이동됩니다. 템플릿으로 디자인하여 웹사이트를 만드는 것은 누구나 쉽게 할 수 있지만 웹사이트를 방문자가 편리하게 이용하려면, 관리자가 운영 모드의 세부내용에 대해 상세하게 정보를 입력해야 합니다. 운영모드를 스마트하게 활용하신다면, 조금 더 안정적이고 전문적인 웹사이트를 구현하실 수 있습니다. 이에 두부플러스에서는 사용자의 편의와 웹사이트를 통한 매출증대를 위해 꾸준한 기능업데이트를 진행하고 있습니다. 실제 코딩이나 포토샵을 다루지 못해도 손쉽게 웹사이트를 제작할 수 있도록 구성되어 있습니다. 두부플러스페이지구조 6 두부플러스 페이지구조 두부플러스는 갯수 제한없이 3Depth까지 페 이지(메뉴)를 생성할 수 있으며, 설정된 페이 지는 [ 디자인편집 > 요소 > 네비게이션 ]에 노출됩니다. 두부플러스페이지구조 7 웹사이트메인화면구성 8 웹사이트 메인화면구성 2 1 3 4 7 5 6 웹사이트메인화면구성 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 : 이전에서 이후 작업환경으로 되돌리기 •저장목록 : 저장목록 불러오기 •저장 : 변경사항 저장 •게시하기 : 마지막 작업환경 저장 및 사이트 적용 디자인편집구성 두부플러스 기능용어설명 2 1 3 두부플러스기능용어설명 13 ※ 저장과 게시하기 버튼을 누르지 않으면, 이전 작업 환경은 저장되지 않습니다 mobile_header: 모바일에서 보여지는 Header 부분이며, 모든 페이지에 노출됩니다. Mobile_Header는 삭제할 수 없습니다. header: 모든 페이지에 노출됩니다. 일반적으로 로고, 메뉴가 포함됩니다. content: 웹사이트의 컨텐츠가 포함되는 부분입니다. 레이아웃구성 두부플러스는 디자인편집의 레이아웃을 통해 요소 및 앱을 활용하여 웹사이트를 쉽고 편리하게 디자인 할 수 있습니다. footer: 모든 페이지에 노출됩니다. 일반적으로 연락처, 소셜아이콘, 카피라이터가 포함됩니다. 4 5 두부플러스기능용어설명 14 6 텍스트요소 설명 •제목 : 타이틀 글자(텍스트)를 입력할 수 있습니다. •단락 : 제목의 자세한 설명을 넣어 사용자들에게 정보를 쉽게 전달할 수 있습니다. 7 텍스트 EDIT •스타일 : 텍스트의 스타일을 제목 / 페이지제목 / 본문 등으로 지정하여 입력하면, 장애인들이 스크린리더기를 사용하여 글을 읽을 때 문장의 구조를 확인하며 텍스트를 읽을 수 있습니다. •폰트 : 다양한 글씨체를 제공합니다. •크기 : 텍스트 기준 크기에서 수치 만큼의 배수로 작아지거나 커집니다. •텍스트를 굵게, 기울임꼴, 밑줄, 취소선, 색변경, 색강조, 줄맞춤, 들여쓰기, 내어쓰기가 가능합니다. 텍스트요소 7 6 두부플러스기능용어설명 15 8 미디어요소 설명 •이미지 : 원하는 이미지를 삽입할 수 있습니다. •동영상 : 원하는 동영상을 URL로 입력 / 소스코드로 입력하여 연결합니다. •코드셀 : 소스코드를 삽입할 수 있습니다. •SNS공유 : 웹사이트방문자가 SNS 계정에 컨텐츠를 공유할 수 있는 기능입니다. 페이스북, 트위터, 밴드, 카카오톡, 카카오스토리, 구글플러스, 핀터레스트, 라인 등이 제공됩니다. 미디어요소 8 두부플러스기능용어설명 16 9 구성요소 설명 로고 : 이미지형, 텍스트형으로 로고를 설정할 수 있습니다. 상단메뉴 : 웹사이트의 최상단으로 홈, 로그인, 사이트맵을 노출합니다. 하단메뉴 : 웹사이트의 최하단에 노출되는 정보로 [ 운영모드 > 환경설정 > 운영정책관리 ]의 내용이 보여집니다. 네비게이션 : 페이지(메뉴)가 노출됩니다. 하단주소 : 하단주소의 정보는 [ 운영모드 > 환경설정 > 사이트관리 > 기본정보 ]의 저장된 내용으로 노출됩니다. 카피라이터 : 웹사이트 개설년도와 사이트명이 안내됩니다. 예) Copyright ⓒ [최초개설년도 - 현재년도] [저작권자이름] . Proudly created with Dubuplus.com 구성요소 9 10 두부플러스기능용어설명 17 10 회원관리 : 회원제로 운영되는 웹사이트의 경우, 메인 또는 서브 디자인에 로그인 창을 노출할 수 있습니다. 게시판 : 유형별 게시판을 삽입하여 노출할 수 있습니다. 슬라이드쇼 : 메인이미지로 많이 사용되며, 여러 이미지들을 슬라이드하여 보여줍니다. 지도 : 구글, 네이버, 다음 지도를 활용하여 지도를 생성할 수 있습니다. 카운터 : 웹사이트 방문자수를 노출시킬 수 있는 기능입니다. 슬라이더갤러리 : 숙박사이트의 객실안내에서 많이 사용되며, 슬라이드쇼처럼 이미지 이동이 가능하고, 슬라이더 메인이미지와 서브이미지들이 썸네일 형태로 동시에 노출됩니다. 문자상담 : 실시간으로 고객과 메시지를 주고 받을 수 있는 기능입니다. 검색 : 웹사이트 내 검색을 할 수 있는 앱으로 쇼핑상품 검색시 많이 사용됩니다. 소셜스트림 : 다양한 소셜미디어( NAVER BLOG, YOUTUBE, INSTAGRAM 등 )에 업로드된 내용을 웹사이트 한 페이지에 모아 노출 및 운영할 수 있습니다. 숙박예약 : 숙박사이트를 운영하는 사용자를 위한 특화된 앱으로 숙박예약의 객실안내를 설정할 수 있습니다. 예약검색 : 웹사이트의 숙박예약을 조건에 맞게 검색하여 보다 편리하게 예약 및 상세검색이 가능합니다. 쇼핑 : 쇼핑몰을 운영하는 사용자를 위한 특화된 앱으로 웹사이트에서 판매할 상품을 노출합니다. 앱설명 두부플러스기능용어설명 18 11 •표시/숨김 : 클릭되어 있는 디바이스에만 노출됩니다. •높이 : 사이즈나 단위별로 지정된 높이에 활성화됩니다. •정렬 : 왼쪽, 오른쪽, 가운데정렬로 맞춰집니다. •패딩 : 설정영역의 안쪽 여백을 조정합니다. •마진 : 설정영역의 바깥쪽 여백을 조정합니다. •배경색 : 설정영역의 배경색상을 설정할 수 있습니다. •테두리선 : 설정영역 테두리의 굵기, 선종류, 선 위치를 조절 하고 색상을 설정할 수 있습니다. •박스라운드 : 설정영역의 테두리를 둥글게 합니다. •배경이미지 : 배경에 이미지를 추가합니다. •애니메이션 : 첫 등장 효과를 설정합니다. •앵커 : 앵커 지점을 설정합니다 세부설정설명 11 두부플러스기능용어설명 19 12 디자인편집의 요소들을 드래그앤드롭 방식으로 원하는 섹션/컨텐츠에 추가할 수 있습니다. 섹션/컨텐츠에 추가한 요 ... (전체 17151자 중 8,000자)