[UNITE 2019] '일곱 개의 대죄', 원작의 감성을 모바일에 담아내기 위한 과정

게임뉴스 | 윤서호 기자 | 댓글: 1개 |

스즈키 나카바의 만화 '일곱 개의 대죄' IP를 기반으로 퍼니파우에서 개발 중인 '일곱 개의 대죄: 그랜드크로스'는 지난 9일 일본 CBT에서 원작을 충실히 반영했다는 호평을 받았다. 16일 미디어를 대상으로 한 시연회에서도 비슷한 이야기가 들려왔다. 단순히 시나리오나 캐릭터 설정, 기술 등의 요소뿐만 아니라 그래픽에서도 애니메이션의 그 느낌을 살렸으며, 게임 내에서도 최대한 원작 속 마을과 세계관을 3D 그래픽으로 담아냈다.

유니티 엔진으로 만든 '일곱 개의 대죄: 그랜드크로스'. 과연 어떤 방법으로 원작의 세계관을 모바일 속에 고스란히 담아낼 수 있었을까? 퍼니파우의 최재영 CTO와 류재성 팀장은 유나이트 2019 서울에서 그 노하우를 공유했다.



▲ 퍼니파우 최재영 CTO

최재영 CTO는 '일곱 개의 대죄'에서 가장 핵심으로 둔 목표는 애니메이션 같은 느낌을 유저에게 전달하는 것이라고 설명했다. 그러기 위해서 경쟁력과 생산성이라는 두 도전 과제를 해결해야만 했다고 덧붙였다.

퍼니파우에서는 애니메이션의 감성을 게임에서도 동일하게 전달하는 것이 경쟁력의 요소라고 보았다. 이를 구현하기 위해서 개발진은 '일곱 개의 대죄' 애니메이션을 몇 번이고 보면서 분석했다. 그 결과 캐릭터의 표정, 감정, 움직임, 디테일까지 파악해서 고스란히 담아내는 것이 중요하다고 판단했다. 단순히 디테일한 부분까지 표현하는 것뿐만 아니라, 이것을 효율적으로 제작하는 것도 필요했다.



▲ 애니메이션의 느낌을 내려면, 우선 애니메이션의 디테일을 분석해야 했다

류재성 팀장은 이중에서 경쟁력을 갖추기 위한 시도를 설명했다. 애니메이션의 감성이 느껴지게 하려면 우선 캐릭터가 중요한 만큼, 디자인 R&D와 캐릭터 렌더링에 특별히 공을 들였다고 설명했다. 특히 프로젝트를 시작할 때 캐릭터 디자인이 처음부터 잘 나와야 그 감성이 온전히 전달이 되고, 이것이 기반이 되어서 퀄리티가 잘 나오기 시작하는 만큼 굉장히 중요했다고 강조했다.

처음에는 일반적으로 퀄리티 좋은 캐릭터 디자인이면 좋지 않을까 싶어서 노멀맵으로 텍스쳐를 입혔다. 그러자 캐릭터 디테일은 나왔지만, 애니메이션의 감성이 느껴지지 않았다. 그래서 개발진들은 어떻게 고치면 좋을지 고민하면서 애니메이션을 파고들었다.



▲ 노멀맵으로 작업했을 때는 디테일은 있지만, 애니메이션 느낌과는 달랐다

애니메이션의 캐릭터는 일반적인 3D 모델링과 달리 명암도 단조로운 편이고, 선이 강조된다. 그리고 '일곱 개의 대죄' 애니메이션을 살펴보면 흔히 말하는 좋은 비율의 캐릭터만 등장하는 것이 아니라, 작가가 의도적으로 개성에 따라 등신대와 비율을 조절한 캐릭터들이 나온다. 이를 받아들인 개발진은 전에 사용한 캐릭터 디자인을 버리고 카툰 렌더링 스타일로 제작하고 쉐이더도 카툰 쉐이더로 바꿨다. 그리고 노멀 텍스쳐에서는 디테일하게 작업하지 못했던 머리카락, 눈, 피부의 스크래치, 눈썹 같은 것에 좀 더 많은 것을 할애하는 식으로 텍스쳐를 입혔다. 이는 카툰 렌더링의 특성상 그런 디테일한 부분을 제외하면 표현이 좀 더 단조롭기 때문에 가능했다.



