마비노기 영웅전의 아트 디렉팅 : 풀타임 AD 없이 차세대 비주얼 구축하기 풀타임 AD(아트디렉터)를 따로 두지 않고, 디렉터가 AD를 겸임하는 특수한 형태로 개발을 진행해온 마비노기 영웅전에서 어떻게 고품질의 비주얼 결과물을 만들어 왔는지에 관한 이야기. 아트 디렉터의 역할, 그리고 차세대 게임 수준의 비주얼을 구축하기 위해 필요한 것들과 영웅전의 독특한 비주얼 요소들 소개.

1. 마비노기 영웅전의
아트 디렉팅
풀타임 AD 없이 차세대 비주얼 구축하기
이은석
넥슨 코리아 라이브2본부
2011-05-30

2. 강연의 이유

3. 1. 지식 공유가 드문 분야
중요도와 종사자 수에 비해
노하우 공유가 드문 편
아티스트들에게 커리어 가이드 제공
바꿔 말하면 NDC 블루오션 분야

4. 2. 영웅전 비주얼 구축기 공유
어떤 영감과 노림수를 가지고
여기까지 왔는지 공유하고 다음 세대에 전파

5. 발표자 이력

6. 이은석 2006-2011 마비노기 영웅전 / 디렉터 <파파랑>
Elvis Eunseok Yi 2002-2005 마비노기 / 아트디렉터 <아트D>
1998-2001 화이트데이 / 디렉터 <개발자D>
1994-1997 한국 고전게임들 <제작자B>

7. 5년간 마비노기 영웅전의
아트 디렉팅을 겸임
… 그냥 공석으로 두고 직접 챙김
팀원들의 원성은 뒷전

8. 쿼터뷰 도트 찍다가 귀찮아서
16색 팔레타이즈하는
3ds max 플러그인 제작 (1998)
3ds max 모델 파싱 및 스키닝 데모 (1998)
잡캐질 전문

9. 화이트데이 기획 문서들 (2000)
잡캐질  디렉터

10. 비주얼 스타일링, 월드 제작, 잔소리와 남의 그림에 가필질 (마비노기)
잡캐질  디렉터  AD

11. 변덕과 밥상 뒤엎기 종특 (영웅전)
잡캐질  디렉터  AD  디렉터

12. 산업 디자인 전공
공대 소속의 디자인과로
입학 후에 기초 미술교육 시작
게임학과가 없던 시절 운좋게 선택한 코스
게임 개발의 꿈을 좇는데 전공의 도움을 크게 받음

13. 교통사고 처리시스템 디자인 (1996) 전자신문 단말기 디자인 (1997)
산업디자인에서 유용하게 얻은 것
<시각적 의사소통 능력>
<문제 탐색 & 해결 능력>

14. 게임 아트 디렉팅

15. 비주얼의 중요성
게임의 얼굴에 해당
제작비도 많이 들음
머리수도 제일 많음
AD는 비주얼의 지휘자

16. AD는 전문적 영역
유저들의 흔한 오해
원화가 = AD
원화가가 AD를 겸하기도 하지만
독립적인 직책

17. AD의 유형
1. 진짜 매니저형
2. 비주얼 매니저형
3. 리드 아티스트형
4. 종합형
인용/임의번역
An Artist Grown: Reflections on Being a Video Game Art Director
By Robert Chang
http://www.gamecareerguide.com/features/501/an_artist_grown_reflections_on_.php?page=3

18. 1. 진짜 매니저형
진짜 매니지먼트를 한다
작업물 관리, 스케줄링, 예산, 계약...
그러나 아티스트는 아님
아트에 대해 지시하지 않고 관리만 함

19. 2. 비주얼 매니저형
비주얼에 대한 안목이 높다
아트에 대해 많이 안다
리더십 스킬이 있다
그 자신이 뛰어난 아티스트일 필요는 없음

20. 3. 리드 아티스트형
다른 아티스트들을 이끌수 있는
매우 뛰어난 아티스트

21. 4. 종합형
앞의 세 가지의 조합을 이룬다
각기 정도는 다름

22. 이상과 현실
헌신적이고 탁월한 종합형 AD가
미술스탭들을 잘 이끌면 좋겠지만
각자 프로젝트의 처지에 맞게 타협해야

