모바일 앱 기초 교육

1. Mobile APP 개발 기초
널리소프트 김학길

2. 강사 소개
김학길
현) 널리소프트 CTO, 수석개발자
- 테스트 도구 “시그널파이어” 개발
- 프레임워크 “제이넛” 개발
전) 웹케시 프레임워크팀
- JexFrame Core 개발
- 기업은행 기업스마트뱅킹 프레임워크 지원
- 우리은행 스마트오피스 프레임워크 지원
- 대구은행 스마트 뱅킹 프레임워크 지원
- 전북은행 차세대 인터넷뱅킹 프레임워크 지원
- 새마을금고중앙회 스마트뱅킹 프레임워크 지원
- 씨티은행 통합 인터넷뱅킹 프레임워크 지원
- 신협중앙회 스마트 뱅킹 프레임워크 지원

3. 진행 순서
1.모바일 앱의 개념
2. 네이티브 앱 개발 상세
3. 웹 앱 개발 상세
4. 하이브리드 앱 개발 상세
5. 모바일 앱 개발시 특이점

4. 제 1 장
모바일 앱의 개념

5. 모바일 앱 개발 방식의 종류
네이티브 앱 (NativeApp)
웹 앱 (WebApp)
하이브리드 앱 (HybridApp)

6. 네이티브 앱 - 정의
순수하게 iOS /Android OS에서 제공하는 SDK를 이용하여 제작
iOS는 xcode를 활용하여 Objective-C, swift로 제작
Android는ADT(Android Developer Tools)를 활용하여 java로 제작
Native Code
Device API

7. 네이티브 앱 - 장점
빠른 성능 (실행 속도)
OS 별 최적화
조작감
스마트폰의 모든 기능을 활용
(Push, GPS, 카메라 등)
섬세한 UI 표현이 가능
Native Code
Device API

8. 네이티브 앱 - 단점
비싼 개발 비용- iOS,Android 개발자 각각 필요
개발자 스킬에 따라 앱의 품질이 좌우됨
OS별로 소스코드를 이중 관리
소스 변경시 반영의 어려움
- 사소한 수정도 마켓플레이스 이용
- iOS와Android의 반영 시간 차이로 인해
서버 반영 의 부담 증가
Native Code
Device API

9. 웹 앱 - 정의
웹 기술을 이용하여 제작한APP
웹 페이지를 모바일에 최적화하여 제작
HTML, CSS, javascript 기술을 활용
Mobile Browser
Web Code

10. 웹 앱 - 장점
저렴한 개발 단가 (웹개발자만 있으면 됨)
빠른 배포 (수정시 바로 적용)
이중 관리 문제 없음(One Source Multi-use)
개발자 수급이 비교적 용이
많은 오픈 라이브러리 활용 가능
Mobile Browser
Web Code

11. 웹 앱 - 단점
디바이스의 고유 기능을 활용하기가 어려움
(카메라, GPS, PUSH 등)
네트워크 트래픽 비용의 증가
(Html, Javascript 등의 다운로드)
성능 이슈
(다운로드 시간 + Javascript 엔진 성능)
불편한 조작감, 느린 반응속도(0.3초 이슈)
복잡한 UX 개발이 어려움
Mobile Browser
Web Code

12. 언리얼 엔진

13. 하이브리드 앱 - 정의
네이티브 기술과 웹 기술을 혼합하여 제작
기본이 되는 컨테이너 앱은 네이티브로 제작하고, 사용자가 조작
하게 될 앱은 웹 기술로 제작
네이티브는 필요한API를 만들고, 웹에서는 Javascript로 디바이스
API를 호출 Native Container
Web Code
Device API

14. 하이브리드 앱 - 장점
네이티브 보단 저렴한 개발 단가
웹 앱의 장점을 대부분 수용
빠른 배포, One Source Multi-use, 개발자 수급, 오픈 라이브러리 활용
디바이스API 사용 가능
정적 파일의 캐시 - 웹 앱보다 빠른 성능
잘하면 네이티브 수준의 퀄러티 가능
Native Container
Web Code
Device API

15. 하이브리드 앱 - 단점
네이티브 앱보다 쾌적하지 않음
* 페이스북이 하이브리드 기반에서 네이티브로 전환한 예
네이티브 개발자(iOS,Android)가 필요함
Native Container
Web Code
Device API

16. 모바일 앱 개발 방식 정리
Native Code
Device API
Mobile Browser
Web Code
Native Container
Web Code
Device API
네이티브 앱 웹 앱 하이브리드 앱
게임 앱에 적합 금융권 앱에 적합홈페이지 앱에 적합

