2012년 웹월드컨퍼런스 발표자료, 이미 꽤 시간이 지나버리긴 했지만 '포털'이라는 서비스에 대해 다시금 생각해보게 된 계기, 그리고 모바일에서의 '포털'이란 어떤 역할을 해야할지에 대한 고민. 초기 자료라 공유하긴 쑥스럽지만 히스토리 정리차원에서.. :D [Content] Portal Portal @Mobile Pattern: Daily, Weekly = Chance Context: on/offline, in/out = Experience Device: Button size, GPS, etc. = Focus Portal @PC = Start-page (Browser) Portal @Mobile = Main-page (Shortcut)

1. 포털 관점에서 본 웹 디자인 이슈 및 UX동향
Daum UX2팀
김기성

2. 포털 관점에서 본 웹 디자인 이슈 및 UX동향

3. 포털 관점에서 본
웹 디자인 이슈 및 UX동향

4. 포털 관점에서 본
웹 디자인 이슈 및 UX동향

5. 포털 관점에서 본 웹 디자인 이슈 및 UX동향

6. 포털 관점에서 본 웹 디자인 이슈 및 UX동향

8. 포털 관점에서 본 웹 디자인 이슈 및 UX동향
n. 입구가 되는 사이트라는 뜻으로 수많은 사이트를 특정한 분류에 따라 정리해놓고 주소를 링크시켜서 사용자들이 원하는 곳을 쉽게 찾아갈 수 있도록 만든 사이트를 이르는 말

9. http://www.giantbomb.com/stargate-command/95-2798/all-images/52-412658/stargate/51-1288601/

10. http://www.flickr.com/photos/a440/2065934413/

11. http://www.flickr.com/photos/a440/2065934413/
입구가 되는
이동이 쉬운
원하는 곳에 쉽게 접근할 수 있는

12. GATEWAY
http://durl.kr/3turen

13. Start-page

14. 자사 서비스로의 Gateway
자사 서비스로의 Gateway
타사서비스로의 Gateway
자사 서비스로의 Gateway

15. 타 서비스로의 Gateway
타 서비스로의 Gateway
타 서비스로의 Gateway
자사 서비스로의 Gateway

16. GATEWAY

17. “ Portal is Dead. ”

18. “the enterprise portal as we know it (a one-size-fits-all web site with some personalization features) is dead.
Our devices, be it laptops, smart phones or tablets, will be our new enterprise portals.”
Oscar Berg, Digital Strategist & Business Analyst
http://durl.kr/3tumks

19. “the old portal is dead. it’s not just about how we take traditional marketing and stick it on these devices, but how we can use technology to create newer, more immersive experiences that are BETTER than anything else we’ve ever seen.” Rob Bennett, MSN executive Producer
http://durl.kr/3tumgv

21. “A focus on shifting Yahoo’s platform to mobile. Being friendly to partners across a range of companies from mobile carriers to social networks to hardware makers.” Marissa Mayer, New Yahoo CEO
http://durl.kr/3tux2x

22. “Our programmers are doing work on mobile first, We’ll still have a desktop version, but we’ll also have one on a high-performance mobile phone. The top programmers want to work on mobile apps.” Eric Schmidt, Google CEO
http://durl.kr/3tvb2i

23. http://durl.kr/3tvb2i

24. 2000
2005
1000
0
500
750
250
PC
Smartphone
http://durl.kr/3tvexi
2010
2015
Sales
Time
Smartphone sales overtook PC sales

25. 2000
2005
1000
0
500
750
250
PC
Smartphone
http://durl.kr/3tvexi
2012
2010
2015
Sales
Time
Smartphone sales overtook PC sales

26. 2000
2005
1000
0
500
750
250
PC
Smartphone
http://durl.kr/3tvexi
2015
2010
2015
Sales
Time
Smartphone sales overtook PC sales

27. 2000
2005
2010
1000
0
500
750
250
http://durl.kr/3tvexi
한메일, 카페
97 99
미디어 다음
03
tv팟
06
자체 검색엔진
07
스카이뷰, 로드뷰 오픈
09
tv팟앱
08
지도앱
09
마이피플
10
뮤직앱
11
사전앱
12
2015
Sales
Time
13
14
15
Smartphone sales overtook PC sales

29. PC Ver.
Mobile Ver.
London Olympic

30. PC
Mobile
100
200
300
400
500
600
London Olympic | Page View

31. PC
Mobile
London Olympic | Page View
X 1.7
100
200
300
400
500
600

32. PC: 3
Mobile:7
출처: 나스미디어
London Olympic | 하이라이트 시청

34. Pattern
Context
Device
Portal

35. Pattern
Context
Device
Portal

36. Pattern
Context
Device
Portal
Daily, Weekly

