[📜일지] Frostory - 로그 뷰어

[특수한발가락(seobyeongky)]

안녕하세요!

오늘은 저희 게임의 로그 뷰어에 대해 써보려고 합니다.

현재 저희 게임의 로그 뷰어는 이런식으로 생겼는데요.

최초의 원격 로그는 Heroku를 사용해 단순히 텍스트를 남기는 것이었습니다.

이 단계에서는 크게 유용하게 쓰이지는 않았고, 단순히 공모전에 게임을 출품한 이후 로그가 찍힌걸 보면서 재밌어하는 수준이었습니다.

꽤 오랫동안 그냥 이대로 쓰고있다가 레벨 분석을 위해 로그를 시각화하는것에 대해 생각하게 됐을 무렵 Firebase에 대해 알게 됐습니다.

공짜 티어 계정에도 상당히 많은 트래픽과 많은 기능들을 제공해주더라구요.

(Heroku가 무료로 제공하는 로그 시스템은 며칠만 지나도 그냥 삭제되고 기능도 별로 없습니다)

이걸 사용해서 로그를 제대로 기록해보자고 생각하게 됐고, 어떻게 시각화를 할지 생각해보았습니다.

저희 게임은 고정된 레벨을 가진 게임이고, Wave라는 이름의 작은 단위의 레벨이 모여 하나의 큰 레벨(스테이지)를 구성하게 됩니다.

그리고 Wave들은 Portal을 통해 서로 연결되어있습니다.

자연스럽게 Wave와 Portal 단위로 정보를 표시하면 좋겠다고 생각했습니다.

그럼 이제 Wave와 Portal에 대한 데이터가 필요한데, 로그 뷰어에 맵 데이터를 하드하게 박아놓으면 레벨이 변화하거나 추가될 때마다 유지보수를 해야할 것입니다.

그래서 로그를 바탕으로 뷰어 내에서 실시간으로 맵 데이터를 생성하는 방향으로 결정하게 되었습니다.

맵 데이터는 Wave를 정점으로, Portal을 간선으로 하는 그래프라고 할 수 있습니다.

그래서 그래프를 어떻게들 그리는지 구글링을 해봤습니다.

그런데 굉장히 방대하고 깊이있는 분야더라구요..

그래프 그리기에 대한 대학 수업자료같이 생긴거 몇 개 보다가 머리가 아파서 어짜피 저희만 볼거니 적당히 그리기로 했습니다.

보기 편하게 기본적으로 오른쪽으로 노드를 그려나가고, 자식이 둘 이상인 경우 자식이 가장 많은 노드를 오른쪽에, 나머지를 다른 각도로.

라는 룰로 그려보니 꽤 이해하기 쉬운 형태로 모양이 나오는 것 같았습니다.

그래서 만들어진게 저번 일지에 등장한 툴입니다.

그래프는 유니티 캔버스에 DataRenderer2D 라는 오픈소스를 사용해서 그렸습니다.

화면 왼쪽에는 유저 로그들이 토글로 뜨고, 이걸 누르면 오른쪽 그래프에 반영되는 식입니다.

아래에는 인게임 플레이타임에 기반한 타임라인이 있습니다.

로그를 바탕으로 그래프를 동적으로 만들다보니 시간에 따라 자식이 가장 많은 노드가 변하기 때문에 타임라인을 쭉 땡기면 좀 있어보입니다.

그리고 파이어베이스가 제공하는 좋은 기능들 중에는 실시간 이벤트 수신도 있어서, 타임라인 오른쪽의 빨간 버튼을 누르면 실시간으로도 볼 수 있게 했습니다.

이 기능으로 BIC 전시 때는 유저가 플레이 하고 있으면 개발을 멈추고 보고 있기도 했습니다.

그래프 위에서 아이콘이 움직이는 걸 보면서 유저들이 저희 게임을 플레이하는 걸 상상하고 있으면 기분이 좋더라구요.

최근에는 이걸 타입스크립트로 재작성해서 웹으로 옮겼습니다.

분석을 더 편하게 하기 위해 더 많은 기능을 넣고싶기도 하고, 자잘한 수정을 할 때가 종종 생겼는데 유니티로 작업을 하는게 좀 무거웠거든요.

사실 웹개발을 안해봐서 빠르게 만드려고 익숙한 유니티로 했던건데, 막상 웹으로 해보니까 웹은 정말 신세계네요.

코드 수정 -> 컴파일 -> 결과물 확인까지 1초. 왜 이걸 처음에 유니티로 만들었을까요..

자바스크립트쪽엔 그래프를 그리기 위한 오픈소스 라이브러리도 잔뜩 있었는데 몇 개 보다가 라이브러리를 공부하는게 더 오래 걸릴 것 같아서 기존 코드들을 copy&paste 했습니다.

드로잉에는 p5.js 를 사용했습니다.

읽어주셔서 감사합니다!

-------------이전글---------------

1편 소개

2편 괴물

3편 약탈자

4편 파편시스템

5편 대쉬퍼즐

6편 브금소개

7편 스프라이트 순서 처리

8편 레벨 에디팅 툴

9편 대화 시스템

10편 그래픽 리소스 제작과정

11편 레벨 프로토타입 영상

12편 지형 시스템

13편 버려진 레벨들

14편 무기 시스템

15편 룬 시스템

16편 폭탄 퍼즐 레벨

17편 몬스터 제작 과정

18편 모바일 최적화 삽질기

19편 특수효과 발전과정

20편 트리거 시스템

21편 픽셀 퍼펙트 세팅

22편 BIC전시후기 및 데모 공개

--------------------------

[스넬ㄹ(snails88)]

[연어(smosal)]

[연어(smosal)]

잘만들었네여

[익명(218.234)]

개쩐다

[연어(smosal)]

혹시 백단에서 로그 수집하는거 유저동의구하고 뭐그런건 상관없나여? 임의로 네트워크 연결되있는거 확인되면 그냥 막 데이터 전송 해도 문제없는것임? 혹시알아보셧던 정보같은것잇나요? aa게임사들 게임보면 로그수집이던 에러피드백이던 동의구하고 데이터전송하는거보면 다 이유가있긴 할꺼같은데..

[특수한발가락(seobyeongky)]

저희도 그 부분에 대해 여러모로 찾아봤었는데, 개인을 특정지을 수 없을 정도의 익명화를 한다면 데이터 수집 자체는 문제가 되지 않는다고 판단했습니다. 하지만 법률적으로 정확히 자문을 받아본 건 아니라서, 게임을 판매할 단계에서는 좀 더 조심스럽게 접근할 필요가 있을 것 같습니다.

[11(121.183)]

거기서 개인정보 수집약관이 들어가는거

[11(121.183)]

아 이건 좀 쩐다. 개추줌. 나도 유저 분석해야 하는데 이거저거 생각해봐도 너무 시간 걸려서 그냥 최소한의 정보만 유니티 아날리틱스로 집계하려고 하는 중. 위에 영상처럼 유저들이 어느시점에서 죽는지 동적으로 볼 수 있으면 대단하겠네. 히트맵 그려봐도 좋겠고. 근데 뭔가 너무 공들인 거 같애오옹 타임=이즈=머니 에옹! 배우고갑니다.

[익명(123.213)]

개쩐다 한번 강의올려줘요

[ㅇㅇㅇ(222.101)]

DataRenderer2D 개발자입니다. 헐 이런데서 볼줄이야 사용해 주셔서 감사합니다.

[특수한발가락(seobyeongky)]

한국인이 만든 건 알고 있었는데 이 글을 보실 줄은 몰랐네요. ㅋㅋㅋ 좋은 라이브러리 감사합니다.