반응형

이클립스를 사용해 아이폰 웹 애플리케이션 개발하기 (한글)

 

Aptana의 아이폰 개발 플러그인과 iUi 프레임워크를 사용해 아이폰 웹 애플리케이션 만들기

 

2008 년 3 월 04 일

이클립스, Aptana의 플러그인 그리고 iUi 프레임워크를 사용해 아이폰 웹 사이트를 만드는 방법을 배웁니다. 아이폰에서 사용할 수 있는 Javadoc 뷰어 개발 과정을 통해 사용자 인터페이스 디자인를 위한 팁을 살펴보고 아이폰 개발의 미래에 들어보겠습니다.

애플(Apple)의 아이폰(iPhone) 플랫폼은 개발자들에게 흥미로운 기회를 제공하고 있다. 소형 데스크톱과 터치스크린으로 아이폰과 아이팟 터치(iPod Touch)는 짧은 기간에 100만 명이 넘는 사용자들을 가지게 되었다. 하지만 이런 고품격 디자인과 사유화된(proprietary) 플랫폼은 애플리케이션 개발자들에게 새로운 종류의 도전을 만들어 내고 있다. 애플이 소프트웨어 개발 키트(SDK)를 배포할 때까지는, 아이폰 플랫폼을 목표로 하는 개발자들은 아이폰의 룩앤필(look and feel)을 따르는 웹 애플리케이션을 만들어야만 한다.

운이 좋게도 그 일을 쉽게 할 수 있는 새로운 오픈 소스 도구들을 사용할 수 있다. Aptana의 이클립스용 아이폰 개발 플러그인은 아이폰에 특화된 프로젝트를 생성하고 회전시켜 볼 수 있는 미리 보기 화면을 제공한다. Joe Hewitt의 iUi는 CSS와 자바스크립트 프레임워크인데 아이폰 스타일의 위젯과 페이지를 가지고 있다.

본 기사에서는, Apatana와 iUi를 사용해 새로운 애플리케이션을 만들 것이다. 바로 아이폰에서 사용할 수 있는 간단한 자바독(Javadoc) 뷰어다. 먼저 아이폰에서 자바독을 브라우징할 수 있는 사용자 인터페이스(UI)를 만들겠다. 그런 다음 소스 코드에서 자바독 페이지를 만들어 내는 커스텀 doclet을 만든다. 그 뒤를 이어 아이폰을 목표로 했을 때 생기는 UI 문제를 살펴보고 이 오픈 소스 도구들을 사용해 개발과 디버깅을 간단하게 할 수 있는지, 그리고 앞으로의 아이폰 개발 방향에 대해 설명하겠다.

도구 빠르게 살펴보기

Aptana를 설치하고 iUi를 다운로드하는 것부터 시작한다.

  1. 이클립스 V3.2에서 다음을 선택한다. Help > Software Updates > Find and Install.
  2. Search for new features to install을 선택한다. 이 창에서는 여러분이 다운로드한 플러그인과 이클립스가 미리 정의해둔 플러그인 사이트의 목록을 보여준다.
  3. New Remote Site를 클릭해 Aptana를 추가하고 URL을 다음과 같이 설정한다. http://update.aptana.com/update/3.2/.
  4. 목록에서 새로 추가한 Aptana를 선택하고 Next를 클릭해 이용할 수 있는 모든 기능을 선택한다. 창을 닫고 기본 Aptana 편집기로 돌아온다.
  5. 이클립스를 재시작한다.
  6. Window > Open Perspective > Other를 선택하고 Aptana를 창에서 클릭한다. 툴바에 새로운 아이콘이 나타날 것이다.
  7. Home 아이콘을 클릭한다. Aptana 기능에 대한 소개 페이지가 보일 것이다.
  8. Apple iPhone Development에서 Download and Install을 선택한다.
  9. 기능들을 설치하고, 창을 닫고 아이폰에 특화된 기능들을 Aptana에 설정한다.
  10. 이클립스를 다시 시작한다.
  11. 최신 버전의 iUi를 다운로드한다(참고자료 참조).

