SlideShare a Scribd company logo
1 of 40
Download to read offline
HTML5 와 뮤직 모바일 웹
음악서비스 개발팀 양의권 & 박우영
This report contains information that is confidential and proprietary to SK Communications and is solely for the use of SK Communications personnel. 
No part of it may be used, circulated, quoted, or reproduced for distribution outside SK Communications. If you are not the intended recipient of this 
report, you are hereby notified that the use, circulation, quoting, or reproducing of this report is strictly prohibited and may be unlawful.
2010.10
113년 8월 28일 수요일
쉽게 음악을 듣자!!
213년 8월 28일 수요일
쉽게 음악을 서비스하자!!
213년 8월 28일 수요일
문제점 Ⅰ
• 권리(저작권)의 문제
313년 8월 28일 수요일
문제점 Ⅱ
• 추가 프로그램의 설치
413년 8월 28일 수요일
문제점 Ⅱ
• 사용자의 설치액션을 요구
413년 8월 28일 수요일
문제점 Ⅱ
• 사용자의 설치액션을 요구
• 높은 유지 보수 비용
413년 8월 28일 수요일
문제점 Ⅱ
• 사용자의 설치액션을 요구
• 높은 유지 보수 비용
• 단말별로 추가적인 개발이 필요
413년 8월 28일 수요일
문제점 Ⅱ
• 사용자의 설치액션을 요구
• 높은 유지 보수 비용
• 단말별로 추가적인 개발이 필요
• 플랫폼 사업자에게 종속적
413년 8월 28일 수요일
513년 8월 28일 수요일
브라우저를 이용한
모바일 웹서비스
513년 8월 28일 수요일
브라우저를 이용한
모바일 웹서비스모바일
513년 8월 28일 수요일
현재 모바일 웹의 문제점
• 내장플레이어를 통한 단곡재생
• 재생 목록을 관리를 못함
• 재생과 브라우징을 동시에 하지 못함
• 제한적인 음원 재생 서비스제공
613년 8월 28일 수요일
현재 모바일 웹의 문제점
• 내장플레이어를 통한 단곡재생
• 재생 목록을 관리를 못함
• 재생과 브라우징을 동시에 하지 못함
• 제한적인 음원 재생 서비스제공
613년 8월 28일 수요일
현재 모바일 웹의 문제점
• 내장플레이어를 통한 단곡재생
• 재생 목록을 관리를 못함
• 재생과 브라우징을 동시에 하지 못함
• 제한적인 음원 재생 서비스제공
613년 8월 28일 수요일
현재 모바일 웹의 문제점
• 내장플레이어를 통한 단곡재생
• 재생 목록을 관리를 못함
• 재생과 브라우징을 동시에 하지 못함
• 제한적인 음원 재생 서비스제공
613년 8월 28일 수요일
모바일웹 구현의 문제점
• 브라우저만으로 음악재생의 어려움
• 페이지 이동으로 인한 연속적인 재생 불가
• 어플리케이션 대비 열악한 UI 및 UX
713년 8월 28일 수요일
모바일웹 구현의 문제점
• 브라우저만으로 음악재생의 어려움
• 페이지 이동으로 인한 연속적인 재생 불가
• 어플리케이션 대비 열악한 UI 및 UX
(HTML5 를 통해 해결)
713년 8월 28일 수요일
모바일웹 구현의 문제점
• 브라우저만으로 음악재생의 어려움
• 페이지 이동으로 인한 연속적인 재생 불가
• 어플리케이션 대비 열악한 UI 및 UX
(HTML5 를 통해 해결)
(페이지 이동을 제거)
713년 8월 28일 수요일
모바일웹 구현의 문제점
• 브라우저만으로 음악재생의 어려움
• 페이지 이동으로 인한 연속적인 재생 불가
• 어플리케이션 대비 열악한 UI 및 UX
(HTML5 를 통해 해결)
(페이지 이동을 제거)
(CSS3를 이용 앱과 같은 사용성)
713년 8월 28일 수요일
해결책 Ⅰ - HTML 5
• AUDIO 태그 지원
(추가적인 프로그램 설치없이 음원 재생)
• 음악재생과 관련된 모든 동작을 자바스크립트로 제어
• 아직 정식 표준이 아님 But, 대부분의 브라우저가 지원예정
(모바일단말에 들어가는 브라우저는 지원)
813년 8월 28일 수요일
해결책 Ⅱ - 페이지 이동 제거
• HTTP 기반의 서비스의 한계점
• Ajax 와 CSS3 로 페이지 이동없이 페이지 내용 변환
913년 8월 28일 수요일
해결책 Ⅱ - 페이지 이동 제거
1013년 8월 28일 수요일
해결책 Ⅱ - 페이지 이동 제거
1013년 8월 28일 수요일
해결책 Ⅱ - 페이지 이동 제거
Player 모듈
1013년 8월 28일 수요일
해결책 Ⅱ - 페이지 이동 제거
Player 모듈
1013년 8월 28일 수요일
해결책 Ⅱ - 페이지 이동 제거
Player 모듈
1013년 8월 28일 수요일
해결책 Ⅱ - 페이지 이동 제거
Player 모듈
1013년 8월 28일 수요일
해결책 Ⅱ - CSS3 를 이용
• CSS3 에서 지원하는 애니메이션 효과
• 화려한 화면이동 효과 지원
• RGBA 등을 통한 다양한 이미지 효과
• 가로보기 모드 지원
1113년 8월 28일 수요일
시 연 Ⅰ
1213년 8월 28일 수요일
효 과
• 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능
• 이 URL을 공유해서 음악 듣기가 가능
1313년 8월 28일 수요일
효 과
• 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능
• 이 URL을 공유해서 음악 듣기가 가능
Click!!
1313년 8월 28일 수요일
효 과
• 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능
• 이 URL을 공유해서 음악 듣기가 가능
1313년 8월 28일 수요일
효 과
• 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능
• 이 URL을 공유해서 음악 듣기가 가능
1313년 8월 28일 수요일
효 과
• 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능
• 이 URL을 공유해서 음악 듣기가 가능
1313년 8월 28일 수요일
효 과 Ⅱ
• 단순히 들려주기만 하면 되는 것인가?
• 음악링크 + 권한 = 합법적인 음원재생
(선결제 상품)
1413년 8월 28일 수요일
선결제 프로세스
링크생성
권한생성
(암호화된 문자열)
링크
링크 + 권한문자열
전곡재생+유효한권한
미리듣기재생
권한구매 미리듣기재생
+권한만료
1513년 8월 28일 수요일
시연 Ⅱ
1613년 8월 28일 수요일
결 론
• 모바일웹을 통해서 앱과 같은 사용성을 구현
• 추가적인 프로그램없이 브라우저만으로 음악재생
• 서비스의 URL정보 <=> 특정 음악을 재생
• 선결재 기능을 통해서 합법적인 음원공유
• 구매가 아닌 청취를 위한 BM제공을 통한 매출증대
• 편리한 음악서비스 제공으로 인한 모바일 음악 시장을 선점
(De Facto Standard)
1713년 8월 28일 수요일
Q & A
1813년 8월 28일 수요일

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Html5를 이용한 음원 공유서비스

  • 1. HTML5 와 뮤직 모바일 웹 음악서비스 개발팀 양의권 & 박우영 This report contains information that is confidential and proprietary to SK Communications and is solely for the use of SK Communications personnel.  No part of it may be used, circulated, quoted, or reproduced for distribution outside SK Communications. If you are not the intended recipient of this  report, you are hereby notified that the use, circulation, quoting, or reproducing of this report is strictly prohibited and may be unlawful. 2010.10 113년 8월 28일 수요일
  • 2. 쉽게 음악을 듣자!! 213년 8월 28일 수요일
  • 4. 문제점 Ⅰ • 권리(저작권)의 문제 313년 8월 28일 수요일
  • 5. 문제점 Ⅱ • 추가 프로그램의 설치 413년 8월 28일 수요일
  • 6. 문제점 Ⅱ • 사용자의 설치액션을 요구 413년 8월 28일 수요일
  • 7. 문제점 Ⅱ • 사용자의 설치액션을 요구 • 높은 유지 보수 비용 413년 8월 28일 수요일
  • 8. 문제점 Ⅱ • 사용자의 설치액션을 요구 • 높은 유지 보수 비용 • 단말별로 추가적인 개발이 필요 413년 8월 28일 수요일
  • 9. 문제점 Ⅱ • 사용자의 설치액션을 요구 • 높은 유지 보수 비용 • 단말별로 추가적인 개발이 필요 • 플랫폼 사업자에게 종속적 413년 8월 28일 수요일
  • 10. 513년 8월 28일 수요일
  • 13. 현재 모바일 웹의 문제점 • 내장플레이어를 통한 단곡재생 • 재생 목록을 관리를 못함 • 재생과 브라우징을 동시에 하지 못함 • 제한적인 음원 재생 서비스제공 613년 8월 28일 수요일
  • 14. 현재 모바일 웹의 문제점 • 내장플레이어를 통한 단곡재생 • 재생 목록을 관리를 못함 • 재생과 브라우징을 동시에 하지 못함 • 제한적인 음원 재생 서비스제공 613년 8월 28일 수요일
  • 15. 현재 모바일 웹의 문제점 • 내장플레이어를 통한 단곡재생 • 재생 목록을 관리를 못함 • 재생과 브라우징을 동시에 하지 못함 • 제한적인 음원 재생 서비스제공 613년 8월 28일 수요일
  • 16. 현재 모바일 웹의 문제점 • 내장플레이어를 통한 단곡재생 • 재생 목록을 관리를 못함 • 재생과 브라우징을 동시에 하지 못함 • 제한적인 음원 재생 서비스제공 613년 8월 28일 수요일
  • 17. 모바일웹 구현의 문제점 • 브라우저만으로 음악재생의 어려움 • 페이지 이동으로 인한 연속적인 재생 불가 • 어플리케이션 대비 열악한 UI 및 UX 713년 8월 28일 수요일
  • 18. 모바일웹 구현의 문제점 • 브라우저만으로 음악재생의 어려움 • 페이지 이동으로 인한 연속적인 재생 불가 • 어플리케이션 대비 열악한 UI 및 UX (HTML5 를 통해 해결) 713년 8월 28일 수요일
  • 19. 모바일웹 구현의 문제점 • 브라우저만으로 음악재생의 어려움 • 페이지 이동으로 인한 연속적인 재생 불가 • 어플리케이션 대비 열악한 UI 및 UX (HTML5 를 통해 해결) (페이지 이동을 제거) 713년 8월 28일 수요일
  • 20. 모바일웹 구현의 문제점 • 브라우저만으로 음악재생의 어려움 • 페이지 이동으로 인한 연속적인 재생 불가 • 어플리케이션 대비 열악한 UI 및 UX (HTML5 를 통해 해결) (페이지 이동을 제거) (CSS3를 이용 앱과 같은 사용성) 713년 8월 28일 수요일
  • 21. 해결책 Ⅰ - HTML 5 • AUDIO 태그 지원 (추가적인 프로그램 설치없이 음원 재생) • 음악재생과 관련된 모든 동작을 자바스크립트로 제어 • 아직 정식 표준이 아님 But, 대부분의 브라우저가 지원예정 (모바일단말에 들어가는 브라우저는 지원) 813년 8월 28일 수요일
  • 22. 해결책 Ⅱ - 페이지 이동 제거 • HTTP 기반의 서비스의 한계점 • Ajax 와 CSS3 로 페이지 이동없이 페이지 내용 변환 913년 8월 28일 수요일
  • 23. 해결책 Ⅱ - 페이지 이동 제거 1013년 8월 28일 수요일
  • 24. 해결책 Ⅱ - 페이지 이동 제거 1013년 8월 28일 수요일
  • 25. 해결책 Ⅱ - 페이지 이동 제거 Player 모듈 1013년 8월 28일 수요일
  • 26. 해결책 Ⅱ - 페이지 이동 제거 Player 모듈 1013년 8월 28일 수요일
  • 27. 해결책 Ⅱ - 페이지 이동 제거 Player 모듈 1013년 8월 28일 수요일
  • 28. 해결책 Ⅱ - 페이지 이동 제거 Player 모듈 1013년 8월 28일 수요일
  • 29. 해결책 Ⅱ - CSS3 를 이용 • CSS3 에서 지원하는 애니메이션 효과 • 화려한 화면이동 효과 지원 • RGBA 등을 통한 다양한 이미지 효과 • 가로보기 모드 지원 1113년 8월 28일 수요일
  • 30. 시 연 Ⅰ 1213년 8월 28일 수요일
  • 31. 효 과 • 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능 • 이 URL을 공유해서 음악 듣기가 가능 1313년 8월 28일 수요일
  • 32. 효 과 • 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능 • 이 URL을 공유해서 음악 듣기가 가능 Click!! 1313년 8월 28일 수요일
  • 33. 효 과 • 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능 • 이 URL을 공유해서 음악 듣기가 가능 1313년 8월 28일 수요일
  • 34. 효 과 • 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능 • 이 URL을 공유해서 음악 듣기가 가능 1313년 8월 28일 수요일
  • 35. 효 과 • 웹기반의 서비스이므로 곡에 대한 링크 생성이 가능 • 이 URL을 공유해서 음악 듣기가 가능 1313년 8월 28일 수요일
  • 36. 효 과 Ⅱ • 단순히 들려주기만 하면 되는 것인가? • 음악링크 + 권한 = 합법적인 음원재생 (선결제 상품) 1413년 8월 28일 수요일
  • 37. 선결제 프로세스 링크생성 권한생성 (암호화된 문자열) 링크 링크 + 권한문자열 전곡재생+유효한권한 미리듣기재생 권한구매 미리듣기재생 +권한만료 1513년 8월 28일 수요일
  • 38. 시연 Ⅱ 1613년 8월 28일 수요일
  • 39. 결 론 • 모바일웹을 통해서 앱과 같은 사용성을 구현 • 추가적인 프로그램없이 브라우저만으로 음악재생 • 서비스의 URL정보 <=> 특정 음악을 재생 • 선결재 기능을 통해서 합법적인 음원공유 • 구매가 아닌 청취를 위한 BM제공을 통한 매출증대 • 편리한 음악서비스 제공으로 인한 모바일 음악 시장을 선점 (De Facto Standard) 1713년 8월 28일 수요일
  • 40. Q & A 1813년 8월 28일 수요일