Do it! 프로그레시브 웹앱 만들기(Do it! 시리즈)

프런트엔드 개발자는 물론 웹 디자이너도 쉽게 배운다!
프로그레시브 웹앱부터 하이브리드 앱 개발 및 배포까지 한번에!
웹 전문가들은 "앞으로 웹은 프로그레시브 웹앱이어야 한다"라고 말합니다. 즉, 네이티브 앱보다 편리하게 설치하고 푸시 알림이 가능하며, 기기의 자원을 활용할 수 있고 오프라인에서도 실행되는 프로그레시브 웹앱이야 말로 모바일 퍼스트 시대에 웹의 미래라고 말합니다. 프로그레시브 웹앱은 성능이나 사용자 경험, 발견성, 개발 효율 면에서 기존 웹뿐만 아니라 네이티브 앱을 만들던 개발자에게도 충분히 매력적입니다.

이 책에서는 프로그레시브 웹앱을 만들고 하이브리드 앱으로 배포하는 방법을 다룹니다. 모던 웹 기술의 핵심을 쉽게 풀어내서 HTML과 자바스크립트의 기본만 알아도 완성된 웹앱을 만들 수 있습니다. 따라서 프런트엔드 개발자뿐만 아니라 웹 디자이너도 웹앱 만들기에 도전할 수 있습니다. 특히 소스를 한 줄 한 줄 세세하게 설명하는 부분에서, 잊을만 하면 한 번 더 떠오르게 해주는 친절함에서 독자를 향한 저자의 진정성을 느낄 수 있습니다.

====================
기초부터 실무까지 6가지 앱을 만들어 보자!
====================
이 책에서는 앱을 개발하고 운용할 때 가장 많이 사용하는 기능을 엄선해 6가지 프로그레시브 웹앱 프로젝트에 담았습니다. 또한 파이어베이스를 활용해 호스팅, 실시간 데이터베이스, 회원 인증 관리, 이미지 업로드 등을 적용하는 방법도 소개합니다. 다음 주소에서 독자 여러분이 만들 프로그레시브 웹앱을 미리 확인해 보세요.
1. 사진 갤러리: https://pwa-gallery-pic.web.app/
2. To-Do 리스트: https://pwa-to-do.web.app/
3. 카메라 사진 갤러리: https://pwa-camera.web.app/
4. 이메일-구글 인증 로그인: https://pwa-auth-login.web.app/
5. 푸시 알림 서비스: https://pwa-notification-push.web.app
6. 오프라인 동기화: https://pwa-offline-sync.web.app/

====================
뷰 & 뷰티파이를 이용한 모던 웹 개발과 디자인!
====================
이 책에서는 뷰와 뷰티파이로 멋진 UI를 적용한 PWA를 만듭니다. 모던 웹 애플리케이션의 큰 흐름인 싱글 페이지 앱(SPA, single page app)은 새로 고침이나 화면 간 이동에서 발생하는 성능 문제를 근본적으로 해결해 줍니다. SPA를 구현하려면 모던 자바스크립트(ES6 버전 이상)를 적용해야 하는데, 이때 자바스크립트 개발자에게 이미 익숙한 웹 기술을 그대로 활용할 수 있는 뷰(Vue.js) 프레임워크를 활용하면 더 유리하게 시작할 수 있습니다. 또한 뷰티파이도 사용합니다. 뷰티파이(Vuetify.js)는 앱을 제작할 때 구글의 공식 머티리얼 디자인 스펙을 적용해 주는 뷰 기반의 UI 라이브러리입니다.

