![]()
이번시간부터는 모바일웹에 대한 미션을 수행할 것입니다.
모바일웹이란 현대인의 필수품인 이동 단말기(스마트폰,태플릿,.. 등)에서 홈페이지에 접속할 수 있는 브라우징 기술을 말합니다. 이에 따라 홈페이지도 모바일기기에 적합한 모바일웹의 형태로 제작되고 있습니다.
관심있어 하시는 분들 많이 계실 것 같으니깐.... 빨리! 시작하겠습니다~
일반적으로 홈페이지는 PC환경에서 잘 돌아가도록 만들어져있으며, 모바일환경에서 돌아갈수 있도록 하기 위해서는 별도로 모바일홈페이지를 제작해야 합니다.
모바일홈페이지의 장점을 꼽으라고 한다면, - 모바일기기의 확대로 때와 장소를 가리지 않고 홈페이지 접속이 가능하고, - 기존의 홈페이지와 연동이 가능하고, - 기존의 PC홈페이지와 차별화되어 있습니다.
현대인들은 개인용PC보다 휴대가 간편한 스마트폰이나 태플릿 형태의 모바일기기를 더 많이 사용하고 있습니다. 따라서 모바일홈페이지를 만든다는 것은 이제 선택이 아니라 필수가 되었습니다.
아람스쿨 솔루션은 이런 대세에 발맞추어 사용자들이 쉽게 모바일홈페이지를 만들 수 있도록 모바일관련 기능을 제공하고 있습니다.
![]()
아람 스쿨 홈페이지에서 [홈페이지만들기 > 프로그램 추가 설치]를 통해 모바일 웹 솔루션을 설치 합니다. 이때 "이슬"이 부족하다면 이벤트를 통해 적립하시기 바랍니다. ^^
※ 만약 이슬이 부족하거나 구매 가능한 등급이 아닌경우 블로그 이벤트를 통해서 쉽게 해결할수 있습니다. http://aramkr.anybuild.com/shop_contents/blog_list.htm?blog_code=imsi
![]()
프로그램이 설치된 후에는 관리자모드 상단우측에 모바일다자인 버튼이 새롭게 나타납니다. 모바일웹을 만들기 위해서 모바일디자인 버튼을 클릭해주세요.
![]()
"모바일 디자인모드로 접속하시겠습니까?"를 물어보면 "예"를 선택합니다.
![]()
기본적인 모바일웹 작업환경이 만들어졌습니다. 전체화면이 일반홈페이지를 만드는 화면과 동일하게 나타나므로 쉽게 작업이 가능합니다.
![]()
[디자인관리 (모바일) 》 모바일웹 사용 》 모바일웹 사용하기]로 이동하여 아래와 같이 설정합니다.
![]() 모바일웹을 사용하려면 기본적으로 도메인이 설치되어 있어야 합니다. 그리고 도메인 설치후에는 http://m.도메인 이 모바일웹으로 연동되며, 스마트폰으로 접속시에는 자동으로 모바일웹으로 접속됩니다.
여기서, 별도로 PC버전과 모바일버전을 선택할 수 있도록 하려면 아래의 소스를 추가하시면 됩니다.
<a href="javascript:web_href('mobile','경로')">모바일 버젼</a>
<a href="javascript:web_href('pc','경로')">PC 버젼</a>
[인증업체의 모바일접속 메인화면]
![]()
![]()
지금부터 모바일 메인페이지를 만들어봅시다! 만드는 방법은 일반홈페이지 만드는 방법과 동일하며, 아래와 같은 형태로 출력되도록 만들것입니다.
상단디자인 : 모바일상단 - PC버전홈페이지와 모바일버전 홈페이지를 선택 Body디자인 : 모바일메인 - 그룹디자인을 이용한 게시판(일반형)의 게시물출력
※ 모바일화면은 크기가 제한되어 있기 때문에 굳이 왼쪽디자인을 만들 필요는 없습니다.
[디자인관리 (모바일) 》 고급 디자인 관리 》 메인 화면 디자인]으로 이동합니다. 아래와 같이 상단디자인을 선택하고 "모바일 상단"페이지를 생성하고 기본디자인으로 선택합니다.
![]()
그룹디자인을 이용해서 게시판을 추출해보겠습니다. [커뮤니티 》 게시판 관리 》 게시판 관리]으로 이동하면, 기존에 PC버전에서 만들었던 게시판들이 있습니다. 현재 나타나는 게시판들은 모두 PC버전환경에서 생성된 게시판으로 모바일환경으로 설정을 변경해야 합니다. 게시판중에서 일반형의 "모바일 환경설정"버튼을 클릭합니다.
![]() ![]()
모바일환경설정에서 게시판 템플릿을 선택하고 수정버튼을 눌러주세요 ※ PC환경은 템플릿이 다양하지만, 모바일환경은 템플릿이 현재 2가지 뿐이랍니다.
![]()
모바일게시판의 수정이 벌써 끝났습니다. 이제는 그룹디자인을 이용해서 게시판내용을 추출해봅시다. [디자인관리 (모바일) 》 고급 디자인 관리 》 그룹디자인 관리]으로 이동합니다.
① 프로그램 마법사 생성버튼을 클릭하세요. ② 게시물 출력 > 특정게시판(목록형)을 선택합니다. ③ 아래와 같이 그룹디자인을 생성합니다.
![]()
생성된 그룹디자인을 Body디자인에 삽입해봅시다. [디자인관리 (모바일) 》 고급 디자인 관리 》 메인 화면 디자인]으로 이동하고, 아래와 같이 "모바일메인"을 생성하고 기본디자인으로 선택합니다.
![]()
관리자모드 상단의 "mobile"을 클릭하여 모바일 홈페이지 확인해봅시다.
![]()
스마트폰으로 접속해도 동일한 화면을 볼 수 있답니다. 모바일웹 접속주소 : http://m.본인아이디.aramschool.co.kr
수고하셨습니다. ^^
완성화면(바로보기) : http://m.uhkr55.aramschool.co.kr/shop_main/main_body.htm 스마트폰으로 http://uhkr55.aramschool.co.kr 접속하시면 자동으로 모바일버젼으로 접속 됩니다.
댓글 59개 |
