디시인사이드 갤러리

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

갤러리 본문 영역

퍼즐 플랫포머 게임 제작 후기#5_1 PlayX4전시 후기+튜토리얼(1)

BIB갤로그로 이동합니다. 2024.05.30 10:10:02
조회 5403 추천 14 댓글 13

- 관련게시물 : 퍼즐 플랫포머 게임 제작 후기#4_1Pa!nt 게임 규칙

- 관련게시물 : 퍼즐 플랫포머 게임 제작 후기의 "Pa!nt"도 PlayX4 참가합니다!


PlayX4에 대한 간단한 후기

원래는 이 글을 지난 금요일에 올려 화, 금연재방식을 유지하려 했지만, 내 체력으로는 도저히 날짜를 지킬 수 없었다. 사실 이번 PlayX4를 통해서 우리는 정말 많은 요소들이 확인되었고, 고쳐야 할 방향성, 부족한 부분들을 알 수 있었어서, 개발적으로 정말 큰 전시회였다.

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73ce980fa11d028318bcc964a2550adfe9a320d1575e6db96cb46d886d3b36367156d018ab54d6ca32a82f391ad53ee5ca6d8b07b0af6c065938aa1



특히, 우리가 준비했던 색약, 색맹 이용자를 위한 모드가 얼마나 많이 어설프고 부족한지 자세한 피드백을 들을 수 있었고, (다시 한번 부스에 찾아와 주시고, 피드백을 주셔서 정말 감사합니다.) 우리 게임의 튜토리얼과 초반흐름의 부자연스러운 구간에 대한 확인을 할 수 있었고, 물리엔진 개선을 통한 조작감 개선이 유효했다는 것을 확인할 수 있어 너무 다행이었다.

이번 글의 주제는 그 내용들 중 튜토리얼에 대한 부분이다. 이 부분은 앞선 레벨디자인 부분과 가장 밀접한 주제이지 않을까 싶다.

현재 튜토리얼은 Steam, Stove모두 동일하며, 1년 정도 전에 개발이 중단된 모바일 버전은 이전의 모습을 간직하고 있다. 이번 PlayX4에서 사용되었던 튜토리얼은 Steam, Stove에 올라간 버전과 동일한 튜토리얼이었는데, 이번 행사에서 옆에 계셨던 분께서 아끼지 않고 많은 피드백을 해주셔서 튜토리얼을 비롯한 게임의 주요한 흐름을 개선할 방향이 정해지게 되었다. (이 글을 읽게 되실지는 모르겠지만, 현장에서도 말씀드렸었지만, 정말 감사드립니다. 덕분에 더 나은 게임을 만들 수 있을 것 같습니다.)

그래서, 새로운 튜토리얼을 다시 만들게 된 기념으로, 지금까지의 우리 게임의 튜토리얼의 변천사와 앞으로 유의하여 개발해 나가려는 방향성등을 정리해 볼까 한다.

(혹시 지금의 튜토리얼이 궁금한 사람들은 아래의 링크에서 데모를 플레이해봐도 좋을 것 같다.)

https://store.steampowered.com/app/2516270/Pant/

튜토리얼에 대해서

내가 이전에 보았던 어느 글에서는 가장 좋은 튜토리얼은 튜토리얼이 없는 튜토리얼이었다. 설명을 붙여보자면, 튜토리얼임을 시스템적으로 나타내기보다는, 자연스럽게 나타내고, 이용자가 자연스럽게 받아들이도록 만든다는 것이다. 나는, 이전에 이 문장을 그대로 실천하려 했었고, 5개 정도의 스테이지에 나누어서 규칙을 하나씩 체험하고, 시행착오를 겪으며 이해할 수 있도록 만들려고 했었다.

단순히 스테이지로 구성된 튜토리얼

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73ce980fa11d028318bcc964a2550adfe9a320d1575e6db96cb46d886d3b36367156d018ab54d6ca32a82f391ad53ee50fbdcbd2d59fec0651c9505



(좌측 상단부터 좌측순서대로 1,2,3 우측하단부터 4,5 순서이다)