====================
기본 태그만 알아도 쉽게 따라 할 수 있는 실습 구성!
====================
각각의 프로그레시브 웹앱 개발 프로젝트는 먼저 저자가 제공한 소스 파일을 실행해 확인하고, 이후에 직접 따라서 만들어 보는 순서로 진행합니다. 또한 CLI 환경에 익숙하지 않은 독자도 실습을 쉽게 따라 할 수 있도록 템플릿을 함께 제공합니다. 이 템플릿을 열어서 책에 표시한 단계를 따라 가면 누구나 쉽게 프로그레시브 웹앱을 만들 수 있습니다. 템플릿에는 전체 소스 코드는 물론 앱에 표시되는 이미지와 아이콘까지 모두 담았으므로 실습하기 전에 따로 준비해야 하는 번거로움이 없습니다.

====================
하이브리드 앱 만들고 구글 플레이에 배포까지 완벽하게 마무리!
====================
프로그레시브 웹앱은 웹에서 바로 설치할 수 있지만 앱 스토어에 올려서 내려받게 할 수도 있습니다. 이 책에서는 프로그레시브 웹앱에서 멈추지 않고 똑같은 코드를 안드로이드 앱으로 변환해서 구글 플레이에 등록하는 과정까지 세세하게 살펴봅니다. 이로써 앱을 만들고 배포하는 전 과정을 경험할 수 있습니다. 다음 주소에 접속하면 이 책에서 만든 프로그레시브 웹앱을 안드로이드 앱으로 변환해 구글 플레이에 등록해 둔 것을 확인할 수 있습니다. 안드로이드폰이라면 내려받아 설치할 수도 있습니다.
ㆍ https://play.google.com/store/apps/details?id=io.cordova.todo

★★★ 이 책에서 다루는 14가지 핵심 주제 ★★★
1. 모던 자바스크립트 ES6+의 필수 기능 || 2. 뷰, 뷰티파이 기초 & 고급 ||
3. 구글 머티리얼 디자인 스펙 2 || 4. 반응형 웹 프로그래밍 ||
5. 파이어베이스 실시간 DB || 6. 워크박스 런타임 캐시 ||
7. 모바일 하드웨어 제어 || 8. 이메일-구글 인증 || 9. 푸시 알림 ||
10. 오프라인 동기화 || 11. 아파치 코르도바로 하이브리드 앱 만들기 ||
12. PWA → 네이티브 앱 변환 || 13. 구글 플레이 스토어에 배포 || 14. 서버리스 프로그래밍

★★★ 책을 먼저 읽어 본 베타테스터의 한마디 ★★★
저는 프론트앤드 개발자로 일하고 있습니다. 뷰를 이용해 웹 화면을 구축해 본 적은 있지만, PWA와 하이브리드 앱을 제작한 경험은 처음이었습니다. 이 책을 읽으며 예제를 쭉 따라 하다 보니, 어느샌가 멋진 앱을 제작하고 있는 제 자신을 보았습니다. 실제 앱 제작에 필요한 모든 것이 한 권에 압축된 느낌이었습니다. 웹을 다뤄 본 경험이 있다면 이 책만으로도 자신이 원하는 앱을 손쉽게 만들 수 있습니다. 강추합니다!
- 배으뜸(프런트엔드 개발자)

이 책은 PWA 기본 개념과 개발에 필요한 ES6 문법, 뷰와 뷰티파이 프레임워크로 PWA를 좀 더 쉽게 배울 수 있습니다. 다양한 실전 예제로 PWA를 익힐 수 있으며 개발부터 배포, 테스트 방법까지 입문자가 실습할 수 있게 잘 구성되어 있습니다. 웹 개발 기술을 활용해 프로그레시브 웹앱을 구현하는 방법을 배우고 싶다면 좋은 입문서가 될 것입니다.
- 이석곤(15년차 개발자)