▲ 방향을 수정해서 작업에 들어갔고



▲ 좀 더 애니메이션의 느낌에 가까운 캐릭터를 구현할 수 있었다

두 번째 과제는 라이팅이었다. 기존의 셀 쉐이딩을 적용하면 캐릭터가 있는 방향과 카메라에 따라서 음영이 어색하게 보이는 경우가 있었다. 그래서 이를 고려해서 매 장면마다 라이팅과 카메라를 확인하고 수정하는 작업이 필요했다.

류재영 팀장은 이 문제 역시도 애니메이션을 참고하면서 수정했다고 설명했다. 애니메이션을 자세히 본 결과, 빛의 방향과 음영은 사실적이지 않더라도 캐릭터가 예쁘게 보이는 것에 집중해서 표현이 되어있었다. 이를 반영하려면 사실적인 물리 라이팅보다는 감성을 표현하는 방법을 찾아야 했다. 그 대안으로 고른 것이 맷캡 캐릭터 쉐이더였다.



▲ 퍼니파우 류재영 팀장

기존의 쉐이더는 색상과 음영 단계, 아웃라이너 파라미터 등 세부 옵션이 자잘하게 있었고, 이를 세밀하게 설정해도 퀄리티가 나오지 않았다. 그러나 맷캡 쉐이더는 음영이 텍스쳐로 구현되기 때문에 필요한 부분이 있으면 바로 텍스쳐로 만들어서 적용하고 실제로 잘 구현이 됐나 확인하는 것도 가능했다. 또 방향에 상관없이 텍스처에 따라서 나오기 때문에 카메라가 어딜 보든 일정하게 명암이 나온다는 장점도 있었다. 더 효율적인 작업을 위해서 모델링 툴에서도 똑같은 쉐이더를 사용해 엔진에 넘기지 않더라도 아티스트나 모델러들이 작업하면서 확인할 수 있도록 했다. 또한 글로벌 라이팅은 컬러톤만 적용해 배경과의 톤, 밝기를 맞춰가는 식으로 작업했다.



▲ 라이팅을 통한 음영 효과 대신 맷캡 쉐이더를 활용해 텍스쳐로 처리했다

그렇게 적용해도 코 주변에 음영이 생기면서 애니메이션과는 조금 다르게 위화감이 생겼다. 실제로 애니메이션에서는 코나 입 주변 음영이 없고 선만 주거나, 혹은 코를 아예 생략하는 경우가 있던 것이다. 그래서 코 주변의 음영을 변경해줄 필요가 있었다. 이 작업은 버텍스 컬러 알파로 작업, 값을 0으로 지정하면 정면을 향하는 노멀 상태가 되도록 지정했다. 그렇게 해서 노멀값 수정을 하나하나 지정해서 하지 않고도 빠르게 작업할 수 있도록 했다. 코의 음영 외에도 아웃라인 두께에도 이를 적용해서 눈썹이나 기타 선도 쉽게 정리할 수 있도록 했다.

처음에는 눈썹을 별로 중요하게 생각하지 않았지만 캐릭터의 감정선, 표현을 나타내는 과정에서 개발진들은 눈썹 표현이 굉장히 중요하다는 것을 깨달았다. 최초 작업 단계에는 눈썹이 머리카락에 가려졌는데, 눈썹이 보일 때와 보이지 않을 때의 인상 차이가 꽤 컸던 것이다. 그렇지만 눈썹의 위치는 머리카락의 뒤에 있는 만큼, 이를 보여주기 위해서는 기존과는 다른 방법이 필요했다. 이 문제는 Depth Test Greater Equal를 활용하면서 해결했다. 머리카락 위에 눈썹을 또 하나 구현하고, Ztest LEqual이 아닌 Ztest GEqual을 줘서 투명도를 준 것이다.



▲ 눈썹은 캐릭터 특성 표현에 중요한 역할을 하는 만큼



▲ 눈썹이 머리카락에 가려져도 보이게끔 세팅을 했다