각 스테이지는 각각의 내용을 전달하고자 했었다. 그러나, 실제로 플레이해 보았을 때, 이용자들은 핸드폰을 잡는 방법에서부터 많이 낯설어했으며, 제대로 된 "설명"이 없는 튜토리얼에서 이용자들은 규칙을 "인지"할 수 없었고, 게임의 버그나, 게임의 이상함으로써 이용자들에게 받아들여졌다.

이 단계에서 우리가 알 수 있었던 부분은, 우리 수준에서는 이용자가 시행착오를 통해서 불편함을 겪었을 때, 이것이 규칙임을 설명하기 위한 "설명"을 반드시 할 필요가 있다는 점이었다.

글을 통한 설명이 추가된 튜토리얼

이후에 우리가 한 조치는 "설명"을 추가하는 것이었다. 이때, 이용자들이 글을 안 읽는 상황을 막기 위해서, 글을 띄우고 화면을 터치하기 전까지는 움직임을 잠갔었다.

이 방식도 좋은 결과를 거두지 못했었는데,

1. 이용자는 화면을 터치하고 있으며, 튜토리얼에서는 특히 "스킵"하고 싶어 하며, 빠르게 뒤로 가고 싶어 대기화면이나, 로딩 화면에서 잦은 터치가 발생했다. 이 터치들은 게임 입장 시 나오는 글들을 빠르게 껐으며, 이전과 동일한 문제를 일으켰다.(물론 이전과는 다르게 차분히 글을 모두 정독하는 이용자들이 있었으니, 이전보다는 확실히 나아진 것은 맞다.)

2. 게임의 흐름을 끊는 안내는 이용자의 피로감을 높였다. 내가 보았던 이용자들은 가능한 끊김 없이 게임을 이어서 많이 하고 싶어 했는데, 이러한 특성상 강제로 안내를 하는 튜토리얼은 많은 피로감을 만들었다.

(단적으로 나도, 게임을 할 때 튜토리얼의 모든 글을 빠르게 스킵하며, 안 읽고 하는 사람이니, 내가 할 땐 몰랐지만, 제작자로서 겪어보니 신기한 부분이었다.)

이용자들은 빨리 재미있어지기를 바란다.

사실 너무나 당연한 말이다. 나도 게임을 할 때 초반 컷 신은 흥미로운 내용이 아니면 항상 바로 스킵하며, 스킵 불가능한 게임에는 엄청나게 불평을 하니 말이다. 다만 이러한 당연한 특징은 정작 직접 게임을 만들 때는 인지하지 못했다. 이러한 이용자의 특성은 "조금이라도 우리 게임을 많이 즐겨줬으면 좋겠다"라는 희망사항에서 스테이지들의 잠금을 걸지 않았던 상황과, 스테이지 형식의 튜토리얼이 합쳐져 다양한 문제를 일으켰었다.

1. 이용자가 초반에 재미없다고 느낀 경우

당시, 스테이지 형식으로 6개의 스테이지를 가야지 튜토리얼이 끝나고 재미있어지던 구조의 게임을 플레이하던 많은 사람은 4번째 스테이지쯤에서 너무 쉽다며, 게임을 꺼버렸었다.(이 부분은 사실 물리엔진의 속도가 너무 느려서 이용자가 각 스테이지를 클리어하는데 걸리는 소요시간과 스트레스가 컸기에 참을 수 있는 스테이지가 짧았던 것도 있는 것 같다. 이 부분은 지금에 와서는 튜토리얼의 개선뿐만 아니라 물리엔진의 개선이 더해져서 보다 많이 나아진 것 같다.)

2. 이용자가 재미를 찾아 나서는 경우

스테이지들의 잠금을 없에두었던 결과 이용자들은 튜토리얼 도중에 이탈해서 바로 최고 난도로 직행했었다. 그 결과 많은 유저는 가장 뒤의 스테이지에 도전했고, 규칙과 새로운 장치들에 적응하지 못해 많이들 어려워했었다.(이를 막겠다고, 각 챕터별 1 스테이지만 열어두기도 했지만, 이번에는 후반 챕터의 기믹을 설명하는 1 스테이지만 하고, 후반 챕터가 너무 쉽다는 피드백을 받았다.(눈앞에서 말한 대로 플레이하고, 피드백해 주셨었다))

