아이오닉 2는 Angular 2, 타입스크립트, SASS 같은 기술 위에 개발된 아이오닉 모바일 SDK의 최신 버전이며 이전 버전에 비해 구조 개선, 빌드 도구 개선, ES6 문법 지원 등 모든 부분에서 혁신적인 개선을 이뤘다. 아이오닉 2를 사용해 재미있고 몰입되는 모바일 앱을 제작할 수 있도록 다양한 아이오닉 2의 컴포넌트를 배우고, 외부 서비스를 통합하며, 기능을 구현해보는 전문적인 앱 제작 과정을 풍부한 예제를 통해 쉽게 따라가며 배울 수 있을 것이다.

■ 애플리케이션 개발을 위한 아이오닉 기능
■ 파이어베이스와 아이오닉을 이용한 채팅 앱 제작
■ 써드 파티 REST API를 사용한 주식 추적 앱 제작 및 아이오닉 네비게이션과 페이지를 활용한 레이아웃 구성
■ 아이오닉과 코르도바 플러그인을 사용한 미디어 플레이어 앱
■ 파이어베이스를 이용한 상용 애플리케이션 제작
■ 실시간 아이오닉 애플리케이션 제작을 위한 모범 사례 연구

아이오닉 2를 사용한 경험이 있지만 동적인 기능으로 실시간 앱을 제작하는 아이오닉의 강력함에 대해 아직 완전히 체감하지 못한 중급 수준의 아이오닉 개발자를 위한 책이다.

1장, ‘파이어베이스를 이용한 채팅 애플리케이션’에서는 파이어베이스를 사용해 실시간 채팅 애플리케이션을 개발하는 방법을 소개한다. 또한 아이오닉 2에서 탭 사용법, 파이어베이스 설정법, 채팅 앱을 개발하기 위해 AngularFire2로 파이어베이스를 사용하는 법을 배운다.
2장, ‘Marketcloud를 이용한 쇼핑몰 애플리케이션’에서는 전자상거래를 위한 새로운 BaaS 플랫폼인 Marketcloud를 소개한다. 독자는 Marketcloud SDK와 대시보드를 사용한 쇼핑몰 앱을 제작하고 결제 게이트웨이 통합으로 결제를 처리하며 아이오닉 2 메뉴와 탐색을 사용하고 아이오닉 로딩을 사용한 로더의 사용법을 배운다.
3장, ‘학회 애플리케이션’에서는 학회 앱 제작 방법을 선보인다. Lanyrd 호환 JSON 데이터를 사용하고 아이오닉 네이티브로 네이티브 장치 기능과 LocalStorage를 활용하며 아이오닉 메뉴와 탭을 같이 사용하는 오프라인 학회 앱을 개발한다. 또한 RxJS를 사용해 검색 필터를 개발한다.
4장, ‘StockMarket 애플리케이션’에서는 사용자가 선택한 주식의 정보를 보여주는 증권 시장앱을 개발하는 방법을 소개한다. 앵귤러 2 컴포넌트 API를 사용해 재사용 가능한 UI 컴포넌트를 개발하고 RxJS를 활용해 Yahoo API에서 지속적으로 증권 데이터를 받아오며 커스텀 앵귤러JS 파이프를 제작하고 증권의 과거 데이터를 보여주는 반응형 차트를 생성한다.
5장, ‘워드프레스 클라이언트 애플리케이션’에서는 워드프레스 블로그나 사이트를 위한 모바일 클라이언트를 개발하는 방법을 소개한다. 또한 워드프레스 REST API, 아이오닉 Toast, 아이오닉 2에서의 무한 스크롤, 푸시 알람, 아이오닉 네이티브, 구글 애널리틱스 활용하는 법을 소개한다. 최종 결과물은 블로그 게시물, 댓글, 카테고리, 워드프레스 페이지를 가진 워드프레스 클라이언트 애플리케이션이 될 것이다.
6장, ‘미디어 플레이어 애플리케이션’에서는 미디어 플레이어를 개발하는 방법을 소개하는데 이 책 속에 등장하는 특별한 앱 중 하나다. 재생 위치를 변경할 수 있는 탐색 바, 재생 및 일시 정지 버튼, 재생 목록 옵션과 다음 및 이전 버튼이 있는 완전한 플레이어를 제작한다. 또한 장치에서 미디어를 가져오는 파일 탐색기도 제작한다.
7장, ‘파이어베이스를 이용한 소셜 애플리케이션’에서는 파이어베이스를 사용한 소셜 앱을 개발하는 방법을 소개한다. 파이어베이스 데이터베이스를 사용해 정보를 저장하며 파이어베이스 저장소를 사용해 이미지와 같은 이진 정보를 저장한다. 이 앱은 사용자가 다른 사용자를 팔로잉하고 그들의 게시물을 보는 트위터 같은 앱이며 앱을 위한 데이터베이스 구조도 다룬다.

