모바일 웹사이트 제작 전 알아두면 좋은 10가지

1. 해상도를 고려한 레이아웃

모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 큰 차이점은 해상도 차이에 따른 레이아웃입니다.

모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에

이점을 고려한 웹사이트 기획 및 디자인, 퍼블리싱이 필요합니다.

게다가 모바일 기기마다 해상도가 제각각이라는 점도 참 난감한 요소지요.


국내에서 보통 모바일 웹사이트 제작은 전 해상도를 고려하기 보다는

최근 출시된 스마트폰을 기준으로 해서 기획, 개발 및 검수 되는 사례가 많습니다.(아이폰, 갤럭시S)

그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다.




※ 국내 출시된 주요 모바일 기기 해상도

iPhone	320 * 480
iPhone4	960 * 640
모토로이 해상도	854 * 480
HTC 디자이어(넥서스원)	800 * 480
옵티머스Q	800 * 480
갤럭시A	800 * 480
갤럭시S	800 * 480
시리우스	800 * 480
베가	800 * 480

다음과 네이버의 경우는 width를 가변폭으로 지정해놓아 해상도가 다른 모바일 기기에서 유동적인 대처를 하고 있습니다.

이러한 가로 길이 가변폭의 레이아웃은 기획, 개발, 디자인 모든 영역에서 함께 고려가 되어야 합니다.

기획적인 측면에서도 가로사이즈가 가변이고 사용자마다 조금씩 차이가 있다는 UX를 인지하여야 하고

디자인적으로도 가변폭에 유의하여 요소들을 배치하여야 합니다.

개발에서도 가변적으로 변하게끔 코딩에 잘 신경써줘야겠죠? ^^




2. 사용자를 편하게, 터치 오류를 줄여라


사용자가 터치하는 영역은 44px*44px를 기준으로 하세요.

손가락으로 터치하는 면적이 최소 이정도는 확보되어야 오터치를 줄일수 있습니다.

너무 작은 경우 링크 영역 주변에 다른 링크요소가 없으면 크게 상관이 없을수도 있겠지만

다른 링크요소들과 함께 44*44 이내에 다닥다닥 붙어있다면

원하는 것을 터치하지 못할 확률이 높아집니다.




3. 화면 확대비율 고정


<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />


이 meta태그는 화면 확대비율을 기기 사이즈 가로에 맞게 조정합니다.

viewport가 가장 잘 적용되는 것은 아이폰이고 기기마다 조금씩 차이가 있습니다.


body {
    -webkit-text-size-adjust: none;
}

그리고 이 css는 webkit 기반의 브라우저에서 텍스트사이즈가 들쑥날쑥 하지 않게 조절합니다.

상황에 맞게 사용하세요.




4. 사이트 아이콘 제공


아이폰3g, 아이폰3gs
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/iOS-57.png" />

아이패드
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/iOS-72.png" />

아이폰4
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/iOS-114.png" />


아이폰에서는 웹사이트 바로가기 아이콘은 홈화면에 넣을 수 있습니다.

이때 홈화면 아이콘으로 저장될 아이콘을 만들어둘 수 있습니다.



5. css3를 활용하여 절감


css3를 잘만 활용하면 그라디언트 효과나, 그림자 효과, 라운드코너 효과를 만들어낼수 있습니다.

이로 인해서 불필요한 이미지를 사용하지 않아도 되어 로딩속도의 절감효과를 볼 수 있습니다.

css3를 잘 활용해보세요.

물론 css3가 미지원되는 모바일기기가 더 많으니 이점도 염두해주세요!



6. javascript는 최소화


모바일 웹으로 얼마나 멋진 사이트를 만들기에 그렇게 많은 자바스크립트 코드가 필요한가요?

여러분들도 잘 알고 있는 훌륭한 자바스크립트 프레임워크인 jquery 역시

모바일기기에서는 부담스러울수도 있습니다.

자바스크립트 프레임워크를 사용하면 물론 생산성 향상에 도움이 되겠지만

사실 모바일 웹페이지는 그렇게 많은 자바스크립트 액션을 필요로 하지 않습니다.

javascript을 사용을 최소로 줄이고 순수한 DOM 조작으로 사이트를 만들어봅시다!



7. over 이벤트는 소용이 없습니다.


터치폰은 마우스커서를 조작하는 것이 아니기 때문에

우리가 흔히 데스크탑을 통해 인터넷을 사용할때 이용가능한

:hover 선택자나

onmouseover와 같은 이벤트를 사용할수 없습니다.

이점 알아두세요.



8. 페이지내에 또 다른 스크롤바는 넣을 수 없어요.


우리는 참 그 작은 공간에 많은 콘텐츠를 꾹꾹 넣고자합니다.

일반 웹 환경에서는 overflow:auto; 또는 overflow:scroll의 값을 사용하여

특정 영역에 많은 콘텐츠를 넣고 스크롤바를 넣을 수 있지만

모바일 웹환경에서는 페이지 내에 또 다른 스크롤바 넣기가 불가능합니다.



전혀 안되는 것은 아닙니다.

모바일네이버의 실시간검색을 살펴보면

자바스크립트로 스크롤바 비스무레한 것이 구현되어 있습니다.

그런데 제 개인적인 소견으로는 사실 모바일 웹페이지 안에 스크롤바를 넣는다는 것이

그닥 좋은 UX라고 생각하지는 않습니다.

스크롤바라는 것이 스크롤이 되는 형태의 UX가 굳어진 것이고

터치폰에서도 화면을 위아래로 쓸어내리거나 올리는 행위로 스크롤을 한다라는 의미가 담겨있는 UX인데

화면에 있는 스크롤바는 터치로 스크롤되는 것도 아니고 단지 위아래 버튼으로

스크롤바를 조절하는 UX입니다.

차라리 그냥 적당 갯수만 보여주거나

새로고침버튼을 넣어서 해당부분만 ajax로 변경을 하는것이 더 낫지 않았나 싶기도 하네요.




9. 일반 웹사이트로 가기에 대한 옵션을 제공하라.


우리는 모바일을 통해서 웹사이트를 이용할때 꼭 모바일용 웹페이지를 이용하고 싶지 않을때도 많습니다.

일반 웹페이지를 사용하는 경우말이죠.

그런데 몇몇 웹사이트는 사용자의 agent를 가져와서

접속한 환경이 모바일기기면 무조건 모바일 페이지로 이동시키기도 하는데

일반 웹사이트를 이용하고자 하는 사용자도 있기 때문에

일반 웹사이트로 가기에 대한 옵션을 제공해주면 좋습니다.



10. 레티나 디스플레이


.myImage {
    height: 40px;
    width: 100px;
    -webkit-background-size: 100px 40px;
    background: url("images/myImage.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
    .myImage {
        background: url("images/myImage@2x.jpg");
    }
}


고해상도의 아이폰4가 출시하면서 우리는 고해상도의 이미지를 제공하여

iphone4 사용자의 만족도를 극대화할수 있습니다.