nfdc 2015 내러티브 중심의 디자인

101
1 내러티브 중심의 디자인 매력적인 게임 그래픽 만들기 독립개발실 비피더스 김 동 균 NextFloor Developer Conference 2015

Upload: dongkyun-kim

Post on 23-Jan-2017

9.579 views

Category:

Design


3 download

TRANSCRIPT

Page 1: NFDC 2015 내러티브 중심의 디자인

1

내러티브 중심의 디자인매력적인 게임 그래픽 만들기

독립개발실 비피더스

김 동 균

N e x t F l o o r D e v e l o p e r C o n f e r e n c e 2 0 1 5

Page 2: NFDC 2015 내러티브 중심의 디자인

2

발표자 소개

김동균 a.k.a nbee라 쓰고 kkashi라 읽음

2015 독립개발실 비피더스 / 잔소리꾼2012 오즈헌터 / 전천후 잡부 프로듀서2011 최강의 군단 / 3D 캐릭터 디자인2010 위메프 / 앱디자이너 2009 메리위도 / 전천후 잡부 디렉터2005 S4리그 / 그래픽 잡부 아트디렉터2003 모나토에스프리 / 잡부 그래픽

Page 3: NFDC 2015 내러티브 중심의 디자인

3

일종의 발상법에 가까운 이야기더 의미있고 매력적인 디자인을 하기 위한 고민

뻘소리로 들릴지도 [...]

그러니 가볍게 들어주세요

이 발표는..

Page 4: NFDC 2015 내러티브 중심의 디자인

4

이젠 모르시는 분들이 더 많을 것 같지만..

생각의 시작

1987년 개봉. 28년전 작품..(..)

Page 5: NFDC 2015 내러티브 중심의 디자인

5

홍콩 느와르의 시작

선글라스,바바리코드,쌍권총,비둘기 등 수많은 클리셰와 영감을 만들어낸 작품

Page 6: NFDC 2015 내러티브 중심의 디자인

6

주윤발은 왜 성냥개비를 물었을까?

한 시대를 풍미한 성냥개비

Page 7: NFDC 2015 내러티브 중심의 디자인

7

멋지다고 생각해서 물었는데 왜 멋지냐고 물으시면 멋지다고 생각해서 멋지게 물었다고 밖에 말할 수 없..

Page 8: NFDC 2015 내러티브 중심의 디자인

8

실제로도 멋졌다!

멋지다고 생각해서 물었는데 왜 멋지냐고 물으시면 멋지다고 생각해서 멋지게 물었다고 밖에 말할 수 없지만,

Page 9: NFDC 2015 내러티브 중심의 디자인

9

오랜시간이 흘렀지만 빠지지 않고 사용되는 코드 중 하나

Page 10: NFDC 2015 내러티브 중심의 디자인

10

그냥 성냥개비만 물었는데, 왜 이게 멋지다고 생각되는걸까?

아니 것보다 성냥개비를 물릴 생각은 어떻게 한거지?

Page 11: NFDC 2015 내러티브 중심의 디자인

11

오우삼(감독)이 천재라서? 단순한 장국영 패완얼?

Page 12: NFDC 2015 내러티브 중심의 디자인

12

우연일 수도 있지만 우연이 아니라면 어떻게 생각해낸걸까?

Page 13: NFDC 2015 내러티브 중심의 디자인

13

우연이 아니라 계산되었다이런 발상들이 나오게 된 이유가 분명히 존재하고 그런 발상은 어떻게 만들어졌는지를 파헤쳐본다.

그래서 이 발표의 전제는..

Page 14: NFDC 2015 내러티브 중심의 디자인

14

이런 생각이라면 이 발표는 필요없습니다

타고나지 않으면 의미가 없다 추상화된 가치를 계산할 수 없다

사실 당장 적용해서 획기적인 변화를 가져올만한 이야기는 아님

Page 15: NFDC 2015 내러티브 중심의 디자인

15

발표 대상

게임 디렉터 프로듀서

게임 기획자 아트디렉터

게임 그래픽 디자이너

혹은 이를 지망하는 분들

Page 16: NFDC 2015 내러티브 중심의 디자인

16

천재들의 직관과 영감을 통해 만들어진다

예술이라 불리우는 것들

Page 17: NFDC 2015 내러티브 중심의 디자인

17

그렇기에 직관과 영감도 중요하지만천재들의 영역이니 우리는 포기해야하는걸까요?

