아이디저장


더보기 >










[공지] 미션 도전하기 전에 꼭 읽어보세요.
[공지] 초급미션이 A코스,B코스로 분리되었습니다.

미션 A코스 [고급13단] 모바일웹 프로그램 설치 및 메인페이지 만들기
2011-12-17 10:07:17
아람스쿨 조회수 1858

이번시간부터는 모바일웹에 대한 미션을 수행할 것입니다.

 

모바일웹이란 현대인의 필수품인 이동 단말기(스마트폰,태플릿,.. 등)에서 홈페이지에 접속할 수 있는 브라우징 기술을 말합니다. 이에 따라 홈페이지도 모바일기기에 적합한 모바일웹의 형태로 제작되고 있습니다.

 

관심있어 하시는 분들 많이 계실 것 같으니깐.... 빨리! 시작하겠습니다~

 

 

 

 

 

 

 

 

 

일반적으로 홈페이지는 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버전의 기본경로로  이동되며, 경로가 있을 경우에는 해당 경로로 이동하게 됩니다.

 
[인증업체의 모바일접속 메인화면]
 
 
 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

지금부터 모바일 메인페이지를 만들어봅시다!

만드는 방법은 일반홈페이지 만드는 방법과 동일하며, 아래와 같은 형태로 출력되도록 만들것입니다.

 

상단디자인 : 모바일상단 - 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 접속하시면 자동으로 모바일버젼으로 접속 됩니다.

 

 

 

 

 

위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^

 

댓글 59개