많은 브라우저 환경
초창기 웹에서는 표준이 거의 존재하지 않았다. 물론 W3C에 의해 1994년 10월부터 웹 표준이 개발되고 있었지만 당시에는 각 개발사가 브라우저를 임의로 만들고 있었다. 그래서 인터넷 익스플로러에 맞게 개발한 웹 페이지가 파이어폭스나 오페라에서 정상적으로 동작하지 않는 일이 비일비재했다. 이떄 플랫폼은 단일 플랫폼인 웹이지만 개발자는 서비스를 브라우저별로 따로 구현해야 했다.
초창기 웹에 비해 웹표준이 지켜지고는 있지만 이러한 문제는 이제 태동기인 모바일 웹에서도 비슷하게 있다. 초창기 PC 에서 웹 브라우저가 웹 표준을 지키지 않아서 문제였다면, 모바일 웹에서는 웹 브라우저가 웹 표준을 미처 구현하지 못해서 문제가 발생한다. 또한 브라우저의 종류와 버전 때문에, 제조사가 기기에 맞춰 수정한 브라우저 차이 때문에, 앱에서 사용하는 웹뷰와 기본 브라우저 사이의 차이 때문에 브라우저 파편화(fragmentaion)가 발생한다.
다음은 브라우저와 기기, 실행 환경에 따른 다양한 모바일 환경을 정리한 표다.
브라우저 환경
| 구분 | 비고 |
|---|---|
| iOS용 사파리 | 3.x, 4.x, 5.x, 6.x, 7.x |
| 안드로이드 브라우저 | 2.x, 3.x, 4.x |
| 기타 | 크롬, 파이어폭스, 모바일 오페라 등 |
모바일 기기
| 구분 | 비고 |
|---|---|
| 애플 | 아이팟 터치, 아이폰 3GS, 아이폰 4, 아이폰 4s, 아이폰 5, 아이폰 5c, 아이폰 5s, 아이패드, 아이패드 2, 아이패드 3, 아이패드 미니 등 |
| 안드로이드용 모바일 기기 제조사(삼성,LG, 팬텍 등) |
삼성, LG, 베가 안드로이드 폰 등 갤럭시 S2, 갤럭시 S3, 갤럭시 S4, 옵티머스, 옵티머스Z, 옵티머스Q 베가 등 각 제조사별 다양한 제품 보유 |
실행환경
| 구분 | 비고 |
|---|---|
| 기본 브라우저 | 모바일 기기에서 제공하는 기본 브라우저, iOS용 사파리, 안드로이드 브라우저 등 |
| 하이브리드앱 | 네이티브 앱의 웹뷰(WebView) |
주로 사용하는 iOS와 안드로이드를 기분으로 정리했는데도 경우의 수가 무수히 많다. 대략 다음과 같은 경우로 나눌 수 있으며, 산술적으로 n4에 해당할 정도로 많은 파편화가 발생할 수 있다.
(모바일 웹에서 파편화가 발생할 수 있는 경우의 수)
브라우저의 종류 || 브라우저의 버전 || 모바일 기기 || 실행 환경
초창기 모바일 웹에서는 정말로 위와 같이 브라우저 종류와 버전에 따라, 기기의 종류에 따라 다양한 문제가 발생했지만 현재는 많이 안정화 됐다.
예를 들어, position:fixed 속성은 안드로이드 2의 기본 브라우저와 안드로이드 3의 기본 브라우저가 지원은 하지만 화면이 깜빡이는 기기도 있었고, 스크롤 이후에 다시 배치되는 경우도 있었다. 반면 하이브리드앱의 웹뷰에서는 정상으로 동작하는 경우도 있었다. 그래서 개발자가 position:fixed 속성을 사용할 때는 운영체제 종류, 버전, 기기 종유에 따라 position:fixed를 사용할 수 있는 경우와 사용할 수 없는 경우를 별도로 구현해야 했다.
하지만 다행이도 운영체제와 브라우저의 버전이 높아질수록, 새로운 기기가 출시 될수록 파편화가 점차 없어지고 있다. 젤리빈(안드로이드 4.1)부터 이러한 파편화가 거의 없어졌고, iOS는 운영체제 개발 회사와 기기 제조 회사가 동일하다 보니 브라우저의 버전별 이슈를 제외하고는 거의 문제가 없다. 물론 운영체제나 실행 환경, 기기에 따른 성능 차이는 여전히 있다.
기기별 다양한 해상도
일반적으로는 PC 기반의 웹페이지는 1024 x 768px 또는 1280 x 1024px 등과 같이 고정된 해상도에 최적화되도록 구성한다. 하지만 모바일에서는 480 x 320px 이나 960 x 640px 등과 같이 기기마다 해상도가 다르기 때문에 모바일 웹을 개발할 때는 더 다양한 해상도를 고려해야 한다.
다음은 스마트폰 및 태블릿 PC의 새상도를 정리한 내용이다.
| 기종 | 해상도(가로 x 세로, 단위:px) |
|---|---|
| 아이폰 3GS | 320 x 480 |
| 아이폰 4, 아이폰 4s | 640 x 960 |
| 아이폰 5, 아이폰 5c, 아이폰 5s | 640 x 1136 |
| 아이패드, 아이패드 2, 아이패드 미니 | 768 x 1024 |
| 아이패드 3세대, 아이패드 4세대, 아이패드 미니 2 | 1536 x 2048 |
| 갤럭시 S, 갤럭시 S2, 갤럭시 S2 HD, 옵티머스, 옵티머스Z, 옵티머스Q, 옵티머스 빅, 옵티머스 2X, 베가, 디자이어HD, 넥서스원 |
480 x 800 |
| 갤럭시탭 | 600 x 1024 |
| 옵티머스 뷰 | 768 x 1024 |
| 갤럭시 S3, 갤럭시 S2 HD, 갤럭시 노트2, 옵티머스G | 720 x 1280 |
| 갤럭시 S4, 갤럭시 노트3, G2, 옵티머스 Pro | 1080 x 1920 |
| 넥서스 7 | 1200 x 1920 |
다양한 해상도에 대응하는 방법은 크게 두 가지로 볼수 있다. 하나는 CSS3의 미디어 쿼리(media query)를 이용해 브라우저의 크기에 사이트를 맞추는 방법이다. 다른 하나는 모바일 기기의 폭에 사이트를 맞추는 방법이다.
모바일 기기의 폭에 사이트를 맞추는 방법은 HTML의 태그에 viewport 속성을 설정하는 것이다. 일반적으로 모바일 앱과 같은 느낌을 주려고 웹 페이지를 확대하거나 축소하는 기능은 사용하지 않고, 모바일 기기의 폭에 해상도를 맞춘다.
네트워크
국내에서는 Wi-Fi나 4G, 4G LTE 등 네트워크 속도가 빠른 서비스를 제공하느 ㄴ곳이 많지만, 여전히 PC에 비해 네트워크 속도가 느리다. 특히 3G 환경은 다른 통신 환경에 비해 네트워크 속도가 느리기 때문에 이런 점을 고려하지 않고 개발하면 성능과 관련된 문제가 많이 생길 수 있다. 속도가 보장된다고 해도 Wi-Fi를 사용할 수 없는 환경에서는 네트워크를 사용하는 것 자체가 사용자에게는 비용이 된다. 따라서 서버로부터 실시간으로 데이터를 주기적으로 가져오는 기능과 같은 것은 설계 단계에서부터 신중히 검토해야 한다.
한정된 전원
모바일 웹은 휴대가 간편한기기에서 실행되기 때문에 PC와 다르게 기기에 전원이 계속 공급되지 않는다. 따라서 모바일 웹을 개발할 때는 전력 소모량도 고려해야 한다. 전력 소모가 심한 하드웨어 가속, 주기적인 요청등을 무분별하게 사용해서는 안된다.