모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실

iv

•차 례•

사람은 어떻게 보는가? 1

01 우리가 보는 것 그대로 뇌가 받아들이는 것은 아니다 ..............................................2

02 시각 정보의 핵심을 인지할 때는 주변시가 중심시보다 더 많이 사용된다 ............5

03 사람들은 패턴 인식을 통해 사물을 인식한다 ...................................................................7

04 뇌에는 사람의 얼굴을 인식하는 특별한 부분이 있다 ..............................................9

05 사람들은 어떤 대상을 상상할 때 측면이나 약간 위에서 쳐다보는

각도의 상을 떠올린다 ............................................................................................... 11

06 사람들은 과거의 경험과 기대에 근거해 화면을 훑어본다 ................................... 13

07 사람들은 특정 사물을 설명해주는 신호를 본다 .................................................... 15

08 사람들은 시야 내에서의 변화를 놓칠 수 있다 ....................................................... 19

09 사람들은 가까이 있는 각기 다른 사물들을 하나로 인식한다 ............................... 21

10 빨강색과 파랑색을 동시에 쓰면 알아보기 어렵다 ................................................ 22

11 9%의 남성, 0.5%의 여성이 색맹이다 ..................................................................... 23

12 색상의 의미는 문화에 따라 다양하다 .................................................................... 27

v

사람은 어떻게 읽는가? 29

13 대문자가 읽기 어렵다는 것은 미신이다 ................................................................. 30

14 읽기와 독해는 전혀 다른 영역이다 ......................................................................... 33

15 패턴은 각기 다른 서체로 쓰여진 글자를 알아볼 수 있게 해 준다 ....................... 37

16 서체 크기가 중요하다 .............................................................................................. 40

17 컴퓨터 화면을 읽는 것은 종이 인쇄물을 읽는 것보다 훨씬 힘들다 ..................... 42

18 사람들은 긴 길이의 문장을 더 빨리

읽지만 짧은 길이의 문장을 더 선호한다 ................................................................ 43

사람은 어떻게 기억하는가? 45

19 단기 기억력에는 한계가 있다 .................................................................................. 46

20 사람들은 한 번에 4개 이상 기억하지 못한다 ......................................................... 48

21 오랫동안 기억하려면 정보를 활용해야 한다 ......................................................... 51

vi

22 정보를 인식하는 것이 기존의 기억을 회상하는 것보다 훨씬 쉽다 ...................... 53

23 기억에는 많은 정신적 자원이 필요하다 ................................................................. 54

24 기억을 할 때마다 기억의 내용을 재건한다 ............................................................ 56

25 사람들이 기억을 잊는 것은 좋은 것이다 ..............................................................................58

26 가장 생생한 기억은 잘못된 기억이다 ..................................................................... 60

사람은 어떻게 생각하는가? 63

27 인간은 작은 덩어리의 정보를 더 잘 처리할 수 있다 ............................................. 64

28 특정 유형의 인지 처리 과정은 더욱 까다롭다 ....................................................... 67

29 30%의 시간은 잡념에 쓴다 ...................................................................................... 70

30 불확실성이 높을수록 사람들은 자신의 생각에 대해 방어적으로 변한다 ........... 72

31 사람은 멘탈 모델을 창조한다 .................................................................................. 75

32 사람들은 개념 모델과 상호작용한다 ...................................................................... 77

33 사용자들은 이야기 형태의 정보를 가장 잘 받아들인다 ....................................... 79

34 사람들은 예제를 통해 가장 잘 학습한다 ................................................................ 83

35 사람들은 분류 항목을 만들어낸다 .......................................................................... 86

36 시간은 상대적이다 .................................................................................................... 88

37 창의적인 사람이 될 수 있는 네 가지 방법 ................................................................. 91

38 사람들은 몰입 상태에 빠질 수 있다 ........................................................................ 96

39 문화는 사람들의 사고방식에 영향을 미친다 .............................................................. 98

vii

사람은 어떻게 주의를 집중하는가? 101

40 주목은 선택적이다 .................................................................................................. 102

41 사람들은 정보를 가려서 습득한다 ........................................................................ 105

42 잘 연습된 기술은 의식이 필요하지 않다 .............................................................. 106

43 빈도에 대한 예측은 주의에 영향을 준다 .............................................................. 108

44 주의를 유지하는 것은 약 10분간 지속된다 ............................................................................110

45 사람들은 가장 중요한 단서에만 신경을 쓴다 ...................................................... 112

46 사람들은 동시에 여러 가지 일을 할 수 없다 ............................................................................ 113

47 위험, 음식, 섹스, 움직임, 얼굴들,

그리고 이야기가 최고의 관심을 받는다. ............................................................. 116

48 큰 소음은 깜짝 놀라게 하고 주의를 끈다 ............................................................ 118

49 사람이 무엇인가에 관심을 가지려면

먼저 반드시 대상을 인지해야 한다 ....................................................................... 120

무엇이 사람에게 동기를 부여하는가? 123

50 사람은 목표에 가까워질수록 더욱 동기를 부여받는다 ...................................... 124

51 다양한 보상은 강력하다 ......................................................................................... 127

52 도파민은 사람들이 정보를 찾는 데 중독되게 한다 ............................................. 130

53 예측 불가능함이 계속 찾게 만든다 ....................................................................... 132

viii

54 사람들은 외적인 보상보다 내적인 보상에 더욱 동기를 부여받는다 ................. 135

55 사람은 성과, 숙련 그리고 제어에 의해 동기를 부여받는다 ............................... 137

56 만족감을 미루거나 미루지 않는 것은 어릴 때부터 시작된다 ............................. 141

57 사람은 선천적으로 게으르다 ................................................................................. 142

58 사람들은 단축키가 쉬운 경우에만 쓴다 ............................................................... 146

59 사람은 상황보다 사람에 원인이 있다고 가정한다 .............................................. 147

60 습관을 만드는 데는 오랜 시간이 걸리고 적은 단계가 필요하다 ........................ 149

61 사람들은 경쟁자가 적을수록 더욱 동기를 부여받는다 ..................................... 151

62 사람들은 자율성에 의해 동기를 부여받는다 .............................................................. 152

사람은 사회적 동물이다 153

63 '강한 유대'를 보이는 단체의 규모는 50명 정도다................................................ 154

64 사람은 흉내 내기와 감정이입에 반응할 수밖에 없다 ......................................... 157

65 협업은 인간관계를 두텁게 한다 ............................................................................ 159

66 사람들은 온라인 인터랙션이 사회적 규칙을 따르기를 기대한다 ...................... 161

67 사람들은 사용하는 매체에 따라 거짓말하는 정도가 다르다.............................. 164

68 화자의 뇌와 청자의 뇌는 대화하는 동안 일체화된다 ......................................... 166

69 뇌는 개인적으로 아는 사람에게 고유하게 반응한다 .......................................... 167

70 웃음은 사람들의 관계를 강화한다 ........................................................................ 169

71 사람은 미소가 진짜인지 동영상에서 더욱 잘 구분한다 ..................................... 171

ix

사람은 어떻게 느끼는가? 173

72 일곱 가지 기본 감정은 보편적이다 ....................................................................... 174

73 감정은 근육의 움직임과 연결돼 있으며, 역으로도 작용한다 ............................ 176

74 일화는 데이터보다 설득적이다 ............................................................................. 178

75 냄새는 감정과 기억을 상기시킨다 ........................................................................ 179

76 사람들은 놀라는 것을 즐기게 돼 있다 .................................................................. 181

77 사람들은 바쁠 때 더욱 행복하다 ........................................................................... 183

78 목가적인 장면은 사람들을 행복하게 만든다 ....................................................... 185

79 사람은 신뢰의 첫 번째 지표로 외관과 느낌을 사용한다 .................................... 187

80 음악을 들으면 뇌에 도파민이 분비된다 ............................................................... 189

81 달성하기 어려울수록 사람들은 좋아한다 ............................................................ 190

82 사람들은 미래의 사건에 대해 과대평가한다 ............................................................. 192

83 사람들은 사건이 진행되는 시점보다 이전/이후에

더 긍정적으로 생각한다 ......................................................................................... 194

84 사람들은 슬프거나 겁날 때 친숙한 것을 원한다 ................................................. 196

사람은 실수한다 199

85 사람들은 항상 실수를 한다. 절대 안전한 제품이란 없다 ................................... 200

86 사람들은 스트레스를 받을 때 오류를 범한다 .............................................................. 202

87 모든 실수가 해로운 것만은 아니다 ....................................................................... 206

x

88 사람은 예측 가능한 종류의 오류를 만들어낸다 .................................................. 208

89 사람은 각기 오류에 대해 다른 전략을 사용한다 ................................................ 211

사람은 어떻게 결정하는가? 213

90 사람은 대부분의 결정을 무의식적으로 내린다 ................................................... 214

91 무의식이 먼저 안다 ................................................................................................. 216

92 사람들은 자신들이 처리할 수 있는 것보다

더 많은 선택의 여지와 정보를 원한다 .................................................................. 218

93 사람들은 선택권이 통제권과 같다고 생각한다 ................................................... 220

94 사람들은 돈보다 시간에 가치를 더 둔다 .............................................................. 222

95 기분은 의사결정 프로세스에 영향을 미친다 .............................................................. 224

96 단체 의사결정은 신빙성이 떨어진다 .................................................................... 226

97 사람들은 지배적인 성격에 흔들린다 .................................................................... 228

98 사람들은 불확실한 상황에서 타인이결정을 내리도록 유도한다. ...................... 229

99 사람들은 자신보다 타인들이 더 쉽게 영향력에

휩쓸릴 것이라고 생각한다 ..................................................................................... 231

100 사람은 제품이 눈앞에 실재하는 경우 가치를 더욱 높게 평가한다 .................. 233

xi

•추천의 글 I•

요즘 들어, 사용자 중심의 디자인에 대한 관심이 높아지면서, 학계와 산업계 모두에서 사용자로서

의 사람에 대한 본질적인 이해가 중요해졌습니다. 사용자 경험 디자인과 더불어 최근 서비스 디자인

이라는 개념이 사회 안팎에서 집중적으로 조명받으며 관련 직종에 진출하려는 사람들도 점차 많아

지고 있습니다. 또한 이미 관련 분야에 몸담고 있는 전문가들의 경우에는 더 많이 연구하고, 더 근본

적인 원인을 찾아 고심하는 분들이 속속 생겨나고 있습니다. 많은 사람들의 관심과 열정 속에서 사

용자 중심, 인간 중심의 디자인 방법론에 대한 다양한 접근과 시도가 이뤄지고 있는 것은 분명 기뻐

할 만한 일이며, 매우 흥미로운 일이 아닐 수 없습니다.

표면적으로 사용자 중심 디자인 방법론, 사용자 경험 방법론에 대해 이야기하는 사람들은 많지

만 제품이나 서비스를 사용하면서 ‘왜 사람들은 이런 행태를 보일까?’에 대한 해답을 학문적 근거

를 들어 설명해 주는 책은 많지 않습니다. 두꺼운 심리학 개론 책 속 어딘가에 분명히 관련 단서가

있을 테고 이러한 내용은 최신 학술 논문에 수록된 내용일 테지만 실무자나 학생들이 전문 연구 자

료를 직접 찾아보기는 사실상 어렵습니다. 이런 측면에서 생각해 보면 연구 결과와 지식을 공유하

는 경험 디자인은 아직도 갈 길이 멉니다. 이 책의 필자는 아마도 사람들이 전문 연구에 접근하는

데 걸림돌이 되는 장애물을 치워버리고 싶었던 것 같습니다. 그리고 실제로, 아주 멋지게, 쉽고 재미

있는 책을 펴냈습니다.

이 책에서는 심리학과 뇌 과학을 중심으로 ‘왜 사용자들은 특정 행동을 할 수밖에 없는지’ 그리고

