모바일 앱(app) 디자인과 모바일 시장변화의 이해

63
모바일 (App) 디자인과 모바일 시장 변화의 이해잏 Vercoop Inc 2014-12-03

Upload: seungbeom-ha

Post on 16-Jul-2015

1.206 views

Category:

Mobile


2 download

TRANSCRIPT

Page 1: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 디자인과모바일 시장 변화의 이해잏

Vercoop Inc

하 승 범

2014-12-03

Page 2: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Intro… 하 승 범 Vercoop Inc.

중앙대학교 전기공학과 졸업

삼성전자㈜ 반도체부문, DRAM Assembly Test 및 QC 프로그램 개발1990년 ~

㈜다우기술 멀티미디어사업팀 과장, 멀티미디어 신규사업 및 CD-ROM 기획개발1993년 ~

한국엠엘티㈜ 대표이사, CD-ROM 개발 및 컴퓨터 주변기기 수입유통1996년 ~

㈜다우기술 인터넷사업부 팀장, 인터넷 신규기획 및 원격교육사업1998년 ~

㈜이너베이 부사장, 유무선 메신저 및 콘텐츠 서비스2000년 ~

2005년 ~㈜다우기술 eBiz사업본부장/상무, 유니텔 등 인터넷서비스 사업 및 B2B2C 영업 총괄

2010년 ~㈜다우데이타 모바일사업본부장/상무, 스마트폰 및 태블릿PC B2B 서비스 및 사업총괄

2012년 ~ ㈜다우기술 콘텐츠사업본부장/상무, 영화/방송콘텐츠 부가판권유통 및 뉴미디어 사업

한국사업총괄/상무 2014년 ~ 미디어 콘텐츠 유통 플랫폼 사업추진

Page 3: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App)의 이해와 시장현황

Section 01

Page 4: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

스마트폰 사용자의 급속한 증가

7,200백만명

2,500백만명

34.7%

5,567만명

3,904만명

70.1%

출처 : 미래창조과학부 2014-06. 통계청 2012-12, Portio Research/SA 2013

407백만명

2,400백만명

589.6%

2015년 12월 예상 2014년 6월 2013년 12월

Page 5: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일, 대한민국을 지배하다

출처 : 닐슨코리아클릭 2014-10

스마트폰 사용자

3,904만명

유선인터넷이용률

77.0% ↓

Only 모바일이용률

11.3% ↑

안드로이드이용자비율

92.7%

매일 모바일인터넷이용

85.0%

일평균 모바일이용시간

96분

Page 6: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 유형과 그 비교

Native App Web App Hybrid App

장 점구동속도가 빠르다가장 동적으로 표현할 수 있다인터넷 연결 없이 사용가능

개발기간이 짧다업데이트, 수정변경이 용이하다mOS 무관 웹브라우저로 접근

구동속도는 중간필수적인 요소만으로 개발가능동적인 데이터는 실시간 통신

단 점개발기간, 비용이 상대적 높다앱스토어를 통해 등록 배포각기 다른 mOS,버전별 개발

인터넷 접속으로 구동이 느리다스마트폰 특정기능 사용불가(GPS, 카메라, 센서기능 등)

자체 사이트만 지원하므로타 사이트 브라우징 불가능네비게이션 사용자 불편함 증가

비 고빠른 구동속도 및 스마트폰에최적화된 앱(App) 개발가능

웹브라우징을 통한 높은 접근성별도의 설치과정이 없이 사용

Native App과 Mobile App의장점을 수용한 방식

Device APIs Device APIs

Native Application Mobile Browser

Web Code

HTML5/CSS/JS

Native Container

Web Code

HTML5/CSS/JS

Page 7: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) = 네이티브 앱(App)

모바일 앱(App) 시장은 모바일 기기에 최적화되어 개발되는 네이티브 앱(App) 주도

