특집기사:아이폰용 웹 개발에 유용한 10가지 스니펫

위클립스
이동: 둘러보기, 찾기
Article.png 특집기사 정보
원문 보기
저자 Jean-Baptiste Jung
Warning.gif 이 문서의 원문은 저작권이 표기되어 있지 않아, EPL과 호환 가능한지 확인 되지 않았습니다. 따라서 라이선스가 확인 되면 삭제될 수도 있습니다.

웹사이트를 개발하다 보면, 아이폰이나 아이팟을 비롯한 모바일 디바이스를 포함한 상이한 브라우저 환경을 고려해야 한다. 이 문서에서는 아이폰 친화적인 웹사이트를 만드는데 유용한 빠르고 효과적인 10가지 코드 스니펫(JavaScript, PHP, CSS)들을 소개한다.

목차

[편집] 아이폰 및 아이팟 인식하기

아이폰이나 아이팟용 웹페이지를 만들 때, 가장 먼저해야할 일은 아이폰이나 아이팟을 인식하는 것이다. 그 후, 특정한 코드를 수행하거나 특정한 스타일을 적용할 수 있을 것이다.

[편집] 자바 스크립트로 인식

아래 코드는 자바 스크립트로 아이폰 및 아이팟을 인식하고 특정 페이지로 리디렉션하는 코드이다:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
    }
}

[편집] PHP로 인식

이전 스크립트도 물론 훌륭하지만, 아이폰에서 자바스크립트는 상황에 따라 비활성화 될 수 있다. 이런 이유로 서버쪽에서 PHP로 아이폰이나 아이팟 같은 장비를 인식하는 것을 선호할 수 있다:

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://yoursite.com/iphone');
    exit();
}

[편집] 아이폰 너비 만큼 뷰포트로 설정하기

아이폰에서 웹페이지를 열었을 때, 마치 섬네일처럼 조그맣게 보여서 짜증난 적이 있는가? 이는 개발자들이 뷰포트를 정의하는 것을 잊었기 때문이다(혹은 뷰포트의 존재를 모르거나).

뷰포트를 정의하는 것은 매우 쉽다: HTML 문서에 다음의 meta 태그를 head 섹션에 추가하면 된다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

width=device-width구문은 문서의 너비를 정의하는 것을 허용하며, 주어진 값을 아이폰의 너비와 동일하게 취급한다. 다른 두 구문은 페이지가 확대되거나 축소되는 것을 방지하는데, 이는 아이폰 전용 웹사이트에 유용하다. 그렇지 않은 경우라면 나머지 두 구문을 지우면 된다.

[편집] 아이폰 전용 아이콘 추가하기

사용자가 여러분의 웹페이지를 홈 스크린에 추가했을 때, 아이폰은 자동으로 웹사이트의 스크린샷을 아이콘으로 사용한다. 그러나 특정한 아이콘을 이 용도로 공급할 수 있으며, 당연히 이게 더 낫다.

개인화된 아이콘을 공급하는 것은 쉽다: 아래 코드를 HTML코드의 head 섹션에 붙여 넣어라.

<link rel="apple-touch-icon" href="images/template/engage.png"/>

이미지는 의 png 파일 포맷이어야 한다. 코너의 라운딩이나, 반짝이는 효과는 아이폰이 자동으로 적용시킨다.

[편집] 회전시 글씨 크기가 변경되는 것을 방지하기

아이폰을 회전시키면, 사파리가 텍스트의 크기를 변경하다. 어떤 이유로든 이것이 맘에 들지 않는다면, 아래와 같은 단순한 CSS 선언으로 방지할 수 있다:

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

-webkit-text-size-adjust웹킷 전용 CSS 속성이며, 텍스트 보정에 관한 속성이다.

[편집] 아이폰 방향 인식

아이폰은 사용자가 웹페이지를 가로 또는 세로로 볼 수 있게 하기 때문에, 여러분의 웹사이트가 특정 목적으로 이 정보를 알아야 될 수도 있다.

아래의 편리한 자바스크립트 함수는 아이폰의 현재 방향을 감지하고 특정한 CSS를 적용하게 할 수 있다:

window.onload = function initialLoad() {
    updateOrientation();
}
 
function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;
 
	case -90:
	contentType += "right";
	break;
 
	case 90:
	contentType += "left";
	break;
 
	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

[편집] 아이폰/아이팟에만 적용되는 CSS 스타일 추가

브라우저 감지는 유용하지만, 몇몇 이유로 이것이 가장 좋은 접근법이라고 할 수는 없다. 만약 더 깔끔하게 아이폰에만 특정 CSS를 적용하고 싶다면, 아래의 방법을 사용해 보라:

@media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */
}

[편집] 이미지를 자동으로 리사이즈 하기

현대의 웹사이트들은 대게 480 픽셀이 넘는 이미지를 포함한다. 아이폰의 화면 크기가 작기 때문에, 이미지가 래퍼(Wrapper) 영역을 뚫고 나올 확률이 대단히 높다. 다음의 CSS 코드를 이용하여, 이미지들이 자동으로 100%로 리사이즈 되게 할 수 있다.

장치의 최대 표시 너비가 480픽셀인 경우, 이미지의 너비는 이보다 더 커질 수 없게하는 코드이다:

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

[편집] 기본으로 툴바 숨기기

아이폰의 코딱지만한 화면 때문에, 브라우저의 툴바는 공간의 낭비로 여겨질 수 있다. 웹사이트가 열린 직후, 툴바를 감춰버리고 싶다면, 아래의 자바스크립트 코드를 이용하라:

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

[편집] 특수 링크 사용

몇년 전만 하더라도, “mailto”링크가 매우 대중적으로 사용되었음을 기억하는가? 이 프로토콜은 링크를 클릭한 사람의 기본 이메일 클라이언트를 실행하여, 메일을 보낼 수 있도록 한다. 아이폰은 이 컨셉과 유사한 프로토콜을 2개 더 소개하였다, tel:sms: 이다. 이들을 이용한 링크를 클릭하면, 전화를 걸거나 문자를 보내게 된다:

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

[편집] 호버 슈도 클래스 시뮬레이션 하기

아이폰에서 마우스를 사용하는 사람이 없는관계로, :hover 슈도 클래스는 사용될 수 없다. 그러나, 자바스크립트를 이용하면, 이를 시뮬레이션 할 수 있다. (사용자의 손가락이 링크에 닿는 순간을 호버로 가정한다)

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

일단 이 스크립트가 문서에 추가되었으면, 다음과 같이 CSS를 이용하여 스타일링 할 수 있다.

a:hover, a.hover {
    /* 호버 이펙트 */
}

이 기사에 대한 의견은 토론 페이지를 통해 나눌 수 있습니다.

개인 도구
이름공간
변수
행위
포탈
탐색
도움
도구모음