모든 준비가 끝났다면, 이클립스를 사용해 그림 1에 보이는 것처럼 iDoc이라는 새로운 아이폰 프로젝트를 생성한다.


그림 1. 새로운 아이폰 프로젝트 만들기
새 아이폰 프로젝트 만들기

그림 2는 간단한 아이폰 애플리케이션을 담고 있는 프로젝트를 보여준다.


그림 2. 이클립스에 생성된 아이폰 프로젝트
이클립스에 생성된 아이폰 프로젝트

HTML, CSS, 그리고 자바스크립트를 지원하는 Aptana의 기본 편집기가 제공하는 문법 하이라이팅을 확인할 수 있다.

아이폰 미리보기 모드와 애플리케이션 서버

텍스트 편집기 아래 부분에 Source, iPhone Preview, 그리고 시스템에 설치된 각종 브라우저(예를 들어 Safari Preview, Firefox Preview) 탭들을 볼 수 있다. iPhone Preview를 클릭하여 아이폰에서 보이는 샘플 애플리케이션을 보자. 폰을 돌리려면 브라우저의 바깥을 클릭하고, 네비게이션 막대를 숨기려면 폰 제목을 클릭하라. 가로로 보는 아이폰 미리보기 모드는 아래와 같다.


그림 3. 아이폰 미리보기 모드에서 가로 보기
아이폰 미리보기 모드에서 가로 보기

아이폰 미리보기 모드는 시간을 매우 많이 절약할 수 있게 하는 장치다. 새로운 디자인 아이디어를 빠르게 테스트할 수 있고 컴퓨터에서 벗어나지 않고도 점진적으로 개발할 수 있다. 애플리케이션을 실제 아이폰에서 테스트해야 할 때가 오면, Aptana에 내장된 애플리케이션 서버가 매우 유용할 것이다. 이클립스 툴바에 있는 Run 아이콘을 클릭하여 서버를 실행한다. 그림 4는 이클립스에서 동작하는 애플리케이션 서버를 보여준다.


그림 4. Aptana의 아이폰 애플리케이션 서버가 페이지를 호스트하고 그 URL을 가지고 있는 email을 생성한다.
Aptana의 아이폰 애플리케이션 서버가 페이지를 호스트하고 그 URL을 가지고 있는 email을 생성한다.

만약 아이폰이 와이파이(WiFi) 연결을 통해 로컬 네트워크에 연결되어 있다면, 서버 창에 보이는 URL에 접속할 수 있다. E-mail this url을 클릭하여 한 단계를 생략하고 여러분 아이폰에 있는 이메일 계정으로 메시지를 보낼 수 있다. 이메일에 있는 링크를 탭(화면을 툭 치는 것)하면, 아이폰의 웹 브라우저에서 애플리케이션을 실행한다.

iUi 데모: 극장 목록 웹 애플리케이션

Aptana의 기본 애플리케이션이 아이폰에 특화된 HTML과 CSS를 포함하고 있더라도 그 기능은 매우 제한적이다. 좀 더 나은 대안책은 iUi 프레임워크다. iUi는 다양한 아이폰 인터페이스 스타일의 커스텀 위젯과 자바스크립트 효과를 가지고 있다.

다운로드한 iUi 파일 iui-0.13.tar의 압축을 풀고, 파일을 이클립스에 있는 iDoc 프로젝트로 복사한다. 그림 5는 iUi를 가지고 있는 프로젝트를 보여준다.


그림 5. iUi 프레임워크와 예제 프로젝트가 들어 있는 iDoc 프로젝트
iUi 프레임워크와 예제 프로젝트가 들어 있는 iDoc 프로젝트

iUi를 사용한 데모 웹 애플리케이션은 위에서 펼쳐진 샘플 폴더에서 찾을 수 있다. 음악 브라우저, 극장 목록 그리고 Digg와 비슷한 사이트를 포함하고 있다. Aptana의 아이폰 미리보기 모드를 사용해 이클립스에서 그것들을 확인할 수 있다. 그림 6은 극장 목록 웹 애플리케이션(samples/theaters/index.html)의 검색 페이지를 보여준다.