Page 18: NFDC 2015 내러티브 중심의 디자인

18

Page 19: NFDC 2015 내러티브 중심의 디자인

19

Page 20: NFDC 2015 내러티브 중심의 디자인

20

천재가 아니면 어떤가요?천재가 아니라는게 포기할 이유는 아니라는 생각

Page 21: NFDC 2015 내러티브 중심의 디자인

21

魅力

매력

Page 22: NFDC 2015 내러티브 중심의 디자인

22

魅力인간은 어떻게 매력을 느낄까요?

Page 23: NFDC 2015 내러티브 중심의 디자인

23

사람마다 느끼는 것이 달라서 다양한 해석이 가능

추상화가 매력적인 이유

Page 24: NFDC 2015 내러티브 중심의 디자인

24

그림의 배경이나 이야기를 알면 더 깊이를 느낌일반 대중들의 눈에는 별 것 아닌 것처럼 보일 수도 있지만

Page 25: NFDC 2015 내러티브 중심의 디자인

25

그림의 이야기 혹은 자신의 경험을 통한 개인화된 감상이 가능함

Page 26: NFDC 2015 내러티브 중심의 디자인

26

시각을 통해 받아들인 정보를 뇌가 연산한다고 하면?

다음 그림을 살펴봅시다

Page 27: NFDC 2015 내러티브 중심의 디자인

27

사물을 인지하기 위한 연산이 단순동그랗고 하얗고 귀가 달렸고 눈이 빨개...저건 토끼다

Page 28: NFDC 2015 내러티브 중심의 디자인

28

사물을 인지하기 위한 연산이 복잡뭔가 회색같은데 전체적으로 보면 하얀색인거 같기도 하고

사람인줄 알았는데 눈이 빨갛고 털이 있고,귀도 길어..저건 토끼다

Page 29: NFDC 2015 내러티브 중심의 디자인

29

순식간에 일어나는 일이지만, 전자에 비해 후자가더 복잡한 연산을 거친다고 볼 수 있습니다

Page 30: NFDC 2015 내러티브 중심의 디자인

30

그림을 잘 모르는 이가 볼 때 복잡한 그림을잘 그린 그림으로 인지하는 이유가 이것 때문 아닐까요?

복잡한 연산에 따른 효과

Page 31: NFDC 2015 내러티브 중심의 디자인

31

그림을 잘 모르는 이가 볼 때 일정한 디테일 이상이면비슷한 수준의 그림으로 인지하는 이유도 그렇구요

복잡한 연산에 따른 효과

Page 32: NFDC 2015 내러티브 중심의 디자인

32

그림을 잘 모르는 이가 볼 때 현실에 가까울수록잘 그린 그림으로 인지하는 이유가 이런게 아닐까요?

복잡한 연산에 따른 효과

Page 33: NFDC 2015 내러티브 중심의 디자인

33

연산작용이 많을수록 사람들에게는 더 잘 그린 그림으로 보이는 게 아닐까요?

복잡한 연산에 따른 효과

Page 34: NFDC 2015 내러티브 중심의 디자인

34

어느 디자인이 더 매력적인 디자인일까요?그런데 여기서 질문

Page 35: NFDC 2015 내러티브 중심의 디자인

35

리얼리즘과 리얼리티

다른 예를 들어보겠습니다

비슷한 시대와소재를 가진 두 작품이 보여주는 전혀 다른 모습의 전투장면

Page 36: NFDC 2015 내러티브 중심의 디자인

36

리얼리즘역사속의 인물을 현실과 아주 흡사한 형태로 그리고 있다.

그런 특성을 살리기 위해 그림도 표현도 상황도 모두 현실에 가깝다

Page 37: NFDC 2015 내러티브 중심의 디자인

37

리얼리티역사 속의 인물들이 등장하는 건 같지만 현실과는 거리가 멀다.

극의 특성에 맞게 각색된 세계에 따른 개연성을 가지고 있어 어색하지 않다

Page 38: NFDC 2015 내러티브 중심의 디자인

38

무사시와 켄신 중 누가 더 매력적인 디자인일까요?

복잡하다고 다 잘그렸다고 할 수 없는 것처럼 현실적이라서 더 좋은 디자인이라고 볼 수 없습니다

Page 39: NFDC 2015 내러티브 중심의 디자인

39

그럼 연산 작용은?

연산 작용을 좋아한다는 뇌가 베가본드보다 표현이 단순한바람의 검심도 매력적으로 느끼는 이유는 뭘까요?

