Curie: Deep-linking & App-indexing based mobile search engine
11 likes•1,291 views
Curie: Deep-linking & App-indexing based mobile search engine 2015. 03. Team Tehran Slippers SW Maestro Program
Curie: Deep-linking & App-indexing based mobile search engine
- 1. Curie / Musicurie Deep-Linking과 App-Indexing을 이용한 모바일 어플리케이션 검색 엔진 SW Maestro 과정 Team Tehran Slippers 류원경 남성필 엄두성 정헌재
- 2. 목차 • 팀 소개 • 시장 배경 - 문제점 • 서비스 개요 • Deep-Linking? App-Indexing? • 주요 경쟁사 분석 • 비지니스 모델 • 목업 (가안) • Musicurie • Software Overall Structure • Front-End Develop • Back-End Develop
- 3. 팀 소개 Dooseong EomHunjae Jung Wonkyung Lyu Sungpil Nam Wooseok Seo
- 4. 시장 배경 - 문제점 • 오늘날의 검색엔진은 웹 상의 데이터만 보여 줄 수 있음 • 그러나, 전 세계적으로 웹 컨텐츠 생산량은 감소하는 반면, 모바일 컨텐츠 생산량은 증가하는 추세
- 5. 시장 배경 - 문제점 • 따라서 검색엔진 사용자는 사용자 경험과 유익이 감소 • 검색엔진의 입장에서도 컨텐츠 감소에 따른 광고 수익 경감 문제 발생 • 앱 소유주(광고주)는 새로운 유저 유입을 위해 매우 비효율 적인 마케팅 자원 소비
- 6. 서비스 개요 • 큐리(Curie)는 앱 인덱싱(App Indexing)과 딥 링킹(Deep Linking) 기술을 이용해 모바일 앱 내부의 데이터를 사용자 들이 검색할 수 있고, 또한 바로 실행할 수 있도록 해주는 신 개념 검색엔진
- 7. Deep-Linking? App-Indexing? • Deep-Linking: 앱 내부의 고유 컨텐츠 자원에 대한 링크 (http://en.wikipedia.org/wiki/Mobile_deep_linking) • 가령, Facebook 앱의 경우 ‘fb://' 프로토콜로 시작되어 ‘fb:// profile/1781740177' 등과 같이 특정 자원에 바로 접근할 수 있게 됨
- 8. Deep-Linking? App-Indexing? • App-Indexing: 모바일 앱에 있는 컨텐츠 자원들을 색인화 하여 Deep-Link를 통해 외부에서 접근 가능하도록 하는 것
- 9. How to find Deep-Link URL? - 웹 서비스(크롬 개발자 도구에 서 모바일 버전으로 접속)에 들어가서, 노래 재생 버튼을 눌렀을 때 모바일 어플리케이 션으로 넘어가는지 확인한다. - 만약 어플리케이션으로 넘어 가서 정상적으로 노래가 재생 되면, 어플리케이션에 deep link가 구현되어 있는 것이므 로, Deep link URL을 찾을 수 있을 거라 기대해도 좋다.
- 10. How to find Deep-Link URL? - 크롬 개발자 도구를 이용하여, 재생버튼을 눌렀을 때 어떤 함수가 실행되는지 확인해보면, 최종적으로 위와 같이 deep link url을 포함하고 있는 함수를 발견할 수 있다.
- 11. 주요 경쟁사 분석 번호 이름 주요 서비스 설명 투자 금액 및 매출액 1 Quixey (http://www.crunchbase.com/ organization/quixey) 앱 검색 API를 개발하고 있는 기업으로 현재 Quixey 안드로이드 어플을 북미 시장에 출시 한 상태이다. 이 어플은 모바일 기기 내부의 어 플들의 기능들을 쉽게 검색해서 사용할 수 있 도록 해준다. 총 10개의 투자사로부터 5번의 라운드를 통해 약 760억 원($750M) 유치 2 URX (http://www.crunchbase.com/ organization/urx) 앱 검색 API를 개발하고 있는 기업으로, 자연 검색, 소셜미디어, 이메일, 푸시메시지, 광고 리타게팅 등 다양한 분야에 당사의 검색 API 를 응용하고 있다. 총 34개의 투자사로부터 3번의 라운드를 통해 약 160억 원($15M) 유치 3 Branch Metrics (http://www.crunchbase.com/ organization/branch-metrics) 특정 딥링크를 통한 앱 설치 시, 핑거프린팅 기 술을 통해 앱 설치 이후에 회원가입 이후에도 바로 맥락에 맞는 랜딩페이지로 이동시켜주는 기술. 총 3개의 투자사로부터 1 번의 라운드를 통해 약 30억 원($3M) 유치
- 12. 비즈니스 모델 • 기술을 활용한 엔드포인트 서비스를 통해 수익 창출 기존 웹 검색엔진과 유사한, 검색 결과에 대한 특정 모바일 어플 리케이션으로의 트래픽 전달에 대한 광고 수익 모델 • DB 축적 및 엔진 개량을 통한 자산 확보 추후 App-Indexing 맥락과 사용자 흐름에 따라 맞춤형 광고 노 출로 CTR, 전환율, 서비스 체류 기간을 획기적으로 증가시키도 록 함. 더 나아가 자연어 검색, 소셜 미디어, 이메일, 푸시 메시지, 광고 리타게팅 등을 통해 광고 채널을 더 풍부하게 하는 것이 목 적.
- 13. 목업 (가안)
- 14. Musicurie Deep-Link & App-Indexing을 이용한 습작
- 15. 1. Software Overall Structure 2. Front-End Develop 3. Back-End Develop
- 16. 1. Software Overall Structure 2. Front-End Develop 3. Back-End Develop
- 18. 1. Software Overall Structure 2. Front-End Develop 3. Back-End Develop
- 19. Front-End Develop 1. 개발환경 • MAC OSX 2. 사용기술 • Build Tool – Yeoman, Bower, Grunt • MVC Framework – Angular.js –v 1.3.0 (animate, aria, material, route) • jQuery –v 2.1.3 3. 개발도구 • SublimeText 4. 저장소 • Github : https://github.com/teheranslippers/curie-front-angular
- 20. Yeoman + Grunt + Bower • Yeoman: AngularJS, 웹앱 개발에 필요한 여러 구성요 소들을 초반에 단 하나의 커맨드로 세팅해주며, 부트스트 래핑을 도와주는 도구. • Grunt: SCSS 컴파일, Minify, Auto loading 등 다양한 작업들을 자동화시켜줘서 개발 및 배포 시 빠른 시간안에 특정 태스크를 수행할 수 있도록 해주는 도구. • Bower: 개발 시 사용하는 다양한 써드파티 라이브러리들 의 버전 및 상호의존성을 관리해주고, 쉽게 설치할 수 있 도록 해주는 도구.
- 21. Yeoman 활용 예시 1. yo angular로 angular 세팅 2. bower install로 써드파티 의존성 체크 3. grunt serve 개발 시 명령어 실행 (Chrome LiveReload extension 설치) 4. grunt test로 테스트 및 배포 시 grunt 명령어 실행
- 22. Front-End Develop - OffCanvas
- 23. Front-End Develop - OffCanvas • common.css • common.js
- 24. 1. Software Overall Structure 2. Front-End Develop 3. Back-End Develop
- 25. Back-End Develop 1. 개발환경 • MAC OSX 2. 서버 환경 • Digital Ocean 3. 사용기술 • Framework – Flask (Python 3.4) • Main DataBase – MariaDB (10.0.15) • Sub DataBase(1) - ElasticSearch (+ elasticsearch-analysis-korean) • Sub DataBase(2) - Memcache • Crawler – Python (Beautiful Soup 4.0) 4. 저장소 • Github : https://github.com/teheranslippers/curie-front
- 26. Back-End Develop - Crawler 1. Github: https://github.com/teheranslippers/Curie-Crawler 2. Python (Beautiful Soup 4.0)으로 제작 3. 크롤러는 크게 아래의 2가지 역할을 담당 1. getBeatMusicInfo.py: 음악 정보 수집 • 음악 정보(가수, 노래 제목, 앨범명, 앨범 이미지 URL)을 가지고 있는 특정 사이 트(Beat)에서 해당 정보들을 크롤링 해온다. 최종 결과물로 CSV 파일이 생성 된다. 2. getTrackIDs.py: 각 어플리케이션 별 Track ID 수집 • 음악 정보를 담고 있는 CSV 파일을 기반으로, 크롤러에게 가수/노래 제목/앨범 명을 입력으로 주면 음악 어플리케이션 별 (멜론, 벅스, 유튜브 등) Track ID를 수집한다. 수집된 Track ID는 바로 Database(MySQL)로 Insert 되어, 수집 되자마자 서비스에서 이용 가능하다.
- 27. Back-End Develop – Flask Framework Structure 1. Micro framework이기 때문에 전체구조를 직접 정의해야 하는 이슈 • Degital Ocean에서 작성한 Article을 참조하여 구조 정의 • https://www.digitalocean.com/community/tutorials/how-to-structure- large-flask-applications 2. 동일 출처 정책과 관련된 이슈. • CORS 적용 : http://flask-cors.readthedocs.org/en/latest/
- 28. Back-End Develop - ElasticSearch 1. RESTful 분산 검색엔진 http://www.elasticsearch.org/ 2. Elastic Search Plug-in • Head: http://mobz.github.io/elasticsearch-head/ • Elasticsearch-analysis-korean • JDBC River Plugin: https://github.com/jprante/elasticsearch-river- jdbc 3. 참고: elasticsearh로 로그 검색 시스템 만들기 http://helloworld.naver.com/helloworld/textyle/273788
- 29. Back-End Develop - MariaDB 1. https://mariadb.org/ 2. 구조
- 30. Back-End Develop - MariaDB - Data retrieving procedure CREATE PROCEDURE `proc_get_app_links`(IN songid INT) BEGIN SELECT app.name,CONCAT(app.android_prefix, link.link_id, app.android_appendix) AS android_deeplink, app.googleplay_url, CONCAT(app.ios_prefix, link.link_id, app.ios_appendix) AS ios_deeplink, app.iTunes_url FROM curie_finish.app_info AS app INNER JOIN curie_finish.link_ids AS link ON app.id = link.app_id WHERE link.song_id = songid; END
- 31. Back-End Develop - Memcached 1. http://memcached.org/ DB 레벨까지 내려가 데이터를 가져오는 것이 매우 큰 비용을 소모하기 때문에, 자주 검색되는(HIT) 결과에 대해 Memcached를 이용하여 캐싱을 진행함 2. Memcached Python3 Plug-in https://github.com/eguven/python3-memcached/
- 32. Demo Now we give a demonstration http://tehranslippers.com/