그림 6. iUi의 예제 극장 목록 웹 애플리케이션
iUi의 예제 극장 목록 웹 애플리케이션

진짜 아이폰의 룩앤필과 얼마나 비슷한지 보기 바란다. 이렇게 미리 만들어둔 위젯은 아이폰 웹 애플리케이션을 빠르게 개발할 수 있도록 해준다.




위로


UI 디자인하기

이번 예제에서는 iDoc이라는 자바독 뷰어를 만들 것이다. 썬(Sun Microsystems)의 표준 자바독 생성기에 의해 만들어진 방대한 양의 HTML 문서들을 데스크톱에서는 잘 볼 수 있다. 하지만 아이폰에서 읽고 네비게이션하기에는 불편하다. iDoc은 아이폰에 적합한 자바독을 생성한다. ? 지하철이나 짝 프로그래밍 팀에서 관찰자가 도움을 줄 수 있도록 하기에 완벽한 브라우징 애플리케이션 프로그램 인터페이스(API)를 제공할 것이다.

아이폰 휴먼 인터페이스 가이드라인

iDoc에 필요한 UI를 디자인하기 전에 아이폰 개발과 일반적인 웹 애플리케이션의 다른 점을 이해하는 것이 중요하다. 애플의 iPhone Dev Center(참고자료 참조)에서 인용한 그림 7을 보면 이를 매우 멋지게 요약했다. 손가락은 마우스가 아니다. 데스크톱에서 볼 수 있는 픽셀 선택을 없애고 그 대신 탭(툭 치는 것), 플릭(화면을 가볍고 빠르게 휙 스치는 모션) 그리고 핀치(두 손가락으로 화면을 꼬집는 듯한 모션)와 같은 풍부한 사용자 상호작용 모델을 사용했다. 게다가 아이폰은 사용자가 들고 다니면서 시급한 상황에서 자주 쓰기 때문에 애플리케이션에서 원하는 정보를 빠르고 쉽게 제공할 필요가 있다.


그림 7. 손가락은 마우스가 아니다.
손가락은 마우스가 아니다.

애플의 iPhone Human Interface Guidelines(참고자료 참조)는 아이폰 웹 컨텐츠의 세 가지 타입을 정의하고 있다.

아이폰에 있는 사파리(Safari)와 호환
비록 페이지의 일부분이 어도비 플래시(Adobe Flash)나 Java™ 애플릿처럼 지원되지 않는 플러그인에 의존하더라도 정확하게 보여줄 수 있는 모든 타입의 웹 페이지
아이폰에 있는 사파리에 최적화
아이폰에 맞게 내용의 크기를 조정했으며, 지원되지 않는 플러그인에 의존하지 않는 웹 페이지
아이폰 애플리케이션
웹 페이지가 아이폰의 룩앤필을 따르는 애플리케이션처럼 보이고, 가능하다면 전화, 이메일, 구글맵과 같은 아이폰의 서비스와 연동된다.

표준 자바독 페이지는 첫 번째 범주에 해당된다. 아이폰에 있는 사파리와 호환되는 형태다. 정확하게 보이긴 하지만 관련된 정보를 찾으려면 핀칭과 플릭을 매우 잘 해야 한다. iDoc은 완전한 아이폰 애플리케이션을 목표로 하고 있다. 비록 다른 서비스와 연동할 일은 없지만 iDoc의 인터페이스는 마치 아이폰 애플리케이션처럼 느껴질 것이다.

iDoc UI

아이폰을 목표로 할 때는 포커스를 유지하는 것이 중요하다. 애플리케이션은 특정 작업을 빠르게 수행해야 한다. 모든 가용한 기능을 포함시키려고 하면 안 된다. iDoc에서 사용자들은 클래스 이름, 메서드 이름, 메서드 시그너처 그리고 주석 등과 같은 자바 클래스에 대한 기본 정보를 찾아내야 한다. 이런 정보를 목적지인 구체적인 페이지로 안내하는 세 개로 나눈 네비게이션을 통해 제공할 것이다.

