2014년 3월 22일날 온오프믹스 착한문서 만들기 강의 자료 요약본입니다. http://onoffmix.com/event/25106

1. 비주얼씽킹과 인포그래픽으로
만들기
Version 1.0
착한문서

2. 1999 20142002 2004 2007 2010 201320122009
이상용
UX DESIGN(사용자 경험 설계)
UI / GUI / IxD
착한문서만들기

3. 착한문서
=
상대를 쉽게 이해시켜주는 것

4. 착한문서 = 이해 + 설득
보기 쉬운 착한 문서
복잡하지 않은 간결한 문서
하나의 이야기가 있는 문서

5. 비주얼 씽킹 공감메타포
텍스트 < 비주얼 나의 이야기를 하자complex vs simplify

6. 머리속에 있는 컨셉을 끄집어내서 시각화하기
visual thinking

7. 착한문서만들기
Me ≠ You
!

8. 착한문서만들기
AGILE

9. 착한문서만들기
STRATEGY FLOW IDEATION
전략 수립, 플로우, 브레인스토밍 등에 가장 빨리 적용 할 수 있는 방법

10. 착한문서만들기
한번에 하나씩 그려보기

11. “인문학” 같이 설명하기 어려운건??
착한문서만들기

12. 착한문서만들기
인문학
人

13. 착한문서만들기
인문학

14. 착한문서만들기

15. 한번에 하나씩 꺼내기
간단하게 그려보기
나열해서 펼쳐보기
일상에서 찾기
착한문서만들기

16. 쉽게 이해시켜주자
metaphor

17. Simplified MetaphorReal object
모두가 인지하고 공감하는 대표적인 요소에 대해 생각해보기
착한문서만들기

18. 대표 아이텐티 찾기
좋아요 안경 레고
착한문서만들기

19. 대표 아이텐티 찾기
좋아요
SNS
안경
파티
레고
취미
착한문서만들기

20. 현재 OOOO에 가보시면 아시겠지만
가장 최신 게시글이2012년 5월에 작성 된 글입니다.
현재 사용자가 이용하지 않는 죽은 컨텐츠가 사이트…
착한문서만들기

21. X
죽은 컨텐츠
모두가 이해하기 쉽게 표현되는지 생각해보기
착한문서만들기

22. 웹 접근성을 준수한 반응형 웹
월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim
Berners-Lee)는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게
정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를
제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록
제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학
에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보
는 입장에 따라 다르게 정의하고 있다.
하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는
접근성에 대한 개념을 잘못 이해하고 있는 것이 더 욱 문제이다.
즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있
는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게
가장 혜택이 많이 돌아가는 것은 사실이지만, 접근성이란 장애인
뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용
할 수 있도록 만드는 것을 말하는 것이다. 예를 들자면 장애인과
노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리
보급되면서 궁극적으로는 모든 사람들이 편리하게 활용하게 된
것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양
한 제품 및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로
그 필요성 및 중요성이 더욱 증대되고 있다.
착한문서만들기

23. 착한문서만들기

24. 모두가 이해하기 쉽게 표현되는지 생각해보기
AS-IS TO-BE
착한문서만들기

25. 메뉴 찾기도 어렵고 복잡해요
착한문서만들기

26. 숨바꼭질 금지탐정놀이 금지
착한문서만들기

27. 눈높이에 맞춰 공감대를 만들자
empathy

28. 共感
같은 것을 이야기하기
같은 언어로 소통하기
그들의 관점으로 바꿔 소통하기
착한문서만들기

29. 모바일 게임
좋아하세요?
헤어졌어요 ㅠㅜ
연락처 좀 알려줘~
주식부자가
증가하고 있습니다
착한문서만들기

30. 3인칭이 아닌 1인칭 시점으로
좀 더 구체적으로
그들과 함께 생각을 읽고
그들과 같이 바라보는 관점을 가지면?
착한문서만들기

31. 애니팡
좋아하세요?
비트윈 탈퇴했어요..
카톡 아이디가 뭐야?
벤츠와 BMW
판매량이 증가하고
있습니다
모바일 게임 좋아하세요? 헤어졌어요 ㅠㅜ
연락처 좀 알려줘 주식부자가 증가하고 있습니다.
착한문서만들기

32. SI 프로젝트는 뭐다?
착한문서만들기

33. 떼거지로 모여서 밤새도록 코딩하는 것
착한문서만들기

34. 스포츠는 뭐다?
착한문서만들기

35. < +
떼거지로 모여서 치맥하는 것
착한문서만들기

36. 빠른차는?
착한문서만들기

37. 핵심 내용만 추려 강조하자
simplified

38. 착한문서만들기
정보 + 시각화 = 인포그래픽
빠른 정보 전달 및 이해

39. 이쁜문서 ≠ 좋은문서
착한문서만들기

40. 착한문서만들기

41. 착한문서만들기

42. 학습 ≠ 설득
착한문서만들기

43. >
100원의 스티커가 100만원의 장비 보다 많은 사람을 보호할 수 있습니다.
착한문서만들기

44. >
100원의 스티커가 100만원의 장비 보다 많은 사람을 보호할 수 있습니다.
:(
:)
착한문서만들기
출처: Good.is

45. 착한문서만들기
출처: 충전인프라

46. 무엇을 강조해야 되는지 생각하기
착한문서만들기

47. 착한문서만들기
출처: 구글

48. 착한문서만들기
세로로 ‘소화전’이라고 쓰고, 설명이 복잡한 현재 소화전(왼쪽).
가로 글씨로 ‘소화전’이라고 적고,
이해하기 쉽게 사용 설명을 그림문자로 표현한 개선안(가운데·오른쪽).
출처: 권영걸 서울대 디자인학부 교수

