A LIST Apart: For People Who Make Websites

스마트폰 브라우저 현황

by Peter-Paul Koch

사용자들은 자신의 휴대폰에서 웹사이트를 사용할 수 있기를 기대합니다. 2-3 년 이내에, 휴대폰 지원은 모든 사이트에서 표준이 될 것입니다. 웹 개발자들은 모바일 웹 개발에 관한 기술들을 익혀야 하며, 그렇게 하지 않는다면 고객을 잃을 위험에 처하게 될 것입니다.

Users expect websites to work on their mobile phones. In two to three years, mobile support will become standard for any site. Web developers must add mobile web development to their skill set or risk losing clients.

어떻게 하면 웹사이트가 모바일 환경에서 동작하도록 할 수 있을까요? 대답은 간단합니다 - 모든 휴대폰에서 테스트를 해 보고, 발견되는 문제들을 해결하는 것입니다. 명백하지만, 또한 명백히 쓸모없는 대답이기도 합니다. 시장에 출시되는 모든휴대폰에서 디자인을 테스트하는 것은 불가능합니다. 모바일 환경에서는, 최소한 10가지의 운영체제가 있고, 고려해야 할 브라우저들도 15개나 됩니다. 장치들은 비싸고, 모든 개발자가 이런 것을 5-10개씩 가지고 테스트 할 수는 없는 일입니다. 모든 휴대폰에서 테스트한다는 것은, 거의 대부분의 웹 개발자들에게는 불가능한 일입니다.

How do you make websites mobile compatible? The answer is obvious: By testing them on all mobile phones, and by solving the problems you encounter. But, that’s a useless answer. It’s impossible to test your designs on everymobile phone out there. Within the mobile phone landscape, there are at least ten operating systems (OSs) and fifteen browsers that require consideration. Mobile devices are expensive, and not every web developer can afford to buy five to ten of them. Testing “on all mobile phones” is impossible for most web developers.

이 글에서는, 어떤 장치에서 테스트를 할 지 결정할 수 있도록, 스마트폰 시장과 운영체제, 브라우저들에 대해 간단히 살펴볼 것입니다. 그 다음에, 스마트폰에 맞는 테스트환경을 조성하는 방법에 대해 살펴볼 것입니다.

In this article, I’ll give you an overview of the mobile web market, as well as phone platforms and their browsers, so that you can decide which mobile devices to test on. Then, we’ll look at how to set up a mobile test bed.

스마트폰 시장

웹 개발자들은 테스트 역량을 스마트폰에 집중해야만 합니다. 쓸만한 브라우저들은 거의 모두 스마트폰에서 동작합니다. (스마트폰이 아니면서도 괜찮은 브라우저를 탑재한 것은 매우 드뭅니다. 상황은 바뀌겠지만, 어쨌든 이것이 지금의 현실입니다.) 이러한 명제는 의문을 낳습니다: 그럼 스마트폰이란 것이 무엇인가? 나는 모바일 업계의 공식적인 정의를 다음과 같이 풀어 씁니다:

Web developers should concentrate their testing efforts on smartphones. All good mobile browsers run on one smartphone platform or another. (Few non-smartphones have good browsers. That will change, but for now it’s true.) This begs the question: What is a smartphone? Here’s how I paraphrase the mobile industry’s more-or-less official definition:

스마트폰이란 사용자가 프로그램을 설치할 수 있는, 인식 가능한 운영체제가 구동되는 휴대폰입니다.

A smartphone is a phone that runs a recognizable OS on which the user can install applications.

스마트폰 시장은 몇개의 시장으로 분할되며, 각각의 것들은 독특한 구매자층을 가지고 있습니다. 좀 더 알고 싶다면, Tomi Ahonen이 스마트폰 사용자들스마트폰 마켓셰어에 관해 쓴 글을 읽어보기 바랍니다.

The smartphone market is divided into several submarkets, each of which has a distinct audience. For more information, read Tomi Ahonen’s articles on smartphone consumers and smartphone market share.

스마트폰 시장 개요
시장 점유율 운영체제 주요 구매자
하이엔드 20% iOS
안드로이드
webOS
MeeGo
윈도우폰 7
블랙베리OS 6

하이엔드 그룹의 사용자들은 다른 어떤 것 보다도 웹 서핑과 응용프로그램에 가치를 두며, 자신이 만족할 수 있다면 기꺼이 비용을 지불합니다.

Within the high-end group, users care about web surfing and applications above anything else, and they’re willing to pay for these features.

비즈니스 35% 블랙베리
심비안
윈도우폰 7

비즈니스 그룹에는 기업체에서 임직원들에게 구입해주는 스마트폰이 포함됩니다. IT 부서에서 운영체제를 결정하는데, 이러한 기준에는 회사의 네트워크에 접속해서 이메일을 확인하고 보안이 적용된 인트라넷을 사용할 수 있는가 하는 것이 포함됩니다.

The business group includes phones that companies buy for their employees. The IT department decides which OS can access the company network so that users can retrieve e-mail and browse secure intranets.

중급 45% 안드로이드
심비안
블랙베리
bada
윈도우 모바일

이 그룹의 사용자들은 대개 음악, 카메라, 텍스트 입력(하드웨어 키보드를 필요로 하는 수준의) - 모두를 적당한 가격으로 이용할 수 있는가 하는 것에 관심이 있습니다.

Within the mid-range category, users are interested in music, a good camera, and/or easy texting (which requires a hardware keyboard)—all in an affordable device.

참고:

Notes:

플랫폼 게임

모바일 시장에서 현재의 쟁점은 플랫폼입니다. 물론 플랫폼에서 가장 중요한 요소는 운영체제입니다만, 앱스토어나 브라우저 같은 것도 매우 중요한 부분을 차지합니다.

The current fight in the mobile world is about platforms. While the operating system is the most important ingredient of a platform, app stores and browsers are also important.