패키지 네비게이션
최상위 패키지
클래스 네비게이션
패키지 안에 있는 클래스, 인터페이스, 예외와 에러
자세한 클래스 네비게이션
클래스 안에 있는 설명, 필드, 상수, 그리고 메서드
세부 페이지
주석, 시그너처 그리고 매개변수

iDoc을 산만하지 않고 태스크에 집중된 상태로 유지하기 위해 기존의 자바독 기능을 몇 가지 제거했다. 예를 들어 패지키 설명 주석은 보여주지 않는다. 이것들은 대개 정보가 유익하지 않거나(예를 들어 acme.client에는 클라이언트 코드가 들어 있다.) 보통 존재하지 않으므로 그것들을 iDoc에서 빼고 인터페이스를 간단하게 만드는 것이 더 나은 선택이다.

세 부분으로 나눈 네비게이션을 위해 edge-to-edge 리스트를 사용한다. 이것은 전형적인 아이폰 애플리케이션에 익숙한 구조로 연락처, 이메일 그리고 음악을 브라우징할 때 사용된다. Edge-to-edge 리스트는 아이템을 44픽셀 높이의 같은 크기로 보여준다. 그리고 많은 양의 정보를 스크롤할 때 유용하다. 애플의 iPhone Human Interface Guidelines는 글꼴, 글자 크기 그리고 경계선 공간 수치를 제공한다. iUi 프레임워크는 CSS와 자바스크립트 언어로 이러한 수치에 맞게 구현해두었다. 따라서 아이폰 컴포넌트처럼 보이는 HTML 목록을 간단하게 만들 수 있다.

Listing 1은 페이지 헤더와 java.applet!과 java.rmi 패키지의 첫 번째 2단계 네비게이션을 보여준다.


Listing 1. 페이지 헤더와 첫 번째 2단계 네비게이션 HTML 문서
                
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iDoc</title>
<meta name="viewport" content="width=320; initial-scale=1.0;
   maximum-scale=1.0;
   user-scalable=0;"/>
<style type="text/css" media="screen">@import!
   "iui/iui.css";</style>
<style type="text/css" media="screen">@import!
   "iDoc.css";</style>
<script type="application/x-javascript"
   src="iui/iui.js"></script>
</head>
<body onclick="console.log('Hello', event.target);">
   <div class="toolbar">
     <h1 id="pageTitle"></h1>
     <a id="backButton" class="button"
        href="#"></a>
   </div>
  <ul id="home" title="Packages" selected="true">
      <li><a href="#java.applet!">java.applet!</a></li>
      <!-- more packages...-->
      <li><a href="#java.rmi">java.rmi</a></li>
  </ul>
  <ul id="java.applet!" title="java.applet!">
      <li class="group">Interfaces</li>
      <li><a href="java.applet!.Applet!Context.html">
         Applet!Context</a></li>
      <li><a href="java.applet!.Applet!Stub.html">
         Applet!Stub</a></li>
      <li><a href="java.applet!.AudioClip.html">
         AudioClip</a></li>
      <li class="group">Classes</li>
      <li><a href="java.applet!.Applet!.html">Applet!
         </a></li>
      <li><a href="java.applet!.Applet!.AccessibleApplet!.html">
         AccessibleApplet!</a></li>
  </ul>
  <ul id="java.rmi" title="java.rmi">
      <li class="group">Interfaces</li>
      <li><a href="java.rmi.Remote.html">
         Remote</a></li>
      <li class="group">Classes</li>
      <li><a href="java.rmi.MarshalledObject.html">
         MarshalledObject</a></li>
      <li><a href="java.rmi.Naming.html">
         Naming</a></li>
      <li><a href="java.rmi.RMISecurityManager.html">
         RMISecurityManager</a></li>
      <li class="group">Exceptions</li>
      <li><a href="java.rmi.AccessException.html">
         AccessException</a></li>
      <li><a href="java.rmi.AlreadyBoundException.html">
         AlreadyBoundException</a></li>
      <li><a href="java.rmi.ConnectException.html">
         ConnectException</a></li>
      <li><a href="java.rmi.ConnectIOException.html">
         ConnectIOException</a></li>
      <li><a href="java.rmi.MarshalException.html">
         MarshalException</a></li>
      <li><a href="java.rmi.NoSuchObjectException.html">
         NoSuchObjectException</a></li>
      <li><a href="java.rmi.NotBoundException.html">
         NotBoundException</a></li>
      <li><a href="java.rmi.RemoteException.html">
         RemoteException</a></li>
      <li><a href="java.rmi.RMISecurityException.html">
         RMISecurityException</a></li>
      <li><a href="java.rmi.ServerError.html">
         ServerError</a></li>
      <li><a href="java.rmi.ServerException.html">
         ServerException</a></li>
      <li><a href="java.rmi.ServerRuntimeException.html">
         ServerRuntimeException</a></li>
      <li><a href="java.rmi.StubNotFoundException.html">
         StubNotFoundException</a></li>
      <li><a href="java.rmi.UnexpectedException.html">
         UnexpectedException</a></li>
      <li><a href="java.rmi.UnknownHostException.html">
         UnknownHostException</a></li>
      <li><a href="java.rmi.UnmarshalException.html">
         UnmarshalException</a></li>
  </ul>
				

