하이브리드 앱 개발 기초부터 쇼핑몰 페이지 및 기능 구현까지!
강의소개
단순 to-do 앱을 넘어 서비스 배포까지 진행하는 실전 하이브리드 앱 개발!
01. 웹앱과 네이티브 앱의 한계를 극복한 하이브리드앱
카메라 등 스마트폰 고유 기능을 사용할 수 없고 앱의 성능 등 다양한 제약이 많은 웹앱.
운영체제 별로 다른 언어를 사용하여 러닝커브가 높고, 비용과 시간이 많이 소요되는 네이티브 앱.
한번의 하이드리앱 개발로 모든 플랫폼에서 작동 가능한 앱을 구현할 수 있습니다.
02. 한번에 빠르고 쉽게 제작 가능한 하이브리드앱
안드로이드 앱과 iOS 앱을 각각 따로 제작하는 데에 어려움을 겪으시나요? 웹 개발 언어로 앱까지도 만들어보고 싶으신가요? 오직 자바스크립트로 단 6주만에 나만의 앱을 출시할 수 있습니다.
03. 단순 기능이 아닌 실제 서비스 적용이 가능한 하이브리드앱.
단순 To-do 앱을 넘어 실제 결제까지 가능한 수준의 퀄리티 높은 쇼핑몰 앱을 구현할 수 있습니다. 뿐만아니라, 트래픽을 확인할 수 있는 GA 적용 방법까지 빠짐 없이 알려드립니다.
온라인 강의 무료 제공
잠깐! 먼저 수강해야하는 온라인 강의가 있어요.
해당 분야에 대한 기초 지식이 부족하다면? 꼭 이 강의를 수강해야 해요!
본 강의에서
무엇을 얻어갈 수 있나요?
약 1,000개의 앱을 출시한 하이브리드 앱 전문 개발자와 함께하세요.
-
실제 서비스 기반
5가지 핵심 기능
결제 기능, SNS 로그인, 본인 인증, 푸시 수신 허용/거부, 애드몹 적용.
온라인 강의에 없는 실제 서비스에 초점을 맞춘 핵심 5가지 기능을 학습합니다.
-
로그 및 트래픽 조회
구글 애널리틱스 적용
앱 설치자 수 및 활성 사용자 수 집계/조회부터 메뉴/기능 별 사용자의 이용/접속 로그기록/조회까지!
모바일 앱에 필수적인 기능 요소들을 적용한 하이브리드 앱을 만들 수 있습니다.
-
앱 개발 전문가의
핵심 노하우
쇼핑몰, 부동산, 학원, 여행, 채팅, 보험, SNS, B2B, B2C 등 대기업 내 다수의 프로젝트를 진행하신 하이브리드 앱 개발 CTO의 실무 노하우를 전수해드립니다.
22년차 개발자에게 배우는
하이브리드 앱 제작 A to Z, 6주만에 완성하세요!
본 강의가 특별한 이유는
무엇인가요?
1. 사용자에게 가치 있는 앱 개발을 위한 노하우
강사님의 20년 이상의 앱개발 경험에 기반한, 모바일 기술의 트렌드와 가치있는 모바일 앱 개발에 대해 다양한 스킬 및 노하우를 얻을 수 있습니다.
2. 실제 수익을 창출할 수 있는
애드몹 적용
앱에 광고를 심어 수익을 창출하는 구글 애드몹 설명을 진행합니다. 실제 강의에서 만든 앱을 활용하여, 배너광고와 전면광고를 적용하고 광고수익을 확인하는 방법까지 확실히 배울 수 있습니다.
3. 한 번의 개발로 모든 플랫폼에서 작동
안드로이드 앱과 iOS 앱을 따로 개발할 필요 없이 한번의 개발로 쉽고 빠르게 모든 운영체제에서 작동하는 앱을 구현할 수 있습니다.
수강 대상
이런 분들은 꼭 들으셔야 해요!
자바스크립트로 나만의 앱을 만들고 싶은 분
실제 결제까지 가능한 퀄리티 높은 앱을 개발하고 싶은 분
앱 개발 언어를 배우기엔 시간이 없고 빠르게 앱을 개발해야 하는 분
강사소개
우리 강사님을 소개할게요!
황창근
이력사항
- (현) (주)옐로우윈 대표직 및 CTO
- (전) SK엠앤서비스 플랫폼사업팀 근무
- (전) 브이엘씨 온라인 교육 사업 시스템팀 근무
기타 이력
- 플랫폼 비즈니스 자체사업 및 외주개발/운영, 모바일/웹 서비스 개발
- SK플래닛, SK네트웍스등 SK계열사 및 현대/기아자동차, 여러 관공서 프로젝트
- SK Telecom 웹/모바일 플랫폼 다수 제작
- 대규모 웹프로젝트 경험(SKT,현대/기아등 대기업 및 관공서등)
커리큘럼 (6)
-
1주차. 하이브리드앱 패키징 개요
0) 하이브리드앱의 개요
(이론)
- 하이브리드앱의 이해
- 하이브리드앱 개발진행 과정
(실습)
- 개발환경 세팅(cordova, xcode, android studio 설치 및 경로 세팅)1) 신규 프로젝트 생성 및 테스트앱 빌드
(이론)
- 신규 프로젝트 생성과정
- 프로젝트 폴더구조 이해
(실습)
- android,ios 앱생성 및 빌드
- cordova 기본 명령어 사용2) 네이티브 기능을 적용하는 방법
(이론)
- cordova 플러그인 검색 및 적용 방법
(실습)
- 네이티브기능의 플러그인 적용/실습
- iOS앱 빌드 및 시뮬레이터로의 실행(x-code의 기본메뉴/기능 이해)3) 인앱브라우져 적용 및 서비스 구동로직 이해하기
(이론)
- 인앱브라우져의 이해
- 인앱브라우져의 이벤트 사용
(실습)
- 인앱브라우져 적용/실행
- 인앱브라우져의 이벤트사용
- 안드로이드 백버튼 종료메세지 팝업
- 아이폰X 이상의 디바이스 상/하단 대응소스 적용
- URL예외처리 소스 적용
- 안드로이드 로딩스피너 적용* 예습 및 과제
- 기타 적용하고 싶은 플러그인 찾아보고 적용해보기
-
2주차. 웹과 앱의 연동 및 앱의 기능 구현
0) 웹과 앱의 통신 및 연동 방법
(이론)
- 웹과 앱의 연동 방법 이해
(실습)
- 웹에서 앱으로 데이터 전달하기
- 앱에서 웹으로 데이터 전달하기1) 앱아이콘과 스플래시스크린 이미지 적용
(이론)
- 앱아이콘, 스플래시스크린 사이즈 규격정보 이해
(실습)
- 앱아이콘, 스플래시스크린 적용2) 하단툴바 메뉴 적용
(이론)
- 안드로이드와 iOS앱의 하단툴바메뉴 적용방법 이해
(실습)
- 하단툴바메뉴 네이티브 플러그인 적용 및 네이티브코드수정(java,Objective-c)
- 메뉴별 연결UI 적용
- iOS앱은 시뮬레이터로 확인하기3) iOS앱 인증서 생성 및 적용
(이론)
- iOS앱 개발을 위한 개발자 계정등록 과정
- 인증서/프로파일 적용 및 배포 과정
(실습)
- CSR 생성 및 인증서 세팅
- 테스트 디바이스 등록 및 프로파일 생성/배포 과정
- xcode를 사용한 테스트앱 설치* 예습 및 과제
- 쇼핑몰 html 샘플 페이지 만들어오기 (로그인,회원가입,상품목록,왼쪽슬라이드메뉴) : 기 만든 소스코드 이용
- 카카오 계정 준비(개발자 사이트 가입)
- cordova-plugin-kakao-sdk 플러그인 정보 참고 -
3주차. 쇼핑몰 페이지 및 앱의 기능 구현
0) 쇼핑몰 html 페이지 적용
(이론)
- 네이티브 기능과 연동을 위한 샘플 웹페이지 구성 및 이해
(실습)
- html + javascrip + css 를 사용한 샘플 웹페이지 만들기 : 기 만든 소스코드 이용
- 로그인화면,회원가입,메인화면(상품목록), 왼쪽슬라이드화면, 상품상세화면, 장바구니화면, 결제하기화면
- 화면/메뉴별 연결UI 적용 및 확인1) 카카오 로그인 기능 적용
(이론)
- 카카오로그인 적용을 위한 방법 이해
(실습)
- 카카오개발자사이트에서 어플리케이션 생성하기
- cordova 카카오로그SDK로 SNS로그인 기능 적용하기
- 카카오 인증 이후 회원가입 화면 표시
- 안드로이드앱과 iOS앱에서 잘 되는지 확인2) 본인인증 기능 적용
(이론)
- 다날에서 제공되는 본인인증 기능 적용 방법 및 과정 이해
(실습)
- 네이티브 뷰를 사용한 본인인증 기능 적용(iamport-cordova 플러그인 사용)3) 결제기능 적용
(이론)
- 결제 PG사 종류 및 모바일 앱에 걸제기능 적용을 위한 방법 및 이슈사항 이해
(실습)
- iamport-cordova 플러그인 적용
- 아임포트 회원가입 및 결제개발가이드를 사용한 결제기능 적용(테스트결제모드 적용)
- android,ios앱 결제앱 스킴명 적용* 예습 및 과제
- 네이버 로그인 적용해보기(cordova-plugin-naver-sdk)
- 푸시알림기능 : 원시그널 사이트(https://onesignal.com) 회원가입 및 onesignal-cordova-plugin 플러그인 정보 조사 -
4주차. 푸시 알림 및 팝업뷰 적용
0) *과제체크 : 네이버로그인 적용과정 설명
1) 안드로이드 푸시 서비스 적용
(이론)
- 푸시솔루션의 적용방법 및 이해
(실습)
- FCM설정 및 원시그널 푸시솔루션 적용/이용 방법
- 푸시메세지 발신/확인
- 상품결제 완료시 결제완료 안내 푸시알림 적용해보기2) iOS 푸시알림 서비스 적용
(이론)
- 푸시인증서 생성 및 배포과정 이해
(실습)
- apns 푸시 인증서 키체인에 등록
- apns 인증서 배포 및 원시그널에 등록
- URL 예외처리, iOS앱 설정작업
- 실제 디바이스로 실행/테스트3) 설정 팝업뷰 적용
(이론)
- 안드로이드앱과 iOS앱에서의 팝업뷰를 띄우고 내리는 기능 적용과, 상단 타이틀바 생성 및 아이콘 메뉴 적용
(실습)
- 팝업뷰 cordova 플러그인 적용
- 상단 타이틀바 영역 커스터마이징(백버튼 메뉴아이콘 및 타이틀바등 옵션 적용) -
5주차. 테스트앱 배포 및 구글 애드몹 적용
0) 푸시알림 설정/목록 팝업뷰 적용
(이론)
- 푸시알림 수신 허용 / 거부 API사용 / 연동 방법 및 알림목록 표시에 대한 이해
(실습)
- 푸시 수신 허용/거부 토글UI적용(html+javascript+css) 및 원시그널 API를 사용한 푸시알림 수신/거부 설정 기능
- 알림 목록 표시(html+javascript+css)1) 안드로이드,iOS앱 테스트앱 배포
(이론)
- 안드로이드앱의 apk 빌드 및 웹서버 업로드
- iOS앱의 adhoc 방식의 빌드/배포 과정 이해
(실습)
- iOS앱의 adhoc 방식의 빌드 및 배포(plist,ipa 연결)
- 앱파일의 다운로드 html 생성2) 구글 애드몹 적용
(이론)
- 구글 애드몹 설정 및 적용 과정의 이해
(실습)
- cordova의 애드몹 플러그인 적용
- 배너광고 및 전면광고 적용해보기
- 광고 수익 확인방법 -
6주차. GA 적용 방법 안내 및 스토어 출시
0) 구글 애널리틱스 적용
(이론)
- 구글 애널리틱스 적용범위 및 사용방법 이해
(실습)
- cordova의 애널리틱스 플러그인 적용
- 서비스의 기능/메뉴 사용에 대한 이벤트 로그 적용(로그인, 메뉴별 사용로그)1) 스토어 출시진행의 방법
(이론)
- 스토어 출시과정 이해 및 심사정책에 대한 주의사항
- 기존 앱 출시/리잭 사례에 대한 정보
(실습)
- 안드로이드앱의 키스토어생성 및 릴리즈용 빌드
- iOS앱 릴리즈용 빌드
커리어 성장으로 가는 길, 러닝스푼즈와 함께 하세요!
지금 보고 계시는 강의의 관련 태그로 다른 강의도 찾아보세요.