디시인사이드 갤러리

갤러리 이슈박스, 최근방문 갤러리

갤러리 본문 영역

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

카셀(125.129) 2023.02.02 01:50:01
조회 8217 추천 62 댓글 62
- 관련게시물 : 래토피아 개발일지 #1 - 새로운 도전



- 관련게시물 : 래토피아 개발일지 #4 - 애니메이션


- 관련게시물 : 래토피아 개발일지 #5 - 공주와 시민 행동 트리

- 관련게시물 : 래토피아 개발일지 #6 - 군계와 맵 에디터

- 관련게시물 : 래토피아 개발일지 #7 - 자원과 생산체인

- 관련게시물 : 래토피아 개발일지 #8 - 욕구와 계층

- 관련게시물 : 래토피아 개발일지 #9 - 능력치와 특성

- 관련게시물 : 래토피아 개발일지 #10 - 세금과 세법










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

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

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

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



메인 일러스트


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

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

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


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

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

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

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



a16938ac3d02b5458e332b619b3ac402ce3a5d56d6c8747859b03aa1e7f6fba039b7ae136d

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



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

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

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

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

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


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

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

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



a05e30aa1806b54d8e333d499a24cc020994369038a35983ed5a65c2e2848c3b623161d8d8

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



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

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

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

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

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




로고 디자인


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

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

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

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

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

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



a67c2cac361207f03aefc6ad58d62d3b7828788a9083fb8248220958e1

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



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

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

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

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

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




타이틀 화면을 위한 처리


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

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

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

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



a64328ab0f0ab367923239619d17e8b13f79288e188c5fdcf2b6dfaf76ed9dec0d9a2ed69021cf9a348ccb06167c584fb3cba8

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



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

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

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


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

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

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

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



a14514ab1136b34d93ff5a68ee5ccfedc88fb05a6976645c3a20d6b58953c6c32b237f8a31bd9b

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



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

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

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

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



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

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

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

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

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



a05e30aa1806b54d8eff5a4be75dd3d8167fb0621c16fc3682e2345666b27e77ae9e9bec4a53c01a84272ca9dc63

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



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

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

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

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


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

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

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



a14004aa0633b4668f332b6d565dd9e1c2608bdc0fe636187b8c459b11fdc9568f930d7063a93b4795b81571c83e1d1e50111cb8e17f

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




타이틀 애니메이션


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

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

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

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


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

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

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

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



a17c00ac3533b3708a3223752987706dfe359a12c897a0ef4dce176450d164f0bc19

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



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

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

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


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

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

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



a05e30aa1806b54d8eff5a40d65acfd504bae861daa032e53334eab9f0985bb1d720b89a8e57519fa91de31d23ca8e2a91f898ec958ce0cfce8b600d

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



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

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

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

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

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

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



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

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

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

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

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

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



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

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

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

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








출처: 인디 게임 개발 갤러리 [원본 보기]

추천 비추천

62

고정닉 18

20

댓글 영역

전체 댓글 0
등록순정렬 기준선택
본문 보기

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