그런 사용자를 위해 ‘디자이너와 기획자는 어떤 고민을 해야 하는지’를 제시합니다. 어려운 학계 용

어를 최대한 알기 쉽게 풀어 썼고, 과학적인 연구 결과를 근거로 들어 그 내용에 신빙성을 더하고 있

습니다. 읽다가 이해가 되지 않는 부분이 있다면 언제라도 관련 내용을 스스로 찾을 수 있게 배려하

고 있습니다.

xii

이 책을 통해 우리는 좋은 기획자와 디자이너가 실무 경험을 통해 무의식적으로 넘겨짚고 있던 통

념들, 인류에 대한 보편타당한 진실들, 그리고 ‘사용자들은 아마 이렇게 생각할 거야’라고 넘겨짚었

던 사항에 대해 명쾌하고 근본적인 해답을 얻을 수 있으리라 생각합니다.

이 책이 많은 디자이너와 기획자에게 사용자를 이해하는 사고와 사용자를 중심에 두는 접근 방식

을 확립하는 데 과학적인 근거를 제공함으로써 더 나은, 더 사용자 친화적인 디자인이 탄생하는 초

석이 되리라 기대해 봅니다.

- 김진우 교수

연세대학교 경영대학 HCI Lab

xiii

•추천의 글 II•

“이 기능은 이렇게 디자인하기로 합시다. 사용자가 무척 좋아하니까요.” “사용자는 이런 정보는 확인

하지 않아요. 이 콘텐츠는 이렇게 디자인해야 합니다.” 이런 이야기를 UX 디자인 회의에서 쉽게 들

을 수 있다.

UX 회의에서는 누구나 사용자 전문가다. 저마다 본인이 사용자에 대해 더 잘 안다고 주장한다. 하

지만 과연 그럴까? 사용자가 특정 기능을 선호한다고 주장하는 이의 말을 들어보자. 대부분 본인이

해당 기능을 원하는 경우가 다반사다. 정확한 근거 자료 없이 사용자가 무엇을 좋아하거나 싫어한다

고 모두 소리 높여 주장한다. 10명의 기획자, 디자이너, 개발자가 모이면 10명의 서로 다른 사용자를

고려해야 하는 셈이다.

기존의 연구 자료를 UX 회의에 활용하는 것도 좋은 방법이다. “어느 대학원의 조사 결과에 의하

면……” 혹은 “어느 조사 기관의 설문조사 자료에 따르면……” 등 전문 자료를 바탕으로 특정 디자인

의 정당성을 주장할 수 있다. 하지만 전문 연구는 한정된 주제에 초점을 맞추는 경우가 많다. 해당 이

슈에 대한 더욱 정확한 비교 분석이 중요하기 때문이다. 실무 UX 디자인에 바로 적용하기에는 까다

로운 경우가 많다.

이재명, 이예나 씨가 공역한 『모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실』은

실무자의 입장에서 일반적인 사용자를 좀 더 깊이 이해할 수 있게 해 준다. 대목마다 사용자의 입장

에서 제품과 서비스를 다시 한 번 생각해보게 한다. 진정한 사용자 경험을 디자인하는 데 기본이 되

는 가이드라인을 제공하는 셈이다. 사용자가 어떻게 생각하고, 결정하고, 인지하는지 차근차근 상세

하게 설명해 준다. 사용자 행동 패턴마다 곁들어진 예시와 그림 자료를 살펴보면 쉽게 고개가 끄덕여

진다. 사용자에 대해 잘못 알려진 일반적인 편견도 일깨워준다.

xiv

UX에 대한 열기가 어느 때보다 뜨겁다. 아이폰 혹은 안드로이드 UX 디자인, 웹 2.0 사용자 조사

방법론 등 최근의 이슈에 초점을 맞춘 다양한 책이 서점 진열대를 가득 메우고 있다. 하지만 진정한

UX 전문가라면 기초부터 확실히 다져야 하지 않을까? 심리학 강의 등으로 사용자 행동 패턴에 익

숙한 UX 전공자라면 다시 한 번 핵심 내용을 되새길 수 있는 좋은 기회가 될 것이다. 유사 분야에서

UX 실무에 직접 뛰어든 기획자와 디자이너에게는 인터랙션 디자인의 기본을 다질 수 있는 좋은 출

발점이 될 것이다.

UX는 상식에만 의존하면 된다고 주장하는 이들도 많다. 아주 틀린 말도 아니다. 하지만 UX 전문

가의 상식과 노하우가 많은 연구와 경험을 바탕으로 나온다는 사실을 무시해서는 안 된다. 『모든 기

획자와 디자이너가 알아야 할 사람에 대한 100가지 사실』로 UX 디자인에 필수적인 전문지식으로

재무장해보는 건 어떨까? 이 책의 마지막 장을 덮는 순간 사용자에게 한 걸음 더 가까워진 자신을

발견할 수 있을 것이다.

- 고태호

구글 UX 디자이너

xv

•감사의 말씀•

Peachpit 출판사의 너무나 멋진 편집팀, 특히나 밤 늦게까지 이메일을 주고받던 제프 라일리(Jeff

Riley)에게 감사를 표합니다. 이 책을 쓰는 동안 내게 용기를 불어넣어 주고, 모든 과정을 잘 끝내도

록 이끌어 준 편집자 마이클 놀란(Michael Nolan), 사진을 담당해 주신 거스리 웨인쉔크(Guthrie

Weinschenk), 멋진 아이디어를 준 메이시 웨인쉔크(Maisie Weinschenk), 인내와 수고를 아끼지 않

아 준 피터 웨인쉔크(Peter Weinschenk)에게 감사드립니다. 그리고 저의 개인 블로그 구독자들 모

두에게 감사드립니다. 여러분들께서 제 프레젠테이션과 심리학에 대한 이야기를 들어주신 덕분에 가

치 있는 아이디어, 의견, 그리고 심리학과 디자인에 대해 제가 글을 쓰고, 연구를 해야 하는 이유를

깨달았습니다.

xvi

•헌정•

이 책을 마일즈(Miles)와 지넷 슈월츠(Jeanette Schwartz)에게 바칩니다. 함께 이 책을 나눌 수 있기

를 기원했습니다.

xvii

디자인의 심리학

여러분이 웹사이트나 의료 기기(또는 어떤 공간이나 어떤 물건들을)를 디자인하고 있다면 그러한 디

자인의 혜택을 받을 사람들은 다름 아닌 그것을 사용할 사람들이다.

그리고 디자인이 제공하는 사용자 경험의 질은 여러분이 사용자에 대해 얼마나 알고 있느냐에 따

라 급격하게 달라진다.

이 책을 통해 여러분은 사람들이 어떻게 생각하고, 어떻게 의사결정을 내리며, 어떤 요인이 클릭이

나 구매를 유도하거나 사람들의 행동 방식을 바꾸는지 알게 될 것이다.

아울러 사람들의 시선을 사로잡는 것이 무엇이고, 사람들이 저지르는 실수의 종류와 실수를 저지

르는 이유, 그리고 그 밖의 더 좋은 디자인을 하기 위해 알아야 할 사항들도 배우게 될 것이다.

그리고 필자가 대부분의 어려운 주제를 미리 파헤쳐 놨기에 여러분은 훨씬 쉽게 디자인할 수 있을

것이다. 필자는 연구하고 공부하는 것을 대단히 좋아하는 매우 이상한 유형의 인간이다. 그래서 나

는 연구 자료를 읽고(어떨 때에는 반복해서 읽고) 수백 권의 책과 연구 논문을 끊임없이 찾아서 읽는

다. 그중에서 필자가 좋아하는 이론과 개념, 그리고 연구 자료를 뽑아냈다.

그런 다음 수년간 인터페이스 디자인 실무에서 쌓은 경험과 연구 자료를 융합하는 작업을 진행

했다.

그리고 마침내 고된 작업의 결과물로 『모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지

사실』이라는 책을 여러분 앞에 내놓게 되었다.

01 HTML5와 CSS3 소개 l 1

사람은 어떻게 보는가?

시각은 모든 감각을 지배한다. 인간 뇌의 절반은 우리가 사물을 보고 해석하는 데 사용된

다. 물리적으로 우리 눈이 지각하는 상(像)은 실제하는 것에 비해 아주 작은 부분에 불과하

다. 우리 뇌에 인식되는 이미지는 바뀌고 해석된 것들이다. 실제로 뭔가를 보는 것은 뇌다.

2 모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실

01 우리가 보는 것 그대로 뇌가 받아들이는 것은 아니다

길을 걷고 있다고 해보자. 눈은 열심히 눈 앞에 펼쳐진 것에 대한 실제 경험을 시각 신호로 뇌에 전송

한다. 하지만 실제로 뇌는 눈이 보낸 정보를 곧이곧대로 받아들이지 않는다. 뇌는 우리가 보는 모든

것들을 끊임없이 해석한다. 그림 1.1을 예로 들어보자.

무엇이 보이는가? 처음 이 그림을 본 사람은 배경에 깔린 검정 경계선으로 이루어진 삼각형을 지

각하게 되고, 위아래가 뒤집어진 흰색 삼각형도 볼 수 있다. 물론, 이 삼각형은 실존하는 도형이 아니

다. 그저 완성되지 않은 선 몇 개와 원 조각 몇 개가 있을 뿐이다. 우리의 뇌는 텅 빈 공간에서 실존하

지 않는 아래위가 거꾸로인 삼각형을 만들어냈다. 그렇게 보이길 바라는 제작자의 의도대로 뇌가 착

각해줬기 때문이다. 이러한 착시 현상을, 1955년 이 삼각형을 고안한 이탈리아의 심리학자 가에타노

카니차(Gaetano Kanizsa)의 이름을 따서 카니차 삼각형이라고 한다. 이번에는 그림 1.2를 보자. 그림

1.2는 이와 비슷한 방법으로 사각형 모양의 착시 효과를 보여준다.

뇌는 지름길을 만들어낸다

뇌는 주변 환경을 빠르게 인식하고자 지름길을 만들어낸다. 뇌는 초당 수백만 개의 신경 자극을 받

아들인다(초당 약 4천만 개 가량). 뇌는 입력 정보를 과거의 경험을 바탕으로 주먹구구식으로 조합

해 우리가 보는 것에 대해 추측한다. 대부분의 경우, 이렇게 만들어지는 지름길은 정확하지만 가끔

씩 오류가 생길 때도 있다.

형태와 색상을 이용하면 사람들이 보는 것, 혹은 그렇게 보고 있다고 생각하는 데 영향을 줄 수

그림 1.2 카니차 사각형의 예그림 1.1 두 종류의 삼각형이 보인다. 하지만

실제로 존재하는 삼각형은 단 하나도 없다.


있다. 그림 1.3은 색상이 어떤 식으로 메시지에 대한 주목을 이끌어낼 수 있는지를 보여주는 좋은

예다.

그림 1.3 색상과 모양은 사람들이 보는 것에 영향을 미친다.

어두운 곳에서 뭔가를 봐야 한다면 정면을 똑바로 응시하지 마라

눈은 밝은 빛에 민감하게 반응하는 7백만 개의 원추세포와 상대적으로 어두운 빛에 민감한 1억 2천

5백만 개의 간상체를 보유하고 있다. 원추세포는 중심와(망막의 중심부에서 상의 초점이 맺히는 부

분)에 위치하고 간상체는 중앙에서 약간 벗어나 있다. 따라서 어두운 곳에 있다면 정면을 똑바로 보

지 않아야 실제 물체가 어디에 있는지 정확하게 알 수 있다.

착시는 왜곡된 정보를 전달한다

착시는 눈이 전달한 정보를 뇌가 어떻게 잘못 해석하는지 보여주는 예다. 그림 1.4에서 보면 화살