그림 8은 edge-to-edge 리스트를 사용하여 패키지를 선택할 수 있는 최상위 레벨 네비게이션을 보여준다.


그림 8. 진짜 아이폰 애플리케이션처럼 자바독 패지키 네비게이션하기
진짜 아이폰 애플리케이션처럼 자바독 패지키 네비게이션하기

그림 9는 아이폰 미리보기 모드로 java.rmi 패지키의 결과를 보여준다.


그림 9. Java.rmi 패키지에 있는 인터페이스, 클래스, 예외 네비게이션하기
Java.rmi 패키지에 있는 인터페이스, 클래스, 예외 네비게이션하기

iDoc의 세부 페이지에서는 아이폰의 또 다른 구조를 사용한다. 바로 둥근 사각형 리스트다. 이 리스트는 정보를 그룹핑할 때 유용한데 아이폰의 설정 창에서 볼 수 있다. 둥근 사각형 리스트를 사용해 메서드 시그너처와 매개변수 목록 그리고 예외를 구분할 것이다. V0.13에서 iUi는 둥근 사각형 리스트를 오직 폼 입력 용도로만 사용하도록 지원하고 있다. 따라서 정적인 텍스트를 출력할 때 이들 엘리먼트를 그냥 사용하면 틀에 맞지 않은 블록을 만들어 낸다. 그것들의 CSS를 확장하여 (Listing 2에 보이는) iDoc.css 파일을 만들고 정적인 텍스트를 둥근 사각형 리스트로 보여줄 textRow 엘리먼트를 추가한다.


Listing 2. 정적인 텍스트를 정확하게 보여주기 위한 커스텀 textRow CSS 확장
                
/* Adding a new row CSS style to iUi for displaying blocks of text */
.textRow  {
    position: relative;
    border-bottom: 1px solid #999999;
    -webkit-border-radius: 0;
    text-align: right;
}
.textRow > p {
    text-align: left;
    margin: 5px 8px 5px 10px;
    padding: 0px 0px 0px 0px;
}
fieldset > .textRow:last-child {
    border-bottom: none !important;
}
				

Listing 3은 java.math.BigDecimal의 생성자 중 하나를 보여준다.


Listing 3. textRow 엘리먼트를 사용한 세부 페이지 HTML
                
<div id="java.math.BigDecimal(long,java.math.MathContext)" title="BigDecimal"
        class="panel">
    <fieldset>
        <div class="textRow"><p><b>
           public BigDecimal(long, MathContext)</b></p></div>
        <div class="textRow"><p>Translates a
           <code>long</code> into a
        <code>BigDecimal</code>, with rounding according to the context settings.
        The scale of the <code>BigDecimal</code>, before any rounding, is zero.
      </p></div>
    </fieldset>
    <h2>Parameters</h2>
    <fieldset>
        <div class="textRow"><p><b>long val
           </b>: <code>long</code> value to be converted
         to <code>BigDecimal</code>.</p></div>
        <div class="textRow"><p><b>MathContext mc
           </b>: the context to use.</p></div>
    </fieldset>
    <h2>Throws</h2>
    <fieldset>
        <div class="textRow"><p><b>ArithmeticException
           </b>: if the result is inexact but
    the rounding mode is <code>UNNECESSARY</code>.</p></div>
    </fieldset>
