Social Tutorial Platform: Webbles

Frontend & Extension
Backend & Analytics MentorFrontend & ExtensionFrontend & Extension
Leader
Bullback_

Client
Bootstrap
AngularJS
Webbles Core
javascript
Chrome API JQuery
Server
Django(Class-based views)
HTML5 DRF
mod_wsgi Python-MySQL
Apache MySQL

id = “hello1”
hello1
id
id = “hello2”
hello2
id
id
InnerHTML
Tag Name

#Contents #Webbles-Contents
Name Space
Python Library
css css

Tutorial Layer
Web Site Layer
User

Suggest Estimation Development Code Review Internal QA Deploy Live QA
Ready
For
Developement

C/C++ C/C++ Python Python
C#.NET C#.NET HTML
HTMLCSS
CSS3
PHP
Android
C/C++

HTML CSS
AngularJS
Server management on Linux
Bootstrap
jQuery
Git & Bitbucket(Source Control)
C/C++ C/C++ Python Python
C#.NET C#.NET HTML
HTMLCSS
CSS3
PHP
Android
C/C++
Chrome Extension(Chrome API)
Javascript
Django(Class-based views, rest-framework)
Scrum & JIRA (Agile KANBAN Board / Sprint)

과정-후속 마케팅 결과(2014년 11월 17일 현재) Webbles
평균 280원의 CPC로 총159명의
사이트 유입을 확보하였으며, 현재 CTR
상승을 위한 키워드 선별 및 보강, 그리고
간단한 사이트 SEO를 계획하고 있음.
하루당
평균 수치
페이지
좋아요
게시물
공유
게시물
댓글
게시물
좋아요
모든
게시물
도달수
누적
최고 수치
31.6
474
6.5
98
1.3
20
13
200
845
11,830

과정 Webbles
스터디 과정
실제로 개발에 필요한
웹 기술에 대해 책을 선정하고
추후 일정계획 확립
선정한 책을 챕터별로 구분하여
한 사람당 배분하여 맡은 챕터
심화 스터디 및 PPT로 제작
준비된 자료를 자유롭게
발표하여 모두가 이해되도록
설명/토론
STUDY가 완료된 자료에 대해서
구글 드라이브에 저장하고 추후에
복습을 통한 완벽한 숙지
책 선정/계획
JAVA
Script
챕터당 한 사람씩 설명 및 토론 보관/추후 복습
Chrome
OS
성필
원경
창연
경필
AA

과정 Webbles
스터디 과정
센터에 오면 매일 2시에
이루어 지는 스탠드업 미팅
일일 스크럼
2주짜리 스프린트 시작!
(총 3번의 스프린트)
스프린트 시작
프린트 종료 후
스프린트 과정 평가/검토
(Retrospective)
스프린트 종료
무슨 이슈들이 있는지를
정리하여 백로그 티켓 생성
(총 200개 이슈)
티켓 생성
티켓 생성 후 멘토님과
팀원들과 함께 우선순위 지정 후
스토리포인트 산정
우선순위 조정 및
스토리포인트 산정

익스텐션 및 플랫폼 성과 Webbles
하루당
평균 수치
플레이
도움이
되었어요 리뷰 피드백
하루당
최저 수치
하루당
최고 수치
220
120
7
5
2
1
1
0
291 15 4 3
수치
테마 튜토리얼 설치
8 34 116
2014년 11월 12일(현재)

기술 Webbles
js
(Javascript Module)
CSS
(Stylesheets)
Static Files
(Templates, Images)
Background (mainController.js)
Manifest.json
Content ScriptWeb
page
익스텐션 내부 구조

기술 Webbles
DB Schema(Model)
DB Schema에 대한 시각적 구조화로 확장가능성 고려