표의 방향에 따라 왼쪽의 선이 오른쪽의 선보다 길어 보인다. 사실 두 선의 길이는 같다. 그림 1.4는

창시자인 프란츠 뮐러-라이어(Franz Müller-Lyer)의 이름을 딴 매우 고전적인 착시 현상의 한 예다.

그림 1.4 두 선의 길이는 같다.


우리는 사물을 입체가 아닌 평면으로 인식한다

가시광선은 각막과 수정체를 통해 눈으로 들어온다. 수정체는 망막 위에 이미지의 초점을 맞추게 된

다. 실제로 3차원적 입체 사물이라 하더라도 망막 위에 투영되는 것은 평면적인 이미지다. 이 이미

지는 뇌의 시각피질로 전달되는데, 시각피질은 “아, 저기에 있는 게 문이구나.”와 같은 시각 정보를

뇌가 인지할 수 있게 한다. 시각피질은 뇌로 전달된 평면적 이미지를 입체 이미지로 다시 변환해서

인식한다.

시각 피질은 모든 정보를 종합한다.

존 메디나에 따르면 망막은 우리가 보는 정보의 전자적 패턴을 받아 그 패턴들을 여러 트랙으로 쪼

개서 정보를 완성한다(John Media, 2009). 그중 몇 트랙은 그림자에 대한 정보를 가지고 있고, 또 어

떤 것들은 움직임에 대한 정보 등을 보유하고 있다. 평균적으로 약 12개 정도의 정보 트랙이 뇌의 시

각 피질로 전송된다. 그러면 전송된 정보 트랙은 시각 피질의 각기 다른 부위에서 각기 다른 과정을

거치게 된다. 예를 들어 시각 피질의 어떤 부위는 40도로 기울어진 선에 대해서만 반응하고, 또 어떤

부위는 움직임에만, 혹은 전체적인 윤곽선에 대한 정보만 처리한다. 이 과정을 거치면 궁극적으로 모

든 데이터가 움직임(사물이 현재 움직이고 있는가?)과 위치(나를 중심으로 사물이 어디에 위치해 있

는가?)라는 두 가지 트랙으로 종합되어 인식된다.

시사점

Ö 사람들이 웹 페이지에서 볼 것으로 생각하는 것과 실제로 보는 것에는 차이가 있다. 이

는 시각 정보를 받아들이는 사용자의 배경, 지식, 친밀감과 기대 심리에 따라 달라질 수

있다.

Ö 우리는 특정 사물이 보이는 방법을 다르게 조절해 사용자가 기획자의 의도대로 시각

정보를 받아들일 수 있게 설득할 수 있다.


02 시각 정보의 핵심을 인지할 때는 주변시가 중심시보다 더 많이 사용된다

시야에는 주변시(peripheral vision)와 중심시(central vision)로 두 종류가 있다. 중심시는 사물을 직접

보면서 상세하게 파악할 때 쓰인다. 주변시는 사물을 둘러싸고 있는 주변 환경(사실상 눈에 보이기

는 하지만 실제로 집중하고 있지 않은 배경)을 파악한다. 이처럼 시야각에서 벗어난 사물을 볼 수 있

다는 점은 유용하지만 캔자스 주립 대학에서 내놓은 새로운 연구 결과에 따르면 주변시는 우리 주

위를 둘러싸고 있는 세계를 이해하는 데 상상 이상으로 훨씬 더 중요한 역할을 한다. 우리는 주변시

로부터 어떤 종류의 장면을 보고 있는지에 대한 정보를 수집한다.

화면 내 깜박임 현상에 피로감을 느끼는 이유는?

사람들은 어쩔 수 없이 사물의 움직임을 주변시를 통해 볼 수밖에 없다. 예를 들어, 컴퓨터 화면에 띄

운 텍스트 문서를 읽는데, 같은 화면 안에 애니메이션이 포함돼 있거나 화면의 측면에서 뭔가가 깜박

인다고 해보자. 애니메이션과 깜빡임은 한 화면 내의 텍스트에 주의를 집중할 수 없게 만든다. 이는

주변시가 초점 밖의 환경을 지속적으로 보고 있기 때문에 나타나는 현상이다. 웹상의 반짝거리거나

번쩍거리는 광고는 이 같은 현상을 노리고 기획된 것이다. 번쩍거리는 배너가 눈에 거슬림에도 불구

하고 사람들은 어쩔 수 없이 광고를 볼 수밖에 없다.

애덤 라슨과 레스터 로쉬키는 사람들에게 흔히 볼 수 있는 주방이나 거실을 찍은 사진을 보여줬다

(Adam Larson and Lester Loschky, 2009). 그 사진들 중 일부는 사진의 외곽을 가렸고, 또 어떤 사진에

서는 중심부를 가렸다. 그들은 이 사진들을 매우 짧은 시간 동안만 사람들에게 보여주기로 하고, 회

색 필터를 사용해 사진의 정체를 알아보기 힘들게 실험을 설계했다(그림 2.1 / 그림 2.2). 그리고 실험

참가자에게 그들이 본 것이 어떤 것이었는지 알아맞히게 했다.

라슨과 로쉬키는 사진의 중심부가 가려져도 사람들이 사진의 정체를 인지할 수 있다는 사실을 알

아냈다. 하지만 사진의 외곽 부분이 가려진 경우, 실험 참가자들은 그 사진이 주방인지 거실인지 정

확하게 짚어내지 못했다. 이 실험으로 라슨과 로쉬키는 특정 물체를 인식하는 데는 중심시가 중요한

역할을 하지만, 특정 환경의 핵심을 알아내는 데는 주변시가 사용된다는 결론을 이끌어냈다.


그림 2.2 라슨과 로쉬키의 연구에서

사용된 주변시 사진

그림 2.1 라슨과 로쉬키의 연구에서

사용된 중심시 사진

주변시는 인간의 진화 과정 중에 발달했다

진화론자들의 주장에 따르면 초기 인류는 부싯돌을 갈거나 하늘의 구름을 쳐다볼 때도 원거리에 있

는 맹수의 공격을 민감하게 살펴야 하기 때문에 주변시가 발달한 개체가 살아남아 후대에 유전자를

전달했다. 즉, 주변시가 미약했던 개체는 자신의 유전자를 후대에 전달할 수 없었다.

최근, 이와 같은 주장을 뒷받침하는 연구 결과가 나왔다. 디미트리 베일은 피실험자의 중심시와 주

변시 영역에 공포심을 조성할 수 있는 사진을 배치했다(Dimitri Bayle, 2009). 그리고 편도체(뇌에서

감성적인 반응을 보이는 부분. 이 연구에서는 공포 사진에 반응하게 된다)가 사진에 반응하는 시간

을 측정했다. 중심시 안에 공포 사진이 들어왔을 때, 편도체에 반응이 도달하기까지 약 0.14~0.19

초가 걸렸다. 하지만 주변시의 경우, 0.08초가 걸렸다.

시사점

Ö 사람들은 컴퓨터 화면을 볼 때 주변시를 이용한다. 그래서 주변시에 포착된 요소를 통해 해

당 웹 페이지의 내용을 이해하고 판단한다.

Ö 화면의 중앙부도 중심시에 영향을 미치므로 매우 중요하다. 그러나 사용자의 주변시 내에

있는 요소도 간과해서는 안 된다. 웹 페이지상의 보조적인 정보가 웹 페이지와 사이트의 목

적을 명확하게 전달하게 해야 한다.

Ö 사용자의 시선을 화면의 특정 부분에 집중하게 만들고 싶다면 애니메이션이나 깜박거리는

요소를 사용자의 주변시에 놓지 않는다.


03 사람은 패턴 인식을 통해 사물을 인식한다

패턴 인식은 매 순간 발생하는 감각에 대해 사람이 빠르게 판단할 수 있게 해 준다. 우리의 눈과 뇌

는 실존하는 패턴이 없더라도 패턴을 만들어내고 싶어 한다. 그림 3.1을 보면 ‘두 개씩 묶인 점들이 4

쌍 있다’라고 생각하지, ‘점이 8개 있다’라고 인식하지 않을 것이다. 이것은 뇌가 빈 공간이나 사물 사

이의 공간을 패턴으로 인식하기 때문이다.

그림 3.1 뇌는 패턴을 만들어내고 싶어 한다.

각 세포는 특정 모양/형태에 반응한다.

1959년, 데이빗 후벨(David Hubel)과 토르슈텐 비젤(Torsten Wiesel)은 시각피질의 일부 세포가 수

평선에만 반응하고, 또 어떤 것들은 수직선에만 반응하며, 또 모서리나 특정 각도에만 반응한다는

사실을 알아냈다.

시각피질은 사람이 상상할 때 더욱 활성화된다

시각피질은 실제로 눈이 어떤 사물을 인지할 때보다 상상할 때 더욱 활성화된다(Solso, 2005). 상상

할 때 쓰는 시각피질은 우리가 사물을 볼 때 쓰는 시각피질과 같은 부위다. 이 이론은 자극이 실제로

존재하지 않을 때(즉, 사람이 상상하고 있을 때) 시각피질이 더욱 더 활성화된다고 본다.

사물 인식과 기하소자 이론

인간의 사물 인식 과정에 대해 수년 동안 셀 수 없이 많은 연구와 이론이 쏟아져 나오고 있다. 연

구 초기 이론에서는 뇌에 기억 장치가 따로 있어 그 안에 과거에 본 이미지가 수백만 개 저장돼 있

으며, 사물을 인식할 때마다 기억 장치에 저장된 모든 이미지와 비교해 최적의 짝을 찾아낸다고 봤

다. 하지만 최근의 연구에서는 뇌가 특정 이미지를 인식하는 게 아니라 특정 형태를 인식한다고 본

다. 뇌는 기하소자(geometric)라고 하는 기본 도형을 바탕으로 사물을 인식한다. 어빙 비더만(Irving

Biederman)은 1985년에 최초로 기하소자에 대한 이론을 제기했다(그림 3.2). 기하소자는 총 24개의

기본 도형으로 구성돼 있으며, 이러한 도형의 조합으로 우리는 사물의 형태를 보고 인식한다.


기하소자 사물

1

1

3

33

3

34

45

5

5

55

2

2

그림 3.2 비더만의 기하소자 견본

시사점

Ö 패턴을 최대한 많이 활용하라. 사람들은 자동적으로 패턴을 찾기 때문이다. 분류와 공백을

이용해 패턴을 만들자.

Ö 사용자가 어떤 대상을 인지하게 만들고 싶다면(예: 아이콘) 단순한 기하학적 도형을 사용

한다. 기하소자 이론에 따르면 사용자들은 기하학적 요소를 더 쉽고 빠르게 인지한다.

Ö 평면 요소(2D)가 입체 요소(3D)보다 더 잘 인지된다. 눈은 앞에 보이는 대상을 평면 요소

로 뇌에 전달한다. 화면상에 표현된 입체 요소를 인지하고 이해하는 속도는 평면 요소에 비

해 느릴지도 모른다.


04 뇌에는 사람의 얼굴을 인식하는 특별한 부위가 있다

복잡한 도심 한복판을 걸어가고 있다가 가족과 비슷하게 생긴 사람을 갑자기 찾아 냈던 경험을 떠올

려 보자. 그 사람을 딱히 주시하고 있지 않았음에도 게다가 무수히 많은 사람들 속에 섞여 있었음에

도 친근한 얼굴을 빠르게 알아볼 수 있을 것이다. 그리고 그에 상응하는 감성적 반응, 즉 사랑, 증오,

두려움 등의 감정을 느낄 수 있을 것이다.

뇌의 상당 부분을 시각피질이 차지하고 있긴 하지만 시신경 바깥에 특별한 용도의 부위가 있다. 뇌

의 시각피질 밖에는 사람의 얼굴을 인지하기 위한 특별한 부위가 있다. 낸시 칸위셔에 의해 밝혀진