플랫폼은 시장에서 다른 플랫폼과 경쟁하며, 바로 이 점이 웹 개발자들의 흥미를 끄는 부분입니다. 각각의 플랫폼은 디폴트 브라우저를 가지고 있고, 향후 특정 플랫폼이 시장에서 승리하게 되면 그 브라우저는 곧바로 상당한 점유율을 차지하게 될 것인데, 웹 개발자들은 그 브라우저에 집중할 것이 강제되기 때문입니다.

A platform competes with other platforms in its market, and that’s where it gets interesting for web developers. Every platform has its own default browser, and if a certain platform should win the war, its browser would gain a large market share and force web developers to pay attention to it.

하이엔드 시장에서는 현재 iOS와 안드로이드가 선두주자입니다. 하지만 2011년에는 MeeGo(노키아)와 윈도우폰 7(마이크로소프트)가 경쟁에 뛰어들 것이며, 블랙베리OS 6(RIM) 역시 참여할 가능성이 있습니다.

In the high-end market, iOS and Android are the current front-running platforms. However, in 2011, they may get competition from Windows Phone 7 (Microsoft) and MeeGo (Nokia). BlackBerry OS6 (RIM) may try to enter this market, too.

주의를 기울여야 합니다

문제는, 대부분의 웹 디자이너와 개발자들(블로그 운영자들은 언급하지 않기로 합니다)이 하이엔드 시장에 정면으로 맞부딪혔다는 것입니다. 운영체제들이 다른 시장에 겨냥하고 있는 것에는 문화의 축이 결부됩니다. 결과적으로, 거의 대부분의 사람들은 iOS와 안드로이드가 벌이고 있는 싸움에 집중하고 있으며, 다른 것들은 전부 무시하고 있습니다. 이러한 것은 바뀌어야 합니다.

The problem is that most web designers and developers (not to mention the entire blogosphere) fall squarely in the high-end market. A cultural bias exists against OSs aimed at any other market. As a result, most people focus on the struggle between iOS and Android, and ignore the rest. This has to change.

중급 시장에서는 심비안(노키아)가 현재 주도권을 쥐고 있지만, 바다(삼성), 블랙베리(RIM), 그리고 새로운 중저가형 안드로이드 제품들(구글) 모두가 강력한 경쟁자들입니다.

In the mid-range market, Symbian (Nokia) is dominant right now, but bada (Samsung), BlackBerry (RIM), and the new mid-range Androids (Google) are strong competitors.

비즈니스 시장은 보수적입니다. iOS가 이 시장을 석권하려는 시도를 하고 있고, 안드로이드 역시 아마 시도하고 있겠지만, 그리 쉽지 않아 보입니다. 블랙베리와 심비안이 여전히 주도권을 쥐고 있으며, 윈도우 모바일이 약간의 경쟁력을 갖고 있습니다.

The business market is conservative. Although iOS tries to penetrate this market, and Android presumably wants to do the same, they haven’t yet succeeded. BlackBerry and Symbian continue to rule, with a smattering of Windows Mobile on the side.

상황은 복잡합니다 - 모바일 웹을 이제 막 시작하려는 사람에게는 더욱 더 그렇습니다. 감을 잡을 수 있도록, 모바일 시장 개요 테이블을 만들어 두었습니다.

The situation is complex, especially for someone who’s just starting out with the mobile web. I’ve created a mobile market overview tableto help you make sense of it all.

모바일 브라우저 시장

플랫폼 전쟁이 이후의 시장 구도를 움직이게 되겠지만, 웹 개발자들은 현재의 환경에 더 관심이 있을 것입니다. 그러면 현재의 모바일 브라우저 시장을 살펴보도록 합시다.

Although the platform wars will, in large measure, shape the future mobile browser landscape, web developers are likely more interested in the present environment. Let’s take a look at the current mobile browser market.

모바일 브라우저의 마켓 셰어 상황에 대해서는 정보 소스가 한가지밖에 없습니다: StatCounter가 그것입니다. 여기에는 한계가 있습니다 - 브라우저 탐지가 이따금씩 이상해 보이고, 사이트에서 이 서비스를 직접 신청할 경우에만 그 트래픽을 분석하고 있습니다. 하지만 다른 대안은 아직 없습니다. 그러면, 2010년 11월의 StatCounter 통계는 어떨까요?

There’s only one source of mobile browser market share information: StatCounter. It does have its limitations: Their browser classification is sometimes strange, and the sites on which they measure traffic select themselves by subscribing to the service. Still, there is no other source of data. So what does StatCounter say for November 2010?

2010년 11월, 세계 브라우저 상황
점유율 브라우저 참고
22% 오페라

StatCounter는 오페라 미니와 오페라 모바일을 같은 것으로 간주합니다. 오페라 측과 이야기 해 본 결과, 나는 이 숫자의 90% 정도는 오페라 미니 일 것으로 짐작하고 있습니다.

StatCounter lumps Opera Mini and Opera Mobile together. My personal estimate, based on discussion with Opera, is that about 90% of this number is Mini.

22% 사파리

StatCounter는 iOS를 아이폰, 아이팟 터치, 아이패드로 분류하고 있습니다. 그런데 아이패드 통계를 모바일 통계에 포함시키지 않고 사파리 데스크탑으로 분류하고 있으므로, 이 숫자에는 아이패드가 포함되지 않은 것입니다.

StatCounter splits up iOS into iPhone, iPod Touch, and iPad. It includes iPad stats with the Safari desktop—not in the mobile statistics. Therefore, this figure excludes the iPad.

19% 블랙베리

이 점유율은 거의 대부분 OS5와 그 이전 버전들이며, 여기에서는 블랙베리 자체 개발의 렌더링 엔진이 사용되고 있습니다. OS6 부터는 블랙베리에서 웹킷 기반의 브라우저를 사용하므로, 일이 무척 쉬워질 것으로 기대하고 있습니다.