17. 안드로이드 어플리케이션
• 리눅스 커널 기반의 모바일용 OS
• 구글에서 안드로이드사를 인수하여 개발
• 2007년 11월 안드로이드 1.0 VersionAlpha 출시
• 최신버전은 6.0 Version - Marshmallow
• 완전 개방형 플랫폼
• 안드로이드 마켓(Google Play Store) 에서 어플
리케이션을 거래

18. 안드로이드 어플리케이션 구조
Application
Activity
View
View
View
Service
Content Provider
BroadCast Receiver

19. Application
안드로이드 앱 자체
앱 구동과 종료에 대한 이벤트를 활용하거나, 앱에
대한 정보에 접근하기 위해Application Conext를 활용
Application
Activity
View
View
View
Service
Content Provider
BroadCast
Receiver

20. Activity
하나의 화면을 구성하는 단위
안드로이드 앱을 개발한다는 것은Activity를 만드는 일
Activity에 View라는 컴포넌트를 그려서 화면을 구성
Application
Activity
View
View
View
Service
Content Provider
BroadCast
Receiver

21. View
화면을 구성하는 Inputbox나 button 등의 단위를 View라고 함
View는 View Group으로 묶을 수도 있음
하이브리드 앱의 경우에는 WebView를 사용
Application
Activity
View
View
View
Service
Content Provider
BroadCast
Receiver

22. Service
안드로이드 백그라운드에서 작동
예) 뮤직플레이어
디바이스의 리소스 점유
Application
Activity
View
View
View
Service
Content Provider
BroadCast
Receiver

23. Content Provider
앱들 간에 데이터를 공유할때 사용
Application
Activity
View
View
View
Service
Content Provider
BroadCast
Receiver

24. Broadcast Receiver
PUSH, SMS, NFC 등의 이벤트를 수신
Application
Activity
View
View
View
Service
Content Provider
BroadCast
Receiver

25. 안드로이드 Activity 생명주기

26. iOS 어플리케이션
• 애플사에서 개발한 모바일용 OS
• iPhone OS라고도 함
• 오직 애플의 하드웨어만을 위한 OS
• 2007년 9월 최초 공개
• 최신버전은 2015년 9월 공개된 iOS9
• 애플사의 App Store에서만 어플리케이션 다운
가능

27. iOS 어플리케이션 구조
App Delegator
View Controller
View
View
View

28. App Delegator
어플리케이션의 위임자
App Delegator
View Controller
View
View
View

29. View Controller
App Delegator
View Controller
View
View
View
하나의 화면을 구성하는 단위
View Controller 에 View라는 컴포넌트를 그려서 화면
을 구성

30. View
App Delegator
View Controller
View
View
View
화면을 구성하는 Inputbox나 button 등의 단위를 View라고 함
View는 View Group으로 묶을 수도 있음
하이브리드 앱의 경우에는 UIWebView를 사용

31. iOS 어플리케이션 생명주기

32. 생명주기 비교

33. 제 2 장
네이티브 앱 개발 상세

34. Android 개발 시연
1. Android 어플리케이션 생성
2. Eclipse에서Application생성
3. Activity 그리기
4. Activity 관리자에서 화면 그리기
5. 이벤트 정의 및 개발
6. Activity에 이벤트를 구현하여 앱을 구동

35. iOS 개발 시연
1. iOS 어플리케이션 생성
2. Xcode에서 SingleViewApplication 생성
3. Story Board로 그리기
4. Story Board에 버튼, 이미지 등을 올려서 앱을 개발
5. 이벤트 정의 및 구현
6. Story Board로 그린 UI에 이벤트 등을 구현하여, 앱을
구동

36. 제 3 장
웹 앱 개발 상세

37. 웹 앱 개발
HTML
javascript
CSS
ViewPort
Image 관리

38. 웹 앱 개발 시연
1. HTML로 모바일 화면 그리기
2. javascript Library 활용(jquery,Angular js,…)
3. ajax
4. 모바일 웹 디버깅
5. iOS 는 사파리를 활용하여 디버깅한다.
6. android는 chrome을 활용하여 디버깅 한다.

39. 제 4 장
하이브리드 앱 개발 상세

40. 하이브리드 앱 구조
App Delegator
View Controller
UIWebView
Application
Activity
WebView
WEB Code
HTML + CSS + Javascript

41. 하이브리드 앱을 위한 MVC 모델
View
HTML + CSS
Controller
Javascript
Model
Server
Ajax

42. JSP를 사용하지않는 이유
UI를 jsp로 구현하면 접속할때마다 컨텐츠를 다운로드함
오프라인 앱 사용 불가
네트워크 비용 증가
사용자와 서비스 제공자에게 비용 부담
정적 컨텐츠인 HTML, CSS, Javascript를 사용해야함

43. 서버개발 방식
Ajax 서버로 활용
HTTP 방식의 JSON 형태로 통신 권장

