UI OUT OF 10 | 임은지 2024 포트폴리오
아키에이지 워 [모바일/PC]
3년간 이어온 지난 프로젝트를 아쉽게 뒤로 한 채 다시 '우리들이 잘 하는것으로 돌아가자' 는 결심 하에 새롭게 진행된 프로젝트입니다. 회사에서 가지고 있던 아키에이지IP를 이용한 MMORPG 장르로 아주 빠른 속도로 프로젝트가 진행 되었습니다.
이 프로젝트에서는 프로토타입이 끝나고 본격적인 UI디자인에 들어갔을 때부터 파트장으로서 활동하게 되었습니다. 이미 기획이 완성된 상태에서 우리 게임만의 개성을 살리는 일은 쉽지 않았습니다. 하지만 노드 코딩을 적극적으로 사용한 프로젝트의 특성을 이용하여 보다 유연한 작업이 가능했기 때문에 이후 작업에 아주 큰 도움이 되었습니다.
이 프로젝트는 객원 맴버로 참여했던 레미 로어 이후 오랜만에 발매를 한 작업물로 저 개인적으로도 감회가 남다른 작품입니다.
프로젝트 오버뷰 (클릭하여 감상하세요)
작업하면서 많은 작업자들의 손길이 스쳐지나간 아키에이지 워의 UI 입니다만, 그 중에서도 제가 대부분 작업을 한 것들을 모아서 올린 것입니다. 이 게임의 원형인 아키에이지 PC온라인 게임의 스타일을 가져오면서도 현재에 맞게끔 세련된 디자인을 고안하는데에 중점을 두었습니다.
시안은 크게 세 번 리뉴얼 되었는데, 첫번째는 발매 전에 사용하던 붓터치가 강조된 작업물이고 두번째는 발매 버전에 들어간 디자인입니다. 그리고 마지막은 1주년 기념으로 대대적인 리뉴얼을 한 버전인데, 제가 직접 디자인을 이끌고 갔던 버전은 두번째 버전이고 2024년도 3월 리뉴얼 버전의 아트는 팀원분이 도맡아 해주셨습니다. 다만 작업 후 디자인 마무리와, 작업물을 엔진에 올리고 노드 코딩을 하는 것을 모두 제가 담당하였습니다.
아키에이지 워 UI를 만드는 과정
아키에이지 워는 제가 여태 겪어본 어느 프로젝트보다도 디자이너에게 노드 코딩의 자유도를 준 게임이었습니다. 위에서 설명한 오픈 리뉴얼의 경우 단 1개의 마일스톤만에 모든 교체가 이루어져야 했는데, 이 작업을 중간에 프로그래머에게 맡겨야 하는 작업환경이었다면 불가능한 기간이었을 겁니다.
이 페이지에서는 그런 노드 코딩을 포함아여 연출까지, 아키에이지 워의 UI를 만들때 어떤 방식으로 작업을 하였는지 보여드리려 합니다.
물론 모든 노드가 위처럼 복잡한 모양을 하고 있었던 것은 아닙니다. 위 노드는 두개의 Thumb으로 슬라이더 하나를 제어해야 하는 아주 특이한 경우였으므로 UI쪽에서 직접 작업하였습니다.
위에 노드를 보시면 실제로 구현에서는 이전의 최소/최대 int 값만 주고 받게끔 되어 있는것을 보실 수 있습니다.
비단 위젯 블루프린트 뿐만이 아니라 머터리얼 역시 노드로 만들수 있어 보다 자유로운 작업이 가능했습니다. 위 머터리얼을 응용하여 아래의 탭버튼을 비롯한 여러 UI이펙트를 만들 수 있었습니다.
이번 프로젝트에서의 UI는 팀에서 많은 파트를 차지하였습니다. 아래를 보시면 시안을 제작할때도
한가지의 이미지로 끝나는 것이 아닌, UI가 변하는 모든 경우의 수를 시안 단계에서 기획자 조율하고 정확하게 적용한 것을 보실 수 있습니다.
아래의 네개 이미지는 작업 한 UI연출에 이어 어떤 3D이팩트가 나와야 하는지를 가이드한 시안들입니다. 위의 가이드로 최종적으로 어떻게 연출이 진행되었는지 아래에 결과물을 보실 수 있습니다.
아래의 두 영상은 게임 내에 등장한 연출 중에 고른 것입니다. 첫번째 대화창 연출은 처음에 제가 작업을 한 후 이펙터가 작업을 이어서 했고, 그 작업을 바탕으로 제가 다시 위젯에 필요 이상으로 들어간 리소스 등을 정리하여 최적화 하는 과정을 담당 했습니다.
두번째는 운명 카드를 뽑는 연출 시안용으로 임시로 노드를 이어본 것입니다. 따라서 좌측 상단에 임시 버튼을 보실 수 있습니다. 이렇게 복잡한 연출이 필요한 경우에는 직접 연출을 이어봐서 괜찮은지 확인 후 구현에 전달하였습니다.