This encompasses mostly the OS5 and older models, which run a browser with a homegrown rendering engine. From OS6 on, BlackBerry uses a WebKit-based browser, and that will make our job a lot easier.

17% 노키아

노키아의 웹킷 기반 브라우저들은 다양한 형태로 출시되었는데, 편차가 좀 있는 편입니다. 불행히도, StatCounter는 이러한 것을 구분하지 않고 있습니다.

Nokia’s WebKit-based browser comes in various flavors, some of which are better than others. Unfortunately StatCounter does not differentiate between each flavor.

11% Android

안드로이드는 브라우저라는 관점에서는 매우 심하게 분산되어 있습니다. 특히 HTC와 소니에릭슨의 장치들에서 차이가 심한 편입니다. 이러한 비호환성에서 문제가 생길 것을 염두에 두어야 할 것입니다.

The Android market is pretty fragmented when it comes to browsers. There are some subtle differences between browsers on HTC and Sony Ericsson devices. Expect problems to arise from these inconsistencies.

4% 넷프론트

넷프론트는 아시아 지역에서 출시한 약간 오래된 휴대폰들에서 지배적으로 사용되고 있으며, 특히 소니에릭슨 제품이 그렇습니다. 이 숫자에는 소니의 PSP(플레이스테이션 포터블)와 기타 게임 장치들이 포함됩니다.

NetFront runs mostly on older phones from Asian vendors, notably Sony Ericsson. This figure includes the Sony PlayStation Portable as well as other gaming devices.

1% UCWeb

중국에서 가장 많이 사용되는 브라우저입니다. 기능은 미약합니다.

The most popular browser in China. It offers little functionality.

1% 삼성

StatCounter는 모든 삼성 브라우저들을 뭉뚱그리고 있는데, 오래된 넷프론트 기반부터 최근의 웹킷 기반 바다 모두가 여기 포함됩니다.

StatCounter lumps all Samsung browsers together, from old NetFront-based phones to the new WebKit-based bada.

이러한 것은 세계적통계입니다. 나라마다 자세한 상황은 상당히 다릅니다. 지원해야 할 브라우저를 결정하기 전에, 당신이 살고 있는 나라의 통계를 찾아보아야 할 것입니다. 사이트에 방문하는 사용자들의 로그 파일을 검토하는 것도 사람들이 어떤 브라우저를 사용하는지 파악하는데 도움이 될 수 있을 것입니다.

These are globalstats; traffic shares differ quite a bit from country to country. Find your own country’s stats before deciding which browsers to support. You may want to study your client’s log files to learn which devices people are using to visit the site.

관심이 있다면, 여기에서 제공된 현황을 Gartner 가 집계한판매 현황과 비교해 보십시오. 많은 차이를 발견할 수 있을 것입니다.

If you’re interested, compare these traffic share stats to sales share stats reported by Gartner; you’ll discover many differences.

아이폰의 시장 지배

브라우저 현황과 판매 현황을 비교하다 보면, iOS에 사용된 사파리의 브라우저 점유율이 판매 현황에서의 점유율과는 어울리지 않는 것을 발견할 것입니다. 모바일 웹사이트를 만들 때는 이러한 것을 염두에 두어야 하겠지만, 이걸 핑계로 아이폰에서만 테스트하는 것은 좋지 않습니다.

If you compare the traffic and sales share stats, you’ll notice that Safari for iOS’s traffic market share is out of proportion to its sales market share. Keep this fact in mind while building mobile websites, but don’t use it as an excuse to test only on the iPhone.

아이폰이 시장을 지배하고 있는 것에는 두가지 이유가 있습니다. 첫째: iOS는 모바일 환경에서 웹 서핑을 한다는 특정한 목적을 위해 개발된 첫번째 플랫폼입니다. 결과적으로, 휴대폰에서 인터넷을 이용하고자 한 사람들은 아이폰(일부는 안드로이드)를 선택했습니다. 둘째: 애플은 아이폰 구매자들이 정액형 데이터 요금제를 사용할 수 있도록 했는데, 이것은 꽤나 매력적인 것이었습니다.

There are two reasons why the iPhone dominates: First, iOS is the first platform created specifically for mobile web surfing. As a result, people who want to surf on their phone choose the iPhone (or, sometimes, Android). Second, Apple made sure that those who bought the iPhone would get a flat-fee data plan which encourages web surfing.

정액형 데이터 요금제는 시간이 지남에 따라 사라지게 될 것입니다 - 경제적으로 감당할 수 없는 것이기 때문입니다. 유럽 사용자들은 T-모바일을 매도하고, 미국 사용자들은 AT&T 를 더 심하게 헐뜯고 있는데, 이 기업들에서 아이폰 사용자들에게 괜찮은 수준의 데이터 서비스(심지어는, 음성 서비스조차도) 제공하지 못하고 있기 때문입니다. 아이폰 사용자들의 데이터 사용량이 늘어난다고 해서 그 기업들의 수입이 늘어나는 것은 아닙니다. 그러면 굳이 네트워크를 업그레이드할 이유가 없지 않겠습니까?

The flat-fee data plan is disappearing, however. AT&T in the US, and new iPhone carriers such as Vodafone in Europe, now offer a capped data plan because it is in their economic interest to do so. In the past, consumers reviled T-Mobile in Europe and especially AT&T in the US because they could not maintain good data connections (or even voice connections) for iPhone users. They had no economic incentive to improve their service because more iPhone data traffic wouldn't generate more income for them. Hence the change in plans.

이러한 이유로, 또한 다른 운영체제들이 계속해서 점유율을 늘리고 있으므로, 나는 아이폰의 시장 지배가 슬슬 끝나가고 있다고 느낍니다. 물론, 얼마나 빨리 그렇게 될지는 알 수 없습니다.

