실전에서 필요한 modoo![모두] 제작 방법

홈사이트 디자인 작업 중 modoo![모두] 다루기 modoo![모두] www.modoo.at/home 접속 가입단계 : 네이버 아이디 로그인 사용동의 > 약관 동의 > 가입완료 1 2 modoo![모두] www.modoo.at/home 접속 홈사이트 디자인 작업 중 프로세스 ① 네이버에 [modoo!] 검색이나 주소창에 www.modoo.at/home 를 입력하여 접속합니다. ② 비회원이라면 [회원 가입] 버튼을 클릭하여 회원 가입을 해야 합니다. 회원이라면 우측 로그인 창에서 로그인하세요.

modoo![모두] 다루기 - modoo![모두] 회원정보변경 네이버 아이디를 활용하여 내 정보 및 각종 설정기능으로 회원유형에 따라 혜택을 받으실 수 있습니다. 1 프로세스 ① modoo! [모두]에 접속한뒤 네이버 아이디로 로그인한뒤 우측 상단 아이디 클릭후 [내정보]에 들어가 회원정보를 변경합니다. *휴대폰주소를 입력하시면 게시판 새글/답글 무료 알림을 받을 수 있습니다.

홈사이트 디자인 작업 중 modoo![모두] 다루기 - 사이트 등록하기 1 홈사이트 디자인 작업 중 2 프로세스 ① 좌측 상단 modoo! 클릭후 [내 모두!만들기] 버튼 클릭하여 관리자 툴로 접속합니다. ② 관리시스템 페이지에서 사이트 등록하기 / 사이트 추가하기 버튼을 클릭합니다. *modoo![모두] 는 가입계정 1개로10개 사이트를 제작/ 노출 시킬 수 있고, 개인사업자는 20개 사이트를 제작/ 노출 시킬 수 있습니다.

modoo![모두] 다루기 - 사이트 유형 및 노출유형 선택 관리 시스템에 접속하여 사이트 추가를 누릅니다. 관리시스템 사이트 주소 : http://www.modoo.at/management 1 기본형 세로형 카드형 프로세스 ① 사이트 유형은 [미리보기+테마설정]에서 설정 및 변경이 가능합니다. 기본형 / 세로형 / 카드형 옵션 선택으로 레이아웃을 변경할 수 있습니다.

modoo![모두] 다루기 - 미리보기 + 테마 설정 모바일 사이트에 사용할 컬러셋을 선택합니다. 선택된 컬러셋에 따라 버튼의 색상, 강조 문구의 색상 등이 달라집니다. 1 2 프로세스 ① 여러 가지 컬러 중 마음에 드는 컬러를 골라 V체크합니다. ② 제공되는 임시주소로 제작중인 모바일 사이트를 미리볼 수 있습니다. *[미리보기+테마설정]에서 제공되는 임시주소는 1시간 동안 유효합니다.

modoo![모두] 다루기 - 정보관리 입력 프로세스 modoo![모두] 편집 전 정보관리에서 기본정보를 입력합니다. 1 2 3 4 5 프로세스 ① modoo! 주소 입력란에 모바일 사이트를 나타낼 수 있는 이름으로 modoo! 사이트 주소를 입력합니다. ‘http://회원 입력 주소.modoo.at’ 으로 결정됩니다. ② 사이트를 가장 잘 알릴 수 있는 사이트 명을 입력하세요 ③ 사이트명 하단에 노출될 사이트 설명을 입력하세요 ④ 사이트의 대표이미지를 선택해 주세요 ⑤ 게시판 등 글을 작성하거나 답변할 때 표시할 관리자의 닉네임을 입력하세요

modoo![모두] 다루기 - 정보출력 위치 modoo![모두] 편집 전 정보관리에서 기본정보를 입력합니다. 프로세스 1 2 3 4 프로세스 ① 네이버 사이트검색에 연동될 분류 정보를 선택하여 주세요 ② 지역검색에 활용될 업체의 주소를 입력해 주세요 ③ 예약 및 문의 수단을 설정해 주세요. 모바일 사이트 우측 최상단 전환요소에 나타나게 됩니다. ④ 사이트를 공유할 매체와 공유 시 안내 문구를 입력해 주세요