갤러리 리스트
번호 제목 글쓴이 작성일 조회 추천
설문 사이비 교주로 있으면 설득될 것 같은 스타는? 운영자 23/03/20 - -
공지 실시간베스트 갤러리 이용 안내 [1019/2] 운영자 21.11.18 1150621 262
123826 [인갤] 개발일지 #8 거미 새끼 [24] 플라타갤로그로 이동합니다. 09:30 754 19
123825 [카연] 다이(Die) - 6화 [학원물 Manhwa] [31] XENO.3갤로그로 이동합니다. 09:20 641 21
123823 [조갤] 3월 20일 세계 참새의날 기념 (움짤포함 50pics) [44] ㅇUㅇ갤로그로 이동합니다. 09:10 1226 42
123821 [로갤] 2023 밀라노 산레모 결과 (사진많음) [21] 참치는등푸르다갤로그로 이동합니다. 09:00 964 15
123820 [일갤] 놀고 먹고 마시고 온 후쿠오카 여행 [75] 로데오핑갤로그로 이동합니다. 08:50 4282 45
123818 [인갤] 안녕하세요!! 비뎀업RPG 파이널나이트 소개올립니다. [86] 뚜시갤로그로 이동합니다. 08:40 3205 62
123816 [싱갤] 싱글벙글 1시간안에 다먹으면 100만원주는 돈까스 [300] ㅇㅇ갤로그로 이동합니다. 08:30 18311 57
123815 [그갤] 프로의 그림으로 투시를 공부해보자 [75] ㅇㅇ(220.121) 08:20 5829 32
123811 [애갤] 일본의 30대 프리터족 [354] ㅇㅇ갤로그로 이동합니다. 08:00 17955 168
123810 [야갤] 정말로 맛있어 보이는 빵을 만들었다면 가장 먼저 누구에게 주겠나 [159] 할로이갤로그로 이동합니다. 07:50 11653 112
123808 [주갤] 결혼 전인데 스트레스 받아 죽겠다는 예비퐁퐁남 [236] ㅇㅇ갤로그로 이동합니다. 07:40 16152 189
123806 [해갤] 여자들이 은근히 좋아한다는 남자 유형 [362] ㅇㅇ갤로그로 이동합니다. 07:30 25705 52
123805 [와갤] 호주와인 NOW! 2023 후기 [53] 안경따거갤로그로 이동합니다. 07:20 3186 13
123799 [데갤] [브금] 재미로 살펴보는 데스티니 출시 전 초기 컨셉아트들 [113] 씨감자갤로그로 이동합니다. 01:50 13889 74
123797 [A갤] 일본 머슬걸 바에 간 한국인.jpg [335] ㅇㅇ갤로그로 이동합니다. 01:40 40916 366
123795 [미갤] 주식 도와달라는 딸이 귀찮았던 아빠.JPG [280] ㅇㅇ갤로그로 이동합니다. 01:30 39959 449
123791 [크갤] 크맥리) 어제 마신거 [48] 범한_pantos갤로그로 이동합니다. 01:10 7499 14
123787 [싱갤] 싱글벙글 워싱턴 형무소 고양이 프로그램.. [261] 냄새싫어갤로그로 이동합니다. 00:50 27322 187
123785 [카연] 남자,낚시 그리고 낭만 2 [36] 망상어갤로그로 이동합니다. 00:40 7264 42
123783 [야갤] "기시다, 尹에 위안부 합의 이행과 후쿠시마 수산물 수입 요구" [929] ㅇㅇ갤로그로 이동합니다. 00:30 20813 244
123781 [기갤] 명문대 출신 여배우가 은퇴한 이유 [274] ㅇㅇ(211.234) 00:20 41485 202
123779 [소갤] 119 좀 도와주세요 [194] ㅇㅇ(211.234) 00:10 21213 68
123777 [컴갤] 1960년대 초등학교 안전 포스터 ㄷㄷjpg [206] ㅇㅇ(203.228) 00:00 27205 377
123775 [주갤] 파키스탄 호주남자와 결혼한 한국여자 레전드..jpg [295] ㅇㅇ(220.70) 03.20 40355 873
123773 [야갤] 요즘 여초커뮤 발작버튼 ...JPG [1076] ㅇㅇ(1.223) 03.20 53496 573
123771 [디갤] 패션위크가 없는 패션위크날 일상사진 (12장) [20] 스캔갤로그로 이동합니다. 03.20 8398 14
123769 [특갤] 의용군들이 이근을 안좋게 봤던 이유 [439] ㅇㅇ갤로그로 이동합니다. 03.20 48603 342
123767 [야갤] 인류를 구원할 반출산주의 철학.jpg [1675] ㅇㅇ(39.7) 03.20 30985 400
123763 [피갤] 피자헛 이녀석들 병먹금 고수네 [489] 대학원생갤로그로 이동합니다. 03.20 42065 592
123761 [카연] 자살자의 원룸에서 살아남기manhwa [211] 찔찔이갤로그로 이동합니다. 03.20 30444 627
123759 [케갤] K-팝을 좋아한다는 미국 여고생의 정체 [199] ㅇㅇ갤로그로 이동합니다. 03.20 43311 398
123757 [해갤] 야구 꿈나무들의 고민을 듣고 깜짝 놀란 지진신.jpg [186] ㅇㅇ갤로그로 이동합니다. 03.20 20247 188
123755 [스갤] 오킹 여군 사건에 대해 알아보자 [491] ㅇㅇ(92.38) 03.20 49661 677
123753 [야갤] 부모가 이런 말을 한다면 무조건 독립해야한다 [854] ㅇㅇ갤로그로 이동합니다. 03.20 49274 522
123751 [카연] 나무위키ㄴ 11화 [49] 라시디간마갤로그로 이동합니다. 03.20 12503 178
123749 [싱갤] 싱글벙글 한국 남자 아이돌 역대 최대 크기 [1041] ㅇㅇ(220.89) 03.20 70324 681
123747 [야갤] 한국인의 허세 지적한 일본 매체...jpg [670] ㅇㅇ(211.234) 03.20 36731 684
123745 [스갤] 오은영이 말하는 게임중독 [752] ㅇㅇ갤로그로 이동합니다. 03.20 55081 515
123741 [야갤] 탭댄스좌..... 신규 컨텐츠.jog [145] ㅇㅇ갤로그로 이동합니다. 03.20 35936 200
123739 [놀갤] 신세계 정용진 부회장 일본 오사카 유니버셜 스튜디오 재팬 답사 인스타그램 [369] ㅇㅇ(185.54) 03.20 31470 198
123737 [싱갤] 싱글벙글 운동권 말기 시대 오타쿠의 삶 [410] ㅇㅇ갤로그로 이동합니다. 03.20 62590 620
123735 [야갤] 대륙의 지하철 난동녀 [689] ㅇㅇ갤로그로 이동합니다. 03.20 46183 499
123733 [디갤] 2023 FW 패션위크 사진 [95] NIKIKI갤로그로 이동합니다. 03.20 16439 53
123731 [상갤] 박성광 영화에 출연하겠다는 10년전 약속을 지켰다는 배우 박성웅 [396] ㅇㅇ갤로그로 이동합니다. 03.20 32818 167
123729 [미갤] 좀비 바이러스 "전염력 확인" 떴다 ㅋㅋㅋ [690] ㅇㅇ(115.95) 03.20 47372 347
123727 [야갤] 청년 취업 포기, 역대 최대 50만명 "그냥 쉬었다"...JPG [2601] 레츠고갤로그로 이동합니다. 03.20 46714 689
123725 [싱갤] 싱글벙글 과외 선생의 가스라이팅 [558] 레이퀀스뱅큐어갤로그로 이동합니다. 03.20 58685 746
123723 [보갤] 흑자 커뮤니티 글 올라옴 [247] ㅇㅇ(121.181) 03.20 40119 337
123721 [야갤] 념글간 69시간 포기못하겠다 기사..제목 수정 빤스런ㅋㅋ [658] ㅇㅇ(118.235) 03.20 32446 557
갤러리 내부 검색
제목+내용게시물 정렬 옵션

오른쪽 컨텐츠 영역

실시간 베스트

1/8

뉴스

디시미디어

디시이슈

1/2

힛(HIT)NEW

그때 그 힛

1/3