비영리단체를 위한 www.미디어.이야기

217
이 사람이 바라보는 WWW. 미디어. 이야기 에스케이커뮤니케이션즈 조관희

Upload: kwanhee-cho

Post on 15-Dec-2014

741 views

Category:

Design


8 download

DESCRIPTION

시민사회 아카데미 세미나

TRANSCRIPT

Page 1: 비영리단체를 위한 www.미디어.이야기

이 사람이 바라보는

WWW. 미디어. 이야기

에스케이커뮤니케이션즈 조관희

Page 2: 비영리단체를 위한 www.미디어.이야기

NOTICE

Page 3: 비영리단체를 위한 www.미디어.이야기

FIELD PLAYER COMMENTATOR 좋은 말을 많이한다.

흥미있는 트렌드 위주로 설명한다.

막상 집에 돌아가면 뭘해야 할지 모르겠다.

디테일한 이야기를 해준다.

나중에 들쳐보면서 실전에 적용할만한게 있다.

재미없고 머리 아프다.

Page 4: 비영리단체를 위한 www.미디어.이야기

재미없고 머리 아프다.

Page 5: 비영리단체를 위한 www.미디어.이야기
Page 6: 비영리단체를 위한 www.미디어.이야기

대박나는 웹 서비스를 만들어본 적이 있는 사람

Page 7: 비영리단체를 위한 www.미디어.이야기

‘하루만에 토익 정복’ 같은 책을 읽고 정말 하루만에 토익을 정복한 경험이 있는 사람

Page 8: 비영리단체를 위한 www.미디어.이야기
Page 9: 비영리단체를 위한 www.미디어.이야기
Page 10: 비영리단체를 위한 www.미디어.이야기
Page 11: 비영리단체를 위한 www.미디어.이야기
Page 12: 비영리단체를 위한 www.미디어.이야기

웹을 이용한 커뮤니케이션 이해하기

Page 13: 비영리단체를 위한 www.미디어.이야기

웹을 이용한 커뮤니케이션 이해하기 웹 커뮤니케이션 웹이라는 독특한 미디어의 특성 공부하기

지극히 고전적이지만

늘 쉽지않은

의사 전달 방식 공부하기

Page 14: 비영리단체를 위한 www.미디어.이야기

수업이 끝나면

Page 15: 비영리단체를 위한 www.미디어.이야기
Page 16: 비영리단체를 위한 www.미디어.이야기

3 UX

STAGE 1

1 NGO를 보며 느낀 것

2 주요 사례

3 마무리

STAGE 2

1 what is WWW?

인터랙션 디자인 소셜

순환구조

2 what is COMMUNICATION?

양방향성 브랜드

스토리텔링

Page 17: 비영리단체를 위한 www.미디어.이야기

웹을 이용한 커뮤니케이션 이해하기 웹

인터랙션 디자인 소셜 순환구조

Page 18: 비영리단체를 위한 www.미디어.이야기

INTERACTION DESIGN

Page 19: 비영리단체를 위한 www.미디어.이야기
Page 20: 비영리단체를 위한 www.미디어.이야기

인터랙션 디자인이 잘된 현금지급기는 화면을 몇 번 누르는 것만으로 손쉽고 안전하게 돈을 인출할 수 있다.

Page 21: 비영리단체를 위한 www.미디어.이야기
Page 22: 비영리단체를 위한 www.미디어.이야기

인터랙션 디자인이 잘된 회원 가입 페이지는 가입 회원 수를 늘리는데 큰 도움을 준다.

Page 23: 비영리단체를 위한 www.미디어.이야기
Page 24: 비영리단체를 위한 www.미디어.이야기

인터랙션 디자인이 잘된 iPhone의 SMS 기능은 이전 대화를 기억해 내는데 도움을 주어 더 많은 대화를 자연스럽게 나눌 수 있게 해준다.

Page 25: 비영리단체를 위한 www.미디어.이야기
Page 26: 비영리단체를 위한 www.미디어.이야기

대기 순번을 표시해주는 디스플레이의 잘못된 인터랙션 디자인으로 인해 내 순번을 찾으려면 한참을 해매야만 했다.

