brunch

You can make anything
by writing

C.S.Lewis

by 김동은WhtDrgon May 15. 2021

<게임의 공간 UI 설계 1>

김동은WhtDrgon.  20180815 #게임기획자하얀용

개요

이 글은 2018년 8월 15일. 다른 게임기획자에게 받은 질문에 대한 답변 형식의 글입니다. 

UI는 용이 돌아다니는 세계관 내부의 세계와, 게임을 조작하는 유저의 현실 세계 사이에 있는 현실적 공간입니다. 이 공간 역시 <메타버스 공간 구성 예시>라는 부분에 포함되어야 할 내용입니다.  1,2,3 형식으로 이전 글을 모은 후 통합 글을 새로 작성하려 합니다. 질문은 댓글에 써주시면 도움이 됩니다.   -210515 김동은 올림. 


질문

Q: 저는 최근 안드로이드 개발을 공부하는 친구와 함께 숨은 그림 찾기 게임을 만들어보고 있습니다.  맵에 숨어 있는 고양이를 찾아 터치하여 스테이지를 클리어하면 스토리가 진행되는 모바일 게임입니다. 

유니티를 사용할 예정이며 현재 스테이지 별 캐릭터와 스토리를 작성하는 단계에 있습니다. 궁금한 점은 스토리 작성 이후에 본격적으로 UI 기획을 시작할 텐데 레퍼런스 게임을 플레이하며 고려해야 할 요소를 체크하는 것만으로는 놓치는 점이 많다는 생각이 들었습니다. 

현업자 분들은 UI를 기획하실 때 어떤 방식으로 기획 요소를 정리하시는지 궁금합니다! 또 처음 게임 제작을 시작하는 사람들이 빠지기 쉬운 함정 같은 것이 있다면 알고 싶어요. 


답변 1 

A: 첫째 질문에 대한 답변이 두 개입니다. 

