Mobile Web Site Editor By < User Manual > Mobile Web Site Editor 와작성된모바일사이트는 opencom (http://opencom.com) 에서서비스됩니다.
Mobile Web Site Editor By 1. 모바일사이트에디터의개요 1 2. 사이트기본정보 2 1. 도메인주소 2 2. 페이지이름 2 3. 게시판패스워드 2 4. 사이트슬로건 2 3. 디자인설정영역 3 1. 테마선택기 3 2. 로고이미지 4 3. 메인이미지 4 4. 페이지구성영역 5 1. 페이지메뉴명 6 2. 편집버튼 6 3. 상하이동버튼 6 4. 삭제버튼 6 5. 편집기능요소영역 7 5. 편집기능구성요소 7 1. 소제목추가 7 2. 이미지추가 8 3. 문단추가 9 5. 오시는길추가 10 4. 폼메일추가 10 5. 게시판추가 11 6. 하단콘텐츠구성영역 12 1. 하단내용 12 2. 이메일 13 3. 전화 13
1. 모바일사이트에디터의개요차세대웹기술인 HTML5 + CSS3 를이용하여제작된 Mobile Web Site Editor By 의모바일사이트에디터는사용자가 HTML에대한지식이없어도간단한입력만으로도세련된모바일웹사이트를작성할수있도록구성되었습니다. 에디터는크게 1사이트기본정보영역 2디자인설정영역 3페이지구성영역 4하단콘테츠구성영역과콘텐츠편집과사이트기능을위한 5편집기능영역으로구성되어있어직관적이며편리하게사이트를구성할수있습니다. 그림 1 : 모바일사이트에디터의기본구성 1/14
[ 모바일사이트호스팅에대하여 ] 의모바일사이트에디터는 opencom 의모바일웹사이트서비스로제공되므로사이트호스팅에관련된사항은오픈컴홈페이지 http://opencom.com 에서확인하십시오 2. 사이트기본정보 [ 사이트기본정보 ] 영역은생성되는모바일사이트의기본적정보와추가적인서비스이용 을위한정보를입력하고확인합니다. 그림 2 : 사이트기본정보영역 1. 도메인주소생성되는사이트를연결할도메인주소를입력합니다. 사용되는도메인은실제존재하는도메인이어야하며 A도메인인증버튼을클릭하여사용가능여부를확인하실수있습니다. 2. 페이지이름사이트의이름을입력하는항목입니다. 이항목은생성되는모바일사이트의대표 Title로사용됩니다. Title은웹브라우저에서사이트를구별하는중요한요소이므로간략하고명확하게입력하는것이바람직합니다. 3. 게시판패스워드게시판기능이나폼메일기능을추가할경우별도로제공되는모바일페이지게시판관리자모드의로그인을위한비밀번호를입력합니다. 본서비스의모바일게시판관리자사이트는설정된도메인별로제공되며주소는 m. 등록도메인 /manager 입니다. 4. 사이트슬로건사이트의슬로건을입력합니다. 사이트슬로건은생성되는각페이지상단에로고이미지와함께표시됩니다. 사이트슬로건은생략이가능하며입력되지않았을경우슬로건영역은표시되지않습 2/14
니다. 사이트기본정보에입력된내용은생성되는모바일페이지에다음과같이적용됩니다. 그림 3 : 페이지이름과사이트슬로건의입력과적용 3. 디자인설정영역디자인설정영역은생성되는모바일사이트의디자인에관한사항을결정합니다. 그림 4 : 디자인설정영역 1. 테마선택기모바일에디터는테마시스템을사용합니다. 테마는생성되는사이트의전반적인 Look & Feel를지정하며사이트콘텐츠와독립적인구조로구성되어있습니다. 그러므로모바일사이트가생성완료된후에도테마를교체하는것이가능합니다. 테마는 2011년 8월현제총 22개가등록되어있습니다. 3/14
그림 5 : 테마선택기에등록된테마 테마선택기에서사용할테마를선택하면해당테마에대한정보가 ATheme 정보영 역에출력됩니다. 그림 6 : 선택된테마에대한정보를출력하는 Theme 정보영역 2. 로고이미지사이트의로고이미지를지정합니다. 로고이미지는생성되는사이트의각페이지상단에표시됩니다. 로고이미지는생략할수있으나테마에따라디자인영역에포함되는경우도있으므로선택한테마의형태에따라생략여부를결정합니다. 3. 메인이미지메인이미지는메인페이지의비주얼영역에표시될이미지를지정합니다. 메인이미지의크기는테마에따라제한이있을수있으므로선택한테마정보를참고하여어울리는이미지를지정합니다. 메인이미지의지정은생략할수있으며메인이미지가등록되지않을경우는테마의샘플과동일한비주얼영역이미지가사용됩니다. 디자인설정영역에입력된내용은생성되는모바일페이지에다음과같이적용됩니다. 4/14
그림 7 : 로고이미지와메인이미지의입력과적용 4. 페이지구성영역 페이지구성영역은모바일사이트의한페이지를작성하는영역으로기본적으로하나의영역만표시되어있으나편집기능의페이지추가버튼으로여러개의페이지구성영역을추가할수있습니다. 구성할수있는페이지의수는에디터기능상으로는제한이없습니다. 그러나페이지구성영역수만큼메인메뉴가생성되며테마에따라메인메뉴가제한적일수있으므로 Theme 정보의최대메뉴수를참고하여적절히조절하여야정상적인디자인의페이지를생성할수있습니다. 그림 8 : 페이지구성영역 5/14
다음은페이지구성영역과주요기능에대한설명입니다. 1. 페이지메뉴명해당페이지의메뉴명을입력합니다. 모바일에디터는각페이지구성영역의페이지메뉴명을자동으로메인페이지에표시되는메인메뉴를생성합니다. 또한서브페이지에서툴바영역에해당메뉴명을표시하므로가급적명확하고간결한단어로작성하는것이바람직합니다. 2. 편집버튼편집버튼은해당페이지구성영역을활성화시킵니다. 페이지구성영역이여러개가있을경우편집버튼을클릭하면해당버튼이위치한페이지구성영역만활성화되고나머지페이지구성영역은비활성화상태가되며활성상태와비활성상태는시각적으로구별됩니다. 그림 9 : 페이지구성영역의활성화상태편집기능에서추가되는각요소들은활성화된 5편집영역에만추가되므로기능을추가하기전에페이지구성영역에활성화상태를확인하십시요 3. 상하이동버튼상하이동버튼은페이지의순서를조정합니다. 모바일에디터는하나의페이지구성영역으로모바일기기에서한화면을구성하므로상하이동버튼을통한순서의이동이사이트콘텐츠에는영향을미치지않습니다. 그러나메인메뉴의순서가페이지구성영역의순서에따라작성되므로페이지구성영역을작성한후메인메뉴의순서를변경할필요가있을경우사용합니다. 4. 삭제버튼삭제버튼은해당페이지구성영역을삭제합니다. 삭제되는페이지구성영역에입력된모든정보를잃게되므로주의가필요하며버튼 6/14
을클릭시승인여부를확인하는경고창이표시됩니다. 그림 10 : 삭제확인경고창 5. 편집기능요소영역편집기능요소들이추가되는영역으로각편집기능요소들은해당페이지의콘텐츠를작성합니다. 5. 편집기능구성요소 편집기능구성요소는각페이지의실제콘텐츠를구성하는기능으로모바일사이트에디터의우측에고정되어있는편집기능을통해추가됩니다. 각구성요소는공통적으로상하위치이동과삭제버튼이있어콘텐츠의순서를변경하거나해당항목을삭제할수있습니다. 그림 12 편집요소공통버튼각구성요소의기능과용도는다음과같습니다. 그림 11 : 편집기능 1. 소제목추가콘텐츠본문에제목열을추가합니다. 좌우중앙정렬을할수있으며기본값은좌측정렬입니다. 하나의페이지구성영역에여러번지정할수있으며화면에표시되는형태는선택한테마에따라달라집니다. 7/14
그림 13 : 소제목의입력과적용 2. 이미지추가콘텐츠본문에이미지를추가합니다. 좌우, 중앙, 정렬을할수있으며기본값은좌측정렬입니다. 하나의페이지구성영역에여러번지정할수있습니다. 입력되는이미지는기본적으로원본크기로표시되나화면보다이미지가클경우는화면폭에맞도록이미지크기가조절됩니다. 사이트의표시속도를위해서이미지의크기를적절히조절하여입력하시기바랍니다. 그림 14 : 이미지의입력과적용 이미지를입력시에는이미지가전달하고자하는내용을명확하고간략하게이미지설 명에대체문자열을입력하는것이바람직합니다. 다만단순히전달내용이없는장식 용이미지라면이미지설명은입력하지않습니다. [ 이미지설명 - 대체문자열에대하여 ] 대체문자열은이미지가사용될수없는환경등에서이미지를대신하여표시되는문자열입니다. 이미지에대체적절한문자열을입력하면접근성이향상되며검색엔진노출에도유리합니다. 8/14
3. 문단추가콘텐츠본문에문단을추가합니다. 좌우중앙정렬을할수있으며기본값은좌측정렬입니다. 하나의페이지구성영역에여러번지정할수있습니다. 문단요소는기본적으로문자열을입력하게되어있으나 HTML 체크를이용하여 HTML을직접문단영역에 HTML를직접작성할수있습니다. HTML 체크가되지않은상태에서는 HTML코드가입력되더라도에디터에서일반문자열로변환하여그대로표시하게됩니다. 그림 15 : 문단의입력과적용 위의적용사례에서 A 문단은 HTML 체크가활성화된상태에서입력하여생성된모바 일사이트에서도링크등이정상적으로표시되나 B 문단은 HTML 체크가비활성화된 상태로 HTML 로문단을입력하여도 HTML 이적용되지않으며입력된형태그대로표 시되는것을볼수있습니다.. [HTML 체크에대하여 ] 모바일에디터가생성하는 HTML 코드는 HTML5 를사용하며규격화되어있습니다. 문단에잘못된 HTML 코드를입력하게되면에디터의규격화된코드규칙을깨드릴수도있으며이와같은경우 9/14
사이트가정상적으로생성되지않을수도있습니다. 그러므로 HTML 기능을사용시에는가급적간단한기능만을사용하고표준에맞는 HTML 코드를사용하시길바랍니다. 5. 오시는길추가콘텐츠본문에지도를추가합니다. 주소지를입력하면에디터가자동으로해당위치의구글지도를생성하여표시하게됩니다. 그림 16 : 오시는길의입력과적용 하나의페이지구성영역에여러번지정할수있습니다. [ 구글지도에대하여 ] 모바일에디터는주소지를입력받아구글지도이미지를자동으로생성합니다. 구글지도를사용하지않고임의의약도를표시하려는경우는이미지기능을사용하여원하는이미지지도를사용하실수있습니다. 4. 폼메일추가사용자로부터메일을수신하기위한폼메일기능을추가합니다. 폼메일기능은사이트에 1번만구성이가능하며 A서식추가버튼으로입력서식을자유롭게구성할수있습니다. 화면에표시되는형태는선택한테마에따라달라집니다. 폼메일은사이트하단콘텐츠구성에입력된메일로송신될뿐아니라모바일사이트관리자페이지에서도확인할수있습니다. 10/14
그림 17 : 폼메일의입력과적용 5. 게시판추가모바일사이트에게시판기능을추가합니다. 게시판은제목과내용항목이기본적으로지정되며추가등록요소를체크함으로써사용자로부터 이름, 이메일, 이메일, 비밀번호 를입력받을수있습니다. 게시판기능은사이트에 1번만구성할수있으며화면에표시되는형태는선택한테마에따라달라집니다. 그림 18 : 게시판의입력과적용 게시판은읽기, 쓰기, 편집, 삭제기능을지원하며모바일사이트관리자페이지를통 하여서도게시판관리를지원합니다. 11/14
그림 19 : 모바일게시판의기능화면 [ 모바일사이트관리자페이지 ] 모바일사이트에디터에서생성한폼메일정보와게시판관리를위해모바일사이트관리자페이지 (m. 등록도메인 /manager) 를제공하며모바일사이트관리자페이지는사이트기본정보영역에서등록한비밀번호로접속이가능합니다. 모바일사이트관리자페이지에서는모바일환경에서지원하지못하는게시판게시물의이미지파일첨부등이가능합니다. 6. 하단콘텐츠구성영역 하단콘텐츠구성영역은생성되는모바일사이트하단에공통적으로표시되는내용을설정합니다. 그림 20 : 하단콘텐츠구성영역 1. 하단내용하단에표시될내용을지정합니다. 텍스트로만입력되며화면에표시되는형태는선택한테마에따라달라집니다. 12/14
2. 이메일이메일정보를입력합니다. 여기에입력되는이메일정보는모바일사이트에구성된폼메일의수신메일로사용되며하단에표시된이메일주소를통해사용자의모바일기기의메일프로그램을통해이메일을발송할수있습니다. 3. 전화전화번호를입력합니다. 각페이지하단에표시되는전화번호는스마트폰에서이를터치할시바로전화로연결해주는기능을갖습니다. 그림 21 : 하단콘텐츠의입려과적용 13/14
만든사람들 김은영 ( 디자이너 ) 테마디자인 & CSS 작성에디터디자인 & CSS 작성김진아 ( 디자이너 OB) 테마디자인 & CSS 작성 송진성 ( 프로그래머 ) 비즈니스로직프로그램 나인환 ( 설계 / PM) 서비스설계 & 프로토타입제작 14/14
Mobile Web Site Editor By