모바일 애플리케이션 개발 한 권으로 끝내기

모바일 애플리케이션 개발의 모든 것을 담고 있다.



이 책은 모바일 애플리케이션을 개발하기 위한 첫 도약을 하는 모든 사람들에게 발판이 되는 책이다. 현재 대부분의 모바일 애플리케이션 생태계를 이루고 있는 iOS, Android 두 환경에서 애플리케이션을 개발하는 기본기를 다져본다. 또한, 모바일도 웹 환경을 떠나서 존재하기는 힘들기 때문에 웹 환경의 모바일 애플리케이션도 알아두어야 한다. HTML5 + JavaScript + CSS3를 통해 웹 애플리케이션을 만들어본다.



기존의 도서들은 각각 iOS와 안드로이드 개발자를 대상으로 출간되었지만, 이 책은 동일한 프로젝트를 진행할 때 iOS와 안드로이드에서 어떻게 개발해야 하는지 그 차이를 비교하여 설명한다. 더불어 iOS와 안드로이드의 최신 버전에 새롭게 추가된 기능들에 대한 핵심적인 부분도 설명한다.



이 책의 구성



다양한 예제를 통한 서로 다른 개발 플랫폼 비교

주요 모바일 애플리케이션 플랫폼인 HTML5(웹), 안드로이드, iOS 환경에서 모바일 애플리케이션 개발 패턴을 이해하고 예제를 통해 각 플랫폼을 비교하며 공통된 특성과 각각의 차이를 경험한다.



빠른 이해를 위한 튜토리얼 형식

디자인의 기본이 되는 애플리케이션 개발 패턴인 Model-View-Controller 패턴을 각 플랫폼에서 어떻게 적용하고 구현할 수 있는지에 대한 이해를 바탕으로 화면 전환, 리스트 형태의 데이터 처리, 사진과 카메라의 이용, 위치 정보와 지도 라이브러리 이용, 매시업을 활용한 개발, 태블릿을 고려한 UI 디자인, 웹 뷰를 활용한 하이브리드 앱 개발 등을 동일한 기능으로 각각 다른 플랫폼에서 구현한 예제를 튜토리얼 형식으로 비교하며 이해한다.



파트별 요약



Part 01. 모바일 앱 개발 도구

모바일 애플리케이션을 개발하기 위해서 사용하는 도구를 살펴본다. 웹은 HTML 파일 편집기뿐만 아니라 브라우저도 매우 중요한 도구가 된다. 실제로 동작 중인 웹 애플리케이션을 분석하고 테스트할 때는 전적으로 브라우저가 제공하는 개발자 기능을 이용하게 된다. 네이티브 애플리케이션을 개발하는 도구는 구글과 애플 각 개발사가 무료로 제공한다. 구글은 안드로이드 개발 툴로 이클립스(Eclipse)를, 애플은 XCode를 제공한다.



Part 02. 빠지면 섭섭한 Hello, World! 애플리케이션

첫 번째 프로젝트로 'Hello, World!'를 화면에 출력하는 예제를 배워본다. 첫 번째 프로젝트인 만큼 이 책의 다른 프로젝트 예제에 비해 매우 상세한 설명을 담고 있다. 웹 애플리케이션 개발에 대한 기본 지식이나 안드로이드, iOS에 대한 기본 지식을 충분히 설명하고 있다. 다른 프로젝트 예제를 보다가 생략된 설명이 있다면 첫 번째 프로젝트 예제 설명을 참고하도록 하자.



Part 03. 화면 흐름 디자인

애플리케이션은 윈도우, 뷰, 페이지 등으로 불리는 여러 화면으로 구성된다. 보여주고자 하는 내용에 따라 화면을 전환하고, 화면에 따라 제공하는 기능도 달라진다. 대부분의 애플리케이션은 하나 이상의 화면을 적절히 사용한다. 화면을 디자인하고, 각 화면이 다른 화면으로 어떻게 흘러가고 다시 되돌아오는지, 화면을 전환할 때 적용할 수 있는 애니메이션, 데이터를 전달하는 방법, 이벤트 처리 등에 대해서 알아본다.



Part 04. 리스트 뷰 혹은 테이블 뷰

수많은 개수의 정보를 표현하기 위해 애플리케이션은 리스트 뷰 UI를 활용한다. 리스트 뷰는 주로 수직 방향으로 동일한 수준의 수많은 정보를 나열해서 보여주는데 사용한다. 정보가 많아서 한 화면 이상으로 보여줘야 할 때 유용하게 사용할 수 있다. 여기에서는 리스트 뷰의 기본적인 동작 원리를 이해하고 뷰와 모델(데이터)을 연결하는 방법을 이해한다. 리스트 뷰의 모델을 보여주는 것 외에도 리스트를 수정하고 이를 반영하여 표현하는 방식을 이해한다.