23. 그래서 영웅전 개발시엔...
디렉터가 AD를 겸임하는
말하자면 파트타임 AD 채택
좀 특이하지만 그럭저럭 굴러감

24. 소수인원의 팀으로 시작
어쩔 수 없는 선택
디렉터의 에너지 1/3 정도 사용
2형(비주얼 매니저)에 가까움

25. 런칭 후에는
아트 디렉터와
아트 매니저를 별도로 둠
그리고 2기(가칭)에는
또다른 변화 예상

26. 디렉터의 AD 겸임
화성에서 온 디렉터 금성에서 온 AD
싸우지 않아요 © Go Nagai, Toei Animation Co. Ltd.

27. 겸임의 장점
‚시너지‛
AD가 디렉터를 원망하지 않는다 (반대도)
문제에 대해 종합적인 접근 가능

28. 유저들이 스샷 시너지의 예1
잘 찍으면 좋을텐데
ㅇㅇ 멋진 스샷들 올리면
게임에 도움되지
근데 정작 멋있는 상황에선
스샷 찍는걸 깜빡 놓쳐
보스 막타 때릴때
근거없는 자신감 자동으로 찍어주면 어떨까
훌륭한데?
© Go Nagai, Toei Animation Co. Ltd.

29. 자동 스크린샷 촬영 기능 탄생

30. 코스튬 조합이 시너지의 예2
자유로우면 룩이 좋을듯
ㅇㅇ 뭐든지 파괴가
컨셉이니 갑옷도
부술수 있겠네 섹시하고
그럼 이너아머를 겉옷과 분리
해서 코디할 수 있겠구나
캐시템으로 만들어야겠다
근거없는 자신감 밸런스도 안 해치고
훌륭한데?
© Go Nagai, Toei Animation Co. Ltd.

31. © Go Nagai, Toei Animation Co. Ltd.

32. 겸임의 단점
‚에너지 부족‛
몸은 하나로 두 탕을 뛰니 물리적 한계
미술 스태프들이 상대적으로 적은 케어 혜택
추후에 AD와 AM의 분리로 보완
© Go Nagai, Toei Animation Co. Ltd.

33. AD에게
필요한 것
눈 손 입 머리 마음 비전

34. 눈
높은 안목과 심미안
비주얼 스타일링을 위한 첫 단계
1. 뛰어난 것을 알아볼 수 있다
2. 무엇이 차이를 만드는지 안다
as-is(현상태)와 to-be(지향점) 사이의
차이점을 아는 것

35. 손
대안 제시와 표현력
비주얼 스타일링을 위한 두번째 단계
as-is 와 to-be 사이의
간극을 없애는 것
*손이 뛰어나도 자기 눈 이상의 것을 만들지는 못한다

36. 입
의사소통 능력
정확한 지적과 용어를 사용
애매한 표현은 따르는 사람들이 힘들다
내부 표준 용어를 정하는 것도 도움

37. 머리
일이 돌아가게 만드는 것
오거나이징, 관리 능력이 필요
스케줄링, 자원 파악과 배분, 기획 이해력

38. 마음
남의 마음도 움직이는 것
인간관계 조율
충분한 헌신

39. 비전
비주얼 비전, 커리어 비전의 제시

40. 풀타임 AD 없이
어떻게 가능했나
인재가 중요
프로세스와 문화

41. 인재가 중요
재능과 열정있는 스태프들이 있었기에 가능
리더는 그들이 모여있는 이유가 되는 구심점 역할

42. 인재가 중요
꼭 필요하지 않은 이상 소수 정예가 낫다
가지 많은 나무에 바람 잘 날 없음
도구보다는 손을 잘 쓰는 사람을 찾을 것
도구는 손 이상의 것을 못 만들고,
손은 눈 이상의 것을 못 만든다
영웅전의 예 - 2D 애니메이터, 흰색 레이어

43. 프로세스와 문화

44. 자발성을 이끌어내기
풀타임이 아니기에 AD가
모든 작업물의 품질관리를 할 수 없다
팀원들의 자발적인 참여와 창의력 유도가 필요

45. 업무 공유와 의사소통
1일 1회 이상의 업무보고 체계 확립
아티스트는 미완성품을 보여주기 싫어하는 성향이 있으나
팀 문화로 꾸준히 밀면 정착된다
데브캣의 주 업무시스템인 데스크캣을 활용