웹 앱(App) 콘텐츠 적용 편리, HTML5 개발경험부족, 멀티플랫폼 최적화문제로 한계

네이티브 앱(App)과 웹 앱(App)의 장점을 수용한 방식의 ‘하이브리드 앱(App)’성장

632 1,005

1,366 1,764

2,202 2,625

8

15

22

32

45

62

2012 2013 2014 2015 2016 2017

모바일 앱(App) 모바일 웹(Web)

출처 : 가트너 2013-09

단위 ; 억건

Page 8: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App), App Store 분류

애플 83만개, 구글 67만개, 블랙베리 4만개, 원도우폰 3.5만개 (2013년 3월 기준)

애플 120만개, 구글 130만개, 원도우폰 30만개, 아마존 24만개 (2014년 6월 기준)

주요사업자들은 App Store 플랫폼을 통해 생태계(Eco-System)을 장악하기 위해 경쟁

단말제조 운영체계개발 통신서비스 독립사업자

주요사업자

Apple App StoreBlackberry App WorldLG SmartWorldNokia OVI StoreSamsung AppsHTC Apps

Google PlayWindows Phone StoreMS one AppFirefox MarketplaceWindows Store

SKT T스토어KT 올레마켓AT&T App CenterChina Mobile MarketOrange App. Shop

Amazon Appstore네이버 N스토어AndAppStorebPlayOnlyAndroidSlideMe

Store 13개 5개 약 30여개 100여개 이상

출처 : Reseach2Guidance 2013-06

개발자 App Store 사용자

판매등록 및 업로드 App 다운로드

수익분배 지불결제

Page 9: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 시장 급성장, 그러나...

출처 : 가트너 2014-01

다운로드 증가추이 2012 2013 2014 2015 2016 2017

무료 모바일 앱(App) 57,331 92,876 127,704 167,054 211,313 253,914

유료 모바일 앱(App) 6,654 9,186 11,105 12,574 13,488 14,778

Free App (%) 89.6% 91.0% 92.0% 93.0% 94.0% 94.5%

단위 ; 벡만건

모바일앱 매출전망 2012 2013 2014 2015 2016 2017

Paid App 82.8% 75.9% 69.5% 59.5% 47.5% 37.8%

In-app purchase 11.4% 17.2% 22.5% 30.9% 40.8% 48.2%

Mobile AD 5.8% 6.9% 8.1% 9.6% 11.6% 14.0%

단위 ; %

이제 유료 모바일 앱(App)의 시대는 갔다.

무료 모바일 앱(App)으로 마케팅을 한 후, 유료 업그레이드 진행

무료 모바일 앱(App) 내부에서 콘텐츠 또는 제품의 구매 유도

Page 10: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 무료가 확산될 전망

2013-01 2013-11

Free App

Paid App

In App Purchase

89%

6%

5%

98%

1%

2013-01 2013-11

77%

11%

12%

92%

4%

출처 : Distimo 2013-12, eMarketer 2013-12

무료 모바일 앱(App) 수요와 공급이 확대되면서 지속적으로 확산될 전망.

특정한 업무를 확실히 처리하는 실용적인 유료 모바일 앱(App) 시장 존재

모바일 앱(App) 자체로 수익을 내는 것이 아니라 활용하여 수익을 내는 구조로 변화

단위 ; 수익비중 (%)

In App Purchase

Paid App

Free App

Page 11: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 요즘 많이 듣는 말!

“이제 모바일 앱(App)이라면 나올 만큼 나오지 않았나?”

“이젠 새로운 혁신적인 서비스가 또 나올께 있을까?” “그런게 뭐가 있지?”

1,300,000

1,200,000

300,000 240,000

130,000

Google Play Apple App Store Windows Phone Store Amazon Appstore BlackBerry World

출처 : Statistica 2014-07

단위 ; 모바일 앱(App) 등록숫자

Page 12: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 하지만 우리 주변은?

“여전히 불편해!!”