Part 05. 사용자 인터페이스 디자인

애플리케이션은 수많은 버튼, 텍스트, 입력상자, 이미지 등의 사용자 인터페이스로 이루어진다. 화면의 모든 요소를 보통 뷰(View)라고 말하는데, 특히 자주 사용되고 사용자와 정보를 주고받는 뷰를 보통 컨트롤이라 부른다. 즉, 실제 물리적인 사용자 인터페이스를 소프트웨어로 모니터 안에 나타나도록 구현한 것을 컨트롤이라고 한다. 각 환경이 제공하는 UI 프레임워크와 뷰 혹은 컨트롤, 각 컨트롤의 기능에 대해서 알아본다. 컨트롤에는 어떤 종류가 있으며 어떻게 사용하는지 살펴보자.



Part 06. 파일과 데이터 관리

모바일 앱이 데이터를 저장하는 여러 가지 방법에 대해서 살펴본다. 모바일 앱이 저장해야 하는 데이터의 종류는 다양하다. 모바일 앱이 실행되는 다양한 플랫폼은 이러한 기능을 지원하기 위해 파일과 데이터 관리에 대한 여러 가지 API를 제공한다. 관리하는 데이터의 크기와 특성에 따라 사용하는 API 종류가 달라진다. 다양한 예제를 통해 여러 가지 형식의 데이터를 저장하고 관리하고 사용하는 방법을 살펴보기로 한다.



Part 07. 카메라와 이미지 활용하기

모바일 기기 대부분에 포함된 카메라 또는 저장한 이미지를 활용하는 방법을 살펴본다. 카메라로부터 사진을 입력받기 위해서는 일반적으로 SDK가 제공하는 카메라 액티비티 또는 뷰 컨트롤러를 호출하여 사용자가 사진을 찍도록 하고, 찍고 난 데이터를 반환받아 사용한다. 비슷한 방식으로 사진 앨범에 저장된 이미지를 불러오기 위해 SDK가 제공하는 API를 호출하여 사용자가 이미지를 선택하도록 하고 이를 반환받아 이용하게 된다.



Part 08. 웹 뷰 활용하기

웹 뷰는 애플리케이션에 포함시킬 수 있는 웹브라우저 뷰로 HTML 콘텐츠는 물론 Image나 PDF 콘텐츠를 표현할 수 있다. 보통 로컬 파일이나 외부 웹사이트의 URL을 파라미터로 전달하여 웹 뷰로 콘텐츠를 불러온다. 네이티브 앱만이 사용할 수 있는 섬세한 UI 작업이나 SDK의 수많은 기능과 웹 뷰만이 사용할 수 있는 HTML/CSS 기반의 UI 디자인을 적절히 결합시켜 각 기능의 장점을 살려 애플리케이션을 디자인할 수 있다. 여기에서는 웹 뷰의 기본 개념을 이해하고 활용하기 위한 기본적인 특성을 살펴본다. 또한, 네이티브(안드로이드, iOS) 앱과 웹 앱의 차이를 알아보고 그 차이점을 활용하는 방법까지 다뤄본다.



Part 09. 위치 정보와 지도 활용

모바일 기기에서 활용할 수 있는 위치 정보는 어떻게 가져올 수 있는지 살펴본다. 또, 위치 정보와 각 플랫폼에서 제공하는 지도를 결합하여 어떻게 활용할 수 있는지 이해한다. 안드로이드와 iOS에서 SDK가 제공하는 API를 사용하여 위치 정보와 지도 데이터를 쉽게 활용하여 애플리케이션을 작성할 수 있는지 알아본다.



Part 10. 데이터 바다를 향해 - 매시업 애플리케이션

매시업을 위한 OpenAPI 및 그 제공처를 살펴보며 개념을 이해한다. 데이터를 다루기 위한 XML 또는 JSON 활용법과 네트워크 전송을 위한 스레드 처리 방법을 알아본다. 정보의 공개는 공공 정보를 비롯하여 각 서비스 회사의 중요 데이터까지 점차 영역이 늘어 가고 있다. 정보가 공개된 몇 가지 서비스를 사용해 보면서 OpenAPI 데이터를 어떻게 활용할지 살펴볼 것이다. 추가적으로 외부의 데이터를 가져와서 사용할 때 발생할 수 있는 네트워크와 애플리케이션 UI 문제에 대해서도 살펴보기로 한다.