44. 하이브리드 앱을 위한 프레임워크
Cordova - 대표적인 하이브리드 프레임워크
IT회사 자체적으로 보유하는 경우도 있음

45. 하이브리드 앱 개발 시연
1. 안드로이드 하이브리드
2. WebView를 띄우고 URL을 로드
3. 하이브리드 앱 디버깅 (안드로이드)
4. iOS 하이브리드
5. WebView를 띄우고 URL을 로드
6. 하이브리드 앱 디버깅 (iOS)

46. 제 5 장
모바일 앱 개발 시 특이점

47. 프레임워크
< 클라이언트 프레임워크>
• 하이브리드 앱 프레임워크
- Cordova
• 네이티브 앱 프레임워크
- Titinium
• 자바스크립트 프레임워크
- jquery mobile
-Angula js

48. 프레임워크
< 서버 프레임워크>
• 자바 프레임워크
- 스프링
- 스트럿츠
- 제이넛

49. 프레임워크
< 클라이언트 프레임워크> < 서버 프레임워크>
데이터 통신
UI 표현
서버 로직 처리

50. 잘못된 아키텍처
서버
싱글턴 통신모듈
Ajax 활용하면 됨

51. iOS 특이사항
javascript - Native 간 통신은 브라우저의 URL 호출과 동일하게
Scheme을 활용하기때문에 동시접근 문제 발생
Native 호출이 동시에 2개가 실행되면 1개는 무시될 수 있음
순차적으로 실행하는 로직구현 필요

52. 모바일 앱 테스트
디바이스 별로 특이 사항이 많이 발생함
(특히, WebView에서 제공하는 컴포넌트)
안드로이드는 파편화가 심함

53. 모바일 앱 테스트
오류
확인
화면
캡처
인터넷
PC전송
업무용
PC전송
오류 내용 +
화면 기재
개발PM
/QA 전달
등록내용
확인
개발자
전달
오류수정 수정통보
개발완료
검증
테스터 PM / QA 개발자 PM
• 모바일 앱의 경우 오류 사항 전달이 어려움
• 금융기관의 경우 보안 정책상 USB 가 금지되어 더욱 어려움

54. 모바일 앱 테스트
앱 개발 단계에서 수행하는 개발 검증 및 테스트 업무에 대해
버튼 하나로 결함 및 이슈를 등록하고 조치사항을 관리할 수 있는
화면기반의 결함 관리 솔루션
시그널파이어 : Visual Bug Tracking Solution

55. 모바일 앱 테스트
오류
확인
화면
캡처
인터넷
PC전송
업무용
PC전송
오류 내용 +
화면 기재
개발PM
/QA 전달
등록내용
확인
개발자
전달
오류수정 수정통보
개발완료
검증
오류확인
및 등록
등록내용
확인
개발자
전달
오류수정
및 통보
개발완료
검증
테스터 PM / QA 개발자 PM

56. 모바일 앱 보안
<대한민국 모바일 앱 보안 4종세트>
1. 보안 키패드
2. 위변조 방지
3. 공인인증서
4. 백신(안드로이드)
“대한민국은 내가 지킨다”

57. 모바일 앱 보안
• 안드로이드는 디컴파일이 가능함
• 주요한 데이터는 Client로 안보내기
• 화면에 노출되지 않는 데이터는 Client로 안보내기
• 암호화 사용시 Client에서 복호화를 불가능 하도록
처리 (공개키 암호화 활용)
• 웹앱, 하이브리드 앱의 경우 XSS등 알려진 보안 취
약점 고려

58. 시큐어코딩
XSS(크로스 사이트 인젝션)
SQL injection (얼마전에 이 방법으로 뿜뿌라는 사이트가 털렸습니다...ㅠ)
BufferOverflow 공격. (서버 공격)
디렉토리 경로 조작으로 인한 접근
운영체제 명령 삽입
파일 업로드 취약성 대응(웹쉘)
쿠키 하이재킹 (XSS와 혼용시 더욱 위험)
오류코드 출력
개발시 하드코딩

59. 시큐어코딩
Static Member필드의 사용. 특히, Servlet은 Singleton처럼 작동하므로, 전역변수 사용
시 로그인 사용자가 뒤바뀌는 사태가 발생 가능
친절한 오류코드.
조금은 까칠하게 대응해주는게 보안에 좋아요.
로그인 실패시 잠금 기능 구현! (IP잠금 기능 또한 필요)
java Equals사용시 주의 NullpointerException이 발생하며, 소스코드의 일부가 노출되
어 보안성 위험 할 수 있음.
암복호화의 생활화, 코드에서 사용되는 주요 상수값등은 암호화 하여 사용
(특히 DB접속 정보. 실수 또는 불의 사고로 코드 노출시 문제)

60. 구글 해킹 시연