모바일 콘텐츠를 디자인할 때 고민해야할 점들은 어떤 것들이 있을까요? 플랫폼을 넘어선 콘텐츠, 콘텐츠를 넘어선 플랫폼, 이 두가지 관점을 통해 모바일 UX디자인 원칙을 짚어보려했습니다. :)

1. 다음커뮤니케이션
UX2팀, 김기성
모바일 콘텐츠 관점에서 본 2014년 UX디자인 인사이트
!
MOBILE CONTENT
UX DESIGN

2. 오늘,

3. 콘텐츠

4. 플랫폼

5. UXD

7. 콘텐츠

8. 플랫폼
!
!
!
콘텐츠

9. 플랫폼
!
!
!
콘텐츠 VISUAL DESIGN
INTERACTION DESIGN
INFO. ARCHITECTURE

10. 콘텐츠

11. 사용자 중심
콘텐츠

12. 맥락적이다1
사용자의 목적 달성에 도움이 될 수 있도록 함
사용자 중심 콘텐츠는..

13. 사용자 중심 콘텐츠는..
간결하다2
내용을 명확히 함으로써 핵심을 전달함

14. 일관적이다3
논리적인 범위에서 일관성을 유지할 수 있어야 함
사용자 중심 콘텐츠는..

15. 콘텐츠
플랫폼

16. CONTENTS
OVER PLATFORM

17. 사람들이 필요로 하는 것만 제공하라
자르고 자르고 또 잘라라
핵심부터 써라, 역 피라미드 형태로 써라
언어의 담장의 허물어라
유용한 정보를 제공하는 것으로 시작하라
용도별로 정보를 여러 층으로 나누어라.
모바일 콘텐츠
Letting go of the words: Writing Web Contents that works / Janice Redish

18. There’s no such Thing as
content strategy for mobile.
- Karen McGrane / Contents Strategy for Mobile

19. ‘모바일은 PC의
LITE 버전이 아니다.’

20. 모바일은 PC의 LITE 버전이 아니다.
2
2
1
1
1

21. 모바일은 PC의 LITE 버전이 아니다.
1 1
2
2

22. 모바일은 PC의 LITE 버전이 아니다.

23. 모바일은 PC의 LITE 버전이 아니다.
카페1.0
카페2.0

24. http://www.pewresearch.org/fact-tank/2014/02/04/overseas-users-power-facebooks-growth-more-going-mobile-only/
69%
31%
모바일만
이용
멀티
플랫폼
이용
모바일은 PC의 LITE 버전이 아니다.

25. ‘ONE 소스,
MULTI 유즈’

26. ONE 소스, MULTI 유즈
19~27’ 10 4

27. 10 4
ONE 소스, MULTI 유즈

28. 반응형 웹 디자인
Responsive Web Design

29. 1
가변형 그리드
2 유동형 이미지
3 @media screen and (max-width: 600px)
미디어 쿼리
반응형 웹 디자인

30. ONE 소스, MULTI 유즈

31. ONE 소스, MULTI 유즈

32. ONE 소스, MULTI 유즈

33. ONE 소스, MULTI 유즈

34. 유지보수의 용이함
예측할 수 없는 해상도의 대응
공유된 콘텐츠의 단말별 대응
해상도별 가독성 대응
동일한 하나의 콘텐츠 제공
개발
기획
UX
UX
개발
반응형 웹 디자인

35. 하지만,

38. PC 반응형 디자인
모바일 반응형 디자인
반응형 디자인
ONE 소스, MULTI 유즈
반응형 디자인

39. PLATFORM
OVER CONTENTS

41. https://medium.com/platypus-journal/is-history-repeating-itself-33390aeb6cd9
Social and mobile converged,
becoming the primary form of
distribution for our content.
- Jonah Peretti / Buzzfeed CEO

42. FIXED DEVICE
안정적 네트워크
마우스 이용
고정된 시선 큰화면
안정적 전원

43. MOBILE DEVICE
분산된 시선
가변적 네트워크
제한적 배터리
작은 화면
핑거터치 기반

44. http://www.businessinsider.com/mary-meekers-2014-internet-presentation-2014-5?op=1
스마트폰 사용자는 여전히 큰 증가추세

45. http://www.moneyweek.co.kr/news/mwView.php?no=2013122900508043614
스낵컬쳐짧은 시간에 간편하게 즐기는 문화를 말하는 것으로 대중화된 스마트기기를
활용, 출퇴근시간, 점심시간 등을 활용 10~15분 안팎의 웹·모바일 영상
콘텐츠 등을 즐기는 현상 (2014 문화예술 트렌드 분석 및 전망 보고서 중)

46. 모바일 = 스낵컬쳐

47. 모바일 = 스낵컬쳐

48. 모바일 = 스낵컬쳐

49. 모바일 = 스낵컬쳐