하나의 큰 스테이지로 제작

앞선 이미지들을 보면 알겠지만, 앞선 튜토리얼들은 모바일버전에서 개발되던 당시에 제작되었던 튜토리얼이다. 이후 우리는 몇 가지 이유에서 PC로 개발을 이어가게 되었는데, 이때 정말 많은 시스템이 대체되었다.

그 과정에서 바뀐 것 중 하나가 튜토리얼이었는데, "LIMBO"를 하고 싶었던 내가 조금은 무리를 부려서 만든 하나의 스테이지에서 서사를 부여하고 동기를 부여하는 방식의 튜토리얼이었다. 이 튜토리얼은 6개의 나누어진 스테이지를 하나의 스테이지로 이어놓은 것이었다. 여기서 추가적으로 내 23년을 모두 쏟아부었던 "스토리"에 대한 욕심 때문에 특히 이런 형식을 취했었다.

이때 내 생각은 "PC/Console"게임이라면 그에 상응하는 볼륨과 콘텐츠여야 한다라는 생각에서 스토리를넣으려 했었지만, 이거는 큰 착각이었다. Pa!nt가 이미 퍼즐게임인걸 모르고 한 말이었다.

아무튼, 이렇게 제작된 튜토리얼은 다음과 같았다.

흘러가는 글의 배치

여기서, 캐릭터가 특정 영역에 닿을 때마다, 배경과 화면 하단에 텍스트가 등장하도록 제작을 했었다.

이 방식은, 글을 안 읽는 이용자와 글을 읽는 이용자 모두 읽을 수 있도록 하게 하기 위해서 제작한 방식이었다. 배경에 글을 배치하는 방식이 좋았던 점은, 이용자가 실제로 해당행동을 해야 하는 위치에 설명을 배치하여 보다 직관적으로 전달할 수 있다는 점이었다.


오늘도 저는 분량 조절에 실패하여, 이어지는 5_2 글에서 PC버전에서 겪은 시행착오와 PlayX4에서 얻은 피드백을 다룹니다.
다음글 보기



퍼즐 플랫포머 게임 제작 후기#5_2 튜토리얼(2)



죄송합니다.. 오늘도 글 분량 조절에 실패하여 글을 나눠서 올립니다.ㅠㅠ 본 내용은 앞선 글에서 이어집니다.
앞선글의 링크


플레이어의 흐름, 예외를 차단하고 강제하는 게임 흐름

우리 게임에서 튜토리얼을 짤 때 가장 힘들었던 부분은 퍼즐 게임의 성격 상, 이용자가 실수하였을 때 실수를 돌이키는 "되돌리기 기능"에 대한 튜토리얼이 가장 어려웠다.

이 부분을 만들 때, 내가 가장 고심했던 부분은 "퍼즐게임스러운 되돌리기"였다. 즉, 플레이어가 머리를 썼으면 실수하지 않고, 되돌릴 필요가 없었다는 "예상"을 부여하면서 동시에 되돌려야 하는 상황이 되도록 만드는 것이었다. 이 부분은 앞선 레벨디자인 글에서 나왔던 이용자들의 관성들을 활용해서 실수를 할 수 있도록 유도할 수 있었다.

내가 만든 "깰 수 있었을 것 같지만 모두가 실수하는 레벨"은 실제로 알면 바로 지나갈 수 있는 "깰 수 있는 스테이지"였으며, 10명 중 9명은 실수를 하는 "거의" 모두가 실수하는 레벨을 만드는 데 성공했다.

그러나, 세상은 90%를 허락할 정도로 쉽진 않았다. 일반적인 스테이지라면 상관이 없었겠지만, 튜토리얼은 플레이어가 플레이하는 과정에서 반드시 필요한 것들을 이해시키고 안내하는 곳이다. 단 1명이라도 안내받지 못하는 일은 생겨선 안 됐다.

그 결과 우리는 퍼즐로선 해선 안 되는 "깰 수 없는 스테이지"를 제작해서 튜토리얼에 넣고, 플레이어가 선택을 되돌리는 순간, "깰 수 있는 스테이지"로 바뀌도록 제작했다.