Page 27: 비영리단체를 위한 www.미디어.이야기
Page 28: 비영리단체를 위한 www.미디어.이야기

재부팅 시 반드시 업데이트를 하도록 되어 있는 윈도우 OS는 (게다가 취소도 없는) 급하게 재부팅해서 일을 해결해야만 하는 촌각을 다투는 사람에겐 최악의 인터랙션 디자인 사례로 꼽힌다.

Page 29: 비영리단체를 위한 www.미디어.이야기

INTERACTION DESIGN

Page 30: 비영리단체를 위한 www.미디어.이야기

INTERACTION DESIGN

Page 31: 비영리단체를 위한 www.미디어.이야기

INTERACTION DESIGN

사람과 제품 혹은 서비스 사이에 벌어지는 사건을 조정하는 기술

Page 32: 비영리단체를 위한 www.미디어.이야기
Page 33: 비영리단체를 위한 www.미디어.이야기
Page 34: 비영리단체를 위한 www.미디어.이야기
Page 35: 비영리단체를 위한 www.미디어.이야기
Page 36: 비영리단체를 위한 www.미디어.이야기
Page 37: 비영리단체를 위한 www.미디어.이야기
Page 38: 비영리단체를 위한 www.미디어.이야기

B=f(P,E) 행동은 성격과 주변 환경 모두로 부터 영향을 받는다.

Behavior Personality

Environment

Lewin’s law

Page 39: 비영리단체를 위한 www.미디어.이야기

B=f(P,E) 행동은 성격과 주변 환경 모두로 부터 영향을 받는다.

Behavior Personality

Environment

Page 40: 비영리단체를 위한 www.미디어.이야기
Page 41: 비영리단체를 위한 www.미디어.이야기
Page 42: 비영리단체를 위한 www.미디어.이야기
Page 43: 비영리단체를 위한 www.미디어.이야기
Page 44: 비영리단체를 위한 www.미디어.이야기
Page 45: 비영리단체를 위한 www.미디어.이야기
Page 46: 비영리단체를 위한 www.미디어.이야기
Page 47: 비영리단체를 위한 www.미디어.이야기
Page 48: 비영리단체를 위한 www.미디어.이야기
Page 49: 비영리단체를 위한 www.미디어.이야기
Page 50: 비영리단체를 위한 www.미디어.이야기
Page 51: 비영리단체를 위한 www.미디어.이야기
Page 52: 비영리단체를 위한 www.미디어.이야기
Page 53: 비영리단체를 위한 www.미디어.이야기
Page 54: 비영리단체를 위한 www.미디어.이야기

SOCIAL

Page 55: 비영리단체를 위한 www.미디어.이야기
Page 56: 비영리단체를 위한 www.미디어.이야기

소셜 매개체

Page 57: 비영리단체를 위한 www.미디어.이야기

http://www.flickr.com/photos/punkdolphin/4855688750/

Page 58: 비영리단체를 위한 www.미디어.이야기

소셜 매개체

http://www.flickr.com/photos/punkdolphin/4855688750/

Page 59: 비영리단체를 위한 www.미디어.이야기

Trigger

http://www.flickr.com/photos/punkdolphin/4855688750/

Page 60: 비영리단체를 위한 www.미디어.이야기
Page 61: 비영리단체를 위한 www.미디어.이야기

1. 딱 하나의 주요 활동 (Activity)

Page 62: 비영리단체를 위한 www.미디어.이야기

Trigger

Page 63: 비영리단체를 위한 www.미디어.이야기

Trigger

Page 64: 비영리단체를 위한 www.미디어.이야기

Trigger

Page 65: 비영리단체를 위한 www.미디어.이야기

Trigger

Page 66: 비영리단체를 위한 www.미디어.이야기
Page 67: 비영리단체를 위한 www.미디어.이야기
Page 68: 비영리단체를 위한 www.미디어.이야기
Page 69: 비영리단체를 위한 www.미디어.이야기
Page 70: 비영리단체를 위한 www.미디어.이야기

단 하나의 주요활동

Page 71: 비영리단체를 위한 www.미디어.이야기

