구글 크롬 익스텐션을 이용해서 누구나, 어떠한 사이트라도 쉽고 빠르게 튜토리얼을 제작하고 볼 수 있는 서비스 입니다. 이렇게 제작된 튜토리얼들은 해당 웹사이트 위에 동적으로 삽입되어 사용자에게 비춰지며, 사용자들은 클릭 몇 번으로 웹사이트의 다양한 기능들을 익힐 수 있습니다.

1. HELLO TUTORIAL
김창연
이태호
류형욱

2. 김창연 (90.12.16)
• 세종대학교 컴퓨터공학과 4학년
• 한이음 공모전 은상
• Microsoft ImagineCup KoreaSemiFinal
‘inovation’ 분야 TOP 7
• 세종대학교 전자정보공학대학 학술경연대회
금상
• 서울시 앱 공모전 대상
• 소프트웨어 마에스트로 5기
이태호 (91.02.23)
• 세종대학교 컴퓨터공학 4학년
• K-Global Startup 스마트 디바이스 공모전 최우수상
• 한이음 '착한기술' 프로보노 공모전 대상
• Microsoft ImagineCup KoreaFinal 'World
citizenship' 분야 준우승
• 드림엔터 IoT 해커톤 창조상
• 한이음 공모대전 은상
• 세종대학교 전자정보공학대학 학술경연대회 대상, 동
상
• 국가통계 활용 공모전 앱 개발 부문 장려상
• 엔젤컨퍼런스 창업기업 Value-Up 대회 수료
• 삼성 소프트웨어 멤버십 S/W Camp 교육 수료
• 한국소프트웨어기술진흥협회 Java 개발자 양성 과정
수료
류형욱 (94.04.28)
• 한양대학교 소프트웨어전공 3학년
• 전국학생과학발명품경진대회 금상(화분을 구별할
수 있는 물 분사 시스템, 환경부장관)등록 특허
10-1432678(분사 시스템)
• 제14회 대학생 프로그래밍 경진대회 은상
• 2013 ACM-ICPC Asia-Daejeon Regional 10등
• 2014 ACM-ICPC Asia-Daejeon Regional 7등
• 2015 ACM-ICPC Asia Phuket Regional 동상
• 제1회, 제2회 한양대학교 프로그래밍 경진대회 1
등
• 제4회 TOPCIT(IT 역량 지수) 정기 평가 최고 득점
자
• 소프트웨어 마에스트로 5기
• 철도 교통안전관리자, 항공무선통신사
본 팀은 다양한 경험과 경력으로 많은 프로젝트를 수행한 바 있다. 모두 같은
꿈을 바라보며 오랫동안 달려온 만큼, 꿈을 펼칠 수 있는 기회가 주어졌을 때
최선을 다해 임할 준비가 되어있다.

3. 웹서비스를
사용하다보면 문제는
원하는 기능을 한번에
찾지 못하고, 여러 버튼을
눌러보며 불편한 과정을
반복한다는 점!

10. Alt Tab Alt Tab