Part 11. 태블릿 애플리케이션

스마트폰의 경우 화면이 작기 때문에 최대한 한 화면에서는 하나의 주제만 나타내는데 집중하지만, 태블릿은 훨씬 화면이 넓기 때문에 하나의 주제만 나타내기에는 여백이 많이 생길 수도 있다. 이럴 때는 적절하게 화면을 분할하여 효율적으로 사용해야 한다. 하나의 애플리케이션을 HTML5, 안드로이드, iOS 각각의 환경에서 스마트폰과 태블릿 화면에 배치하기 적절한 화면 레이아웃 디자인 방법에 대해 예제를 통해 살펴본다.



Part 12. 모바일 앱/ 모바일 웹 앱 디자인

모바일 앱이나 모바일 웹 앱을 만들 때 고려할 점에 대해서 알아본다. 모바일 앱은 데스크톱 브라우저에서의 웹 앱이나 일반 애플리케이션과 무엇이 어떻게 다르고 그 차이를 모바일 환경에는 어떻게 적용해야 하는지 배워보자.

Part 1. 모바일 앱 개발 도구

SECTION 01 | 웹 애플리케이션 개발 도구

1. 추천 텍스트 편집기

2. 웹 브라우저의 개발 도구 기능

3. 브라우저에서 모바일 브라우저 화면 크기 흉내 내기

SECTION 02 | 안드로이드 개발 도구, SDK, 에뮬레이터

1. ADT 번들

2. 안드로이드 에뮬레이터

SECTION 03 | iOS 개발 도구, SDK, 시뮬레이터

1. XCode

2. Open Quickly

3. iOS 시뮬레이터

| Key Point |

1. 모바일 환경에서 HTML 5 기능 지원

2. 안드로이드 개발 번들

3. iOS 개발 환경과 대상 버전

4. 베타 버전



Part 2. 빠지면 섭섭한 Hello, World! 애플리케이션

SECTION 01 | MVC 패턴

SECTION 02 | HTML 5 프로젝트

1. DOCTYPE

2. HEAD

3. BODY

4. BODY 마지막 부분의 SCRIPT

SECTION 03 | 안드로이드 프로젝트

1. 새 프로젝트 만들기

2. 애플리케이션 매니페스트

3. 레이아웃

4. 액티비티 Part 1 - 뼈대

5. 액티비티 Part 2 - 모델 렌더링

6. 액티비티 Part 3 - 이벤트 처리

7. 최종 전체 액티비티 코드

8. 에뮬레이터로 실행

SECTION 04 | iOS 프로젝트

1. 새 프로젝트 생성

2. 프로젝트 정보와 빌드 타깃

3. 스토리보드

4. 애플리케이션 델리게이트

5. 뷰 컨트롤러 - 뼈대

6. 뷰 컨트롤러 - 이벤트, 액션, 아웃렛

7. 뷰 컨트롤러 - 모델 렌더링

8. 전체 뷰 컨트롤러 코드

9. 시뮬레이터로 실행

| Key Point |

1. MVC 패턴 적용

2. Advanced Tip - 엔트리 포인트



Part 03. 화면 흐름 디자인

SECTION 01 | 화면 흐름 설계

1. 화면 전환

2. 화면 전환의 의미

3. 뒤로 가기 및 스택

4. 전환과 데이터 전달

5. 다이얼로그

6. 화면 전환 애니메이션 효과

SECTION 02 | HTML 5 프로젝트

1. HTML 문서당 페이지 하나

2. HTML 문서 하나에 페이지 여러 개

3. 페이지 이벤트 처리

4. 페이지 전환 효과

5. 페이지 전환과 링크 특성

6. 파라미터 전달

7. 다이얼로그

8. 다이얼로그 선택 버튼에 따른 처리

SECTION 03 | 안드로이드 프로젝트

1. 액티비티 생성하기

2. 매니페스트로 액티비티 등록하기

3. 액티비티 전환 및 애니메이션

4. 액티비티 파라미터 전달

5. 다이얼로그 활용

SECTION 04 | iOS 프로젝트

1. 스토리보드를 사용한 화면 흐름 디자인

2. UIAlertView를 사용한 다이얼로그

3. iOS 뷰 컨트롤러 및 전환 관련 참고 자료

| Key Point |

1. 페이지 전환 및 페이지 관리 개념

2. 파라미터 전달 및 반환, 관련 이벤트