바에 따르면 방추형 얼굴 인식 영역(FFA, Fusiform Face Area)은 얼굴이 뇌의 해석 채널을 우회해 다

른 사물보다 빠르게 인식될 수 있게 돕는다(Nancy Kanwisher, 1997). FFA는 뇌의 감성을 관장하는

부위인 소뇌의 편도체 근처에 존재한다.

자폐증이 있는 사람은 사람들의 얼굴을 인식할 때 FFA를 사용하지 않는다

카렌 피어스의 연구는 자폐증 환자가 사람의 얼굴을 인식할 때 FFA를 사용하지 않음을 보여준다

(Karen Pierce, 2001). 대신 그들은 뇌의 다른 부위와 시신경, 즉 사물을 인식할 때 이용하는 기관을

이용해 얼굴을 인식한다.

우리는 얼굴의 시선이 향하는 곳을 본다

아이트래킹 연구는 사진 속 얼굴의 주인공이 향하는 시선의

방향에 사용자들의 시선이 따라간다는 사실을 보여준다(그림

4.1). 사진 속 인물의 시선이 향하는 곳에 광고할 물건을 위치

시키면 사용자는 자연스럽게 그 물건으로 시선을 옮긴다.

하지만 한 가지 주의할 점은 이 방법은 시선을 끌 수 있을 뿐

주의를 집중시키는 것은 아니라는 것이다. 이를 유념해 웹상

에서 사용자와의 감성적 연결 고리(예: 사용자를 똑바로 쳐다

보는 사진을 배치할 것인가, 아니면 제품을 직접적으로 바라

보는 사진을 배치할 것인가)를 설계해야 한다. 그림 4.1 사용자들은 사진 속 인물

이 바라보는 곳에 시선을 둔다.


사람들은 태어날 때부터 각자 선호하는 얼굴이 다르다

캐서린 몬로크 등의 연구 결과는 만 1세 이하의 영아들도 각기 얼굴 형태, 생김새에 대한 선호도가

있음을 보여준다(Catherine Mondloch et al., 1999).

누군가가, 혹은 어떤 것이 살아있음을 눈으로 판단한다

크리스틴 루저와 휘틀리는 특정인의 사진을 찍은 다음, 조금씩 변형되게 편집하고 나서 배열 뒷부분

에 마네킹의 얼굴을 끼워 넣었다(Christine Looser and T. Wheatley, 2010). 그들은 이 방법을 통해

관찰 대상이 사람이 아니고 살아 있는 상태가 아닌지를 어떻게 판단하는지 연구했다. 그림 4.2는 그

들이 제시한 사진의 예다. 루저는 연구에서 실험 대상자가 살아있는 사람이 아닌 것으로 보이는 지

점이 약 75% 지점임을 밝혀냈다. 또한 사람들이 그림의 인물이 실제 살아있는 사람인지를 주로 눈

을 기준으로 판단한다는 사실을 발견했다.

그림 4.2 루저와 휘틀리의 사람-마네킹 안면 배열

시사점

Ö 사람들은 웹 페이지상에서 사람의 얼굴을 그 어떤 사물보다 빠르게 인식한다(자폐증이 있

는 사람은 제외).

Ö 웹상에서 사용자를 직접 응시하는 사진은 상당히 감성적인 효과가 있는데, 이는 얼굴에서

눈이 가장 중요한 부위이기 때문이다.

Ö 웹상의 사진 속 인물이 특정 방향을 보고 있으면 사용자는 무의식 중에 그 시선을 따라가지

만, 그렇다고 해서 주의를 집중하는 것은 아니다. 그저 눈으로 보기만 할 뿐이다.


05 사람들은 어떤 대상을 상상할 때 측면이나 약간 위에서 쳐다보는 각도의 상을 떠올린다

누군가에게 커피잔을 그려달라고 부탁하면 대부분의 사람들이 그림 5.1과 같이 스케치한다는 사실

을 알 수 있다.

그림 5.1 사람이 머릿속에서 사물을 보는 방법

실제로 스티븐 팔머는 전 세계를 여행하면서 만난 사람들에게 커피잔을 그려달라고 했다(Stephen

Palmer, 1981). 그림 5.2는 그렇게 그려진 그림의 예다.

그림 5.2 대부분의 사람들에게 ‘커피잔을 그려주세요’라고 했을 때 그려진 그림들


이러한 그림에서 매우 흥미로운 점은 특정 사물이 보여지는 각도가 약간 위에서 내려다 본 시선이

라는 것이다. 일부 그림은 아예 정면에서 표현하기도 했지만 대부분의 그림은 약간 왼쪽이나 오른쪽

위에서 커피잔을 내려다 보고 있다. 이 각도를 표준 시각(canonical perspective)이라고 한다. 극히 소

수의 사람들만이 그림 5.3과 같은 형태(위에서 아래로 곧장 내려다보는 각도의 그림)를 그렸다.

이런 현상에 대해 ‘대체 왜?’라고 의문을 제기할 수도 있다. 사람들이 대부분의 사물을 접하는 시

선의 각도가 측면 혹은 위쪽으로 치우쳐져 있어서 이런 결과가 나왔다고 주장할 수도 있다. 하지만

다양한 사물을 대상으로 실험을 수행한 결과, 사람들은 모두 평상시에 보아왔던 각도나 형태와 다

름에도 측면 혹은 약간 측면 위에서 내려다 보는 각도의 형태를 가장 빨리 인지했다. 사람들이 개나

고양이와 같은 동물의 형체를 보고 정체성을 판단할 때도 이 이론이 적용된다. 대부분의 사람들이

개나 고양이를 훨씬 높은 위치에서 내려다 보는 것이 일상임에도 앞서 말한 표준 시각에서 보이는

형태를 압도적으로 잘 인지한다(사람들이 바닥에서 아주 많이 구르지 않는 한). 특정 사물을 대상

으로 사고하고, 기억하고, 상상하고, 인지할 때 표준 시각에서 보이는 형태를 기준으로 판단하는 것

은 보편적인 현상이다.

그림 5.3 대부분의 사람들은 커피잔을 이렇게 그리지 않는다.

시사점

Ö 사람들은 표준 시각에서 보이는 형태의 사물을 더 빨리 인지하고 더 잘 기억한다.

Ö 웹사이트나 애플리케이션에서 사용할 아이콘을 만들어야 한다면 표준 시각에서 본 형태를

그리는 것이 효과적이다.


06 사람들은 과거의 경험과 기대에 근거해 화면을 훑어본다

사람들은 컴퓨터 화면의 어느 부분을 가장 먼저 볼까? 그리고 두 번째로 보는 곳은 어디일까? 이 순

서는 사용자들의 과업과 기대에 따라 부분적으로 다르게 나타난다. 왼쪽에서 오른쪽 방향으로 읽

는 언어를 사용한다면 화면의 왼쪽부터 보기 시작해 서서히 오른쪽으로 시선을 옮겨오는 경향을 보

인다. 만약 오른쪽에서 왼쪽으로 읽는 언어를 사용하는 경우에는 이와 반대로 행동한다. 하지만 최

상단의 구석에서 시작하지는 않는다. 컴퓨터 화면의 경우 사람들은 화면의 최상단에 사용자에게 그

다지 중요하지 않은 정보(로고라든가, 빈 공간, 혹은 내비게이션 바 등)가 있다고 판단하기 때문에 곧

장 화면의 정중앙을 응시하고 화면의 가장자리는 보지 않는 경향이 있다(그림 6.1).

사람들은 화면의 가장자리는 쳐다보지 않는다.

사람들은 중요한 정보가 좌측 상단에서 시작될 거라 생각한다.

그림 6.1 사람들은 화면의 가장자리는 지나치고 의미 있는 정보를 찾아 시선을 옮긴다.

어떤 화면을 처음 본 후 사람들은 자신이 속한 문화권의 보편적인 독서 패턴에 따라 시선을 옮긴

다(왼쪽에서 오른쪽, 오른쪽에서 왼쪽, 위에서 아래로). 따라서 큰 사진(특히 사람의 얼굴 사진)이나

움직임(애니메이션 배너나 혹은 동영상)이 이러한 일반적인 행동 패턴에 위배된다면 화면에서 치워

버리는 것도 좋다.


사람에겐 보고 싶어하는 사물과 보고 싶어하는 장소에 대한

멘탈 모델이 있다

사용자들은 특정 사물이 컴퓨터 화면상에 있으리라는 기대와 자신이 사용하는 애플리케이션이나

웹사이트에 대한 멘탈 모델을 갖고 있다. 사용자들은 자신의 멘탈 모델에 의거해 화면을 본다. 예를

들어, 아마존에서 검색창을 이용해 쇼핑한 경험이 많다면 아마존이 아닌 다른 사이트에서도 화면이

나타나면 바로 검색 영역을 찾을 것이다.

문제가 생기면 사용자의 시야는 좁아진다

과업을 수행하는 가운데 예기치 못한 문제나 오류가 생기면 사용자는 문제가 발생한 부분에만 시선

을 집중한다. 이 내용은 ‘사람은 실수한다’ 장에서 더 자세히 다루겠다.

시사점

Ö 중요한 정보(혹은 이목을 끌고 싶은 대상)는 화면 위를 기준으로 3분의 1 지점, 혹은 정중

앙에 배치한다.

Ö 화면의 모서리는 사람들이 잘 보지 않는 곳이므로 중요한 내용은 배치하지 않는다.

Ö 문화권에 따른 독서 패턴에 맞게 화면이나 페이지를 디자인해 사용자가 무리 없이 읽어 내

려가게 한다. 시선을 분산시켜서 사용자에게 익숙한 독서 패턴을 깨는 행위는 자제한다.


07 사람들은 특정 사물을 설명해주는 신호를 본다

아마도 문을 열고 어떤 공간에 들어가려고 할 때 당겨야 열릴 것 같은 손잡이라서 힘껏 당겼는데 실

제로는 밀어야 열리는 문이라서 낭패를 본 경험은 누구나 한 번쯤 해봤을 것이다. 일상 생활에서 사

물은 사람들과 어떤 방식으로 상호작용해야 하는지 은연중에 전해준다. 앞서 말한 문고리를 예로 들

면 문고리의 크기나 형태로 사용법을 유추할 수 있다. 머그잔에 달린 손잡이는 사람들에게 “손가락

몇 개를 집어넣어서 나를 들어올리세요”라고 이야기한다. 가위는 원형 고리 안에 손가락을 넣어 잡

고 두 조각의 칼을 접었다 폈다 하면서 사용하게끔 사용자의 행동을 유도한다. 앞서 예로 든 문고리

처럼 사용자에게 잘못된 사용법을 유추하게 하면 사용자는 짜증이 나고 불만을 갖게 된다. 이처럼

사용자가 유추해 내는 사용법의 신호를 행동 유도성(A�ordance)이라고 한다.

1979년, 제임스 깁슨(James Gibson)은 행동 유도성의 개념에 대한 연구를 남겼다. 그는 행동 유도

성을 특정 환경에서의 행동 가능성이라고 설명했다. 1988년 도널드 노먼(Donald A. Norman)은 자신

의 저서인 『디자인과 인간심리(�e Design of Everyday �ings)』에서 행동 유도성의 개념을 재정의했

다. 그는 지각 행동 유도성에 대해 설명했다. 사람들이 어떤 사물에 대해 행동하거나 반응하게 하고

싶다면 그 환경이 컴퓨터 화면이든 실제 일상 생활이든 그 사물이 쉽게 지각될 수 있어야 하고, 찾아

낼 수 있어야 하며, 정확하게 정체성이 해석될 수 있고, 이를 통해 무엇을 할 수 있고 해야 하는지 알

수 있어야 한다는 것이다.

사람은 특정 과업을 수행할 때(이를테면 문을 열거나, 웹사이트에서 책을 주문하는 것) 무의식적,