단 하나의 주요활동

Page 72: 비영리단체를 위한 www.미디어.이야기

주요 활동

Page 73: 비영리단체를 위한 www.미디어.이야기

관심 책의 내용 공유

Page 74: 비영리단체를 위한 www.미디어.이야기

주요 활동

Page 75: 비영리단체를 위한 www.미디어.이야기

핫 뉴스 링크 공유

Page 76: 비영리단체를 위한 www.미디어.이야기

중고책 판매 관심 책의 내용 공유

Page 77: 비영리단체를 위한 www.미디어.이야기

핫 뉴스 링크 공유

동영상 보기

Page 78: 비영리단체를 위한 www.미디어.이야기

사용자들이 우리 서비스에 와서 무엇을 해야 우리가 성공할 수 있을까?

Page 79: 비영리단체를 위한 www.미디어.이야기

사용자들이 우리 서비스에 와서 무엇을 해야 우리가 성공할 수 있을까? 무엇을

Page 80: 비영리단체를 위한 www.미디어.이야기

사용자들이 우리 서비스에 와서 무엇을 해야 우리가 성공할 수 있을까? 단 하나의 주요활동

Page 81: 비영리단체를 위한 www.미디어.이야기

Field Research

Page 82: 비영리단체를 위한 www.미디어.이야기
Page 83: 비영리단체를 위한 www.미디어.이야기
Page 84: 비영리단체를 위한 www.미디어.이야기

다양한 인사이트들

아이들을 위한 안전 장비를 실제 구매까지 이끌 수 있는 홍보가 필요하다.

부모 중 아이를 care해야 하는 한 명에겐 자전거 나들이는 그저 가족 봉사의 연장일 뿐이다.

자녀들이 자전거도 좋아하지만 그보다 부모와 ‘함께 노는 것’에 자체에 주목 하고 있다.

부모는 자전거를 타는 자식을 보며 자녀의 성장 속도를 체감한다.

부모는 자신의 자전거에 비해 자녀들을 위한 자전거는 상대적으로 완성도가 높은

자전거를 고르는 경향이 있다.

.

.

.

Page 85: 비영리단체를 위한 www.미디어.이야기
Page 86: 비영리단체를 위한 www.미디어.이야기

독특한 기능

Page 87: 비영리단체를 위한 www.미디어.이야기

소셜 매개체 + 동사 verb

Page 88: 비영리단체를 위한 www.미디어.이야기
Page 89: 비영리단체를 위한 www.미디어.이야기

동사 저장하다. 보다. 즐겨찾기에 저장하다. 인쇄하다. 공유하다. 의견을 나누다. 블로그에 붙이다. 태그를 붙이다.

소셜 매개체 사진

Page 90: 비영리단체를 위한 www.미디어.이야기
Page 91: 비영리단체를 위한 www.미디어.이야기

동사 제품 매뉴얼을 제출하다. 장바구니에 넣다. 새 리스트를 만들다. 리스트를 선물한다. 리스트를 공유한다. 리뷰를 쓴다. 도움이 되었는지 평가한다. 리뷰를 분류한다.

소셜 매개체 제품 / 위시리스트 / 사용자 리뷰

Page 92: 비영리단체를 위한 www.미디어.이야기
Page 93: 비영리단체를 위한 www.미디어.이야기

WWW

Page 94: 비영리단체를 위한 www.미디어.이야기
Page 95: 비영리단체를 위한 www.미디어.이야기

Features 독특한 기능

Objects 소셜 매개체

Activities 단 하나의 주요 활동

SOCIAL

Page 96: 비영리단체를 위한 www.미디어.이야기

EcoSystem

Page 97: 비영리단체를 위한 www.미디어.이야기
Page 98: 비영리단체를 위한 www.미디어.이야기
Page 99: 비영리단체를 위한 www.미디어.이야기
Page 100: 비영리단체를 위한 www.미디어.이야기

Texonomic Vs.

Taskonomic

Page 101: 비영리단체를 위한 www.미디어.이야기

Texonomic

Taskonomic