ㆍ 네이티브 앱과 모바일 웹앱, 그리고 프로그레시브 웹앱까지 구분과 장단점이 잘 설명되어서 좋았어요.
ㆍ 개발 환경을 준비하는 과정이 단계별로 잘 설명되어 있어서 어렵지 않게 진행할 수 있었어요.
ㆍ 일단 두 가지는 확실하게 얻고 갑니다. 서비스 워커와 매니페스트! (PWA의 핵심이라죠?)
ㆍ 뷰티파이에 대해 처음 알았는데 특징을 잘 설명하고 있어 빨리 이해할 수 있었어요.
ㆍ 뷰티파이를 이용할 때 상태 관리와 라우터 등의 기능을 조금 더 심도 있게 다뤄서 좋았습니다.
ㆍ Vuex 구조 그림이 좋았어요. 실무에서 꼭 쓰이는 로그인 연동을 세세하게 설명해서 좋았어요.
ㆍ Vuex, 라우터 등 뷰의 고급 기능을 실제 프로그램에서 어떻게 사용하는지 코드로 이해는 것이 좋았습니다.
ㆍ To-Do 앱에서 CRUD의 전 과정을 다뤄서 좋았습니다.
ㆍ 카메라 설정과 워크박스 런타임 캐시 설정이 자세하여 좋았어요.
ㆍ 파이어베이스는 신의 한 수였어요. 실전처럼 느껴졌어요. 파이어베이스만 다룬 책이 없는데 기대 이상입니다.
ㆍ 플리커 같은 나만의 앱을 만들 수 있는 예제가 실용적이어서 좋았습니다.
ㆍ ngrok로 외부에서 로컬 주소로 테스트할 수 있는 방법을 배워서 좋았습니다. 오~ 놀라워요. 엄청 자주 쓸 듯!
ㆍ 특히 앱을 만들어서 파이어베이스에 호스팅과 배포하고 성능 테스트하는 방법까지 배울 수 있어 전체 흐름을 이해하기에 좋았습니다.
ㆍ 구글 플레이 스토어에 앱을 등록하는 절차까지 자세하게 알려줘서 좋았어요.

★★★ 이런 사람이 읽으면 좋아요 ★★★
ㆍ HTML, CSS, JavaScript 등으로 기본적인 웹 페이지를 만들어 본 경험은 있어야 해요.
ㆍ ES6+ 자바스크립트를 사용할 줄 알면 좋지만, 이 책의 02장에서 핵심을 요약해서 다루니 문제 없어요.
ㆍ 뷰와 뷰티파이를 사용할 줄 알면 좋지만, 이 책의 04~07장에서 핵심적으로 다루니 문제 없어요.
ㆍ 웹 프런트엔드 개발자가 자바나 코틀린, 스위프트를 배우지 않고 모바일 앱을 만들고 싶을 때 좋아요.
ㆍ 생산성을 높이면서도 성능은 포기할 수 없는 모바일 앱 개발자에게 도움이 돼요.
ㆍ '디자인' 중심에서 '설계' 중심으로 전환하려는 웹 디자이너도 충분히 따라 할 수 있어요.
ㆍ 모던 웹 기술과 모바일 대응 전략에 관심이 있는 웹 기획자, 프로젝트 매니저(PM), 프로덕트 오너(PO) 등이 읽어도 좋아요.

★★★ 독자 학습 지원 ★★★
이지스퍼블리싱에서 운영하는 '두잇 스터디룸'에서 이 책을 읽는 친구들과 함께 공부해 보세요. 스스로 일정을 계획하고 스터디 노트를 작성하면 선물로 다른 책을 보내드려요.
ㆍ 두잇 스터디룸: cafe.naver.com/doitstudyroom

이 책의 전체 실습 파일은 이지스퍼블리싱 홈페이지 자료실 또는 저자가 운영하는 커뮤니티 카페에서 내려받을 수 있어요. 커뮤니티 카페에서는 질의 응답과 웹앱 개발 관련 최신 소식도 얻을 수 있어요.
ㆍ 이지스퍼블리싱 홈페이지: www.easyspub.co.kr
ㆍ CODE*DESIGN 웹앱: code-design.web.app

머리말
이 책의 구성
베타테스터의 한마디

