사실 유저경험(User eXperience; 이하 UX)이라는 단어는 국내 게임 개발 업계에서 오랫동안 통용되어왔던 용어는 아닌 것 같습니다. 통상적인 게임 개발 기획팀이라면 시스템, 컨텐츠, UI 정도의 파트 구성이 있을 뿐이라, 게임에 있어 UX란 단어는 어디다 끼어넣기도 애매한 느낌이지만.. 굳이 넣어 보자면 웹 개발에서 잘 쓰듯 UI 파트가 밀접하게 관계해있는 것처럼 보이기도 하고요.

물론 컴퓨터공학 계열의 전공자라면 HCI(Human Computing Interaction) 같은 강의를 통해 인간-컴퓨터 상호작용이라는 개념이 인간의 정보처리, 인지과정에 대한 이해로써 유저빌러티 테스트 등등으로 확장되는 과정 속에 UX로 녹아있기에 익숙한 용어일지도 모르겠습니다. 하지만 저는 일단 컴퓨터공학 계열의 전공자가 아니고;; 시각디자인 계열의 전공자였기 때문에, 그래픽디자이너로써 인터랙션디자인과 관련한 HCI 강의에서 UX란 개념을 처음 접하게 되었습니다.
덕분에 학문적이거나 공학적인 측면보다는 많은 수의 디자인 기업들에서 웹디자인을 함에 있어 단순히 이쁘고 잘보이는 UI를 벗어나 UX의 관점-사용자 기반의 발상과 경험 중심적인 디자인-을 도입한 사례들로부터 관심을 갖게 되었습니다. UI를 만듦에 있어서도 이상적인 네비게이션과 뎁스, 시선과 조작의 유도 동선의 흐름을 설계하고, 그에 대한 접근 케이스를 유저빌러티 테스트를 통해 분석해 패턴별 모델을 수립해 반영하는 것이 인상적이였는데, 그 사용 경험의 기반 자체를 사용자의 관점으로부터 뽑아내겠다는 것이겠지요.

하지만 게임의 경우, 웹이나 어플리케이션과는 달리 '재미 경험'이라는 좀더 감성적인 영역이 함께 섞여 있습니다. 때문에 모두 취향이 다를 수 밖에 없는 수많은 유저의 관점에서 객관적으로 바라본다(주1)는 것이 어렵기도 합니다. 최대한 많은 유저의 욕구를 만족시키기 위해서 시스템은 계속적으로 추가되고 다변화되며 컨텐츠의 양도 빠르게 늘어날 수 있도록 해야 하고요.
그렇다보니 재미 경험의 관점에서 시스템이나 컨텐츠가 수립되는 것이 아니라, 이미 출시된 수많은 게임에서 검증된 시스템과 컨텐츠를 변주해 사용하는 경우가 많습니다. 물론 이것은 잘못된 것도 아니고, 그 안에서 더 융합되며 발전하는 경우도 많기 때문에 완성도가 올라가는 효과를 내기도 합니다. 하지만 아쉬운 점은 그러한 과정에 있어서 '유저가 직접적으로 겪게 될, 일관된 감성적인 재미 경험'이 배제되기 쉽다는 것입니다. 이는 이미 출시되어 업데이트 되면서 발생하는 경우도 있지만, 애초에 고려되지 못한 채 개발되어 도중 드롭되거나 출시되더라도 특색없는 '양산형 게임'이라는 오명을 쓰는 경우에서도 종종 발견됩니다.

과거에 참여했던 프로젝트의 최초 프로토타입을 뽑은 상태에서, '그래서 이 게임이 뭘하는 게임이냐?'라는, 프로젝트의 비전에 대한 물음을 받았을 때 상당히 곤혹스러웠던 경험이 있었습니다. 작성된 스토리는 짧게 브리핑하기엔 거대한 음모론의 세계 속 대서사시였지만 그것은 단지 이야기일뿐 실제로 플레이어가 직접적으로 뛰어다닐 모험의 여정과는 거리가 멀었고, 전투가 전에 없이 찰진 공방으로 재미있다 한들 왜 전투를 하고 성장해서 도전하는 목표가 무엇인지가 비어있는데다, 사실 상 팀 내에서 공유하던 구체적인 프로젝트 목표는 기술적인 요소에 치중해 있었기 때문이였습니다.
유저가 처음 접했을 때 어떤 느낌을 받을 것인가, 그 감성적인 재미 요소들이 연속적으로 일관되게 흐름을 끌고 갈 수 있는가, 그렇다면 유저가 몰입했을 때 갖게 될 목표를 어떤 식으로 전달하고 그를 지속적으로 명확히 푸쉬할 수 있는가 등등에 있어 전혀 플레이어의 입장을 대변하지 못한 기획이였다는 것을 깨닿게 된 것이였습니다. 내러티브화한 UX의 관점이 없었던 것이지요.

