최근 아이폰 등 스마트폰이 인기몰이를 하면서 스마트폰에서 웹서핑을 하는 사람들이 늘어나고 있다.
대부분의 스마트폰에서 풀브라우징을 지원하고 있기 때문에 컴퓨터에서 인터넷을 하듯 대부분의 사이트를 이용할 수 있다. 하지만 작은 화면 크기 때문에 기존 사이트들을 이용하기에는 다소 불편함이 있다. 그래서 네이버, 다음 등 포탈을 비록하여 모바일 전용 홈페이지를 만들어 서비스하는 곳이 늘어나고 있다.
아마 스마트폰을 이용한 웹검색/서핑은 급속도로 늘어날 것이고 인터넷 사용 패턴 자체도 많이 변할 것이다. 이런 변화에 대응하기 위해서는 더 늦기 전에 모바일 전용 사이트를 운영하는 것이 좋을 것이다.
아이폰용 사이트를 만들 때에는 기존 사이트를 만들때와 달리 처리해줘야 할 것이 몇가지 있는데 이것들에 대해 간단히 알아보자.
<html>
<head>
<title>iPhone Site</title>
<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0;" />
<link rel="apple-touch-icon" href="images/siteicon.png" />
</head>
<head>
<title>iPhone Site</title>
<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0;" />
<link rel="apple-touch-icon" href="images/siteicon.png" />
</head>
meta 태그 부분은 모바일기기에 사이즈가 딱 맞게 보일 수 있도록 해준다.
그리고 link 태그 있는 부분은 아이폰에서 해당 사이트를 홈스크린에 추가하기 등을 할 때 사용될 아이콘 이미지이고 57x57 사이즈이 png 이미지로 만들면 된다.
(모서리를 둥글게 만들 필요 없이 그냥 사각형으로 만들면 된다. Glossy 효과도 따로 안줘도 아이폰에 등록하면 알아서 처리된다.)
아래 이미지는 여러 모바일 사이트들을 홈스크린에 추가한 모습이고, 위에 link 태그로 png 아이콘이미지를 만들어둔 것들이 사용된 것이다.
사이트가 로딩되었을 때, 주소입력바 부분 위로 올라가게 하기
아이폰용으로 만들어진 사이트들을 아이폰에서 들어가보면 사이트가 로딩되었을 때 자동으로 주소입력바 부분이 위로 싹 사라지는 것을 볼 수 있을것이다.
이것은 아래와 같은 스크립트를 추가해주면 된다.
<script type="text/javascript">
window.addEventListener("load", function(){
setTimeout(loaded, 100);
function loaded(){
window.addEventListener("load", function(){
setTimeout(loaded, 100);
}, false);
function loaded(){
window.scrollTo(0, 1); // 요 부분이 핵심!
}
</script>
</script>
아이폰 가로모드/세로모드 바뀔 때 감지하기
아이폰의 어플리케이션들을 보면 세로로 사용할 때랑 가로로 사용할 때 거기에 맞춰서 레이아웃을 달리 보여주는 것을 볼 수 있다. 아이폰용 사이트에서도 동일하게 할 수 있는데, 아래 이벤트를 이용하면 된다.
<body onorientationchange="updateOrientation();">
댓글을 달아 주세요
아이폰용 웹사이트 어떻게 만드는지 찾아보고 있었는데 정말 유용한 정보네요 감사합니다.
정말 좋은 정보입니다..
너무 좋은정보 감사합니다.
감사 합니다. 모바일 웹사이트 만드는데 정말 유용한 자료네요..ㅎㅎ
제 카페에 퍼갑니다..^^;;
너무 좋은 정보 감사합니다.
감사합니다. ^^