For this reason, as well as the increasing popularity of other OSs, I feel that the days of iPhone dominance are numbered, although I cannot predict how quickly that will happen.

최고의 모바일 브라우저

그렇다면, 사파리에 대항해서 최고의 모바일 브라우저가 될 수 있는것은 무엇일까요?

So what are Safari’s main competitors for Best Mobile Browser?

최근에 나는 네가지 브라우저를 “최상급” 으로 평가합니다:

Currently I rate four mobile browsers as “Excellent,” my highest rating:

  1. iOS에서 구동되는 사파리: 모든 면에서 최상입니다.

    Safari for iOS—the best mobile browser overall,

  2. 안드로이드 웹킷

    Android WebKit,

  3. 삼성 바다에서 구동되는 돌핀 - 가장 빠른 모바일 브라우저입니다.

    Dolfin for Samsung bada—by far the fastest mobile browser, and

  4. 블랙베리 웹킷 - OS6와 그 이상의 버전에서 디폴트 브라우저입니다. (현재로서는 블랙베리 터치에서만 이용 가능합니다)

    BlackBerry WebKit, the new default browser for OS6 and higher. (Currently only available on the BlackBerry Torch.)

네가지 브라우저 모두가 터치 이벤트 를 지원하는데, 터치 이벤트는 터치스크린 기반의 인터페이스를 구현하는데 있어 절대적으로 중요한 것입니다, 또한, 네가지 모두가 웹킷 기반의 렌더링 엔진을 탑재하고 있습니다. 애플에서 처음 그것을 만들었고, 구글, 삼성, RIM역주에서 이것을 자사의 브라우저 개발에 사용했습니다. (노키아, 팜, 그리고 최근에는 LG도 그렇게 하고 있습니다)

All four browsers support touch events, which are absolutely crucial to any seamless touchscreen-based interface. Also, they are all based on the WebKit rendering engine. Apple created it, and Google, Samsung, and RIMmade it the starting point for their own browsers. (As did Nokia, Palm, and most recently LG.)

모바일에는 통일된 웹킷은 존재하지 않습니다

하지만, 웹킷 기반이고 터치 이벤트를 지원한다고 해서 최상의 브라우저가 되는 것은 아닙니다. 최근 LG는 팬텀을 출시했는데, 이것은 저가형 휴대폰을 겨냥한 브라우저입니다. 비록 이것이 웹킷 기반이고 터치 이벤트를 지원하기는 하지만, 좋은 브라우저라고 말하기는 어렵습니다.

However, WebKit and touch events do not necessarily make an excellent browser. Recently, LG released Phantom, a browser for low-end phones. Despite the fact that it’s WebKit-based and supports touch events, it is not very good.

이러한 것에서 웹 개발자들에게 절대적으로 중요한 명제를 하나 도출해 낼 수 있습니다: 모바일에 웹킷은 없습니다. 나는 9가지의 모바일 웹킷 기반 브라우저들을 테스트해보았는데, 전부 다 달랐습니다. 아주 심하게 달랐던 것은 아닙니다: 기본적으로 CSS지원은 좋았고, 자바스크립트 역시 잘 동작했습니다만, 모두가 서로 다른 장단점들을 가지고 있었습니다.

This underscores a general rule of the utmost importance to web developers: There is no WebKit on mobile. I tested nine mobile WebKit-based browsers and they all behave differently. Not wildly so: Baseline CSSsupport is good, and JavaScript is definitely workable. Still, each one has its problems and strong points.

이러한 다양성 때문에, 가능한 한 많은 웹킷 기반의 브라우저에서 테스트해보는 것이 중요합니다. 사파리에서 동작한다고 해서, 안드로이드나 블랙베리의 웹킷 기반 브라우저에서 잘 동작할 것이라고 예상해서는 안됩니다.

Because of this variability, it’s important to test your websites in as many WebKit-based browsers as you can. Don’t assume your website will work on the Android or BlackBerry WebKit-based browsers just because it works in Safari.

괜찮은 브라우저

위에서 애플, 구글, 삼성, RIM의 디폴트 브라우저들을 최상급이라고 평가했습니다. 거기에서 좀 떨어지는 것들을 괜찮은 브라우저라고 칭하겠습니다. 여기에는 오페라 모바일, webOS에서 동작하는 팜 웹킷, 그리고 노키아의 Maemo OS의 디폴트 브라우저인 게코 엔진 기반 MicroB 가 있습니다. (마지막 것은 곧 MeeGo 로 대체될 것입니다).

The Apple, Google, Samsung, and RIMdefault browsers form what I call the Excellent class. Below them is what I call the Good class: this includes Opera Mobile, Palm WebKit for webOS, and MicroB, the Gecko-based default browser for Nokia’s Maemo OS, which will soon be replaced by MeeGo.

이 브라우저들은 터치 이벤트를 지원하지 않고, 각각의 구현마다 줌 기능이 다릅니다. 그렇지만 CSS와 자바스크립트가 문제를 일으키는 일은 별로 없을 것입니다.

These browsers do not support touch events, and zooming varies in each implementation. From a pure CSS and JavaScript point of view however, you’ll encounter few problems.

셋 중에서는 오페라 모바일이 가장 중요합니다. 윈도우 모바일 장치를 만드는 업체들에서 IE로는 부족하다고 판단하여 이것을 디폴트 브라우저로 선택한 사례가 많기 때문입니다. 현재로서는, 가장 널리 사용되는 모바일 운영체제인 심비안의 노키아 웹킷에 대한 대체 브라우저이기도 합니다.

Of the three, Opera Mobile is the most important, because it serves as a default browser for many Windows Mobile devices where the vendor decided IE wasn’t good enough. Currently, it’s an alternative for Nokia WebKit on Symbian, the largest mobile OS.

오페라 미니

