![닫기 [x]](http://dw1.s81c.com/i/c.gif){kind=small}
iPhone 및 Android 플랫폼을 합치면 해당 애플리케이션 스토어를 통해 다운로드할 수 있는 애플리케이션 타이틀의 수가 10만 개를 넘는다. 플랫폼의 SDK를 사용하여 원시 애플리케이션을 작성한 다음 장치에 맞게 컴파일하고 설치한다. 이러한 원시 애플리케이션은 장치의 매력을 높여 주는 무선 네트워크, 블루투스, 데이터 저장소, 가속도계, 나침반 및 기타 유용한 기능을 포함한 장치의 고유 기능에 액세스하는 데 필요한 기능을 제공한다. 그리고 iPhone 및 Android 플랫폼용 원시 또는 사용자 정의 애플리케이션의 인기가 높아지면서 모바일 웹 애플리케이션 분야에서 획기적인 기회가 다가오고 있다. 모바일 웹과 함께 모바일의 시대가 열리고 있는 것이다.
이 기사는 iPhone 및 Android용 브라우저 기반 애플리케이션 개발이라는 주제를 다루는 두 편의 기사로 구성된 시리즈의 첫 번째 기사로 고유한 모바일 웹 애플리케이션을 개발하는 데 유용한 정보를 제공한다. 모바일 웹 애플리케이션의 기능은 모바일 장치에서 웹 사이트를 렌더링하는 수준에 그치지 않는다. 이 기사에서는 모바일 웹 개발을 경쟁력 있는 분야로 만들어 주는 몇 가지 핵심 기술 및 기법을 살펴본다.
웹은 일반적으로 애플리케이션 개발자와 시스템 관리자를 괴롭히던 수많은 문제점을 해결하면서 최고 플랫폼으로서의 입지를 잡아가고 있다. 웹에는 다음과 같은 장점이 있다.
- 웹 애플리케이션은 전개하기가 쉽다. 서버에 설치 또는 복사해 두기만 하면 클라이언트가 브라우저에 올바른 URL을 입력하여 쉽게 액세스할 수 있다.
- 웹 애플리케이션은 고성능 데이터 센터의 서버 팜을 이용하여 효율적으로 확장할 수 있으며 쉽게 사용할 수 있는 웹 사이트 관리 도구에서 서비스된다.
- 웹 애플리케이션은 데이터 저장소를 중앙 집중식으로 관리하므로 간단하게 재해 복구 계획을 세울 수 있다.
- HTML, CSS(Cascading Style Sheet), JavaScript 및 그래픽 이미지를 결합하여 원시 SDK(완전 몰입형 게이밍 환경 결여)의 기능을 능가하는 매우 멋진 사용자 인터페이스 환경을 제공할 수 있으며 대부분의 애플리케이션에서는 게이밍 또는 키오스크 환경을 보장하지 않는다.
- 대다수의 애플리케이션에는 일련의 일상적인 작업을 안내하기 위해 사용하기 쉬운 UI 요소가 필요하다.
웹 애플리케이션 분배 모델의 가장 매력적인 특징은 소프트웨어를 진정한 윈-윈 모델인 등록 지향적 서비스로 전환할 수 있다는 것이다. 그 방법이 궁금할 것이다. 지금부터 그 방법을 간단하게 살펴보자.
웹 전개 모델을 사용하면 구매하기 전에 실제로 사용해 볼 수 있기 때문에 위험 부담과 비용을 최소화할 수 있다. 시험판에 만족한 고객은 서비스를 계속 이용하게 될 것이며 서비스 이용 비용이 신용 카드(또는 PayPal)로 결제된다. 소프트웨어 공급자는 시스템을 쉽게 업그레이드할 수 있기 때문에 지원 비용을 절감할 수 있으며, 궁극적으로 고객에게 전가되는 비용도 최소화할 수 있다. 게다가 SaaS(Software as a Service) 모델을 활용하면 초기 투자 비용이 많지 않아도 소프트웨어를 사용할 수 있을 뿐만 아니라 명확하지 않은 미래가 아닌 1개월 이내에 재정적 ROI를 기대할 수 있다.
정말 좋은 모델이다. 그렇다면 웹과 마찬가지로 모바일에서도 이 모델이 정상적으로 적용되는가? iPhone이 등장하기 전까지는 그렇지 않았다라고 말할 수 있다. 그 이유는 무엇인가?
실상은 모바일 웹 브라우저의 기능이 매우 빈약했다. 그러나 iPhone을 통해 대중 모바일 분야에서 주목을 받기 시작한 WebKit이라는 기술 덕택에 모든 것이 바뀌었다.
iPhone은 불과 몇 년의 매우 짧은 시간안에 세계 제일의 모바일 웹 클라이언트로 성장했다. 그 이유가 무엇일까? 그것은 바로 WebKit이 안정적인 인터넷 연결과 함께 현재까지의 그 어떤 브라우저 옵션보다도 뛰어난 모바일 웹 환경을 제공하기 때문이다. 모바일 시장의 나머지 참여자들은 이 사실에 주목하면서 WebKit을 사용하거나 계획 중이거나 핑계를 대고 있다.
그렇다면 WebKit이란 무엇일까?
WebKit은 iPhone에 있는 Mobile Safari 브라우저의 핵심 브라우저 엔진인 동시에 Android에 있는 브라우저의 기반 기술이기도 하다. WebKit은 다른 모바일 설정에서도 사용되고 있지만 이 기사에서는 iPhone 및 Android 플랫폼만 다룬다.
WebKit은 KDE(K Desktop Environment)에 뿌리를 두고 있는 오픈 소스 프로젝트이다. WebKit 프로젝트는 모바일 장치용 최신 웹 애플리케이션에 활력을 불어 넣는다. 장치 기능과 폼 팩터가 매우 중요한 반면 모바일 사용자는 컨텐츠를 이용한다. 모바일 사용자가 사용할 수 있는 컨텐츠가 인터넷에서 사용할 수 있는 전체 컨텐츠의 작은 일부에 불과하다면 모바일 환경의 매력이 크게 줄어들 것이다.
대부분의 사람들은 통합된 삶을 선호하기 때문에 가정에서 랩탑으로 웹 사이트를 사용하는 경우 기차에 앉아서도 동일한 컨텐츠에 액세스할 수 있어야 한다. 컨텐츠가 바로 킬러 애플리케이션이다. 어디에서 무엇을 하고 있든지 간에 사람들은 자신의 데이터에 액세스하기를 바란다. WebKit은 iPhone 및 Android 플랫폼에서 풍부한 컨텐츠를 사용할 수 있도록 지원한다.
WebKit은 Mac OS X 플랫폼의 기본 브라우저인 Safari 브라우저를 통해 데스크탑에서도 사용된다. 데스크탑 버전이나 iPhone 또는 Android의 브라우저 엔진이든 상관 없이 WebKit은 HTML 및 CSS 기능 지원의 중심에 있다. 실제로 WebKit은 다른 브라우저에 아직 채택되지 않은 CSS 양식을 지원하며, 이 양식은 HTML5 스펙에서 고려 중인 기능이다.
HTML5 스펙은 클라이언트 측 SQL 지원 저장소, 전환, 변환 등을 포함한 다양한 브라우저 기반 기술과 관련된 기술 드래프트의 컬렉션이다. HTML5는 수 년 전부터 실제로 사용되고 있으며 아직은 완성되지 않은 상태이지만 주요 브라우저 플랫폼 지원과 함께 기능 세트가 확정되면 초기 단계의 미약한 웹 애플리케이션은 과거의 기억으로 남게 될 것이다. 웹 애플리케이션 개발은 일반적인 데스크탑 브라우저 풋프린트뿐만 아니라 모바일 영역에서도 주류를 이루게 될 것이다. 앞으로 모바일은 뒤따르는 모습이 아닌 선도적인 모습으로 최신 기술을 이끌어 나갈 것이다.
오늘날 애플리케이션 개발자는 몇 가지 선택사항을 통해 웹 개발 기술에 액세스할 수 있다. 먼저 서버에서 애플리케이션을 HTML, CSS 및 JavaScript 파일로 엄격하게 작성할 수 있다. 물론 HTML 컨텐츠는 정적 HTML 파일로 제공되거나 PHP, ASP.NET, Java Servlets 등의 수많은 서버 측 기술을 통해 동적으로 생성될 수 있다. 이러한 모든 기술은 HTML이라는 하나의 용어로 간단하게 요약할 수 있으며(이 기사의 주제와 관련이 없음) 무엇보다도 WebKit을 사용하는 브라우저에서는 모바일 장치에서 HTML을 해석하고 렌더링한다.
사용자는 브라우저 애플리케이션을 열고 원하는 서버에 대한 URL(예: http://yourcompanyname.com/applicationurl)을 입력하여 모바일 장치(예: iPhone 또는 Android)의 웹 애플리케이션에 액세스한다.
특정 모바일 웹 애플리케이션은 일반 웹 사이트부터 플랫폼 특정 모바일 웹 애플리케이션 사이의 연속선상에서 한 위치를 차지할 것이다.
WebKit의 렌더링 엔진은 iPhone 및 Android 플랫폼의 직관적인 UI와 결합되어 거의 모든 HTML 기반 웹 사이트를 장치에 표시하는 역할을 수행한다. 컨텐츠가 랩핑되거나 전혀 표시되지 않던 과거의 모바일 브라우저와는 달리 웹 페이지가 올바르게 렌더링된다. 페이지가 로드될 때 전체 페이지가 표시될 수 있도록 하기 위해 모든 컨텐츠가 매우 작고 읽기 어려운 배율로 축소된다(그림 1 참조). 하지만 페이지를 쉽게 상하좌우로 이동하거나 축소 및 확대하여 전체 컨텐츠에 쉽게 액세스할 수 있다. 기본적으로 브라우저에서는 980픽셀 너비의 뷰포트 또는 논리적 크기를 사용한다.
그림 1. 로드 시 전체가 축소된 웹 페이지
이렇게 하면 전체 페이지에 액세스할 수 있고 과거 모바일 웹 환경에 비해 훨씬 향상된 성능을 얻을 수 있을 뿐만 아니라 추가 작업을 통해 모바일 환경을 향상시킬 수도 있다.
일반 웹 페이지를 모바일 친화적인 웹 페이지로 원활하게 전환하기 위해 웹 애플리케이션을 몇 가지 영역에서 수정할 수 있다.
페이지가 WebKit에서 올바르게 렌더링될 경우 랩탑 또는 데스크탑 컴퓨터와 같은 마우스 중심적 장치와 iPhone 또는 Android 스마트폰과 같은 터치 중심적 장치 사이에는 몇 가지 차이가 있다. 주요 차이점으로는 "클릭 가능한" 영역의 물리적 크기, "호버 스타일"의 결여 및 완전히 다른 이벤트 시퀀스 등이 있다. 다음은 모바일 사용자에게 표시될 웹 사이트를 설계할 때 고려해야 하는 사항을 간단히 요약한 내용이다.
- iPhone/Android 브라우저는 일반적인 모바일 브라우저에 비해 훨씬 더 읽기 쉽게 화면을 렌더링한다. 따라서 성능이 약화된 버전의 사이트를 만들지 않아도 된다.
- 손가락이 마우스 포인터보다 크다. 클릭 가능한 탐색을 설계할 때 이 점을 염두에 두어야 한다. 링크를 서로 가깝게 배치하면 안된다. 왜냐하면 한 링크를 누를 때 옆에 있는 링크도 함께 눌러지기 때문이다.
- 손가락으로는 마우스 포인터와 같은 방법으로 "항목을 가르키지" 않기 때문에 호버 스타일이 작동하지 않는다.
- Mouse-down, mouse-move 등과 같은 이벤트가 터치 기반 장치에서 약간 다르다. 이러한 이벤트 중 일부는 실행되지만 데스크탑 브라우저에서 볼 수 있는 시퀀스를 사용하지 않는다.
이에 대한 자세한 설명은 iPhone in Action(참고자료 참조)에서 볼 수 있다. 이 기사에서는 WebKit으로 할 수 없는 작업보다는 할 수 있는 작업에 중점을 둔다.
iPhone 또는 Android 방문자에게 친숙한 웹 사이트를 만드는 과정에서 가장 눈에 띄는 과제인 화면 크기에 대해 알아보자. 오늘날 사용 중인 사실 상의 표준 모바일 화면 크기는 320x480이다. 또한 사용자가 웹 컨텐츠를 가로 방향으로도 볼 수 있기 때문에 이 화면 크기는 480x320이 될 수도 있다. 그림 1에서 보았던 것처럼 WebKit은 텍스트가 너무 작아서 일련의 축소 및 확대 작업을 수행해야만 컨텐츠를 효과적으로 읽을 수 있기는 하지만 데스크탑 지향적 웹 페이지를 깔끔하게 렌더링한다. 이 문제를 해결하려면 어떻게 해야 할까?
데스크탑에 영향을 주지 않고 가장 쉽게 모바일 사용자를 수용할 수 있는 방법은 특수 메타태그인 viewport를 사용하는 것이다.
메타태그는 HTML 문서의 head 요소 내에 배치되는 HTML 태그이다. 다음은 viewport
태그의 사용 방법을 보여 주는 간단한 예이다. <meta name="viewport" content="width=device-width" />.
이 메타태그를 HTML 페이지에 추가하면 모바일 페이지에 적합한 배율로 페이지가
설정된다(그림 2 참조). 이 태그를 지원하지 않는 브라우저에서는 태그가 무시된다.
그림 2. 모바일 장치에 적합한 배율로 설정된 페이지
어떤 경우에는 그림 3과 같이 창의 배율을 특정 값으로 미리 설정할 수도 있다.
그림 3. 창 배율 미리 설정하기
특정 배율을 설정하려면 다음과 같이 viewport 메타태그의 content
속성을 명시적 값으로 설정한다. <meta name="viewport" content="width=device-width,
initial-scale=1.0 user-scalable=yes" />. initial-scale 값을 변경하여 화면을 원하는
배율로 축소 또는 확대할 수 있다. iPhone 및 Android 플랫폼의 경우 이 값을 각각 1.0과 1.3 사이의
값으로 설정하는 것이 적절하다. 또한 viewport 메타태그는 최소 배율 및 최대 배율을 지원하므로
이 기능을 사용하여 페이지 렌더링에 대한 사용자의 제어 수준을 제어할 수 있다.
iPhone은 처음 출시된 이후 지금까지 320x480 레이아웃을 유지하고 있는 반면 Android는 시장 상황에 따라 다양한 사용자 모집단을 대상으로 하는 여러 제조업체의 장치에 필요한 다양한 물리적 특성을 지원할 예정이다. 화면 크기, 폼 팩터 및 해상도와 관련된 이 잠재적 가변성은 Android와 같은 모바일 장치를 대상으로 하는 애플리케이션을 개발할 때 고려해야 한다.
Android 장치 간의 물리적 차이를 넘어서 Android의 소프트웨어는 장치의 브라우저 설정을 통해 페이지 렌더링을 더욱 효과적으로 제어할 수 있다는 점을 실제로 보여 주었다. Android 플랫폼은 안정적이면서도 매우 유동적이다. 특정 장치의 설정은 SDK 레벨과 제조업체에 따라 사용자의 개발 환경과 다를 수 있다. 그림 4에서는 Android Emulator V1.6에서 실행한 브라우저 애플리케이션의 Settings 페이지를 보여 준다. Settings 화면에서는 사용자가 장치를 미리 정의된 확대/축소 레벨(최대, 최소, 중간)로 구성하거나 페이지 배율을 자동으로 조정하도록 장치에 요청할 수 있다.
그림 4. Android Emulator의 Settings 페이지
모바일 환경에서 가장 중요한 상수는 변화이기에 모바일 환경은 앞으로도 계속 변화되는 모습을 보여 줄 것이다. 예를 들어, Sprint Hero 브라우저의 설정에는 페이지 렌더링과 관련하여 완전히 다른 옵션 세트가 있다. Hero는 Android V1.5와 HTC 제공 향상 기능을 기반으로 작성되었다. 다행스럽게도 이러한 설정은 viewport 메타태그 웹 페이지에 있을 경우 이 메타태그로 재정의할 수 있다.
지금까지는 너무 작아서 읽기가 어렵기 때문에 약간의 확대가 필요하기는 하지만 WebKit이 일반적인 웹 페이지를 매우 잘 렌더링한다는 점과 viewport 메타태그를 사용하여 페이지를 장치에 표시하는 방법을 제어하여 사용자 환경을 제어하는 방법을 살펴보았다. 이러한 작업은 쉽게 읽고 탐색할 수 있는 페이지를 작성하는 데 도움이 된다. 하지만 한발 더 나아가서 사이트 룩앤필을 모바일 애플리케이션처럼 만들려면 어떻게 해야 할까?
이제 모바일 사용자를 대상으로 하는 설계 전략을 살펴보자. 간단한 예제로서 Google의 GMail 이메일 서비스를 살펴보자.
먼저 그림 5에서는 데스크탑 브라우저 환경을 보여 준다.
그림 5. 데스크탑 브라우저
데스크탑 홈 화면의 왼쪽에는 정보를 제공하기 위한 컨텐츠가 있고 오른쪽에는 로그인 영역이 있다. 이 데스크탑 보기와 그림 6에 있는 iPhone의 모바일 관련 보기를 비교해 보자.
그림 6. iPhone의 모바일 관련 보기
그림 6의 화면은 분명히 모바일 사용자를 대상으로 하고 있다. 애플리케이션을 실행하는 데 필요한 항목만 사용자에게 바로 표시된다. 축소, 확대 또는 스크롤이 전혀 필요하지 않다.
그 다음으로 메시지를 읽는 상황에서 Mobile GMail 애플리케이션이 어떻게 작동하는지
살펴보자. 애플리케이션에서 사용할 수 있는 공간이 제한되어 있기 때문에 메시지 읽기 창에는 단추
또는 탐색을 위한 공간이 거의 없다. 컨텐츠를 읽는 화면에서는 모든 탐색 전용 공간이 배제되었다. 또한
여러 프레임을 사용하거나 div 요소를 스크롤하는 등의 작업은 되도록이면
피하는 것이 좋다. Mobile GMail에서는 페이지의 스크롤이 중지할 때마다 표시되는 간단한 부동 메뉴를 통해
이 문제를 해결한다. 이 메뉴에는 Archive, Delete 및 More라는 세 단추가 있다. More
단추를 선택하면 추가 메뉴 항목이 표시된다(그림 7 참조).
그림 7. 부동 메뉴
이것이 바로 모바일용으로 설계된 애플리케이션이다.
또 하나 고려할 사항은 iPhone 또는 Android 플랫폼에서처럼 고성능 브라우저를 실행하는 방문자에게는 컨텐츠가 풍부한 모바일 환경을 제공할 수 있어야 한다는 것이다. 이를 위해 GMail에서는 그림 8과 같이 페이지 맨 아래에 유용한 옵션을 제공한다.
그림 8. 선택할 수 있는 옵션 제공하기
사용자가 데스크탑 버전의 뛰어난 기능을 원할 경우 그러한 기능을 사용할 수 있는 환경을 제공해야 한다. 가능한 한 사용자가 결정할 수 있도록 해야 한다.
이제 웹 기술을 사용하지만 실제로는 원시 애플리케이션처럼 보이는 애플리케이션을 작성한다고 가정하자.
다음 단계는 일반 웹 사이트가 아닌 대상 플랫폼에 적합한 원시 룩앤필에 가깝게 보이도록 페이지 형식을 지정하여 플랫폼 관련 대상 컨텐츠를 작성하는 것이다. 그렇다면 여기에서 원시의 의미는 무엇일까?
웹 페이지 룩앤필을 특정 플랫폼을 위한 원시 애플리케이션처럼 작성하는 방법을 구체적으로 살펴보기 전에 먼저 두 플랫폼의 강력한 브라우저 기반 관계는 차치하고 iPhone 및 Android 플랫폼의 시각적 차이를 살펴보자.
iPhone에는 고유한 룩앤필이 있다. 사람들에게 iPhone의 스크린샷을 보여 주면 은둔 생활을 하는 수도자가 아닌 이상 누구라도 그 이미지가 iPhone에서 가져온 것이라는 것을 쉽게 알 수 있다. 동일한 사람들에게 Android 장치의 스크린샷을 보여 주면 사뭇 다른 결과가 발생할 것이다. 그 이유가 무엇일까? 여기에는 두 가지 이유가 있다. 주된 이유는 iPhone이 시장에서 더 오랫동안 터를 닦고 있었고 상당한 규모의 iPhone 추종자가 있기 때문이다. 많은 비용을 들여서 기능이 한정된 V1 iPhone을 사기 위해 몇 시간 동안 줄을 서서 기다리던 사람들이 기억나는가? iPhone 소유자인가 아닌가라는 Apple의 뛰어난 마케팅 전략은 오늘날 시장에서 하나의 문화적 아이콘이 되었다. 그렇다면 Android는 어떠한가?
Android는 비교적 새로운 기술인 동시에 여러 면에서 iPhone에 대적하는 기술이며 오픈 소스 커뮤니티를 형성하고 있다. Android는 전화 및 기타 가전 장치와 같은 여러 장치에서 사용될 것이다. 하지만 여기에서는 내용을 단순하게 전개하기 위해 휴대폰에 대해서만 다룬다.
어느 정도 시간이 지나면 전세계적으로 수많은 Android용 장치가 iPhone을 앞서게 될 것이다. 이는 전세계적으로 여러 제조업체에서 Android 지원 장치를 생산하고 있을 뿐만 아니라 여러 통신업체의 네트워크에서 이러한 장치를 사용할 수 있게 될 것이기 때문이다. 매우 많은 수의 업체가 Android 시장에 참여하게 되면 당연히 다양한 형태의 룩앤필이 등장할 것이다. 이는 이미 HTC의 SenseUI 인터페이스를 통해 경험한 바이다. 이 매력적인 룩앤필은 코어 Android SDK에서 사용할 수 없으며 일부 장치와는 호환되지 않는다. Motorola, Google 및 Verizon은 제휴를 통해 DROID라는 새로운 Android 장치를 개발했다. 이 장치는 2.0 플랫폼을 실행하는 최초의 상업용 Android 장치이다.
Android의 다양성과 iPhone의 일관성을 비교해 보자. iPhone의 Apple 소유의 우수한 기술이다. iPhone은 계속해서 발전할 것이지만 이미 태동기부터 다양한 형태로 분할되었던 Android와 같은 분할을 거의 겪지 않을 것이다.
그렇다면 원시 룩앤필을 위해 어떻게 해야 할까?
Web 2.0 이전에는 이 문제가 실질적인 문제였다. 초기에는 다음과 같은 여러 다양한 기술이 포함된 여러 클라이언트 브라우저(모바일 및 비모바일)를 지원하려고 시도했다.
- 완전 병렬 사이트
userAgent를 기반으로 하는 동적으로 생성된 컨텐츠- 컨텐츠를 장치로 보내는 프록시 서버(RIM에서는 장치 내 이메일 렌더링을 위해 이 방법을 효과적으로 활용했다.)
이러한 방법은 아마도 자금이 넉넉한 대규모 팀에서만 사용할 수 있을 것이다. 그렇다면 나머지 팀에서는 어떻게 해야 할까? 이들에게는 이러한 기능을 갖출 수 있는 시간, 능력 또는 자금이 없다. 그리고 앞에서 살펴본 대로 과거의 모바일 웹은 충분하지 않기 때문에 과거로 돌아가고 싶지도 않다.
다행스럽게도 이제는 과거로 돌아가지 않아도 된다. WebKit과 CSS의 시대에서는
스타일시트와 미디어 쿼리를 사용하여 이러한 차이점을 쉽게 해결할 수 있다. 앞에서 소개한 대로
미디어 쿼리는 클라이언트에 대한 정보를 가져오는 기술이다. 일반적으로 브라우저에서는 해당
브라우저를 식별한 userAgent 문자열을 보내며, 서버에서는 장치에
보낼 컨텐츠를 결정하는 작업을 수행한다(위 설명 참조). 미디어 쿼리를 사용할 경우에는 브라우저에서
해당 기능을 바탕으로 결정을 내린다. 다음은 스마트폰을 대상으로 하는 스타일시트를 가져오는
예제이다. <link rel="stylesheet" type="text/css"
href="smartphone.css" media="only screen and (max-device-width: 480px)" />. 그리고
다음은 데스크탑 컴퓨터를 대상으로 하는 미디어 쿼리이다. <link rel="stylesheet" type="text/css" href="smartphone.css" media="only screen and (min-device-width: 481px)" />.
미디어 쿼리에 대한 자세한 설명을 보려면 드래프트 스펙(참고자료 참조)을 보기 바란다.
네트워크 상태를 표시하는 샘플 애플리케이션을 통해 이 접근 방법을 사용하는 예제를 살펴보자.
이 애플리케이션의 용도는 여러 서버를 모니터링하는 것이다. ISV(Independent software developer)는 여러 서버에서 여러 애플리케이션을 지원하는 경우가 자주 있다. 그리고 상당한 기간 동안 진행되는 게임에 참여해 보면 서버 유형과 애플리케이션 유형이 다양한 경우도 자주 볼 수 있다. 이 모든 것이 의미하는 바는 모니터링해야 하는 모든 애플리케이션의 모든 특성을 쉽게 모니터링할 수 있는 단일 도구가 없을 수도 있다는 것이다. 바로 이 문제를 해결하기 위해 Network Monitor(netmon) 모바일 애플리케이션이 개발되었다. 이 애플리케이션은 복잡한 기능을 수행하기 보다는 모바일 장치에서 유연하고 편하게 사용할 수 있도록 설계되었다.
netmon 애플리케이션에는 관심 서버 목록이 있다. 각 항목은 KPI(Key Performance Indicator)를 표시한다. KPI는 MBA 학생이 비즈니스 상태의 주요 특성을 측정할 때 사용하는 주요 지표이다. 웹 애플리케이션 호스팅 분야의 주요 KPI는 다음과 같다.
- 최근 기간 동안의 트랜잭션 수:
- 주문
- 카탈로그 요청
- 이메일 메시지
- 페이지 보기
- 마지막 트랜잭션 이후의 기간:
- 주문
- EDI 문서
- 비즈니스 파트너 메시지
- 벤더의 FTP 파일
- 데이터베이스의 사용 가능 여부
- 확인된 마지막 백업 날짜
- 주문 당 평균 금액
- 남아 있는 디스크 공간
- 1시간, 1일, 1개월 이내에 전송된 대역폭
이러한 항목과 기타 여러 가지 운영 데이터는 특정 시스템 또는 애플리케이션의 상태를 보여 주는 데 사용된다. 필자는 휴가 기간 동안 필자의 일부 사이트에서 발생한 주문 수를 실제로 살펴보았다. 시간이 지나면서 숫자가 꾸준히 증가하지 않을 경우에는 더 많은 주의를 기울였다.
각 애플리케이션의 요구와 필수 리소스가 다양하기 때문에 netmon 애플리케이션은 각 애플리케이션의 특수성을 처리할 수 있도록 유연해야 한다. 이 유연성이라는 요구 사항을 해결하기 위해 이 기사에서는 가장 기본적인 데이터 구조를 사용하여 특정 시스템의 상태를 나타내는 작업부터 시작한다. Part 2에서는 이 데이터의 위치와 업데이트 방법을 살펴본다. 지금은 다음과 같은 정보를 살펴본다.
- 사이트 이름
- 사이트 URL(홈 페이지)
- 업데이트를 가져올 URL
- 상태: 정상 또는 비정상
- 요약: 상태에 대한 간략한 설명, OK 또는 우선 순위가 높은 문제점을 설명하는 텍스트 문자열
- 항목: 사이트의 최신 운영 통계 또는 KPI를 전달하는 데 사용되는 이름/값 쌍의 컬렉션
이 애플리케이션에서는 이러한 항목을 쉽게 탐색할 수 있도록 나열하며, 이를 위해 CSS, jQuery 및 WebKit 기능을 사용하여 항목을 구별하기 쉽게 설정한다. 앞에서 언급한 대로 이 애플리케이션의 목적은 iPhone, Android 및 데스크탑 버전의 Safari에서 실행하는 것이다.
오늘날 웹 페이지는 구성과 컨텐츠만을 제공하는 선언적 방식으로 작성해야 한다. 모든 위치 및 형식 지정은 CSS(Cascading Style Sheet)를 통해 수행되며 JavaScript를 함께 사용하기도 한다. 실제로 JavaScript 라이브러리는 예외가 아닌 표준이 될 정도로 매우 많이 사용되고 있다. 이 기사의 샘플 애플리케이션에서는 유명한 jQuery JavaScript 프레임워크를 사용한다. 이 샘플 애플리케이션은 iPhone과 Android뿐만 아니라 데스크탑에서도 렌더링된다. HTML 컨텐츠는 완전히 동일하다. 선택된 스타일시트만 다를 뿐이다. 한 가지 주의할 점은 애플리케이션의 외적 요소를 꾸미는 데 너무 많은 관심을 두지 말라는 것이다. 실제로 애플리케이션의 스타일시트 구성을 강조하기 위해 과장된 배경 색상을 사용했다. Part 2에서는 애플리케이션의 시각적 요소를 어느 정도 보기 좋게 변경할 것이다. Listing 1에서는 애플리케이션에 대한 HTML을 보여 준다.
Listing 1. 애플리케이션에 대한 HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="netmon.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="netmon.js"></script>
<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('<link rel="stylesheet" href="iphone.css"
type="text/css" />');
} else if (navigator.userAgent.indexOf('Android') != -1) {
document.write('<link rel="stylesheet" href="android.css"
type="text/css" />');
} else {
document.write('<link rel="stylesheet" href="desktop.css"
type="text/css" />');
}
function setupTestData() {
try {
netmon.initialize();
if (netmon.resources.length > 0) {
jQuery.each(netmon.resources,function (index, value) {
$("#mainContent").append(netmon.render(index,value));
});
$(".serverentry").click (function() {$(this).find(".serveritems").toggle();});
$(".serveritems").hide();
}
} catch (e) {
alert(e);
}
}
</script>
<title>My Network Resources</title>
</head>
<body onload="setupTestData();">
<div id="mainContainer">
<div id="header">
<h1>My Servers</h1>
</div>
<div id="mainContent">
</div>
<a href="q.php">My User Agent</a>
</div>
</body>
</html>
|
이 HTML에서 주의해서 볼 항목은 다음과 같다.
- 이 HTML에서는 두 개의 외부 JavaScript 파일이 로드된다. 하나는 jQuery 라이브러리를 위한 파일이고 다른 하나는 애플리케이션의 헬퍼 함수를 위한 파일이다.
- viewport 메타태그를 사용하여 컨텐츠의 렌더링 배율을 조정한다.
- netmon.css라는 기본 스타일시트가 로드된다.
userAgent를 조사하여 iPhone, Android 및 데스크탑용 스타일시트 중 로드할 추가 스타일시트를 결정한다.- 페이지가 로드될 때 netmon.js 파일의 jQuery 및 헬퍼 함수를 통해 데이터가 표시된다.
- 페이지 밸런스에 두 개의
div태그가 있다. - 마지막으로
userAgent문자열을 보여 주는 페이지에 대한 링크가 있다. 이 링크는 편의를 위해 데모 목적으로만 사용되는 것이며 애플리케이션 자체와는 아무 관련이 없다.
모든 작업이 수행되는 스타일시트와 netmon.js 파일을 설명하기 전에 먼저 현재 양식의 애플리케이션을 살펴보자. 이 애플리케이션에서는 지원되는 세 가지 플랫폼을 대상으로 지정하기 위해 세 개의 다른 스타일시트를 사용하고 있다. 개발 프로세스를 빠르게 진행할 수 있도록 각 스타일시트에는 각기 다른 배경 색상이 설정되었다. 그림 9에서는 파란색 배경을 사용하는 데스크탑 Safari 브라우저를 보여 준다.
그림 9. 데스크탑의 Safari 브라우저에 표시된 애플리케이션
그림 10에서는 빨간색 배경의 Android 브라우저에 렌더링된 애플리케이션을 보여 준다.
그림 10. Android 브라우저에 표시된 애플리케이션
그림 11에서는 녹색 배경의 iPhone 브라우저에 렌더링된 애플리케이션을 보여 준다.
그림 11. iPhone 브라우저에 표시된 애플리케이션
기본 스타일시트는 netmon.js 파일에 있다(Listing 2 참조).
Listing 2. 기본 스타일시트
body {
color: #888888;
font-family: Helvetica;
font-size:14px;
margin: 0px;
padding: 0;
}
.details {
margin: 0px;
padding: 0px;
background-color: white;
border: solid;
border-width: 1px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
.OK {
color: #000000;
}
.BAD {
color: #ff0000;
}
.odd {
background-image: -webkit-gradient(linear, left top, right bottom,from(#ccc)
,to(#999));
}
.even {
background-image: -webkit-gradient(linear, left top, right bottom,from(#999)
,to(#ccc));
}
.serverentry a {
float: right;
color: #ffffff;
}
.serveritems{
color: #000;
}
#header h1 {
margin: 0;
padding: 0;
text-align: center;
color: #000;
}
|
플랫폼 관련 스타일시트의 세 가지 주요 목적은 다음과 같다.
- 스타일시트의 영향을 전체적으로 보여 줄 수 있는 형태로 색상 스키마를
변경하고
userAgent에 따라 특정 스타일시트의 대상을 특정 플랫폼으로 쉽게 지정할 수 있다는 것을 보여 준다. - 데스크탑 및 모바일 플랫폼 간의 글꼴 크기를 조정한다.
- WebKit 관련 기능을 실행한다. 이는 Firefox와 같이 WebKit을 지원하지 않는 데스크탑 브라우저를 대상으로 지정한 경우에 중요하다.
Listing 3에서는 스타일시트의 예로 iphone.css 파일을 보여 준다.
Listing 3. iphone.css 파일
body {
background-color: #00ff00;
}
.serverentry {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
.name {
font-size: 2em;
}
.summary{
font-size: 1.5em;
}
.serverentry a {
font-size: 1.5em;
}
|
이 파일을 보면 body 태그의 배경 색상이 녹색(#00ff00)으로 설정되어 있고 모바일 장치에서 항목을 쉽게 읽을 수 있도록 일부 글꼴 크기가 조정되었다는 것을 알 수 있다.
마지막으로 netmon.js에는 항목과 항목을 렌더링하기 위해 설계된 함수가 포함된 목록이 있다(Listing 4 참조). 간략하게 보여 주기 위해 이 listing에서는 일부 데이터가 생략되었다. 전체 사본을 보려면 다운로드를 참조하기 바란다.
Listing 4. netmon.js
var netmon = {
initialize : function () {
},
resources :
[
{
name : 'msiservices.com',
homeurl : 'http://msiservices.com',
pingurl : 'http://msiservices.com/netmon.php',
status : 'OK',
summary : 'OK',
items :
[
{name : 'DiskSpace', value : '22.13 GB'},
{name : 'Database Up?', value : 'Yes'}
]
},
{
name : 'server 2',
homeurl : 'http://someurl',
pingurl : 'http://someurl/netmon.jsp',
status : 'OK',
summary : 'OK',
items :
[
{name : 'DiskSpace', value : '100.8 GB'},
{name : 'Database Up?', value : 'Yes'}
]
},
// additional entries clipped for brevity
],
render : function(index,itm) {
try {
var ret = "";
ret += "<div class='serverentry " + itm.status + " " + (index % 2 == 0 ?
'even' : 'odd') + "'>";
ret += "<span class='name'>" + itm.name +
"</span> <a target='_blank' href='" + itm.homeurl +
"'>Show</a><br />";
if (itm.status != "OK") {
ret += "<span class='summary'>-" + itm.summary +
"</span><br />";
}
ret += "<div class='serveritems'>";
jQuery.each(itm.items,function (j,itemdetail) {
ret += ">>" + itemdetail.name + "=" + itemdetail.value +
"<br />";
});
ret += "</div>";
ret += "</div>";
return ret;
} catch (e) {
return "<div class='error'>Error rendering item [" + itm.name + "]
" + e + "</div>";
}
}
};
|
OK 상태가 아닌 서버 항목은 CSS 파일의 클래스 정의에 따라 빨간색으로 표시된다. 또한 OK 상태가 아닐 경우에는 한눈에 문제점을 파악할 수 있도록 summary 필드가 표시된다. 그림 9부터 그림 11을 보면 Server 4에 디스크 공간 부족 문제점이 있다는 것을 알 수 있다. 항목을 선택하면 그림 12와 같이 세부 사항이 표시된다.
그림 12. Server 4의 세부 사항
각 항목의 오른쪽에 있는 show 링크를 선택하면 각 서버의 홈 페이지가 실행된다. 이 기능이 편리한 이유는 두 가지이다. 첫 번째는 관심 있는 모든 서버의 URL을 외우지 않아도 되기 때문이며 두 번째는 키보드의 성능과 상관 없이 모바일 장치에서 긴 URL을 입력하는 큰 불편을 감수하지 않아도 되기 때문이다.
netmon이 모바일 장치에서 정상적으로 실행된다면 서버를 훨씬 쉽게 지원할 수 있다.
Part 2에서는 보다 많은 실시간 데이터를 요청할 수 있도록 애플리케이션을 수정하고 모바일 애플리케이션 빌드와 관련된 서버 측 고려 사항에 대해 설명한다.
마무리하기 전에 먼저 애플리케이션 스토어에서 이 애플리케이션을 다운로드할 수 있도록 만드는 데 필요한 사항을 간단히 살펴보자.
네트워크 모니터링 애플리케이션이 완료되었다고 가정하자. 그리고 이 애플리케이션을 친구에게 보여 주자 친구가 다른 사람들도 이 애플리케이션을 사용하여 네트워크의 리소스를 모니터링할 수 있도록 애플리케이션을 판매해 보라고 권유한다. 웹 애플리케이션을 판매할 수 있을까? 물론 일반적인 등록 또는 SaaS 모델을 통해 웹 애플리케이션을 판매할 수 있다. 하지만 "웹 애플리케이션"을 패키지로 만들어서 iTunes App Store나 Google Marketplace과 같은 애플리케이션 시장을 통해 판매하려면 어떻게 해야 할까? 이렇게 판매하려면 애플리케이션을 원시 애플리케이션으로 컴파일해야 한다. 다행스럽게도 이를 해결할 수 있는 방법이 있다.
각 주요 모바일 플랫폼에는 브라우저를 보기나 양식 또는 활동에 포함시킬 수 있는 방법이 있다. 플랫폼마다 이 기술을 조금씩 다른 용어로 표현하지만 이러한 기술 모두 비슷한 방식으로 작동한다. 즉, 브라우저 제어가 원시 애플리케이션 내에 있고 원시 애플리케이션은 브라우저 제어와 통신할 수 있다. 가장 단순한 모델의 경우 브라우저 제어는 웹을 통해 컨텐츠를 가져온다. 또는 원시 애플리케이션이 링크 요청을 인터셉트한 후 고유 컨텐츠를 제공할 수 있다. 이 경우에는 브라우저 보기가 렌더링을 위해서만 사용된다. HTML과 CSS는 애플리케이션 컨텐츠의 소스와 상관 없이 원시 위젯의 효과적인 대안이 될 수 있다. 그리고 일부 애플리케이션에서는 이러한 두 방법을 함께 사용한다. 예를 들어, 대부분의 컨텐츠를 웹에서 가져오면서도 애플리케이션의 "원시 측"에서는 블루투스를 통해 로컬 리소스에 대한 액세스를 제공할 수 있다.
이러한 종류의 애플리케이션 아키텍처를 위한 몇 가지 도구가 시장에 나와 있으며 이 영역의 대표적인 제품으로는 PhoneGap과 Appcelerator가 있다(참고자료 참조).
이 기사에서는 WebKit을 활용하는 iPhone 및 Android 웹 애플리케이션을 소개했다. Part 2에서는 이 예제 애플리케이션을 확장하여 웹 변경 기술인 Ajax를 통해 라이브 페이지 업데이트를 통합한다.
| 설명 | 이름 | 크기 | 다운로드 방식 |
|---|---|---|---|
| Network app source code | os-androidiphone1-browserwars1sourcecode.zip | 23KB | HTTP |
교육
-
WebKit 웹 사이트를 살펴보자.
-
iPhone에 관한 Viewport
관련 토론을 살펴보자.
-
HTML5 스펙에 대해 자세히 알아보자.
-
미디어 쿼리를 사용하면
컨텐츠 자체를 변경하지 않고도 특정 범위의 출력 장치에 적합한 프리젠테이션이 가능하다.
-
O'Reilly Media의 Mobile Design and Development를 읽어보자.
-
"Develop
Android applications with Eclipse"에서는 Android 애플리케이션을 가장 쉽게 개발할 수 있는 방법을 배울 수 있다.
-
Android SDK 문서를 다운로드하자.
-
The Open Handset Alliance는 Android의 후원자이다.
-
Unlocking Android는 Android 학습에 많은 도움이 되는 유용한 리소스이다.
-
developerWorks 팟캐스트에서 소프트웨어 개발자의 흥미로운 인터뷰와 토론을 확인할 수 있다.
-
developerWorks 기술 행사 및 웹 캐스트를 통해 최신 정보를 얻을 수 있다.
-
Twitter의 developerWorks 페이지를 살펴보자.
-
IBM 오픈 소스 개발자에게 유익한 컨퍼런스, 기술 박람회, 웹 캐스트 및 기타 행사를 확인하고 참여하자.
-
developerWorks 오픈 소스 영역을 방문하면
가장 인기있는 기사와 튜토리얼 뿐만 아니라
오픈 소스 기술을 활용하여 개발을 수행하고 IBM 제품에 이 기술을 활용하는 데 유용한 풍부한 내용의 사용법 정보, 도구 및 프로젝트 업데이트를 확인할 수 있다.
-
My developerWorks 커뮤니티는 다양한 주제를 다루는 일반 커뮤니티의 대표적인 성공 사례이다.
-
무료로 제공되는 developerWorks On demand demos를 통해 IBM 및 오픈 소스 기술에 대해 배우고 제품 기능을 익히자.
제품 및 기술 얻기
-
Android SDK를 다운로드하고,
API 레퍼런스를 확인하고, Android 관련 최신 뉴스를 살펴보자.
-
Android는 오픈 소스이므로 Android Open Source Project에서 소스 코드를 다운로드할 수 있다.
-
PhoneGap은 JavaScript를 사용하여 빠르고 쉬운 모바일 애플리케이션을 빌드할 수 있는 오픈 소스 개발 도구이다.
-
웹 기술을 사용하여 원시 모바일 및 데스크탑 애플리케이션을 작성, 테스트 및 분배할
수 있는 Appcelerator에 대해 알아보자.
-
DVD로 제공되거나 다운로드할 수 있는 IBM 시험판
소프트웨어를 사용하여 후속 오픈 소스 개발 프로젝트를 구현해 보자.
- IBM 시험판 제품을
다운로드하거나 IBM SOA Sandbox의 온라인 시험판을 살펴보고
DB2®, Lotus®, Rational®, Tivoli® 및 WebSphere®의 애플리케이션 개발 도구 및
미들웨어 제품을 사용해 볼 수 있다.
토론
-
developerWorks 포럼 & 블로그를 통해 developerWorks 커뮤니티에 참여하자.
대학에서 야구 선수로 활동한 후 L.A. Lakers와의 다년 계약을 맺지 못한 Frank Ableson은 컴퓨터 소프트웨어 설계로 관심을 돌렸다. 복잡한 문제 해결을 좋아하는 그는 특히 통신 및 하드웨어 인터페이스 분야에 많은 관심을 가지고 있다. 부인인 Nikki와 자녀들과 함께 여가 시간을 보내는 단란한 가정의 가장이기도 하다. 그의 이메일 주소는 frank@cfgsolutions.com이다.
태그
태그를 더 많이 보거나 적게 보기 위해 슬라이더 막대를 사용하십시오.
인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다.
내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.
인기 기사 태그 |
내 기사 태그태그 목록으로 건너뛰기
인기 기사 태그 |
내 기사 태그