이후 여러 작품에 참여하면서, 좀더 유저경험을 기반으로 한 내러티브와 감성적 경험을 중시할 수 있는 방법으로써 '스토리텔링'의 접근법을 고민하게 되었습니다. 그렇다고 엄청난 대서사시 역사와 그 후손들의 모험담을 쓰겠다는 것이 아니라, 개발자의 의도를 효과적으로 전달하고 재미있는 경험으로써 푸쉬한다는 측면에서 플레이어가 직접 따라가게 될 상황 자체에 집중할 수 있는 일관성을 위한 스토리의 활용이였습니다.
아이온이 최초 공개 당시 '천계와 마계의 관계와 어비스, 그리고 제3자로써의 용계의 등장과 갈등/반목/협력'이라는 강한 느낌의 내러티브로 이슈가 되었던 바 있고, 마비노기 영웅전의 경우 에피소드1에서 2D 인터페이스임에도 불구하고 NPC와의 대화를 통한 유대감 쌓기와 NPC의 스토리 개입을 통해 사고를 당하는 등 직접적인 감정을 자극하며 완결된 구성(주2)을 보여주었으며, 블레이드앤소울의 경우 게임 도중 자연스럽게 펼쳐지는 대화와 감정 묘사, 수많은 연출을 기반으로 한 몰입을 통해 시작부터 '복수를 위한 여정'이라는 테마를 일관되게 유지하면서 점차 덧붙여지는 이야기(주3)들로 감성적 경험을 잘 접목했다고 생각합니다.

이러한 다양한 시도들이 점점 더 나은 반응을 얻어가고 있는 시점에서, 새로 프로젝트를 준비한다면 어떻게 기획을 해보는 것이 좋을까에 대한 고민에서 개발자 컨퍼런스용으로 준비하던 내용들을 여기서 글로 풀어보고자 합니다. 개인적인 사정으로 몸 상태가 안좋아 말로 하는 것이 좀 전달력이 떨어지는 상태다보니 글로 쓰는 것이 더 편한;;

감정적인 재미를 유발할 수 있는 유저경험을 설계하는 방법으로써 스토리텔링 기반의 기획 접근과 프로토타이핑이 다음과 같은 순서로 GameDevForever에 연재될 예정입니다. 순수히 개인적인 경험에서 기반한 내용들 위주인지라, 여러 개발 기획 방법 중 하나의 갈래로 봐주시면 좋겠습니다.

* 주1 'Gamification & 소셜게임'이라는 책의 p.108 플레이어 중심 모델에 '페르소나' 접근으로 객관화 해보는 내용이 있습니다.
* 주2 디스이즈게임의 칼럼 '스토리가 부담이 된 시대, 영웅전의 도전'의 내용에서 읽어보실 수 있습니다.
* 주3 다른 이야기들 보다 가장 기억에 남는 것은 일단.. 남소유 - ㅅ-

ps. 굳이 예고편 뭐하러 올리냐 하시면;;;; 기획에서 UX란 용어가 생소한 것 같아서..?
ps. 다음 연재부터는 반말체로 쓰여질..것 같아;;;;요;;;;;;;;;;;

에라 모르겠다. 원래 3일이 발표날인데, 이미 두 개나 써놔서 그냥 오늘 올리겠습니다!!! 3일날 또 올라갑니다!!!
콱 일주일에 하나씩 써버릴까!!!!
-----------------------------------------------------------------------------------------------



밝힐 것이 있습니다.
사실 여기서 shaderFX를 강의하고, 이 강의가 자연스럽게 포프님의 쉐이더 강의로 이어지는 것이 목표였습니다.
포프님의 강의가 물론 매우 쉽다는 것 인정합니다만, 지금의 제 수준에는 그렇다는 거고...
제가 처음 쉐이더에 관심가지던 그래픽 디자이너였던 4-5년 전에는 그 정도도 결코 쉬운게 아니었었다는거지요!!! 프로그램 몰라!! 어려워!!! 그게 뭐야!!! 이쁘지도 않은 영어 메모장으로 일을하다니 이 천한것들

그리고 나서 다시 유니티 쉐이더로 와서 ... 그래픽 디자이너들이 간단한 유니티 쉐이더 정도는 직접 코딩할 수 있게! 하는게 목표였는데... (겜브리오 쉐이더로 할까 하다가 , 겜브리오 쉐이더보다 유니티 쉐이더가 훨씬 쉽게 짤 수 있어서..)