오페라 미니는 대단히 중요한 브라우저이며, 반드시 이것을 가지고 테스트를 해야 합니다. 오페라 미니에서 웹 서핑을 위해 제공하는 대단히 특이한 방식 때문입니다. 오페라 미니는 iOS와 안드로이드에서 사용 가능하며, 다른 운영체제에서는 호스트 역할도 합니다.

Opera Mini is an extremely important browser and you should definitely test your sites with it, because of the unique way it handles web surfing. It’s available for iOS and Android, as well as a host of other OSs.

오페라 미니는 위에서 다루었던 모든 브라우저들 - 오페라 모바일을 포함해서 - 과는 다릅니다. 다른 브라우저들은 HTML/CSS/자바스크립트를 다운로드하고, 해석하고, 렌더링하는 방식으로 동작합니다. 오페라 미니는 상당히 다른 일을 합니다. 오페라 미니 브라우저에서 페이지를 요청하면, 요청은 오페라 미니 서버로 전송됩니다. 서버는 요청된 자원들을 다운로드하고, 그것을 해석하고, 렌더링합니다. 그런다음 그 페이지의 이미지를 당신의 휴대폰으로 돌려보냅니다. 오페라 미니 클라이언트에서 그 이미지를 보여줍니다.

Opera Mini is different from all other browsers we’ve discussed so far, including Opera Mobile. Where the other browsers just download the HTML, CSS, and JavaScript, interpret it, and render it, Opera Mini does something quite different. When you request a page in Opera Mini, that request goes to a special Opera Mini server. The server downloads the assets, interprets them, and renders the page. Then it sends back an image of the resulting page to your phone. You view the image via the Opera Mini client.

이러한 것의 장점은, 오페라 미니 클라이언트는 대단히 적은 양의 메모리만을 필요로 하므로, 저가형의 라우엔드 장치들에 아주 적합하다는 것입니다. 이에 더해, 실제로 다운로드되는 데이터는 아주 많이 압축된 이미지들 뿐입니다.

The advantage is that the Opera Mini client needs very little memory, which makes it especially suited to low-end, inexpensive devices. In addition, the actual data download consists only of a highly compressed image.

오페라 미니의 단점은 클라이언트 사이드의 상호작용을 제공하지 못한다는 것입니다. 링크를 클릭하는 것이 뭔가 Ajax가 결부된 자바스크립트 이벤트 핸들러를 작동시킨다면, 오페라 미니는 서버로 돌아가서 지시를 기다립니다. 서버가 스크립트를 처리하고, 업데이트된 페이지의 이미지를 다시 보내줍니다. 그렇지만, 이러한 것은 잘못된 것이 아니라 순기능이라는 것을 이해하는 것이 중요합니다. 클라이언트 사이드의 상호작용을 포기하게 되면, 하드웨어 비용과 데이터 이용료 모두를 상당히 많이 절감할 수 있습니다 - 전세계 규모로.

Opera Mini’s disadvantage is that it offers no client-side interactivity: If clicking on a link fires a JavaScript event handler for some Ajaxy goodness, Opera Mini goes back to the server to ask for instructions. The server handles the script and sends back an image of the updated page. However, it is important to note that this is a feature, and not a failure. For many people around the world, giving up client-side interactivity saves a lot of money, both in device and data plan costs.

오페라 미니가 이러한 방식으로 동작하는 유일한 브라우저인 것은 아닙니다. 중국에서 가장 널리 사용되는 브라우저인 UCWeb 역시 비슷한 방식으로 동작합니다. 자체 개발된 렌더링 엔진이 어떤 상황에서는 단순한 링크조차 다루지 못하기 때문에 문제가 많은 것은 알고 있습니다만, 웹킷 기반으로 바꾸는 것은 시간 문제일 뿐입니다.

Opera Mini is not the only mini browser. The most popular Chinese browser is UCWeb, which works on similar principles. I believe its homegrown rendering engine is lousy—in some situations it can’t even handle a simple link. Their switch to WebKit is only a matter of time.

노키아 웹킷

출시 첫 해, 마이크로소프트의 윈도우 7 판매량은 2억 4천만 카피 이상 이었습니다. 물론, 그중 상당수는 IE8과 함께 출시되었습니다. 2009년, 노키아는 4억3천2백만 대의 휴대폰을 판매했습니다. 그중 절반 이상이 노키아 웹킷 브라우저를 디폴트 브라우저로 채택하였습니다.

In the first year of sales, Microsoft sold 240 million copies of Windows 7. Many of them shipped with IE8, of course. In 2009, Nokia sold 432 milliondevices. Over half of them had a Nokia WebKit browser as a default.

바꿔 말하자면, 작년에는 노키아 웹킷 브라우저가 IE보다 많이 시장에 풀렸다는 것입니다. 노키아 웹킷은 충격적일 정도로 거대합니다. 아직 그 브라우저 점유율은 높지 않습니다. 일반적인 노키아 휴대폰 사용자들은 아이폰 사용자들에 비해 인터넷 이용률이 적은 편입니다. 하지만, 이러한 상황은 언제라도 바뀔 수 있으며, 따라서 당신의 사이트에는 이것에 대한 대비가 필요합니다.

In other words, last year more copies of Nokia WebKit were pushed into the market than IE. Nokia WebKit is staggeringly huge. Still, its traffic market share is modest; the average Nokia user doesn’t surf the web nearly as often as the average iPhone user. That could change, though, and your websites must be ready.

S40 (라우엔드 운영체제) 및 오래된 심비안 장치들에서 동작하는, 역시 오래된 노키아 웹킷 브라우저가 있습니다. 신형의 심비안 장치에서 동작하는 신형의 노키아 웹킷 브라우저도 있습니다. 후자는 좀 이상하긴 하지만, 어쨌든 동작합니다. 전자의 경우는 더욱 어렵습니다. 갖고 있는 심비안 휴대폰에서 어떤 브라우저를 채택했는지 확신할 수 없다면, Acid 3 test 를 해보면 됩니다. 후자의 경우에는 50점 정도가 나올 것이고, 전자는 완전히 실패할 것입니다. Stephanie Rieger가 작성한, 노키아 웹킷에 대해 알아야 할 것들로 가득한 훌륭한 시리즈물이 있습니다.