Page 13: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

그러나 모바일 앱(App) 현실는?

2014년 출시된 앱(App) 중에서 100만 이상 다운로드 된 앱(App)은? 단, 게임은 제외

(2014년 1월) (2014년 6월) (2014년 9월)

2011년 2013년

최근 1개월 모바일 앱(App) 다운로드 빈도.

77.4%

66.1%

Page 14: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

그러면 모바일 앱(App) 성공의 방향?

만능? 글쎄! 모바일 앱(App)시장에서는 선택과 집중 관점에서 기회 ↑

더 깊고 좁은 문제(Problem) 해결에 집중하는 것이 성공 가능성을 높인다.

Page 15: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 성공조건!

음식주문/배달, 숙박, 부동산, 쿠폰/마일리지, 주차장/자동차공유, 차량수리 ↑

O2O(Online-to-offline) IoT(Internet of Things) 웨어러블 디바이스 …

⑴ 강력한 Field Player

Page 16: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 성공사례

시장점유율 20%↑

재방문율 90%↑

어린이집/유치원 수기 알림장을 스마트폰 알림장으로 대체

Page 17: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 성공조건!

The Intersection of Mobile and Physical World

How to Get Mobile Contextual Data and Analyze It

⑵ 경쟁력있는 Tech Company

Cloud Integration – Intelligence from Data

Intelligence and Cognition

New Mobile Devices

Page 18: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 성공사례

‘이미지 인식기술’을 통해 이미지를 통한 정보검색 기술개발

Barrel = 82.8%

Triumphal arch = 100%

Page 19: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) 성공사례

‘이미지 인식기술 (Image Recognition)‘과 ‘Fashion’의 결합

Page 20: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

하지만 모바일 앱(App) 시장은 …

Nick D'Aloisio

Page 21: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 환경에 적합한 사용자 경험 디자인

Section 02

Page 22: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

UX is not UI

UI (User Interface)

사용자 경험을 만드는 구체적인 행동 관찰 사용자와 서비스를 잘 이용하도록 지원

경험에 따른 ‘감성요소’↑소비자 선택 지원 ‘화면설계’를 통해 사용자의 편리성 증대

UX (User eXperience)

EMOTIONAL TECHNICAL

UI is a Small Part of UX, UX Designers and UI Developers are Complementary

Page 23: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

UI ; User Interface 구성요소

Status Bar

Navigation Bar

Custom Bar

Tab BarToolBar

Page 24: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

UI ; User Interface 와 콘텐츠

(1) 동적 콘텐츠 (Pull); 변동기준 분류기법

(2) 정적 콘텐츠 (Push); 관리자에 의한 조정

(3) 킬러 콘텐츠; 전략적인 콘텐츠; 프로모션 연계; 오프라인 이벤트

Page 25: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

“모바일 환경에 적합한 사용자 경험 디자인”

모바일 앱(App) UX/UI

UX UIDesigning for Emotion User Interface

Usable Useful

“제품 = 디자인, 감성, 사용성, 편리성의 결합체”

Page 26: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

“사용자 경험은 디자인의 대상이 될 수 있는가?”

“사용자 경험(UX)는 규칙(Pattern)을 찾는 작업”

모바일 앱(App) UX is Everything

“UX은 Design되지 않고, UX Pattern를 Design한다”

Page 27: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Usability Findings & Guidelines

A B

Page 28: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Context of Mobile Interaction

Page 29: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 앱(App) UX/UI

Page 30: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

UX=인간+기술+비즈니스=종합 디자인

기술(Technology)

비즈니스(Business)

인간가치(Value of Human)

단순생산

상호작용디자인

조직행동

모바일UX

Page 31: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 UX 의 중요성

본 능 신 뢰기 억 행 동

사용자 경험 (UX) = 사용자의 최종 목적인 “행동”을 끌어내는 것

사용자 경험 (UX) = 복잡한 것을 쉽게 “단순”하게 만드는 것