한 3강 써보다 보니 이 속도로 쓰다간 원하는 걸 다 쓰려면 산 3-4 년 걸릴 것 같지 뭡니까 이히히히
그래서 걍 그냥 맘편하게 ShaderFX 만 집중해서 쓰기로 생각했습니다. 그래서 제목도 맨 앞에 'ShaderFX를 이용한' 이라고 붙였지요. 아무도 관심없었다는거 잘 알지만.
어쩐지 덕분에 게임개발 포에버 사이트에서는 제가 오래오래오래 글 쓸 것 같은 생각이 들긴 합니다만 ... ㅋ

하여간 그래서 오늘 강의 시작합니다.


==========================================================================================================

1. Float을 산수로 가지고 놀자.

모든 색은 float3로 이루어질 수 있다고 저번 시간에 말씀드렸습니다. 그러니까 모든 그림의 한 픽셀 한 픽셀들은, 각각 float3의 색상 구조로 이루어져 있다는 거지요.

이렇게 모든 그림을 3자리 소숫점인 float3로 인식을 하는 '개념' 이 매우 중요합니다.
제가 강의를 해 본 결과에 의하면, 그래픽 디자이너에게 가장 부족한 개념이 이 부분이었거든요.

자 , 저번 시간의 약간의 복습입니다.
일단, 회색 주전자가 있네요. 만만한게 주전자죠. 넹.

2377579

자 , 이 주전자의 텍스쳐를 빨리 숫자로 생각해 보세요! 3,2,1 땡!





넹

float3(0.5,0.5,0.5) 일겁니다.^[각주:1]



여기까지는 쉽게 순간적으로 생각해 낼 수 있어요.
그럼 이제 다시 한 번, 약간의 산수를 해 봅시다. 색상은 잠깐 생각하지 마세요.




float3(0.5,0.5,0.5) 의 각각 요소에다가, 0.5 씩을 더하면 어떻게 될까요?
즉 float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5) 라는 말이죠.



그래픽 디자이너라고 무시한다고 생각하실 수도 있겠지만 ...
아시잖아요. 우리같이 그림만 그리고 살아온 사람들은 가끔 돈계산도 깜빡깜빡 합니다. 으흐흐.
간단하지요?

float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5) = float3(1.0,1.0,1.0) 입니다.
... 흰색이네요??!??

넹 , 수학적으로는 알겠고, 이번엔 잠깐 봉인해놨던 색으로 생각해 보지요.

float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5) = float3(1.0,1.0,1.0) 이니까,
회색 에다가 회색 을 더하면 흰색이 된다.

라는 말씀이지요?
달리 말하자면,
'색끼리 더하면 값이 올라간다. 즉 밝아진다는 뜻이다' 라는 말이 됩니다.^[각주:2]

자 이제 그럼 이걸 직접 만들어서 증명해 봅시다.


2. ShaderFX로 연산해 보기


뭐 간단합니다. 회색 + 회색 이니까요. 만들어 봅시다.

일단 이 상태에서 시작합시다.

회색 칼라 노드를 하나 더 만듭시다. 빈 화면에서 오른클릭 -> Maps -> Color 를 선택하면 됩니다.^[각주:3]

그리고 색상은 회색으로 지정합시다. 회색 노드가 두 개가 되었습니다.



자 이젠 덧셈 기호가 필요합니다.
이게 셰이더 코딩으로 하면 그냥 A+B 하면 되는데, 노드 구조에서는 굳이 이것도 노드를 만들어줘야 합니다 .
이게 사실 좀 귀찮긴 한데 개념적으로만 보면 쉽긴 하죠. 익숙해지면 귀찮아요 ㅋㅋㅋ

다시 빈 화면에서 오른쪽 클릭해서 Math / MathOperator 를 만듭니다. 이게 연산자 노드예요.

연산 노드가 나왔습니다. 기본은 * 연산으로 되어 있습니다. 오른쪽 메뉴에서 + 로 바꿔줍시다. 그럼 오퍼레이터가 + 로 바뀝니다.

둘을 더해야 하니까, Input A 와 Input B 에다가 회색 노드를 연결시켜줍니다.
그리고 결과물을 Ambient Color 에 연결해 줍니다.

자, 개념이 쉽게 잡히지요? 두 회색을 더한 겁니다. 즉 float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5) 를 만들었고, 결과물을 Ambient Color로 연결한거지요.