</div>
				

<fieldset> 태그에 있는 모든 것들이 textRow <div>를 사용해 둥근 사각형 안으로 들어갔다. <h2> 헤드 태그는 목록 위에서 그룹 제목을 보여준다. 그림 10은 결과 페이지를 보여준다.


그림 10. java.math.BigDecimal의 생성자 자세히 보기 화면
java.math.BigDecimal의 생성자 자세히 보기 화면

3단계 네비게이션과 세부 페이지 UI를 모두 끝냈다. iDoc은 사용자들이 특정 작업에 집중할 수 있게 해준다. iUi 프레임워크의 도움과 약간의 커스텀 CSS를 사용해 마치 진짜 아이폰 애플리케이션처럼 보이게 만들었다.




위로


iDoc 개발하기

자, UI 디자인을 만들었고 이제 HTML 파일을 생성하는 코드를 만들어야 한다. 썬의 javadoc 명령어를 끼워 넣은 간단한 Doclet를 만들어보자. 이 예제는 자바 표준 java.* 패키지를 사용하지만 iDoc은 어떤 소스 코드로부터든지 자바독을 생성할 수 있다. OpenJDK(참고자료 참조)라, 공개적으로 사용 가능하며 GPL V2 라이선스를 사용하는 소스 코드를 사용해 자바독을 만들고 배포할 수 있다.

iDoc은 간단하게 패키지와 클래스를 순회하며 위에서 만든 형식대로 정적인 HTML 페이지를 출력하기 위한 메서드를 호출한다. Listing 4는 최종 세부 페이지를 출력하기 위한 메서드다.


Listing 4. 세부 페이지를 출력하기 위한 Doclet 코드
                
private void printDetail(PrintStream p, ProgramElementDoc doc,
    String id, String name) {
    divHeader(p, id, name, "panel");
    textHeader(p, null);
    textRow(p, getSignature(doc));
    textRow(p, getCommentText(doc.commentText()));
    textFooter(p);
    if (doc instanceof ExecutableMemberDoc) {
        printMethodDetail(p, (ExecutableMemberDoc) doc);
    }
    divFooter(p);
}
private void printMethodDetail(PrintStream p, ExecutableMemberDoc field) {
    if (field.parameters().length > 0) {
        textHeader(p, "Parameters");
        for (int i=0; i<field.paramTags().length; i++) {
            textRow(p, "<b>" + field.parameters()[i].typeName() + " "
                    + field.paramTags()[i].parameterName()
                    + "</b>: "
            + getCommentText(field.paramTags()[i].parameterComment()));
        }
        textFooter(p);
    }
    if (field.throwsTags().length > 0) {
        textHeader(p, "Throws");
        for (int i=0; i<field.throwsTags().length; i++) {
            textRow(p, "<b>" +  field.throwsTags()[i].exceptionName()
                    + "</b>: "
            + getCommentText(field.throwsTags()[i].exceptionComment()));
        }
        textFooter(p);
    }
}
				

이 코드는 일반화된 메서드인데 printDetail()는 클래스 설명, 필드, 생성자 그리고 메서드를 출력한다. 나머지 두 개의 타입은 ExecutableMemberDoc의 서브 클래스로 그것들의 매개변수와 던지는 예외에 대한 정보를 추가로 출력한다.

성능 이슈

GZIP 압축

간단하지만 효율적인 성능 팁을 소개하겠다. 바로 웹 서버에서 GZIP 압축을 가능케 하는 것이다. 현재 쓰이는 웹 서버는 대부분 이 옵션을 제공하며, 이를 사용하는 클라이언트로 보내기 전에 페이지를 압축한다. 아이폰의 사파리도 그런 클라이언트 중 하나다. GZIP 압축을 자동으로 지원한다. 간단하게 GZIP 압축을 자신의 웹 서버에서 쓸 수 있게 하면, 아이폰 사용자들은 좀더 빠른 다운로드 시간을 경험하게 될 것이다.

