[📜일지] 좀비키 10. 비주얼 개발기

[뒷도(yeonghoey)]

오늘은 좀비키의 비주얼 개발 과정을 소개해볼께.

적당한 에셋 골라서 배치하고 캐릭터 움직이는 것부터 하던 완전 초창기.

이 때 느꼈던 것은 “에셋을 쓸거면 최소한 색깔은 바꿔야 한다.”는거였음.

그 이유는,

1. 여러 에셋팩을 섞어서 쓸 때 일관성이 깨지면서 아주 보기 싫게 됨.

2. 그대로 쓰면 에셋 쓴 티가 팍팍 나고, 진지하게 퀄리티에 신경 쓴 게임으로 느껴지지 않음.

(물론 이건 내 주관적인 느낌이야)

좀비키 만들기 전까진 픽셀아트도 공부했었는데,

그때 좋아하는 픽셀아티스트가 Vinik24라는 팔레트로만 작업했었거든,

그래서 텍스쳐링에 그 팔레트를 사용해보기로 함.

기대한거랑 느낌이 많이 다르긴 했는데,

이 스타일이 개성있게 느껴져서 마음에 들었어.

친한 서버 프로그래머 친구(서브웨이파이터 아트 담당했던)한테 보여줬더니

자기가 명령 터미널 및 텍스트 편집기 등에 사용하려고 만든 컬러 스킴을

게임 아트에 써보라고 농담삼아 던졌고, 나는 그걸 받음.

이게 그 친구의 컬러스킴을 사용한 모습인데,

다른 유명한 명령 터미널 컬러스킴을 적용해보는 것도 재밌을 것 같고 해서

이 아이디어를 좀 더 발젼시켜보기로 함.

명령 터미널 컬러스킴처럼, 색깔에 의미를 정하기로 했어.

4x4 텍스쳐에 한 픽셀당 색깔 하나씩 의미를 정하고,

스테이지마다 각기 다른 텍스쳐를 적용해서 색깔을 바꿔주는 방식.

처음엔 실제 명령 터미널 컬러스킴을 가져와서

게임에 적당히 어울리는걸 골라서 만들고 있었어.

베타테스트 때 보니까 컬러스킴마다

어떤건 너무 어둡고, 어떤건 너무 밝고, 이러다보니

특정 스테이지가 어둡다는 피드백이 엄청 많았음.

팔레트를 조금씩 수정하다가,

”이럴 거면 직접 컬러팔레트를 만들자”라는 생각에 이르게 됨.

무작정 고를 순 없으니 공부를 조금 했음.

배색 관련해서 알아보다가 이 두 책을 알게 됐는데, 기본 개념 잡기 아주 좋았음.

이건 오른 쪽 책에 나오는 그림인데, 이걸로 색조(Tone) 개념에 대해 배움.

쉽게 설명하자면,

우리가 흔히 아는 색의 속성 값들, 색상(Hue), 채도(Saturation), 명도(Value)는

서로 상호 연관관계가 있어서, 색상과 명도에 따라 가능한 채도 범위가 달라지거든.

그렇기 때문에 속성값들로 일관되게 색상을 고르기가 힘듦.

반면, 색조(Tone)는 인간이 어떻게 느끼는지에 따라 구분하는 방법이야.

그러다보니 직관적으로 비슷한 느낌을 주는 색깔을 고를 수 있음.

(나도 전문가가 아니니까 틀린 내용이 있을 수 있음. 더 자세한 내용이 궁금하면 직접 찾아보기)

오른쪽 스샷은 포토샵의 Color Wheel 도구고, 색조(Tone)를 선택할 수 있게 해줌.

삼각형 상에서 비슷한 위치에 있다면 비슷한 느낌을 주는 색이겠지?

이게 개발 과정에서 진짜 유용했음.

https://youtu.be/Dm24XyRPMwg

그리고 게임 비주얼에 관한 GDC 영상 하나 추천할께.

내가 가장 좋아하는 부분은 색상 대비(Contrast)를 효과적으로 사용하라는 조언이야.

위 스샷은 이 발표에서 나오는 예시인데,

캐릭터에 사용된 색깔들”끼리”, 배경에 사용된 색깔들”끼리”는

저대비(비슷한 채도)여서 통일감을 주고,

”캐릭터에 사용된 색깔들”과 “배경에 사용된 색깔들” 간에는

고대비 (채도가 확다름)를 줘서 확실히 구분되게 하며,

화면에서 중요한 사물인 캐릭터에 눈에 띄는 색깔들(고채도, 고명도)을 사용해서

확실히 눈에 띄게 만듦.

별거 아닌 예제 같지만,

