View
2.035
Download
3
Category
Preview:
Citation preview
남보다뛰어난하이브리드앱만들기
㈜스쿱미디어신진욱 대표이사jinwook@skoopmedia.co.kr010-9599-4465 / @smle
강사소개• 현 ㈜스쿱미디어 대표이사, 전 ㈜블링크팩토리 기술이사
• ㈜넥슨 데브캣
• 2002년 첫 창업
• 하나대투, 미래에셋, 국세청, 법무부, 이투스, 넥슨, 조선호텔, 신세계푸드 등등
• 아이폰 출시후 2년간 20여개의 대형 앱 개발 / 10여개의 소형 앱 개발
• 총 누적 다운로드 500만 이상 / 앱스토어 1위 3회
2012 하이브리드앱
2011 모바일 UI/UX
2010 모바일 비즈니스
2009 스마트폰의 시대가 온다
2012 하이브리드앱- 만들어봤더니 만만치 않다.
(또는 이제라도 만들자)
2011 모바일 UI/UX- 우리도 잘 만들어서 벌자
2010 모바일 비즈니스- 외국은 이렇게 돈을 벌더라
2009 스마트폰의 시대가 온다- 외국엔 아이폰이라는게 열풍
대상자
• 네이티브앱을 개발해봤으나 하이브리드앱으로개발하면 좀 나은지 궁금한분
• 앱개발을 아직 해보지 않아서 뭘로 개발해야 할지 고민하시는분
• 사내 웹개발자로 모바일앱 개발을 대응 할 수있는지 궁금하신 분
• 또는 위와 같은 고민을 하는 상사분이 보내서오신분
이번 세션의 결론
웹 기술만으론 앱을 만들 수 없다.
웹 기술만으론 앱을 만들 수 없다.
한번 판단해 봅시다.
10가지 키워드
WHAT
FACT
MEMBER
HOW
DESIGN
STRATEGY
PATTERN
PROCESS
AFTER SECRET
하이브리드앱은
웹기술을 이용하여 앱을 만든다.
INSIGHT 다양한 디바이스를 지원하는 웹 기반 애플리케
이션 프레임워크
왜 하이브리드일까
네이티브기술과 웹기술을 연결해준다.
웹기술만으로 만들기는 사실상 어렵다.
패키징에 대한 이슈가 해결된 프레임워크를 선택할 것
네이티브로 만들것은 네이티브로 만들어야한다.
하이브리드는 두 개 이상의것이 합쳐져 서로 보완하며 목표를 달성해야한다.– 국내엔 너무 웹기술에 포커스 되어있음
그럼 네이티브앱이란– 운영체제와 하드웨어와 최대한 가깝게 전용툴을 사용하
여 실행파일을 만든앱• 미리 해석해두었기 때문에 명령어들을 처리만 하면 됨
– 하이브리드앱 프레임워크 사이에는 웹브라우저와 자바스크립트 해석기라는 레이어가 또 있습니다.• 해석 -> 분기 -> 처리
웹 기술을 이용할 뿐 앱을 만들고 있다
FACT 웹 기술을 이용할 뿐 앱을 만들고 있다.
특정페이지 UI전체를 웹 서버에서 호출해서는안된다.
웹 앱의 장점이 사라짐
로컬에 HTML파일을 두고 데이터만 주고 받을것
UI는 로컬, 데이터는 json으로 서버에서
빠질수 없는
네이티브 앱 개발자
MEMBER 빠질수 없는 네이티브 앱 개발자
패키징에 대한 문제
하이브리드앱 프레임워크는 가교의 역할을 한다.
웹 기술만으로 앱을 만든다는 뜻은 아니다.
하이브리드는 상호 보완이다.
애플 앱스토어 등록시 이슈가 발생 할 수 있음
앱의 UX를 최대한 흉내
HOW UI를 웹 서버에서 전송 받지 말것
데이터는 무조건 json으로
서버는 거들뿐
데이터 저장도 가능한 로컬에서
아예 데이터 송수신을 없앨 것
백 버튼은 아예 넣는다
가변적
화면 해상도 지원은 필수
DESIGN 가변적 화면 해상도는 필수
하이브리드앱 프레임워크가 해상도를 자동으로대응해주지 않는다. 툴도 지원하지 않는다.
하나하나 대응해야 함
결국 기획 단계부터 고려되어야 함 하향평준화 기획
크기 확대 전쟁이 끝나면 비율전쟁이 시작될지도…. (듀얼도…)
담백하게 만든다.
STRATEGY• 담백하게 만든다.• 다양한 폰을 지원하기 때문에 기능이 많으면 어려
움• 앱의 맥락에 맞추어 최대한 기능이 적은 것이 유리
하다.• 프레임워크가 지원해주는 건 기능적 일뿐• 웹킷이라는 같은 엔진을 공유하더라도 결과는 다
르다. – 너무 다르다. 사파리에서 된다고해도 실제 앱안의 웹뷰
에서 동작은 약간씩 다르다.– 안드로이드에서 느려요, 너무 느려요
아악!!!
카메라!!!
PATTERN 다른것은 대부분 문제가 없으나 카메라 질문이
가장 많음
function uploadPhoto(source)
{
navigator.camera.getPicture(onPhotoDataSuccess,
onFail, {
quality: 25,
destinationType: destinationType.DATA_URL,
sourceType: source,
allowEdit: true
});
}
function onPhotoDataSuccess(imageData)
{
$.post(‘http://path/to/ajaxUpload’, {data:imageData},function(data) {
alert(‘success’);});
}
플랫폼별
런칭 계획을 세워야 함
PROCESS 기획 > 디자인 > 프로토타이핑 > 개발 > QA >
마켓 등록
앱스토어는 7~10일의 등록 대기기간이 필요함
티스토어도 일주일정도의 대기기간이 필요함
안드로이드 마켓은 바로 등록 가능
구글이 수시로 지운다곤 하나 test라는 앱도 많다.
스토어 등재의 험난한 길
AFTERWORD 스토어 등재라는 난제
화면 전체가 웹뷰로 된 앱의 경우 애플에서 리젝트 됨
사유는 “수준 미달”, 두 번 리젝트
일부 네이티브 기능을 포함하고서 등록되었음
7일간의 등록 대기, 7일간의 대응, 다시 또 7일간 등록대기, 개발 완료 후 총 21일이 소요됨
이후 첫 화면이라도 반드시 네이티브로 만든다.
하이브리드앱에 빠진 이야기는?
SECRET 네이티브앱 개발 단가는 내려가고 있다.
하이브리드앱으로 모든게 자동화 되진 않는다.
하이브리드앱 프레임워크는 웹기술만으로 앱을만드는것은 아니다. 작업하다보면 phonegap을 걷어내게된다.
gap을 좁혀주기엔 아쉽다.
사용자의 눈은 높아지고 있다.
시장은 점점 더 커지고 있다. 올해만 버틴다.
감사합니다.
A/S @smle, 선릉역
jinwook@skoopmedia.co.kr
010-9599-4465
Recommended