====================
첫째마당 프로그레시브 웹앱 시작하기
====================
[01] 헬로! 프로그레시브 웹앱
01-1 프로그레시브 웹앱이 뭐예요?
01-2 프로그레시브 웹앱을 대표하는 6가지 핵심 기술
01-3 비주얼 스튜디오 코드 설치하기
01-4 '안녕하세요' 예제 만들기

[02] 모던 자바스크립트 꼭 필요한 것만 배우기
02-1 재활용할 수 있는 블록 함수
02-2 변수 선언
02-3 화살표 함수
02-4 모듈 내보내기와 가져오기
02-5 콜백 함수와 비동기 처리 방식
02-6 JSON과 Fetch API
02-7 Promise와 비동기 처리 방식
02-8 await 연산자와 async 비동기 함수
미션 코딩! 입력된 숫자의 범주 판별하기

[03] 순수 자바스크립트로 PWA 만들기
03-1 '안녕하세요! PWA by JS' 구경하기
03-2 매니페스트 작성하기
03-3 메인 화면 작성하기
03-4 서비스 워커 만들고 실행하기
미션 코딩! 캐시 변경하고 서비스 워커 다시 등록하기

====================
둘째마당 프레임워크로 PWA 손쉽게 디자인하기
====================
[04] 뷰 기초 쌓기
04-1 뷰, 자바스크립트 프레임워크의 절대 강자
04-2 '안녕하세요!' 예제 만들기
04-3 단방향 바인딩과 v-bind 디렉티브
04-4 양방향 바인딩과 v-model 디렉티브
04-5 조건 판단과 v-if, v-else 디렉티브
04-6 반복문과 v-for 디렉티브
04-7 이벤트 핸들러 실행과 v-on 디렉티브
미션 코딩! v-for 디렉티브로 고객 정보 출력하기

[05] 뷰 고급 기능 익히기
05-1 복잡한 로직과 computed 속성
05-2 이벤트 핸들러 로직과 methods 속성
05-3 컴포넌트로 HTML 엘리먼트 만들기
05-4 컴포넌트 속성 props
05-5 상탯값 관리와 Vuex
05-6 내비게이션과 라우터
05-7 새로 고침이 필요 없는 SPA 만들기
미션 코딩! 카운터 컴포넌트 프로그램 만들기

[06] 뷰티파이 기초 쌓기
06-1 뷰티파이, 뷰 최고의 UI 프레임워크
06-2 기본 레이아웃 만들기 1
06-3 기본 레이아웃 만들기 2
06-4 카드 UI 만들기
06-5 그리드 기본 원리
06-6 반응형 그리드
06-7 리스트와 아이콘 사용법
미션 코딩! 플로팅 버튼 UI 컴포넌트 넣기

[07] 뷰티파이 고급 기능 익히기
07-1 바닥 내비게이션
07-2 탐색 서랍
07-3 라우터로 멀티 페이지 관리하는 SPA 만들기
07-4 Vuex로 상탯값 관리하는 SPA 만들기
미션 코딩! 매개변수만으로 상탯값 관리하기

[08] 뷰 프레임워크로 PWA 만들기
08-1 '반가워요! PWA by VueJS' 구경하기
08-2 프로젝트 만들고 매니페스트 작성하기
08-3 워크박스로 오프라인 관리하기
08-4 앱 실행 화면 만들기
08-5 HTTPS로 파이어베이스 호스팅에 PWA 배포하기
08-6 PWA 성능 테스트하기
미션 코딩! 기본 레이아웃을 적용한 앱 만들어 배포하기

====================
셋째마당 PWA 실전 앱 만들기
====================
[09] To-Do 앱 만들기
09-1 To-Do 앱 구경하기
09-2 매니페스트 작성하기
09-3 워크박스로 오프라인 관리하기
09-4 파이어베이스 실시간 DB 준비하기
09-5 앱 실행 화면 만들기