혹은 자동적으로 주변을 살펴 도움될 만한 도구나 사물을 찾는다. 과업 수행을 위한 환경을 디자인

할 때는 이런 도구나 사물이 눈에 잘 띄고 정확한 용도를 파악할 수 있게 만들어 둬야 한다.

그림 7.1의 문고리를 살펴보자. 사

람들은 형태 때문에 문고리를 손으

로 잡고 당겨서 아래로 내리려고 할

것이다. 예측대로 문고리가 제대로

동작한다면 명확한 지각 행동 유도

성을 지니게끔 잘 디자인된 문고리

라고 할 수 있다. 그림 7.1 이 문고리는 잡고 아래로 내려서 동작하도록 사용자를 유도한다.


그림 7.2는 형태상 당겨야 열릴 것 같지만 ‘미세요’라고 적혀 있어 잠시 멈칫하게 된다. 명확하지 않

은 행동 유도성이란 바로 이런 경우를 뜻한다.

그림 7.2 당겨서 열어야 할 것 같은 형태지만 밀어서 열라는 사인이 붙어 있는 문고리

컴퓨터 화면에서의 지각 행동 유도성

애플리케이션이나 웹사이트를 디자인할 때는 화면상에서의 행동 유도성을 고려해야 한다. 어떤 요

소가 사람으로 하여금 버튼을 클릭하게 만드는지에 관해 생각해 본 적이 있는가? 그래픽 버튼의 그

림자 효과를 보면 사용자는 눌러서 동작했던 기기에 대한 경험을 떠올리게 된다.

그림 7.3은 리모콘 버튼이다. 일상 생활에서 익숙하게 접해 온 형태와 그림자 효과가 화면상의 요

소를 누르게끔 사용자를 유도하는 것이다.

그림 7.3 사람들은 실제 기기에서 보이는 그림자를 보고 버튼을 누르게 된다.


온라인상에서도 이런 그림자 효과를 이용할 수 있다. 그림 7.4에서 볼 수 있듯이 다른 색상으로 도

형의 테두리 부분에 효과를 줘서 ‘눌려 있다’는 느낌을 줄 수 있다. 위아래로 거꾸로 책을 들어 그림

7.4를 다시 보자. 눌려 있다는 느낌보다는 ‘누를 수 있다’는 느낌을 받을 것이다.

그림 7.4 이미 눌려 있는 버튼처럼 보이지만 거꾸로 봤을 때는 눌리지 않은 것처럼 보인다.

이런 시각적 단서는 미묘하지만 상당히 중요하다. 웹사이트에 있는 많은 버튼이 이런 시각적 단서

를 토대로 디자인된다. 그림 7.5가 그러한 예다. 그러나 최근 웹에서는 이러한 효과가 사라지는 추세

다. 그림 7.6과 같은 경우 색상이 입혀진 도형 위에 텍스트를 얹어 클릭을 유도한다.

그림 7.6 온라인 버튼에서는 기존의

시각 단서를 버리는 추세다.

그림 7.5 그림자 효과를 사용하면

일반 도형이 버튼처럼 보인다.

하이퍼링크에서 행동 유도성 단서가 사라지고 있다

대부분의 사람들은 파란색 텍스트에 밑줄이 그어져 있으면 하이퍼링크가 걸린 상태이고 텍스트를

클릭하면 하이퍼링크가 가리키는 페이지로 이동할 거라고 알고 있다. 하지만 최근 많은 웹사이트에

서는 하이퍼링크에 직접적인 단서를 노출하기보다 마우스가 개체 위에 올라갔을 때 단서를 주는 방

식을 취하고 있다. 그림 7.7은 뉴욕 타임즈의 특정 페이지에서 텍스트 위에 마우스를 올렸을 때의 모

습을 보여준다. 그리고 그림 7.8은 마우스를 텍스트 위에 올려 놓았을 때 나타나는 모습이다. 즉, 과

업을 수행하려면 마우스 올리기라는 행위를 한 번 더 해야 하는 셈이다. 만약 아이패드에서 이와 같

은 페이지를 만난다면 이런 단서조차도 찾아볼 수 없을 것이다. 터치 스크린에 손을 대면 곧장 연결

페이지로 이동해버린다. 손을 대는 순간 하이퍼링크를 클릭한 것과 같은 상태가 되는 것이다.


그림 7.8 행동 유도성 단서는 마우스를

올려 놓았을 때 나타난다.

그림 7.7 뉴욕 타임즈에서는 주요 행동

유도성 단서를 찾을 수 없다.

시사점

Ö 디자인할 때 행동 유도성을 고려하자. 특정 사물의 용도를 알려주는 단서를 제공해 사용자

가 더 쉽게 행동하도록 만들 수 있다.

Ö 현재 선택돼 있거나 활성화된 대상을 보여줄 때는 그림자 효과를 이용한다.

Ö 부정확한 행동 유도성을 제공하지 않게 주의한다.

Ö 콘텐츠가 제공될 기기의 특성에 따라 단서의 사용을 고민해야 한다. 터치 기기인지, 포인팅

기기인지 생각해보자. 마우스가 올라간 상태에서 나타나는 정보는 터치 기기에서 확인하

기가 쉽지 않다.


08 사람들은 시야 내에서의 변화를 놓칠 수 있다

스포일러 경고

고릴라 동영상이라고 하는 매우 유명한 동영상을 아직 본 적이 없다면 아래 필자의 블로그에 링크된

동영상을 보길 권한다.

http://www.whatmakesthemclick.net/2009/10/25/100-things-you-shouldknow-

about-people-inattention-blindness/

동영상에 나오는 테스트를 반드시 해보자. 지금 당장 해보고 싶진 않다면 필자가 동영상과 관련된 효

과에 대해 미리 설명해둔 내용을 읽어보자.

고릴라 동영상은 무주의 맹시(inattention blindness)와 변화 맹시(change blindness)의 한 예다. 이 이

것은 사람들이 때때로 시야에서 벌어지는 큰 변화를 놓치기도 한다는 사실을 보여준다. 이 현상은

여러 실험에서 입증됐는데, 그중에서도 농구공/고릴라 실험이 가장 유명하다(이 현상과 관련된 다

른 동영상들도 필자의 블로그에 올려뒀다).

크리스토퍼 채브리스(Christopher Chabris)와 다니엘 시몬스(Daniel Simons)는 『보이지 않는 고릴

라(�e Invisible Gorilla, 2010)』에서 아이트래킹 도구를 이용해 진행한 부가적인 연구 결과에 대해 설

명한다. 아이트래킹은 시선의 이동을 감지하는 기술이다. 정확하게 설명하면 중심시 내의 시선 이동

을 감지하는 기술이다. 주변시의 움직임은 감지하지 않는다. 사람들이 농구공/고릴라 동영상을 보는

동안 아이트래킹 연구를 실시한 결과, 모든 실험 참가자들이 동영상에서 고릴라를 ‘보기는’ 하지만

50%만이 고릴라를 인지한다는 사실을 알게 됐다. 채브리스와 시몬스는 지속적인 연구를 통해 사람

들이 한 가지 사물에 집중할 때 변화를 예상하지 하지 않기 때문에 변화의 발생을 쉽사리 인지할 수

없다고 결론 내렸다.


시사점

Ö 컴퓨터 화면에 뭔가가 있다고 해서 사람들이 그것들을 모두 인지할 거라 가정해서는 안 된

다. 새로고침 버튼을 눌러 약간 수정된 웹 페이지가 나타나도 사람들은 뭐가 달라졌는지 인

식하지 못하는 경우가 있다.

Ö 사용자가 웹 페이지상의 변화를 눈치채게 하고 싶다면 시각 외의 부가적인 감각을 동원해

인지할 수 있게 하자. 예를 들어, 깜빡임이라든가 삐 소리와 같은 청각적 단서를 활용한다.

Ö 아이트래킹 데이터를 해석할 때는 데이터를 100% 진실이라고 간주하거나, 디자인 결정

시 주된 자료로 이용하지 말자. 아이트래킹 자료를 너무 비중 있게 다루거나 디자인 의사결

정의 근간이 되는 자료로 사용해서는 안 된다.

아이트래킹 데이터는 오해의 소지가 있다

아이트래킹은 인간이 무엇을, 어떤 순서로, 얼마나 오랫동안 주시하는가를 관찰하고 데이터를 기록

할 수 있는 기술이다. 이 기술은 사람들이 웹사이트를 대할 때 어떤 것을 가장 먼저 보며, 어떤 순서

로 시선을 옮기는가를 연구할 때 자주 사용된다. 아이트래킹 기법의 장점 중 하나는 피실험자에게

‘현재 무엇을 보고 있는가’를 일일이 물어 볼 필요가 없이 직접 데이터를 축적할 수 있다는 것이다.

그러나 아이트래킹을 통해 얻은 자료는 몇 가지 이유로 오해의 소지를 줄 수 있다.

1) 앞에서 설명했듯이 아이트래킹은 피실험자가 응시하는 대상을 알려줄 뿐 피실험자가 주의를

기울이고 있음을 대변하지는 않는다.

2) 이 장에 인용된 라슨과 로쉬키의 연구는 주변시가 중심시만큼 중요하다는 것을 말해준다.

아이트래킹은 중심시만 관찰할 수 있다.

3) 알프레드 야부스가 진행한 초기 아이트래킹 연구는 피실험자가 실험 중간에 받은 과업을

실행하는 과정을 담고 있다(Alfred Yarbus, 1967). 아이트래킹 데이터는 결국 피실험자에게

내린 임무에 따라 다른 양상이 나타날 수 있으므로 절대적인 객관성을 확보하기는 힘들다.


09 사람들은 가까이에 있는 각기 다른 사물을 하나로 인식한다

두 개의 사물(예: 사진과 문구)이 서로 근접한 거리에 있을 경우 사람들은 근거리에 위치한 두 사물

이 한 덩어리라고 인식한다. 특히 이런 현상은 그림 9.1과 같이 왼쪽에서 오른쪽 방향에 위치한 경우

효과가 훨씬 커진다. 우리는 왼쪽에서 오른쪽으로 책을 읽고 사진과 오른쪽 텍스트 사이의 공간이

아주 좁기 때문에 그림과 오른쪽 텍스트는 하나인 것처럼 보인다.

그림 9.1 사진과 글이 가까이에 있고 우리는 왼쪽에서 오른쪽으로 책을 읽기 때문에 사진이 오른쪽에 있는 글과

관련이 있다고 생각할지도 모른다. 하지만 이 사례에서 사진과 관계된 내용은 실제로 사진 하단에 위치해 있으며,

이것은 대부분의 독자에게 혼선을 일으킬 것이다.

시사점

Ö 각기 다른 대상들(사진, 그림, 제목, 글)이 연관성 있는 것처럼 보이게 연출하고 싶다면 아

주 가까운 거리에 배치하자.

Ö 선이나 테두리로 항목을 분리하거나 묶기에 앞서, 먼저 항목 간의 간격을 대상으로 실험해

보자. 때로는 간격만 바꿔도 시각적 혼란을 줄일 수 있다.

Ö 관련이 없거나 독립적인 항목은 최대한 멀리 떨어뜨려 놓자. 매우 상식적인 이론일지라도

실제 웹 페이지의 레이아웃에서는 이 같은 상식을 무시하고 디자인한 경우가 많다.


10 빨강색과 파랑색을 동시에 쓰면 알아보기 어렵다

서로 다른 색상의 선이나 텍스트를 화면에 비춰보거나 출력해보면 선 사이의 깊이감이 다르게 나타

날 수 있다. 어떤 색상은 앞으로 튀어 나온 것처럼 느껴지고, 어떤 색상은 후퇴한 듯 움푹 들어간 것

처럼 보인다. 이것을 색입체시(chromostereopsis)라 한다. 이 효과는 빨강색과 파랑색에서 가장 강하

