-
Notifications
You must be signed in to change notification settings - Fork 98
/
ko.html
1722 lines (1365 loc) · 59.7 KB
/
ko.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!--
THE WISDOM AND/OR MADNESS OF CROWDS
by Nicky Case | apr 2018
- - - - - - - - - - -
FAN TRANSLATION GUIDE:
https://github.com/ncase/crowds#how-to-translate-this-thing
Hello fan-translaters! Thank you so, so much for your help.
I hope you know what you've gotten yourself into.
There's about 3600+ WORDS to translate, including
the Bonus Boxes and References.
To make things easier (or less painful, anyway) I've marked
what needs to be translated and how with big "TRANSLATE" comments.
Ctrl+F for "TRANSLATE" in uppercase to see what needs to be translated!
BUT BEFORE YOU TRANSLATE ANYTHING, DO THIS:
1) Look up the two-letter code of the language you're translating to:
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
2) *COPY* index.html, and name the copy [two-letter-code].html
For example: de.html, ar.html, zh.html, etc...
3) Translate *THAT* page. Do NOT modify the original index.html!
And once you're done, go to "translations.txt", and follow the
instructions there to let this game "know" your translation exists.
Good luck, and thanks again!
<3,
~ Nicky Case
-->
<!DOCTYPE html>
<html lang="ko"> <!-- lang="(TRANSLATE: set your language code here, same as the page name!) e.g: es, es-ES, pt-BR, ja, it, fr-CA, de, ..." -->
<head>
<!-- Meta Info -->
<title>군중의 지혜 그리고/혹은 군중의 광기</title> <!-- <title>(TRANSLATE this part only)</title> -->
<meta name="description" content="인간 네트워크에 대한 인터렉티브 가이드"/> <!-- content="(TRANSLATE this part only)" -->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="alternate" href="http://ncase.me/crowds/" hreflang="en">
<link rel="alternate" href="http://ncase.me/crowds/cs.html" hreflang="cs">
<link rel="alternate" href="http://ncase.me/crowds/es.html" hreflang="es-ES">
<link rel="alternate" href="http://ncase.me/crowds/fr.html" hreflang="fr">
<link rel="alternate" href="http://ncase.me/crowds/it.html" hreflang="it">
<link rel="alternate" href="http://ncase.me/crowds/ja.html" hreflang="ja">
<link rel="alternate" href="http://ncase.me/crowds/pt.html" hreflang="pt">
<link rel="alternate" href="http://ncase.me/crowds/ru.html" hreflang="ru">
<link rel="alternate" href="http://ncase.me/crowds/uk.html" hreflang="uk">
<link rel="alternate" href="http://ncase.me/crowds/vi.html" hreflang="vi">
<link rel="alternate" href="http://ncase.me/crowds/zh-CN.html" hreflang="zh-CN">
<link rel="alternate" href="http://ncase.me/crowds/zh-TW.html" hreflang="zh-TW">
<!-- Sharing -->
<meta itemprop="name" content="군중의 지혜 그리고/혹은 군중의 광기"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="description" content="인간 네트워크에 대한 인터렉티브 가이드"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="image" content="http://ncase.me/crowds/social/thumb.png">
<meta name="twitter:title" content="군중의 지혜 그리고/혹은 군중의 광기"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:description" content="인간 네트워크에 대한 인터렉티브 가이드"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/crowds/social/thumb.png">
<meta property="og:title" content="군중의 지혜 그리고/혹은 군중의 광기"> <!-- content="(TRANSLATE this part only)" -->
<meta property="og:description" content="인간 네트워크에 대한 인터렉티브 가이드"> <!-- content="(TRANSLATE this part only)" -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/crowds/">
<meta property="og:image" content="http://ncase.me/crowds/social/thumb.png">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/index.css?v=7">
<style>
/* Sandoll MiSaeng (산돌미생체): http://webtoon.daum.net/event/misaengfont */
@font-face {
font-family: "SDMiSaeng";
font-style: normal;
font-weight: 400;
src: url(css/SDMiSaeng.ttf?v=1) format('truetype');
}
body {
font-family: "PatrickHand", "SDMiSaeng", Helvetica, Arial;
font-size: 30px !important;
line-height: 1.15em !important;
}
#slideshow > .box.transitionable {
font-size: 0.95em !important;
line-height: 1.15em !important;
}
.sim_ui {
line-height: 1em !important;
}
bon {
line-height: 0.9em !important;
}
.en {
font-size: 23px;
}
</style>
</head>
<body>
<!-- THE SLIDESHOW -->
<div id="container">
<!-- Simulation(s) in background -->
<div id="simulations_container">
<div id="simulations"></div>
</div>
<!-- Slideshow: words & buttons -->
<div id="slideshow_container">
<div id="slideshow"></div>
</div>
<!-- Scratch Transition -->
<canvas id="scratch" width="711" height="400"></canvas>
<!-- Skip -->
<div id="skip">스킵 ></div> <!-- TRANSLATE -->
<!-- Modal -->
<div id="modal_container">
<div id="modal_bg"></div>
<div id="modal">
<div id="modal_close">⨯</div>
<div id="modal_content_container">
<div id="modal_content"></div>
</div>
</div>
</div>
</div>
<!-- Navigation: Audio, Contents, Share, Translations -->
<div id="navigation_container">
<div id="sound" mute="no">
<div id="sound_icon"></div>
<span id="sound_on">켜기</span> <!-- TRANSLATE -->
<span id="sound_off">끄기</span> <!-- TRANSLATE -->
</div>
<div id="sharing">
<a id="fb" target="_blank" href="TODO"></a>
<a id="tw" target="_blank" href="TODO"></a>
<a id="em" target="_blank" href="TODO"></a>
<span id="share_title">
군중의 지혜 그리고/혹은 군중의 광기 <!-- TRANSLATE -->
</span>
<span id="share_desc">
<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
어떤 집단이 똑똑하게 혹은 멍청하게, 친절하게 혹은 잔인하게 행동하는 이유는 무엇일까요? 인간 네트워크에 대한 인터렉티브 가이드: <!-- TRANSLATE -->
</span>
</div>
<div id="navigation">
<!-- The chapters -->
<!-- TRANSLATE all the Chapter names! -->
<div chapter="Introduction">
<span>0</span>
<span>0. 서론</span>
</div>
<div chapter="Networks">
<span>1</span>
<span>1. 연결</span>
</div>
<div chapter="Simple">
<span>2</span>
<span>2. 전파</span>
</div>
<div chapter="Complex">
<span>3</span>
<span>3. 복잡한 전파</span>
</div>
<div chapter="BB">
<span>4</span>
<span>4. 결속다지기 & 다리 놓기</span> <!-- note: & is html for the "and" sign -->
</div>
<div chapter="SmallWorld">
<span>5</span>
<span>5. 작은 세상</span>
</div>
<div chapter="Conclusion">
<span>6</span>
<span>6. 결론적으로...</span>
</div>
<div chapter="Credits">
<span>7</span>
<span>7. 감사의 말</span>
</div>
<div chapter="Sandbox">
<span>★</span>
<span>★ 샌드박스 모드! ★</span>
</div>
<!-- A divider -->
<span class="nav_divider"></span>
<!-- Bonus Notes & References -->
<div modal="bonus">
<span>?</span>
<span>보너스 박스!</span> <!-- TRANSLATE -->
</div>
<div modal="references">
<span style="margin-top: 7px; font-size: 35px;">*</span>
<span>링크 & 참조</span> <!-- TRANSLATE -->
</div>
<div modal="translations">
<span style="margin-top:5px; position:relative;"><span style="
position: absolute;
top: -8px;
left: 6px;
">A</span><span style="
position: absolute;
font-size: 16px;
top: -1px;
left: 16px;
">あ</span></span>
<span>번역</span> <!-- TRANSLATE -->
</div>
<!-- The hover bubble -->
<span id="nav_bubble"></span>
</div>
<div id="translations"></div>
<div id="social"></div>
</div>
<!-- The Pencil -->
<div id="pencil_container">
<canvas id="pencil"></canvas>
</div>
<!-- Preloader -->
<div id="pre_preloader">
<div>로딩...</div> <!-- TRANSLATE -->
</div>
</body>
</html>
<!-- - - - - -->
<!-- SCRIPTS -->
<!-- - - - - -->
<script src="js/lib/helpers.js"></script>
<script src="js/lib/inobounce.js"></script>
<script src="js/lib/minpubsub.src.js"></script>
<script src="js/lib/howler.min.js"></script>
<script src="js/lib/Key.js"></script>
<script src="js/lib/Mouse.js"></script>
<script src="js/lib/Sprite.js"></script>
<script src="js/slideshow/Slideshow.js"></script>
<script src="js/slideshow/Pencil.js"></script>
<script src="js/slideshow/Boxes.js"></script>
<script src="js/slideshow/Scratch.js"></script>
<script src="js/slideshow/Navigation.js"></script>
<script src="js/slideshow/SimUI.js"></script>
<script src="js/slideshow/SandboxUI.js"></script>
<script src="js/slideshow/Modal.js?v=5"></script>
<script src="js/slideshow/Preloader.js"></script>
<script src="js/slideshow/Translations.js?v=5"></script>
<script src="js/sim/Peep.js?v=2"></script>
<script src="js/sim/Connection.js"></script>
<script src="js/sim/ConnectorCutter.js"></script>
<script src="js/sim/Simulations.js"></script>
<script src="js/chapters/A_Preloader.js"></script>
<script src="js/chapters/B_Introduction.js"></script>
<script src="js/chapters/C_Networks.js"></script>
<script src="js/chapters/D_Simple_Contagion.js"></script>
<script src="js/chapters/E_Complex_Contagion.js"></script>
<script src="js/chapters/F_Bonding_And_Bridging.js"></script>
<script src="js/chapters/G_Small_World.js"></script>
<script src="js/chapters/H_Conclusion.js"></script>
<script src="js/chapters/I_Credits.js"></script>
<script src="js/chapters/J_Sandbox.js?v=2"></script>
<script src="js/main.js"></script>
<!-- - - - - - - - - - - - -->
<!-- THE SLIDESHOW'S WORDS -->
<!-- - - - - - - - - - - - -->
<!--
This is the bulk of what you need to TRANSLATE!
Translate just the text that's within the <tag></tags>
If you're using a code editor (like Sublime Text https://www.sublimetext.com/),
it should automatically highlight what the text is (usually in white).
-->
<span style="display:none">
<!-- Preloader -->
<words id="preloader_title">
<div style="font-size: 30px; line-height: 0.9em;">
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px; display:block;">군중</span>
<span style="position: relative;top: -11px;">의</span>
<br>
<span style="font-size: 60px;letter-spacing: 4px;">지혜</span>
<span style="position:relative;top: -10px;">그리고/혹은</span>
<span style="font-size: 60px;">광기</span>
</div>
<div style="color:#999; font-size: 23px;">
<!-- TRANSLATE note: comment out the line below... -->
게임 소요 시간: 30 분 • 제작: nicky case, 2018년 4월</br>
<!-- ...and UN-comment + TRANSLATE this line! -->
번역: 임진성(Jinsung Lim) • <a href='.'>original in English (원작: 영어)</a>
</div>
</words>
<words id="preloader_button">
<next></next>
</words>
<words id="preloader_loading">
로딩...
</words>
<words id="preloader_play">
시작해요! <div class="rarr"></div>
</words>
<!-- Introduction -->
<!--
TRANSLATE note: to make the text stay in a circle, I added lots of <br> breaks.
You may have to re-arrange the <br>'s in order to do your translation.
It shouldn't look too bad if they're slightly off, though!
Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
-->
<words id="intro">
<br><br>
아이작 뉴튼 경은 자신이 꽤나 똑똑하다고
<br>
확신하고 있었습니다. 제 말은, 미적분과 중력 이론을
<br>
발명했는데, 금융 투자 같은 걸 할 수 있을 정도로 똑똑한건
<br>
당연하잖아요, 그렇죠? 어쨌든, 짧게 말하자면, 뉴튼은
<br>
남해 거품 사건이라고도 알려져 있는 전국적인 투기 광란에
<br>
$4,600,000 (현재 달러 가치로) 를 잃었습니다.
<br><br>
이후에 뉴튼이 말하길: <i>“천체의 움직임은 계산할 수
<br>
있어도, 인간의 광기는 도저히 계산할 수 없다.”</i>
<next>그거 참 안됐네요 <div class="rarr"></div> </next>
</words>
<words id="intro_2">
<div style="height:0.5em"></div>
물론, 시장, 기관, 혹은 민주주의
<br>
전체가 혼란에 빠진건 그 때 뿐만이 아닙니다
<br>
— 군중의 <i>광기</i> 때문에요. 그럼에도, 우리가 인류에 대한
<br>
희망을 잃었을 그 때, 허리케인에서 서로를 구하기 위해 협력하는
<br>
시민들, 문제에 대한 해답을 내놓는 지역 공동체, 더 나은 세상을
<br>
위해 싸우는 사람들을 봅니다 — 군중의 <i>지혜</i>를요!
<div style="height:0.9em"></div>
<b>하지만 <i>왜</i> 어떤 집단은 광기에, 혹은 지혜에 물드는 걸까요?</b>
<br>
어떤 이론도 모든 것을 설명 할 수는 없지만, 저는 새로운 연구 분야인
<br>
<b>네트워크 과학</b>이 우리를 인도할 수 있을 거라고 생각해요!
<br>
이것의 핵심은: 군중을 이해하기 위해서는, <i>개인</i>을 관찰하기 보단...
<next>...그들의 <i>연결</i>을 봐야 한다. <div class="rarr"></div> </next>
</words>
<!-- Networks -->
<words id="networks_tutorial_start">
<b>네트워크를 그려봐요!</b>
<br>
각각의 연결은 두 사람간의 우정을 나타냅니다:
</words>
<words id="networks_tutorial_connect">
드래그로 연결
</words>
<words id="networks_tutorial_disconnect">
드래그로 연결 끊기
</words>
<words id="networks_tutorial_end">
이것 저것 둘러보기를 끝내셨다면,
<next wiggle>계속하세요 <div class="rarr"></div> </next>
</words>
<words id="networks_threshold">
자, 사회적 연결은 단순히 예쁜 그림을 그리는 것 이상입니다.
사람들은 자신의 세상을 이해하기 위해 그들의 사회적 연결을 <i>관찰 합니다.</i>
예를 들어서, 사람들은 그들의 동료를 보면서
<b>(자신을 제외한) 몇 %의 친구들이</b> 말하자면,
술고래인지 알아냅니다. <icon name="yellow"></icon>
</words>
<words id="networks_threshold_instruction">
<b>연결을 드래그/지우고<br>무슨일이 일어나는지 확인하세요! <div class="rarr"></div> </b>
</words>
<words id="networks_threshold_end">
<next>좋아, 이해했어요</next>
</words>
<words id="networks_pre_puzzle">
하지만, 네트워크는 사람들을 <i>속일 수</i> 있습니다.
지구가 평평해 보이는게 우리가 그 위에 살고 있기 때문인 것처럼,
사람들은 자신이 <i>속해 있기 때문에</i> 사회에 대한 잘못된 견해를 가질 수 있습니다.
</words>
<words id="optional_reading">
<div style="position:absolute; top:20px;">
<i>선택적인</i> 추가 보너스 노트! ↑
</div>
<div style="position:absolute; left:240px; top:25px;">
↓ 링크와 참조
</div>
</words>
<words id="networks_pre_puzzle_2">
<bon id="books"></bon>
<br>
예를 들어서, 1991년의 연구에서<ref id="drunk"></ref>
“거의 모든 [대학생]들이 자신의 친구들이 자기보다 더 많이 마신다고 보고했습니다.”
하지만 그건 불가능하잖아요!
어떻게 그럴 수가 있죠?
자, 여러분은 스스로 해답을 고안해내기 직전입니다. 네트워크를 그려서 말이죠.
이제 모두를...
<next>속일 시간이에요 <div class="rarr"></div> </next>
</words>
<words id="networks_puzzle">
<b style="font-size:2em">퍼즐 타임!</b>
<br>
<i>모두를</i> 속여서
그들 친구의 과반수가 (50% 이상) 술고래라고 생각하게 만드세요 <icon name="yellow"></icon>
(실제로는 그렇지 않은 사람이 2:1로 많은데도요!)
</words>
<words id="networks_puzzle_metric">
<b>속아넘어감:</b>
</words>
<words id="networks_puzzle_metric_2">
명 / 9 명
</words>
<words id="networks_puzzle_end">
축하합니다! 한 무리의 학생들을 조종해서 매우 불건전한 사회적 규범이
유행하고 있다고 믿게 만들었군요! 아주 잘했어요!
<next wiggle>...고마워요?</next>
</words>
<words id="networks_post_puzzle">
여러분이 방금 만들어낸 것은 다수의 환상<ref id="majority"></ref>이라고 불립니다.
왜 사람들이 그들의 정치적 견해가 대다수의 의견이라고 생각하는지,
혹은 왜 급진주의가 실제로 그런것 보다 더 흔해 보이는지를 설명하죠.
<i>광기.</i>
<bon id="connections"></bon>
하지만 사람들은 수동적으로 다른 사람의 생각과 행동을 <i>관찰</i>하기만 하지 않죠,
그들은 적극적으로 다른사람을 <i>모방</i>합니다.
그러면 이제부터, 네트워크 과학자들이 <b>전파</b>라고 부르는 것을 살펴보죠.
<next>“전파!” <div class="rarr"></div> </next>
</words>
<!-- Simple Contagions -->
<words id="simple_simple">
<i>일단 "역치" 어쩌고는 잠시 제쳐두기로 해요.</i>
아래에 정보를 가진 사람 <icon name="red"></icon> 이 있습니다.
좀 <i>잘못된</i> 정보요. "가짜 뉴스" 라고도 하죠.
그리고 매일매일, 저 사람이 친구들에게 루머를 퍼뜨립니다. 바이러스 처럼요.
그리고 그 친구들은 <i>그들의</i> 친구들에게 퍼뜨립니다. 계속 그렇게요.
<br>
<b>
시뮬레이션을 시작하세요! <div class="darr"></div>
(p.s: 시뮬레이션이 <i>작동하는 동안</i>에는 네트워크를 그릴 수 없어요)
</b>
</words>
<words id="simple_simple_2">
노트: 부정적 느낌의 이름에도 불구하고, "전파(전염)"는 좋을 수도 나쁠 수도 있습니다. (혹은 중립적이거나 모호할 수도요)
흡연, 건강, 행복, 투표 성향, 그리고 협력 정도가 모두 "전염적"
이라는 뚜렷한 통계적 증거가<ref id="contagion"></ref> 있어요.
-- 심지어 자살과<ref id="suicides"></ref> 총기 난사<ref id="shootings"></ref> 또한 그렇다는 증거도요.
</words>
<words id="simple_simple_end">
<next wiggle>음 그건 좀 슬픈데요 <div class="rarr"></div> </next>
</words>
<words id="simple_cascade">
맞아요 정말 그렇죠.
어쨌든, <b>퍼즐 타임!</b>
<br>
네트워크를 그리고 & 시뮬레이션을 시작하세요.
그래서 <i>모두가</i> "전염원"에 전염되게요.
<br>
(새로운 규칙: <i>두꺼운</i> 연결은 끊을 수 없습니다)
</words>
<words id="simple_cascade_end">
<next wiggle>환-장-적이군 <div class="rarr"></div> </next>
</words>
<words id="simple_post_cascade">
이 광기의 전파는
<b>"정보의 폭포 현상/정보 연쇄 파급효과<span class="en">(information cascade)</span>"</b>
라고 불립니다.
뉴튼은 1720년에 이런 폭포에 휘말렸던 거죠.
세계의 금융기관은 2008년에 이런 폭포에 휘말렸습니다.<ref id="subprime"></ref>
<br><br>
하지만: <i>이 시뮬레이션은 잘못됐습니다.</i>
대부분의 생각은 바이러스 처럼 퍼지지 <i>않습니다.</i>
많은 믿음과 행동들을 보면, "전염" 되기 위해서는 한번 보다는 더 많이 "노출" 될 필요가있습니다.
그래서, 네트워크 과학자들은 생각과 행동이 어떻게 퍼지는지 설명하기 위한
더 좋은 방법을 떠올렸습니다. 그건 바로...
<next wiggle>“<i>복잡한</i> 전파!” <div class="rarr"></div> </next>
</words>
<!-- Complex Contagions -->
<words id="complex_complex">
"역치" 와 과도한 음주 <icon name="yellow"></icon> 예시를 다시 가져와보죠!
처음에 이걸 실행했을 때는, 사람들이 자신의 행동을 바꾸지 않았습니다.
<br><br>
이제, 사람들이 <i>자신의 친구들의 50%+가 술을 마실 때</i>
자신도 술을 마시기 시작하면 어떤 일이 벌어지는지 시뮬레이션 해보죠!
<b>시뮬레이션을 시작하기 전에, 어떤 일이 <i>일어날지</i> 스스로 생각해보세요.</b>
<br><br>
<b>이제, 시뮬레이션을 시작하세요. 그리고 실제로 어떻게 되나 보죠! <div class="rarr"></div> </b>
</words>
<words id="complex_complex_2">
<span style="line-height:1.15em; display:block;">
좀 전의 "가짜 뉴스" <icon name="red"></icon> 전염원과는 달리,
이번에는 "과도한 음주"가 <icon name="yellow"></icon> 모두에게 <i>퍼지지 않았</i>어요!
처음의 몇 사람들은 단 한명의 술고래에게만 노출되었음에도 불구하고, 그것이 친구의 50% 였기 때문에 "전염"되었습니다.
(맞아요, 외로운 사람들이죠)
반면에, 연결고리의 끝 부분에 있는 사람은 "전염"되지 <i>않았습니다.</i>
왜냐면 그들은 술고래 친구에게 노출되어있긴 하지만, 그게 50%+ 역치를 넘지는 않았기 때문입니다.
<div style="height:0.75em"></div>
"전염된" 친구들의 <i>상대적</i> 퍼센트<span class="en">(%)</span>가 중요합니다.
<i>바로 그게</i> <b>복잡한 전파</b> 이론과<ref id="complex"></ref>,
그저 바이러스처럼 퍼지는 <b>단순한 전파</b> 이론의 차이입니다.
(어쩌면 "단순한 전파"는 그저 "0% 이상"의 전염 역치를 가지고 있다고 할 수도 있겠네요)
<div style="height:0.75em"></div>
그런데, 전파가 나쁘기만 하지는 않죠 —
그러니까 군중의 <i>광기</i>는 이쯤하고...
<next>...군중의 <i>지혜</i>는 어떤가요?</next>
</span>
</words>
<words id="complex_complex_3">
여기, 자원봉사를 하려는 사람이 <icon name="blue"></icon> 있어요. 그러니까... 뭐랄까,
허리케인에서 사람들을 구하거나, 지역사회의 취약계층 아동을 가르치거나, 뭐 그런 멋진 것들이요.
요점은, 이것이 "좋은" 복잡한 전파라는 거예요.
그런데 이번에는 역치가 단지 25% 뿐이라고 해보죠 —
사람들은 25% 혹은 그 이상의 친구들이 자원 할 때만 따라하려 할 것입니다.
뭐, 좋은 일에는 조금의 사회적 격려가 필요하니까요.
<br><br>
<b>← 모두가 좋은 생각에 "전염"되게 만드세요!</b>
</words>
<words id="complex_complex_3_end">
<span style="line-height:1.3em; display:block;">
<b>NOTE:</b> 자원봉사는 수 많은 복잡한 전파중 단지 <i>하나</i> 일뿐입니다.
다른 예시로는: 투표율, 생활 습관,
믿음을 바꾸는 것,
이슈를 깊게 이해하기 위해 시간을 갖는것
— 한 번 이상의 "노출"이 필요한 그 어떤 것들.
복잡한 전파가 <i>필연적으로</i> 현명하지는 않지만,
현명한 것은 복잡한 전파입니다.
<div style="height:0.75em"></div>
(그래서 일상에서의 <i>단순한</i> 전파는 뭐가 있을까요?
대개 시시한 것들, 마치, "주머니쥐는 젖꼭지가 13개다" 같은거요.<ref id="possum"></ref>)
<br>
(역주: 별거 아닌데 사람들 사이에 퍼지는 잡지식이나 루머들)
<bon id="contagions"></bon>
이제, 복잡한 전파의 힘과 이상함을 <i>정말로</i> 보이기 위해서는, 다시 돌아가야 합니다...
<next>...이전의 퍼즐로 <div class="rarr"></div> </next>
</span>
</words>
<words id="complex_cascade">
기억하나요? 이번에는, <i>복잡한</i> 전파니까 <icon name="blue"></icon> 좀 더 어려울 거예요...
<br>
<b>모두를 복잡한 지혜로 "전염"시키도록 하세요! <div class="darr"></div></b>
</words>
<words id="complex_cascade_feel_free">
(자유롭게 '시작'을 누르고 원하는 만큼 많은 답을 <i>시도</i>해보세요)
</words>
<words id="complex_cascade_end">
<next wiggle>아주 멋져 <div class="rarr"></div> </next>
</words>
<words id="complex_post_cascade">
이제, 여러분은 어쩌면 어떤 전파를 퍼뜨리던지 그냥 계속 연결을 추가하기만 하면 된다고 생각할 수도 있습니다.
"복잡"하든지 "단순"하든지, 좋은 것이든 나쁜 것이든, 지혜이거나 광기이거나 상관없이 말이죠.
하지만 정말 그럴까요? 음, 한번 다시 떠올려보죠...
</words>
<words id="complex_post_cascade_end">
<next wiggle>...또 다른 이전의 퍼즐을 <div class="rarr"></div> </next>
</words>
<words id="complex_prevent">
아래의 "시작"을 누르면, 복잡한 전파가 <icon name="blue"></icon> 모두에게 퍼질거예요.
놀랄 것도 없죠.
그런데 이제, 지금까지 우리가 해왔던 것의 <i>반대의</i> 일을 해봐요:
<b>전파가 모두에게 퍼지는 것을 <i>막기 위한</i> 네트워크를 그려보세요! <div class="darr"></div></b>
</words>
<words id="complex_prevent_2">
보셨나요?
많은 연결은 항상 <i>간단한</i> 생각이 퍼지는 것을 도와주지만,
<b><i>복잡한</i> 생각이 퍼지는 것은 방해할 수 있습니다!</b>
(흠, 인터넷이 떠오르지 않나요?)
이건 단지 이론적인 문제만이 아닙니다. 이것으로 인해 삶과...
</words>
<words id="complex_prevent_end">
<next wiggle>...죽음이 결정될 수 있어요. <div class="rarr"></div> </next>
</words>
<words id="complex_groupthink">
NASA(미항공우주국)의 사람들은 엄청 똑똑합니다.
제 말은, 그 사람들은 뉴튼의 이론을 사용해서 우리를 달로 보냈잖아요.
어쨌든, 짧게 말하자면, 1986년,
<i>한 엔지니어의 경고에도 불구하고</i>,
나사의 사람들은 <i>챌린저호</i>를 발사했지만,
결국 폭발했고 7명의 사람이 사망했습니다.
직접적인 원인은:
그날 아침이 너무 추웠었고,
<div style="height:0.9em"></div>
조금 덜 직접적인 원인은: 매니저가 엔지니어의 경고를 무시했다는 것이죠.
왜 그랬을까요? 바로 <b>집단 순응 사고</b><ref id="groupthink"></ref> 때문입니다.
집단이 <i>너무</i> 조직적으로 짜여있다면, (최고위 기관일 수록 그런 경향이 있죠)
그들의 믿음 혹은 자아를 시험하는 복잡한 생각에 저항심을 갖게 됩니다.
<div style="height:0.9em"></div>
그러니까, 그게 어떻게 기관들이 집단 광기에 빠질 수 있는지에 대한 답이에요.
그렇다면 군중의 <i>지혜</i>를 "설계"하려면 어떻게 해야 할까요?
두 단어로 짧게 말하면:
<next>결속 다지기 & 다리 놓기 <div class="rarr"></div> </next>
</words>
<!-- Bonding & Bridging -->
<words id="bonding_1">
← 너무 적은 연결에서는, 생각이 퍼질 수 없습니다.
<br>
너무 많은 연결에서는, 집단 순응 사고가 일어납니다. <div class="rarr"></div>
</words>
<words id="bonding_2">
<b>
적당한 지점을 갖는 집단을 그려보세요:
복잡한 생각을 퍼뜨릴 수 있도록 적당히!
<div class="darr"></div>
</b>
</words>
<words id="bonding_end">
간단하죠!
집단 <i>내부의</i> 연결 개수를 <b>결속적 사회 자본</b><ref id="social_capital"></ref>이라고 합니다.
그렇다면...
<next wiggle>...집단 <i>사이의</i> 연결은요?</next>
</words>
<words id="bridging_1">
이미 예측하셨을 수도 있듯이,
집단 <i>사이의</i> 연결 개수는
<b>교량적 사회 자본</b>이라고 합니다.
이건 중요해요, 왜냐면 교량적 사회 자본은 외딴 섬 같은 집단이 내부의 의견만 반복하는 것에서 벗어 날 수 있도록 도와주거든요!
<br>
<b>모두를 복잡한 지혜에 "전염" 시키기 위해서 다리를 지으세요:</b>
</words>
<words id="bridging_end">
결속다지기와 같이, 다리 놓기에도 적당한 지점이 있습니다.<ref id="bridge"></ref>
(추가적인 도전: 다리를 너무 많이 지어서 복잡한 전파가 통과하지
<i>못 하게</i> 해보세요!)
이제 우리는 집단 <i>내부의</i> 그리고 <i>사이의</i> 연결들을 "설계"하는 방법을 알았습니다. 이제...
<next wiggle>...한번에 <i>둘 다</i> 해보죠!</next>
</words>
<words id="bb_1">
<b style="font-size:2em">마지막 퍼즐!</b>
<br>
군중 전체에 지혜를 퍼뜨리기 위해 집단 내부의 연결(결속 다지기)과 집단 사이의 연결(다리 놓기)을 그리세요:
</words>
<words id="bb_2">
축하합니다, 여러분은 방금 굉장히 특별한 네트워크를 그렸어요!
결속과 다리가 적절히 조합된 네트워크는 매우 중요합니다.
그리고 그것을 부르는 이름은...
<next wiggle>“작은 세상 네트워크” <div class="rarr"></div> </next>
</words>
<words id="bb_small_world_1">
<i>"획일 없는 화합". "균열 없는 다양성". "<span class="en">E Pluribus Unum:</span> 많은 것 중, 하나".</i>
<br>
어떤 방법으로 표현되던, 시대와 문화에 관계없는 여러 사람들이 종종 같은 지혜에 도달하곤 합니다:
<b>
건강한 사회는 집단 <i>내부의</i> 결합과 집단 <i>사이의</i> 다리가 적절히 필요하다는 사실이요.
</b>
그 말은:
</words>
<words id="bb_small_world_2">
이렇게가 아니라...
<br>
(왜냐면 생각이 퍼질 수 없으니까요)
</words>
<words id="bb_small_world_3">
이렇게도 아니고...
<br>
(왜냐면 집단 순응 사고가 생기기 때문에)
</words>
<words id="bb_small_world_4">
...<i>이렇게요:</i>
</words>
<words id="bb_small_world_5">
네트워크 과학자들은 이제 이 고대의 지혜를 위한 수학적 정의를 가지고 있습니다:
<b>작은 세상 네트워크</b><ref id="small_world"></ref>.
결속+다리의 최적의 조합은 우리의 뉴런이 어떻게 연결되어있는지<ref id="swn_neurons"></ref>,
어떻게 집단의 창의성과<ref id="swn_creativity"></ref>
문제 해결능력을<ref id="swn_social_physics"></ref> 향상시키는지 설명하고,
심지어 한번은 미국의 대통령 존 F. 케네디가 핵 전쟁을 (거의) 피하도록 도운적도 있습니다!<ref id="swn_jfk"></ref>
그래요, 작은 세상은 정말 대단한 거예요.
</words>
<words id="bb_small_world_end">
<next>좋아요, 정리해보면... <div class="rarr"></div> </next>
</words>
<!-- Sandbox -->
<words id="sandbox_caption">
(쉿... 비밀 하나 말해줄까요?<ref id="sandbox"></ref>)
</words>
<words id="sandbox_contagion">
전염:
</words>
<words id="sandbox_contagion_simple">
간단
</words>
<words id="sandbox_contagion_complex">
복잡
</words>
<words id="sandbox_color_chooser">
전염된 사람의 색:
</words>
<words id="sandbox_tool_chooser">
도구를 고르세요...
</words>
<words id="sandbox_tool_pencil">
네트워크 그리기
</words>
<words id="sandbox_tool_add">
사람 추가
</words>
<words id="sandbox_tool_add_infected">
"전염된" 사람 추가
</words>
<words id="sandbox_tool_move">
사람 옮기기
</words>
<words id="sandbox_tool_delete">
사람 지우기
</words>
<words id="sandbox_tool_clear">
<b>모두 지우기</b>
</words>
<words id="sandbox_shortcuts_label">
(...아니면, 키보드 단축키를 쓰세요!)
</words>
<words id="sandbox_shortcuts">
[1]: 사람 추가 [2]: "전염된" 사람 추가
<br>
[Space]: 옮기기 [Backspace]: 지우기
</words>
<!-- Conclusion -->
<words id="conclusion_1">
<div style="font-size: 30px;">
결론: 모든 것은...
</div>
<div style="
width: 100%;
position: absolute;
font-size: 88px;
top: 20px;
line-height: 100px; display:block;
">
전파 & 연결
</div>
<div style="
width: 710px;
position: absolute;
top: 125px;
left: 250px;
">
<b>전파:</b>
뉴런이 뇌에서 신호를 전달하는 것 처럼,
사람들은 사회에서 믿음 & 행동을 전달합니다.
우리는 우리의 친구들에게 영향을 줄 뿐 아니라,
친구들의 친구들에게도 영향을 주고, 그리고 심지어 친구들의 친구들의 친구들까지도요!<ref id="three_degrees"></ref>
(“세상에서 보기 바라는 변화, 스스로 그 변화가 되어야 한다” 등 등)
하지만, 뉴런과 같이, 신호만이 중요한 것은 아닙니다. 이건 또...
</div>
<div style="
width: 710px;
position: absolute;
top: 275px;
left: 250px;
">
<b>연결:</b>
너무 적은 연결에서 복잡한 생각은 퍼질수 없습니다.
너무 <i>많은</i> 연결에서 복잡한 생각은 집단 순응 사고에 의해 묵살됩니다.
요령은 작은 세상 네트워크를 만드는거예요. 결속다지기와 다리 놓기의 최적의 조합이죠:
<i class="en">e pluribus unum.</i>
</div>
<div style="
width: 350px;
position: absolute;
top: 410px;
left: 220px;
text-align: center;
color: #999;
">
(여러분 만의 시뮬레이션을 만들고 싶나요?
아래의 (*) 버튼을 클릭해서, 샌드박스 모드를 확인하세요!)
</div>
<div style="
width: 400px;
position: absolute;
top: 395px;
right: 0px;
text-align: right;
">
그래서, 맨 처음 우리의 질문은 어떻죠?
<br>
<i>왜</i> 어떤 집단은 지혜에 그리고/혹은...
</div>
<div style="
width: 300px;
position: absolute;
top: 460px;
right: 0px;
">
<next>...광기에 빠지는 걸까요?</next>
</div>
</words>
<words id="conclusion_2">
<span style="line-height:1.15em; display:block;">
<div style="height:0.5em"></div>
뉴튼부터 나사를 거쳐서 네트워크 과학까지,
<br>
우리는 여기서 많은 것을 다루었습니다. 짧게 말해서,
<br>
군중의 광기는 꼭 <i>개개의 사람</i>에 의한 것이 아니라, 우리가
<br>
어떻게 네트워크의 끈적한 거미줄에 갖혀 있는지에 기인합니다.
<div style="height:0.7em"></div>
그것이 개인의 책임을 포기하는 것을 <i>의미하지는 <b>않습니다.</b></i> 우리는 그
<br>
거미줄을 <i>엮는 사람</i>이기도 합니다. 그러니까, 여러분이 가진 <i>전파 방법을</i>
<br>
개선하세요: 그럴 듯한 생각들에 회의적으로 대하세요<ref id="flatter"></ref>, 복잡한 생각을
<br>
이해 하기 위해 시간을 들이세요. 그리고, 여러분의 <i>연결을</i> 개선하세요:
<br>
여러분과 닮은 친구들과 어울리세요, 하지만 문화적/정치적 분열을
<br>
넘어선 연결도 만드세요.
<div style="height:0.7em"></div>
우리는 현명한 거미줄을 지을 수 있습니다. 물론, 화면 위에서
<br>
선을 끄적이는것 보단 어렵겠죠...
<next>...하지만, 그만큼 가치있으니까요.</next>
</span>
</words>
<words id="conclusion_3">
<i>
“역사의 위대한 승리와 비극은,
근본적으로 선하거나 근본적으로 악한 사람에 의한 것이 아닌,
근본적으로 사람인 사람들에 의한 것이다.”