(좌: 되돌리기 전으로 반드시 노란색이 되어야 함, 우: 되돌린 후, 초록색인 상태로 이어서 갈 수 있는 발판이 생김)

이 부분은 아직까지도 미련이 남아 고민 중이긴 하지만, 확실한 것은, 이용자가 "튜토리얼"을 모두 끝까지 플레이했음에도 다른 사람과 경험한 내용이 달라지면, 이후에 이것은 큰 문제가 된다는 것을 다양한 행사를 통해서 알게 되었다. 특히 그것이 게임의 주요한 기능이라면 더욱이 말이다.

(나중에 부족한 경험을 메꿀 수 있는 친절한 가이드가 있다면 다를 수 있을 것 같아, 나중에는 "깰 수 있었을 것 같지만 모두가 실수하는 레벨"에 다시 한 번 정말로 도전해 볼 것 같다.)

플레이어의 흐름을 적절히 유도하는 직관적인 안내

해당 구간은 우리 게임 내에서도 가장 어려운 움직임인, 수직으로 위에 있는 플랫폼에 올라가는 방법이다.

이전에는 위에서 처럼 보이는 화살표가 없었다. 그렇다 보니, 이용자들이 올라갈 수 있음을 알기 힘들었다. 이로 인해서 많은 이용자들이 어려움을 겪었는데 이때 내가 의도한 플레이는 "단 1가지의 정답밖에 없다면 플레이어는 그 정답을 시도할 것이다"였는데, 실제 반응은 "1가지 정답을 모르는 플레이어는 게임을 꺼라"라는 뜻이 되어있었다.

이후, 이 부분은 화살표를 사용해 표시했고, 이전대비 많은 이용자가 순식간에 의미를 이해하고 플레이할 수 있게 되었다.(화살표가 없었을 때는 10명 중 3명 정도만 정답을 알았으며, 넣은 후에는 7명 정도로 늘었으나, 튜토리얼이라는 점에서 이것은 불합격이다.)

이 부분에서 내가 했던 실수는 휘어있는 화살표를 예쁘게 그릴 자신이 없었고, 아트를 괴롭히고 싶지 않단 이유에서 하나의 화살표를 두 번 배치했는데 이것이 많은 혼란을 만들었다. 실제로 이용자들 중에서는 좌측 상단에 있는 녹색 블록에 올라갈 수 있다는 오해를 일으켰었다. (이 부분은 추후에 애니메이션으로 대체할 것으로 계획 중이다.)

반복적인 안내

내가 지금 생각하고 있는 올바른 튜토리얼은 누구든 100% 따라올 수 있어야 한다는 점이다. 이를 위해서는 단순히 한번 보여주고 끝내면 안 된다는 점 또한 무척 중요한 것 같다. 나는 평소에 성격이 급해서 한 번의 설명조차 제대로 읽지 않지만, 그 탓에 일부 게임에서 방어기능이 있는지도 모른다던가, 스킬이 있는지도 모른 체로 게임 중반까지 가는 경우가 꽤나 많다. 이처럼 플레이어 중에는 한번 정도 튜토리얼에서 버튼을 눌르고 시키는 대로 플레이를 해줄 수는 있지만, 플레이어는 아직 그것에 익숙해지지 않았을 수 있다.(아니면 나처럼 보고도 까먹을 수도 있다.)



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

추천 비추천

14

고정닉 5

5

댓글 영역

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

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

