[인디게임 개발일지 #4] 아트워크 대공개, 플랫포머 게임의 배경은 어떻게 그릴까? (배경편)

0️⃣ 결국 분위기는 배경!

 이전에 사랑스러운 주인공의 2D 애니메이션을 공개했던 것, 기억나는가! 설마 아직도 안 보았다면 아래 게시물을 보고 오자. (정신 없이 움직이는 머핀 gif 썸네일이 아주 킹 받긴 하지만 실제로 보면 정말 귀엽다.)

[인디게임 개발일지 #3] 아트워크 대공개, Spine 없이 한땀한땀 움직이는 2D 애니메이션! (캐릭터편)

 

 게임의 주인은 '캐릭터'라면 분위기를 좌지우지 하는 것은 '배경'이라고 생각한다. 배경이 어떠냐에 따라 그 게임, 애니메이션, 영화의 분위기가 다른 것처럼 말이다. (개인적으로 배경이 정말 예뻤던 게임은 파이널 판타지14, 스타일리쉬하다고 느꼈던 건 젠레스 존 제로가 있다.) 게다가 최근 연구에 따르면 게임에서 자연 생활을 간접 경험하는 것만으로도 정신건강에 도움이 된다고 한다. 이 기사를 접한 뒤로 우리 게임의 자연물 배경을 더 사람들의 심상을 울릴 수 있었으면 좋겠다고 생각했었다. 해당 기사는 링크를 첨부해두니 궁금하면 읽어보자!

 

 

1️⃣ 플랫포머 게임 배경 그리는 법

 배경 그리기 전에! 설마 레벨 디자인을 완성하지 않고 아트워크 작업을 시작하는 사람은 없을 것이다. 물론 거시적인 레벨 디자인은 애진작에 마쳤었지만 좀 더 디테일하게 레벨 디자인을 하는 건 피그마에서 꾸준히 데벨롭을 했었다. 게다가 직접 플레이하지 않고 피그마에서만 구성하는 것은 왠지 탁상공론에 지나지 않는다고 생각해서 피그마에서 구현한 레벨 디자인을 토대로 유니티에서 직접 이동하며 구성한 것이 좀 더 컸던 것 같다.

레벨 디자인

---

 아무튼! 플랫포머 게임 배경을 그리는 데에 있어서 많은 고민이 있었다. 우선 깨지지 않는 배경 아트워크가 필요한데 그렇다고 너무 크게 그리자니 용량을 많이 차지한다는 단점이 있었다. 가뜩이나 많은 이미지를 넣어야하는데 과연 배경은 어떤 사이즈로 작업하는 게 좋을까?

 우리는 적절한 타협안으로 1920px × 1080px으로 작업했다.

 

 가장 널리 사용되는 1920x1080 (16:9 비율) 해상도를 기반으로 했다. 조금 더 큰 사이즈로 작업하고 싶었지만 리소스 용량 문제도 있었고, 작업하는 아이패드가 왠지 못 버틸 것 같다는 못 미더운 마음에... 그냥 일반적인 해상도로 했다. 하지만 작업하면서 넣어보고 조금씩 수정했었으니 이 글을 참고하는 사람이 있다면 일단 일반 해상도에 그려보고 변경해보는 걸 추천한다.

 

 그리고 모든 리소스의 재사용성을 고려하고, 유니티 단에서 적절히 구성할 수 있어야했으므로 모든 배경을 모듈화 하여 작업했다.

 

• 원경: 전체적인 분위기를 구성하는 배경
  • 카메라를 따라 움직여야 하므로 좌우가 이어질 수 있는 Horizontal Repeat 패턴으로 작업
  • 카메라가 멀어질 수 있음을 고려하여 1080px에 딱 맞춰 그리면 잘려보일 수 있음
• 중경: 캐릭터와 상호작용할 수 있는 오브젝트
  • 캐릭터와 같은 선상에 위치한 꾸미기 오브젝트 등 (나무, 나무, 조명 등등)
  • 캐릭터가 직접 상호작용하는 실질적인 오브젝트 (사다리, 엘레베이터, 의자 등등)
• 근경: Parallax 효과를 통해 깊이감을 줌으로서 몰입도를 높이는 배경
  • 초근경을 둠으로서 한층 더 깊이감 있는 분위기를 구성
  • 근경 애니메이션이 들어가면 퀄리티 상승
• 바닥: 캐릭터가 밟고 다니는 타일
  • 캐릭터가 밟고 다니는 바닥으로, 이 또한 타일 반복 패턴으로 작업하여 재사용성을 고려
  • 적당한 변주를 주지 않으면 자칫 지루해보일 수 있음

  이러한 원칙을 가지고 루시가 열심히 작업해주고 있다. 그리고 당연하게도 모든 걸 2D 아트워크로 직접 그리는 게 아니라 Unity Assets를 이용하여 추가적인 이펙트 (안개, 빛, 사운드 등) 를 구성 중에 있다. 최종 작업물은 아래에 영상을 첨부할테니 끝까지 읽어보자!

 

 

2️⃣ 우리들만의 숲 레퍼런스 찾기!

 그리고 배경을 그리기 위해서는 해당 맵의 키워드와 무드보드가 필요하다. 서리속삭임의 숲의 컨셉 키워드는 이미 세계관을 짤 때 정해뒀었지만 그래도 이미지화 하는 과정에서 핵심 키워드만 추려냈다.

 

안개 / 새벽 / 침엽수림

 

 그렇게 저 3개의 키워드에 충실하여 나와 루시가 열심히 찾아 구성한 레퍼런스 이미지를 루시가 한 눈에 보기 편하도록 깔끔하게 정리했다! 참고한 이미지, 그리고 해당 이미지를 토대로 추려낸 컬러 팔레트까지! 그림을 그리는 사람들이라면 이 과정이 필수라는 것을 당연히 알 수 있을 것이다. 내가 열심히 머핀을 그리는 동안 루시는 열심히 배경을 그렸다.

 원경을 작업하는 모습! 원경은 세로 값이 1080px이면 딱 잘려보일 수 있으므로 조금 더 여유있게 작업하는 걸 추천한다.

gif 압축 과정에서 많이 깨져보인다. 양해 부탁한다...ㅠ

 바닥과 돌을 그리는 과정이다! 해당 오브젝트들은 중경으로서 캐릭터와 같은 선상에 있으므로 원경보다 깨졌을 때 티가 훨씬 많이 난다. 이 점을 고려하여 넉넉한 사이즈로 작업하기를 추천!

 

 

3️⃣ 배경 아트워크 전격 공개

 백문이불여일견이라고 당장 아트워크부터 한 번 보자! 우리가 초기에 배경을 넣어보며 작업했던 그레이박스 기반 영상이다.

 늘 까만 배경에서만 보다가 원경만이라도 적용된 것을 보고 감격을 금치 못했었다. 드디어 우리 게임의 가닥이 보이는구나! 하고 행복해 했던 것도 엊그제 같은데... 벌써 일주일도 넘게 지났다. 일주일만에 이런 결과물도 빠르게 뽑아내는 우리 팀원들 덕분에 정말 행복하다!

 앞서 말한 모듈화 중 하나인 형태. 아직 중경 오브젝트들은 작업하지 않았고 원경, 초근경, 그리고 바닥 타일 정도로만 작업에 들어갔다. 그리고 중경 오브젝트들은 따로 추려내서 시트로 정리해두었다.

 이렇게! 또 다른 이야기지만, id 이름도 예쁘게 잘 지어주자. 개발자들이 편하도록...! 협업의 기본 중 하나라고 생각한다. 아무튼 중경 오브젝트까지 완성된 모습을 보려면 시간이 조금 더 걸릴 것 같지만... 데모 버전을 공개할 때 직접 체험해보는 것을 목표로 해보겠다!

 

 

4️⃣ 이펙트까지 적용한다면?!

 아무리 평면 그림을 레이어링 하고, 2D 애니메이션으로 구성을 한다고 해도 추가 이펙트를 넣지 않으면 그 효과를 극적으로 끌어올릴 수가 없다. 루시가 작업해둔 브랜치와 별도로 마크가 맵의 분위기를 극대화 할 수 있는 이펙트를 넣어주었다! 안개, 나비, 몽환적인 빛 등등! 

맵스포를 최대한 자제하기 위한 편집

 어떤가...!! 정말 아름답지 않나?! 내가 원하던 분위기가 그대로 구현된 것을 보고 정말 꿈이 이루어진 것 같았다. 어슴푸레한 새벽의 차가운 공기와 안개! 내 머릿속엔 없었던 저 푸른빛이 오히려 배경에 들어가며 더더욱 서리속삭임의 숲의 분위기를 살려준 것 같아서 매우 잘 어울린다. 이대로 쭉쭉 작업에 들어가기만 한다면 데모버전까지의 완성은 일정 안에 무리 없이 완성할 수 있을 것 같다. (아마도...!)

 우리 팀 모두가 열심히 작업해주고 있고 열심히 도와주는 친구들도 있는 덕분에 제법 수월하게 흘러가고 있다. 2026년의 첫 시작이 매우 좋은 흐름이다!