Page 40: NFDC 2015 내러티브 중심의 디자인

40

더 극단적인 예

Page 41: NFDC 2015 내러티브 중심의 디자인

41

더 극단적인 예

어느 장그래가 더 매력적인 디자인이죠?

연산작용을 치자면 정보량이 더 많은 드라마가 매력적이지 않을까요? 하지만 둘 다 매력적이다라고 말하고 싶은 이유는 뭘까요?

Page 42: NFDC 2015 내러티브 중심의 디자인

42

스토리텔링과 내러티브, 연출이 포함해 복합적으로 연산을 하고 있기 때문에

두 작품 다 매력적이라고 말할 수 있겠습니다

Page 43: NFDC 2015 내러티브 중심의 디자인

43

작은 씨앗 하나가 사고 전체를 컨트롤한다영화 시작 5분 안에 관객에게 영화가 가진 모든 규칙을 인지시켜라

그 규칙을 받아들인 관객은 뒷내용을 상상하면서 영화를 보게 될 것이다

Page 44: NFDC 2015 내러티브 중심의 디자인

44

미적 아름다움과 내러티브의 총합을 통해디자인이 매력적으로 보이는 건

특히 게임 같은 유저와 인터렉티브가 강한 매체일수록 더 강하게 작용합니다.

Page 45: NFDC 2015 내러티브 중심의 디자인

45

물론 그렇지 않은 경우도 있..디자인만으로도 충분히 매력적인 캐릭터는 나올 수 있습니다

Page 46: NFDC 2015 내러티브 중심의 디자인

46

하지만 이런 의견도내러티브 없이 디자인 만으로는 오래 기억되기 어렵다는거죠.

Page 47: NFDC 2015 내러티브 중심의 디자인

47

레이의 미소극에서 만들어진 내러티브와 신지에 대한 이입이

함께 이루어지며 매력이 발생

Page 48: NFDC 2015 내러티브 중심의 디자인

48

근데 내러티브가 뭐에요?실은 저도 잘 모르겠더라구요

Page 49: NFDC 2015 내러티브 중심의 디자인

49

스토리,스토리텔링,내러티브그래서 어떻게 구분할지 나름대로 정의해봤습니다

Page 50: NFDC 2015 내러티브 중심의 디자인

50

스토리스토리는 일종의 전달하고자하는 메세지

Page 51: NFDC 2015 내러티브 중심의 디자인

51

스테이지의 보스가 등장한다

이것이 스토리

Page 52: NFDC 2015 내러티브 중심의 디자인

52

스테이지의 보스가 등장한다

하지만 이것만으로는 매력적이지 않습니다.

Page 53: NFDC 2015 내러티브 중심의 디자인

53

스토리텔링스토리의 상위 개념으로 일종의 메세지 전달 방법

Page 54: NFDC 2015 내러티브 중심의 디자인

54

방패병이 입구를 막고 조금 뒤에 보스가 있고 그 뒤에는 힐러가 기다리고 있다

하나의 레벨디자인 패턴을 통해 보스의 존재를 전달

Page 55: NFDC 2015 내러티브 중심의 디자인

55

디자인을 하기 전 기획자들이 제시해주는 좋은 가이드 방법 중 하나

기본적으론 이 정도만 가이드해줘도 됩니다.

Page 56: NFDC 2015 내러티브 중심의 디자인

56

내러티브스토리 텔링과 비슷한 개념이지만,

인과관계에 따른 일종의 맥락이라고 볼 수 있음

Page 57: NFDC 2015 내러티브 중심의 디자인

57

유약하고 어려보이는 보스플레이어의 진입을 막으려는 방패병과

어떻게든 어린 보스를 살리기 위해 힐을 하는 힐러

Page 58: NFDC 2015 내러티브 중심의 디자인

58

같은 상황 다른 감정

디자인의 변화를 통해 시각적 효과를 극대화할 수 있는 영역 그래서 기획자와 디자이너가 가장 이야기를 많이 해야하는 영역

Page 59: NFDC 2015 내러티브 중심의 디자인

59

방패병의 디자인이 상처입은 상태라면?

Page 60: NFDC 2015 내러티브 중심의 디자인

60

방패병을 공격할 때 보스가 울기 시작한다면부가적인 디자인에 유기적인 연출이 더해지면 감정의 증폭이 더 강해짐

Page 61: NFDC 2015 내러티브 중심의 디자인

61