Page 102: 비영리단체를 위한 www.미디어.이야기
Page 103: 비영리단체를 위한 www.미디어.이야기
Page 104: 비영리단체를 위한 www.미디어.이야기
Page 105: 비영리단체를 위한 www.미디어.이야기
Page 106: 비영리단체를 위한 www.미디어.이야기
Page 107: 비영리단체를 위한 www.미디어.이야기
Page 108: 비영리단체를 위한 www.미디어.이야기
Page 109: 비영리단체를 위한 www.미디어.이야기
Page 110: 비영리단체를 위한 www.미디어.이야기
Page 111: 비영리단체를 위한 www.미디어.이야기
Page 112: 비영리단체를 위한 www.미디어.이야기

1부 끝.

Page 113: 비영리단체를 위한 www.미디어.이야기

웹을 이용한 커뮤니케이션 이해하기 커뮤니케이션

양방향성 브랜드

스토리텔링

Page 114: 비영리단체를 위한 www.미디어.이야기

1. 지각

2. 기대

3. 요구

4. 대립 혹은 상호의존적

내가 뭔가 말했는데 상대방이 못들었다고 하거나

상대방의 관심사가 뭔지 잘 모르고 있다거나

내가 원하는 바를 상대방이 ‘아하’ 하고 고개를 끄덕이지 못한다거나

상대방에게 아무런 감흥을 일으키지 못하고 있는 경우

Page 115: 비영리단체를 위한 www.미디어.이야기

1. 지각

2. 기대

3. 요구

4. 대립 혹은 상호의존적

내가 뭔가 말했는데 상대방이 못들었다고 하거나

상대방의 관심사가 뭔지 잘 모르고 있다거나

내가 원하는 바를 상대방이 ‘아하’ 하고 고개를 끄덕이지 못한다거나

상대방에게 아무런 감흥을 일으키지 못하고 있는 경우

Page 116: 비영리단체를 위한 www.미디어.이야기

양방향성

Page 117: 비영리단체를 위한 www.미디어.이야기
Page 118: 비영리단체를 위한 www.미디어.이야기
Page 119: 비영리단체를 위한 www.미디어.이야기
Page 120: 비영리단체를 위한 www.미디어.이야기

플랫폼 노가다

Page 121: 비영리단체를 위한 www.미디어.이야기
Page 122: 비영리단체를 위한 www.미디어.이야기
Page 123: 비영리단체를 위한 www.미디어.이야기
Page 124: 비영리단체를 위한 www.미디어.이야기
Page 125: 비영리단체를 위한 www.미디어.이야기
Page 126: 비영리단체를 위한 www.미디어.이야기
Page 127: 비영리단체를 위한 www.미디어.이야기
Page 128: 비영리단체를 위한 www.미디어.이야기
Page 129: 비영리단체를 위한 www.미디어.이야기
Page 130: 비영리단체를 위한 www.미디어.이야기
Page 131: 비영리단체를 위한 www.미디어.이야기
Page 132: 비영리단체를 위한 www.미디어.이야기
Page 133: 비영리단체를 위한 www.미디어.이야기
Page 134: 비영리단체를 위한 www.미디어.이야기
Page 135: 비영리단체를 위한 www.미디어.이야기

양방향성

Page 136: 비영리단체를 위한 www.미디어.이야기

양방향성

Page 137: 비영리단체를 위한 www.미디어.이야기
Page 138: 비영리단체를 위한 www.미디어.이야기

2010년에 뽑은 세계 탑 10

Page 139: 비영리단체를 위한 www.미디어.이야기

2010년에 뽑은 세계 탑 10 브랜드

Page 140: 비영리단체를 위한 www.미디어.이야기

브랜드

Page 141: 비영리단체를 위한 www.미디어.이야기
Page 142: 비영리단체를 위한 www.미디어.이야기
Page 143: 비영리단체를 위한 www.미디어.이야기
Page 144: 비영리단체를 위한 www.미디어.이야기
Page 145: 비영리단체를 위한 www.미디어.이야기
Page 146: 비영리단체를 위한 www.미디어.이야기

gut feeling

Page 147: 비영리단체를 위한 www.미디어.이야기

