[아이폰, 안드로이드폰 등 스마트폰용 모바일 웹사이트 만드는 방법 소개]
요즘 스마트폰 가입자 증가와 모바일 인터넷 접속 증가로 모바일 웹사이트 역시 폭발적으로 늘어나고 있다.
포털 사이트들은 물론이고 대부분의 기업들과 일반 사이트들도 기본 웹사이트 외에 추가로 모바일 웹사이트를 구축하는 추세이며, 많은 인터넷 쇼핑몰들 역시 스마트폰에서 접속시 자동으로 모바일웹으로 전환되도록 하고 있어 점차 스마트폰 온라인 쇼핑도 활성화되고 있다.
네이버와 다음에서는 아예 '모바일웹' 디렉토리를 별도로 만들어 무료로 등록을 받고 있다. 2011년 12월 18일 현재 기준으로 네이버는 20,600개의 모바일 웹사이트가 등록되어 있고, 다음(Daum)은 2,830개의 사이트가 등록되어 있다. 확실히 네이버가 모바일웹 활성화에 더욱 신경을 쓰고 보편화에 앞장서고 있는 모습이다.
구축 방법
구축 방법은 일반 웹사이트 만들기와 같은 방법으로 만들면 되지만, 다음의 세 가지 방법은 기본적으로 사용해야 한다.
1. 모바일웹 필수 삽입 코드
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<head>내에 위의 메타태그가 반드시 들어가야 스마트폰에서 원래 크기의 화면으로 정상적으로 보이게 된다.
만일 위의 메타태그가 들어가지 않는다면, 스마트폰은 일반 웹사이트로 인식하여 화면을 매우 작게 보여줄 수 있다.
2. 사이트 가로 크기
스마트폰은 PC 모니터 화면보다 훨씬 작기 때문에 그에 맞는 화면으로 만들 필요가 있다.
스마트폰의 가로 크기 즉 해상도를 생각하여 그 화면에 적절히 보여질 크기로 만들면 된다.
보통의 모바일웹사이트는 가로 크기를 약 300픽셀로 맞추어 만들고 있으며 스마트폰 마다 가로 크기가 약간씩 다르므로 문서내에서는 실제 가로 크기를 100%로 지정해 두면, 대부분의 스마트폰에서 적절히 보여질 것이다. 다시 말해 만들 때는 300픽셀로 생각하여 만들고 가로 크기의 코드를 100%로 지정해 두는 것이다.
최근의 스마트폰은 화면이 커지고 해상도도 더욱 높아져 480픽셀 이상이 되는 경우도 많아지고 있지만, 아직까지는 그 정도 크기를 염두해 두면 괜찮을 것이다.
3. 삽입되는 이미지 크기
삽입되는 이미지 크기 역시, 가로 300픽셀 정도로 맞추면 문안할 것이다.
실제 운영되고 있는 일부 모바일 웹사이트를 소개해 보겠다.
참고로 모든 모바일웹은 스마트폰에서 정상적으로 보여진다. PC에서는 기본적으로 화면이 넓게 보인다.
모바일웹사이트 모음 서비스
신문, 방송, 미디어, 사전, 날씨, 지도, 교통, 만화, 영화, 동영상, 음악, 모바일게임, 모바일쇼핑몰..
건강식품 쇼핑몰 건강스토어 모바일웹 www.hstore.co.kr/
건강기능식품, 푸룬주스, 카스피해유산균, 먹는콜라겐, 석류원액 즙, 종합비타민, 비타민C, 오메가3 ..
모바일 여자 쇼핑몰 모음 서비스 www.estro.co.kr/
'전공 > 유용한' 카테고리의 다른 글
| 갤러시 S3 총 정리 (0) | 2012.05.04 |
|---|---|
| 홈페이지, 블로그에 Twitter, Facebook share 버튼 달기 (0) | 2012.03.16 |
| c browser - > spell 2.7 다운/설치 (2) | 2011.12.06 |
| Adobe Illustrator 의 작동이 중지되었습니다. (0) | 2011.10.06 |
| 안드로이드 인터넷(브라우저) 비교, 북마크(즐겨찾기) 동기화 방법 (0) | 2011.09.29 |