자, 결과물이 나왔습니다. 흰색입니다. float3(1.0,1.0,1.0) 이 나왔지요.


만약 이걸 곱하기 (*) 로 바꾸면 어떻게 될까요?



자, 이렇게 나옵니다. 이제 쉽게 예상하실 수 있으시겠지요?
float3(0.5,0.5,0.5) * float3(0.5,0.5,0.5) = float3(0.25,0.25,0.25) 지요.
소수점 숫자들끼리 곱하기를 하면 숫자가 더 작아집니다. 그러니까 더 어두워진다는 거지요!

자 더 어두워졌지요? 배경이 꽤 새까맣기 때문에 그렇게 안보이지만, 회색보다는 더 어두운 회색이 되었습니다.
이것은 포토샵에서의 레이어 모드 중, Multiply 랑 똑같습니다!!^[각주:4]

알면 재밌습니다.

셰이더 연산을 할 때에는 위에서 본 것과 같이 덧셈과 곱셈 연산을 주로 쓰고, 뺄셈은 가끔 쓰고, 나눗셈은 거의 안쓰다시피 합니다. (2로 나누나 0.5를 곱하나...)^[각주:5] 뭐 그래도 다른 것도 한 번 해보시고 이해해 보시면 더 좋겠지요?

3. 상수 추가하기

미리 얘기했듯 저는 정말로 쉬운 강의입니다.
어려운 예제같은건 안해요 우후후
어려운 예제하면 내가 힘들걸랑

그러니깐 이번엔 위의 예제랑 똑같은거 하나 또 만들어 봅시다.

지금 위의 연산은 이런거였죠?
float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5)
다행히 위의 그림은 단색입니다. 즉, 어떤 부분의 픽셀을 선택하더라도 전부
float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5)
라는 거지요.



복잡한 이미지의 칼라라면, 픽셀마다 색이 다르겠지만 저 단색 칼라는 어딜 찍어도 float3(0.5,0.5,0.5) 입니다.





그러니까.






요런것도 가능해져요.

float3(0.5,0.5,0.5) + 0.5

이것도 똑같은 결과가 나오게 됩니다.
뭐 일단 해볼까요?
일단 아래 그림에서 시작해 봅시다.

두 노드 중 하나를 지워보고, 하나를 숫자로 (상수로) 바꿔봅시다.
일단 노드 하나를 선택해서 DEL 키를 눌러 지웁니다.

지우고 나면, Input B 가 비지만, 위 그림의 오른쪽 화살표를 보면 기본값이 1.0이 들어가고 있다는 것을 알 수 있습니다.^[각주:6]
자 이것 말고, 상수 노드를 따로 만들어서 추가해 봅시다.

위 그림처럼, Maps/Constant 를 추가해 봅시다. 이게 상수입니다.

이제 조금 익숙해졌을테니, 조금 빨리 진행해 보지요. Constant 노드를 만들면, float 이 빠져나오는 것을 알 수 있습니다. 한 자리 숫자지요. 그리고 이 숫자는 오른쪽 메뉴에서 수정할 수 있습니다. 실시간으로요!!!
이걸 Input B 에 연결하면, float3(0.5,0.5,0.5) + 0.5 가 됩니다.

이제 이것이 float3(0.5,0.5,0.5) + 0.5 라는걸 아실 수 있으실 겁니다.

숫자를 바꿔 보시고, 곱셈으로도 바꿔 보시고 ... 조금 가지고 놀아 보세요.


4. 더하면 밝아지고 곱하면 어두워집니다.

오늘 내용의 결론입니다.
이미지를 더하면 밝아지고,
곱하면 어두워집니다. (소숫점이거든요. 소숫점은 곱할수록 작아지지요)
여태까지 흑백 이미지만 가지고 노니 재미 없으니까 그냥 추가한 겁니다. :)

그럼 이제 위의 내용을 곰곰히 생각해 보면서, 아래의 다양한 내용을 이해하도록 해 보세요. 직접 해보셔도 좋겠습니다.




1. 이전에 만들었던 것처럼 풀 이미지에 0.5를 더하면, 밝아집니다.

0.5가 아닌 0을 더하면 변화가 없겠지요? 한번 해보세요.

2. 풀 이미지에 1.0을 곱하면? 그대로입니다.
곱하기를 하지 않고 1.0을 더하면 하얗게 날라갔겠지요?

3. 그럼 풀 이미지에 0.5를 곱하면? 어두워집니다.
0 을 곱하면 완전 검은색이 되겠지요?

위 3가지 예제가 모두 이해 되셨습니까?