첫째 답변. 더 많은 레퍼런스 게임을 분석하길 권해드립니다. 특히 어떤 게임에 반해서 게임을 만들고 있다면, 그 수가 '레퍼런스 게임이 무색할 만큼' 많은 표본이 필요합니다. 그래야 레퍼런스 게임의 구성요소들의 필연성을 알 수 있습니다.   (참고 :  https://www.facebook.com/whtdrgon/posts/864309190268594 )  그리고 이제 이야기할 섹션/ 시퀀스/ 아웃렛에 따라 분해해보시면 될 것 같습니다.  


답변 2

둘째 답변. 

UI는 섹션 구분. 섹션별 아웃렛과 시퀀스의 구분, 보게 만들 정보의 배치 단계를 따릅니다. 


-섹션 구분- 

게임의 최상단(HUD라 부르는 영역)에 골드와 캐시가 고정적으로 표현되는 것을 너무 당연하게 받아들이지는 마세요. 과금 직결이고 자주 사용되고 저항감이 없기 때문이긴 해서 중요하긴 합니다만, 필수적인 것은 아닙니다.  게임에서 UI를 설계하기 위한 기본 단위를 나눠야 합니다. 로딩이 기준이 되기도 하고, 유니티를 사용하신다니 게임 씬이 기준이 되기도 하지만, 기획적으로 먼저 나눠놔야 합니다. 

 로딩이 되어도 동일한 섹션이 유지된다면 유저는 동일한 구역으로 인식합니다.  UI를 통해 유저는 심리적으로 '공간'을 이동합니다. 웹에서도 이론적으로 똑같은 브라우저 화면이지만 '다른 웹으로 빠져나가는 것'을 싫어하는 경우가 있습니다.  그래서 이 공간이동 개념을 기획자가 동일 게임 씬 내에서 섹션을 분리하여 이동한 느낌을 줄 수도 있어 로딩이나 게임 실행이 쾌적하다는 느낌을 줄 수도 있고, 로딩이 이루어져도 같은 공간에 있도록 느끼게 할 수 있습니다.  (하지만 이 경우 로딩이 불쾌한 게임 경험이 되니까 이때는 의도적으로 섹션을 구분해서 다른 공간으로 '이동'했다는 느낌. 즉 전통적 게임 기획에서 '방과 복도'라는 구분으로 심리적 안정감을 줄 수 있습니다. ) 


-섹션별 아웃렛과 시퀀스의 구분 - 

아웃렛과 시퀀스 둘 다 제가 임의로 쓰는 명칭이어서 설명이 필요할 것 같습니다. 아웃렛은 섹션으로 진입하거나 빠져나가는 순간을 말합니다. 이것도 시퀀스의 일종입니다만, 더 특별하게 관리되어야 합니다.  

 전투 섹션에 들어가는 진입부는 다른 섹션들의 이탈부와 연결됩니다. 이 부분에서 이탈을 유저에게 (어떤 식으로든) 알려줘야 합니다. 단계를 명백하게 구분할 필요는 없습니다만 페이드 아웃이라거나 뭐 그런 효과를 넣기도 하고, 팝업을 띄워서 마음의 준비를 시킵니다. 방에서 복도로 진입하는 순간이기도 하고, 'Boss Hallway'처럼 마음의 준비를 시키는 찰나의 시공간이 '존재'한다는 사실을 기획자로서 인식하고, 그 자리에 무언가 미장센을 배치해야 유저가 은연중에 콘텐츠의 풍만감을 느낍니다. 그래서 이 아웃렛을 중요한 순간으로 인식하고 대응해야 합니다.   

(참고 :  https://docs.google.com/spreadsheets/d/1-wZG1XTxCG17WXbrhAepqgEGgwRA3VPqj30Ye2oQodY/edit#gid=0  112번 boss hallway 참조) 


 -시퀀스와 보게 만들 정보-  

시퀀스는 섹션에서 일어나는 모든 순간들을 시간 축의 분기를 따라 나열한 것입니다. 일단 모두 리스팅 한 후 대부분을 방치합니다. 기획자의 의도에 따라 중요한 순간을 지정한 후 따로 관리합니다. 시퀀스의 진입로에 전조를 넣거나 UI 구성을 변경하기도 합니다.
 

예시) 시퀀스 15 '이곳은 보상을 받는 시퀀스이다.'  

시퀀스 15-1   '아주 좋은 보상을 받았다'  


 이 시퀀스마다 유저가 알아야 할 정보들이 있습니다. 그리고 당신이 얼마나 훌륭한 업적을 이뤘는지 칭송하죠. U R Great!!!! 

 시퀀스마다 UI정보들을 바꿔댈 수는 없기 때문에 주요 시퀀스들이 사용하는 정보를 고정적으로 배치하고, 순간적으로 필요한 것들을 그 이전 시퀀스나 해당 시퀀스에 배치하여 유저에게 알려줍니다.  섹션 전체에 지속적/고정적으로 전달해야 할 정보.  시퀀스 별로 예고해야 할, 등장해야 할 정보.  시퀀스가 끝나면 제거돼야 하는 정보.  그리고 UI는 정보만 있는 것이 아닌 유저의 '터치'를 받아야 하는 구성물들이 있지요. 이것도 시퀀스의 분기나 진행을 위해 존재하거나 반짝이거나 등장하거나 하는 식으로 명백하게 유저에게 전달될 수 있도록 해당 시퀀스의 상태를 구성하시면 됩니다. 


 -시퀀스 간의 호흡감-  

 그러고 나서 이제 시퀀스 별로 호흡감을 잡아야 합니다.  호흡감을 설명하기 위해 고스톱을 예로 들어보죠. 자 내야 할 패를 선택했습니다. 선택! 그리고 -호흡- 땋! -호흡- 쌓인 패를 한 장 뒤집어서! - 호흡- 땋! - 따닥! 결과!. 이 흐름이 호흡감입니다.  

 이때 (게임 개론 때 항상 말하는) '유저가 주인인 게임 장르'라는 특징이 나타나는데, 이게 단순히 유저가 진행한다는 의미가 아니라, 게임의 연출이 유저를 주인공으로 하고 있기 때문입니다.  유저가 느껴야 할 감정상태의 배경음과 효과가 화면에 나와야 합니다.

 고스톱 치다가 뒷패가 붙어 싸버렸을 때, 남이 따닥이 났을 때의 절망감 말이죠.   UI를 시퀀스로 구분하는 가장 중요한 이유입니다. 이 유저의 기대에 충족하는 호흡감을 위해 빈시간, 점진적인 강조, 이펙트, 사운드, 타격감 같은 정보의 등장 디자인과 효과가 모두 동원됩니다.   

 기존 게임의 UI들을 보실 때 그냥 보시는 것이 아니라 섹션, 시퀀스와 아웃렛이 어떻게 구성되어있는지 보시면 유저에게 보이지 않는 구성을 발견하시는데 도움이 되리라 생각합니다.  이렇게 UI를 설계하시면 됩니다.  참 쉽지요?  ---- 


 두 번째 질문과 답.

Q: 또 처음 게임 제작을 시작하는 사람들이 빠지기 쉬운 함정 같은 것이 있다면 알고 싶어요. 

A : 답변 많은 것들이 있지만 하나만 이야기하자면 '정합성의 함정'에 유의하세요.  기획자가 게임 세계관이나 시스템에 매몰되어 마치 이래야 할 것 같은 구성이 이루어지는데 거기에 너무 취해서 빠지게 되는 곳. 이게 고증이라고 부르기도 하고, 현실감이라고 부르기도 하는 '정합성의 함정'입니다. 

 아무리 리얼한 전투게임도 길바닥의 응급의료키트에 닿으면 치료가 됩니다. 이건 현실적으로 굉장히 부자연스러운 것이지만 게임 규칙에 따라 용인됩니다.   게임의 진행에서 게임기획자가 보호해야 하고 집중시켜야 할 감정상태에 집중해야 합니다.

 정합성과 자연스러움은 종이 한 장 차이지만, '정합성의 함정'에 빠진 것은 아닌지 유의한다면 쓸데없는 것을 효율적으로 기획하는 만행을 저지르진 않게 되겠죠.  왜 만행이냐면 아트와 프로그래머가 그 기획서를 보고 일을 하고, 유저가 게임을 하게 되거든요.  


김동은WhtDrgon.  20180815 #게임기획자하얀용

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari