모바일웹 만들기

개요

안녕하세요. 홈페이지 제작 연구소 입니다.

최근들어 스마트폰 보급량이 늘어남에 따라 모바일웹의 중요성이 커지고 있습니다.
애니빌드 솔루션에서는 PC웹과 모바일웹의 연동이 가능하도록 구성되어 있어, 누구나 간단히 모바일웹을 만들 수 있습니다.
PC웹에서 글을 쓰고 모바일웹에서 확인한다거나, 반대도 당연히 가능하지요.

본 강좌는 '홈페이지 만들기' 강좌를 통해 PC웹이 완성되었다는 것을 전제로 설명하고 있기때문에, PC웹을 제작하지 않으신 분들은 '홈페이지 만들기' 강좌를 통해 PC웹 부터 제작해주시기 바랍니다.

완성된 PC웹이 있으시다면~ 이제 모바일웹을 같이 만들어 보도록 하겠습니다.

모바일 관리자 접속하기

먼저, 완성한 PC 홈페이지의 관리자 사이트로 접속을 합니다.
관리자 사이트에서 오른쪽 위를 보시면 'PC웹디자인', '모바일디자인' 버튼이 있는데, 이 버튼들을 이용하여 PC웹 관리 <-> 모바일웹 관리를 자유롭게 바꿔가며 하실 수 있습니다.
모바일웹 기본세팅을 위해서 '모바일디자인' 으로 변경해보도록 하겠습니다.


구조는 PC웹디자인과 같지만.. 실제 생성되는 모든 페이지는 모바일웹에서 보여지도록 설정이 되어있습니다.
PC웹과 같은 주소를 모바일로 들어가게 되면 모바일에 맞는 화면이 보여지게 됩니다.
PC웹을 보시다가 언제든지 현재 보고 있는 페이지의 모바일 디자인을 보고 싶으시다면, 주소의 제일 뒤에 다음과 같이 추가하여 줍니다.

?mobile_conn=on

(이미 url 주소 가운데 ? 가 들어간 부분이 있다면, 주소의 제일 뒤에 다음과 같이 추가하여 사용합니다.)

&mobile_conn=on

모바일웹 사용설정

[디자인관리 > 모바일웹 사용 > 모바일웹 사용하기]에서 모바일웹 사용 여부를 선택합니다. 설정에 따라서 항상 PC웹을 보여주거나, 원하는 형식을 선택하도록 할 수 있습니다. 일반적으로 '스마트폰으로 접속시 자동으로 모바일웹으로 이동 합니다.' 를 선택해주시면 됩니다.

위에 같이 설정하게 되면, 스마트폰으로 접속시 자동으로 모바일기기를 체크하여 모바일웹을 보여주게 됩니다.

DOCTYPE 변경하기

홈페이지를 제작할 때 중요한 것중에 DOCTYPE 이라는 것이 있는데, DOCTYPE는 Document Type의 줄임말로써 문서의 형식을 지정하는 것입니다.
인터넷 익스플로러나 크롬 등의 웹 브라우저는 DOCTYPE을 통해서 "이 홈페이지는 이러한 형식의 사이트구나..." 라고 인식을 하게 됩니다.

솔루션에서는 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성] 페이지에서 이러한 DOCTYPE 을 설정 할 수 있도록 되어있습니다.
PC웹은 기본설정인 'XHTML 1.0 Transitional' 을 사용하였으나, 모바일웹의 경우 올바른 출력을 위해 'HTML5 표준문서'로 변경하여 줍시다.

확인하기

이제 모바일웹을 사용하기 위한 기본준비를 마쳤습니다.
관리자에서 'Mobile확인' 을 눌러 정상적으로 출력되는지 확인해보세요. (기본세팅만 마친 상태이기 때문에 아무런 내용도 표시되지 않습니다.)


PS. 아래의 주소와 같이 URL 뒤에 /m 을 넣어주시면 PC에서도 간단하게 모바일웹 메인페이지로 접속이 가능합니다.

http://uany01.anybuild.co.kr/m


수고하셨습니다.


top