자, 이렇게 해서 '칼라를 숫자로 인식하는 것' 을 저번 시간에 했고,
이번 시간에는 '그렇게 숫자로 인식한 칼라를 덧셈과 곱셈 등 수식으로 연산해 보는 것' 을 해봤습니다.

다음 시간에는 이제 각종 메터리얼 옵션들을 간단하게 사용해 보도록 하겠습니다. 이미 만져보신 분들도 계시겠지만...

원래 28일에 올려야했지만 LOL을 정신없이 하다가 지금에서야 올리게 되었습니다. 제발 용서를...꾸벅꾸벅

 온라인 게임의 퀘스트는 크게 5개의 구조로 나눠지는 것 같습니다. 게임마다 다를 수 있겠지만 제가 아는 다른 분도 이렇게 나누었으니 일단 다섯 개의 구조를 가지고 설명해 보겠습니다.

시작, 수락, 진행, 완료, 보상 

 1. 시작

서버가 가진 퀘스트 목록 중에 플레이어에게 보여줄 퀘스트는 무엇인가? 를 결정하는 단계라고 할 수 있습니다. 현재 플레이어 캐릭터의 레벨, 직업, 세력, 퀘스트 수행정도, 명성, 전쟁포인트 등 다양한 조건을 기반으로 플레이어가 할 퀘스트를 알려주게 됩니다.(보틍은 느낌표를 많이 쓰지요.)

만약 유저가 '아직은 할 수 없지만 조금만 더 조건을 채우면 할 수 있어요.'라는 퀘스트를 알려주고 싶다거나 하는 것도 이 단계에서 진행하게 됩니다.

2. 수락

느낌표가 아무리 많이 떠 있어도 유저가 퀘스트를 받겠다고 수락하기 전까지 그저 하나의 느낌표일 뿐입니다. 유저가 퀘스트 내용을 읽어보고 '수락'하는 순간 느낌표는 퀘스트가 되어 유저 목록에 추가되지요.
보통은 캐릭터 당 받을 수 있는 퀘스트에 제한이 걸려있는 경우가 많습니다.

3. 수행

받은 퀘스트의 조건을 달성하는 단계입니다. 보통은 '몬스터 처치, 다른 NPC에게 대화(전달), 오브젝트 작동, 재료 수집, 호위' 등이 흔하게 들어가며 그 외에도 '제조' 시스템이 있으면 특정 물품을 만들라는 퀘스트가 나오겠지요.

4. 완료

수행 조건을 100% 채웠을 때 그것을 완료하는 것입니다. 아키에이지의 경우에는 꼭 100%가 아니더라도 완료할 수 있게 되어 있지만 말입니다.

5. 보상

플레이어가 퀘스트를 하는 가장 큰 이유이지요. 보상입니다. 보상을 왜 완료와 같이 하지 않고 별도로 분리할까요? 저도 그 이유를 생각해봤는데 아무래도 '어뷰징'적인 처리가 가장 큰 이유가 아닐까 싶습니다. 이 이유를 알고 계신 분은 덧글로 좀 알려주시면 감사하겠습니다.


이상으로 MMORPG의 퀘스트 구조에 대해 알아보았는데요.
다음에는 실제 게임에 적용될 법한 퀘스트를 만들어보도록 하겠습니다.

아래에 소개되는 가상 라노베 시놉시스를 바탕으로 만들 생각인데 다른 분들도 미리 한 번 해보시는 것은 어떨까요?

======================
낙동강 전선에서 북한군에게 밀려 적화되어버린 가상의 한반도 배경입니다. 이승만 정부는 제주도에 임시정부를 설립했고, 한반도에는 재한 중국군이 주둔하고 있습니다. 한반도 전체가 적화되어 버린 탓에 남로당은 강력하고, 재한중국군에 의지한 연안파를 숙청하는데에도 실패한 김일성은 현재와 같은 절대권력을 쥐지 못한 상태로 90년대에 사망하게 됩니다.

무대는 서울, 남로당과 연안파 공산주의자들의 자제들이 주로 다니는 가상의 고등학교에서 김일성 사망소식을 들은 박헌영의 손녀딸 = 라노베니까 손녀딸입니다. = 은 자기와 친한 친구(주인공 포함)들을 비밀리에 불러모아 김일성의 초상화를 밟는 충성 맹세 의식(?)을 합니다. 그런데 그 행사의 내용이 학교 내 김일성 파 선생에게 밀고되었는지 주인공만 홀로 그 선생에게 끌려나와 진상을 추궁당합니다.
===============================

그럼 다음에 올릴 때 저 시놉시스로 퀘스트를 만들어보겠습니다.
감사합니다.