[🏆HIT] 래토피아 개발일지 #11 - 타이틀 화면

[카셀(125.129)]

안녕. <래토피아>를 개발 중인 카셀이야.

날씨가 급격히 추워졌었는데, 명절 연휴는 잘 보내니?

한동안 <래토피아>의 시스템적인 내용들을 많이 다뤘으니,

이번에는 타이틀 화면에 대한 개발과정을 소개하도록 할게.

메인 일러스트

개발 초기에 시스템에 대한 연구가 진행되는 동안, 메인 일러스트 한 장을 작업했었어.

지원 사업이나 전시회, 공모전 등을 신청하기 위해서는 이목을 끌만한 메인 일러스트가 필요하였고,

그렇게 작업한 메인 일러스트를 타이틀 화면에 임시로 사용할 계획을 가지고 있었지.

당시에는 플레이어 캐릭터인 공주 캐릭터조차 게임 내 등장이 가능할지 확정된 상태가 아니었기에,

‘빈부격차가 느껴지는 쥐들이 바글바글한 도시’로 메인 일러스트의 컨셉을 잡고 제작하였어.

영화 <기생충>처럼 지상의 상류층과 지하의 빈곤층을 통해 빈부격차를 보여주려 하였으나,

막상 그려보니 자세히 보지 않으면 알아차리기 어려웠고, 주제가 전달되기에는 부족했었지.

심사를 하실 때는 더욱 축소된 이미지로 보시니까… 쥐가 등장하는지도 모르셨을 수도…

지원한 사업에도 떨어지자 일러스트에 대한 아쉬움은 갈수록 커져갔어.

한번 시간을 크게 할애하여 쥐 캐릭터가 강조된 일러스트로 재작업해 보기로 결정했어.

전시회에서 많은 유저분들이 <래트로폴리스>의 캐릭터들을 기억해 주셨던 것을 통해,

캐릭터들이 가진 영향력이 엄청나다는 것을 느꼈고, 공주 캐릭터의 등장도 확정되었기 때문이지.

그래서 공주 캐릭터를 정면에 등장시켜, ‘귀여운 공주 쥐가 도시를 건설하는 게임입니다!’를 확실히 보여주기로 해봤어.

그러나 막상 작업을 시작하려니 어떻게 그려야 할지 갈피를 잡기 어려웠어.

그래서 우선 비슷한 장르의 게임들과 캐릭터가 강조된 게임들의 일러스트들을 연구한 후에,

각기 다른 구도의 일러스트를 3종 정도 스케치하는 것 부터 시작했지.

한번 스케치를 해보니까 어떤 부분을 강조하고, 감춰야 할지 감을 잡아가기 시작했어.

재작업하는만큼 이번에는 인 게임 리소스의 전체적인 분위기를 통일시키는 것에 더욱 신경을 쓰기로 하였는데,

<래트로폴리스>에서는 메인 일러스트, 카드 일러스트, 인 게임 캐릭터 리소스가 각기 다른 느낌으로 작업되어,

어떤 아트 스타일인지 설명하기 어려웠던 아쉬움이 있었기 때문이야.

그래서 <래토피아>에서는 사용하는 색상, 빛 효과, 질감, 테두리 등을 통일시켜 전체적인 분위기를 맞추고,

동화풍의 아트 스타일을 견고히 하고자 하였어.

로고 디자인

새 메인 일러스트를 스케치하면서 로고를 배치하려다 보니, 게임 로고도 어서 재작업해서 붙여봐야 되겠다고 느꼈어.

그러나 로고에 대해 전문적인 지식이 없다 보니, 매력적인 로고를 작업하는 게 쉽지는 않더라.

여느 때처럼 먼저 쥐, 도시, 왕국, 공주 등 큰 주제를 잡고 관련된 영화 포스터나 게임 타이틀들을 조사한 뒤에,

여러 시안들 중 가장 괜찮다고 생각하는 로고를 선별해 보기로 했지.

디자인을 하면서 로고가 게임의 얼굴이 되었으면 좋겠다는 생각이 들어,

게임의 특징이나 배경 스토리, 그래픽 스타일 등을 로고에 담아보려 했어.

부제를 작게 넣어보기도 하는 등 다양한 시도가 있었어.

