출판사 서평
★ 이 책에서 다루는 내용 ★
■ HTML, 자바스크립트, CSS로 모바일 앱 제작
■ 아이오닉 UI 컨트롤을 이용한 복잡한 인터페이스 디자인
■ 한 번 빌드로 iOS와 안드로이드에 동시 배포
■ 네이티브? 기기와 장치에 특화된 기능 활용
■ 모바일 개발 프로세스 전반에 대한 이해
★ 이 책의 대상 독자 ★
이 책은 웹 애플리케이션을 개발하기 위한 기본 지식을 가지고 있는 웹 개발자를 대상으로 한다.
CSS, HTML, 자바스크립트에 대한 지식이 필요하고, 콘텐츠를 구성하기 위해 HTML을 작성할 줄 알아야 ...
★ 이 책에서 다루는 내용 ★
■ HTML, 자바스크립트, CSS로 모바일 앱 제작
■ 아이오닉 UI 컨트롤을 이용한 복잡한 인터페이스 디자인
■ 한 번 빌드로 iOS와 안드로이드에 동시 배포
■ 네이티브 기기와 장치에 특화된 기능 활용
■ 모바일 개발 프로세스 전반에 대한 이해
★ 이 책의 대상 독자 ★
이 책은 웹 애플리케이션을 개발하기 위한 기본 지식을 가지고 있는 웹 개발자를 대상으로 한다.
CSS, HTML, 자바스크립트에 대한 지식이 필요하고, 콘텐츠를 구성하기 위해 HTML을 작성할 줄 알아야 하며, 스타일을 변경하기 위해 CSS를 사용하는 법을 알아야 한다. 자바스크립트에 대해서는 비동기 처리, 객체, 기본형에 대한 개념 정도는 이해하고 있어야 한다.
코르도바나 AngularJS에 대한 지식은 필요하지 않다. 자바스크립트로 브라우저 내 웹 애플리케이션을 만드는 배경지식 정도를 알고 있으면 도움이 되겠지만, 이 책의 예제를 주의 깊게 공부하면서 배울 수 있다.
모바일 기기는 앱 개발과 테스트를 위해 필수로 가지고 있어야 한다. 아이오닉 개발을 하려면 iOS나 안드로이드 기기가 필요하다. 각각 하나씩 가지고 있으면 금상첨화다
★ 이 책의 구성 ★
1장에서는 아이오닉과 하이브리드 앱을 개발하기 위한 다른 기술들을 둘러보면서, 아이오닉의 장점을 설명한다.
2장에서는 이 책에서 사용할 개발 도구들의 설정 과정을 보여주고, 기본 시작 프로젝트로 간단한 모바일 앱을 만들어본다.
3장은 AngularJS에 익숙하지 않거나 이미 알고 있는 지식의 정리가 필요한 개발자를 위한 내용이다. 아이오닉은 AngularJS로 개발되었기 때문이다.
4장에서는 가상의 리조트 앱을 만들면서 기본적인 내비게이션과 카드, 무한 스크롤링, 우아하게 데이터를 로딩하기 위한 로딩 인디케이터, 슬라이드 박스 등의 여러 가지 비주얼 컴포넌트들을 살펴본다. 첫 번째 앱을 만드는 동안 아이오닉 앱을 만들기 위한 기본기를 배울 수 있다.
5장에서는 비트코인 환율 현황을 파악하기 위한 또 하나의 앱을 만들어본다. 비트코인 앱은 탭, 당겨서 새로고침하기, 몇몇 폼 컴포넌트, 스와이프 옵션을 가지는 고급 리스트, 시간에 따른 현황 차트를 사용한다. 이 장은 탭을 사용하는 앱의 구조와 더 많은 아이오닉 컴포넌트로 앱을 향상시키는 방법에 초점을 둔다.
6장에서는 날씨 앱을 만들어본다. 이를 통해 내비게이션을 위한 사이드 메뉴 사용, 정보를 나타내기 위한 모달, 옵션 버튼을 보여주는 액션시트, 커스텀 스크롤 만들기 등을 익힌다. 아이오닉 컴포넌트의 이해에 깊이를 더하고, 아이오닉 앱에 사용된 주요 디자인 앨리먼트를 알아본다.
7장에서는 하이브리드 앱 개발에 유용한 고급 기술들을 몇 가지 소개한다. 사용자 데이터를 유지하는 법, 아이오닉 컴포넌트 커스터마이징하기, 온라인-오프라인 모드에서의 거동, 아이오닉 기본 세팅 설정, 플랫폼에 특화된 기능 사용하기, 제스처 이벤트 다루기 등을 배운다.
8장에서는 코르도바로 아이오닉 앱이 센서 데이터 등의 플랫폼 기능을 다룰 수 있게 하는 방법을 알아본다. 이전 장에서 만들었던 두 예제 중에서 날씨 앱에는 지오로케이션을 다루는 기능을 추가하고 리조트 앱에는 카메라 지원 기능을 더한다. ngCordova를 익히면서 코르도바 플러그인을 쉽게 통합하는 방법도 알아본다.
9장에서는 아이오닉 앱 테스트 환경 구축을 도와준다. 이 장에서는 두 가지 주요 테스트 방식을 소개한다. 한 가지는 비즈니스 로직을 테스트하기 위한 단위 테스트고, 다른 한 가지는 앱 전반의 기능을 테스트하는 통합 테스트다. 또한 아이오닉 뷰와 아이오닉 랩을 알아볼 것이다.
10장은 앱을 스토어에 제출하는 프로세스를 소개하면서 제품 출시 준비를 위한 팁과 기술을 다룬다. 필요한 그래픽과 애셋을 추가하고 iOS와 안드로이드에 맞게 앱을 빌드하는 법 등을 알아본다.
★ 옮긴이의 말 ★
일단, 과거의 이야기부터 좀 해야겠다. 조금은 지루할 수도 있지만, 그래도 새로 모바일 앱을 개발하려고 고민하고 있는 웹 개발자들에게는 뭔가 힌트가 되어줄지도 모른다는 생각 때문이다.
아이오닉 프레임워크를 알게 된 시점은 2015년 10월경이었다. 그럭저럭 다니고 있던 직장을 그해 초에 그만두고, 뭔지는 아직 잘 모르겠지만 하고 싶은 걸 새로 시작해보자고 평균 나이 40세가 넘는 네 명이 모였다. 어쨌던 개발 경력이 있었던 나를 포함한 두 명이 자연스레 개발을 맡게 되었고, 그중에 나는 클라이언트를 담당하게 되었다.
모바일 시대에 모바일 앱이 없는 사용자 서비스를 논하기는 어려운 세상이 되었다. 따라서 클라이언트를 맡게 된 나는 네이티브 앱, 하이브리드 앱, 웹앱, 모바일 웹 등 가능한 모바일 앱 개발 방법론부터 검토하기 시작했고, 디바이스의 기능을 써야만 하는 서비스의 특성상 자연스럽게 웹앱과 모바일 웹은 배제하고 네이티브냐 하이브리드냐를 놓고 고민을 했다. 빠른 성능과 기기의 모든 기능을 활용할 수 있는 네이티브 개발과 (현실적으로는 기대만큼 극적이지는 않다는 논란이 있음에도 어쨌든 상대적으로는) ‘원소스 멀티유스’가 가능한 하이브리드 앱의 생산성 사이에서 어떤 선택이 좋을지 쉽게 답을 내리기 어려웠다. 사실 이 고민의 근원은 내가 앱 개발을 해본 적이 없다는 사실에 기인했다. 고민 끝에 적은 인원과 투입될 (학습을 포함한) 개발 시간을 생각하면, 나중에 각각 네이티브 앱으로 포팅을 하더라도 우선 하이브리드 앱 개발로 시작하는 게 좋겠다고 결론을 내고 공부를 시작했다. 여기에는 ‘지금은 잘 기억이 나지 않지만, 예전에 웹 개발을 해본 적이 있으니 빨리 적응할 수 있겠지.’라는 막연한 낙관론도 결정에 한몫했다(나중에 보니, 과거의 기억은 쥐꼬리만한 수준이라 없느니만 못했다는 게 밝혀졌다는 슬픈 전설이 있다).
폰갭(또는 코르도바) 기반의 개발에 대한 내용 파악이 대략 끝나고 프로토타입을 만들려고 호기롭게 새 프로젝트를 생성하자, 잊고 있었던 치명적인 문제가 생각나며 정신이 아득해졌다. 바로 내가 UI 개발에는 ‘젬병’이었다는 것이다! 부트스트랩과 JQuery를 소싯적에 깨작거려본 적은 있었지만, 있는 디자인을 고치거나 살을 붙이는 것과 무에서 유를 창조하는 것은 차원이 다른 문제다. 네 명의 창업 멤버 중에는 디자이너가 없었고, 아직 디자인 아웃소싱을 논할 단계도 아니었기 때문에 방법을 찾아야만 했다. 하이브리드 앱 개발을 도와줄 적절한 UI 프레임워크를 찾다가 알게 된 것이 아이오닉이었다.
그때 아마 7~8개의 UI 프레임워크를 검토했던 것 같은데, 저마다 자기 프레임워크를 쓰면 번개같이 앱이 뚝딱 나올 것이라고 주장하고 있었다. 물론 아이오닉도 그러했다. 지금에 와서 회고하자면, 그 말은 절반은 맞고 절반은 틀렸다. 그 주장들에는 어떠한 말이 생략되어 있었다. 바로, ‘당신이 적어도 웹 개발에는 매우 능숙하고, 우리 프레임워크도 제대로 다 익혔다면…’이라는 지극히 당연한 말 말이다. 아이오닉을 익히면서 개발하느라 공식 웹사이트의 도큐먼트는 물론이고, 구글링과 스택오버플로우를 달고 살면서 ‘이 거짓말쟁이들!’이라며 일갈했던 적이 한두 번이 아니다. 물론 내가 지극히 부족한 지식을 플랫폼 탓으로 돌리려 한 행위와 다름 없었다. 단편적인 지식이나마 조립해가면서 감을 잡아갔지만, 이를 전체적으로 정리해줄 안내서가 있으면 좋겠다는 아쉬움을 느끼고 있던 차에 이 책을 접하게 되었다.
아이오닉의 매력적인 점은 단순히 UI 프레임워크를 제공하는 수준이 아닌, 코르도바와 AngularJS를 적극적으로 도입해 포괄적인 프

 

