course thumbnail
  • 프로그래밍
  • 초급

Only 자바스크립트로 구현하는 실전 하이브리드 앱

Only 자바스크립트로 구현하는 하이브리드앱 오프라인 강의! 단 6주 만에 to-do 앱이 아닌 실제 결제까지 가능한 퀄리티 높은 나만의 앱을 개발할 수 있습니다.

1기
22.03.06 ~ 22.04.10 (총 6회) 매주 일요일 14:00 ~ 18:00 (총 24시간)
  • 오프라인
  • LIVE
    온라인 라이브 (링크제공)

6주만에 구현하는 나만의 하이브리드 앱

only 자바스크립트로 네이티브앱과 웹앱의 한계를 극복하고
실제 서비스가 가능한 앱을 만들수 있습니다.


하이브리드 앱 개발 기초부터 쇼핑몰 페이지 및 기능 구현까지!

강의소개

단순 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앱 릴리즈용 빌드


커리어 성장으로 가는 길, 러닝스푼즈와 함께 하세요!

지금 보고 계시는 강의의 관련 태그로 다른 강의도 찾아보세요.

오프라인 LIVE

Only 자바스크립트로 구현하는 실전 하이브리드 앱

매일 선착순 20명 한정! 할인가 확인하고 커리어 성장하세요!