어둠땅 출시는 캐릭터 생성 과정을 간소화하고 다시 설계할 기회였습니다. 선임 UI 디자이너 제프 리우와 함께 어떤 논의와 검토를 거쳐 사용자 인터페이스(UI) 재설계가 이뤄졌는지 알아보세요.
안녕하세요, 아제로스 주민 여러분! 전 제프 리우라고 합니다. 월드 오브 워크래프트 User Interface 팀의 선임 UI 디자이너로 일하고 있죠. 오늘은 어둠땅이 출시될 때 적용된 새로운 캐릭터 생성 화면의 재설계와 관련된 몇 가지 이야기를 해드리려고 합니다. 얼마 전에 근사한 꾸미기 옵션이 많이 추가됐으니, 사용자 인터페이스 디자인의 배후에 숨은 개발 이야기를 공개하기에 더없이 좋은 시기라는 생각이 들었습니다.
앞서 저는 형상변환 시스템과 경매장 재설계를 담당하기도 했습니다. 개인적으로 오래된 사용자 인터페이스를 개편하는 프로젝트를 가장 좋아하다 보니, 캐릭터 생성 화면 재디자인을 맡게 되었을 땐 정말로 기뻤습니다.
캐릭터 생성 화면 재설계는 새로운 플레이어 시작 지역인 추방자의 해안을 포함해, 신규 플레이어의 경험을 개선하는 기획의 일환이었습니다. 신규 플레이어가 제일 먼저 상호작용하는 부분이 캐릭터 생성 화면인 만큼, 현대에 걸맞게 고쳐 좋은 첫인상을 심어주고 싶었습니다. 또, 캐릭터 아트 팀에서 어둠땅을 맞아 새로운 꾸미기 옵션을 잔뜩 추가하고 있었기에 사용자 인터페이스를 업데이트할 시기로는 더할 나위 없이 완벽했습니다.
새로운 레이아웃
참조를 위해 기존의 캐릭터 생성 화면을 보여드리겠습니다.
가장 먼저 시도한 것은 직업과 종족 선택 화면을 분리하는 것이었습니다. 첫 번째 화면에서 직업을 선택한 다음, 두 번째 화면에서 종족을 선택하는 방식이었죠.
이 예시에서 나이트 엘프를 플레이하려면 이전 화면으로 돌아가 다른 직업을 선택해야 했습니다. 다시 말해 플레이어가 선택지를 확인하려면 이전 화면과 현재 화면을 왔다갔다해야 했습니다.
예, 말할 것도 없이 어색했죠.
영 아니다 싶어서 결국에는 기존 레이아웃을 유지하되, 아트적인 부분만 업데이트하는 노선을 고려하는 지경에 이르렀습니다. 그런데 마지막 난상 토론을 벌이던 중, 동료 UI 디자이너 크래쉬 리드와 레이 오캄포가 종족을 대치 구도로 배치하는 콘셉트를 떠올렸습니다.
이 레이아웃에서 주목할 부분은 바로 호드와 얼라이언스의 대립 구도가 진영 전쟁이라는 개념을 곧바로 전달한다는 점입니다. 이 디자인의 명료함과 신선함이 마음에 들어 본격적인 개발을 추진했습니다!
“촉”에 맡기다
새로운 레이아웃이 완성되자, 저는 이 화면에서 플레이어에게 제공되는 정보의 양을 다시 평가했습니다. 기존 캐릭터 생성 화면은 텍스트 설명으로 수많은 정보를 전달했습니다.
정보는 아무리 유용해도, 지나치게 많이 제공되면 사용자가 간단한 선택을 하지 못하게 만드는 법입니다.
그래서 새로운 캐릭터 생성 화면에서는 신규 플레이어가 소위 말하는 정보 과다로 인한 마비를 겪지 않도록 디자인했습니다. 대량의 텍스트를 쳐내고, 시각 및 음향 정보로 종족과 직업을 설명했습니다. 마법사를 글로 설명하기보단 화염구를 시전하는 모습을 보여드리고자 했죠.
대부분의 신규 플레이어는 대중문화를 통해 판타지의 전형을 접한 적 있는 계층입니다. 전사가 검을 휘두르고, 비교적 무거운 방어구를 착용하며, 근접 전투를 벌인다는 점은 대중적으로 인식되는 특징입니다.
또한, 신규 플레이어가 빠르게 이해할 수 있게끔 직업을 정렬하였습니다.
앞에 놓인 세 직업은 제일 강렬하며, 대중적으로 인지도가 높은 전형입니다. 다음 세 직업은 그보단 정도가 덜하죠. 가령, 비디오 게임을 플레이해본 적 없는 사람은 사제의 역할을 전혀 모를 겁니다. 그리고 이어지는 순서로 좀 더 복잡한 하이브리드 직업이 배치되어 있습니다.
여기서 짚고 넘어가야 할 중요한 부분이 있습니다. 그건 바로 이런 디자인 선택은 각 직업의 플레이 난이도를 고려한 것이 아니라, 직업의 이면에 숨겨진 특징과 역할에 대한 콘셉트를 별도의 설명 없이 얼마나 쉽게 이해할 수 있느냐를 척도로 삼은 것이란 점입니다.
종족 선택은 대체로 미적 기준에 근거하여 이뤄집니다. 신규 플레이어가 종족 특성을 신경 쓰지 않도록 기본값으로 숨기는 방안을 채택했습니다.
저희는 신규 플레이어가 처음부터 “영원히 함께할 캐릭터”를 만들지 않아도 괜찮다고 여깁니다. 캐릭터 생성 화면에서 구구절절 설명을 늘어놓아도, 직접 게임을 플레이하면서 종족과 직업에 대해 알아가는 것만 못하기 때문이지요.
저희는 신규 플레이어가 제일 멋있어 보이는 종족을 고르고, 좋아하는 직업 유형을 선택한 다음 모험을 떠나길 바랄 뿐이거든요!
보여주되 설명하지 않는다
텍스트를 모두 쳐낸 다음에는 직업 판타지의 매력을 보여줄 만한 신규 애니메이션 제작에 착수했습니다.
첫 과정은 애니메이션의 정교한 정도를 결정하는 일이었죠. 시간을 너무 끌고 싶진 않았기에 애니메이션 재생 시간을 특히 신경 썼습니다.
수석 애니메이터 이안 랭이 만든 초기 목업을 보여드리겠습니다.
참조 사항: 마지막 클립에서 단상 위에 서 있는 캐릭터의 배경을 장식하는 거대한 천을 보실 수 있을 겁니다. 예전에 시도했던 건데, 다른 목업을 하나 더 보여드리죠.
방향이 잡히자 애니메이션 팀은 각 직업을 위한 시퀀스를 만들었고, 특수 효과 팀과 협업하여 예시로 보여주는 능력에 어울리는 특수 효과를 정했습니다. 이 과정이 완료된 다음에는 사운드 디자이너가 모든 애니메이션에 음향 효과를 연결했습니다.
애니메이션과 특수 효과, 사운드 팀이 놀라운 결과물을 만들었다는 사실에는 여러분도 동의하실 겁니다. 직업의 영웅적인 면모를 제대로 느낄 수 있으니까요. 완성된 애니메이션은 새로운 캐릭터 생성 화면에서 주목받는 요소 중 하나가 되었습니다.
집중, 또 집중
주된 목표 중 하나는 플레이어의 관심이 화면 중앙의 캐릭터 모델에 집중되게 만드는 것이었습니다. 슈퍼히어로를 디자인하는 듯한 느낌을 자아내고 싶었죠. 이 철학은 화면 디자인 과정에서 있었던 수많은 결정에 근간이 되어 주었습니다.
저희는 전통적인 WoW 사용자 인터페이스 아트 스타일을 벗어나 좀 더 미니멀리즘한 방향을 선택했습니다. 예전 진영 깃발처럼 양쪽 면에 있던 정교한 아트 요소를 덜어냈죠. 시각적으로 너무 산만한 데다, 캐릭터에 집중하지 못하게 만들기 때문이었습니다.
화면 테두리에는 큼지막한 그림자를 배치하여 캐릭터에게 집중 조명을 비춰 비네트 효과를 연출했습니다.
그리고 사용자 인터페이스 요소는 의도한 방향으로 플레이어의 시선이 향하게끔 배치하였습니다.
마지막으로 꾸미기 모드에서 카메라가 확대되어 있는 동안에는 배경이 흐릿하게 표시되도록 만들었습니다. 이렇게 하면 캐릭터가 도드라져 외형에 집중할 수 있게 됩니다.
신규 플레이어
신규 플레이어는 베테랑 플레이어와는 다른 버전의 캐릭터 생성 화면을 보게 됩니다. 전 신규 플레이어에게 단순하고 명료한 경험을 선사하고 싶었습니다.
예를 들자면 핵심 종족만 표시되고 초상화 밑에 이름만 표시하는 형태로 말입니다.
그 외에도 미묘한 차이점이 존재합니다.
베테랑 플레이어가 보게 되는 첫 캐릭터의 종족과 직업은 완전히 무작위로 설정됩니다. 반면에 신규 플레이어는 첫 캐릭터로 인간 또는 오크 전사(성별은 무작위)를 보게 되어 있죠. 이것은 인지도가 높은 요소를 보여줌으로써 신규 플레이어의 적응을 돕는 기조가 반영된 결과입니다.
또한, 신규 플레이어의 캐릭터는 무작위 설정도 조금 다르게 처리됩니다. 워크래프트 세계관을 처음 접하는 것일 수도 있는 만큼, 각 종족의 모습을 뚜렷하게 볼 수 있게 해야겠다는 생각이 들었습니다. 그래서 캐릭터 무작위 설정 시 문신이나 전쟁 물감, 머리장식 같이 얼굴을 가리는 옵션은 나타나지 않도록 비활성화했습니다.
물론 꾸미기 모드에 들어가면 원하는 대로 옵션을 선택할 수 있으니 염려하지 않으셔도 된답니다.
마지막으로, 신규 플레이어는 꾸미기 화면에서 하나의 도움말을 보게 됩니다.
사용자 테스트에서 얻은 교훈 중 하나는 바로 몇몇 신규 플레이어는 캐릭터를 완성할 때 불안함을 느낀다는 점이었습니다. 이해는 되죠. 이게 캐릭터를 꾸밀 마지막 기회라는 생각이 드는 순간 오랜 시간을 들여서라도 완벽하게 만들려고 들 테니 말이에요. 이 도움말은 플레이어가 자신감 있게, 더 빠르게 게임에 진입하도록 돕습니다.
캐릭터 꾸미기
캐릭터 꾸미기 얘기가 나온 김에 해당 화면의 초기 목업을 살펴보죠. 디자인이 기존 레이아웃에서 어떻게 발전했는지 보실 수 있을 겁니다.
어느 시점부터 옵션을 상자 바깥으로 꺼내는 자유로운 형태의 레이아웃을 실험하게 되더군요.
산만하게 퍼진 탓에 팀의 마음엔 안 들었지만, 그래도 탁 트인 느낌이 좋아 옵션을 범주로 묶는 초기 아이디어에 결합했습니다.
슬슬 최종 레이아웃에 가까워지고 있죠?
옵션 선택기
마지막 목업의 옵션이 슬라이더 조작 방식으로 되어 있는 걸 알아차리신 분들도 계실 겁니다. 이 사용자 인터페이스 조작 방식은 개발 중에 수많은 변화를 거쳤습니다.
예전 레이아웃은 화면 오른쪽에서 큼지막한 미리 보기 초상화를 제공했습니다. 예시가 보여주다시피 서로 다른 얼굴 옵션을 구분하는 게 좀처럼 쉽지 않습니다.
더군다나 비율 조절도 용이하지 않았고, 중앙의 캐릭터에 시선을 집중시키려는 목적에도 부합하지 않았습니다.
그래서 초상화를 대체할 사용자 인터페이스 조작 방식을 찾아 나섰습니다.
체크 박스와 버튼, 색 지정기 같은 여러 조작 방식을 혼합해서 사용하고 싶진 않았습니다. 그랬다간 화면이 어수선하고 부담스럽게 느껴질 것 같았거든요. 모든 옵션 유형에 활용할 수 있는 단일 조작 방식을 이용하고 싶었습니다.
하지만 플레이어가 두 옵션을 빠르게 오가며 비교할 수 있게 만드는 것이 무엇보다 중요했습니다.
처음 몇 가지 변형은 앞서 말한 기준을 충족하지 못했을뿐더러, 멀리 떨어진 옵션을 오가기에 번거로웠습니다.
슬라이더는 빠르게 옵션을 살펴볼 순 있지만, 정밀성이 떨어졌습니다. 또한, 슬라이더는 대체로 두 개의 극단(짧거나 길거나) 사이를 조정할 때나 사용되었기에 옵션 대부분에 활용하기엔 어려움이 있었죠.
결국 아래의 모든 목적을 충족하는 복합형 드롭다운 메뉴를 구상하였습니다.
- 두 옵션 사이를 빠르게 오갈 수 있음
- 한 번에 모든 옵션을 볼 수 있음
- 이름과 색상 양쪽 모두에 활용 가능한 범용적인 단일 사용자 인터페이스 조작 방식이며, 경우에 따라선 한 드롭다운 내에서 두 유형을 혼합할 수 있음
- 플레이어는 중앙의 캐릭터에 계속 집중할 수 있음
- 무엇보다, 커서를 올려놓기만 해도 실시간으로 옵션을 미리 볼 수 있는 근사한 기능을 탑재할 수 있음
참조 사항: 전 오버워치의 큰 팬입니다. 옵션 메뉴에서 오버워치 관련 요소를 몇 개나 찾으셨나요?
카테고리 아이콘
꾸미기 옵션은 전부 세 카테고리 중 하나에 포함됩니다. 각 카테고리와 아이콘이 어떻게 발전해왔는지 보여드리죠.
처음에는 다섯 개의 카테고리를 계획했지만, 게임 내에서 테스트한 후 방향을 틀었습니다.
머리 모양을 두 번째 카테고리에 두자니 다소 번거롭게 느껴졌습니다. 캐릭터를 꾸밀 땐 대개 머리 모양을 먼저 손보니 말이죠. 그래서 얼굴 옵션과 묶어 첫 번째 카테고리에 배치했습니다.
신체 및 문신 옵션이 많지 않은 종족이 대부분이기에, 두 옵션도 하나로 합쳤습니다. 그리하여 세 종류만이 남게 된 것이죠.
미용실
기존의 미용실이 캐릭터 생성 화면과 완전히 다른 사용자 인터페이스를 가졌던 걸 기억하실 겁니다. 재설계 과정에서 두 화면 모두 같은 사용자 인터페이스를 사용하는 게 합리적이란 생각이 들었습니다.
일부 미용실은 불편할 정도로 어두웠는데, 이는 미용실의 광원이 주변 환경에 영향을 받았기 때문입니다. 결국 색깔을 제대로 인지하지 못하는 문제가 종종 발생하곤 했죠. 녹색이 노란색으로 보일 때도 있었습니다.
아트 팀은 미용실 의자를 활성화할 때 캐릭터 주위에 완전한 중립 광원을 적용하는 것으로 문제를 해결했습니다. 그 결과 밝으면서도 정확한 색을 확인할 수 있는 광원이 만들어졌죠.
미용실에는 캐릭터의 성별을 변경하는 기능이 새로 추가되었습니다. 첫 번째 성별 전환 동영상을 확인해 보세요. 해당 기능을 적용한 엔지니어가 녹화한 것입니다.
오류
프로젝트를 진행하면서 수많은 시각적 오류를 수정해야 했습니다.
악몽에나 나올 광경을 볼 일 없게 만들어준 QA 팀에 감사의 인사를 전하도록 합시다!
훗날을 기약하며
캐릭터 생성 화면 개편은 캐릭터 아티스트와 애니메이터, 프로듀서, 테스트 분석가, 사운드 디자이너, 사용자 연구원, 엔지니어(이곳에서 예전에 엔지니어들이 게시한 글을 읽어보실 수 있답니다!)가 동참한 대규모 협업 프로젝트였습니다. 저희가 만든 능동적이고 현대적인 사용자 인터페이스가 앞으로 오랜 시간 수백만 명의 캐릭터가 탄생하는 밑바탕이 되길 소망할 뿐입니다.
캐릭터 생성 화면 재설계의 개발 비화를 즐겁게 살펴보셨길 바랍니다. 읽어 주셔서 감사합니다!
제프 리우
월드 오브 워크래프트 선임 UI 디자이너