보는 사람을 사고하게 하고 감정을 느끼게 한다내러티브와 디자인이 만나면

디자인할 때 고증을 하는 이유도 레퍼런스 데이터를 통해 개연성을 높히고 납득 가능한 사고를 유도하기 위함

Page 62: NFDC 2015 내러티브 중심의 디자인

62

직관적입니다무엇보다

굳이 글로 설명하지 않아도 충분히 상황을 전달할 수 있게 됩니다. 그리고 오래 기억에 남겠죠.

Page 63: NFDC 2015 내러티브 중심의 디자인

63

이야기와 관련된 부분 이외에도게임 시스템과 연관된 디자인 내러티브

Page 64: NFDC 2015 내러티브 중심의 디자인

64

워크래프트3의 초반 공격 유닛

워3의 시나리오적 내러티브야 뭐 이미 유명하지만 이 디자인에는 다른 비밀도 숨겨져 있습니다

Page 65: NFDC 2015 내러티브 중심의 디자인

65

워크래프트3의 초반 공격 유닛

실루엣의 차이에 주목해주세요

Page 66: NFDC 2015 내러티브 중심의 디자인

66

워크래프트3의 초반 공격 유닛

HP 320HP 700HP 245HP 420

Page 67: NFDC 2015 내러티브 중심의 디자인

67

워크래프트3의 초반 공격 유닛

굴은 역삼각형 디폼을 가지고 있지만 기어다닌다

HP 320HP 700HP 245HP 420

내러티브가 단순히 이야기에만 국한된 것이 아닌 RTS의 시인성을 돋보이게 하기 위해 계산된 디자인의 한 형태

Page 68: NFDC 2015 내러티브 중심의 디자인

68

상대를 순간적으로 빠르게 구분해야하는 장르의 특성에 따라 실루엣 자체가 모두 달라보이게 디자인 된 팀포트리스2

Page 69: NFDC 2015 내러티브 중심의 디자인

69

단순한 심미적인 아름다움에 치중하는 것이 아니라 의도에 맞는 디자인을 통해 전달하고자 하는 것을 극대화할 수 있습니다

Page 70: NFDC 2015 내러티브 중심의 디자인

70

새로운 디자인이 창조되기도 합니다디자인 내러티브를 통한 유니크 디자인

Page 71: NFDC 2015 내러티브 중심의 디자인

71

매트릭스에 등장하는 센티넬이런 특이한 디자인은 어떻게 생각해낸걸까요?

Page 72: NFDC 2015 내러티브 중심의 디자인

72

커다란 환경문제인 적조 현상해수온의 상승으로 동물성 플랑크톤이 증가하며 생기는 현상

과다하게 많아진 플랑크톤으로 인해 바다속 산소가 고갈되어 생태계를 파괴

Page 73: NFDC 2015 내러티브 중심의 디자인

73

이 때 해파리도 폭발적으로 증가증가한 동물성 플랑크톤을 섭취하며 함께 폭발적으로 증가

Page 74: NFDC 2015 내러티브 중심의 디자인

74

그래서 기계 해파리폭발적으로 증가해 지구 생태계를 파괴하는 인간을

적조현상이라는 자연적 내러티브를 통해 디자인에 접목한 예

Page 75: NFDC 2015 내러티브 중심의 디자인

75

뷰티풀죠를 통해 알아보는 내러티브 디자인흔한 코드라도 내러티브를 통해 조합되었을 때

Page 76: NFDC 2015 내러티브 중심의 디자인

76

2004년 게임 디벨로퍼 초이스 어워드

혁신적인 그래픽 수상

Page 77: NFDC 2015 내러티브 중심의 디자인

77

영화 속의 괴물에게 납치된 여자친구를 찾아 영화 속으로 들어간주인공의 이야기로 고전 헐리우드 영화 ‘라스트 액션 히어로’를 연상케 한다

근데 하나하나 뜯어보면

Page 78: NFDC 2015 내러티브 중심의 디자인

78

주인공의 디자인은 일본의 특촬물을 연상시키는 분위기

Page 79: NFDC 2015 내러티브 중심의 디자인

79

카툰랜더 기술은 이미 젯셋라디오를 통해 이름을 알린 기술

Page 80: NFDC 2015 내러티브 중심의 디자인

80

주인공이 가진 머플러 기믹 역시 시노비를 통해 이미 알려진 기믹

Page 81: NFDC 2015 내러티브 중심의 디자인

81