기술 Webbles
RESTFUL API 문서화
Swagger 사용하여 상세한 문서화(https://webbles.net/docs/)

기술 Webbles
SDK 설명 및 성과, 향후 발전방향
非PC, 非Chrome 환경에서도
사이트에 위블즈 서비스를
적용 할 수 있음
고객의 소리 창구를 통하여
SDK에 대한 지속적인 문의와
관심이 접수되고 있는 중
플랫폼 장벽을 뛰어넘는 B2B
비지니스 모델 확립에 중요한
거점 기술이 될 예정
webblesLib.js
(Javascript Module)
webblesLib.css
(Stylesheets)
Static Files
(Templates, Images)
Cookie
Webbles 서비스 적용을 원하는 웹사이트
(실제 튜토리얼 정보 파일)
bubbleInfos.json
튜토리얼이 필요한 서비스 사용자
<head>
<script type="text/javascript"
src="webblesLib.js"></script>
<link rel="stylesheet" type="text/css"
href="webblesLib.css" />
</head>

시장성 Webbles
크롬 브라우저 점유율
크롬 브라우저의 점유율은
계속 상승 중이며, 국내의
경우에도 모바일 시장에서의
크롬 브라우저의 성장이
데스크탑-모바일 융합 시대에
국내 크롬 브라우저의 사용률을
견인하고 있음.
(6개월 전 약 21.84%에 비해 약 4% 상승.
같은 기간 IE: 7% 하락)
그럼에도 불구하고 국내 크롬앱,
크롬익스텐션 개발 커뮤니티의
활성율 매우 낮음
(커뮤니티 0개)
출처:
Statcounter (2014.10. 기준)
주요 시장 크롬브라우저 점유율(데스크탑)
전세계 미국 한국
약
전체1위
44.40%
약
전체1위
33.88%
약
전체2위
25.06%
주요 시장 크롬브라우저 점유율(모바일)
한국
약
전체1위
54.01% (올해 초에 비해 약 점유율
약 1015% - 11배 상승)

소개 Webbles
크롬 익스텐션(Chrome Extension)은 무엇인가?
크롬 익스텐션은 크롬 브라우저의 네이티브 앱!
대표 예시: 구글 행아웃 (사용자 535만 명)
데스크탑-브라우저-모바일-태블릿-(크롬북) 5개의 독립적인 사용
환경을 이어주는 중요한 연결고리 역할을 하고 있으며, 최근 업무 및
일상 작업의 효율성 증대를 위한 탁월한 선택으로 각광 받고 있음.
구글 행아웃은 안드로이드, iOS, 데스크탑 브라우저를 하나로 이어주는
역할을 하고 있으며, 크롬 확장프로그램의 기능을 사용하여 웹서핑이나
웹을 이용한 업무 중에도 탭 이동이 없이도 계속적으로 채팅, 음성 및
화상통화를 할 수 있도록 하는 강력한 기능을 제공함.
또한 익스텐션 시장에는 행아웃 외에도 번역기, 구글 메일 등 구글이
공식적으로 제공하는 익스텐션들이 다수 있으며,
총 60,000개 이상의 익스텐션들이 등록되어 있음.

소개 Webbles
경쟁 소프트웨어 및 차별점
사용자 최소 수준
IntroJs
일반인
개발자
vs
사용 가능처
제약 없음
개발자 소유의
홈페이지에만
vs
빌더 툴의 존재 여부
있음
없음
vs
튜토리얼 시 페이지 이동
됨
안됨
vs
기트허브에서 가장 많이 사용되는
Popover 라이브러리
jQuery TourBus
튜토리얼을 라이브러리 형태로
제공해주는 jQuery TourBus

두 번의 클릭으로 3~7초 안에 익스텐션 설치 가능
소개 Webbles
인라인 설치 (크롬 익스텐션 설치의 용이성)

소개 Webbles
사용자 주요 피드백 - 대표 댓글, 도움이 되었어요.
진심 어린 사용자 댓글700회 이상의 튜토리얼 실행 횟수
크롬 익스텐션 마켓 사용자 리뷰

소개 Webbles
전세계 웹-모바일 사용 비율
아직까지는 전 세계적으로
데스크탑:모바일:태블릿 비율이
75:20:5 정도로 나타남
(2013, StatCounter, http://www.quirksmo
de.org/blog/archives/2014/01/browser
_stats_f_7.html)
해외에서는 대부분이 아직까지도
웹서비스를 사용.
콘텐츠의 언어 장벽이 거의 없기
때문에 해외로 진출하기가
좋은 서비스.

소개 Webbles
튜토리얼을 만들기 위한 개발자들의 공수

Social Tutorial Platform: Webbles

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to Social Tutorial Platform: Webbles

Similar to Social Tutorial Platform: Webbles (20)

Social Tutorial Platform: Webbles