게 나타나지만 다른 색상 조합(빨강색과 녹색 등)에서도 나타난다. 이런 색상의 조합은 가독성을 떨

어뜨린다. 그림 10.1은 색입체시의 예다.

그림 10.1 색입체시 현상은 눈의 피로를 높인다.

시사점

Ö 파랑색과 빨강색, 혹은 녹색과 빨강색을 페이지나 화면에 배치할 경우 최대한 멀리 떨어뜨

려 놓자.

Ö 파랑이나 녹색 텍스트를 빨강색 배경 이미지 위에 올려놓거나, 빨강이나 녹색 텍스트를 파

랑색 배경 이미지에 올려놓는 상황을 최대한 피하자.


색맹이라는 단어는 사실, 부적절하다고 할 수 있는 명칭이다. 색맹으로 분류되는 사람들은 사실 모

든 색상을 인지할 수 없는 것이 아니라 특정 색상 간의 차이를 인식하는 데 어려움을 겪는 것에 불과

하다. 대부분의 색맹은 유전이지만 때때로 질병이나 사고로 색맹이 되는 경우도 있다. 대부분의 색

깔 유전자는 X 염색체상에 있어서 X 염색체가 하나인 남성의 경우 X 염색체가 두 개인 여성보다 훨

씬 많은 수의 색맹이 발생한다.

색맹의 종류는 다양하지만 가장 흔한 것은 적색, 황색, 그리고 녹색을 구분하지 못하는 적록 색맹

이다. 가끔 청색과 황색을 구분하지 못하거나 모든 색상을 회색으로만 인식하는 색맹도 있는데 이는

매우 드문 사례다.

그림 11.1은 정상적인 색상 체계를 지닌 사람에게 보이는 위스콘신 교통청의 동계 도로 상황 지도

다. 그림 11.2는 같은 화면이 적록색맹인 사람에게 어떻게 보이는지 보여준다. 그리고 그림 11.3은 같

은 화면이 청록색맹인 사람에게 어떻게 보이는지 알려준다. 각 예는 같은 색상이 사람에 따라 각자

다르게 인지된다는 사실을 보여준다.

경험에 따르면, 특별한 의미를 부여하는 색상을 쓰는 모든 곳에서는 보조적인 표기 규약(이를테

면, 색과 선의 두께 등)이 필요하다. 이렇게 하면 색맹인 사람이 특정 색상을 기준으로 판단하지 않

고도 내용을 정확히 해석할 수 있다.

그림 11.1 정상인에게 보이는 색상

11 9%의 남성, 0.5%의 여성이 색맹이다


그림 11.2 적록 색맹에게 보이는 색상 차이

그림 11.3 청록 색맹에게 보이는 색상 차이

색상 인식 오류로 발생하는 불편함을 줄이는 또 다른 방법은 다양한 종류의 색맹 사용자를 고려

해 색상 체계를 선정하는 것이다. 그림 11.4와 그림 11.5, 그림 11.6은 특정 주간의 독감 발생률을 보

여준다. 이 웹 페이지에서는 의도적으로 색맹 여부와 상관없이 모든 사용자에게 똑같이 보이는 색상

만 사용했다. 정상/적록 색맹/청록 색맹인 사용자에게 모두 해당 웹 페이지는 거의 동일하게 보인다.


그림 11.4 정상인에게 보이는 색상(www.cdc.gov)

그림 11.5 적록 색맹에게 보이는 색상 차이 (www.cdc.gov)

그림 11.6 청록 색맹에게 보이는 색상 차이 (www.cdc.gov)


색맹 사용자의 색상 체계를 확인할 수 있는 웹사이트

색맹 유전자를 보유하고 있는 사람들이 웹사이트 및 이미지의 특정 색상을 어떻게 인지할지 알아볼

때 이용할 수 있는 몇 가지 사이트가 있다. 그 중 두 가지를 추천한다.

• www.vischeck.com

• colorfilter.wickline.org

색맹인 사람은 종종 보호색이나 위장색을 더 잘 구별하기도 한다

어떤 이들은 색맹인 사람들이 색깔로 주의를 끄는 방법에 무디기 때문에, 또 어떤 이들은 색맹인 사

람들이 패턴, 질감 등의 다른 단서에 익숙하기 때문이라고도 말한다. 어떤 이유에서건 일부 색맹인

사람들은 정상 색상 체계를 지닌 사람들보다 보호색이나 위장색을 더 잘 구별해낸다.

시사점

Ö www.vischeck.com이나 colorfilter.wickline.org와 같은 사이트를 통해 색맹인 사용자에게

여러분이 디자인한 웹사이트가 실제로 어떻게 보일지 확인해 보자.

Ö 색상을 통해 특정 의미를 나타내야 한다면(예를 들어, 즉각적인 주의를 요하는 부분에 녹

색을 써야 한다면) 보조적인 표기 규약을 사용한다(녹색과 함께 외곽선을 사용해 주의를

끌 수 있게 디자인한다).

Ö 색상 체계를 세울 때 정상 범주에 해당하지 않는 사용자도 모두 고려한다. 청록/적록 색맹

사용자를 고려해 빨간색, 녹색, 청색보다는 갈색이나 황색을 사용한다.


12 색상의 의미는 문화에 따라 다양하다

수년 전, 필자는 분기별 총 이익을 표현하고자 지역별로 색상 지도를 만든 고객과 일한 적이 있다. 당

시 미국 동부는 황색, 중부는 녹색으로, 그리고 서부는 빨간색으로 표현했다. 영업 부문의 부사장이

연단에 올라서서 재무/회계 임원을 대상으로 슬라이드 발표를 시작하면서 색상별로 미주 지역을 구

분한 지도를 화면에 띄우자 객석에선 웅성거리는 소리가 들리면서 다급해 하는 대화가 오가기 시작

했다. 부사장은 이야기를 이어가고자 했으나 이미 산만해진 청중의 주의를 집중시킬 수 없었다. 청중

들이 서로 제각각 이야기하고 있었던 것이다.

결국, 한 사람이 크게 소리쳐 물었다. “서부에서 대체 무슨 일이 일어난 겁니까?”

부사장은 깜짝 놀라 대답했다. “그게 무슨 말이죠? 아무런 일도 없습니다. 이번 분기에 서부는 실

적이 아주 좋습니다.”

회계사나 재무 관련 업계에서 빨간색은 매우 열악한 상황, 즉 금전적으로 손해가 발생했음을 나타

낸다. 부사장은 그들에게 별생각 없이 빨간색을 선택했다고 해명해야 했다.

색상은 사회적 의미를 담고 있다. 예를 들어, 재무상의 문제가 있거나 위험한 상황, 또는 정지해야

하는 상황에 빨간색을 쓴다. 녹색은 금전적 이익이나 앞으로 전진하라는 의미로 쓰인다. 색상을 사

용할 때는 색상의 의미를 고려해 매우 신중하게 선정해야 한다. 또한 같은 색상이라도 하위 집단에

따라 다른 뜻으로 전달될 수 있다.

다른 국가에서 의뢰가 들어왔다면 그곳에서 쓰이는 색상 체계에 대해 알아봐야 한다. 일부 색상만

문화권에 상관없이 공통적인 의미를 지니고 있다(예를 들어, 금색은 부, 성공, 명예 등의 뜻으로 대다

수의 문화권에서 통용된다). 하지만 대부분의 색상은 문화와 사회에 따라 각기 다른 의미를 지니고

있다. 예를 들어, 미국에서 흰색은 순수함이나 결혼식에서 쓰이는 색으로 여겨지지만 다른 나라에

서는 죽음이나 장례식을 의미하는 색상으로 쓰인다. 행복이란 관념도 흰색, 녹색, 황색, 혹은 빨간색

등 어느 나라에서 사용되느냐에 따라 각기 표현을 달리할 수 있다.

데이빗 맥캔들리스(David McCandless)의 색상환

InformationIsBeautiful.net을 운영하는 데이빗 맥캔들리스는 색상의 의미를 문화권별로 구분한 색

상환을 아래 사이트에서 제공하고 있다.

http://www.informationisbeautiful.net/visualizations/colours-in-cultures/


색상 및 분위기에 대한 연구

연구에 따르면 색상이 분위기에 영향을 미칠 수 있다고 한다. 외식 및 서비스 업계에서는 이 화두에 대해

오랜 기간 연구해왔다. 예를 들어, 미국에서 오렌지색은 사람들에게 불안감을 조성해 사람들이 한 공간

에 오래도록 머물지 못하게 한다고 한다(패스트푸드 식당에서 요긴하게 쓰이는 원리). 갈색과 파란색은

편안한 분위기를 조성해 오히려 오래 머물 수 있게 유도한다(바에서 유용하게 쓰이는 색상). 그러나 한

색상이 분위기에 유용하게 작용하려면 해당 색상으로 둘러싸인 방 안에 사람이 앉아 있어야 한다. 사용

자가 단순히 컴퓨터 화면을 응시하고 있다면 사용자는 특정 색상의 영향을 받지 않는다.

시사점

Ö 색상은 매우 신중하게 선택해야 한다. 해당 색상이 불러일으키는 의미를 알아본다.

Ö 디자인하기 전에 대상 국가나 문화권을 확인한 뒤 문화적 색상환이 어떤지

InformationIsBeautiful.net과 같은 전문 사이트에서 확인해 의도하지 않은 색상 사용을 사

전에 방지한다.

01 HTML5와 CSS3 소개 l 29

사람은 어떻게 읽는가?

현재, 전 세계적으로 문자를 읽고 쓸 수 있는 성인은 전체 인구의 80%가 넘는다. 대부분

의 사람들에게 읽는 행위는 매우 기본적인 커뮤니케이션의 형태다. 그렇다면 사람들은 어

떻게 읽는 걸까? 그리고 읽는다는 행위에 대해 디자이너들이 알아야 할 것은 무엇일까?


13 대문자가 읽기 어렵다는 것은 미신이다

아마 영문 대문자로 된 단어 조합이 대/소문자 조합이나 소문자로만 적힌 것보다 읽기 어렵다는 이

야기를 들은 적이 있을 것이다. 또한 정확하게 수치까지 인용하며 ‘14~20% 정도 더 읽기 어렵다’는

주장도 들어본 적이 있을 것이다. 이 이야기는 단어를 읽을 때 단어의 모양을 인식하거나 그룹으로

인식한다는 주장과 연결된다. 대소문자가 섞인 단어나 소문자로만 적힌 단어는 고유한 형태를 지닌

다. 그러나 대문자로만 쓴 단어는 모두 같은 모양(정사각형 형태)이다. 따라서 이 이론에 따르면 대문

자로만 적힌 단어는 구별하기 힘들다는 결론이 나온다(그림 13.1).

그림 13.1 단어 형태 이론

단어 형태 이론에 대한 설명은 그럴듯하지만 정확한 것은 아니다. 단어의 형태에 따라 가독성

이 높아지거나 속독이 가능하다는 사실을 입증한 연구 결과는 어디에도 없다. 제임스 카텔(James

Cattell)이라는 언어심리학자가 1886년에 이 이론을 주장했다. 당시 그가 제시했던 증거가 몇 가지 있

었지만 최근 케네스 팝(Kenneth Paap, 1984)과 키스 레이너(Keith Rayner, 1998)의 연구 결과는 실제로

사람이 글을 읽을 때는 철자를 예상하고 나서 단어를 인식한다는 사실을 보여준다. 사람이 어떻게

읽는지에 대해 좀 더 자세히 살펴보자.

독서는 보기보다 순조로운 행동은 아니다.

글을 읽을 때 사람들은 자신의 눈이 책 위를 부드럽게 훑고 지나가는 것처럼 느끼지만 실상 눈에서