46. 내부 쇼케이스
프로젝트 구성원 전체가 공유하는
내부 쇼케이스를 주기적으로 진행
정보 공유, 자부심 고취 등의 긍정적 효과

47. 프로파간다 실시
아티스트도 게임 개발자임을 계속 상기
부품 제작 만으로 내 일은 끝나지 않는다
완성품으로 작동해야 의미있음

48. 게임 비주얼론

49. 시각적 질서의 기본
좋은 비주얼을 만드는 원리들
중학교 미술책에서 본듯한..

50. 핵심은
‘비슷해 보이게’ 하는 것과
‘달라 보이게’ 하는 것

51. 비슷해 보이게
시각 요소의 일관성
반복
통일성
(C) http://www.slideshare.net/iglassbox/design-basic-carp

52. 달라 보이게
대비와 긴장감
명도, 재질감, 크기, 색상, 채도 등…
(C) http://www.slideshare.net/iglassbox/design-basic-carp

53. 실루엣이 중요

54. 실루엣이란?
사물의 외곽선.
인물 또는 사물의 외관을 대충 나타낸 그림.
복장의 세부적인 부분의 디자인을 제외한 윤곽 또는 외형
네이버 백과사전 인용

55. 실루엣이 왜 중요?
뇌는 시각정보를 윤곽모양으로
분해해 공간을 인지한다
그런데
현실은 입체지만 화면은 평면이라
윤곽은 밝기 차이로 주로 구분

56. 예시 1
실루엣만으로도 한 눈에 구분되게 만들어야 한다
© Valve Corporation, Team Fortress 2

57. 예시 2
A, B, C 가 기존 갑옷인 상태에
새 디자인은 D나 D’보다 더 변화가 있어야 해서 재작업

58. 모션과 포즈에서도 중요
무엇을 하는 장면인지 의도가 잘 보여야 함

59. 큰 그림을 볼 것

60. 큰 그림이 디테일보다 중요
멀리 떨어져서 봤을 때
보기 좋은 그림을 만들것
이미지를 축소해보거나,
모니터에서 멀리 떨어져서 보거나,
눈을 가늘게 뜨고 보라

61. 거리에 따라 달라보이는 그림
고주파 high frequency 이미지
저주파 low frequency 이미지

62. 저주파 이미지가 더 중요
큰 그림
디테일
결과물
http://www.gamasutra.com/view/feature/3073/the_power_of_the_high_pass_filter.php
디테일이 사라진,
blur된 이미지에서 보기 좋은가?

63. 색감

64. 배색의 아름다움
색을 이루는 요소는 색상, 명도, 채도
이들이 잘 조화된 배색이 중요
요즘은 후처리 post-processing 도 중요

65. 대기감 feeling of atmosphere
© Ian W. Fieggen
환경감과 원근감을 만드는 중요한 요소

66. 액션과 리액션
마비노기 영웅전 개발 포스트모템 (NDC 2010)

67. 영웅전의 비주얼

68. 스타일 영감과 구축

69. 실사풍 렌더링 비실사풍 렌더링
PR과 NPR 사이의 줄타기
마비노기 영웅전 개발 포스트모템 (NDC 2010)
사실적이면서도 완전히 실사 느낌은 아님
사실적인 바탕이 있기에 과장이 대조되어 돋보임

70. 영감을 얻은 작품들
영화, 게임 등에서 많은 작품을 참고
종종 팀 단체 영화 관람에 도움받음

71. 기사 윌리엄 A Knight's Tale
© Columbia Pictures
기사들의 멋진 모습과 마상경기를 현대적 센스로 표현
우리로 치면 퓨전 사극
현실적이면서도 촌스럽지 않은 비주얼 디자인

72. 13번째 전사 The 13th Warrior
© Touchstone Pictures
중세 북유럽 배경, 바이킹 전사들의 이야기
현실감 있으면서도 멋진 비주얼 묘사

73. 300
© Legendary Pictures
팀 단체 관람 중 가장 성공한 영화
슬로우 모션, 타격 효과, 카메라 연출 등
많은 부분에서 참고

74. 눈에 보이는 비전을 제시
Tristan & Isolde, ©20th Century Fox 타격감 묘사 가상 영상
AD와 초기 멤버들이 시각적 자료를 만들어둠
막연한 것보단 눈에 보이는게 효과적

