오브젝티브C 코딩을 하지 않고도 HTML, CSS, 자바스크립트 등 웹 코딩 기술만으로 간단한 아이폰 애플리케이션을 만들 수 있는 방법을 소개한 책인 『하이브리드 아이폰 애플리케이션 개발』이 지난 달 독자께 선을 보였습니다. 컴퓨터 관련서를 출간하면서 왕왕 접하는 문제인데 이 책에서도 업그레이드된 대시코드 버전(3.0)에서 하위 버전(2.X)과 달리 템플릿을 허용하지 않고, 컴포넌트 라이브러리의 구조도 바뀌어서 책을 구입하신 후 처음 공부하시는 분들께서는 책 내용대로 따라하다가 잘 되지 않는다며 어려움을 호소해오셨습니다. 원서에서도 관련한 부분이 세부적으로 설명되어 있지 않고 내용이 간략하게기술되어 있어 역자 양석호님이 설치와 관련된 내용을 작성해 보내주셨습니다.

이 책에 관해 누차 말씀드린 부분이지만, 오브젝티브C 코딩에 대해서는 별다른 사전지식이 필요하지 않지만, 적어도 엑스코드(Xcode)와 대시코드(Dashcode)는 어느 정도 잘 알고 있는 사람들을 대상으로 하는 책입니다. 허나 독자분들께서 이에 대해서도 어느 정도 좀더 쉬운 가이드가 필요했을 것 같습니다. 다시 한번 말씀드리지만, 이 책에서는 자바스크립트/HTML/CSS만으로 애플리케이션을 만드는 방법에 입문하시는 분들께는 어느 정도 도움이 될 것입니다. 다만 프레임워크를 독자적으로 개량해 도입하려 한다면 그 이상에는 오브젝티브C에 대한 경험도 필요할 것입니다. 모든 책이 초심자부터 고급자를 대상으로 하기란 쉽지 않은 일이니까요.

관련 자료는 저희 출판사 『하이브리드 아이폰 애플리케이션』 도서정보페이지 (링크는 여기) "다운로드"항목에서도 바로 내려받으실 수 있습니다.

책의 내용을 보완해 업로드한 항목은 다음과 같습니다.

1. ch01.zip : 책에 나온 대시코드 버전(2.X)을 기준으로, 동작하도록 다시 수정한 예제파일

2. myself.zip :  대시코드 최신 버전(3.0)을 기준으로 작성한 예제 파일

3. HybridStepbyStep.pdf : 『하이브리드 아이폰 애플리케이션』프로젝트 생성/빌드 가이드. 최신 대시코드 버전(3.0)을 기준으로 완전히 아무것도 없는 상황부터 간단한 하이브리드 아이폰 애플리케이션을 시뮬레이터에서 돌리는 것까지 단계별로 안내하는 문서

PDF 파일을 다운로드 받으시면 쉽게 공부하실 수 있겠지만, 혹시 웹에서 검색을 하시는 분들을 위해 블로그에 전문을 공개합니다.

모쪼록 『하이브리드 아이폰 애플리케이션 개발』을 사신 분들께서 공부를 하시다가 어려웠던 문제가 해결되기를 바랍니다. 더 궁금하신 내용이 있으시면 언제든 저희 에이콘출판사 편집팀(editor@acornpub.co.kr)으로 문의주시면 역자분께 내용을 전달해드리고 회신을 드리겠습니다.

<하이브리드 아이폰 애플리케이션 프로젝트 생성/빌드 가이드>

작성: 양석호

[실행환경]
스노우 레퍼드 OS,
대시코드 3.0,
엑스코드 3.2.1,
아이폰 SDK 3.1.2,
퀵커넥트패밀리 1.5.1.1

대시코드를 실행하면 다음과 같이 템플릿 선택 화면이 나온다.

Custom을 선택하고 Mobile Safari만 체크한다. Choose 버튼을 클릭한다. Untitled 프로
젝트가 생성된다. 그림처럼 이름을 HelloWorld로 변경하고, 아래 쪽의 버튼을 눌러 파
일 브라우징 모드로 변경한다.

Library 윈도우에서 Lozenge Button을 찾는다. Library 윈도우가 떠 있지 않았다면 Window > Show Library 메뉴로 Library 윈도우를 띄운다. Lozenge Button을 웹 페이지 위로 드래그해서 다음과 같이 놓는다. Text > Text 파트도 드래그해서 놓는다.
Inspector 윈도우를 열고 버튼을 선택한다. Inspector 윈도우에서 가장 오른쪽의 파
란 사각형을 클릭한다.onclick의 오른쪽 비어있는 영역을 더블클릭하고 changeText라고 입력한다. 위의 오른편 그림처럼 핸들러가 지정되며, 메인 윈도우에는 다음과 같이 자동으로 생성된 changeText 핸들러 코드가 나타난다. 생성된 changeText 함수 안에 다음과 같이 코드를 입력한다

document.getElementById('text').innerHTML= "Hello";