”대비만 잘 사용해도 보기에도 좋고 사용자 경험도 직관적인 비주얼을 만들 수 있구나”

를 깨닫게 해줌.

공부한 이론들을 응용하기 위해 색깔들을 그룹지었어.

각 그룹에 속한 색깔들 끼리는 통일감있게 하고,

그룹 간에는 구분되게 만드는 것을 전제로 해서

컬러를 바꾸보면서 중요한 컬러가 묻히지는 않는지 등등을 계속 테스트하며

스테이지 테마와 다양성을 생각해서 컬러팔레트를 직접 만듦.

그렇게 만든 9개의 스테이지 별 팔레트.

각기 다른 팔레트를 사용한 각기 다른 스테이지들.

부록: 그림자 이야기

적은 색상만 쓰다보니 그림자가 너무 눈에 많이 띄고,

조명을 여러 형태로 사용해보고 있었는데,

그림자를 일관된 느낌으로 보여주기 힘들겠더라고.
뭉개지는 그림자도 어울리지 않는 것 같고,

그렇다고 하드쉐도우는 너무 각져서 더 이상하고.

시각적으로 좀 더 깔끔한 느낌이면 좋겠다,

이런 생각으로 그림자 설정을 엄청 많이 만져보다가

아예 빼는 방향으로 택하게 됐어.

시시콜콜한 이슈가 많았지만,
결과적으로 난 지금의 깔끔한 비주얼에 만족해.

정리

나는 Ape Out, Mini Metro 등, 미니멀한 게임아트를 무척 좋아해.

그러다보니 명령 터미널의 컬러스킴 방식을 써보겠다는 아이디어가

마음에 들어서 이를 발전시켰고, 좀비키의 비주얼을 완성했어.

제한된 색상만 사용한다는 아이디어는

아트가 서툰 나에게 컬러링을 0에 가까운 비용으로 해결하게 하면서도

독특한 아트스타일을 갖게 해줬다고 생각해.

물론, 이 아트스타일은 호불호가 아주 많이 갈리는 것 같아.

홍보 관련 게시물보면 거의 항상

“이런 아트 스타일 너무 좋다”는 댓글이 있는 반면,

확실히 대중적인 스타일은 아니니까, 한 눈에 확 인기를 끌긴 힘들었음.

끝.

여기까지 읽어줘서 고마워!

https://store.steampowered.com/app/1167150/Zombies_and_Keys/

벌써 10화인데 이젠 찜하기는 다들 했겠지?ㅋㅋㅋ

[익명(124.61)]

아따 작업 똘똘하게 잘하네..

[뒷도(yeonghoey)]

고맙습니다 선생님ㅋㅋㅋ

[잠둥이(fcrow)]

혼자작업을 하는데 저리 꼼꼼히...대단하군...

[뒷도(yeonghoey)]

서버개발자 하다 얻은 병이라고 생각함 ㅋㅋㅋ 사실 시간이 많이 걸려서 정리를 소흘히 할때가 더 많아... 이렇게 나중에 개발일지 쓰기엔 좋네

[ㅁㅂ(112.216)]

많이 배워갑니다.

[뒷도(yeonghoey)]

[태보미(taebomi)]

정말 찰떡같은 정리 항상 감사해오.

[뒷도(yeonghoey)]

[라면사리코드(zsw13579)]

우와 초창기 영상까지 있으신거보면 애초에 작업일지를 생각하고 다 정리를 하신건가요?? 개발기 다 봤는데 너무 멋지세요 본받고 싶네여

[뒷도(yeonghoey)]

감사합니다 ㅋㅋㅋ 개발일지를 쓰려던건 아니고 작업 목록 만들고 뭘 어떻게 했는지 정리하는 습관이 있어서 그동안 작성한 작업 노트에서 몇 개 발췌했습니다 ㅋㅋㅋ - dc App

[익명(119.194)]

우와 요새 고민하던건데 감솨합니다

[뒷도(yeonghoey)]

[익명(14.37)]

혼자서도 다 잘할수가 있구나.. 대단해..

[뒷도(yeonghoey)]

[겸손(rmforkwlrh)]

사회에서는 지식을 알고 있어도 기업노하우가 될 수 있어 그 한 문장 알려주기가 선뜻 어려움. 나와 대등하거나 밑인 라이벌이 그 한 문장 때문에 제치고 올라갈 수 있기 때문임. 그런데 이렇게 친절하게 설명을 해줄 수 있다는 건 대인배임. 아니 대인배'님'이심! 지식 뿐 아니라 사람으로서도 많이 배워갑니다!

[뒷도(yeonghoey)]

대인배씩이나ㅋㅋㅋ 좋게 봐주셔서 감사합니다! - dc App

[익명(14.51)]