Transcript modoo![모두] 제작메뉴얼 - 한옥스테이

실전에서 필요한 modoo![모두] 제작 방
법
PARTNER SQUARE
modoo![모두] 다루기
- modoo![모두] 로그인
modoo![모두] 서비스를 이용하고 싶다면 누구나 회원 가입만 하면 서비스를 무료로 사용할 수 있습니다.
가입단계 : 네이버 아이디 로그인 사용동의 > 약관 동의 > 가입완료
1
2
modoo![모두]
www.modoo.at/home 접속
프로세스
① 네이버에 [modoo!] 검색이나 주소창에 www.modoo.at/home 를 입력하여 접속합니다.
② 비회원이라면 [회원 가입] 버튼을 클릭하여 회원 가입을 해야 합니다. 회원이라면 우측 로그인 창에서 로그인하세요.
2 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- modoo![모두] 회원정보변경
네이버 아이디를 활용하여 내 정보 및 각종 설정기능으로 회원유형에 따라 혜택을 받으실 수 있습니다.
1
프로세스
① modoo! [모두]에 접속한뒤 네이버 아이디로 로그인한뒤 우측 상단 아이디 클릭후 [내정보]에 들어가 회원정보를 변경합니다.
*휴대폰주소를 입력하시면 게시판 새글/답글 무료 알림을 받을 수 있습니다.
3 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 등록하기
modoo![모두] 제작을 시작하기 위해서 로그인 후 [관리리스템 바로가기] 버튼을 클릭하여 관리자 툴로 접속합니다.
modoo![모두] 사이트를 생성, 편집하실 수 있습니다.
1
2
프로세스
① 좌측 상단 modoo! 클릭후 [내 모두!만들기] 버튼 클릭하여 관리자 툴로 접속합니다.
② 관리시스템 페이지에서 사이트 등록하기 / 사이트 추가하기 버튼을 클릭합니다.
*modoo![모두] 는 가입계정 1개로10개 사이트를 제작/ 노출 시킬 수 있고, 개인사업자는 20개 사이트를 제작/ 노출 시킬 수 있습니다.
4 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 유형 및 노출유형 선택
관리 시스템에 접속하여 사이트 추가를 누릅니다.
관리시스템 사이트 주소 : http://www.modoo.at/management
1
기본형
세로형
카드형
프로세스
① 사이트 유형은 [미리보기+테마설정]에서 설정 및 변경이 가능합니다. 기본형 / 세로형 / 카드형 옵션 선택으로 레이아웃을 변경할 수 있습니다.
5 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 미리보기 + 테마 설정
모바일 사이트에 사용할 컬러셋을 선택합니다.
선택된 컬러셋에 따라 버튼의 색상, 강조 문구의 색상 등이 달라집니다.
1
2
프로세스
① 여러 가지 컬러 중 마음에 드는 컬러를 골라 V체크합니다.
② 제공되는 임시주소로 제작중인 모바일 사이트를 미리볼 수 있습니다.
*[미리보기+테마설정]에서 제공되는 임시주소는 1시간 동안 유효합니다.
6 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 정보관리 입력
modoo![모두] 편집 전 정보관리에서 기본정보를 입력합니다.
1
2
3
4
5
프로세스
① modoo! 주소 입력란에 모바일 사이트를 나타낼 수 있는 이름으로 modoo! 사이트 주소를 입력합니다. ‘http://회원 입력 주소.modoo.at’ 으로 결정됩니다.
② 사이트를 가장 잘 알릴 수 있는 사이트 명을 입력하세요
③ 사이트명 하단에 노출될 사이트 설명을 입력하세요
④ 사이트의 대표이미지를 선택해 주세요
⑤ 게시판 등 글을 작성하거나 답변할 때 표시할 관리자의 닉네임을 입력하세요
7 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 정보출력 위치
modoo![모두] 편집 전 정보관리에서 기본정보를 입력합니다.
1
2
3
4
프로세스
① 네이버 사이트검색에 연동될 분류 정보를 선택하여 주세요
② 지역검색에 활용될 업체의 주소를 입력해 주세요
③ 예약 및 문의 수단을 설정해 주세요. 모바일 사이트 우측 최상단 전환요소에 나타나게 됩니다.
④ 사이트를 공유할 매체와 공유 시 안내 문구를 입력해 주세요
8 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 정보관리 입력
modoo![모두] 편집 전 정보관리에서 기본정보를 입력합니다.
1
2
프로세스
① 샘플 입력하기: 사이트 업종을 선택하고 ‘샘플 입력하기’ 버튼을 클릭하면 푸터에 기본적으로 들어가야 할 정보 샘플이 제시됩니다.
② 푸터 내용을 입력하면 메인페이지 하단에 표기됩니다.
9 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 정보관리 입력
modoo![모두] 편집 전 정보관리에서 기본정보를 입력합니다.
1
프로세스
① 네이버 검색등록 기능을 통해 무료로 네이버 검색 결과에 내 홈페이지와 업체를 노출 할 수 있습니다. (4/29일 이후 제공 예정)
10 / modoo![모두] 심화: 실습
modoo![모두] 다루기
- 사이트 만들기 예시 [intro] 메뉴/페이지 추가하기
1
2
예시페이지 [intro]
프로세스
① +메뉴추가 버튼을 눌러 메뉴를 추가한 뒤 메뉴명을 바꿔줍니다.
11 /②modoo![모두]
실습눌러 원하시는 템플릿을 추가합니다.(예시페이지의 경우 ‘빈페이지’ 템플릿을 사용하였습니다.)
+페이지추가심화:
버튼을
PARTNER SQUARE
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [intro] 이미지 추가하기
1
2
예시페이지 [intro]
프로세스
①구성요소에 단수이미지->이미지를 누르신 뒤 +이미지추가 버튼을 누릅니다.
12 /②modoo![모두]
심화: 실습
pc사진추가버튼을
눌러 원하시는 이미지를 선택하신 뒤 이미지 등록을 해줍니다.
modoo![모두] 다루기
PARTNER SQUARE
- 사이트 만들기 예시 [intro] 이미지 저장 (한국 관광공사 :http://hanok.visitkorea.or.kr)
2
1
예시페이지 [intro]
프로세스
① 이미지를 마우스 우측버튼으로 클릭 후 다른 이름으로 사진 저장 선택
13 /②modoo![모두]
심화: 실습
이미지추가 클릭->
PC사진 추가 클릭 -> 이미지 선택 후 열기
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [intro] 목록형 텍스트 만들기
1
2
3
예시페이지 [intro]
프로세스
①구성요소에 텍스트→목록형 텍스트를 선택합니다
② 타입/유형/정렬을 사이트 특성에 맞게 지정해줍니다.
14 / modoo![모두] 심화: 실습
③ 리스트 추가버튼을 눌러 원하시는 만큼 내용을 추가합니다.
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [intro] 텍스트 저장 (한국 관광공사 :http://hanok.visitkorea.or.kr)
1
2
예시페이지 [intro]
프로세스
① 텍스트를 왼쪽 마우스 버튼으로 드래그 -> 우측버튼 클릭해서 복사
15 /②modoo![모두]
심화:마우스
실습 오른쪽 버튼 클릭 -> 붙여넣기
텍스트 입력란에
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [intro] 버튼 링크걸기
2
1
예시페이지 [intro]
프로세스
①구성요소에 버튼→리스트형을 선택합니다
② 타입/테마/아이콘유무/상단간격을 사이트 특성에 맞게 지정해줍니다.
16 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [intro] 버튼 링크걸기
1
2
3
예시페이지 [intro]
프로세스
①버튼을 눌렀을 때 실행되는 타입을 선택합니다. 페이지 이동: 다른 페이지로 이동합니다. / 전화,문자,이메일 : 지정해둔 연락처로 전화,문자,이메일을 보낼 수
있습니다.
외부링크 : 입력하신 외부사이트주소로 이동합니다. / 맨위로 : 현재 보고있는 페이지의 최상단으로 이동합니다.
17 / modoo![모두] 심화: 실습
② 버튼에 나타나는 이름과 아이콘을 지정합니다.
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 메뉴/페이지 추가하기
1
2
예시페이지 [큰대문집특
징]
프로세스
① +메뉴추가 버튼을 눌러 메뉴를 추가한 뒤 메뉴명을 바꿔줍니다.
18 /②modoo![모두]
실습눌러 원하시는 템플릿을 추가합니다.(예시페이지의 경우 ‘빈페이지’ 템플릿을 사용하였습니다.)
+페이지추가심화:
버튼을
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 이미지 추가하기
1
2
예시페이지 [큰대문집특
징]
프로세스
①구성요소에 단수이미지->이미지를 누르신 뒤 +이미지추가 버튼을 누릅니다.
19 /②modoo![모두]
심화: 실습
pc사진추가버튼을
눌러 원하시는 이미지를 선택하신 뒤 이미지 등록을 해줍니다.
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 텍스트 입력하기(타이틀/본문)
1
4
3
1
예시페이지 [큰대문집특
징]
프로세스
①구성요소에 텍스트-→타이틀 텍스트를 선택합니다.
②타이틀 영역에 내용을 입력한뒤 크기/정렬/하단간격/색상을 지정합니다.
③ 구성요소에 텍스트-→본문형 텍스트를 선택합니다.
20 / modoo![모두] 심화: 실습
④타이틀 영역에 내용을 입력한뒤 크기/정렬/하단간격/색상을 지정합니다.
2
4
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 구분선 넣기
2
1
공백 사용예시
예시페이지 [큰대문집특
징]
프로세스
①구성요소에 구분선을 선택합니다.
②공백/ 실선/ 점선 타입중 원하는 타입을 선택합니다.
21 / modoo![모두] 심화: 실습
실선 사용예시
점선 사용예시
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 텍스트 입력하기
1
예시페이지 [큰대문집특
징]
프로세스
①구성요소에 텍스트→타이틀 텍스트를 사용하여 텍스트를 강조할 수 있습니다.
22 / modoo![모두] 심화: 실습
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 텍스트 오버레이 이미지 넣기
1
예시페이지 [큰대문집특
징]
프로세스
①구성요소에 이미지→텍스트 오버레이 이미지를 선택합니다.
②+이미지 추가 버튼을 눌러 원하시는 이미지를 넣습니다.
23 /③이미지위에
modoo![모두]쓰여질
심화: 실습
텍스트(타이틀과 설명 선택 가능)을 입력한 뒤 추가속성을 이용하여 설정을 조절해줍니다.
PARTNER SQUARE
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 텍스트 / 이미지 넣기
1
2
예시페이지 [큰대문집특
징]
프로세스
①구성요소에 텍스트→타이틀 텍스트를 사용하여 소제목을 입력합니다.
추가심화:
버튼을
24 /②+이미지
modoo![모두]
실습눌러 원하시는 이미지를 넣습니다.
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 표 만들기
2
1
3
예시페이지 [큰대문집특
징]
프로세스
①구성요소에 표를 선택합니다.
②에디터 우측 편집화면에서 크기(행,열)/타입을 조절하여 원하는 표 모양을 만든후 추가버튼을 누릅니다.
뒤 표를 제작하는 창이 뜨면 내용을 넣어줍니다. 이때 텍스트 정렬, 강조 및 행/열 병합,분할이 가능합니다. 제작완료후 등록 버튼을 누릅니
25 /③추가버튼을
modoo![모두]누르신
심화: 실습
다.
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 버튼, 타이틀 텍스트 넣기
2
1
예시페이지 [큰대문집특
징]
프로세스
①구성요소에 버튼을 선택한 뒤 타입, 속성 등 원하시는 설정으로 변경합니다.
②구성요소에서 텍스트→타이틀 텍스트를 선택한뒤 내용과 설정을 입력합니다.
26 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [큰대문집 특징] 3단 타일 이미지 넣기
2
3
1
예시페이지 [큰대문집특
징]
프로세스
①구성요소에 복수 이미지→3단 타일이미지를 선택합니다. (다수의 이미지를 한번에 보여주고자 할 때 유용합니다.)
②이미지 추가 버튼을 이용하여 이미지를 등록합니다. 최대 20개의 이미지까지 업로드 가능 합니다.
입력하시면
이용자가 이미지를 선택하여 상세보기를 하실 때에 하단에 노출됩니다.
27 /③타이틀을
modoo![모두]
심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [객실안내] 인덱스 페이지 추가하기
1
예시페이지 [객실안내]
프로세스
①+페이지 추가 버튼을 눌러 인덱스페이지를 추가합니다.
28 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [객실안내] 인덱스 페이지 구성하기
1
2
3
예시페이지 [객실안내]
프로세스
인덱스페이지의 이미지타일을 누르면 해당 페이지로 이동할 수 있습니다.
①에디터 좌측 이미지카드 추가 창에 이미지가 삽입된 페이지들이 보여집니다. 카드를 누르시면 ②구역에 나타납니다.
②타일 우측하단의 삼각형 버튼으로 크기와 비율을 조절할 수 있습니다.
누르시면
29 /③타일을
modoo![모두]
심화:에디터
실습 우측에서 대표이미지와 타이틀을 설정할 수 있습니다.
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [객실안내] 페이지 구성하기
1
2
3
예시페이지 [객실안내]
프로세스
①구성요소에서 버튼을 넣어 페이지 이동시켜 줍니다.
②타이틀 텍스트를 선택하여 텍스트를 강조합니다.
③단수이미지를 넣습니다.
텍스트를
리스트를 추가합니다.
30 /④목록형
modoo![모두]
심화:선택하여
실습
4
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [객실안내] 전환형 이미지 넣기
1
2
3
예시페이지 [객실안내]
프로세스
①구성요소에서 전환형이미지를 선택합니다.
②이미지 추가버튼을 눌러 원하는 이미지를 추가합니다. 최대 20개 까지 이미지업로드가 가능합니다.
우측에서
31 /③에디터
modoo![모두]
심화:이미지
실습 유형, 전환 타입, 섬네일 사용유무 등 설정을 변경할 수 있습니다.
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [객실안내] 페이지 구성하기
1
3
2
예시페이지 [객실안내]
프로세스
①구성요소에서 구분선을 선택하여 이미지와 텍스트 사이의 영역을 구분할 수 있습니다.
②타이틀 텍스트를 사용하여 텍스트를 강조합니다.
③복수이미지→3단타일 이미지를 사용하여 이미지를 추가합니다.
32 /④라인형
modoo![모두]
심화:
실습 현재페이지에서 다른 페이지로 이동을 용이하게 할 수 있습니다.
버튼을
사용하여
4
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [예약문의] 문의하기 페이지 추가하기
1
예시페이지 [예약문의]
프로세스
①+페이지 추가 버튼을 눌러 ‘문의하기 페이지’를 추가 합니다.
33 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [이용후기] 일반게시판 페이지 추가하기
1
예시페이지 [일반게시판]
프로세스
①+페이지 추가 버튼을 눌러 ‘일반 게시판’페이지를 추가 합니다.
34 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [오시는 길] 지도 넣기
1
예시페이지 [오시는 길]
프로세스
①구성요소에서 지도를 선택하신뒤 위치 선택을 눌러 주소를 입력합니다. 업체명과 주소를 입력하여 주소 하단에 노출 시킬 수 있습니다.
35 / modoo![모두] 심화: 실습
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 만들기 예시 [주변 볼거리/먹거리]
1
3
5
6
4
2
예시페이지 [오시는 길]
프로세스
①버튼을 사용하여 현재페이지에서 다른 페이지로 이동을 용이하게 할 수 있습니다. ②타이틀 텍스트를 사용하여 텍스트를 강조해줍니다.
③기호형 텍스트를 사용하여 리스트를 추가 합니다. ④전환형 이미지를 사용하여 슬라이드쇼를 구성합니다. ⑤본문형 텍스트를 사용하여 내용을 입력해 줍니다.
36 / modoo![모두] 심화: 실습
⑥구분선을 사용하여 구획을 나눠줍니다.
modoo![모두] 다루기
- 저장 및 사이트 적용
1
2
프로세스
① 하단에 저장버튼 클릭하여 에디터에서 선택한 템플릿을 저장합니다.
② 운영 중인 사이트 수정이 아닌 신규제작이라면 사이트 적용을 클릭하여 모바일환경 및 PC 모니터에서 확인하며 제작하실 수 있습니다.
37 / modoo![모두] 심화: 실습
PARTNER SQUARE
PARTNER SQUARE
modoo![모두] 다루기
- 사이트 편집의 영역별 기능
모바일 사이트의 컨텐츠를 구성하는 단계로, 업종 및 상품의 특성에 맞추어 세 가지 영역을 설정합니다.
① 사이트 구성 영역
■
정보관리
■
메뉴 추가/변경/삭제
■
페이지 추가/변경/삭제
③ 사이트 노출 영역
② 페이지 디자인 영역
■
구성요소 추가/삭제
용어설명
① 사이트 구성 영역: 사이트 메뉴 및 메뉴 내부의 페이지 수를 결정하는 영역.
② 페이지 디자인 영역: 메뉴 내부에 들어가는 페이지의 세부적인 디자인을 결정하고, 홍보하고자 하는 내용을 구성하는 영역.
③ 사이트 노출 영역: 실제 적용하기 전 미리 확인하고, 페이지별 노출 여부를 결정할 수 있는 영역.
38 /*modoo![모두]
심화: 실습 하는 메뉴의 성격에 따라 한 장의 페이지 내에 삽입할 수 있는 텍스트, 이미지, 지도, 기능버튼 등의 요소.
구성요소 : 구성하고자
■
페이지 명 설정
■
개별페이지 주소 복사
■
페이지 노출/노출안함
■
성인인증
■
변경내용 확인
■
미리 보기+테마설정
PARTNER SQUARE
modoo![모두] 진행일정
교육 일정 :
-1회 : 4/6 (월) 3-5pm
-2회 : 4/8 (수) 11-1pm, 3회 : 3-5pm
-4회 : 4/9 (목) 6-8pm
-5회 : 4/10 (금) 3-5pm
-6회 : 4/16 (목) 3-5PM, 7회 : 5-7PM
교육 이후 일정:
4월
2주
설명회& 제작교육
1주
3주
4주
개별사이트 구축및 모니터링
5월
1주
2주
허브 사이트 기획/제작
- 교육일 + 7days: 한옥 스테이 개별 모두 사이트 제작 완료
ㄴ 6일 교육 -> 13일까지 제작 완료
- 04월 28일 : 제작 완료 사이트 내부 모니터링
- 04월 29일 : 모두 서비스 OPEN 및 캠페인
- 05월 15일 : 허브 사이트 제작
ㄴ 제작 완료된 개별 사이트 기반으로 한옥 스테이 허브 페이지 기획
39 / modoo![모두] 심화: 실습
3주
4주
QR코드 진행 협의(미정)
PARTNER SQUARE
modoo![모두] 고객센터
modoo![모두] 고객센터
예약 서비스 고객센터
1644-3930
modoo.at
1644-5690
easybooking.naver.co
m
40 / modoo![모두] 심화: 실습