Aptana의 아이폰 미리보기 모드는 결과 파일에 대한 디버깅에 도움을 준다. 각 주기마다 빠른 클릭을 통해 설계했던 인터페이스와의 불일치를 찾아낼 수 있다. 하지만 미리보기 모드를 사용하는 것은 성능 문제를 일으킬지도 모른다. 대부분의 컴퓨터들은 아이폰의 620MHz ARM 프로세서보다 세 배 내지 다섯 배 정도 빠르다. 또한 사용자들은 느린 휴대폰 네트워크를 통해 페이지를 다운로드할 것이다. 따라서 자신의 애플리케이션을 실제 아이폰에서 동작시켜 보는 것이 중요하다.

아이폰에서 iDoc을 시험해본 결과 매우 덩치 큰 HTML 파일을 출력할 때 흔들리는 듯한 화면과 성능 저하를 발견했다. 이것을 수정하기 위해 패키지와 클래스 이름을 네비게이션하는 메인 파일을 하나 만들고 별도의 파일로 각각의 클래스의 주석, 메서드에 대한 자세한 정보를 보여주는 페이지들을 만들었다(Listing 5). 비록 이런 과정을 통해 여러 개의 파일을 만들어 내게 되었지만, 각각의 파일 크기가 작기 때문에 애플리케이션이 매우 부드럽게 동작하게 되었다.


Listing 5. 각각의 패키지를 순회하는 Doclet 코드와 각각의 클래스마다 별도의 파일 만들기
                
out = new FileOutputStream(index);
p = new PrintStream(out);
printHeader(p);
PackageDoc[] packages = root.specifiedPackages();
Arrays.sort(packages);
printPackages(p, packages);
for (int i=0; i<packages.length; i++) {
    printPackageDetail(p, packages[i]);
}
for (int i=0; i<packages.length; i++) {
    ClassDoc[] classes = packages[i].allClasses();
    Arrays.sort(classes);
    for (int j=0; j<classes.length; j++) {
        // Creating a separate file for each class.
        PrintStream p2 = new PrintStream(new FileOutputStream(getFilename(classes[j])));
        printClassDetail(p2, classes[j]);
        p2.close();
    }
}
printFooter(p);
p.close();
				

iDoc 사용하기

성능 향상을 통해 iDoc은 이제 출시될 준비가 끝났다. OpenJDK에 있는 java.*와 javax.*에 있는 51개 패키지와 1304개 클래스에 대한 자바독을 만들, 모든 것을 웹 서버로 업로드한다. 16MB가 넘는 크기의 파일이지만 주요 네비게이션 페이지는 단지 112KB에 불과하며 각각의 클래스 자세히 보기 페이지는 평균적으로 13KB다. EDGE 네트워크를 사용하더라도 애플리케이션은 매우 잘 응답한다. 아이폰이 있다면 iDoc 사이트(참고자료 참조)에 접속해 보거나 iDoc을 다운로드하여 아이폰을 위한 자바독을 생성할 수 있다. 그림 11은 최종 애플리케이션을 보여준다.


그림 11. 아이폰을 위해 준비된 51개의 패키지 자바독
아이폰을 위해 준비된 51개의 패키지 자바독

iDoc의 잠재적인 확장기능으로는 자바 5 제네릭과 자바독 주석에 포함된 페이지 사이의 링크를 위한 태그를 더 잘 파악하는 것이다. iDoc의 기능 추가에 관심이 있다면 모든 소스 코드는 온라인에서 받을 수 있다(참고자료 참조).




위로


아이폰 개발의 미래