37. 0
Traffic
23
Smart phone
PC
12
6
Time
18
Daily | PC & Mobile Traffic

38. 0
Traffic
0
PC
Smart phone
23
12
6
Time
출근
18
06:00~08:00
기상
Daily | PC & Mobile Traffic

39. 0
Traffic
0
PC
Smart
phone
23
12
6
18
Time
학교/ 직장
점심
09:00
Daily | PC & Mobile Traffic
학교/ 직장
17:00

40. 0
Traffic
0
PC
Smart
phone
23
12
6
Time
퇴근
취침
18
Daily | PC & Mobile Traffic
18:00 ~ 23:00

41. 출/퇴근 시간

42. Game
출/퇴근 시간 | Killing Time

43. Game
출/퇴근 시간 | Killing Time

44. Gossip
출/퇴근 시간 | Killing Time

45. FUN
출/퇴근 시간 | Killing Time

46. 취침 전 | Entertainment
Webtoon

47. Movie
취침 전 | Entertainment

48. 월
Traffic
0
PC
일
금
수
토
Time
화
목
Smartphone
Weekly | PC & Mobile Traffic

49. 월
Traffic
0
PC
일
금
수
토
Time
화
목
Smartphone
토 ~ 일
월 ~ 금
Weekly | PC & Mobile Traffic

50. Weekdays | 날씨

51. Weekdays | 주식

52. Weekend | 지도

53. Weekend | 맛집

54. Mobile Traffic 분석을 통한 순환구조 개선
Case Study

55. Case Study | Mobile 순환개선

56. Case Study | Mobile 순환개선

57. Case Study | Mobile 순환개선

58. Pattern
Context
Device
Portal
Chance
=

59. Pattern
Context
Device
Portal
Chance
=

60. Pattern
Context
Device
Portal
On/Offline, in/Out

61. http://durl.kr/3u222t
Outside
Home
Offline
Mobile Context

62. http://durl.kr/3u264i

63. Mobile Context | Offline

64. Mobile Context | Offline

65. Mobile Context | Offline

66. Mobile Context | Offline

67. Mobile Context | Offline

68. Mobile Context | Home

69. Mobile Context | Home

70. Mobile Context | Home

71. Mobile Context | Outside

72. Mobile Context | Outside

73. Daum 지도 필드 리서치를 통한 Context파악
Case Study | Field Research

74. 74
다음 모바일 지도 사용 특성 이슈 4.
도보사용자는 이동 하면서 목적지까지의 경로를 재확인 하기 위해 간헐적으로 지도 앱을 켜서 현위치 및 경로를 파악함
- 목적지까지 제대로 가고 있는지 확인하기 위해 이동 중간중간 앱을 켜서 현위치를 확인함
- 초행길인 경우 로드뷰 기능을 활용해서 주변을 탐색하는 행위도 발견됨
Case Study | Field Research

75. 다음 모바일 지도 사용 특성 이슈 3.
실시간 교통 정보 이용을 위해 네비게이션 앱을 사용하고 있음
- 네비게이션 앱은 실시간 교통 정보를 확인하기 위해 사용 한다고 응답함
- 네비게이션 앱의 경우 경로 이탈 시에 재안내가 네비게이션 대비 느려 불편하다는 의견도 다소 있었음
- 모바일의 화면 사이즈는 작아서 메인 네비게이션으로 사용하기에 무리라고 지적하였음
Case Study | Field Research

76. Case Study | Field Research

77. Case Study | Field Research

78. Case Study | Field Research

79. Case Study | Field Research

80. Case Study | Field Research

81. Pattern
Context
Device
Portal
Experience
=
Chance
=

82. Pattern
Context
Device
Button Size,GPS,etc.
Chance
=
Experience
=
Portal

83. Display
Interaction
GPS
Camera
Mic., SPK
Mobile Device

84. 57
144
57
144
Mobile Device | Button Size

85. http://durl.kr/3u2k8h
Mobile Device | Button Size

86. http://durl.kr/3u2k8h
Mobile Device | Gyro Sensor

87. http://durl.kr/3u2k8h
Mobile Device | GPS

88. http://durl.kr/3u2k8h
Mobile Device | GPS

89. Case Study | Guideline

90. Pattern
Context
Device
Focus
=
Chance
=
Experience
=
Portal

91. Pattern
Context
Device
Focus
Chance
=
Experience
=
=
Portal

92. GATEWAY

93. Pattern
Context
Device
Portal in PC ?

94. (Browser) Start-page

95. Pattern
Context
Device
Portal in Mobile ?

96. GATEWAY ?

97. 15개의 이동 Gateway (+전체 이동)
8개의 이동 Gateway
3개의 이동 Gateway
18개의 이동
Gateway