이와 같은 방법들을 활용해 좀 더 애니메이션에 가까운 캐릭터들을 디자인하면, 그 다음에는 연출을 해야 하는 문제가 남는다. 처음에 고려했던 것은 전투 화면에서 상태이상 효과 구현이었다. 빙결, 석화 등 효과를 표현하기 위해서 쉐이더를 다 바꾸거나 모델링을 다 바꾸는 건 비효율적인 만큼, 맷캡 텍스쳐 툴을 제작해서 텍스쳐를 등록하고 컬러를 설정해서 교체하거나 겹치는 식으로 이를 구현해냈다.

일부 스킬은 캐릭터 근처에 광원이 발생하게 되는데, 이를 애니메이션 느낌이 나게 표현하는 것도 과제였다. 라이트를 설치하면 앞서 언급한 것처럼 음영 문제가 발생하고, 프로그램적으로 무거워진다. 그래서 라이팅을 설치하지 않고 맷캡 텍스쳐를 활용하는 방향으로 진행했다.

배경은 동적인 느낌을 주기 위해 맵 전역에 음영, 그림자 등 효과를 넣었다. 또한 원작의 세계를 구현하다보면 배경의 양이 상당히 많았는데, 그걸 일일히 다 그리거나 만들기엔 제약이 있었다. 그래서 기준이 되는 배경에 LUT 텍스쳐와 프랍을 추가해서 바리에이션을 주는 식으로 처리했다.



▲ 배경을 일일히 다 만들지 않고 LUT 툴과 프랍을 추가해서 재활용했다

그뿐만 아니라 다수의 NPC, 캐릭터가 있는 씬을 표현하기 위해서 임포스터를 활용했다. 이는 3D 모델링이 아닌 2D 빌보드화된 플랜으로 교체해서 표현하는 방식이다. 바이젤 싸움축제처럼 많은 캐릭터들이 한꺼번에 등장하는 씬에서 모델링된 캐릭터들을 그렇게 해서 폴리곤 수와 드로우 콜 수를 절약할 수 있었다.

임포스터를 자연스럽게 활용하기 위해서는 카메라의 수와 각도, 위치, 거리 조절하는 컴포넌트가 필요했다. 이를 제작한 뒤에 임포스터에 사용할 아틀라스 텍스쳐를 구축했는데, 이때도 유의할 사항이 있었다. 텍스쳐 이미지가 크면 이미지가 깨지진 않지만, 카메라가 움직일 때 부자연스러운 느낌이 들었다. 반대로 너무 작으면 자연스러운 움직임은 구현할 수 있어도 이미지 자체가 깨지는 현상이 발생했던 것이다. 결국 여러 번 시도를 하면서 적절한 텍스쳐 이미지 크기를 찾아나갔다. 또한 임포스터도 자연스럽게 만들기 위해서는 쉐이더가 필요했는데, 여기에는 애니메이션 2 텍스쳐를 지원하게끔 했다. 그리고 애니메이션이 재생되는 시간이나 템포, 스타트 타임도 변경할 수 있도록 쉐이더를 구축했다.






▲ 모델링한 캐릭터를 쓴 게 아니었기 때문에 폴리곤 수와 드로우 콜 수가 절약됐다

이와 같은 과정을 거쳐서 애니메이션의 감성을 담아낼 수 있는 틀을 구축했다면, 남은 과제는 좀 더 효율적으로 제작하는 일이었다. 최재영 CTO는 우선 페이스 애니메이션과 룩앳 시스템에서 비효율적인 부분을 개선하는 방향에 대해서 소개했다. 기존에는 둘 다 본 애니메이션으로 작업했고, 그렇기 때문에 상황별로 다 손수 작업을 해야 했다.




그래서 둘 다 애니메이션 시스템을 분리하고, 시스템을 통해서 동작을 제어하게끔 했다. 그러면서도 자연스러운 동작이 보장되어야 한다는 과제가 남았다. 페이스 애니메이션에서는 얼굴을 부위별로 블렌드셰이프를 기본으로 나눈 뒤, 기본 15개의 표정을 만들었다. 그리고는 표정의 블렌드 값을 변화시켜서 표정의 바리에이션을 늘리는 식으로 작업을 했다. 룩앳 시스템은 Bip01 Neck에 특정 방향벡터를 링크하면 해당 벡터를 타겟으로 정해 회전하게끔 구축했다. 또한, 기존 애니메이션과 자연스럽게 연결되도록 연산 후 동작하게 했다.