There’s an older Nokia WebKit browser that runs on the S40 (the low-end OS) as well as older Symbian devices (up to S60v3 feature pack 1). There is also a newer Nokia WebKit browser that runs on newer Symbian devices. The latter is a bit odd, but workable. The former is more difficult. If you’re not sure which browser your Symbian phone has, run the Acid 3 test. The later browser will score around 50, while the earlier one will fail completely. Stephanie Rieger has written a great series of articlesabout Nokia WebKit that’s full of stuff you need to know.

미국/캐나다 시장에 집중하는 사이트의 경우에는 노키아 웹킷을 무시해도 별 문제는 없습니다. 노키아가 북미 시장에서 차지하는 점유율은 매우 미미합니다. 하지만 다른 지역을 대상으로 하고 있다면 이 브라우저를 반드시 테스트해야 할 것입니다.

Sites aimed exclusively at the US/Canadian market can mostly ignore the Nokia WebKit browser. Nokia has negligible market share in North America. Sites aimed at audiences in other regions should be tested on this browser, however.

구형 블랙베리

블랙베리의 경우 OS6 이전에는 자체 제작한 브라우저를 사용하고 있었는데, 이것은 성공작이라고는 할 수 없습니다. 불행히도, 블랙베리 사용자의 대다수가 아직 이 오래된 브라우저를 사용하고 있습니다. OS6의 점유율은 아직 미약합니다만, 바뀔 것입니다.

Before OS6, BlackBerry ran its own homegrown browser, which was not a success. Unfortunately, the vast majority of BlackBerry owners still have this older browser; OS6 has hardly hit the market yet. But that’ll change.

이 오래된 블랙베리 브라우저에서 최대의 문제점은 자바스크립트의 성능입니다. (거의 없는거나 마찬가지입니다) OS4.6과 그 이전 버전에서는, 이 문제점은 거의 해결 불가능한 수준입니다. 그 이후의 버전에서는 약간의 스크립트 기능이 지원되지만, 6 까지는 아주 고된 작업입니다. 따라서, OS6 이전의 블랙베리에 대해서는 자바스크립트 지원을 완전히 포기하는 것이 현명한 일일 것입니다.

JavaScript performance is the biggest problem with the old BlackBerry browser. (It’s pretty much absent.) On OS4.6 and before, this problem was almost unsolvable. OS4.61 and higher offer at least some script functionality, but it’s very cumbersome up until OS6, so you should just forget about scripting entirely for older BlackBerry browsers.

IE는?

여러가지 브라우저들에 대해서 사이트를 테스트하라고 역설했습니다 - 당신이 테스트해야 할 경우의 수는 일반적인 데스크탑용 사이트의 그것을 이미 초과했습니다. 하지만, 이 우울한 상황에도 한줄기 희망의 빛이 비칩니다 - 모바일 환경에서는 IE가 문제가 되지 않습니다.

I’ve already covered several browsers that I urge you to test your site on—the total test browser count is already higher than for the average desktop site. There’s a ray of hope between all the gloom, however: IE doesn’t matter on mobile.

윈도우 폰 7의 디폴트 브라우저는 IE7에 기반한 것이며, IE8의 기능을 일부 차용하고 있습니다. 이것은 윈도우 모바일의 디폴트 브라우저가 IE6에 기반한 것에 비한다면 꽤 좋은 것입니다. 더 오래된 버전은 IE4에 기반하고 있습니다. 비록 윈도우 폰 7이 약간의 판매고를 올릴 수는 있겠지만, 데스크탑에서 점유하고 있는 65% 같은 숫자는 결코 언급할수도 없을 것이라고 확신합니다. 시간이 좀 지나면 마이크로소프트의 점유율은 높게 잡아서 스마트폰 시장의 10-15% 정도가 될 것입니다.

The default browser in Windows’ Phone 7 is based on IE7 and incorporates some IE8 features. That’s better than Windows Mobile’s default browser, which is based on IE6. Older versions are based on IE4. Although Windows Phone 7 could become a hit, I believe it won’t ever command a 65% market share as it does on the desktop. I estimate that, in time, Microsoft will conquer 10 to 15% of the smartphone market, tops.

따라서 문제가 조금 바뀌는데, 우리들 웹 개발자들은 IE에 대해 갖고 있는 지식들을 털어내고 IE 사용자들이 다른 스타일시트를 다운로드하도록 해야 할까요? “모든” 사용자들이 모바일 연결에서 IE때문에 추가적인 코드를 다운로드 받도록 해야 할까요? 아니면 IE를 무시해아 할까요? 나는 후자의 손을 들어주겠습니다.

So the question becomes: Do we web developers dust off our IE knowledge, and force IE users to download extra style sheets? Do we force allusers to download IE code branches over a mobile connection? Or do we ignore IE? I’m in favor of the latter.

마이크로소프트에서도 이러한 것 - 우리가 IE 기반에서는 테스트조차 하지 않고 있다는 - 을 알고 있으며, IE9 기반의 브라우저로 업그레이드 함으로서 IE 모바일의 “문제를 만들” 수 있다는 것도 알고 있습니다. 사실, 이미 진행 중입니다. 모든 사이트가 IE모바일의 이후 버전에서 어느날 갑자기 동작하게 된다면, 나쁠것은 전혀 없습니다! 사실 지금 테스트를 해 볼 수도 있긴 하지만, 데스크탑에서 했던 전철을 밟아서 이 버그를 해결하면 저 버그가 튀어나오는 것 같은 소모적인 일을 할 필요는 없는 것입니다.