이 책은 아이오닉 2를 사용해 재미있고 몰입되는 앱을 제작할 있도록 도움을 준다. 이 책을 통해 독자는 다양한 아이오닉 컴포넌트를 배우고 외부 서비스를 통합하며 기능을 구현하고 특히 전문적인 앱을 제작하는 방법을 배울 것이다. 또한 아이오닉 2 앱 개발의 기초를 이해하고 점진적으로 기능과 애플리케이션의 복잡도를 높여가며 애플리케이션이 어떻게 개발되는지 관찰함으로써 일관성 있고 쉬운 방법으로 아이오닉 앱 개발을 배울 수 있다.

인더모한 싱(Indermohan Singh)

앵귤러JS(AngularJS), 리액트(React), 아이오닉, 타입스크립트, ES6에 관심 있는 프리랜서 자바스크립트 개발자로 지난 2년간 다양한 스타트업과 기업에서 대부분의 모바일 앱을 아이오닉으로 개발했다.
2년쯤 전에 아이오닉, 앵귤러JS, 자바스크립트에 대해 기고하는 블로그(https://inders.in/)를 시작했으며 오픈 소스 광신자로써 데모를 제작해 깃허브(GitHub)https://github.com/imsingh에 게시하고 있다.
작년에 베를린에서 열린 모바일 앱 유럽 컨퍼런스에서 아이오닉 2와 관련해 강연을 했으며 추천 아이오닉 전문가로 있는 코드멘토(Codementor)에서는 모바일 개발, 앵귤러JS, 아이오닉에 대해 종종 강의하기도 한다. 또한 대학에서 객원 교수로 프로그래밍을 가르치기도 했다.
코딩 외에 음악에 관심이 많아서 코딩하지 않을 때는 작곡을 하며 때때로 사운드클라우드(SoundCloud)(http://soundcloud.com/indermohan-singh-2/stats)에 작곡한 음악을 발표하기도 한다. 또한 라가(Raga)용 인디언 전통 음악 검색 엔진인 라가코시(Ragakosh)의 창시자기도 한데 MIT 미디어 랩에서 이 아이디어를 인정해 필자를 Entrepreneurship Boot camp 2015에 선정하기도 했다.

2000년대 초반만 하더라도 IT는 데스크톱 운영체제인 마이크로소프트 윈도우와 웹이라는 큰 플랫폼으로 구분됐으며 그 개발자 역시 뚜렷하게 구분돼 각자의 역할을 존중하며 공생해왔다. 역자도 윈도우 앱 개발자 출신으로 당시에는 윈도우의 세상이 영원할 것으로 믿었기 때문에 윈도우 앱 개발 기술만 알면 평생 먹고 살 줄 알았다.
그 흐름에 처음으로 불안함이 감돈 것은 앱이라고 부르기는 뭔가 궁색했던 웹페이지가 HTML5 기술의 등장으로 동적인 UX를 가진 웹앱으로 변화하기 시작한 2000년대 중반부터였다. 그동안 HTTP의 비연결적 특성 때문에 데스크톱 앱에 비해 UX의 역동성이 부족했던 웹이 동적으로 동작하면서 데스크톱 앱의 영역을 침범하기 시작한 것이다. 이 웹앱은 또 하나의 큰 장점이 있었는데, 웹브라우저의 호환성만 보장되면 윈도우 이외의 플랫폼인 리눅스나 맥에서도 똑같이 동작할 수 있다는 점이었다. 하지만 그 때까지도 사실상 독점적인 윈도우의 철옹성에는 흔들림이 없었기 때문에 그 장점은 크게 주목 받지 못했다.
이 철옹성에 큰 위기가 찾아온 건 iOS와 안드로이드를 필두로 한 모바일 플랫폼의 등장이었다. 윈도우의 독점이 지속될 줄만 알았던 상황에서 새로운 컴퓨팅 장치가 몰고 온 플랫폼의 다변화는 비즈니스적으로 새로운 플랫폼을 지원해야 할 수 밖에 없는 고민의 시대로 흘러갔다. 이 때부터 웹앱의 크로스플랫폼 동작 가능성은 집중적으로 주목 받기 시작했다. 즉 웹뷰라는 각 플랫폼이 제공하는 웹브라우저 컴포넌트에서 렌더링되도록 웹 기술을 기반으로 한 JQueryMobile, SenchTouch 등으로 UI를 구현하고 PhoneGap, Appcelerator, Appspresso 등으로 네이티브 기능을 연동하는 하이브리드 앱 개발 방식이 등장한 것이다.
하이브리드 앱은 한번의 코딩만으로 복수의 플랫폼을 지원한다는 점에서 개발 비용과 시간을 월등히 줄일 수 있는 이상적인 개발 방법이었지만 초기에는 느린 성능, 여전히 웹 같은 이질감 있는 UI, 플랫폼마다 신규 네이티브 기능 지원이 늦거나 불안한 부분 때문에 실제로는 간단한 기능을 가진 앱에만 적용되거나, 하이브리드 앱으로 개발했다가도 다시 네이티브 앱으로 회귀하는 등 시장에서 기대만큼 인기를 끌지 못하는 상태가 지속됐다.
하지만 시간이 지나면서 하이브리드 앱은 모바일 장치의 성능이 비약적으로 향상되고 자바스크립트 엔진의 발전과 더불어 네이티브 앱과 같은 UI 구현을 지원하는 UI 프레임워크가 등장하면서 새 시대를 맞았다. 특히 UI 프레임워크 중에서도 가장 개발자 커뮤니티가 활성화돼 있고 사용자 요구를 발 빠르게 수용하는 아이오닉 프레임워크는 단시간에 주목 받았고 인기를 얻게 됐다. 아이오닉은 앵귤러 JS를 기반으로 개발돼 MVC 모델을 적용할 수 있고 다양한 UI 컴포넌트와 기능을 제공함으로써 크로스플랫폼을 지원하면서도 네이티브 앱 같은 UI를 구현할 수 있는 UI 프레임워크다. 게다가 아이오닉은 GitHub에 수많은 별을 얻고 백만 개가 넘는 앱이 아이오닉으로 개발되는 등 큰 인기를 얻었다. 그럼에도 불구하고 아이오닉 개발팀은 혁신을 멈추지 않고 바로 다음 버전인 아이오닉 2를 계획하고 개발을 진행했다. 새로 나온 아이오닉 2는 앵귤러 2, 타입스크립트, SASS 같은 최신 기술을 도입했으며, 이전 버전에 비해 구조와 빌드 도구를 개선했다. 또한 ES6 문법을 지원하며 새로운 테마 시스템, 향상된 모달 및 메뉴, 토스트, 새로운 네비게이션 시스템을 탑재하는 등 UI 컴포넌트가 혁신적으로 개선됐다. 가장 주목할 만한 것은 스크롤링 속도가 60FPS에 달하는 등 성능 또한 비약적으로 향상됐다는 점이다.
이 책은 혁신적으로 개선된 아이오닉 2의 주요 기능을 활용한 7개의 앱을 소개해 독자가 빠르게 아이오닉 2를 배울 수 있게 한다. 또한 구글의 클라우드 기반 실시간 데이터베이스인 파이어베이스를 적극 활용해 서버단 개발 없이 데이터베이스와 앱이 직접 연동되는 빠른 앱 개발 방법을 소개한다. 아이오닉 2와 파이어베이스를 활용하면 iOS 개발자, 안드로이드 개발자, 서버 개발자 3명이 필요했던 기존 네이티브 개발 방식을 벗어나 혼자 모든 것을 해낼 수 있다. 놀랍지 않은가? 역자는 최근 스타트업에서 기획한 서비스를 개발하기 위해 네이티브 앱 개발 방식, 자마린, 유니티등의 크로스플랫폼 개발 기술과 아이오닉과 같은 하이브리드 앱 개발 기술을 두루 고려했지만 결국 프론트엔드로 아이오닉을, 백엔드로 파이어베이스를 선택했다. 네이티브 앱 개발 방법보다 노력이 1/3 수준으로 적게 들 뿐만 아니라 개발자 수급 차원에서도 아이오닉 자체가 웹 기술이므로 웹 개발자를 구하면 됐기때문에 자마린, 유니티보다 훨씬 유리하다는 것이 그 이유였다. 실제로 개발하면서 생각했던 것보다 더 만족스럽고 훌륭했기 때문에 아이오닉을 독자들에게 자신 있게 추천할 수 있으며 장점을 널리 알리고자 이 책도 번역하게 됐다. 이 책을 통해 앞으로 여러분의 모바일 앱을 개발할 때 아이오닉의 사용을 꼭 고려하길 기대한다.

신희철

16여 년간 스타트업, Microsoft, IBM, Yahoo 등에서 소프트웨어 개발자, 컨설턴트를 거쳤다. 윈도우 애플리케이션 개발자로 커리어를 시작했기에 『찰스 페졸드의 WPF』(에이콘, 2007) 등을 출간하며 나름 일관된 전문성을 유지하려 노력했지만 웹, 모바일로의 플랫폼 확장 시대에서는 강제 적응 모드에 들어갈 수밖에 없게 됐다.

조한흘

미국 일리노이대학교 어바나-샴페인캠퍼스에서 컴퓨터 공학을 전공 중이다. 2학년을 마치고 군 입대를 목적으로 한국에 들어왔지만, 카투사와 어학병 모두 추첨 단계에서 떨어지고 일반병 입대를 목표로 하고 있다, 방학 동안 인턴으로 일한 회사의 개발자 분을 통해 제안을 받아 번역 작업을 하게 됐다.