나는 누구인가?

내가 하는 일은 무엇인가?

왜 그 일이 중요한가?

STEP 1.

STEP 2.

STEP 3.

Page 148: 비영리단체를 위한 www.미디어.이야기

STEP 1.

STEP 2.

STEP 3.

사람들이 궁금할만한 지식을 검색해서 찾도록 도와주는 일

검색 엔진이 좋아서 원하는 모든걸 찾아줄 수 있어서

Page 149: 비영리단체를 위한 www.미디어.이야기

STEP 1.

STEP 2.

STEP 3.

사람들이 궁금할만한 지식을 검색해서 찾도록 도와주는 일

검색 엔진이 좋아서 원하는 모든걸 찾아줄 수 있어서

Page 150: 비영리단체를 위한 www.미디어.이야기

나는 누구인가?

내가 하는 일은 무엇인가?

왜 그 일이 중요한가?

STEP 1.

STEP 2.

STEP 3.

Page 151: 비영리단체를 위한 www.미디어.이야기

브랜드

Page 152: 비영리단체를 위한 www.미디어.이야기

신뢰

Page 153: 비영리단체를 위한 www.미디어.이야기

우리의 사명은

팀 중심적 혁신과

전략적인 주도권 확립을 통해

항공우주 산업 분야에서

국제적인 리더가

되는 것이다.

Page 154: 비영리단체를 위한 www.미디어.이야기

앞으로 10년 안에

인간을 달에 착륙시키고

무사히 지구로

귀환시킨다.

Page 155: 비영리단체를 위한 www.미디어.이야기

1961. John F. Kennedy

Page 156: 비영리단체를 위한 www.미디어.이야기

자신이 속한 조직이 무엇을 왜 성취하려고 하는지 확실하게 이해 35%

팀이나 조직의 목적에 대해 열정을 가지고 임함 20%

자신의 업무와 조직의 목표 사이의 연관성을 뚜렷이 파악 20%

자신이 속한 조직이 중심 목표를 성취할 수 있도록 완전히 지원할 것 15%

자신이 일하고 있는 조직을 신뢰 20%

Page 157: 비영리단체를 위한 www.미디어.이야기
Page 158: 비영리단체를 위한 www.미디어.이야기

우리 팀 골대가 어디 있는지 정확히 아는 사람

Page 159: 비영리단체를 위한 www.미디어.이야기

여기있든 저기있든 그다지 상관하지 않는다.

Page 160: 비영리단체를 위한 www.미디어.이야기

자신의 포지션과 자신이 해야 할 일에 대해

정확하게 알고 있다.

Page 161: 비영리단체를 위한 www.미디어.이야기

상대 팀과의 경기에서 이기기 위해 노력한다.

Page 162: 비영리단체를 위한 www.미디어.이야기
Page 163: 비영리단체를 위한 www.미디어.이야기
Page 164: 비영리단체를 위한 www.미디어.이야기
Page 165: 비영리단체를 위한 www.미디어.이야기
Page 166: 비영리단체를 위한 www.미디어.이야기
Page 167: 비영리단체를 위한 www.미디어.이야기

스토리텔링

Page 168: 비영리단체를 위한 www.미디어.이야기

500 3000

Page 169: 비영리단체를 위한 www.미디어.이야기
Page 170: 비영리단체를 위한 www.미디어.이야기
Page 171: 비영리단체를 위한 www.미디어.이야기
Page 172: 비영리단체를 위한 www.미디어.이야기

스토리텔링

Page 173: 비영리단체를 위한 www.미디어.이야기

스토리텔링

Page 174: 비영리단체를 위한 www.미디어.이야기

웹을 이용한 커뮤니케이션 이해하기 웹 웹이라는 독특한 미디어의 특성 공부하기

커뮤니케이션

지극히 고전적이지만

늘 쉽지않은

의사 전달 방식 공부하기

Page 175: 비영리단체를 위한 www.미디어.이야기

웹을 이용한 커뮤니케이션 이해하기 웹

인터랙션 디자인 소셜 순환구조

Page 176: 비영리단체를 위한 www.미디어.이야기