Microsoft is aware of this problem, and knows it can makeIE Mobile matter by upgrading it to IE9 levels. In fact, this is being done right now. If all our sites suddenly work in a future version of IE Mobile, all the better! And we might even start testing on it. But we’re not required to laboriously work around one IE bug after another, as we do for the desktop.

다른 브라우저들

현재로서는 무시해도 괜찮지만 앞으로는 좀 더 중요해질 수 있는 몇가지 브라우저들이 있습니다.

There’s a few other browsers that you can ignore right now but that could conceivably become important in the future:

테스트 환경

그럼 이제, 그동안 알아본 것 들을 바탕으로 테스트 환경을 만들어 보도록 합시다.

Now, let’s apply your new knowledge of platforms and browsers to create a test setup you can use.

테스트 시작

지금 당장 시작해야 합니다. 물론, 수중에는 많아봐야 2개 정도의 휴대폰이 있겠지만, 사이트를 휴대폰에서 보는 것 만으로도 아주 많은 것을 알 수 있습니다.

Start testing right now. Sure, you may only have one or at most two phones to use, but you will learn a lot just by viewing your site on any phone.

가장 중요한 문제는 지금 바로 확인할 수 있습니다 - 화면이 아주 작습니다. 모든 휴대폰은 데스크탑에 비해 현저히 작은 화면을 갖고 있으며, 사이트는 거기에 들어 맞아야 합니다. 당장 실험을 시작하세요. 갖고 있는 휴대폰의 시장 점유율이 낮다는 것을 신경쓸 필요가 없습니다. 어떤 휴대폰에서 테스트를 하더라도, 테스트를 하지 않는 것보다는 낫습니다.

The most tricky mobile problem is one you can address right away: The tiny display. Every mobile phone has a tiny display by desktop standards, and your site needs to fit in it. Start experimenting immediately. Don’t worry that your devices are not representative of market share. Any mobile test is better than no mobile test.

장치 구입

그럼 이제 돈을 좀 써야 될 시기입니다. 아마도 아이폰이나 안드로이드 중 하나는 이미 가지고 있을 것입니다. 블랙베리나 노키아 - 당신이 사는 곳에서 더 널리 쓰이는 것으로 구입하세요. 구입할때는 아주 신상은 아닌, 널리 쓰이는 것으로 선택해야 합니다. 이것은 아직 웹을 그리 많이 이용하지는 않는 스마트폰 사용자들을 대상으로 간주하는 것입니다.

Then it’s time to shell out some money. You probably already have an iPhone or Android. Buy a BlackBerry or a Nokia Symbian—whichever is more popular where you live. Choose a medium-new, popular model. This will represent the smartphone masses that rarely browse the web—yet.

예산이 충분치 못하면, 노키아나 블랙베리에서 터치스크린 기능이 없는 것을 사도 괜찮습니다. 예산에 여유가 있다면, 여전히 터치스크린 기능이 없는 것을 사고 나머지는 저축해 두세요. 모든 사람이 터치스크린을 갖고 있는 것은 아니며, 당신은 터치스크린 없이 스마트폰을 사용한다는 경험에 익숙해져야 할 필요가 있습니다. 3번째, 혹은 4번째 휴대폰을 사도 될 정도로 예산에 여유가 있다면, 이미 언급했던 플랫폼 - 바다(삼성), 윈도우폰 7, 윈도우 모바일 중에서 선택하길 권합니다. 당신이 거주하는 지역에서의 점유율을 기준으로 이러한 것들 중 한두개를 선택하면 됩니다.

If you don’t have a big budget, buy a Nokia or BlackBerry non-touchscreen device. If you have money, reserve some for a non-touchscreen anyway. Not all users have a touchscreen, and you should definitely get acquainted with other input modes. If you have budget left for a third or even a fourth device, consider any platform I already mentioned, bada, Windows Phone 7, or Windows Mobile. Pick the one or two that have the greatest market share in your part of the world.

브라우저 설치

내가 작성해 둔 브라우저 목록을 보고, 구입한 장치에 설치할 수 있는 모든 브라우저들을 다운로드하고 설치해야 합니다. 특히 오페라 미니와 UCWeb에 주의를 기울여야 합니다.

Go through my browser listand install absolutely every browser you can download on the devices you already have. Pay special attention to Opera Mini and UCWeb.

테스트 서비스

현재로서 2-4개의 휴대폰과, 6-10가지의 브라우저를 갖고 있을 것입니다. 아직 예산이 남아 있다면, 더 사세요. 휴대폰을 더 구입할 예산은 없다면, 두가지 선택지가 있습니다: 테스트 서비스와 에뮬레이터입니다.

By now you have two to four devices with maybe six to ten browsers in total. If you still have a budget left, buy more. Without a budget to buy devices, you have two choices: test services or emulators.

현재로서는 두가지 테스트 서비스 - Device AnywherePerfecto Mobile를 이용할 수 있습니다. 두가지를 비교해보고 더 좋은 쪽을 선택하세요.

The two main test services are Device Anywhere and Perfecto Mobile. Compare them and decide which one you like best.

이러한 서비스들은 연구소에 여러개의 휴대폰들을 진열해 놓고, 그 각각을 웹캠으로 촬영하는 형태입니다. 그리고 데스크탑 브라우저를 사용해서 그 휴대폰 중 하나를 제어하는 것입니다. 비용이 좀 들기는 하지만, 휴대폰을 사는 것 보다는 훨씬 저렴합니다.

These services have rows upon rows of mobile phones lying in their labs with webcams pointed at each of them, and you can access them through your desktop browser to test anything you want. This costs some money, but it’s a lot cheaper than buying the devices.

에뮬레이터