▲ 부위별로 블렌드셰이프를 나누고, 기본 표정에 블렌드를 줘서 새로운 표정을 만들었다

다만, 고려해야 할 사항도 있었다. 바로 고개가 돌아가는 각도의 제한이었다. 너무 많이 돌면 어색하기에 퍼니파우에서는 캐릭터를 중심으로 좌우 90도로만 회전할 수 있도록 했다. 이렇게 새로운 룩앳 시스템이 만들어지자 캐릭터가 전보다 더 자연스럽게 고개가 돌아가는 걸 확인할 수 있었다.

하지만 완벽하진 않았다. 크게 세 개의 문제가 발생했다. 첫 번째는 고개를 숙이고 있는 캐릭터의 시선이었다. 고개를 숙이고 있기에 룩앳 시스템을 적용하니 화난 듯한 표정이 된 것이다. 이 부분은 기존에 링크하던 벡터 위치를 올리는 식으로 해결할 수 있었다.

다음은 비스듬하게 서 있는 모션에서 발생한 문제였다. 캐릭터를 중심으로 고개를 회전시켰는데 비스듬하게 서 있으면 고개가 어깨를 넘어가는 상황이 발생해 기괴함을 느끼게 했다. 테스트 끝에 고개가 돌아가는 기준을 캐릭터가 아닌 어깨선을 중심으로 정하자 이 문제가 해결됐다.

마지막 세 번째는 바로 자연스럽지 못한 움직임이었다. 비록 전보단 나아졌지만, 여전히 어색했다. 그래서 실제로 어떻게 해야 더 자연스러울지 많은 모션을 참고한 끝에 머리, 목, 어깨, 가슴 순으로 몸이 회전하면서 고개가 돌아간다는 걸 알 수 있었다. 이를 애니메이션에 적용하다 비로소 자연스러운 애니메이션을 만들 수 있었다.



▲ 새로 적용한 룩앳 시스템에는 여러 문제가 있었다

아울러 여기에 자연스러움을 더하기 위해 캐릭터마다 고개가 돌아가는데 제한을 뒀다. 이를테면 중후한 아저씨는 몸이 별로 돌아가지 않는 데 반해 여자 캐릭터는 허리가 좀 더 돌아가도록 하는 식으로 캐릭터마다 개성을 더했다.

그런데 이 문제들을 해결하자 다른 문제가 생겨났다. 2번째와 3번째 요소에 중첩이 일어나 머리가 계속 움직이는 상황이 발생했다. 어깨선을 기준으로 한 게 문제가 된 거였다. 이 부분은 테스트 끝에 기준점을 어깨선에서 골반으로 잡는 식으로 해결했다.




게임 내 연출은 크게 전투씬, 대화씬, 시네마틱씬 세 가지로 나눌 수 있었다. 방식 역시도 세 가지로 나뉘었다. 첫 번째는 원화가가 연출과 구도를 잡고 이를 구축해나가는 것이었고, 두 번째는 기존 게임의 전통적인 연출, 세 번째는 애니메이션처럼 시네마틱을 만들어가는 작업이었다. 이 과정에서는 디자이너들이 주축이 됐는데, 애니메이션 같은 표현을 하기 위해서 요구가 굉장히 다양했던 만큼 생산성이 굉장히 떨어졌다. 고민 끝에 개발진에서는 컷 단위로 편집을 할 수 있는 툴을 제작, 활용했다. 섬세한 연출을 위해서는 하나의 플로우를 수정하는 것 외에도 컷 단위로 하나하나 살펴보고, 카메라 연출도 세밀하게 컨트롤할 필요가 있었기 때문이다.



▲ 디자이너의 다양한 요구에 맞출 수 있도록 컷 단위로 편집이 가능한 툴을 만들었다