11. 이 모든 과정을 해결하고자 hellotutorial이 탄생했다
(https://www.youtube.com/channel/UCLhaMmgoR8Ro3NhQmMSKrng 참고)

12. HelloTutorial는,

13. HelloTutorial는,
바로바로
따라할 수 있는

14. HelloTutorial는,
바로바로
따라할 수 있는
움직이는
튜토리얼이다!

15. 크롬 익스텐션을 사용하여
웹페이지 위에

16. 크롬 익스텐션을 사용하여
웹페이지 위에
레이어를 덧씌워

17. 크롬 익스텐션을 사용하여
웹페이지 위에
레이어를 덧씌워
사용자는 인터렉티브하게
튜토리얼을 따라하게 된다.

18. 튜토리얼을 볼 수 있는 프리뷰 모드와
튜토리얼을 만들 수 있는 빌더 모드,
그리고 실제 웹페이지 안에 간단히 삽입하여
사용하는 SDK 모드로 구성되어 있다.
(http://www.hellotutorials.com 참고)

19. 만들기 모드
만들기 모드를 시작하면 모든 DOM들이 마우스의 움직임에 따라 포커스 되며 만들고자
하는 DOM에 클릭하여 쉽게 튜토리얼을 만들 수 있다. 페이지간 이동도 자유롭게 할 수
있고, 상태바를 통해 현재 상태를 보며 수정/삭제/저장 등의 기능을 수행 할 수 있다.

20. 보기 모드
익스텐션을 실행하면 현재 사이트의 튜토리얼들이 표시되며 클릭을 통해 튜토리얼을
쉽게 실행 시킬 수 있다. 보기 모드 에서는 페이지를 자유롭게 이동하고 버튼을 클릭하
며 인터렉티브하게 튜토리얼을 따라할 수 있다.

21. 개발자 모드
Hellotutorial 웹페이지 안에 삽입된 hellotutorial SDK를 사용하면 앱이 설치되있지 않
은 상태에서도 튜토리얼을 실행할 수 있다. Hellotutorial SDK는 어느 웹페이지에서나 2
줄의 코드만으로 쉽게 삽입하여 사용할 수 있다.

22. 기술
모든 DOM 객체에 대한 Element path를 다양한 방법으로 식별해서 보관하는 기술과 정적이지
않은 사이트들, 예를들어 사용자의 클릭에 따라 페이지가 동적으로 변하는 one-page routing이
나, 비동기 호출 같은 부분에서의 처리도 가능할 수 있도록 자체 알고리즘을 개발하였다.

23. 0
기술
Script가 해당 웹페이지에 삽입되면서, 기존의 css와 충돌을 방지하는 기술 개발
(36번 이후 슬라이드 참고)

24. 크롬 익스텐션(Chrome Extension)은 무엇인가?

25. 크롬 브라우저 점유율

26. 추후 모든 브라우저에서 익스텐션 사용 가능
브라우저 가능 여부
IE 불가능
EDGE(IE이후버전 브라우저)
(‘2016년 이후 익스텐션 기능 추가’발표)
Chrome 가능
Firefox 가능
Safari 가능
Opera 가능
브라우저 당 익스텐션 가능 여부

27. 자체 도움말 제작 블로그 포스팅 YouTube 동영상
경쟁사

28. 경쟁사 비교
HelloTutorial

29. SDK 판매
B2B
트래픽
광고수익
B2C
수익구조
추후에는 헬로우 튜토리얼 플랫폼 안에서 서비스가 소개되는 것 뿐만 아니라 인터렉티브하게 직접
서비스를 사용할 수 있기 때문에 광고 효과가 극대화 되어 새로운 광고 플랫폼으로 발전할 수 있을
것이라 기대한다. 또한 적용 사이트마다 사용자의 패턴을 분석하여 데이터 정보를 얻을 수 있다.

30. 매년 특정 기간이 되면 네이버 검색 순위에 상위랭킹을 차지하며 사용자들에게 불편을
주는 웹 페이지들이 있다. 예를 들어 연말정산, 예비군 홈페이지, 국가장학금, 각종 대학
학사정보시스템, 직구사이트 등 여러 사이트들이 해당 될 것이다. 이런 사이트들은 복잡한
구조, 익숙하지 않은 UI, 처음 보는 사이트, 언어적인 문제 등으로 사용자들에게 같은 문제를
매년 반복해서 안겨주고 있다. 이러한 웹 사이트 등이 본 서비스의 타겟층이 될 것이다.
타깃
STARTUP
새로운 서비스
프로모션 매체
오픈 SDK 활용
정부
비교적 많은 기능
Q&A 페이지
반복적, 필수적
B2B
10-20대
새로운 웹 페이지
인터넷 사용 꿀팁
흥미 유발 컨텐츠
30-40대
인터넷 사용 대비
친숙하지 않음
해외 직구 컨텐츠
B2C

31. Facebook, Youtube, Kick Starter, Tstory, Blog, 아프리카TV 등
젊은 사람들에게 친숙한 매체에 공격적인 마케팅을 실시하고 회사와 정부 등
공공적 성격을 띄는 곳과 계약을 통해 사내 및 정부에서 HelloTutorial을
이용할 수 있도록 한다.
판매전략
STEP 1
STEP 2
STEP 3
• 유저 확보
• 자금 확보
‘튜토리얼+SDK’ 무료배포, 기본 모델
자기 자본, 클라우드 펀딩, 엔젤 투자
• SDK 판매수익
• 광고 수익
튜토리얼이 필요한 회사들에게 SDK
판매수익 창출, 트래픽 당 광고 수익
• 유료 버전 업그레이드 프리미엄 기능 유료 판매
컨설팅, 위탁 제작 서비스

32. 온라인상의 모든 인터렉티브한 튜토리얼
1단계 2단계
HelloTutorial의 미래
웹 상의 모든 튜토리얼
소프트웨어 튜토리얼
모바일 튜토리얼
국내 뿐만 아니라
해외 사이트 모두
HelloTutorial
모든 소프트웨어,
모바일 상의 튜토리얼
EX) OS(맥, 윈도우), 포토샵 등

33. THANK YOU

34. Hellotutorial이 이루는 기술