벌어지는 일은 전혀 다르다. 사람의 안구는 매우 빨리 움직이며, 날카롭게 행간과 문단 사이를 뛰

어넘거나 잠시 멈춰있기도 한다. 이처럼 안구가 행간을 점프해서 움직이는 현상을 도약 안구 운동

(saccade) 1 이라고 한다(약 7~9개의 글자를 한꺼번에 뛰어넘는다). 그리고 안구가 잠시 움직임을 멈추

는 현상을 안구 고정이라 한다(약 0.25초).

1 　(옮긴이) 단속적 눈 운동이라고도 하는데 안구의 순간적인 움직임을 말한다.


도약 안구 운동 중에 사람은 아무것도 볼 수 없다(실질적으로 맹인과 같은 상태가 된다). 그러나

이 움직임의 속도가 매우 빨라서 사람이 느끼지 못할 뿐이다. 사람의 안구는 도약 안구 운동을 하는

대부분의 시간 동안 글을 앞으로 읽어 내려가며, 그중 10~15% 정도는 이미 읽었던 철자와 단어를 되

새긴다. 그림 13.2는 도약 운동과 안구 고정 패턴의 예를 보여준다. 단어 위에 있는 점들은 안구 고정

을 나타내며, 물결 무늬는 도약 안구 운동을 나타낸다.

Fortunately these saccades are really fast so you are not blind for long.

They are so fast that you don’t even realize they are happening.

그림 13.2 도약 안구 운동과 안구 고정의 패턴

사람들은 글을 읽을 때 주변시를 사용한다

도약 안구 운동은 한 번에 7개에서 9개 가량의 글자를 뛰어넘는다. 그러나 지각 범위는 실제 도약

안구 운동의 두 배 가량 된다. 1996년, 케네스 굿맨(Kenneth Goodman)은 사람이 활자를 읽을 때

주변시를 이용해 어떤 글자가 이후에 나타날지 탐색한다는 사실을 알아냈다. 눈은 약 15개 가량의

글자를 한 번에 읽고(왼쪽에서 오른쪽으로 읽는 경우), 주변시를 이용해 오른쪽에 있는 글자를 미리

본다. 때때는 되돌아와서 글자를 다시 읽는 경우도 있다. 그러나 한 번에 15개의 글자를 읽을 수 있

다고 하더라도 읽어 낸 단어 전체의 의미를 파악할 수는 없다. 사람은 1개에서 7개 정도의 글자에

서 의미론적인 단서를 포착할 수 있으며 8~15개 정도의 글자는 인식만 할뿐 의미를 파악하지는 못

한다.

악보를 읽는 것은 활자를 읽는 것과 매우 유사하다

악보를 술술 잘 읽는 사람들 역시 활자를 읽어 내려가는 것과 같은 안구 도약 운동과 안구 고정, 그리

고 15개 정도의 ‘글자’를 미리 예측하는 과정을 거친다.


그렇다면 모든 영문 대문자가 읽기 어렵다는 것인가?

확실히 사람은 대문자를 느리게 읽기는 하지만 그것은 일상 생활에서 자주 접하지 않기 때문이다.

일상 생활에서 보이는 대부분의 활자는 대/소문자가 혼용된 상태이며, 대부분의 사람은 여기에 익

숙해져 있다. 만약 대문자로만 적힌 문장을 읽는 연습을 한다면 결국 대/소문자가 섞인 문장만큼 대

문자로만 적힌 문장을 빠르게 읽을 수 있을 것이다. 이는 반드시 사람들이 대문자로만 적힌 글을 읽

는 법을 연습해야 한다는 뜻은 아니다. 사람들이 대문자에 익숙하지 않고 이를 읽는 속도가 상대적

으로 느리기 때문에 요즘은 대문자로만 적힌 글이 ‘강조’의 뜻으로 여겨진다(그림 13.3).

*DOUBLE CHECK THE LOCATION YOU ARE SIGNING UP FOR

*BE SURE TO ASSIGN AND UNDO CODE Codes are case sensitive)

*CHECK YOUR EMAIL FREQUENTELY - CLASS INFO WILL BE COMMUNICATED VIA EMAIL

그림 13.3 사람들은 대문자로 적힌 문장은 강조/주의의 뜻으로 받아들이며, 읽는 데 전혀 어려움을 느끼지 않는다.

대문자에 관련된 좋은 연구 예제

케빈 라슨(Kevin Larson)의 ‘대문자와 대/소문자 혼용’에 관한 훌륭한 연구의 요약본이 아래 사이

트에 있으니 참고하기 바란다.

http://www.microsoft.com/typography/ctfonts/wordrecognition.aspx

시사점

Ö 대문자로만 적힌 텍스트는 강조의 의미로 쓰이며, 실생활에서는 자주 사용되지 않는다.

Ö 대문자는 표제 또는 반드시 사람들의 주목을 끌어야 하는 곳에만 사용하자. 예를 들어 중요

한 파일을 지우기 전에 나오는 경고창 등에 대문자를 사용하는 것이 효과적이다.


14 읽기와 독해는 전혀 다른 영역이다

만약 여러분이 생물학자라면 아래 문단의 내용을 쉽게 이해할 수 있을 것이다.

TCA 사이클은 기질 이용도(substrate availability)와 생성물 억제(product inhibition)에

의해 크게 영향을 받는다. TCA 사이클에서 탈수소효소산물인 NADH(니코틴아미

드 아데닌 디뉴클레오티드)가 석신산 탈수소효소를 제외한 피루브산 탈수소효소와

이소시트르산 탈수소효소, 그리고 알파 케토글루타르산 탈수소효소의 생성을 억제

하는 반면, 숙시닐-코아는 숙시닐-코아 합성효소와 시트르산 합성효소를 억제한다.

생물학자가 아니라면 이 문단이 무슨 뜻인지 도통 알아들을 수 없을 것이다. 문단 자체를 읽을 수

는 있으나 내용을 이해하지는 못한다는 것이다. 이처럼 새로운 정보는 기존의 인지 구조에 연결됐을

때라야 제대로 이해될 수 있다.

텍스트의 읽기 난이도(가독성)를 계산할 수 있다.

플레시-킨케이드 가독성 공식(Flesch-Kincaid formula)은 텍스트의 가독성을 평가할 때 널리 쓰

인다. 이 공식을 이용하면 읽기 용이성과 독해 수준의 정도를 함께 측정할 수 있는데, 값이 클수록 해

당 문단은 읽기 쉬우며 값이 작을수록 읽기 어렵다는 것을 의미한다. 공식은 그림 14.1과 같다.

전체 음절 수

전체 문장 수

전체 단어 수( ) ( )206.835-1.015

전체 단어 수– 84.6

그림 14.1 플레시-킨케이드 가독성 공식

다음의 영어로 적힌 문단을 읽을 수 있는가?

Eevn touhgh the wrosd are srcmaelbd, cahnecs are taht you can raed tihs praagarph aynawy. �e order of the ltteers in each word is not vrey ipmrotnat. But the frsit and lsat ltteer msut be in the rhgit psotitoin. �e ohter ltetres can be all mxeid up and you can sitll raed whtiuot a lot of porbelms. �is is bceusae radenig is all aobut atciniptanig the nxet word.

어색한 철자 조합의 단어에 구애받지 않고 위 문단을 읽을 수 있었을 것이다. 단어를 읽은 후에야 뜻

해석이 이뤄지기 때문이다. 우리는 다음에 어떤 단어가 나올지 예측할 수 있다. 사전 지식을 많이 가

지고 있을수록 더 쉽게 예측하고 내용을 해석할 수 있는 것이다.


제목과 헤드라인은 매우 중요하다

아래의 문단을 읽어보자.

먼저, 항목을 분류하자. 이 작업에서는 색상을 기준으로 하는 것이 보편적이지만 질감이

나 손질 방법 등의 다른 기준으로도 충분히 분류할 수 있다. 모든 분류 작업이 끝나면 이

제 기기를 작동시킬 준비가 끝난 것이다. 분류된 항목을 각각 분류된 대로 따로 기기에 넣

어야 한다.

위 문단이 어떤 과정을 설명한 것인지 알 수 있는가? 이해하기 어려웠을 것이다. 같은 문단에 제목

을 붙이면 어떨까?

가독성 측정을 위한 온라인 도구

어떤 워드프로세서 소프트웨어에는 플레시-킨케이드 공식이 내장돼 있기도 하다. 혹은 온라인에 있는 도구를

이용해 특정 문단의 독해 수준을 측정할 수도 있다.

http://www.standards-schmandards.com/exhibits/rix/index.php

필자의 블로그에 올린 글(www.whatmakesthemclick.net) 중 한 문단을 시험해 봤다. 결과는 그림 14.2와 같다.

그림 14.2 필자의 블로그에 올린 글의 가독성을 측정한 결과


세탁기 사용법

먼저, 항목을 분류하자. 이 작업에서는 색상을 기준으로 하는 것이 보편적이지만 질감이

나 손질 방법 등의 다른 기준으로도 충분히 분류할 수 있다. 모든 분류 작업이 끝나면 이

제 기기를 작동시킬 준비가 끝난 것이다. 분류된 항목을 각각 분류된 대로 따로 기기에 넣

어야 한다.

여전히 잘 읽히지는 않지만 제목이 있으면 적어도 내용 이해는 가능하다.

단어의 용도에 따라 뇌의 각기 다른 부위가 사용된다

단어로 어떤 활동을 하느냐에 따라 각각 뇌의 다른 부분에서 처리된다. 글을 읽거나 독해할 때, 들

을 때, 말할 때, 동사를 생성할 때, 이 모든 활동은 각기 다른 부분에서 처리된다. 그림 14.3을 참

고하자.

수동적인 독서 단어를 들을 때

단어를 말할 때 동사를 생성할 때

그림 14.3 단어의 사용 목적에 따라 뇌의 다른 부분에서 처리된다.


읽은 내용을 어떻게 기억하는지는 독자의 시각/입장에 달렸다

앤더슨과 피커트는 사람들에게 어떤 주택에 관련된 정보와 그 주택에 얽힌 이야기를 읽게 했다

(Anderson and Pichert, 1978). 한 그룹은 그 주택을 구매하려는 사람의 입장에서 이야기를 읽었고, 다

른 그룹은 그 주택을 털려는 도둑의 입장에서 이야기를 읽었다. 각 그룹은 주어진 시각에 따라 각기

다른 정보를 기억했다.

시사점

Ö 사람들은 능동적으로 독서에 임한다. 읽은 내용을 어떻게 받아들이고 기억하느냐는 독자

의 개인적인 경험, 콘텐츠를 읽는 시각, 그리고 읽기 전에 받은 지시에 따라 달라진다.

Ö 독자들이 읽은 내용 중 특정 정보를 기억할 수 있을 거라 가정해서는 안 된다.

Ö 의미 전달을 돕는 헤드라인이나 제목을 문단에 붙인다. 이 작업은 아주 중요하다. 독자의

수준에 따라 콘텐츠의 수준을 조절한다. 쉬운 단어와 음절을 사용해 넓은 독자층이 쉽게 읽

을 수 있게 한다.


15 패턴은 각기 다른 서체로 쓰여진 글자를 알아볼 수 있게 해 준다

사람들은 수세기에 걸쳐 어떤 모양의 서체가 더 쉽게 읽히거나 적절한지 논의해왔다. 세리프체와 산

세리프체에 대한 논란은 이 논란의 중심에 있었다. 어떤 이들은 산세리프체가 평범하기 때문에 더

읽기 쉽다고 하고, 또 어떤 이들은 다음 철자와 모양이 이어져 시선을 이끌 수 있기 때문에 세리프체

가 더 읽기 편하다고 주장한다. 실제로 연구 결과, 이 두 서체는 독해나 읽는 속도, 서체 간의 선호도

에서 아무런 차이가 없다는 점이 드러났다.