[10] 사진 갤러리 앱 만들기
10-1 사진 갤러리 앱 구경하기
10-2 매니페스트 작성하기
10-3 워크박스로 런타임 캐시 관리하기
10-4 앱 실행 화면 만들기
10-5 모바일 기기에서 로컬 사이트 테스트하기

[11] 카메라 사진 갤러리 앱 만들기
11-1 카메라 사진 갤러리 앱 구경하기
11-2 매니페스트 작성하기
11-3 파이어베이스 스토리지 DB 준비하기
11-4 앱 실행 화면 만들기
11-5 컴포넌트 작성하기
11-6 워크박스로 서비스 워커에서 캐시 관리하기

[12] 구글 로그인 서비스 만들기
12-1 구글 로그인 서비스 구경하기
12-2 매니페스트 작성하기
12-3 파이어베이스 인증 사용하기
12-4 앱 실행 화면 만들기
12-5 스토어 작성하기
12-6 컴포넌트 작성하기

[13] 푸시 알림 서비스 만들기
13-1 푸시 알림 서비스 구경하기
13-2 매니페스트 작성하기
13-3 파이어베이스 준비하기
13-4 앱 실행 화면 만들기
13-5 컴포넌트 작성하기
13-6 파이어베이스 서버 함수 작성하기
13-7 워크박스로 서비스 워커에서 알림 메시지 받기

[14] 오프라인 동기화 기능 만들기
14-1 오프라인 동기화 구경하기
14-2 매니페스트 작성하기
14-3 클라우드 파이어스토어 준비하기
14-4 앱 실행 화면 만들기
14-5 컴포넌트 작성하기

====================
넷째마당 PWA를 하이브리드 앱으로 배포하기
====================
[15] 코르도바로 하이브리드 앱 만들기
15-1 하이브리드 앱이란?
15-2 하이브리드 앱 실전 예제 5가지
15-3 'Hello Hybrid' 앱 만들기 - 준비
15-4 'Hello Hybrid' 앱 만들기 - 제작
미션 코딩! 사진 갤러리 안드로이드 앱 만들기

[16] 웹앱을 안드로이드 앱으로 만들기
16-1 To-Do 안드로이드 앱 만들기
16-2 아파치 코르도바 플러그인 사용하기
16-3 모바일 기기 상태를 체크하는 안드로이드 앱 만들기
미션 코딩! 카메라 사진 갤러리 안드로이드 앱 만들기

[17] 구글 플레이 스토어에 앱 등록하기
17-1 안드로이드 앱 번들 준비하기
17-2 구글 플레이 스토어에 앱 등록하기

찾아보기

김응석 교수이기 전에 개발 팀장과 기술 이사로 IT 산업 현장을 경험한 전문가다. 전국 100여 개 대학에서 강의 교재로 채택된 도서를 집필한 IT 전문 저술가이기도 하다. 한양대학교에서 컴퓨터공학을 전공한 후 같은 대학원에서 멀티미디어를 공부했다. 인문학과 예술이 정보기술과 결합될 때 놀라운 창조력이 나올 수 있음에 매료되어 숭실대학교 대학원에서 미디어 아트로 박사 학위를 받았다. 현재 안산대학교 멀티미디어디자인과에서 정보디자인, 웹 UI/UX 디자인을 가르치고 있다. 교수들에게 학습방법론을 지원하는 교수학습지원센터장과 융복합 교육과정 정책위원을 역임하며 가르치고 배우는 방법을 연구하고 있다. 프로그레시브 웹앱 개발과 UI/UX 디자인을 위한 'CODE*DESIGN 웹앱(code-design.web.app)' 커뮤니티 카페에서 모던 웹앱 개발과 디자인 방법을 안내하는 데 힘쓰고 있다.

저서로는 《Do it! 쉽게 배우는 웹앱 & 하이브리드앱》, 《구글 완전 활용법》, 《新 한글 비주얼 베이직 6》, 《안녕하세요 터보C》, 《안녕하세요 컴퓨터 길라잡이》 등이 있다.