이것으로 대시코드 상에서의 예제 애플리케이션 개발은 완료됐다. 왼쪽 위 구석의
Run 버튼을 클릭하라. 다음과 같이 아이폰 시뮬레이터가 나타난다.

버튼을 클릭하면 위의 오른편 그림처럼 텍스트가 Hello로 변경된다. 이제 일단 프로젝트를 저장하고, 메인 윈도우 왼쪽에서 Run & Share를 선택한다. Deploy 화면이 나타나면 다음과 같이 설정하고 Deploy 버튼을 누른다.

Deploy된 결과는 <home>/Sites/HelloWorld에 저장된다. 아래 그림에서 왼쪽은 대시코드에서 개발 중인 프로젝트의 파일 구조이고, 오른쪽은 Deploy 후의 파일 구조다. Deploy 과정에서 대시코드 제공 컴포넌트 라이브러리의 자바스크립트를 통합하는 작업 등을 진행하므로 파일 구조가 많이 달라지는 것을 알 수 있다. 하지만 직접 코딩한 main.js는 그대로 복사되므로 사용자 코드가 달라진 것은 없다.
엑스코드를 실행하고 File > New Project를 선택하면 다음과 같은 대화창이 나타난다.QuickConnect iPhone Application 템플릿을 선택하고 Choose.. 버튼을 누른다. 프로젝트 이름으로 HelloWorld를 입력하고 저장한다. 새로 생성된 프로젝트의 구성은 다음과 같다.
오브젝티브C 부분은 프레임워크의 코드를 그대로 활용하므로 개발자가 할 일은 대시코드에서 개발한 HTML/CSS/자바스크립트 코드를 Resources 그룹에 넣고 경로를 맞춰주는 것 뿐이다. 우선 파일을 추가해보자. 같은 이름의 파일/폴더를 덮어 쓰는 것은 불가능하므로 우선 겹치는 이름의 파일/폴더를 지워야 한다.
엑스코드에서 폴더를 지우더라도 Reference만 지워지므로, Finder에서 저장된 프로젝트
폴더로 가서 직접 파일을 삭제한다. index.html, main.js, main.css, Images를 삭제한다. 삭제된 파일은 엑스코드에서 Reference만 남아 빨갛게 표시되므로 엑스코드에서 Reference도 지워준다. 반대로 엑스코드에서 먼저 삭제하면서 Move To Trash로 실제 파일도 삭제한 후, 폴더만 Finder에서 지워도 상관없다. 중복되는 파일을 모두 삭제했으면 다음과 같이 대시코드에서 Deploy한 파일을 드래그한다.

그림과 같이 Deploy된 파일들을 Resources 그룹으로 드래그한다. 드래그하면 다음과 같은 대화창이 나타난다.
Copy... 를 체크하고 Add 버튼을 클릭한다. 적절한 SDK 버전(아이폰 시뮬레이터 3.1.2)을 선택하고 Build and Run을 해보자. QuickConnect 로고가 나타나면서 실행은 되지만, 이후 하얀 화면만 나타날 것이다.

[##_1L|1292806229.jpg|width="159" height="295" alt="사용자 삽입 이미지"|_##]
Resources 그룹에는 다시 하위 그룹이 존재하는 다층 구조지만 최종 빌드된 아이폰 애플리케이션 내에는 디렉토리 계층 구조로 들어 가는 것이 아니라 모든 파일이
곧바로 애플리케이션 최상위 디렉토리로 들어간다(flat
structure). 그러므로 HTML/CSS/자바스크립트 등에서 상대하위경로로 참조하고 있는 부분을 모두 같은 경로를 참조하도록 수정해야한다. 우선 index.html에서 다음 그림에 표시한 부분을 삭제한다.다음은 main.css다음은 mobile/Parts/parts.js
경로 수정이 끝나면 자바스크립트 파일도 패키지에 복사하도록 Copy Bundle Resources 목록에 추가한다. html, css, 이미지 등은 자동으로 추가된다(자바스크립트는 소스코드로 취급되므로 컴파일 대상으로 추가된다. 물론 자바스크립트를 컴파일해봤자 결과물은 나오지 않으므로 리소스로 취급하도록 추가하는 것이다).이제 다시 한번 Build and Run을 실행한다.대시코드에서 작성한 그대로 동작한다!!! 매우 간단한 웹 애플리케이션 예제를 Xcode 패키징을 통해 아이폰에서 스탠드얼론으로 실행해봤다. 물론 대시코드에서 만들지 않고 직접 작성한 자바스크립트도 동일한 방식으로 패키징할 수 있다. 자바스크립트 코드를 직접 작성할 경우에는 처음부터 flat structure로 개발한다면 좀 더 패키징이 간편해질 것이다.
폰갭의 경우는 디렉토리 구조를 그대로 복사하기 위해 약간의 편법을 사용하므로 좀 더 편리한 점도 있다. 하지만 표준적인 엑스코드 프로젝트의 구성방식을 따르는 것은 아니기 때문에 다소 문제가 발생하는 경우도 있다. 아이폰 애플리케이션 개발에 뛰어드는 데 이 문서가 도움이 되길 바란다.