우리는 패턴 인식을 통해 글자를 구분한다

어떻게 그림 15.1의 모든 표식을 철자 A라고 인식할 수 있을까?

그림 15.1 우리는 다양하게 변형된 글자를 동일한 것으로 인식할 수 있다.

아마 위에 표현된 다양한 형태의 글자 A를 모두 다 기억할 수는 없을 것이다. 대신, A라는 글자가 어

떤 형태로 생겼는지를 기억하고 있다. 따라서 기억하고 있는 형태와 비슷하게 생긴 뭔가를 보게 되

면 뇌는 그 패턴을 인식하게 된다(사람이 어떻게 형태를 인식하는지에 대해서는 ‘사람은 어떻게 보

는가’ 장의 기하소자와 관련된 이야기를 참고하기 바란다).

디자이너들은 분위기나 브랜드, 혹은 심상을 환기시킬 때 서체를 사용한다. 어떤 서체군은 특정

시대를 떠올리게 한다(복고풍 vs. 현대적 느낌). 또 어떤 서체군은 진지함이나 장난기 같은 느낌을 내

기도 한다. 그러나 독해 용이성의 측면에서 이런 서체들은 크게 영향력이 없다. 장식적인 요소가 과

해서 알아보기 힘들 정도가 아니라면 뇌는 형태 패턴으로 글자를 인식하기 때문에 서체의 모양이

가독성을 해치는 경우는 거의 없다.

그림 15.2는 각기 다른 디자인의 서체다. 첫 번째 서체는 비교적 읽기 쉬우나 다른 것들은 조금씩

읽기가 어렵다. 그러한 서체는 뇌가 글자의 패턴을 인식하는 데 어려움을 겪게 한다.


그림 15.2 일부 장식성 서체는 쉽게 읽히기도 하지만 어떤 것들은 읽는 데 다소 어려움이 있다.

서체 유형, 타이포그라피, 그리고 가독성에 대해 조금 더 깊게 알아보자

서체 유형, 타이포그라피, 가독성에 대한 연구 자료를 보고 싶다면 아래의 훌륭한 웹사이트를 방문

해보라.

http://www.alexpoole.info/academic/literaturereview.html

서체의 가독성이 떨어질 경우 텍스트 자체의 의미를 잃어버릴 수도 있다

송현진과 노버트 슈발츠는 피실험자들에게 운동하는 방법이 적힌 안내문을 나눠줬다(Hyunjin Song

and Norbert Schwarz, 2008). 읽기 쉬운 서체(Arial 같은 서체)로 쓰여진 안내문의 경우, 사람들은 8분

정도면 안내받은 운동을 할 수 있고 운동이 그렇게 어렵지 않을 거라 예상했다. 또한 피실험자들은

일상에서 기꺼이 이 운동을 하려는 의향을 보였다. 그러나 안내문의 내용이 과한 장식이 들어간 서

체로 적힌 안내문(그림 15.3)을 받은 실험군은 동일한 내용의 운동을 하는 데 거의 두 배가 넘는 시

간(약 15분 정도)이 걸릴 것이며, 안내받은 운동을 따라 하는 데도 어려움이 있을 것으로 예상했다.

그리고 일상 생활에서도 안내받은 운동을 하고 싶은 의향이 덜했다.


턱을 가슴 쪽으로 당겼다가 위로 최대한 올립니다.

같은 동작을 6~10회 반복합니다.

왼쪽 귀를 왼쪽 어깨에 닿도록 고개를 왼쪽으로 기울였다가,

오른쪽 귀가 오른쪽 어깨에 닿도록 오른쪽으로 기울입니다.

같은 동작을 6~10회 반복합니다.

그림 15.3 안내문의 서체가 두 번째 예처럼 읽기 힘들면 독자는 안내문의 내용을 실천하기가 어려울 거라 생각할

것이다.

시사점

Ö 세리프체와 산세리프체는 가독성 측면에서 동일한 수준이다.

Ö 특이하거나 과한 장식성 디자인이 가미된 서체는 뇌가 글자의 패턴을 인식하는 데 부담을

줘서 읽는 속도를 늦춘다.

Ö 사람들이 서체를 읽는 데 문제를 겪으면 문맥의 내용을 이해하는 데 어려움의 감정을 그대

로 투영하게 되어 문장의 내용 자체를 이해하거나 실천하기 힘들다고 생각하게 된다.


16 서체 크기가 중요하다

서체에 대한 논의가 끝난 후에는 크기에 대한 문제가 불거진다. 사용자들이 부담감 없이 글을 읽게

하려면 서체의 크기가 충분히 커야 한다. 높은 연령대의 사용자뿐 아니라 젊은 사용자들도 서체가

심하게 작으면 불만을 토로할 때가 많다.

어떤 서체는 서체 크기가 같은데도 x높이(x-height) 때문에 더 크게 보일 때가 있다. x높이는 글

자 그대로 영문 소문자 x의 높이다. 각 서체마다 x높이가 다르다. 따라서 서체 크기가 같더라도 x

높이에 따라 크기가 달라 보일 수 있다. 그림 16.1은 서체의 각 부분들을 어떻게 측정하는지 보여

준다.

서체 크기

아센더

디센더

x높이

가상선

기선

그림 16.1 서체 크기와 x높이를 측정하는 방법

일부 새로운 서체군(Tahoma나 Verdana)은 x높이가 크게 디자인되어 컴퓨터 화면에서 쉽게 읽힌

다. 그림 16.2는 각기 다른 서체군을 같은 서체 크기로 써 놓은 것이다. 어떤 것은 상대적으로 커 보이

는데 그 이유는 다름 아닌 x높이 때문이다.

그림 16.2 x높이가 크면 서체의 크기도 커 보인다.


시사점

Ö 다양한 연령층의 사용자에게 편안하게 읽힐 수 있는 서체 크기를 선정한다.

Ö 실제 서체 크기보다 훨씬 커 보이므로 온라인에서 읽혀야 할 글에는 x높이가 큰 서체를 사

용한다.


17 컴퓨터 화면을 읽는 것은 종이 인쇄물을 읽는 것보다 훨씬 힘들다

컴퓨터 화면, 킨들, 그리고 종이는 각각 다른 독서 경험을 만들어 낸다. 컴퓨터 화면을 보는 경우 화

면 자체가 고정적이지 않다(계속 화면 새로고침을 자동으로 수행 중이며 화면에서 빛이 발산되고 있

는 상태다). 종이 인쇄물을 읽을 때는 고정적인 이미지를 대하게 된다(새로고침 따위는 없다). 또, 빛

이 끊임없이 발산되는 컴퓨터 화면과는 다르게 종이의 질에 따라 빛의 반사도가 달라진다. 컴퓨터

화면의 새로고침과 빛 발산은 독자의 눈을 피곤하게 만든다. 전자 잉크(킨들 같은)는 실제 종이 인쇄

물과 비슷한 느낌을 준다. 화면에서 빛을 반사하며 새로고침 현상 없이 고정적인 화면을 유지한다.

컴퓨터 화면상의 글씨를 읽기 쉽게 만들려면 적정 크기의 서체 크기와 함께 서체의 색상, 그리고

서체가 올라갈 배경 화면의 색상도 함께 고려해야 한다. 그림 17.1은 가독성을 위한 최상의 조합을 보

여준다(흰색 바탕에 검정색 글씨가 가장 읽기 쉽다).

검정색 바탕 위의 흰색 글씨는 읽기 힘들다.

글씨 색상과 바탕색에 적절한 대조를 줘야 한다.

가독성을 위한 최상의 조합은 흰색 바탕에 검정색 글씨다.

그림 17.1 흰색 바탕 위의 검정색 글씨가 가장 읽기 쉽다.

시사점

Ö 컴퓨터 화면에서 읽혀질 글자는 서체 크기가 커야 한다. 눈의 피로도를 최소화하는 데 유용

할 것이다.

Ö 문단을 짧게 끊어 쓴다. 아이콘을 쓰고, 짧은 문단으로 만들고, 이미지를 사용한다.

Ö 바탕색과 글씨의 색상에 적절한 대조 효과를 준다. 검정색 글씨를 흰색 바탕에 올렸을 때가

가장 읽기 쉽다.

Ö 콘텐츠의 내용을 충실히 하라. 결국 읽기 쉬운 디자인을 입혀놓아도 내용 자체가 흥미롭지

않다면 사용자들의 눈길을 사로잡을 수 없다.


18 사람들은 긴 길이의 문장을 더 빨리 읽지만 짧은 길이의 문장을 더 선호한다

컴퓨터 화면에 띄울 문단의 가로 길이를 정해본 적이 있는가? 한 줄에 100자가 들어가는 길이나 50

자짜리 짧은 길이? 아니면 그 중간쯤? 정답은 사용자가 글을 빨리 읽게 할 것이냐, 혹은 화면 자체를

좋아하게 만들 것이냐에 따라 달라진다.

메리 다이슨은 문장 길이에 대한 연구를 실시하면서 사람들이 선호하는 문장 길이에 대한 또 다

른 연구를 병행했다(Mary Dyson, 2004). 그녀의 연구 결과에 따르면 한 줄에 공백 포함 100자 정도의

길이가 컴퓨터 화면에서 적절한 속도로 읽기에 편하다. 그러나 사람들은 45자에서 72자 정도의 짧은

길이를 선호하는 것으로 나타났다. 그림 18.1은 긴 문장과 짧은 문장에 대한 예다.

사람들은 짧은 길이의 문장을 더 선호한다. 사람들은 긴 문장을 더 빨리 읽는다.

그림 18.1 문장 길이, 속도, 그리고 선호도. www.maderalabs.com


이 연구는 사람들이 길게 가로로 이어진 세로단을 짧은 여러 개의 세로단보다 빨리 읽을 수 있다

는 사실을 보여준다. 그러나 선호도는 다르다. 사람들은 짧은 길이로 끊어진 여러 개의 세로단을 훨

씬 더 선호한다(그림 18.2).

그림 18.2 사람들은 길게 하나로 이어진 세로단을 더 빨리 읽을 수 있지만 짧게 나뉜 세로단 형식을 선호한다.

사람들에게 어떤 형식을 더 좋아하는지 물어보면 각 줄이 짧고 여러 단으로 쪼개진 형식을 더 좋

아한다고 답할 것이다. 흥미롭게도 사람들에게 어떤 형식을 더 빨리 읽을 수 있느냐고 물어볼 때도

짧은 세로단 형식이라고 대답한다는 것이다. 사실, 더 빨리 읽을 수 있는 것은 가로 길이가 긴 세로단

인데도 말이다.

긴 길이의 문장을 더 읽기 쉬운 이유는 도약 안구 운동과 안구 고정의 흐름이 덜 방해받기 때문이다

문장의 끝에 시선이 다다르면 도약 안구 운동과 안구 고정과 같은 안구의 움직임이 가로막힌다. 따

라서 시선이 조각조각 끊기기 때문에 짧은 길이의 문장은 문장이 끊길 때마다 안구의 움직임을 방해

하는 횟수가 훨씬 많다.

시사점

Ö 문장 길이는 골치 아프다. 짧은 길이의 문장과 가로 길이가 짧은 세로단 형식의 글을 선호

하는 사람들의 비위를 맞출 것인가, 아니면 사용자 선호도와 직관을 무시하고 과학적으로

빨리 읽히는 줄줄이 긴 문장과 가로 길이가 긴 세로단 형식의 글을 내놓을 것인가?

Ö 읽는 속도가 중요한 상황이라면 한 줄에 공백을 포함해 100자 정도의 길이로 글자를 늘어

놓자.

Ö 여러 개의 글을 한꺼번에 보여야 하는 상황이라면 가로 길이가 짧은 세로단 형식으로 문장

을 끊어서 보여주자(공백을 포함해 한 줄에 약 45자 정도의 길이로).

모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실

Documents