이 책은 우리가 아이오닉(Ionic)을 만들고 2013년에 오픈소스로 발표한 이래로 즐겁게 협업해온 아이오닉의 탑 개발자 제레미 윌켄이 9개월 동안 헌신해 내놓은 결과물이다. 이 책은 아이오닉 오픈소스 SDK를 훌륭하게 소개하고 있으며, 아이오닉 숙련 개발자에게도 풍부한 정보를 제공한다.
제레미는 이 책을 위해 아이오닉 컴포넌트를 모두 사용하는 세 개의 아이오닉을 만들었다. 따라서 이 책은 아이오닉 컴포넌트들을 전체적으로 사용하기 위한 확실한 레퍼런스가 될 것이다. 가상의 리조트가 숙박객에게 유용한 기능을 제공하는 첫 번째 앱은 우리의 슬라이드 박스, 리스트, 카드, 콘텐츠 컨테이너, 기본적인 내비게이션 등을 사용한다. 두 번째인 비트코인 마켓 앱은 비트코인의 실시간 환율을 제공하면서 당겨서 새로고침하기, 팝오버, 탭, 차트, 향상된 리스트, 중첩된 뷰를 소개한다. 세 번째인 날씨 앱은 모달, 스크롤 영역 커스터마이징(페이지 스크롤), 외부의 데이터 불러오기, 사이드 메뉴, 검색 뷰 등을 사용한다.
각각의 앱은 독보적이면서 견고하다. 앱스토어 출시를 기준으로 봐도 80% 정도 개발된 수준이며, 완성품으로 가기 위해 부족한 점은 각 장의 말미에 도전 과제로 독자들에게 남겨놓고 있다.
숙련된 개발자를 위해 이 책은 플랫폼별 차이점도 설명한다. 예를 들어, iOS에서는 액션시트(action sheet)를 사용하고 안드로이드에서는 팝오버를 사용하는 점 등이다. 한편, 아이오닉 에코시스템, 코르도바(Cordova) 플러그인으로 향상시키기, 아이오닉 뷰와 같은 아이오닉 플랫폼 서비스, 고급 기법과 테스팅으로 개발 향상시키기와 같은 배경지식에 대해서도 설명하고 있다. 제레미는 여러분이 앱을 개발하고 테스트할 수 있도록 훌륭한 예제와 통찰을 준다.
맥스 린치(Max Lynch), 벤 스페리(Ben Sperry)와 함께 아이오닉을 만들기에 앞서 나는 이미 성공적인 제품을 출시했던(jQuery 모바일 드래그앤드롭 인터페이스 빌더인 Codiqa와 같은) 그들의 개발을 돕기 위해 회사에 합류했었다. Codiqa 작업을 하면서, 우리는 기기와 브라우저가 그 잠재력을 완전히 활용하고 있지 못한다는 사실을 깨달았고, 사용자들은 지속적으로 우리의 도구에 대해 더 많은 요구를 해왔다. 그러던 어느 날, 우리는 모바일 장치의 한계까지 밀어붙이기 위해 하이브리드 애플리케이션을 위한 툴킷을 만들기로 마음먹었다. AngularJS의 힘을 빌어, 우리는 하이브리드 모바일 앱 개발을 네이티브 애플리케이션 개발에 필적할 수 있는 수준으로 끌어올렸다. 2013년 아이오닉의 알파 버전을 출시한 이래로, 개발자 커뮤니티가 빠르게 아이오닉을 받아들이고 더 큰 성장을 이룰 수 있게 도와준 사실은 무척 자랑스럽다. 가장 흥분되는 점은 아이오닉은 아직 시작일 뿐이라는 점이다. 우리는 지속적으로 성장하고 지원하면서, 개발자들이 높은 성능의 앱을 빠르고 쉽게 개발할 수 있게 할 것이다.
독자들은 이 책이 아이오닉을 소개하는 정보뿐 아니라 더 나은 앱을 만들기 위한 깊이 있는 설명도 모두 담고 있다는 것을 알게 될 것이다. 아이오닉 커뮤니티의 일원이 돼 주어 감사하다.
부디, 즐기시기를!
- 애덤 브래들리((Adam Bradley)/아이오닉 프레임워크 공동 개발자

목차
1장 아이오닉과 하이브리드 앱 개발
__1.1 아이오닉이란?
__1.2 모바일 경험의 종류
____1.2.1 네이티브 모바일 앱
____1.2.2 모바일 웹사이트 (웹앱)
____1.2.3 하이브리드 앱
__1.3 아이오닉 스택의 작?동 방식 이해하기
____1.3.1 아이오닉: 사용자 인터페이스 프레임워크
____1.3.2 AngularJS: 웹 애플리케이션 프레임워크
____1.3.3 코르도바: 하이브리드 앱 프레임워크
__1.4 왜 아이오닉인가?
____1.4.1 아이오닉이 개발자에게 좋은 이유
____1.4.2 아이오닉의 문제점
__1.5 아이오닉 앱 빌드를 위해 필요한 사전 지식
____1.5.1 HTML, CSS, 자바스크립트에 대한 경험
____1.5.2 웹 애플리케이션과 AngularJS에 대한 경험
____1.5.3 모바일 장치에 대한 경험
__1.6 모바일 장치와 플랫폼에 대한 지원
____1.6.1 애플의 iOS
____1.6.2 구글의 안드로이드
__1.7 요약
2장 앱 개발을 위한 작업 환경 구성하기
__2.1 빠른 시작을 위한 안내
____2.1.1 개발 환경 설정
____2.1.2 새 프로젝트 시작
____2.1.3 프로젝트 폴더 구조
____2.1.4 브라우저에서 미리보기
__2.2 미리보기 환경 구축
____2.2.1 플랫폼 도구 설치
____2.2.2 에뮬레이터 설정하기
____2.2.3 연결된 장치 설정
____2.2.4 프로젝트에 플랫폼 추가하기
____2.2.5 에뮬레이터에서 미리보기
____2.2.6 모바일 기기에서 미리보기
__2.3 요약
3장 AngularJS에 대해 알아야 할 것들
__3.1 한눈에 보는 AngularJS
____3.1.1 뷰와 템플릿: 콘텐츠를 표현하기
____3.1.2 컨트롤러, 모델, 스코프: 데이터와 로직 관리하기
____3.1.3 서비스: 재사용 가능한 오브젝트와 메소드
____3.1.4 양방향 데이터 바인딩: 컨트롤로와 뷰의 데이터 공유
__3.2 이번 장의 프로젝트를 위한 설정
____3.2.1 프로젝트 파일 얻기
____3.2.2 개발 서버 작동시키기
__3.3 Angular 앱의 기본
__3.4 컨트롤러: 데이터와 비즈니스 로직 제어하기
__3.5 데이터 불러오기: 컨트롤러에서 로딩하고 뷰로 표시
____3.5.1 필터: 데이터 표시를 위해 변환하기
__3.6 노트 선택을 위해 클릭 이벤트 핸들링하기
__3.7 Markdown 형식의 노트를 파싱하기 위한 디렉티브 만들기
__3.8 콘텐츠 편집과 관리를 위해 모델 사용하기
__3.9 노트의 저장과 삭제
____3.9.1 save() 메소드 추가하기
____3.9.2 유효성 확인을 위한 Angular 폼 사용
____3.9.3 삭제 메소드 추가
__3.10 AngularJS와 함께 계속 나아가기
__3.11 도전 과제들
__3.12 요약
4장 아이오닉 내비게이션과 기본 컴포넌트들
__4.1 이번 장의 프로젝트를 위한 설정
____4.1.1 새 앱을 생성하고 직접 코드 추가하기
____4.1.2 완료했던 앱을 복제한 후 진행
__4.2 앱 내비게이션 구현을 위한 설정 작업
____4.2.1 잘 설계한 앱 내비게이션이란?
____4.2.2 상태 제공자로 앱뷰 선언하기
__4.3 홈 뷰 만들기
____4.3.1 콘텐트 컨테이너 생성
____4.3.2 CSS 컴포넌트 사용, 간단한 링크 목록 추가
____4.3.3 목록 내 아이템에 아이콘 추가하기
__4.4 예약 뷰 구현을 위해 컨트롤러와 모델 사용하기
__4.5 날씨 뷰에 데이터 불러오기
____4.5.1 날씨 뷰에 사용할 템플릿 추가
____4.5.2 외부 데이터를 불러오기 위한 컨트롤러 만들기
____4.5.3 날씨 뷰에 로딩 인디케이터 추가
__4.6 레스토랑 뷰를 위한 카드 UI 무한 스크롤링
__4.7 둘러보기 기능을 위해 슬라이드 박스 컴포넌트 사용하기
__4.8 도전 과제들
__4.9 요약
5장 탭, 향상된 리스트, 폼 컴포넌트들
__5.1 이번 장의 프로젝트를 위한 설정
____5.1.1 새 앱을 생성하고 직접 코드를 추가하기
____5.1.2 완성된 앱을 복제한 후 진행하기
__5.2 ionTabs: 탭과 내비게이션 추가
____5.2.1 탭 컨테이너와 세 개의 탭 추가
__5.3 각 탭에 ionNavView 추가하기
__5.4 비트코인의 현재 환율을 표시하기
__5.5 같은 탭 뷰에서 상세 환율 보여주기
__5.6 비트코인 채광율을 갱신하고 도움말 보여주기
____5.6.1 ionRefresher: 아래로 당겨 환율을 갱신하기
____5.6.2 $ionicPopover: 팝오버 창으로 도움말 표시하기
__5.7 이력 데이터 차트
____5.7.1 서드파티 라이브러리 설치
____5.7.2 Highcharts를 이용한 이력 탭 템플릿, 셀렉트 박스로 환율 토글하기
____5.7.3 이력 탭 컨트롤로 데이터 불러오기, 차트 설정하기
__5.8 환율 탭에서 목록을 재정렬하고 토글하기
____5.8.1 ionReorderButton: 목록 재정렬 기능 추가
____5.8.2 ionToggle: 아이템 토글 기능 추가
__5.9 도전 과제들
__5.10 요약
6장 날씨 앱: 사이드 메뉴, 모달, 액션시트와 ionScroll 사용하기
__6.1 이번 장의 프로젝트를 위한 설정
__6.2 사이드 메뉴와 뷰 셋업
__6.3 위치 검색
__6.4 설정 뷰와 데이터 서비스 추가
____6.4.1 위치와 설정을 위한 서비스 만들기
____6.4.2 사이드 메뉴에 선호하는 목록을 보여주기
____6.4.3 설정 뷰 템플릿 추가
____6.4.4 설정 뷰의 컨트롤러
__6.5 날씨 뷰 만들기
____6.5.1 Forecast.io API의 키 얻기
____6.5.2 아이오닉 CLI 프록시 사용하기
____6.5.3 날씨 뷰 컨트롤러와 템플릿 추가
__6.6 ionScroll: 커스텀 스크롤 콘텐츠 만들기
____6.6.1 ionScroll로 페이징하기
____6.6.2 일기예보 데이터에 적용할 필터 만들기
__6.7 액션시트: 옵션 목록 보여주기
__6.8 ionModal: 일출과 일몰 시간의 차트를 보여주기
____6.8.1 모달 설정하기
____6.8.2 컬렉션 반복: 일출과 일몰 목록을 빠르게 구성하기
__6.9 팝업: 선호 지역 변경을 통지하고 확정
__6.10 도전 과제들
__6.11 요약
7장 프로페셔널한 앱을 위한 고급 기술들
__7.1 이번 장의 프로젝트를 위한 설정
____7.1.1 코드 얻기
__7.2 Sass로 아이오닉 스타일을 커스터마이징하기
____7.2.1 Sass 설정하기
____7.2.2 Sass 변수로 아이오닉 커스터마이징하기
____7.2.3 나만의 스타일을 위한 Sass 사용하기
__7.3 온라인, 오프라인 모드를 지원하기
__7.4 아이오닉에서 제스처 이벤트 다루기
____7.4.1 아이오닉 이벤트 디렉티브로 이벤트 리스닝하기
____7.4.2 $ionicGesture 서비스를 가지고 이벤트 리스닝하기
____7.4.3 사용할 수 있는 제스처 이벤트들
__7.5 데이터를 영속적으로 저장하기
____7.5.1 localStorage 사용하기
____7.5.2 Web SQL, IndexedDB, SQLite 사용하기
____7.5.3 코르도바 플러그인을 이용한 다른 옵션
__7.6 다중 플랫폼을 지원하는 하나의 앱 만들기
____7.6.1 하나의 크기로 모두를 맞출 수 없다
____7.6.2 플랫폼이나 디바이스 타입에 맞게 스타일 조정하기
____7.6.3 플랫폼이나 디바이스에 따른 적응형 동작
__7.7 $ionicConfigProvider로 기본 동작을 수정하기
__7.8 요약
8장 코르도바 플러그인 사용하기
__8.1 코르도바 플러그인
____8.1.1 플러그인 사용 시 고려할 점
____8.1.2 플러그인 설치
____8.1.3 플러그인 사용하기
____

★ 지은이의 말 ★

요즘에는 모바일의 중요성에 대해 이견이 없지만, 불과 몇 년전만 하더라도 모바일 앱을 만드는 것이 과연 시간과 노력을 들일 만한 충분한 가치를 지니는지에 대해 의견이 분분했다. 2015년이 되면서 애플 앱스토어와 구글 플레이 스토어에 등록된 모바일 앱의 수가 100만 개를 넘었다. 팔려나간 폰은 데스크톱과 노트북의 여섯 배를 넘어갔고, 판매된 태블릿의 수도 이를 앞서기 시작했다. 이제 모바일은 여기저기에 널려 있다.
2013년 모바일 앱 개발의 세계에서는 네이티브 앱 개발이 대세였다. 네이티브 앱은 자바나 오브젝티브C로 작성되었기 때문에, 개발자는 이러한 언어와 플랫폼 도구, SDK 등을 배워야만 했다. 나와 같은 웹 개발자에게 이런 점은 모바일 앱 개발에 있어서 장벽으로 다가왔다. 모바일 웹은 모바일 앱이 아닌 반응형 웹사이트를 만드는 느낌에 가까웠다. 하이브리드 앱(웹 기술을 사용해서 개발된 네이티브 앱)은 대체로 별 메리트가 없었다. 구형 장치나 브라우저는 하이브리드 앱을 느릿느릿 실행시켰고, 네이티브 앱과 비주얼적으로 괴리가 있었기 때문이다.
아이오닉의 창시자들은 기회를 봤다. 모바일 장치가 날로 발전되면서 매우 빨라지고 있으므로 하이브리드 앱이 네이티브 앱과 함께 당당히 자리할 수 있음을 깨달았다. 웹 개발을 통해 이미 알고 있는 언어와 기술을 사용해서 네이티브 느낌이 나는 앱을 만들고 싶은 개발자들에게 길을 열어주는 데 집중했다. 아이오닉은 코르도바, AngularJS, 오픈소스 프로젝트의 어깨에 올라탄 후에 작성되었다. 아이오닉은 이들 프로젝트를 하이브리드 모바일 앱 개발을 위한 플랫폼으로 변모시켰다.
버전 1.0이 되었을 때, 아이오닉은 무르익었고 웹 개발자들이 모바일 앱을 개발하기에 힘을 실어준다는 것이 명확해졌다. 아이오닉 팀은 아이오닉을 하이브리드 앱을 위한 ‘누락된 SDK’라고 부르기 좋아했다. 이 책 저술을 위한 여정을 마친 이 시점에서, 나는 아이오닉의 완전한 비전이 실현되고 있음을 알 수 있다. 아이오닉을 정말 강력하게 만들어주는 핵심은 이 책에서 보여줄 오픈소스 컴포넌트다. 여기에 더해서, 푸시 알림, 분석, 베타 테스팅, 기타 부가 기능과 같은 서비스로서의 플랫폼이 만들어지고 있는 중이다. 나는 잘 관리되고 있는 개발 프로젝트와 커뮤니티를 보유한 오픈소스 프로젝트를 예의 주시하고 있는데, 아이오닉은 이 범주에 있는 프로젝트다(이 책을 쓰는 시점에 깃허브(GitHub)의 상위 40위 내에 들어가는 프로젝트이자 AngularJS를 사용하는 3위 내의 프로젝트다). 수십만 개의 앱이 아이오닉으로 만들어졌고, 몇몇 앱은 메이저 앱스토어에서 피처링을 받았다.
아이오닉에 관한 책을 쓰는 것은 모바일 앱 개발자가 되기 위해 내가 경험하고 배운 것을 공유하고 싶은 소망을 논리적으로 확장하는 작업이다. 처음에는 아이오닉의 각 기능에 대해 이야기하면서 각각을 개별적으로 둘러보며 배워가는 방식으로 이 책의 핵심 부분을 작성했었다. 그러나 여섯 개의 장을 썼을 무렵에 잘못된 접근을 하고 있음을 직감했다. 조작할 수 있는 무언가를 통해 작동하는 모습을 보는 것이 좋겠다 싶었고, 모바일 앱을 만드는 방식이라면 가능할 것 같았다.
그래서 이 책의 초반 세 장에 대한 내용을 확정하고 나서는 만들고 실행해보는 직접적인 접근 방식으로 다시 썼다. 그 덕분에 내가 첫 아이오닉 앱을 만들 때 따라갔던 방식에 더 가까워진 느낌을 받았다. 여러분도 각 장이 친근하게 느껴졌으면 좋겠다. 사실, 이 책 전반에 걸쳐 일관되게 적용하려 했던 의도가 제대로 전달되기를 희망한다.
내 경우에도 도큐먼트가 언제나 좋은 안내서가 되긴 했었지만, 그럼에도 시행착오를 겪으면서 아이오닉을 배웠다. 이제는 모바일 앱이 필요한 프로젝트를 현업에서 접하게 되면, 아이오닉으로 단 하루 만에 프로토타입을 만들 수 있다. 아이오닉으로 개발하던 초기에는 변경이나 새 기능이 추가될 때마다 정기적으로 앱을 업데이트했는데, 세심한 접근과 혁신을 이뤄가는 빠른 주기에 종종 깊은 인상을 받곤 했다. 몇 달간의 베타 기간을 거친 후에 아이오닉은 API를 확립하고 설계를 다듬으며 안정적인 모습이 되었다.
아이오닉의 미래는 더 많은 커뮤니티 주도의 기여와 컴포넌트 개발, 더 많은 플랫폼 서비스, 지속적으로 향상되는 성능과 품질을 포함하는 모습이 될 것이다. 어서 빨리 여러분이 만든 앱을 보고 싶다. 아이오닉으로 모바일 앱 개발자가 되기 위한 여러분의 여정에 함께할 수 있어 무척 기쁘다.

★ 옮긴이의 말 ★

일단, 과거의 이야기부터 좀 해야겠다. 조금은 지루할 수도 있지만, 그래도 새로 모바일 앱을 개발하려고 고민하고 있는 웹 개발자들에게는 뭔가 힌트가 되어줄지도 모른다는 생각 때문이다.
아이오닉 프레임워크를 알게 된 시점은 2015년 10월경이었다. 그럭저럭 다니고 있던 직장을 그해 초에 그만두고, 뭔지는 아직 잘 모르겠지만 하고 싶은 걸 새로 시작해보자고 평균 나이 40세가 넘는 네 명이 모였다. 어쨌던 개발 경력이 있었던 나를 포함한 두 명이 자연스레 개발을 맡게 되었고, 그중에 나는 클라이언트를 담당하게 되었다.
모바일 시대에 모바일 앱이 없는 사용자 서비스를 논하기는 어려운 세상이 되었다. 따라서 클라이언트를 맡게 된 나는 네이티브 앱, 하이브리드 앱, 웹앱, 모바일 웹 등 가능한 모바일 앱 개발 방법론부터 검토하기 시작했고, 디바이스의 기능을 써야만 하는 서비스의 특성상 자연스럽게 웹앱과 모바일 웹은 배제하고 네이티브냐 하이브리드냐를 놓고 고민을 했다. 빠른 성능과 기기의 모든 기능을 활용할 수 있는 네이티브 개발과 (현실적으로는 기대만큼 극적이지는 않다는 논란이 있음에도 어쨌든 상대적으로는) ‘원소스 멀티유스’가 가능한 하이브리드 앱의 생산성 사이에서 어떤 선택이 좋을지 쉽게 답을 내리기 어려웠다. 사실 이 고민의 근원은 내가 앱 개발을 해본 적이 없다는 사실에 기인했다. 고민 끝에 적은 인원과 투입될 (학습을 포함한) 개발 시간을 생각하면, 나중에 각각 네이티브 앱으로 포팅을 하더라도 우선 하이브리드 앱 개발로 시작하는 게 좋겠다고 결론을 내고 공부를 시작했다. 여기에는 ‘지금은 잘 기억이 나지 않지만, 예전에 웹 개발을 해본 적이 있으니 빨리 적응할 수 있겠지.’라는 막연한 낙관론도 결정에 한몫했다(나중에 보니, 과거의 기억은 쥐꼬리만한 수준이라 없느니만 못했다는 게 밝혀졌다는 슬픈 전설이 있다).
폰갭(또는 코르도바) 기반의 개발에 대한 내용 파악이 대략 끝나고 프로토타입을 만들려고 호기롭게 새 프로젝트를 생성하자, 잊고 있었던 치명적인 문제가 생각나며 정신이 아득해졌다. 바로 내가 UI 개발에는 ‘젬병’이었다는 것이다! 부트스트랩과 JQuery를 소싯적에 깨작거려본 적은 있었지만, 있는 디자인을 고치거나 살을 붙이는 것과 무에서 유를 창조하는 것은 차원이 다른 문제다. 네 명의 창업 멤버 중에는 디자이너가 없었고, 아직 디자인 아웃소싱을 논할 단계도 아니었기 때문에 방법을 찾아야만 했다. 하이브리드 앱 개발을 도와줄 적절한 UI 프레임워크를 찾다가 알게 된 것이 아이오닉이었다.
그때 아마 7~8개의 UI 프레임워크를 검토했던 것 같은데, 저마다 자기 프레임워크를 쓰면 번개같이 앱이 뚝딱 나올 것이라고 주장하고 있었다. 물론 아이오닉도 그러했다. 지금에 와서 회고하자면, 그 말은 절반은 맞고 절반은 틀렸다. 그 주장들에는 어떠한 말이 생략되어 있었다. 바로, ‘당신이 적어도 웹 개발에는 매우 능숙하고, 우리 프레임워크도 제대로 다 익혔다면…’이라는 지극히 당연한 말 말이다. 아이오닉을 익히면서 개발하느라 공식 웹사이트의 도큐먼트는 물론이고, 구글링과 스택오버플로우를 달고 살면서 ‘이 거짓말쟁이들!’이라며 일갈했던 적이 한두 번이 아니다. 물론 내가 지극히 부족한 지식을 플랫폼 탓으로 돌리려 한 행위와 다름 없었다. 단편적인 지식이나마 조립해가면서 감을 잡아갔지만, 이를 전체적으로 정리해줄 안내서가 있으면 좋겠다는 아쉬움을 느끼고 있던 차에 이 책을 접하게 되었다.
아이오닉의 매력적인 점은 단순히 UI 프레임워크를 제공하는 수준이 아닌, 코르도바와 AngularJS를 적극적으로 도입해 포괄적인 프레임워크로 묶어놨다는 점과 커뮤니티가 활발하다는 것이다. 개발을 편리하게 할 수 있도록 도와주는 고민들이 곳곳에서 묻어난다. ngCordova(이 책 8장에서도 언급할 예정이다.)도 그런 노력의 일환이다. 아, 내 역량이 ‘하이브리드 앱 프레임워크의 1등은 무엇이다’라고 자신 있게 말할 수준은 안 되지만, 짐작건대 적어도 순위를 다툴 것이라는 점과 정말로 편리하게 사용할 수 있다는 점에서 자신 있게 권하고 싶다.
이 책 또한 훌륭한 책이다. 기초적인 내용부터 수준 높은 내용까지 자연스럽게 설명하고 있으며, 아이오닉 프레임워크에 대한 설명뿐만 아니라 하이브리드 앱을 개발하면서 부딪히게 되는 여러 가지 이슈와 고민까지 이 작은 분량의 책에 담아냈다. 3장부터 6장까지에 이르는 각 장의 예제들만 충실히 만들고 이해한다면, 일단 프레임워크에 대한 파악은 끝났다고 해도 무방할 정도다. 나 역시 ‘처음에 이 책으로 시작했으면 그 고생은 안 했을 텐데…’ 하는 탄식이 나올 정도다. 이 책과 아이오닉의 공식 도큐먼트를 함께 참고하면 충분할 것 같다.

<아이오닉 버전 2.0 출시에 즈음해서>
이 책을 번역하고 출간을 준비하는 사이에 아이오닉 2의 베타 버전이 출시되었고, 이번 여름에 정식 버전 출시를 앞두고 있다. 이에 따라 ‘2.0 버전에 맞는 책이 나오면 다시 번역해야 할까?’, ‘한 장을 별도로 추가해서 바뀌는 내용에 대해 설명해야 할까?’ 등의 여러 가지 고민이 있었는데, 결국에는 이대로 출간하는 것도 의미가 있다고 생각했다. 그 이유는 다음과 같다.
아이오닉 2는 AngularJS 2에 기반한다: 아이오닉은 AngularJS를 기반으로 개발되어 있다. AngularJS가 버전 2로 업그레이드되면서 구조적, 성능적 향상을 이뤄냈다. 그러나 이를 이용하려면 달라진 AngularJS 2에 대한 이해와 함께 타입스크립트에 대한 이해가 필요하다. 물론, 대세의 흐름에 따라가는 것이 옳겠지만(나도 그럴 생각이다.), 학습의 동기나 멀리 바라보는 관점이 아닌, 당장 지금의 지식을 활용해 빠르게 뭔가를 만들어보고 싶다면 여전히 아이오닉 1이 유효한 방법이 될 것이다. 게다가 사용 방법의 차이가 있지만, 기본적인 개념은 거의 동일하다고 언급하고 있는 바 현 버전을 통해 얻은 지식이 통째로 버려지는 일은 없을 것이다.
아직은 아이오닉 2가 정식으로 출시되지 않았다. 2016년 6월 현재 여덟 번째 베타 버전이 출시되었고, 개발 로드맵 문서(https://goo.gl/nvXUGn)를 보면 열두 번째 베타 버전까지의 계획이 수립되어 있다. 곧 정식 버전 출시가 눈앞으로 다가왔다고는 하지만, 아직 확정되지는 않은 상태다. 제품으로서의 모바일 앱 출시를 준비하고 있는 상황이라면 아직은 좀 더 신중하게 접근해야 한다고 본다. 게다가 아이오닉 팀은 버전 2를 출시하더라도, 상당 기간 동안은 버전 1 지원을 계속할 것이라고 한다의 ‘So should you move?’ 제목 아래 부분).
요약하자면, 취미 삼아 공부하면서 앞으로를 준비하겠다면 Angular 2와 아이오닉 2를 기반으로 하는 것이 좋겠다. 물론, 관련 자료에 대해서는 각자의 방법으로 수집하면서 참고해야 한다. 반면에 이미 아이오닉 1으로 개발을 진행한 상황이거나(나의 경우도 이에 포함됨), 지금 갖고 있는 웹 개발 지식에 조금만 살을 붙여서 최대한 빨리 뭔가를 뚝딱뚝딱 만들어보고 싶다면 현재의 버전을 익히면서, 아이오닉 2의 진행 상황을 주시하는 것도 방법이 될 것이다. 다만 아이오닉 1을 기반으로 개발한 소스를 버전 2로 마이그레이션하게 되는 비용은 감내해야 한다.
그 선택은 독자의 몫이다.