2 수리 영역(가형) · 2015-01-22 · 2 수리 영역(가형) 2 8 5. 집합 일 때, ∣ ∈ ∈ 를 함수 → 의 그래프로 정의한다. 역함수가 존재하는 함수
모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 •...
Transcript of 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 •...
![Page 1: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/1.jpg)
모바일 앱 개발의 기초방정호
2014. 6. 20.
![Page 2: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/2.jpg)
• 재료공학부 06학번, 복수전공.
• 샤밥, 샤샤샥, 샤방
• AppeyRoad
• iOS Tech Talk 월드투어 in Seoul
• 제론헬스케어 산업기능요원
![Page 3: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/3.jpg)
예상 수강생• 모바일 앱 개발 관심. 경험은 없음.
• GUI 프로그램 제작 경험?
• OOP 컨셉 익숙. 코딩도 가능. (JAVA)
• (스마트폰 사용자. 내가 쓸 앱을 만들어보자.)
• (대부분 안드로이드 유저?)
![Page 4: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/4.jpg)
강의 내용• 내 기계에 모바일 앱 개발환경 구축하기
• 오늘 만들어 볼 앱 기능 정의 및 코딩
• 모바일 앱 개발 초심자가 알아야 할 개념들
• iOS 앱 제작 시연을 통한 앱개발 과정 관람
• 안드로이드 앱 제작 실습
![Page 5: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/5.jpg)
모바일 앱• 안드로이드, iOS, (그 외 노력 중인 친구들)
• HTML5
• 둘 각각 장단점이 있음
• 오늘 다룰 내용은 Native App
![Page 6: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/6.jpg)
개발환경 구축• SDK (ADT)
• API document
• (IDE)
![Page 7: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/7.jpg)
SDK
Software
Development
Kit
![Page 8: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/8.jpg)
� Tools
� Frameworks
(Cocoa Touch)
� Language
� Design strategies MVC
iPhone SDK Overview
5
Xcode Interface Builder
[[NSString alloc] initWithFormat: @”Hello %@”, name];
FoundationUIKit
SNU CSE
API
![Page 9: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/9.jpg)
Xcode, 이클립스 …
![Page 10: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/10.jpg)
![Page 11: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/11.jpg)
![Page 12: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/12.jpg)
예) 텍스트 필드• 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경)
• 누르면(영역, 손가락 몇 개가 누를지, 누르다가 손가락을 필드 밖으로 이동하면?) 선택이 됨
• 선택 되면 키보드를 표시함 (사용자가 쓰는 언어가 뭐지? 전화번호만 입력. 만약에 블루투스 키보드 쓰면?)
• 키보드에서 타이핑 하면 수정 내용을 표시 (필드 영역보다 글자를 많이 입력하면?)
• 사용자가 입력한 값을 핵심 기능에서 사용할 수 있게 제공.
![Page 13: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/13.jpg)
Framework
• App 개발을 위해 필요한 재료
• Apple, Android 등에서 미리 구현해 놓음
• 속 구현에 대해 알 필요 (알 수도) 없음
• 관련있는 기능들을 묶어 놓음
![Page 14: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/14.jpg)
![Page 15: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/15.jpg)
UI
![Page 16: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/16.jpg)
API
![Page 17: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/17.jpg)
API
• Application Programming Interface
• 제공된 FW들을 사용하기 위한 방식
• 개발자는 이를 이용해 프로그램을 구성
• 내부에서 그에 대응되는 코드를 수행
![Page 18: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/18.jpg)
![Page 19: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/19.jpg)
![Page 20: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/20.jpg)
![Page 21: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/21.jpg)
![Page 22: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/22.jpg)
![Page 23: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/23.jpg)
결론• SDK를 받으면 다 들어있다 : 개발툴, 각종 프레임웍,
API 문서, 테스트 툴, 심지어 예제까지. (소스코드?)
• https://developer.apple.com/devcenter/ios
• http://developer.android.com/sdk
• (거의) 공짜!
![Page 24: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/24.jpg)
오늘 만들어 볼 앱
![Page 25: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/25.jpg)
스마트폰 앱이라며…?• GPS 중력 센서를 써서, 머리 위에 폰 올리면 키를 알아낸다.
• 카메라로 사람 찍어서 얼마나 뚱뚱한지 분석한다.
• 보건복지부 웹사이트 정보를 바탕으로 비만을 판단하는 기준 수치를 앱 구동시에 매번 업데이트 해준다.
• 비만 판정 결과를 페이스북, 트위터, 카톡으로 전송한다.
![Page 26: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/26.jpg)
오늘 만들어 볼 앱• 비만도 판정 앱
• 입력: 성별, 키, 몸무게
• 처리: 비만도 계산
• 출력: 비만도, 판정 표시
![Page 27: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/27.jpg)
기능 정의
![Page 28: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/28.jpg)
코딩: 핵심기능은 이것!
![Page 29: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/29.jpg)
![Page 30: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/30.jpg)
원래 우리가 아는 방법
![Page 31: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/31.jpg)
GUI vs CLICLI GUI
입력 scanf … 스위치, 텍스트필드, 슬라이더, 버튼
처리 똑같아 똑같아
출력 println … 텍스트뷰, 이미지, 얼럿뷰
![Page 32: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/32.jpg)
![Page 33: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/33.jpg)
MVC• Model / View / Controller
• Model : 데이터, 계산, 처리 등. 지금까지 만든 클래스들 (사람, 계산기)
• View : 관련 UI 정보 (위치, 크기 등 정의한 값들)
• Controller : 앱 개발의 핵심! Model 과 View 의 관계를 정의하고, 정보를 공유하도록 함.
![Page 34: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/34.jpg)
MVC• Model : 앱의 핵심 기능. (원래 하던 거. CLI 프로그램에 있던 기능 그대로 가져다 쓸 수도.)
• View : SDK에 들어있음(Framework)내가 할 일 1. 크기, 위치 같은 것 정해주기.내가 할 일 2. 코드와 연결하기 위한 조치(이름, 함수)(내가 할 수도 있는 일 3. 기능을 수정, 추가하기e.g. 두 손가락으로 눌렀을 때만 작동하는 버튼? 상속해서 기능을 추가하면 됨.)
![Page 35: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/35.jpg)
Controller
• 화면(View)에 있는 각종 component 들을 코드에서 접근.
• Model을 이용해서 필요한 연산 수행.
• 결과를 View에 표시.
• (새로운 화면 생성, 화면 전환, 애니메이션 등)
![Page 36: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/36.jpg)
Controller• 각 화면은 하나의 controller가 구현되었음을 의미.
• 화면 구성을 위한 필수 기능들(바탕화면, 생길 때, 없어질 때, 뷰와의 연결 등)이 미리 구현 되어있음.Android : Activity (Fragment) iOS : UIViewController
• 이 클래스는 상속 받아서, 내 앱에서 필요한 기능들을 overriding, overloading 하면 됨!
![Page 37: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/37.jpg)
![Page 38: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/38.jpg)
오늘 만들어 볼 앱• Model은 다 만들었음!
• 화면은 총 두 개: 입력 화면, 결과 화면.
• 입력: 텍스트뷰(설명), 스위치(성별), 텍스트필드(키, 몸무게), 버튼
• 결과: 텍스트뷰(비만도, 레벨), 경고창, (이미지뷰)
![Page 39: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/39.jpg)
iOS 시연• Objective-C 라는 새 언어를 배워야…
• 실습실에 Mac OS X 없음
• 개발툴, 개발과정이 좀 더 직관적!
• 지금까지 배운 컨셉들 이해, 실제 적용 경험
• iOS7 기반. (iOS8은 아직 beta)
![Page 40: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/40.jpg)
안드로이드 실습• 따라해보세요.
• (Hello, World!)
• 갖고 있는 안드로이드 기계에서 테스트 가능.(개발자 옵션 ON)
• 에뮬레이터 가능 - 엄청느림.
![Page 41: 모바일 앱 개발의 기초ª¨바일... · 2018-08-17 · 예) 텍스트 필드 • 화면상에 네모 박스를 보여줌 (특정 영역 픽셀의 색을 변경) • 누르면(영역,](https://reader033.fdocuments.net/reader033/viewer/2022042008/5e71276f86205758c560ba19/html5/thumbnails/41.jpg)
Appey Road