49. 착한문서만들기
출처: 미정

50. 5초 안에 이해시키기
visual > text

51. 텍스트없이 이해시키기
00:05
착한문서만들기

52. 이것은 눈의 굴절 이상을 보정하거나 눈을 보호
하거나 몸을 치장하기 위한 기구이다. 이것은
금속 혹은 플라스틱으로 만든 프레임 안에 렌즈
로 구성되어 있고 프레임이 2개의 렌즈를 감싸
서 렌즈의 이탈을 방지하며 그 양 끝은 사람 귓
등에 걸치게 되도록 휘어져 있다.
그리고 이것을 안경이라 부른다.
착한문서만들기

53. 안경은 눈의 굴절 이상
을 보정하거나 눈
을 보호하거나 몸을 치장하기
위한 기구이다. 안경은 안경테,
안경알로 구성되어 있다. 안경
테의 경우는 사람마다 기호에
따른 차이가 있을 뿐이고 안경
알은 사람의 시력이나 눈의 이
상 정도에 따라서 다르다. 안경
은 안경테가 없는 …
VS텍스트 비주얼
착한문서만들기

54. 착한문서만들기
출처: 포스퀘어

55. 경험을 이야기 하자
storytelling

56. 착한문서만들기
We deliver Bundle

57. 다음에 뭐가 나오는지 궁금하게 만들자
문제를 보여주고 대답을 알려주자
착한문서만들기

58. KNOWLEDGE
착한문서만들기

59. 내가 가진 지식을 서로 이어서 이야기 하기
착한문서만들기

60. EXPERIENCEKNOWLEDGE
착한문서만들기
출처: 미정

61. 1
Data = Thread
6
4
5
3
데이터 수집 데이터 분석 및 가공
스토리 도출
디자인
아이디어 스케치
편집
2
완성
착한문서만들기

62. 착한문서만들기
출처
http://instagram.com/sloday365

63. 착한문서만들기
http://instagram.com/sloday365
내일 동대문디자인플라자
(DDP)가 개관합니다. 총 건
설비 4,226억 원이 들었
는데, 이는 서울시 신청사와
세빛둥둥섬을 건설하고도
488억 원이 남는 규모입니
다.
황사가 몰려오고 있습니다.
국내 시판되는 황사마스크
의 성능을 측정해 보니
98.5%의 세균을 차단한
다고 합니다. 반면에 일반
보건마스크는 88.0%의 세
균밖에 차단하지 못합니다.
한국은 1년에 311,925톤
의 참치를 원양에서 잡는
세계 3위의 참치 어획국입
니다. 하지만 한국 참치기업
들이 집어장치와 같은 파괴
적인 방법을 사용하고 있어
참치가 멸종위기에 처했습
니다
페이스북 빅데이터를 활용
한 흥미로운 통계입니다. 사
랑에 빠진 남녀의 평균 나
이차이가 2.4세라고 합니
다. 전체적으로는 남성이 나
이가 많은 경우가 67%, 여
성이 많은 경우가 20%, 나
이가 같은 경우가 13%입니
다.
서울 도시고속도로 중 강변
북로 동작->반포 구간의 평
일 교통량이 가장 많은데요,
하루 평균 148,000대가
지나간다고 합니다. 서울 서
북부 지역과 일산·파주 등
시 외곽에서 강남으로 진입
하는 차량이 많기 때문입니
다.
UN의 세계 인구 전망 보고
서에 따르면 현재 72억 명
인 인구는 2050년에 96억
명으로 증가할 것입니다. 특
히 인도가 중국을 제칠 것
이며, 2050년까지 증가할
24억 명의 인구 중 53.7%는
아프리카인일 것입니다.

64. 재미와 감동을 주는 해피엔딩
착한문서만들기

65. case study

66. 케이스스터디

67. 클라우드 서비스 이용행태
타블렛 23%
모바일 57%
데스크탑 18%
기타 2%
케이스스터디

68. Look sense interact
케이스스터디

69. 케이스스터디

70. 사용자들에게 위쇼앱을 지속해서 사용하게 만들기 위해 3가지 전략
포인트 적립
앱실행, 좋아요, 친구초대, 친구추가 등의
엑티비티를 통한 포인트 적립 및 포인트를
통한 모바일 기프트상품 할인 혜택.
혜택
모바일 커머스와 엔터테인먼와의 제휴를
통한 할인 혜택, 모바일 쿠폰 이벤트 참여
등의 서비스 혜택 제공
도전과제
앱실행, 좋아요, 친구초대, 친구추가 등의
특정 엑티비티 합산이 되면 특별 타이틀 획
득 및 방문자 트래킹, 비밀 덧글 기능 등 기
간제 부가 서비스 이용 권한 부여.
예) 친구에게 선물을 많이 사준 경우
“자선사업가” 도전과제 언락
케이스스터디

71. Coffee break

72. 머리속에 있는것을
끄집어내라
관점을
바꾸어 보자
일상에서
찾아라
5초안에
이해시켜라
내가 가진 경험을
이야기하라
최대한
간결하게 표현하라

73. UX DESIGN(사용자 경험 설계)
UI / GUI
이상용
Feedback
(*악플사절)
ultra0034@gmail.com / 010-9190-7792
meta4 design lab: Creative Director
이미지 및 레퍼런스 출처: 구글 이미지
thenounproject
sloday
meta4.design lab
foursquare
권영걸 서울대 디자인학부 교수
충전인프라 정보시스템
facebook
good.is
joonmeedia