2007년 10월 Steve Jobs는 애플이 아이폰 SDK를 2008년 2월에 공개할 것을 발표했다. 글을 쓰고 있는 시점이 2007년 12월이기 때문에 아직 구체적인 것은 미지수이지만 SDK를 통해 사파리의 도움 없이 아이폰 바로 위에서 동작하는 애플리케이션을 작성할 수 있게 될 것이다. 아이폰 아키텍처 기반을 얻는 것은 Mac OS X과 비슷하게 개발 플랫폼이 코코아(Cocoa)와 오브젝티브-C가 된다는 것이다. 최근 소식에 의하면 애플의 한 중역은 서드파티 애플리케이션이 몇 가지 인증 절차를 거치도록 하는 것을 제안하기도 했다.

발전된 애니메이션, 그래픽 그리고 네트워크 접속을 사용하는 애플리케이션이 네이티브로 동작할 수 있는 이점을 얻을 것이다. 하지만 SDK가 배포되더라도 아이폰을 위한 웹 개발은 여전히 매력적인 위치에 있을 것이다. 웹 애플리케이션은 쉽게 만들고 간단하게 배포할 수 있다. Aptana와 iUi 같은 도구는 개발을 간편하게 해주며 웹 애플리케이션을 빨리 만들 수 있도록 해준다. iDoc을 통해 보았듯이 SDK를 기다릴 필요도 없다. 오늘 배운 도구를 사용해 아이폰 기능을 완전히 사용하며 진짜 같은 룩앤필을 가진 웹 애플리케이션을 만들 수 있다.



참고자료

교육
  • iPhone Dev Center에는 Apple Developer Center에 있는 아이폰 웹 개발과 관련된 유용한 참조 문서들이 있다.

  • iPhone Human Interface Guidelines 는 UI 개발 기준과 가이드라인 모음이다.

  • OpenJDK는 썬의 오픈 소스 자바 개발 키트다.

  • iDoc 시연 ?OpenJDK Javadoc?를 여러분의 아이폰에서 참조하라.

  • "Eclipse 추천 도서 리스트 (한글)"를 확인하라.

  • developerWorks의 모든 이클립스 기사를 확인하라.

  • 이클립스가 처음이라면 developerWorks의 기사 "Eclipse Platform 시작하기 (한글)"를 읽고 이클립스의 탄생과 아키텍처 그리고 플러그인을 사용하여 어떻게 이클립스를 확장할 수 있는지 공부하라.

  • IBM developerWorks의 Eclipse 프로젝트 리소스를 참조하고 여러분의 이클립스 기술을 확장하라.

  • 소프트웨어 개발에 관한 흥미로운 인터뷰와 논의 소식을 듣기 원한다면 developerWorks 포드캐스트를 확인하라.

  • developerWorks의 기술 행사와 웹 캐스트에서 최신 정보를 접하라.

  • developerWorks On demand demos에서 IBM과 오픈 소스 기술 그리고 제품에 대한 정보를 무료로 보고 익힐 수 있다.

  • IBM 오픈 소스 개발과 관련하여 앞으로 개최될 컨퍼런스, 트레이드 쇼, 웹 캐스트 그리고 다른 행사들을 확인하라.

  • 한국 developerWorks 오픈 소스 존을 방문하여 방대한 how-to 정보, 도구, 프로젝트 업데이트를 확인하여 오픈 소스 기술을 활용한 개발에 도움을 얻고 IBM의 제품들을 활용하라.


제품 및 기술 얻기

토론
  • 이클립스에 대한 질문이 있다면 Eclipse Platform newsgroups를 제일 먼저 방문하라(이것을 선택하면 여러분의 기본 유즈넷 뉴스 리더 애플리케이션이 동작하고 eclipse.platform을 연다).

  • Eclipse newsgroups는 이클립스 확장과 사용에 관해 많은 자료를 가지고 있다.

  • developerWorks 블로그에 참여하고 developerWorks 커뮤니티에서 활동하라.

    필자소개

Adam Houghton은 SAS Advanced Computing Lab에서 선임 소프트웨어 개발자로 있으며 자바와 관련된 모든 것을 전문으로 하고 있다.

 

출처 : ☆ 재영 ♡ 윤정 ☆
글쓴이 : ☆BaBooToTo☆ 원글보기
메모 :
반응형

+ Recent posts