웹을 이용한 커뮤니케이션 이해하기 커뮤니케이션

양방향성 브랜드

스토리텔링

Page 177: 비영리단체를 위한 www.미디어.이야기

혁신

Page 178: 비영리단체를 위한 www.미디어.이야기

혁신

Page 179: 비영리단체를 위한 www.미디어.이야기
Page 180: 비영리단체를 위한 www.미디어.이야기

기업의 혁신을 위해서는 기존의 제품이나 서비스를 통해 사용자가 경험했던 것을 완전히 재해석 하여 새롭게 제공해야 한다.

Page 181: 비영리단체를 위한 www.미디어.이야기

계단 = 이동수단

더 빠른 이동수단은?

Page 182: 비영리단체를 위한 www.미디어.이야기
Page 183: 비영리단체를 위한 www.미디어.이야기

계단 = 매일 반복되는 일상

Page 184: 비영리단체를 위한 www.미디어.이야기
Page 185: 비영리단체를 위한 www.미디어.이야기
Page 186: 비영리단체를 위한 www.미디어.이야기
Page 187: 비영리단체를 위한 www.미디어.이야기
Page 188: 비영리단체를 위한 www.미디어.이야기

Page 189: 비영리단체를 위한 www.미디어.이야기
Page 190: 비영리단체를 위한 www.미디어.이야기
Page 191: 비영리단체를 위한 www.미디어.이야기

이 부위를 다른 손으로 잡아 돌리면 후추가 즉석에서 갈려서 나온다.

Page 192: 비영리단체를 위한 www.미디어.이야기
Page 193: 비영리단체를 위한 www.미디어.이야기

웹을 이용한 커뮤니케이션 이해하기

Page 194: 비영리단체를 위한 www.미디어.이야기

비영리 단체를 보며 느낀 것

Page 195: 비영리단체를 위한 www.미디어.이야기
Page 196: 비영리단체를 위한 www.미디어.이야기

WWW

Page 197: 비영리단체를 위한 www.미디어.이야기

1 click share create

blahblah +

my story +

Page 198: 비영리단체를 위한 www.미디어.이야기

blahblah

my story

1 click share create 인터랙션 디자인

소셜 소셜

+

+

커뮤니케이션

UX

순환구조

Page 199: 비영리단체를 위한 www.미디어.이야기
Page 200: 비영리단체를 위한 www.미디어.이야기
Page 201: 비영리단체를 위한 www.미디어.이야기
Page 202: 비영리단체를 위한 www.미디어.이야기
Page 203: 비영리단체를 위한 www.미디어.이야기
Page 204: 비영리단체를 위한 www.미디어.이야기
Page 205: 비영리단체를 위한 www.미디어.이야기
Page 206: 비영리단체를 위한 www.미디어.이야기
Page 207: 비영리단체를 위한 www.미디어.이야기
Page 208: 비영리단체를 위한 www.미디어.이야기
Page 209: 비영리단체를 위한 www.미디어.이야기
Page 210: 비영리단체를 위한 www.미디어.이야기
Page 211: 비영리단체를 위한 www.미디어.이야기
Page 212: 비영리단체를 위한 www.미디어.이야기
Page 213: 비영리단체를 위한 www.미디어.이야기
Page 214: 비영리단체를 위한 www.미디어.이야기

텍스트, 이미지, 링크

인터랙션 디자인 소셜 순환구조 양방향성 브랜드 스토리텔링 User eXperience

사용자 관점이 아닌 공급자 관점에서 웹을 바라보기

Page 215: 비영리단체를 위한 www.미디어.이야기

공급자 관점이 아닌 사용자 관점에서 웹을 바라보기

Page 216: 비영리단체를 위한 www.미디어.이야기

IT 종사자들과 친하게 지내기

Page 217: 비영리단체를 위한 www.미디어.이야기

감사합니다.

Private blog designliteracy.com Private Lab findingpatterns.wordpress.com Twitter twitter.com/KwanheeCho Facebook facebook.com/cho.k.hee Tumblr khcho.tumblr.com Flickr flickr.com/ganyganygany

조관희