3. 다이얼로그 활용



Part 04. 리스트 뷰 혹은 테이블 뷰

SECTION 01 | 리스트 뷰 UI와 데이터

SECTION 02 | HTML 프로젝트 - 리스트 뷰

1. 다양한 리스트 아이템 UI 효과

2. 리스트 뷰를 활용한 입력 폼 디자인

3. 리스트 뷰 데이터 연결

4 리스트 뷰 아이템 수정 및 업데이트

SECTION 03 | 안드로이드 프로젝트 - ListView, ListActivity, 어댑터

1. ListView와 어댑터

2. ListActivity 및 문자열 배열 리소스

3. ListView 아이템 뷰

4. 사용자 정의 아이템 뷰 디자인

5. 어댑터 데이터 추가/삭제

SECTION 04 | iOS 프로젝트 - UITableView, UITableViewController

1. UITableView UI 및 데이터 연결

2. UITableViewCell 디자인

3. UITableViewController 및 터치 이벤트

4. 테이블 뷰 scrollToTop 프로퍼티

| Key Point |



Part 05. 사용자 인터페이스(UI) 디자인

SECTION 01 | 뷰, 컨트롤, 레이아웃

1. 뷰 계층구조

2. 기본 컨트롤

3. 주요 컨트롤

4. 레이아웃 - 배치와 정렬

5. 레이아웃 - 세로 화면(Portrait), 가로 화면(Landscape)

6. 컨트롤과 컨트롤의 데이터

SECTION 02 | HTML 5 - 뷰&UI 프로젝트

1. 문서를 위한 HTML vs 애플리케이션을 위한 HTML

2. HTML UI 기본 특성

3. 동적 UI 구성

4. jQuery Mobile 프레임워크를 사용한 애플리케이션 UI 구성

5. 애플리케이션 아이콘 & 스플래시

SECTION 03 | 안드로이드 뷰&UI 프로젝트

1. 기본 컨트롤

2. 주요 컨트롤

3. 레이아웃

4. UI 만드는 방법 - XML레이아웃 vs 코드

SECTION 04 | iOS 뷰&UI 프로젝트

1. UI 만드는 방법 - 인터페이스 vs 코드

2. 기본 컨트롤

3. 주요 컨트롤

4. 뷰 컨트롤러

5. iOS 버전별 레이아웃 디자인 주의 사항

| Key Point |



Part 06. 파일과 데이터 관리

SECTION 01 | 파일과 데이터를 관리하는 몇 가지 방법

SECTION 02 | HTML 5 - 데이터 저장 API

1. 쿠키를 활용한 데이터 관리

2. 로컬 스토리지를 활용한 데이터 관리

3. Indexed DB를 활용한 데이터 관리

SECTION 03 | 안드로이드 - 애플리케이션 데이터 관리

1. 파일 입출력

2. Preference 이용

3. SQLite 데이터베이스 이용

SECTION 04 | iOS - 데이터 저장 및 관리

1. 파일 접근

2. UserDefaults를 활용한 예제 - 로그인 정보 저장

3. SQLite 활용한 Todo 데이터 관리

4. CoreData 활용한 Todo 데이터 관리

| Key Point |



Part 07. 카메라와 이미지 활용하기

SECTION 01 | 이미지 선택과 메타데이터

SECTION 02 | 안드로이드 - 카메라와 이미지

1. UI 정의

2. 이미지 라이브러리에서 선택

3. 카메라에서 선택

4. EXIF 정보 보기

SECTION 03 | iOS - 카메라와 이미지

1. UI 정의

2. 이미지 앨범에서 선택

3. 카메라에서 선택

4. UIImagePickerController 델리게이트 - 이미지 출력하기

5. EXIF 정보 보기

| Key Point |



Part 08. 웹 뷰 활용하기

SECTION 01 | 네이티브 앱 + 웹 환경

1. 웹 뷰 기본

2. 웹 뷰 이벤트 처리(Client/Delegate)

3. 웹 뷰와 네이티브 앱 상호간 통신

SECTION 02 | 안드로이드 프로젝트

1. 웹 뷰 기본(WebView 프로젝트)

2. 웹 뷰 이벤트 처리(WebView 프로젝트)

3. 네이티브 앱 상호간 통신(WebViewEx 프로젝트)

SECTION 03 | iOS 프로젝트

1. 웹 뷰 기본(WebViewBasic 프로젝트)

2. 웹 뷰 이벤트 처리(WebViewBasic 프로젝트)