modoo![모두] 다루기 - 정보관리 입력 프로세스 modoo![모두] 편집 전 정보관리에서 기본정보를 입력합니다. 1 2 ① 샘플 입력하기: 사이트 업종을 선택하고 ‘샘플 입력하기’ 버튼을 클릭하면 푸터에 기본적으로 들어가야 할 정보 샘플이 제시됩니다. ② 푸터 내용을 입력하면 메인페이지 하단에 표기됩니다.

modoo![모두] 다루기 - 정보관리 입력 프로세스 modoo![모두] 편집 전 정보관리에서 기본정보를 입력합니다. 1 ① 네이버 검색등록 기능을 통해 무료로 네이버 검색 결과에 내 홈페이지와 업체를 노출 할 수 있습니다. (4/29일 이후 제공 예정)

modoo![모두] 다루기 - 사이트 만들기 예시 [intro] 메뉴/페이지 추가하기 예시페이지 [intro] 프로세스 1 2 ① +메뉴추가 버튼을 눌러 메뉴를 추가한 뒤 메뉴명을 바꿔줍니다. ② +페이지추가 버튼을 눌러 원하시는 템플릿을 추가합니다.(예시페이지의 경우 ‘빈페이지’ 템플릿을 사용하였습니다.)

modoo![모두] 다루기 - 사이트 만들기 예시 [intro] 이미지 추가하기 예시페이지 [intro] 프로세스 1 2 ①구성요소에 단수이미지->이미지를 누르신 뒤 +이미지추가 버튼을 누릅니다. ② pc사진추가버튼을 눌러 원하시는 이미지를 선택하신 뒤 이미지 등록을 해줍니다.