그리고는 배경과 씬의 퀄리티를 더 높이기 위해 포스트이펙트를 만들어서 적용했다. 포스트이펙트는 이미 여러 게임에서도 많이 쓰는 기법으로 다양한 필터를 통해 게임의 전반적인 퀄리티를 향상하는 작업이다. 퍼니파우가 개발 중인 신작에는 영화 같은 연출을 위해 색수차 필터와 스크래치 필름 필터 등이 사용됐는데 이런 필터들을 디자이너들이 자유롭게 쓸 수 있게 하려고 우버 쉐이더를 이용했다.



▲ 우버 쉐이더를 이용해 디자이너들이 필터를 좀 더 자유롭게 활용하게끔 했다

지금까지가 외형적으로 감성을 추구하는 작업이었다면 행동 트리 시스템(Behavior Tree System, BTS)은 내적으로 게임의 디테일, 재미를 향상하는 작업이 됐다. BTS는 코드의 재사용성과 유연성을 향상시켜 생산성을 높이는 작업으로 빠른 대응과 피드백이 가능하다. 하지만 준비해야 할 것도 많았다. 기획 및 개발 팀의 BTS를 교육하고 올바른 설계 방향성과 지속적인 점검이 필요했다.

아마 BTS가 생소할 수 있는데 BTS는 컴포지트, 컨디션, 액션, 데코레이터 4가지 노드가 계층적으로 연결돼 if, else 및 switch, case 시각적으로 구현한 모델링 방식이다. 각각의 조건에 따라 동작하는데 가장 큰 장점으로는 기존 코드의 수정 없이 기능을 개선하고 추가 및 복구가 가능해 생산성을 크게 향상시킬 수 있었다.




이렇게 할 수 있는 이유는 컴포지트의 구성 요소인 셀렉터와 시퀀서 구조 때문이다. 행동 트리를 살펴보면 셀렉터가 구축되고 그 아래에 시퀀서들이 있는 구조인데, 셀렉터는 자식 노드 중에 하나만 참이어도 참으로 인식한다. 시퀀서는 이에 반해 하부 구성 요소가 다 참이여야만 인정한다. 즉 첫 노드부터 거짓이면 바로 거짓으로 판정하는 것이다.

이를 거리가 몇 이하일 때 공격을 한다는 메커니즘을 구축하는 과정에 대입해서 풀어보면 다음과 같다. 시퀀서 아래에 거리가 몇 이하일 때 공격한다, 하지 않는다는 컨디션을 준다. 이 컨디션에서 거리가 몇 이하, 즉 참이라고 판정하면 그 시퀀서에서 멈춘다. 만일 시퀀서가 거짓이라고 판정되면 셀렉터는 두 번째 노드로 가서 다른 공식을 찾게 되는 방식이다. 기존의 코드를 변화하지 않고, 계속 붙여나가는 식으로 구축이 가능한 셈이다.

BTS를 잘 활용하려면 블랙보드를 이해하는 것이 필요했다. 블랙보드는 태스크의 의사 결정을 위한 정보 저장소로 볼 수 있다. 이를 활용하지 않고 기존 방식대로 하면 노드 간 코드나 데이터를 불러올 때 오브젝트 매니저, 메인캐릭터의 클래스를 불러와야 한다. 즉 코드가 서로 종속되고 연결이 되는 복잡한 구조이기 때문에 코드 재사용이 번거롭고 효율성이 떨어진다. 그러나 블랙보드에서는 태스크와 데이터가 분리되어있고, 클래스로 불러오지 않는다. 그래서 코드 재사용성이 상승하고, 생산성이 높아지는 것이다.



▲ 클래스 종속이 없어 노드 간 독립성이 확보된다

최재영 CTO는 오늘 소개한 것 이외에도 AI 머신러닝, AR 코어와 자이로를 기반으로 한 AR 전투 시스템 등 원작의 감성을 구현하기 위해서 다양한 것들을 구축했다고 언급했다. 그렇게 하나하나 구축해나가면서 디테일의 중요함을 느꼈고, 이를 최대한 구현하기 위해서는 앞서 정리한 것처럼 경쟁력과 생산성, 두 방향에서 각 요소들을 하나하나 세심히 살펴볼 것을 권했다.

코멘트

새로고침
새로고침

기사 목록

1 2 3 4 5