스케치한 메인 일러스트 시안에 만들어진 로고 시안들을 올려보면서 토의한 끝에,

최종적으로는 중앙에 위치한 5번 로고가 선별되었어.

레드/골드의 고급 진 색감과 실루엣이 왕국이라는 느낌을 잘 전달해 주는 것 같았고,

또한 아기자기한 장식들과 쥐 모양이 <래토피아>의 전체적인 동화풍 분위기에도 잘 어울리는 것 같았지.

로고 디자인이 완료되었으니, 이제는 다시 메인 일러스트를 본격적으로 작업할 단계에 도달했어.

타이틀 화면을 위한 처리

타이틀 화면으로도 사용될 메인 일러스트는 <래트로폴리스>의 타이틀 화면처럼,

오프닝(인트로) 영상에서 자연스럽게 전환시키고 싶었는데.

그러기 위해서는 일러스트를 본격적으로 작업하기 전에, 오프닝과 어떻게 이어지게 할지를 먼저 고민할 필요가 있었어.

스케치한 메인 일러스트들이 오프닝과 어울리지 않는다면, 새로 그려야 할 수도 있었지.

이쯤에서 다시보는 <래트로폴리스> 오프닝(구)

<래토피아>의 오프닝 구성을 짜기 위해서는 스토리와 세계관을 재정립할 필요가 있었는데.

그러나 당시에는 타이틀 화면으로 사용할 메인 일러스트의 결정이 긴급한 사안이었고,

개발 초기에 빠르게 기획한 오프닝의 내용은 개발이 진행되면서 변경될 가능성이 높아 보였어.

차라리 전작 <래트로폴리스>와 관련된 스토리 라인을 만든다면 팬분들에게 흥미도 줄 수 있고,

변경될 여지도 크게 줄일 수 있을 것이라 생각하였지.

그래서 그런 방향성으로 어떻게 제작할지 정리를 해보면서 콘티를 그려보았고,

오프닝 영상은 먼 미래에 제작될 것이기에, 구상한 바를 잊어버리지 않게 상세히 남겨둘 필요가 있었어.

오프닝에 대한 자세한 내용은 언제 한번 개발 일지에서 다뤄보도록 할게.

그렇게 오프닝의 마지막은 공주가 도시 건설을 시작하는 모습으로 끝이 나게 구성되었고,

메인 일러스트에서는 이와 잘 조화될 수 있는 방향으로 제작을 진행하게 되었어.

공주 캐릭터를 강조하기 위해 구도는 이전 스케치를 따라가되,

숲속에서 쥐들이 도시를 건설하는 모습과 오프닝에서 등장하는 책을 공주가 들고 있게 하기로 하였지.

그리고 타이틀에서 사용될 버튼과 로고의 위치도 미리 정할 필요가 있었어.

먼저 타 게임들의 타이틀 화면들을 찾아보며 어떤 위치가 적합한지를 알아보려 하였는데,

게임마다 버튼의 배치가 다양 각색이어서 이렇다 할 기준을 찾지는 못하겠더라.

다만 시뮬레이션 게임들이 다른 장르에 비해 타이틀 속 버튼의 수가 많다는 것을 느꼈고,

늘어날 버튼들이 일러스트를 많이 가리지 않게 하기 위해 중앙보다는 좌측에 UI 공간을 배치했지.

스티커 느낌의 UI 컨셉을 타이틀 화면에 시도해 보기도 해봤어.

아주 만족스러운 결과물이 나왔지만, 한 가지 실수를 했다고 느낀 부분은 비율이었어.

모니터 크기에 맞춰 16:9 비율에 최적화되게 1920x1080px 크기에 맞춰 작업을 하였는데,

게임을 홍보하다 보면 스팀 라이브러리 이미지 등록, 전시회 이미지 등록, 오프라인 현수막 제작 등

규정된 크기에 맞춰 메인 일러스트의 크기를 조정해야 하는 상황들이 발생하기도 해.

이런 상황들을 대비해 일러스트의 캔버스를 큰 사이즈로 작업한 후,

일부분을 필요한 규격에 맞춰서 잘라서 사용하면 활용이 편리한데.

