[📜일지] 텔테일 개발일지 #1 - UI

생각해보면 항상 공모전 글만 올리고 제작에 관한 내용은 거의 올리지 않았다. 앞으로 개발일지를 한 달에 한 번은 꼭 올려야지. 어쨌든 이번 글에서는 작년과 비교하여 UI의 변화를 나열해 보려고 한다.

게임을 간단히 소개해보자면, 텔테일 - 카지노 살인 사건은 추리 어드벤처이다. 최연소 변호사 강호연이 카지노 살인 사건의 진실을 파헤치며 재판에서 피고인을 변호하는 것이 주요 내용이다. 다양한 추리 미니게임들을 통해 플레이어가 직접 추리를 경험하는 것을 최대 목표로 삼았다.

대사창

Before

After

대사창 UI는 플레이어가 텔테일을 플레이하며 가장 많이 보게 될 시각 정보일 것이다. 그래도 대사창 하나만 바꿨는데도 인상이 확 바뀌었다. 역전재판의 영향으로 대사창은 무조건 네모 박스의 틀이어야 한다는 고정관념이 있었는데, 틀을 벗어나도 좋은 UI가 될 수 있다는 것을 깨달았다.

개발 여담인데, 현재 검은 그라데이션 대사창은 수정될 때 가장 처음으로 나온 시안이다. 자꾸 조건을 덕지덕지 붙여서 시안을 수정하다가 "그냥 맨 처음 게 가장 낫지 않음?" 하고 처음으로 회귀하게 되었다. 역시 게임 개발은 심오하다.

스탠딩 일러스트 연출

Before

After

스탠딩 일러스트의 출력 연출을 추가하였다. 이전에는 말하는 캐릭터 한 명만 화면에 보였는데, 최대 다섯 명까지 화면에 나올 수 있게 하였다. 또, 한쪽 화면에 두 명 이상의 캐릭터가 나올 때 안쪽으로 자연스럽게 이동하는 연출을 추가했다.

조사해야 할 오브젝트 표시

a66d28aa222fb45bbaf1d1bc10f11a393cc57a337413ce94

반짝이

텔테일은 전반부인 조사파트의 이탈률이 높았는데, 유저가 무엇을 해야 할지 몰라 헤매다가 결국 지루함을 느끼기 때문이었다. 그것을 해결하기 위해 필수적으로 조사해야 할 오브젝트를 줄였다. 그리고 유저들이 헤매지 않도록 조사해야할 오브젝트를 반짝이로 표시했다.

반짝이 크기 키운 버전 (침대와 액자에만 적용)

한편, 반짝이가 흰색이라서 흰 침대와 작은 액자의 반짝이가 잘 보이지 않는다는 피드백을 받았다. 그래서 반짝이의 크기를 조금 더 늘려보았는데, 이것으로 해결될지는 두고 봐야 할 듯.

튜토리얼

Before

After

튜토리얼도 대폭 변화를 겪었다. 기존의 방식은 튜토리얼 스크린샷을 유저에게 던져 주고 끝이었다. 유저들이 튜토리얼을 거의 읽지 않는다는 것에 충격을 받은 나는 '체험형 튜토리얼'을 통해 하나하나씩 다 짚어주고 싶었지만, 그러면 프로그래밍 작업량이 너무 많아지는 것이 문제였다. 그래서 단간론파의 튜토리얼을 참고하여 대사와 함께 튜토리얼을 주는 방향으로 스스로 타협했다.

추리극장

추리극장은 극장으로 형상화된 증인의 증언 속에서 모순을 지적한다는 설정의 추리 미니 게임이다. 게임이 시작되면 오브젝트를 클릭해보며 증언을 파악할 수 있으며, 모순을 알았다면 모순을 일으키는 오브젝트를 클릭해 모순된 이유를 지적해야 한다.

Before

After

텔테일의 메인 게임이기 때문에 추리극장은 가장 많은 변화를 겪었다. 시작연출을 강화하였고, 기존의 CUT과 NG 버튼의 이미지를 교체하고 위치를 바꿨다.

Before

After

오브젝트를 클릭했을 때 그 오브젝트에 흰색 외곽선을 줘서 해당 오브젝트를 클릭했다는 느낌을 강하게 주었다. 그리고 태그가 오브젝트 옆에 어색하게 나타난 이전과 달리, 칠판에 오브젝트의 내용을 표시했다. 클릭할 때 칠판을 약간 흔들리게 해서 주목시키는 효과도 넣었다.

Before

After

극을 일시적으로 멈추는 CUT 버튼을 눌렀을 때 필름 효과를 약하게 주었다. 소소하게 CUT 버튼을 눌렀을 때의 이미지도 변경된다.

현재 고민점

스토리에서 고민이 있다. 13살의 최연소 변호사라는 파격적인 소재는 호불호가 너무 심하다. 특히 작중에서 주인공이 13세의 어린애 같이 표현되지 않았고, 오글거리는 장면이 많았다는 평가를 받았다. 어쩔 수 없는 부분이라고 생각했는데, 최근 스마일게이트 멤버십 2차 면접에서 해결책을 찾았다.

기존 일러스트

변경 시안

우선 게임의 스탠딩 일러스트 분위기를 변경하는 방법을 떠올렸다. 임시로 시안 작업을 해봤는데, 상당히 괜찮아 보였다. 내가 쓴 스토리는 역전재판 풍의 라이트한 분위기였는데, 현재 스탠딩 일러스트는 중후하고 진지한 분위기가 강하다. 이것이 도트 배경과 역시너지를 내는 바람에 언밸런스한 느낌이 든다.

이는 엄청난 그래픽의 일러스트에 내가 그냥 OK OK로 넘어간 나의 탓이 크다(...). 전문가가 작업한 것이기도 하고, 퀄리티만 좋으면 되지 않겠느냐는 안일한 마인드가 여기까지 일을 벌인 것이다. 높은 퀄리티보다도 좋아도 게임의 분위기와 어우러지는 것이 1순위라는 것을 깨달았다.

전작 역전아이. 오랜만에 보네.

물론 아직 확정된 작업은 아닌데, 100장이 넘는 스탠딩 일러스트와 고화질의 컷씬을 대대적으로 바꿔야 하기 때문이다. 다행히 시안 작업을 했을 때 시간이 오래는 걸리지 않는 작업이라는 판단이 들어, 외주를 받아서라도 작업을 진행시키려고 했다. 일러스트가 배경과 잘 어우러질 경우 유치하다고 생각되는 장면도 자연스럽게 유저들이 받아들일 수 있을 것이다. 스마일게이트 멤버십 면접관 분이 이전 작품인 역전아이에서는 오글거림을 못 느꼈다고 한 의견에서 착안하였다.

한편, 스토리 측면에서는 13살의 최연소 변호사를 내가 개성 있게 구현하는 것이 베스트이다. 하지만 텔테일의 시나리오를 집필할 때 나는 주인공을 13살로 인식하지 않았다. 따라서 개성 있게 표현하기 위해서는 게임 시나리오를 뒤집어 엎어야 한다. 결국 차선점으로 현재 단점을 들어내기 위해 주인공의 나이를 15~16세로 약간 높이는 방안도 생각해 보았다. 게임을 플레이하는 유저들은 13이라는 숫자에 질색하는 경우가 많았기 때문이다.

이렇게 글로 정리해보니 1년동안 많이 바뀐 것 같기도 하고, 1년이라는 긴 기간 치고는 적게 변한 것 같기도 하고. 나머지 변화점들은 다음 글에 정리해보겠다.

[📜일지] 텔테일 개발일지 #1 - UI

댓글 6

다른 게시글