기술적으로나 디자인적으로나 이미 흔한 코드들인데

어디서 혁신이라는 거죠?

Page 82: NFDC 2015 내러티브 중심의 디자인

82

게임의 시간을 조절해 활용하는 시스템이것도 실은 이미 맥스페인에 있던 시스템

Page 83: NFDC 2015 내러티브 중심의 디자인

83

미국 코믹스 느낌의 선 굵은 카툰랜더일본 작품인데 대사도 모두 영어였음

Page 84: NFDC 2015 내러티브 중심의 디자인

84

영화필름을 이용한 UI디자인과 연출줌인 줌아웃 연출마저 게임 시스템과 연결되어있음

Page 85: NFDC 2015 내러티브 중심의 디자인

85

영화라는 내러티브가 게임 시스템, 컨셉, 기획에 이르기까지 조화를 이루며 만들어진 매력

Page 86: NFDC 2015 내러티브 중심의 디자인

86

어떤게 우선이었을지 모르겠지만구성요소가 유기적으로 연결되어있고 이것이

‘혁신적인’이라는 타이틀을 얻게 된 이유 아니었을까요?

Page 87: NFDC 2015 내러티브 중심의 디자인

87

JOURNEY 속의 내러티브 디자인

너무 옛날 작품만 말한 것 같아서

Page 88: NFDC 2015 내러티브 중심의 디자인

88

플레이어의 감정을 재정의하고 싶었다고 합니다

너무 옛날 작품만 말한 것 같아서

Page 89: NFDC 2015 내러티브 중심의 디자인

89

철저하게 계산된 감정의 흐름

Page 90: NFDC 2015 내러티브 중심의 디자인

90

색,공간,등장하는 몬스터까지 모두 다 앞서 밝힌 의도한 감정을 플레이어가 느낄 수 있도록 배치되어있습니다

Page 91: NFDC 2015 내러티브 중심의 디자인

91

남성을 연상시키는 초기 프로토타입의 디자인 팔이 있으면 팔을 사용할 것 같은 느낌이 들기 때문에 최종적으로 팔도 사라졌다

Page 92: NFDC 2015 내러티브 중심의 디자인

92

최종 목표가 어디서 보더라도 멀리서 빛나고 있어 일종의 등대와 같은 역할을 하고 있습니다

Page 93: NFDC 2015 내러티브 중심의 디자인

93

어쩌면 말도 안되는 이야기일지도 모릅니다매력적인 디자인이 계산을 통해서만 나오는 건 아니니까요

Page 94: NFDC 2015 내러티브 중심의 디자인

94

기술이 발전하는 시대쉽게 만들 수 있기 때문에 전문가와 일반인의 격차도 줄어들겁니다

Page 95: NFDC 2015 내러티브 중심의 디자인

95

상상력이 갈수록 더 중요해질 겁니다

Page 96: NFDC 2015 내러티브 중심의 디자인

96

지속적인 훈련이 필요합니다

그래서 어떻게 시작하냐구요?

Page 97: NFDC 2015 내러티브 중심의 디자인

97

좋은 가이드 찾기

화이트 리스트보단 블랙 리스트

화이트 리스트 블랙 리스트

• 허용 목록 • 이런이런 디자인을 해주세요 • 명확할수록 폐쇄적임 추상적일수록 좋음

• 발상의 전환이 일어날 수 없음

• 제한 목록 • 이것만 빼고 다 괜찮아요 • 명확할수록 개방적임 • 범위가 축소됨으로 오히려 더 많은 발상의 전환이 일어남

기왕이면 글과 디자인 내러티브를 위한 자료가 좋음. 더 자세한 발상을 위해 참고 이미지는 필요하지만

발상을 위한 참고일 뿐, 화이트리스트로 동작하지 않도록 유의해야한다

Page 98: NFDC 2015 내러티브 중심의 디자인

98

2차 소스에서 조금 떨어질 필요

소설의 주인공을 그리거나 음악을 듣고 그림 그려보는 등의 추상적인 이미지를 객관화 하는 연습이 큰 도움이 됩니다

Page 99: NFDC 2015 내러티브 중심의 디자인

99

이런 연습을 통해 지속적으로 좋은 발상을 할 수 있다면

힘들긴 하겠지만

Page 100: NFDC 2015 내러티브 중심의 디자인

100

커다란 경쟁력이 될 수 있습니다

Page 101: NFDC 2015 내러티브 중심의 디자인

감사합니다

101