3. 네이티브 앱 상호 간 통신(WebViewEx 프로젝트)

| Key Point |



Part 09. 위치 정보와 지도 활용

SECTION 01 | 위치 정보와 지도 기본

1. 모바일 위치 정보 센서

2. 위치 정보 데이터 형식 및 수집 방식

3. SDK 제공 지도(맵 뷰) 활용

SECTION 02 | HTML 5 프로젝트

1. HTML 5 Geolocation API

2. 구글 지도 활용

3. 다음 지도 활용

4. 네이버 지도 활용

SECTION 03 | 안드로이드 프로젝트

1. 위치 정보 얻기 - Android Location API

2. 맵뷰 예제

3. 서드파티 예제

SEC.TION 04 | iOS 프로젝트

1. 위치 정보 얻기 - CoreLocation API

2. 지도 UI 활용 - MapKit API

3. 서드파티 지도 활용

| Key Point |



Part 10. 데이터 바다를 향해 - 매시업 애플리케이션

SECTION 01 | 공개 공유 데이터와 매시업으로 만드는 새로운 경험

1. OpenAPI와 공개 공유 데이터

2. JSON 및 XML 데이터 형식

3. 네트워크 데이터 전송과 UI 스레드

SECTION 02 | HTML 5 프로젝트 - 서울 열린 데이터를 활용한 매시업

1. 서울 열린 데이터 광장 서비스를 통한 공공 정보 활용하기

2. API 키 얻기

3. 화면 디자인

4. CrossDomain 문제와 해결책

5. JSONP

6. Access-Control-Allow-Origin 헤더

SECTION 03 | 안드로이드 프로젝트 - 구글 검색 매시업과 JSON 이용

1. 예제 애플리케이션 설계

2. AsyncTask 활용

3. JSON 형식의 데이터 활용

SECTION 04 | iOS 프로젝트 - 네이버 실시간 검색 API와 XML 이용

1. 예제 애플리케이션 설계

2. URLConnection 데이터 요청 및 스레드 처리

3. XML 데이터 처리

4. 데이터 전송 Indicator UI

5. GCD 스레드 처리

| Key Point |



Part 11. 태블릿 애플리케이션 디자인

SECTION 01 | HTML 5

1. 미디어 쿼리를 활용한 태블릿 페이지 디자인

2. JavaScript로 태블릿 확인하기

SECTION 02 | 안드로이드 태블릿 UI

1. 한정자를 활용한 레이아웃 디자인

2. 프래그먼트를 활용한 태블릿 레이아웃 디자인

SECTION 03 | iOS 태블릿 UI

1. 스플릿 뷰를 활용한 태블릿 레이아웃 디자인

| Key Point |



Part 12. 모바일 앱/ 모바일 웹 앱 디자인

SECTION 01 | 모바일과 데스크톱 환경 차이

1. 화면 크기

2. 터치스크린

3. 성능

4. 새로운 모바일 환경

5. 이용 행태 분석

SECTION 02 | 콘텐츠 구성

1. 콘텐트 먼저 배치

2. 사용자 중심 콘텐트 배치

3. 모바일 화면 디자인 고려 사항

SECTION 03 | 터치 친화 인터페이스 고려

1. 마우스 포인터가 아닌 손가락

SECTION 04 | 키보드 입력 고려

1. 입력 폼의 배치

2 입력 내용에 따른 반응형 키보드

SECTION 05 | 보기 편한 화면 디자인

이성환 저자 이성환은 1990년대 떠오르는 웹과 인포메이션 하이웨이 변화의 파도를 넋 놓고 바라보던 학생은, 어느새 자신도 모르게 웹 세상으로 깊숙이 빠져들었다. 웹 디자인으로 시작했지만 웹코더 작업을 통해 웹 개발을 이루는 다양한 기술 HTML/CSS/Javascript로 코딩 경험을 쌓고 전산학으로 대학원을 졸업하였다. 지금은 웹프론트엔드/웹백엔드/모바일 프로그래머로 활동 중이며, ALM, CI를 비롯한 다양한 프로젝트 자동화 도구들에 관심이 많다. 늘 배움을 즐기는 WEAVEUS 팀에서 GIT 버전 관리, Node.js, 다양한 WebMVC 프레임워크, IaaS, 빌드/배포 자동화 도구들, UX/UI에 대한 블로그 포스트 번역, 세미나 등을 진행하고 있다. <안드로이드 4 실무 바이블>, <프로 Git : 그림으로 이해하는 Git의 작동 원리와 사용법> 등의 책을 번역하였다.