갤러리 리스트
번호 제목 글쓴이 작성일 조회 추천
설문 가족과 완벽하게 손절해야 할 것 같은 스타는? 운영자 24/06/24 - -
공지 실시간베스트 갤러리 이용 안내 [1835/2] 운영자 21.11.18 5907222 439
243149
썸네일
[싱갤] 싱글벙글 상대방의 인생을 바꾼 도발
[113]
싱벙갤완장에게사과드립니다갤로그로 이동합니다. 01:55 20179 69
243147
썸네일
[기갤] 훈련병 사망 사건 여파, 바뀌는 군대 훈련 시스템.jpg
[620]
ㅇㅇ갤로그로 이동합니다. 01:45 15968 182
243145
썸네일
[주갤] 르노 코리아 유튜브 공식계정 민심 근황
[334]
ㅇㅇ(121.88) 01:35 22559 471
243143
썸네일
[싱갤] 싱글벙글 유일하게 남은 히틀러 벙커 마지막 사진
[124]
ㅇㅇ(118.223) 01:25 28507 75
243140
썸네일
[이갤] AV 여배우.. 한국 사랑 ..jpg
[232]
3dd(121.183) 01:06 27455 231
243137
썸네일
[기갤] 머리 위에 맥주 9잔…유로 대회에 뜬 균형잡기 달인.jpg
[53]
ㅇㅇ갤로그로 이동합니다. 00:55 11111 31
243135
썸네일
[군갤] 육군 ㅇㅇ사단 사령부 정문, 초병 없고 근무자 수면중
[644]
grimoire갤로그로 이동합니다. 00:45 24805 231
243131
썸네일
[싱갤] 싱글벙글 강호동 도발한 이수근
[121]
ㅇㅇ갤로그로 이동합니다. 00:25 30760 202
243129
썸네일
[성갤] 김환진 성우님 인생 캐릭터 연기
[77]
성갤러(221.149) 00:15 9955 54
243127
썸네일
[자갤] 실베갔던 맥라렌 타는 06년생 금수저 고등학생의 정체..
[696]
ㅇㅇ(211.234) 00:05 29429 266
243125
썸네일
[야갤] 여성가족부 최근 정치권또움직였다
[507]
ㅇㅇ(121.65) 06.28 20763 514
243123
썸네일
[드갤] 강남 : 드래곤볼은 Z까지만 인정한다
[239]
ㅇㅇ(185.80) 06.28 16955 119
243121
썸네일
[기갤] 바퀴 달린 아파트…100년 된 건물 통째로 이사.jpg
[119]
ㅇㅇ갤로그로 이동합니다. 06.28 17142 75
243119
썸네일
[야갤] 러시아 여자 : 러시아 여자가 피해야하는 한국 남자
[563]
ㅇㅇ(58.29) 06.28 26427 269
243117
썸네일
[싱갤] 훌쩍훌쩍 성형으로 셀프 와꾸박살낸 헐리웃 여배우..jpg
[236]
ㅇㅇ(122.42) 06.28 32886 161
243115
썸네일
[키갤] 윤석민한테 조언을 구한 안우진
[97]
내손을잡아갤로그로 이동합니다. 06.28 15868 313
243114
썸네일
[판갤] 동탄 경찰서 새 입장문 떳냐 !!!!
[585]
시베리아다람쥐갤로그로 이동합니다. 06.28 25643 685
243113
썸네일
[기갤] 모델 한혜진 별장에 침입한 중년들이 한 말
[351]
긷갤러(154.47) 06.28 24992 284
243109
썸네일
[유갤] 김희선 차에 있던 말린 과일 10개 먹고 지릴뻔한 류승수
[223]
ㅇㅇ(45.84) 06.28 23007 61
243107
썸네일
[인갤] 바닐라웨이소속원의 슈팅게임
[44]
더블알발음은아르르갤로그로 이동합니다. 06.28 9747 32
243105
썸네일
[싱갤] 훌쩍훌쩍 지역차별..
[394]
ㅇㅇ(106.101) 06.28 21529 56
243103
썸네일
[기갤] 밧줄로 ATM기 통째로 훔친 강도들.. 걸린 시간 2분.jpg
[73]
ㅇㅇ갤로그로 이동합니다. 06.28 15929 51
243100
썸네일
[카연] 해골전령이야기 5화.manhwa
[48]
kain_y갤로그로 이동합니다. 06.28 8771 105
243098
썸네일
[이갤] 공화춘+간짬뽕 섞어먹어본 박명수 반응
[351]
슈붕이(172.98) 06.28 29940 271
243096
썸네일
[이갤] 원조 학벌주의인 나라 영국...jpg
[459]
설윤아기갤로그로 이동합니다. 06.28 24661 166
243094
썸네일
[싱갤] 싱글벙글 장범준이 그린 만화
[156]
ㅇㅇ(112.133) 06.28 21167 36
243092
썸네일
[디갤] [상반기결산] 사진첩열고 보이는거 일단 6장
[15]
ㅃㄹㄹ갤로그로 이동합니다. 06.28 6525 26
243090
썸네일
[프갤] [스압] 브로큰 연대기 19화- Obsolete MULE
[40]
조커스팅아재갤로그로 이동합니다. 06.28 9278 87
243086
썸네일
[의갤] 대장암 발병률을 높인다는 음식
[568]
당돌갤로그로 이동합니다. 06.28 34211 107
243084
썸네일
[U갤] 타격가들은 일진, 그래플러들은 찐따라는 유튜버
[490]
U갤러(106.101) 06.28 26237 158
243082
썸네일
[싱갤] 복싱 레슨 수업료별 차이점 ㅋㅋ
[180]
ㅇㅇ(211.193) 06.28 30348 161
243080
썸네일
[헬갤] 교통사고 당한 김계란이 제일 아쉬워하는 것
[183]
헬갤러(149.36) 06.28 33684 72
243078
썸네일
[야갤] 뉴진스팬한테 폭격당하고 소신발언하는 유튜버
[409]
야갤러(211.234) 06.28 40142 822
243076
썸네일
[루갤] 플라이 다녀옴
[40]
휘릭쿤갤로그로 이동합니다. 06.28 7860 22
243074
썸네일
[기갤] 학교가 폭삭 무너지면, 학교 안 가도 되는 걸까?.jpg
[149]
ㅇㅇ갤로그로 이동합니다. 06.28 23006 76
243072
썸네일
[싱갤] 싱글벙글 젓가락으로 학교 외벽 무너뜨린 썰
[305]
운지노무스케갤로그로 이동합니다. 06.28 40225 241
243070
썸네일
[위갤] 직접 진을 증류해서 라모스진피즈를 만들어보자
[65]
Sins갤로그로 이동합니다. 06.28 8977 67
243068
썸네일
[이갤] 한 병에 29만원짜리 맥주 리뷰한 맛상무.jpg
[306]
감돌갤로그로 이동합니다. 06.28 28569 103
243064
썸네일
[기갤] "친구와 여행 후 손절 당했어요".jpg
[466]
ㅇㅇ갤로그로 이동합니다. 06.28 36877 241
243063
썸네일
[자갤] 르노 코리아의 오로라 프로젝트
[570]
ㅇㅇ(106.243) 06.28 27081 745
243061
썸네일
[싱갤] 싱글벙글 스위스 시계산업을 통째로 삼키려는 프랑스.JPG
[357]
ㅇㅇ(115.137) 06.28 26760 145
243060
썸네일
[이갤] '중국 간첩설' 필리핀 시장, 결국 중국인 맞았나...
[351]
ㅇㅇ(185.206) 06.28 19843 316
243058
썸네일
[알갤] 이희진 결혼식 사회봤다더니 박성광 똑똑하네
[287]
ㅇㅇ갤로그로 이동합니다. 06.28 30684 172
243057
썸네일
[중갤] 배그 뉴진스 콜라보 사건 찐찐막.jpg
[788]
간간히한다갤로그로 이동합니다. 06.28 35744 322
243055
썸네일
[1갤] 뿌중이한테 모든 죄 뒤집어씌우기로 결정한 나거한 언론
[229]
을붕이(220.76) 06.28 18093 360
243054
썸네일
[싱갤] 존경존경 18살에 입대한 참전용사 할아버지
[183]
운지노무스케갤로그로 이동합니다. 06.28 16226 182
243051
썸네일
[부갤] 일본 지열별 최저임금 다르게 한 결과
[538]
ㅇㅇ(149.34) 06.28 30885 307
243049
썸네일
[이갤] 똥트남에서 화장실 불법촬영 확산
[291]
배그린갤로그로 이동합니다. 06.28 27674 154
243048
썸네일
[야갤] 임신한 여자연예인에게 결투신청을 받은 남자 유튜버
[1124]
엄마팰코리아갤로그로 이동합니다. 06.28 43263 580
갤러리 내부 검색
제목+내용게시물 정렬 옵션

오른쪽 컨텐츠 영역

실시간 베스트

1/8

뉴스

디시미디어

디시이슈

1/2