모바일 테스트를 진행하는 가장 저렴한 방법이 에뮬레이터인 것은 맞지만, 개인적으로는 그다지 추천하지는 못합니다. 에뮬레이터가 제 기능을 하려면 모바일 브라우저를 윈도우(또는 맥)에 포팅해야 하는데, 그 과정에서 여러가지 것들이 꼬이기 때문입니다.

While emulators are the cheapest way to conduct mobile testing, I admit I’m not a big fan of emulators, because to be really good, the mobile browser has to be ported to Windows (or Mac), and much can go wrong in that process.

에뮬레이터 리스트를 살펴보고, 설치할 수 있는 만큼 설치해보십시오. 불행히도, 그들 대부분은 SDK를 필요로 하는데, 이러한 것은 상당한 저장공간을 차지합니다.

Go through the emulator list and install as many as you can. Unfortunately, most need an SDKto run within, which will bloat your computer.

브라우저 리스트

테스트 환경을 완성했다면, 계약서를 작성할 때 첨부될 브라우저 목록을 준비해둬야 합니다. 클라이언트는 자신의 사이트가 어떤 브라우저에서 동작하게 될 지알아야 합니다.

Once you have a mobile test setup and clients who want their sites to work on mobile, make a generic browser list to insert into your contracts. Your client needs to know which browsers their site isgoing to work on.

사파리와 오페라 미니 - 이 두 브라우저는 무조건 지원해야 합니다. 클라이언트는 아마도 안드로이드에 대한 지원도 요청할 것이며, 모바일에 대한 지식이 풍부하다면 블랙베리나 심비안에 대한 지원도 요청할 수 있습니다. 브라우저의 버전에 대해서 명확하게 계약해야 합니다. 이런 것은 당신이 마련해 둔 테스트 환경에 따라 달라질 것입니다. 몇가지 도움이 될 수 있는 것은:

Two browsers are inevitable: Safari and Opera Mini. Clients will likely ask for Android, too, and the mobile-savvy ones will insist on BlackBerry or Symbian. Agree on browser versions; this probably depends on the devices, test services, or emulators you have available. There are a few tricky bits here:

고객이 아이폰에서만 되면 된다고 하더라도, 최소한 하나의 다른 브라우저에서 충분히 사용 가능하도록 해야 합니다. 연습할 수 있는 기회를 놓칠 이유는 없습니다.

Even if your client only asks for the iPhone, make sure your site works reasonably well on at least one other mobile browser. Never pass up a chance to practice.

점진적인 발전 모델이 도움이 될 것입니다

모든 모바일 브라우저에서 모든 것이 되게끔 할 수는 없지만, 그건 괜찮습니다. 그럴 필요는 없습니다. 누군가가 오페라 미니를 사용하면서 애니메이션을 볼 수 없다고 하면, 그정도는 받아들일만한 일입니다. 또한 구형 블랙베리에서는 스크립트 전체를 완전히 끌 수 있도록 준비해둬야 합니다.

Progressive enhancement is your mobile development friend. Not everything will work on every mobile browser, but that’s OK. Not everything needswork on all browsers. If somebody uses Opera Mini and doesn’t see your animations, that’s acceptable. And be prepared to switch off your script entirely for older BlackBerries.

모바일 웹 개발이 일상적이게 되면 점진적 발전 모델이 널리 사용되게 될 것입니다. 데스크탑에서는 IE사용자들을 배려하도록 강제되었지만, 모바일 시장에서는 상황이 완전히 다릅니다. 따라서, 일부 브라우저에서는 기능을 끄는 것을 망설일 필요는 없습니다. 사용자가 내용을 읽고 내비게이션을 따라 이동할 수 만 있다면, 임무는 완수한 것입니다.

Progressive enhancement will become widely used once mobile web development becomes commonplace. On the desktop you are forced to keep your IE users happy, but on mobile the situation is quite different. So don’t hesitate to turn functionalities off for some browsers. As long as the user can read the content and use the navigation you’ve done your duty.

모바일: 새로운 개척자

내가 제공한 정보들이 당신의 모바일 웹 환경에서의 좋은 출발점이 될 수 있기를 바랍니다. 어려운 일이 될 것입니다 - 그중 대부분은, 모든것이 데스크탑 웹과는 다르다는 것에서 시작합니다. 뿐만 아니라, 우리가 데스크탑 브라우저들에 대해서 확신하고 있는 자세한 지식들은 모바일 환경에서는 아직 확신할 수 없습니다.

I hope this huge amount of information has given you a starting point for your own adventures on the mobile web. It’s going to be difficult; mostly because it’s so different from the desktop web. Besides, the detailed browser knowledge that we take for granted on the desktop is not available for the mobile web just yet.

그렇다고 해서 실험을 멈춰서는 안됩니다. 될 법한 것은 뭐든 시도해 보십시오. 때때로 잘 안될 수 있습니다만, 그런것은 모두 게임의 일부분입니다. 잘 된다면, 부디 그러한 것을 알리십시오. 당신의 동료인 모바일 웹 개발자들은 정보에 목말라하고 있습니다.

That shouldn’t stop you from experimenting, though. Just try something that makes sense to you. Sometimes it won’t work, but that’s all part of the game. And if it does work, please write about it. Your fellow mobile web developers need the information.

행운을 바랍니다. 그리고 당신은 혼자가 아니란 것을 기억하세요.

Good luck, and remember: you’re not alone.

참고자료들

몇가지를 정리해 두었습니다. 모바일 시장이 어디로 향하는지에 뒤쳐지지 않도록 구독하는 것이 좋을 것입니다.

Here’s a reading list of mobile authorities. Subscribe so that you can stay informed on where the mobile market is heading:

1. 블랙베리 제조사입니다.돌아가기

댓글 (2335)

저자

Peter-Paul KochPeter-Paul Koch is a mobile platform strategist, consultant, and trainer in Amsterdam, the Netherlands. He concentrates on web technologies, mobile websites, and W3C