50. 미디어

51. 모바일 > 뉴 미디어

52. 모바일 > 뉴 미디어

53. 모바일 > 뉴 미디어

54. 모바일 > 뉴 미디어

55. CONTENTS
OVER PLATFORM
PLATFORM
OVER CONTENTS
모바일만을 위한 콘텐츠는 존재하지 않음,
다만 플랫폼에 최적화된 콘텐츠 UX가 있을 뿐.

56. MOBILE
CONTENTS
UX DESIGN

57. 5가지 원칙

58. 간결한 콘텐츠
소비의 연속성
무한한 캔버스
리치 인터랙션
공유의 용이함
1
2
3
4
5

59. 간결한 콘텐츠
느긋하게 시간을 내어 처
음부터 끝까지 차근차근
읽게 되는 콘텐츠
언제 어디서나 짧게 짧게
가능한 시간에조금씩 읽
게 되는 콘텐츠
1

60. http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
Leave Quick or Stay Long
Users often leave Web pages in 10-20 seconds, but pages
with a clear value proposition can hold people's attention
for much longer
간결한 콘텐츠1

61. 자르고 또 자르기 모바일화면에 맞추기
간결한 콘텐츠1

62. 자르고 또 자르기 모바일화면에 맞추기
모바일
화면에
!
맞
추
기
간결한 콘텐츠1

63. 자르고 또 자르기 모바일화면에 맞추기
간결한 콘텐츠1

64. 소비의 연속성
홈
목
록
목
록
콘
텐
츠
콘
텐
츠
2

65. 탐색 (EXPLORE) 전환 (PIVOT)
소비의 연속성2

66. 탐색 (EXPLORE) 전환 (PIVOT)
소비의 연속성2

67. 탐색 (EXPLORE)
전환 (PIVOT)
탐색 (EXPLORE)
전환 (PIVOT)
탐색 (EXPLORE)
소비의 연속성2

68. 3 무한한 캔버스

69. Z-AXIS

70. 3 무한한 캔버스

71. 3 무한한 캔버스

72. 3 무한한 캔버스

73. 리치 인터랙션4

74. 리치 인터랙션4
콘텐츠 소비를 함에 있어서,
!
빠른 길을 알려줌
스토리텔링을 도와줌
풍부한 정보를 제공함

75. 리치 인터랙션4
콘텐츠 소비를 함에 있어서,
!
빠른 길을 알려줌
스토리텔링을 도와줌
풍부한 정보를 제공함

76. 리치 인터랙션4
콘텐츠 소비를 함에 있어서,
!
빠른 길을 알려줌
스토리텔링을 도와줌
풍부한 정보를 제공함

77. 리치 인터랙션4
콘텐츠 소비를 함에 있어서,
!
빠른 길을 알려줌
스토리텔링을 도와줌
풍부한 정보를 제공함

78. 공유의 용이함5

79. 공유의 용이함5
The New york times Innovation Report 2014

80. 공유의 용이함5
The New york times Innovation Report 2014

81. 공유의 용이함5
콘텐츠 서비스 소셜 서비스

82. 공유의 용이함5
PC < > Mobile Mobile < > PC콘텐츠 서비스 소셜 서비스

83. 공유의 용이함5

84. 공유의 용이함5

85. 공유의 용이함5

86. SUMMARY

87. CONTENTS
OVER PLATFORM
PLATFORM
OVER CONTENTS
‘모바일만을 위한
콘텐츠는 존재하지 않음’
Mobile ≠ PC Light ver.
One Source, Multi-use
‘플랫폼의 특성이
콘텐츠를 결정한다’
Mobile = Snack Culture
New Mobile Service

88. MOBILE CONTENTS
UX DESIGN
간결한 콘텐츠 : 자르고 맞추기
소비의 연속성 : 탐색과 전환
무한한 캔버스 : Z-AXIS
리치 인터랙션 : 콘텐츠 소비 돕기
공유의 용이함 : 소셜공유 우선하기
1
2
3
4
5

90. 참고자료
Letting go of the words
: Writing Web Contents that works / Janice Redish
!
THE ELEMENTS OF CONTENT STRATEGY
by ERIN KISSANE
!
CONTENT STRATEGY FOR MOBILE
by KAREN MCGRANE
!
http://www.businessinsider.com/mary-meekers-2014-internet-presentation-2014-5?op=1
http://www.scribd.com/doc/224608514/The-Full-New-York-Times-Innovation-Report#download
http://www.moneyweek.co.kr/news/mwView.php?no=2013122900508043614
http://www.pewresearch.org/fact-tank/2014/02/04/overseas-users-power-facebooks-growth-more-going-mobile-only/
http://www.businessinsider.com/mary-meekers-2014-internet-presentation-2014-5?op=1

91. 감사합니다

92. 질문
@pentaxzs
heisk@daumcorp.com