사용자 경험 (UX) = 본능 = 기억력 = 무의식적 행동 = 규칙

사용자 경험 (UX) = 사람들이 기억하는 사소한 경험

사용자 경험 (UX) = 사용자의 규칙(Pattern)를 디자인한다

Page 32: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Web과 다른 모바일 UX/UI 개념

모바일 기기(H/W) 구성과의 연관성

사용자와 24시간 함께하는 밀접성

사용자와 상호작용(Interaction)하는 환경

Touch, Gesture, Audio 등을 이용한 입력(Input)방식

모바일 기기가 갖고 있는 센서(Sensor)를 적용하는 환경

휴대성(Mobility)이 극대화된 환경

모바일 운영체계(OS)가 탑재된 환경

Page 33: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

UX & UI ; App 전략 및 목표 설정

⑴ Customer 선언 + Life Goal → Target Customer

⑵ Target Customer의 Experience Goal 선언

⑶ Contents + Service (Function) 영역 선언

⑷ Contents & Function List

⑸ Persona에 의한 Activity 도출

Page 34: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

UX & UI ; App 전략 및 목표 설정

⑹ Service Scenario 설계

⑺ Task 선언 ; Activity 그룹화

⑻ Task & Flow 설계

⑼ Service Logic 설계 → Sketching

⑽ Page Code별 UI Component 구성도

Page 35: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 UX 프로세스

사업기획아이디어

시장조사고객분석

IA 설계(정보구조도)

Mobile UIStoryboard

Visual Design User Test

아이디어발상

모바일향아이디어

모바일기획키포인트

시장조사Research

모바일환경트렌드이해

고객분석Research

결과도출

Mobile IA설계

Service Flow(Flow Chart)

Mobile UIDesign

Storyboard작성

Wireframe작성

SourceCoding

Mobile UIPattern설계

서비스별 UIPattern설계

Interface UI설계

Visual StyleGuide

Mobile GUIGuideline

Mockup제작

기본단계 패턴설계

Page 36: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 UX 의 4가지 원칙

⑴ 디자인 하기 전, 상황을 이해하고 질문하라

⑵ 유연한 UXD(User Experience Design)을 한다

⑶ 모든 사용자가 당신과 같지 않다는 사실을 인정한다

⑷ 공감하고 더 좋은 경험을 디자인한다

UX Pattern Design = “관심”과 “호기심” 그리고 “소통”

Page 37: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

모바일 ICT 트랜드를 이해해야 성공한다

Section 03

Page 38: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

기술혁신은 새로운 행동양식과 인간관계 요구

“Wheel of Disruption”

Page 39: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

끊임없이 나타나는 혁신 기술과 새로운 매체, 기기

Internet of Things Amazon Drone Wearable Device

3D Printer Smart TV Smart Healthcare

Page 40: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Wearable Device is a Fashin Accessory

Page 41: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Wearable ; ‘스마트워치’ App 생태계와 디자인

Page 42: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

메이커 혁명의 시대 ; DIY문화의 기술기반 확장

Page 43: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

메이커 혁명의 시대 ; Funding 구조의 변화

“USD 10,266,846”

“USD 2,437,429”

Page 44: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Visual Computing ; Virtual AI + AR

Page 45: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

가상현실 대중화로 확산될 수 있을까?

Page 46: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Visual Computing ; VR과 스마트폰의 만남

Page 47: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Internet of Things ; 초연결시대 사물인터넷

“SDK & App Store”

“App as a Service”

With the Smartphone

“Open Hardware”

“H/W as a Service”

Next of Smartphone

Internet of Things ;

with Intelligence

with Connectivity

with Sensor

with App

Page 48: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Internet of Things ; 우리 생활 속 사물인터넷

Page 49: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Always-Connected People

Page 50: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

수치와 데이터로 읽혀지는 삶 ; Quantified Self