modoo![모두] 다루기 - 사이트 만들기 예시 [intro] 이미지 저장 (한국 관광공사 :http://hanok.visitkorea.or.kr) 2 1 예시페이지 [intro] 프로세스 ① 이미지를 마우스 우측버튼으로 클릭 후 다른 이름으로 사진 저장 선택 ② 이미지추가 클릭-> PC사진 추가 클릭 -> 이미지 선택 후 열기

modoo![모두] 다루기 사이트 만들기 예시 [intro] 목록형 텍스트 만들기 예시페이지 [intro] 프로세스 1 2 3 ①구성요소에 텍스트→목록형 텍스트를 선택합니다 ② 타입/유형/정렬을 사이트 특성에 맞게 지정해줍니다. ③ 리스트 추가버튼을 눌러 원하시는 만큼 내용을 추가합니다.

modoo![모두] 다루기 - 사이트 만들기 예시 [intro] 텍스트 저장 (한국 관광공사 :http://hanok.visitkorea.or.kr) 1 2 예시페이지 [intro] 프로세스 ① 텍스트를 왼쪽 마우스 버튼으로 드래그 -> 우측버튼 클릭해서 복사 ② 텍스트 입력란에 마우스 오른쪽 버튼 클릭 -> 붙여넣기

modoo![모두] 다루기 사이트 만들기 예시 [intro] 버튼 링크걸기 예시페이지 [intro] 프로세스 2 1 ①구성요소에 버튼→리스트형을 선택합니다 ② 타입/테마/아이콘유무/상단간격을 사이트 특성에 맞게 지정해줍니다.

modoo![모두] 다루기 사이트 만들기 예시 [intro] 버튼 링크걸기 예시페이지 [intro] 프로세스 1 2 3 ①버튼을 눌렀을 때 실행되는 타입을 선택합니다. 페이지 이동: 다른 페이지로 이동합니다. / 전화,문자,이메일 : 지정해둔 연락처로 전화,문자,이메일을 보낼 수 있습니다. 외부링크 : 입력하신 외부사이트주소로 이동합니다. / 맨위로 : 현재 보고있는 페이지의 최상단으로 이동합니다. ② 버튼에 나타나는 이름과 아이콘을 지정합니다. ③ +새 버튼 추가 버튼을 눌러 최대 2개까지 추가 가능합니다.

modoo![모두] 다루기 - 사이트 만들기 예시 [큰대문집 특징] 메뉴/페이지 추가하기 예시페이지 [큰대문집특 징] 프로세스 1 2 예시페이지 [큰대문집특 징] 프로세스 ① +메뉴추가 버튼을 눌러 메뉴를 추가한 뒤 메뉴명을 바꿔줍니다. ② +페이지추가 버튼을 눌러 원하시는 템플릿을 추가합니다.(예시페이지의 경우 ‘빈페이지’ 템플릿을 사용하였습니다.)

modoo![모두] 다루기 - 사이트 만들기 예시 [큰대문집 특징] 이미지 추가하기 예시페이지 [큰대문집특 징] 프로세스 1 2 예시페이지 [큰대문집특 징] 프로세스 ①구성요소에 단수이미지->이미지를 누르신 뒤 +이미지추가 버튼을 누릅니다. ② pc사진추가버튼을 눌러 원하시는 이미지를 선택하신 뒤 이미지 등록을 해줍니다.

modoo![모두] 다루기 - 사이트 만들기 예시 [큰대문집 특징] 텍스트 입력하기(타이틀/본문) 예시페이지 [큰대문집특 징] 1 2 4 431 예시페이지 [큰대문집특 징] 프로세스 ①구성요소에 텍스트-→타이틀 텍스트를 선택합니다. ②타이틀 영역에 내용을 입력한뒤 크기/정렬/하단간격/색상을 지정합니다. ③ 구성요소에 텍스트-→본문형 텍스트를 선택합니다. ④타이틀 영역에 내용을 입력한뒤 크기/정렬/하단간격/색상을 지정합니다.

modoo![모두] 다루기 - 사이트 만들기 예시 [큰대문집 특징] 구분선 넣기 공백 사용예시 실선 사용예시 점선 사용예시 2 1 공백 사용예시 실선 사용예시 점선 사용예시 예시페이지 [큰대문집특 징] 프로세스 ①구성요소에 구분선을 선택합니다. ②공백/ 실선/ 점선 타입중 원하는 타입을 선택합니다.

modoo![모두] 다루기 - 사이트 만들기 예시 [큰대문집 특징] 텍스트 입력하기 예시페이지 [큰대문집특 징] 프로세스 1 ①구성요소에 텍스트→타이틀 텍스트를 사용하여 텍스트를 강조할 수 있습니다.

modoo![모두] 다루기 사이트 만들기 예시 [큰대문집 특징] 텍스트 오버레이 이미지 넣기 예시페이지 [큰대문집특 징] 1 예시페이지 [큰대문집특 징] 프로세스 ①구성요소에 이미지→텍스트 오버레이 이미지를 선택합니다. ②+이미지 추가 버튼을 눌러 원하시는 이미지를 넣습니다. ③이미지위에 쓰여질 텍스트(타이틀과 설명 선택 가능)을 입력한 뒤 추가속성을 이용하여 설정을 조절해줍니다.

modoo![모두] 다루기 사이트 만들기 예시 [큰대문집 특징] 텍스트 / 이미지 넣기 예시페이지 [큰대문집특 징] 프로세스 1 2 예시페이지 [큰대문집특 징] 프로세스 ①구성요소에 텍스트→타이틀 텍스트를 사용하여 소제목을 입력합니다. ②+이미지 추가 버튼을 눌러 원하시는 이미지를 넣습니다.

modoo![모두] 다루기 사이트 만들기 예시 [큰대문집 특징] 표 만들기 예시페이지 [큰대문집특 징] 프로세스 2 1 3 ①구성요소에 표를 선택합니다. ②에디터 우측 편집화면에서 크기(행,열)/타입을 조절하여 원하는 표 모양을 만든후 추가버튼을 누릅니다. ③추가버튼을 누르신 뒤 표를 제작하는 창이 뜨면 내용을 넣어줍니다. 이때 텍스트 정렬, 강조 및 행/열 병합,분할이 가능합니다. 제작완료후 등록 버튼을 누릅니다.

modoo![모두] 다루기 사이트 만들기 예시 [큰대문집 특징] 버튼, 타이틀 텍스트 넣기 예시페이지 [큰대문집특 징] 2 1 예시페이지 [큰대문집특 징] 프로세스 ①구성요소에 버튼을 선택한 뒤 타입, 속성 등 원하시는 설정으로 변경합니다. ②구성요소에서 텍스트→타이틀 텍스트를 선택한뒤 내용과 설정을 입력합니다.

modoo![모두] 다루기 사이트 만들기 예시 [큰대문집 특징] 3단 타일 이미지 넣기 예시페이지 [큰대문집특 징] 프로세스 2 3 1 예시페이지 [큰대문집특 징] 프로세스 ①구성요소에 복수 이미지→3단 타일이미지를 선택합니다. (다수의 이미지를 한번에 보여주고자 할 때 유용합니다.) ②이미지 추가 버튼을 이용하여 이미지를 등록합니다. 최대 20개의 이미지까지 업로드 가능 합니다. ③타이틀을 입력하시면 이용자가 이미지를 선택하여 상세보기를 하실 때에 하단에 노출됩니다.

modoo![모두] 다루기 사이트 만들기 예시 [객실안내] 인덱스 페이지 추가하기 예시페이지 [객실안내] 프로세스 1 ①+페이지 추가 버튼을 눌러 인덱스페이지를 추가합니다.

modoo![모두] 다루기 사이트 만들기 예시 [객실안내] 인덱스 페이지 구성하기 예시페이지 [객실안내] 프로세스 1 2 3 인덱스페이지의 이미지타일을 누르면 해당 페이지로 이동할 수 있습니다. ①에디터 좌측 이미지카드 추가 창에 이미지가 삽입된 페이지들이 보여집니다. 카드를 누르시면 ②구역에 나타납니다. ②타일 우측하단의 삼각형 버튼으로 크기와 비율을 조절할 수 있습니다. ③타일을 누르시면 에디터 우측에서 대표이미지와 타이틀을 설정할 수 있습니다.

modoo![모두] 다루기 사이트 만들기 예시 [객실안내] 페이지 구성하기 예시페이지 [객실안내] 프로세스 1 2 4 3 ①구성요소에서 버튼을 넣어 페이지 이동시켜 줍니다. ②타이틀 텍스트를 선택하여 텍스트를 강조합니다. ③단수이미지를 넣습니다. ④목록형 텍스트를 선택하여 리스트를 추가합니다.

modoo![모두] 다루기 사이트 만들기 예시 [객실안내] 전환형 이미지 넣기 예시페이지 [객실안내] 프로세스 1 2 3 ①구성요소에서 전환형이미지를 선택합니다. ②이미지 추가버튼을 눌러 원하는 이미지를 추가합니다. 최대 20개 까지 이미지업로드가 가능합니다. ③에디터 우측에서 이미지 유형, 전환 타입, 섬네일 사용유무 등 설정을 변경할 수 있습니다.

modoo![모두] 다루기 사이트 만들기 예시 [객실안내] 페이지 구성하기 예시페이지 [객실안내] 프로세스 1 3 4 2 ①구성요소에서 구분선을 선택하여 이미지와 텍스트 사이의 영역을 구분할 수 있습니다. ②타이틀 텍스트를 사용하여 텍스트를 강조합니다. ③복수이미지→3단타일 이미지를 사용하여 이미지를 추가합니다. ④라인형 버튼을 사용하여 현재페이지에서 다른 페이지로 이동을 용이하게 할 수 있습니다.

modoo![모두] 다루기 사이트 만들기 예시 [예약문의] 문의하기 페이지 추가하기 예시페이지 [예약문의] 프로세스 1 ①+페이지 추가 버튼을 눌러 ‘문의하기 페이지’를 추가 합니다.

modoo![모두] 다루기 사이트 만들기 예시 [이용후기] 일반게시판 페이지 추가하기 예시페이지 [일반게시판] 프로세스 1 ①+페이지 추가 버튼을 눌러 ‘일반 게시판’페이지를 추가 합니다.

modoo![모두] 다루기 사이트 만들기 예시 [오시는 길] 지도 넣기 예시페이지 [오시는 길] 프로세스 1 ①구성요소에서 지도를 선택하신뒤 위치 선택을 눌러 주소를 입력합니다. 업체명과 주소를 입력하여 주소 하단에 노출 시킬 수 있습니다.

modoo![모두] 다루기 사이트 만들기 예시 [주변 볼거리/먹거리] 예시페이지 [오시는 길] 프로세스 1 3 5 6 4 2 ①버튼을 사용하여 현재페이지에서 다른 페이지로 이동을 용이하게 할 수 있습니다. ②타이틀 텍스트를 사용하여 텍스트를 강조해줍니다. ③기호형 텍스트를 사용하여 리스트를 추가 합니다. ④전환형 이미지를 사용하여 슬라이드쇼를 구성합니다. ⑤본문형 텍스트를 사용하여 내용을 입력해 줍니다. ⑥구분선을 사용하여 구획을 나눠줍니다.

modoo![모두] 다루기 - 저장 및 사이트 적용 프로세스 1 2 ① 하단에 저장버튼 클릭하여 에디터에서 선택한 템플릿을 저장합니다. ② 운영 중인 사이트 수정이 아닌 신규제작이라면 사이트 적용을 클릭하여 모바일환경 및 PC 모니터에서 확인하며 제작하실 수 있습니다.

modoo![모두] 다루기 - 사이트 편집의 영역별 기능 모바일 사이트의 컨텐츠를 구성하는 단계로, 업종 및 상품의 특성에 맞추어 세 가지 영역을 설정합니다. ① 사이트 구성 영역 ■ 정보관리 ■ 메뉴 추가/변경/삭제 ■ 페이지 추가/변경/삭제 ③ 사이트 노출 영역 ② 페이지 디자인 영역 ■ 페이지 명 설정 ■ 개별페이지 주소 복사 ■ 페이지 노출/노출안함 ■ 성인인증 ■ 변경내용 확인 ■ 미리 보기+테마설정 ■ 구성요소 추가/삭제 용어설명 ① 사이트 구성 영역: 사이트 메뉴 및 메뉴 내부의 페이지 수를 결정하는 영역. ② 페이지 디자인 영역: 메뉴 내부에 들어가는 페이지의 세부적인 디자인을 결정하고, 홍보하고자 하는 내용을 구성하는 영역. ③ 사이트 노출 영역: 실제 적용하기 전 미리 확인하고, 페이지별 노출 여부를 결정할 수 있는 영역. * 구성요소 : 구성하고자 하는 메뉴의 성격에 따라 한 장의 페이지 내에 삽입할 수 있는 텍스트, 이미지, 지도, 기능버튼 등의 요소.

-1회 : 4/6 (월) 3-5pm modoo![모두] 진행일정 교육 일정 : 교육 이후 일정:      -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 교육 이후 일정: - 교육일 + 7days: 한옥 스테이 개별 모두 사이트 제작 완료 ㄴ 6일 교육 -> 13일까지 제작 완료 - 04월 28일 : 제작 완료 사이트 내부 모니터링 - 04월 29일 : 모두 서비스 OPEN 및 캠페인 - 05월 15일 : 허브 사이트 제작 ㄴ 제작 완료된 개별 사이트 기반으로 한옥 스테이 허브 페이지 기획 4월 5월 1주 2주 3주 4주 설명회& 제작교육 개별사이트 구축및 모니터링 허브 사이트 기획/제작 QR코드 진행 협의(미정)

modoo![모두] 고객센터 1644-3930 modoo.at 1644-5690 easybooking.naver.com 예약 서비스 고객센터

감사합니다