<래트로폴리스>를 개발 당시 깨달았던 점이었는데, 이번에는 급하게 작업하느라 깜빡 놓쳤네ㅜ.

이상적인 일러스트 작업 캔버스 예시

타이틀 애니메이션

예상보다 일러스트가 멋지게 제작되자, 좀 더 욕심을 내보고 싶었는데.

타이틀 화면으로 사용될 때 움직이게 해서 좀 더 생기를 넣어주면 좋을 것 같았어.

<래트로폴리스> 때는 유니티 애니메이션과 스프라이트 이미지를 통해 가벼운 움직임을 제작했었으나,

이번에는 스파인을 이용해서 좀 더 큼직하고 자연스러운 애니메이션을 시도해 보기로 하였지.

이러한 애니메이션 추가를 위해서는 움직임에 사용된 리소스들을 하나하나 조각낼 필요가 있었는데.

조각낸 리소스가 움직이게 되면서 드러나는 배경들 또한 다시 그려줘야만 했어.

애니메이션 추가를 대비해서 리소스마다 레이어를 나누어 작업했으면 수월했겠지만,

당시에는 일러스트만 빠르게 제작할 생각에 그러지 못해서 보완 작업이 한번 더 진행되었지.

애니메이션 제작을 위한 조각난 리소스들

게임 내 쥐 캐릭터들은 매우 쾌활하고 활동적인 캐릭터성을 가지고 있기에,

애니메이션 또한 큼직큼직한 동작들로 작업하여 보는데 심심하지 않게 조각내고, 동작을 입혀주었어.

바람을 통해 옷과 머리카락 등이 크게 펄럭이게 하여 생동감과 상쾌한 기분을 느끼게 하였지.

또한 당시에는 낮과 밤에 대한 아이디어들이 많이 나오고 있었기에,

광원과 반사광을 묘사해 줄 흰색 리소스들을 군데군데 겹쳐지게 추가해 준 후,

투명도와 색을 조정해가며 낮과 밤의 차이를 부각하려고도 해보았지.

그렇게 완성된 타이틀 애니메이션

일련의 과정을 거쳐 멋진 타이틀이 완성되었지만, 그 작업 과정은 쉽지 않았던 것 같아.

일러스트와 애니메이션 작업자가 달라, 리소스 작업과 수정에서 시행착오가 많았고,

전체적인 분위기를 통일하기 위해 일러스트에 일괄로 적용한 종이풍의 질감은

리소스들을 조각내서 움직일 때 되려 부자연스럽게 느껴지게 만들었지.

또한 낮과 밤 연출로 인해 애니메이션의 총 프레임도 상상이상으로 늘어나버려,

애니메이션에 대한 추가적인 수정이 매우 힘들어지는 문제도 생겼어.

임시용 타이틀을 만들려고 시작했던 작업이 만들다 보니 많은 신경을 들이게 됐네.

만들어가는 과정 중에서도 배운 점도 정말 많았고,

여러 자리에서도 많은 분들이 귀여운 타이틀 화면을 보고 관심을 가져주실 것 같아 기대가 돼.

그러나… 막상 타이틀 화면을 넘어가면 신경을 못 쓴 부분도 많아 실망을 하실까 걱정도 되는데,

다음 화에서는 가장 개선에 애를 먹고 있는 UI에 대한 내용을 적어보도록 할게.

오늘도 긴 글 읽어주셔서 고마워.

홈페이지: https://www.CasselGames.com/

스팀 스토어: https://store.steampowered.com/app/2244130/Ratopia/

페이스북: https://www.facebook.com/CasselGames/

트위터: https://twitter.com/CasselGames

[소닉쫄따구테일즈(dcz3xv7zgu14)]

쥐린다

[메탈기어레이무(ssss4610)]

애니메이션 미쳤노 ㄷㄷ

[익명(119.194)]

'역시 AAA게임은 달라' 콘

[익명(58.232)]

쥐 개꼴리는데 내가 잘못한거없지?

[익명(39.113)]

애니매이션 무슨 툴로 만듬? 투디라이브?

[카셀(220.71)]

스파인 2d를 주로 사용하고, 가끔은 유니티 애니메이션을 사용하기도 해

[익명(175.197)]

래토피아 기대된다

[익명(222.105)]

개추다 이말이야 - dc App