75. 늘 자료를 수집
참고자료 수집이나
아이디어 기록을 평소 늘 하면 유용
발표자의 경우
Office OneNote, YouTube 영상 스크랩을 활용
유튜브가 이젠
알아서 이런 영상 추천

76. 캐릭터
표정, 시선, 손 표현에 집중
차세대 룩에 걸맞는 디테일을 표현
적은 자원을 활용해 언캐니 밸리를 극복

77. 시네마틱한 느낌이 목표
환경 적절히 채도를 낮추고 색 밸런스 조정

78. 파괴의 미학
뭐든지 파괴!

79. 배경도 파괴
실시간 파괴와 이벤트성 파괴씬을 섞어 활용

80. 갑옷도 파괴 방패도 파괴

81. 몬스터도 파괴

82. 조명과 재질감
갑옷의 빛나는 금속재질 표현도 테마
고반사의 금속 광택이 다른 곳과 재질감의 대조를 만듦

83. 조명과 재질감
shade를 텍스처에 그리지 않는다
albedo + ambient occlusion만 텍스처에 표현
염색영역 지정을 RGB 채널에 담음
hue 변화 없어 단조로운 한계가 단점

84. 피부 질감의 표현
피부 표현은 중간 밝기 대역의 채도가 중요
텍스처는 창백하게 제작
fake SSS로 혈색을 불어넣음

85. 림 라이트
역광 방향의 림라이트 표현
실루엣을 잘 살아보이게 하며
화면에 극적인 대조를 만든다

86. 후처리 post-processing : 블룸 이펙트
고휘도 영역에 빛이 번지는 블룸 이펙트 bloom effect
일괄적인 블룸은 습기찬 답답한 느낌이라 지양
피부톤의 붉은 색이 잘 표현되게 하는 것이 좋은 느낌

87. 후처리 post-processing : 비네팅과 색보정
비네트 미적용, 보정 미적용 비네트 적용, 보정 적용
비네트 vignette 프레임을 넣어 화면 중심에 집중돼 보이게
색 보정 color correction 으로 시네마틱하고 고급스러운 색감 톤 부여
채도 낮춤  컨트라스트 강조  색 밸런스 조정

88. 자유도 높은 코스튬 조합
방어구를 입으면
폴리건이 뚫고 나오지 않게
안쪽에 오는 의상(이너아머 포함)
을 잘라내고 조합해 줌
임의의 파츠 의상끼리 조합될 때 이상하게 보이지 않도록
클리핑 플레인 clipping plane을 설정해줌
의상 디자인의 자유도를 높이고 다양한 코디네이션이 가능

89. 지글본 jiggle bone
뼈대에 간단한 물리 처리
효과적으로 잘 써먹은 기술
실루엣을 움직여 생동감을 더해줌
가격대 성능비 높다

90. 2D/3D의 조화 히로인 캐릭터 변천사
2007.6 2007.12 2007.12 2008.6 2008.8 2008.9 2008.10
원화 원화 모델 레퍼런스 사진 모델 모델 모델
©Sophie Buxton
2008.11
완성
2D의 3D화는 생각대로 잘 안 되고 어려움
최종 결과물이 잘 나오는 것이 목표
이를 위해 원화와 설정등을 계속 수정

91. 홍보용 스크린샷
홍보물로서의 효과가 크기 때문에
촬영에 신경 많이 써야함

92. 백문이 불여일샷

93. 사진을 잘 찍는 사람에게 맡기면 스샷도 잘 찍음

94. 스크린샷에 스토리를 담으면 생명력이 생긴다

95. 보는 사람의 상상력을 자극하는 것이 스토리

96. 보는 사람의 상상력을 자극하는 것이 스토리

97. 결론

98. 요약
1. 비주얼은 중요하다, 아트 디렉팅도 중요
2. AD 모델은 여러 유형 중에서 처지에 맞는 것으로
3. 좋은 게임 비주얼을 만드는 요소들을 잘 활용할 것
4. 인재가 제일 중요
5. 눈에 보이는 비전을 잘 제시해야함
6. 결혼하실 분은 일찍 준비

99. NDC 2011 영웅전 관련 강연
5월 30일 월요일
5월 31일 화요일
6월 1일 수요일
6월 3일 금요일

100. 감사합니다