98. Portal in Mobile | Gateway
4개의 이동 Gateway (+ 전체이동)

99. Portal in Mobile | Compact Screen

100. Portal in Mobile | Hidden Screen

101. Portal in Mobile | Hidden Screen

102. Portal in Mobile
http://durl.me/3we4zm

103. Portal in Mobile | Personalized Screen

104. Portal in Mobile | Personalized Screen

105. Portal in Mobile | Personalized Screen

106. Portal in Mobile | Personalized Screen

107. Portal in Mobile | Personalized Screen

108. Portal in Mobile | Personalized Screen

109. Portal in Mobile | Personalized Screen

110. Portal in Mobile | Personalized Screen

111. Portal in Mobile | Personalized Screen

112. Desktop
Step 1
•Windows XP/7/8, OSX, etc.
Portal in PC | Task Flow
Browser
Step 2
•Explorer, Chrome, Firefox, etc.
Services
Step 4
•포털 - 뉴스, 카페, 블로그, 쇼핑
•일반 – 각 홈페이지, 쇼핑몰, SNS서비스 등
Start-page
Step 3
•포털 페이지: 네이버, 다음, 네이트

113. Desktop
Browser
Services
Step 1
Step 2
Step 4
•포털 - 뉴스, 카페, 블로그, 쇼핑
•일반 – 각 홈페이지, 쇼핑몰, SNS서비스 등
•Explorer, Chrome, Firefox, etc.
Start-page
Step 3
•포털 페이지: 네이버, 다음, 네이트
Portal in PC | Task Flow
Main Gateway: Browser 시작페이지
•Windows XP/7/8, OSX, etc.

114. Main Page
Step 1
•주요 어플리케이션 (Page Flicking)
Portal in Mobile | Task Flow
App / Web
Step 2
•Phone: 전화, 메시지, 카메라
•Browser: 사파리, 오페라, 크롬 등
•Social: 메신저, SNS
•Portal: 네이버, 다음, 네이트
•Portal Services: 뉴스, 카페, 블로그 등
Browser
Step 3
•Portal: 네이버, 다음, 네이트
•Portal Services: 카페, 블로그, 쇼핑 등

115. Main Page
Step 1
•주요 어플리케이션 (Page Flicking)
Portal in Mobile | Task Flow
App / Web
Step 2
•Phone: 전화, 메시지, 카메라
•Browser: 사파리, 오페라, 크롬 등
•Social: 메신저, SNS
•Portal: 네이버, 다음, 네이트
•Portal Services: 뉴스, 카페, 블로그 등
Browser
Step 3
•Portal: 네이버, 다음, 네이트
•Portal Services: 카페, 블로그, 쇼핑 등
Main Gateway: Device 페이지 아이콘

116. Main Page
Step 1
•주요 어플리케이션 (Page Flicking)
Portal in PC | Task Flow
Main Gateway: Device 페이지 아이콘
Portal in Mobile | Task Flow
Start-page
Step 3
•포털 페이지: 네이버, 다음, 네이트
Main Gateway: Browser 시작페이지

117. Portal in Mobile | WEB vs. APP
순위
전월 순위
서비스 명
1
1
네이버
2
2
다음
3
6
구글 (.com)
4
3
구글 (.co.kr)
5
4
티스토리
6
7
페이스북
7
5
네이트
8
8
Youtube
9
32
Twitter
10
10
머니투데이
* Mobile Web 이용률 (10월, 순방문자 기준, Korean Click)

118. Portal in Mobile | WEB vs. APP
순위
전월 순위
서비스 명
1
1
카카오톡
2
2
카카오스토리
3
3
애니팡
4
4
네이버
5
-
드래곤 플라이트
6
9
캔디팡
7
5
페이스북
8
7
네이버 지도
9
6
멜론
10
8
Photo Wonder
* Mobile App 이용률 (10월, 순이용자 기준, 프리로드 앱 제외, Korean Click)

119. Portal in Mobile | WEB vs. APP
2012. 11. 16

120. 포털 관점에서 본 웹 디자인 이슈 및 UX동향

121. GATEWAY

122. Mobile Focus

123. Mobile First

124. Device
Focus
=
Context
Experience
=
Pattern
Chance
=
Portal in Mobile ?
Portal in PC ?

125. Device
Focus
=
Context
Experience
=
Pattern
Chance
=
Portal in PC ?
=
Browser Start-page
Portal in Mobile ?

126. Device
Focus
=
Context
Experience
=
Pattern
Chance
=
Portal in Mobile ?
Portal in PC ?
=
Browser Start-page
=
Device Main Page Icons

127. 감사합니다.
e-mail: heisk@daumcorp.com
twitter: @pentaxzs