Page 51: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

넘쳐나는 데이터와 정보 ; Big Data의 미래는?

Page 52: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Omni-Channel ; 메시지와 정보의 과잉시대

Page 53: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Omni-Channel ; 정보취득과 의사결정과정 다변화

Page 54: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

온 오프라인 유통경로의 변화 ; 쇼루밍, 모루밍

Page 55: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Cognitive Computing and Robot

Page 56: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Social Robot ; 또 하나의 가족 소셜 로봇

Page 57: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Industrial Economy vs. Sharing Economy

“Money”

“Centralized”

Industrial Economy

“People”

“Distributed”

Sharing Economy

“Global” “Local”

Page 58: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

콘텐츠 유통방식 ; 전통적인 TV 방송시장지형 변화

Operator Walled-Garden Service Over The Top (OTT) Service

통신사업자가 영화, 방송 등 콘텐츠를 구매하여“자사 가입자” 대상으로 서비스

사업자가 영화, 방송 등 콘텐츠를 구매하여 “인터넷에 연결된 모든 이용자” 대상으로 서비스

ex, 국내 통신사 IPTV, Cable TV MSO ex, Netflix, HuluPlus, Amazon, Smart TV

OTT, 미국에서 (1) 플랫폼 확보 용이 (2) 초기 투자비용 낮은 편 (3) 상대적 규제에서 자유로움, 성장

Over The Top 사업자 유형

가입자기반 사업자

Netflex, Hulu

가입자에게 월정액을 받고 콘텐츠 사업자로 부터 구매한 콘텐츠를 서비스이용자에게 제공하는 사업자. “Contents Aggregator”

광고기반 사업자

Youtube

광고를 기반으로 짧은 동영상, UGC, 뮤직비디오 등을 주로 제공하고 광고수익을 얻는 사업자

e커머스기반 사업자

Amazon

기존 아마존 고객을 대상으로 동영상 콘텐츠의 판매를 위한 복합상품 등을연계한 N스크린 서비스 사업자.

국내 서비스 사업자 지상파 콘텐츠연합, 푹(Pooq) 유료방송 CJ헬로비전, 티빙(Tving)

Page 59: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

콘텐츠를 활용한 “시간점유율”에 집중하라!

단순함을 통한 결정적 순간의 획득 ; Member’ “moments of truth”

콘텐츠 소비방식 변화 ; Cliffhanger Ending vs Binge Viewing

‘제로TV가구’ 증가세 확대, 이것이 ‘TV 종말의 시대’의 종말인가?

Page 60: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

짧고 굵은 드라마 ”웹드라마” ; “스낵컬처”

모바일 기기에서 시청, 적합한 10~1분 분량 영상 콘텐츠

짧은 시간 간편하게 소비하는 문화 콘텐츠(웹툰, 웹소설, 웹드라마) 활성화

‘클립형 영상“ 공유에서 “창작형 영상“ 콘텐츠로 진화

기존 TV 드라마와는 다르게 접근 – 젊은 세대를 목표하라

TV, 중장년 고시청, 모바일 영상 젊은층 고시청

⑴ 다양한 소재의 웹툰 영상화로 진화 ⑵ 아이돌 중심의 다양한 배우 캐스팅

기업의 새로운 마케팅 Tool! 간접광고(PPL)의 진화

기존 TV방송 대비 낮은 제작비 ( TV드라마 1편 = 웹드라마 시즌 1 (6편))

기업이 직접 웹드라마를 제작 = 모바일 소셜 등 다양한 유통매체의 확대

Page 61: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

‘스낵컬처“의 성장전략 ; “재미있고 유용한 콘텐츠”

Page 62: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

Internet of Everything

From Mobile First to Mobile Centric

Page 63: 모바일 앱(App) 디자인과 모바일 시장변화의 이해

[email protected]

seungbeomha

@seungbeom

stevenh.net / stevenh.co.kr